{% extends "base.html" %}

{% block title %}漫剧 - AI创作工作台{% endblock %}

{% block extra_css %}
<style>
    .cd-page { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; color: #1f2937; margin: 0; padding: 0; }
    .cd-header { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; }
    .cd-title { font-size: 20px; font-weight: 600; color: #111827; }

    /* 流程步骤 */
    .cd-steps { display: flex; gap: 8px; padding: 16px 24px; border-bottom: 1px solid #e5e7eb; }
    .cd-step {
        padding: 8px 16px; border-radius: 6px; font-size: 13px;
        background: #ffffff; color: #6b7280; cursor: pointer; transition: all 0.2s;
    }
    .cd-step:hover { background: #e5e7eb; }
    .cd-step.active { background: #2563eb; color: #fff; }
    .cd-step.completed { background: #10b981; color: #fff; }

    .cd-content { padding: 24px; }
    .cd-panel {
        background: #ffffff; border-radius: 12px; padding: 20px;
        border: 1px solid #e5e7eb; margin-bottom: 16px;
    }
    .cd-panel-title {
        font-size: 16px; font-weight: 600; color: #111827;
        border-left: 3px solid #3b82f6; padding-left: 10px; margin-bottom: 16px;
    }

    /* 信息提取Tab */
    .cd-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
    .cd-tab {
        padding: 10px 20px; font-size: 14px; cursor: pointer;
        color: #6b7280; border-bottom: 2px solid transparent; transition: all 0.2s;
    }
    .cd-tab:hover { color: #1f2937; }
    .cd-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

    /* 卡片网格 */
    .cd-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
    .cd-card {
        background: #f1f5f9; border-radius: 10px; padding: 14px;
        border: 1px solid #e5e7eb; transition: all 0.2s;
    }
    .cd-card:hover { border-color: #2563eb; }
    .cd-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .cd-card-title { font-size: 15px; font-weight: 500; color: #111827; }
    .cd-card-actions { display: flex; gap: 6px; }
    .cd-card-btn {
        padding: 4px 8px; border-radius: 4px; font-size: 11px;
        background: #dbeafe; color: #3b82f6; border: 1px solid #2563eb; cursor: pointer;
    }
    .cd-card-btn:hover { background: #2563eb; color: #fff; }
    .cd-card-btn.danger { background: #5f1e1e; color: #ef4444; border-color: #ef4444; }
    .cd-card-btn.danger:hover { background: #ef4444; color: #fff; }
    .cd-card-desc { font-size: 12px; color: #6b7280; line-height: 1.5; margin-bottom: 12px; }
    .cd-card-images { display: flex; gap: 8px; margin-bottom: 12px; }
    .cd-card-img {
        width: 80px; height: 80px; border-radius: 6px; background: #ffffff;
        display: flex; align-items: center; justify-content: center; font-size: 11px; color: #6b7280;
    }
    .cd-card-meta { font-size: 11px; color: #6b7280; }

    /* 按钮 */
    .cd-btn {
        padding: 8px 16px; border-radius: 6px; border: none; font-size: 13px;
        cursor: pointer; transition: all 0.2s; font-weight: 500;
    }
    .cd-btn-primary { background: #2563eb; color: #fff; }
    .cd-btn-primary:hover { background: #1d4ed8; }
    .cd-btn-secondary { background: #e5e7eb; color: #374151; }
    .cd-btn-secondary:hover { background: #d1d5db; }
    .cd-btn-outline { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
    .cd-btn-outline:hover { border-color: #6b7280; color: #1f2937; }
    .cd-btn-gradient {
        background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; border: none;
    }
    .cd-btn-gradient:hover { background: linear-gradient(135deg, #1d4ed8, #0891b2); }

    /* 空状态 */
    .cd-empty { text-align: center; padding: 60px 20px; color: #6b7280; }
    .cd-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }

    /* 工具栏 */
    .cd-toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .cd-select {
        padding: 8px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 13px; outline: none; min-width: 150px;
    }
    .cd-select:focus { border-color: #2563eb; }

    /* 小说列表表格 */
    .novel-table { width: 100%; border-collapse: collapse; }
    .novel-table th {
        text-align: left; padding: 12px 16px; font-size: 13px; font-weight: 600;
        color: #374151; border-bottom: 1px solid #e5e7eb; background: #f1f5f9;
    }
    .novel-table td {
        padding: 12px 16px; font-size: 13px; color: #4b5563;
        border-bottom: 1px solid #e5e7eb;
    }
    .novel-table tr:hover td { background: rgba(14, 165, 233, 0.05); }
    .novel-cover {
        width: 40px; height: 56px; border-radius: 4px; background: #ffffff;
        display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .novel-tag {
        display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
        background: #dbeafe; color: #3b82f6; margin-right: 4px;
    }
    .novel-tag-green { background: #d1fae5; color: #047857; }
    .novel-tag-purple { background: #ede9fe; color: #6d28d9; }

    /* 弹窗 */
    .modal-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
        z-index: 1000; align-items: center; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-box {
        background: #ffffff; border-radius: 12px; width: 90%; max-width: 640px;
        max-height: 90vh; overflow-y: auto; border: 1px solid #e5e7eb;
    }
    .modal-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
    }
    .modal-title { font-size: 16px; font-weight: 600; color: #111827; }
    .modal-close {
        background: none; border: none; color: #6b7280; font-size: 20px; cursor: pointer;
    }
    .modal-close:hover { color: #111827; }
    .modal-body { padding: 20px; }
    .modal-footer {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 16px 20px; border-top: 1px solid #e5e7eb;
    }

    /* 弹窗内Tab */
    .modal-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; }
    .modal-tab {
        padding: 10px 20px; font-size: 14px; cursor: pointer;
        color: #6b7280; border-bottom: 2px solid transparent; transition: all 0.2s;
    }
    .modal-tab:hover { color: #1f2937; }
    .modal-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

    /* 子Tab */
    .sub-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
    .sub-tab {
        padding: 6px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
        background: #f1f5f9; color: #6b7280; border: 1px solid #e5e7eb; transition: all 0.2s;
    }
    .sub-tab:hover { border-color: #2563eb; }
    .sub-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* 表单 */
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px; }
    .form-input {
        width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 13px; outline: none;
    }
    .form-input:focus { border-color: #2563eb; }
    .form-textarea {
        width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 13px; outline: none; resize: vertical; min-height: 120px;
    }
    .form-textarea:focus { border-color: #2563eb; }
    .form-hint { font-size: 12px; color: #6b7280; margin-top: 4px; }
    .form-select {
        padding: 10px 12px; border-radius: 6px; border: 1px solid #e5e7eb;
        background: #f1f5f9; color: #1f2937; font-size: 13px; outline: none; width: 100%;
    }
    .form-select:focus { border-color: #2563eb; }

    /* 标签选择 */
    .tag-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .tag-option {
        padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
        background: #f1f5f9; color: #6b7280; border: 1px solid #e5e7eb; transition: all 0.2s;
    }
    .tag-option:hover { border-color: #2563eb; }
    .tag-option.active { background: #2563eb; color: #fff; border-color: #2563eb; }

    /* 分镜精修 - 步骤卡片 */
    .rf-step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
    .rf-step-card {
        background: #ffffff; border-radius: 12px; padding: 16px 20px;
        border: 1px solid #e5e7eb; cursor: pointer; transition: all 0.25s;
        position: relative; overflow: hidden;
    }
    .rf-step-card:hover { border-color: #2563eb; transform: translateY(-1px); }
    .rf-step-card.active {
        background: linear-gradient(135deg, #dbeafe, #0c4a6e);
        border-color: #2563eb;
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.15);
    }
    .rf-step-card.done { background: #d1fae5; border-color: #10b981; }
    .rf-step-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .rf-step-num {
        width: 24px; height: 24px; border-radius: 50%;
        background: #e5e7eb; color: #6b7280; font-size: 12px; font-weight: 600;
        display: flex; align-items: center; justify-content: center;
    }
    .rf-step-card.active .rf-step-num { background: #2563eb; color: #fff; }
    .rf-step-card.done .rf-step-num { background: #10b981; color: #fff; }
    .rf-step-title { font-size: 14px; font-weight: 600; color: #111827; }
    .rf-step-desc { font-size: 12px; color: #6b7280; line-height: 1.5; }
    .rf-step-card.active .rf-step-desc { color: #6b7280; }
    .rf-step-card.done .rf-step-desc { color: #6ee7b7; }

    /* 分镜精修 - 左右分栏 */
    .rf-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    @media (max-width: 900px) {
        .rf-main { grid-template-columns: 1fr; }
    }
    .rf-left, .rf-right {
        background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb;
        display: flex; flex-direction: column; min-height: 420px;
    }
    .rf-left { }
    .rf-right { overflow: hidden; }
    .rf-section { padding: 18px 20px; border-bottom: 1px solid #e5e7eb; }
    .rf-section:last-child { border-bottom: none; }
    .rf-section-title {
        font-size: 15px; font-weight: 600; color: #111827;
        display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    }
    .rf-section-title .badge {
        font-size: 11px; padding: 2px 8px; border-radius: 10px;
        background: #2563eb; color: #fff; font-weight: 500;
    }
    .rf-field { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
    .rf-field-label { font-size: 13px; color: #6b7280; width: 72px; flex-shrink: 0; }
    .rf-field-label.inline { width: auto; margin-right: 8px; }
    .rf-field .form-select, .rf-field .form-input { flex: 1; min-width: 180px; }
    .rf-scope-options { display: flex; gap: 12px; flex-wrap: wrap; }
    .rf-scope-box {
        margin-top: 12px; padding: 14px; background: #f1f5f9;
        border: 1px solid #e5e7eb; border-radius: 8px; max-height: 260px; overflow-y: auto;
    }
    .rf-source-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
    .rf-source-row .tag-option { font-size: 12px; padding: 5px 12px; }
    .rf-template-hint { font-size: 11px; color: #6b7280; margin-top: 4px; line-height: 1.5; }
    .ref-checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
    .ref-checkbox-row input[type="checkbox"] { accent-color: #2563eb; width: 15px; height: 15px; margin-top: 2px; }
    .ref-checkbox-row label { font-size: 12px; color: #6b7280; line-height: 1.6; }
    .ref-checkbox-row label b { color: #fbbf24; }

    /* 右侧预览区 */
    .rf-preview-header {
        padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
        display: flex; align-items: center; justify-content: space-between;
    }
    .rf-preview-title { font-size: 15px; font-weight: 600; color: #111827; }
    .rf-preview-body { flex: 1; padding: 20px; overflow-y: auto; }
    .rf-preview-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        height: 100%; min-height: 280px; text-align: center; color: #6b7280;
    }
    .rf-preview-empty .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
    .rf-preview-empty .title { font-size: 15px; color: #6b7280; margin-bottom: 6px; }
    .rf-preview-empty .desc { font-size: 12px; color: #d1d5db; line-height: 1.6; max-width: 240px; }
    .rf-preview-compare { display: flex; flex-direction: column; gap: 12px; }
    .rf-preview-compare .rf-compare-stats { margin-bottom: 0; }

    /* 对比面板 */
    .rf-compare-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .rf-stat-card { padding: 12px; border-radius: 8px; text-align: center; }
    .rf-stat-card.orig { background: #f1f5f9; border: 1px solid #e5e7eb; }
    .rf-stat-card.draft { background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(6,182,212,0.04)); border: 1px solid #2563eb66; }
    .rf-stat-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
    .rf-stat-value { font-size: 20px; font-weight: 700; color: #111827; }
    .rf-stat-value .unit { font-size: 12px; font-weight: 400; color: #6b7280; }
    .rf-diff-list { max-height: 320px; overflow-y: auto; }
    .rf-diff-item { padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
    .rf-diff-item:last-child { border-bottom: none; }
    .rf-diff-header { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; }
    .rf-diff-scene { font-weight: 600; color: #111827; }
    .rf-diff-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
    .rf-diff-badge.changed { background: #7f1d1d; color: #fecaca; }
    .rf-diff-badge.same { background: #064e3b; color: #6ee7b7; }
    .rf-diff-meta { font-size: 12px; color: #6b7280; margin-left: auto; }
    .rf-shot-diff { font-size: 12px; margin: 3px 0; padding-left: 10px; line-height: 1.6; }
    .rf-shot-diff .old { color: #6b7280; }
    .rf-shot-diff .arrow { color: #fbbf24; margin: 0 4px; }
    .rf-shot-diff .new { color: #3b82f6; }

    /* 应用/回退操作栏 */
    .rf-action-bar {
        padding: 14px 20px; border-top: 1px solid #e5e7eb;
        display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    }
    .rf-action-bar .status { font-size: 12px; color: #6b7280; flex: 1; }
    .rf-force-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #f59e0b; cursor: pointer; }

    /* 精修历史 */
    .rf-history-section {
        background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 16px 20px;
    }
    .rf-history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .rf-history-title { font-size: 15px; font-weight: 600; color: #111827; }
    .rf-history-title .hint { font-size: 12px; color: #6b7280; font-weight: 400; margin-left: 6px; }
    .rf-history-list { display: flex; flex-direction: column; gap: 8px; }
    .rf-history-item {
        padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
        background: #f1f5f9; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .rf-history-info { flex: 1; min-width: 200px; font-size: 13px; color: #1f2937; }
    .rf-history-info .sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .rf-history-status {
        font-size: 11px; padding: 2px 10px; border-radius: 10px;
    }
    .rf-history-status.draft { background: #3b1e5f; color: #a78bfa; }
    .rf-history-status.applied { background: #064e3b; color: #6ee7b7; }
    .rf-history-status.rolled_back { background: #dbeafe; color: #93c5fd; }
    .rf-history-empty { text-align: center; padding: 30px 20px; color: #6b7280; }
    .rf-history-empty .icon { font-size: 40px; margin-bottom: 8px; opacity: 0.3; }
    .rf-history-actions { display: flex; gap: 6px; }

    /* 加载动画 */
    .rf-loading {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 30px; color: #6b7280;
    }
    .rf-loading .spinner {
        width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #2563eb;
        border-radius: 50%; animation: rf-spin 1s linear infinite; margin-bottom: 12px;
    }
    @keyframes rf-spin { to { transform: rotate(360deg); } }

    /* 滚动条 */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

    /* ===== UI 精修：统一设计语言 ===== */
    .cd-btn-primary { border-radius: 10px; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.2s ease; }
    .cd-btn-primary:hover { box-shadow: 0 4px 12px rgba(37,99,235,0.22); transform: translateY(-1px); }
    .cd-btn-outline, .cd-btn-secondary { border-radius: 10px; border: 1px solid #d1d5db; color: #374151; background: #ffffff; }
    .cd-btn-outline:hover, .cd-btn-secondary:hover { background: #f8fafc; border-color: #9ca3af; }
    .cd-btn-gradient { border-radius: 10px; box-shadow: 0 2px 8px rgba(37,99,235,0.18); }
    .cd-select, .form-input, .form-select, .form-textarea { border-radius: 10px; border: 1px solid #d1d5db; background: #ffffff; color: #1f2937; padding: 9px 12px; }
    .cd-select:focus, .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
    .cd-panel, .cd-card { border-radius: 14px; }
    </style>
{% endblock %}

{% block content %}
<div class="cd-page">
    <div class="cd-header">
        <div class="cd-title">漫剧</div>
    </div>

    <!-- 流程步骤 -->
    <div class="cd-steps">
        <div class="cd-step" onclick="switchStep('radar')">选题雷达</div>
        <div class="cd-step active" onclick="switchStep('novel')">1. 小说生成</div>
        <div class="cd-step" onclick="switchStep('script')">2. 剧本转换</div>
        <div class="cd-step" onclick="switchStep('extraction')">3. 信息提取</div>
        <div class="cd-step" onclick="switchStep('storyboard')">4. 分镜生成</div>
        <div class="cd-step" onclick="switchStep('refine')">5. 分镜精修</div>
        <div class="cd-step" onclick="switchStep('video')">6. 视频生成</div>
    </div>

    <div class="cd-content">
        <!-- 选题雷达 -->
        <div id="step-radar" class="cd-step-content" style="display: none;">
            <!-- 标题栏 -->
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
                <div>
                    <div style="font-size:20px;font-weight:600;color:#111827;">选题雷达</div>
                    <div style="font-size:12px;color:#6b7280;margin-top:4px;">
                        短剧行业公开榜单 · <span id="radar-date-range"></span>
                        <span id="radar-data-sources" style="margin-left:8px;color:#2563eb;"></span>
                        <span id="radar-last-update" style="margin-left:8px;"></span>
                    </div>
                </div>
                <div style="display:flex;gap:8px;">
                    <button class="cd-btn cd-btn-outline" onclick="openRadarApiConfig()" style="padding:8px 16px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;">⚙️ API配置</button>
                    <button class="cd-btn cd-btn-outline" onclick="refreshRadar()" style="padding:8px 16px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;">🔄 自动更新</button>
                </div>
            </div>

            <!-- 采集错误提示横幅 -->
            <div id="radar-error-banner" style="display:none;margin-bottom:16px;padding:10px 14px;background:#7f1d1d;border:1px solid #ef444455;border-radius:8px;font-size:13px;color:#fecaca;"></div>

            <!-- 统计卡片行 -->
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;">
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:12px;color:#6b7280;margin-bottom:6px;">总榜剧集</div>
                    <div id="radar-stat-total-dramas" style="font-size:28px;font-weight:700;color:#3b82f6;">0</div>
                    <div id="radar-stat-total-dramas-desc" style="font-size:11px;color:#6b7280;margin-top:4px;">加载中...</div>
                </div>
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:12px;color:#6b7280;margin-bottom:6px;">总播放量</div>
                    <div id="radar-stat-total-views" style="font-size:28px;font-weight:700;color:#111827;">0</div>
                    <div id="radar-stat-total-views-desc" style="font-size:11px;color:#6b7280;margin-top:4px;">统计周期内总播放</div>
                </div>
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:12px;color:#6b7280;margin-bottom:6px;">头部题材份额</div>
                    <div id="radar-stat-top-topic-share" style="font-size:28px;font-weight:700;color:#111827;">0%</div>
                    <div id="radar-stat-top-topic-desc" style="font-size:11px;color:#6b7280;margin-top:4px;">加载中...</div>
                </div>
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:12px;color:#6b7280;margin-bottom:6px;">题材覆盖</div>
                    <div id="radar-stat-topic-count" style="font-size:28px;font-weight:700;color:#111827;">0</div>
                    <div style="font-size:11px;color:#6b7280;margin-top:4px;">当前题材总数量</div>
                </div>
            </div>

            <!-- 总榜Top10 + 今日信号 -->
            <div style="display:grid;grid-template-columns:1fr 380px;gap:12px;margin-bottom:16px;">
                <!-- 总榜 Top 10 -->
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                        <div style="font-size:15px;font-weight:600;color:#111827;">总榜 Top 10</div>
                        <select id="radar-rank-type" onchange="renderRadarTop10()" style="padding:4px 10px;border-radius:4px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:12px;">
                            <option value="total">题材：总榜</option>
                            <option value="urban">都市逆袭</option>
                            <option value="rebirth">重生打脸</option>
                            <option value="historical">历史古代</option>
                            <option value="mystery">悬疑烧脑</option>
                        </select>
                    </div>
                    <div id="radar-top10-list"></div>
                </div>

                <!-- 今日信号 -->
                <div style="display:flex;flex-direction:column;gap:12px;">
                    <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;flex:1;">
                        <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:12px;">今日信号</div>
                        <div style="font-size:12px;color:#6b7280;margin-bottom:12px;">从全量榜单中提炼出的关键信号</div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                            <div>
                                <div style="font-size:12px;color:#6b7280;margin-bottom:4px;">爆款第一</div>
                                <div id="radar-signal-top1" style="font-size:13px;color:#111827;font-weight:500;">-</div>
                                <div id="radar-signal-top1-views" style="font-size:11px;color:#3b82f6;margin-top:2px;">0 播放</div>
                            </div>
                            <div>
                                <div style="font-size:12px;color:#6b7280;margin-bottom:4px;">题材热区</div>
                                <div id="radar-signal-hot-topic" style="font-size:13px;color:#111827;font-weight:500;">-</div>
                                <div id="radar-signal-hot-topic-share" style="font-size:11px;color:#3b82f6;margin-top:2px;">0% 总份额</div>
                            </div>
                            <div>
                                <div style="font-size:12px;color:#6b7280;margin-bottom:4px;">头部题材份额</div>
                                <div id="radar-signal-top-share" style="font-size:13px;color:#111827;font-weight:500;">0%</div>
                                <div id="radar-signal-top-share-views" style="font-size:11px;color:#3b82f6;margin-top:2px;">0 播放</div>
                            </div>
                            <div>
                                <div style="font-size:12px;color:#6b7280;margin-bottom:4px;">霸榜集中</div>
                                <div id="radar-signal-top-theater" style="font-size:13px;color:#111827;font-weight:500;">-</div>
                                <div id="radar-signal-top-theater-count" style="font-size:11px;color:#3b82f6;margin-top:2px;">0 部上榜</div>
                            </div>
                        </div>
                    </div>
                    <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;flex:1;">
                        <div id="radar-signal-summary" style="font-size:12px;color:#6b7280;line-height:1.6;">
                            数据加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题材播放趋势 + 题材播放份额 -->
            <div style="display:grid;grid-template-columns:1fr 380px;gap:12px;margin-bottom:16px;">
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                        <div style="font-size:15px;font-weight:600;color:#111827;">题材播放趋势</div>
                        <div style="display:flex;gap:6px;">
                            <button class="radar-time-btn active" onclick="switchRadarTimeRange('7d', this)" style="padding:4px 12px;border-radius:4px;border:1px solid #2563eb;background:#2563eb;color:#fff;font-size:11px;cursor:pointer;">近 7 天</button>
                            <button class="radar-time-btn" onclick="switchRadarTimeRange('30d', this)" style="padding:4px 12px;border-radius:4px;border:1px solid #e5e7eb;background:transparent;color:#6b7280;font-size:11px;cursor:pointer;">近 1 个月</button>
                            <span style="padding:4px 12px;font-size:11px;color:#6b7280;" id="radar-date-label">2026-08-11 ~ 2026-08-17</span>
                        </div>
                    </div>
                    <div style="font-size:11px;color:#6b7280;margin-bottom:8px;">按每日总榜各题材上线短剧播放量，展示近期内播放最高的前 6 个题材</div>
                    <canvas id="radar-trend-chart" style="width:100%;height:220px;"></canvas>
                    <div id="radar-trend-legend" style="display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:#6b7280;"></div>
                </div>
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:4px;">题材播放份额</div>
                    <div style="font-size:11px;color:#6b7280;margin-bottom:12px;">当前总榜播放量占比前 6 的题材，其余合并为"其他"</div>
                    <canvas id="radar-pie-chart" style="width:100%;height:200px;"></canvas>
                    <div id="radar-pie-legend" style="font-size:11px;color:#6b7280;margin-top:8px;"></div>
                </div>
            </div>

            <!-- 题材热区 + 剧场战力 -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:4px;">题材热区</div>
                    <div style="font-size:11px;color:#6b7280;margin-bottom:16px;">按播放量排序，显示前 6 个题材</div>
                    <div id="radar-hot-topics"></div>
                </div>
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;">
                    <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:4px;">剧场战力</div>
                    <div style="font-size:11px;color:#6b7280;margin-bottom:12px;">上榜剧集多的厂牌/剧场</div>
                    <table style="width:100%;border-collapse:collapse;font-size:12px;">
                        <thead>
                            <tr style="color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                <th style="text-align:left;padding:6px 4px;">剧场</th>
                                <th style="text-align:center;padding:6px 4px;">上榜</th>
                                <th style="text-align:right;padding:6px 4px;">代表作播放</th>
                                <th style="text-align:right;padding:6px 4px;">主打题材</th>
                            </tr>
                        </thead>
                        <tbody id="radar-theater-list"></tbody>
                    </table>
                </div>
            </div>

            <div style="font-size:11px;color:#d1d5db;text-align:center;margin-top:8px;">
                <span id="radar-data-sources" style="color:#6b7280;">数据来源：加载中...</span> | 短剧数据为周/月/季度/年度累计播放量。
            </div>
        </div>

        <!-- 步骤1: 小说生成 -->
        <div id="step-novel" class="cd-step-content">
            <div class="cd-panel">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <div class="cd-panel-title" style="margin-bottom: 0;">小说列表</div>
                    <div style="display: flex; gap: 8px;">
                        <button class="cd-btn cd-btn-outline" onclick="syncFromWorkshop()">短剧工坊同步</button>
                        <button class="cd-btn cd-btn-gradient" onclick="openCreateModal()">导入 / 创作小说</button>
                    </div>
                </div>
                <table class="novel-table">
                    <thead>
                        <tr>
                            <th style="width: 60px;">封面</th>
                            <th>小说名称</th>
                            <th>标签</th>
                            <th style="width: 80px;">章节数</th>
                            <th style="width: 420px;">操作</th>
                            <th style="width: 140px;">创建时间</th>
                        </tr>
                    </thead>
                    <tbody id="novel-table-body">
                        <tr>
                            <td colspan="6" style="text-align: center; color: #6b7280; padding: 40px;">
                                暂无小说，点击"导入 / 创作小说"开始
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 步骤2: 剧本转换 -->
        <div id="step-script" class="cd-step-content" style="display: none;">
            <div style="display: grid; grid-template-columns: 420px 1fr; gap: 16px; height: calc(100vh - 130px);">
                <!-- 左侧: 剧本转换配置 -->
                <div class="cd-panel" style="margin-bottom: 0; overflow-y: auto; display: flex; flex-direction: column;">
                    <div class="cd-panel-title" style="flex-shrink: 0;">剧本转换</div>
                    <div style="margin-top: 16px; flex: 1; display: flex; flex-direction: column; gap: 14px;">
                        <div class="form-group">
                            <div class="form-label" style="font-size: 14px; color: #1f2937; font-weight: 500;">选择小说</div>
                            <select id="script-novel-select" class="form-select" style="padding: 12px;" onchange="onScriptNovelChanged()">
                                <option value="">请选择小说</option>
                            </select>
                        </div>

                        <div class="form-group" style="flex-shrink: 0;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <div class="form-label" style="font-size: 14px; color: #1f2937; font-weight: 500; margin-bottom: 0;">选择章节</div>
                                <label style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; cursor: pointer; user-select: none;" onclick="toggleScriptSelectAll(this)">
                                    <input type="checkbox" id="script-select-all" checked style="accent-color: #06b6d4; cursor: pointer;">
                                    全选
                                </label>
                            </div>
                            <div id="script-chapter-list" style="max-height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: #f1f5f9;"></div>
                        </div>

                        <div class="form-group" style="position: relative;">
                            <div class="form-label" style="font-size: 14px; color: #1f2937; font-weight: 500;">选择提示词模板</div>
                            <div id="script-template-select" onclick="toggleScriptTemplateDropdown()" style="width:100%;padding:12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#6b7280;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;outline:none;" tabindex="0">
                                <span id="script-template-label">请选择小说转剧本模板</span>
                                <span style="color:#6b7280;">▼</span>
                            </div>
                            <div id="script-template-dropdown" style="display:none;position:absolute;left:24px;right:24px;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;max-height:200px;overflow-y:auto;z-index:10;margin-top:4px;"></div>
                            <input type="hidden" id="script-template-id" value="">
                        </div>
                        <div class="form-group">
                            <div class="form-label" style="font-size: 14px; color: #1f2937; font-weight: 500;">选择大模型配置（语言大模型）</div>
                            <select id="script-model-select" class="form-select" style="padding: 12px;">
                                <option value="">请选择语言大模型</option>
                            </select>
                        </div>

                        <div id="script-progress-box" style="display:none;margin-bottom:0;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:10px;">
                            <div style="font-size:12px;color:#3b82f6;margin-bottom:6px;" id="script-progress-text">准备转换...</div>
                            <div style="height:6px;background:#ffffff;border-radius:3px;overflow:hidden;">
                                <div id="script-progress-bar" style="height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#06b6d4);transition:width .3s;"></div>
                            </div>
                        </div>

                        <button id="script-start-btn" class="cd-btn cd-btn-gradient" style="width: 100%; padding: 14px; font-size: 15px; margin-top: 4px;" onclick="startScriptConversion()">
                            ⚡ 开始转换
                        </button>
                        <div style="font-size:12px;color:#6b7280;line-height:1.7;">💡 一集=一章，逐集转换（每集自动衔接上一集末场景）。转换后可点击右侧每集的「查看场景」做场景级原位编辑。</div>
                        <button id="coze-btn-script" class="cd-btn cd-btn-outline" style="width: 100%; padding: 12px; font-size: 14px; display:none;" onclick="openCozeWorkflowFor('script')">
                            🤖 Coze工作流
                        </button>
                    </div>
                </div>

                <!-- 右侧: 剧本结果 -->
                <div class="cd-panel" style="margin-bottom: 0; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
                        <div class="cd-panel-title" style="margin-bottom: 0;">剧本结果</div>
                        <div style="display: flex; gap: 8px;">
                            <button id="script-clear-btn" onclick="clearScriptResults()" style="display:none;background:linear-gradient(135deg,#ec4899,#f43f5e);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:12px;cursor:pointer;">🗑 清空全部</button>
                        </div>
                    </div>
                    <div id="script-tabs" style="display:none;display:flex;gap:4px;margin-top:12px;border-bottom:1px solid #e5e7eb;padding-bottom:8px;flex-shrink:0;"></div>
                    <div id="script-result-content" style="flex:1; overflow-y: auto; min-height: 0;">
                        <div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7280;">
                            <div style="font-size: 48px; opacity: 0.3; margin-bottom: 12px;">📄</div>
                            <div style="font-size: 14px; margin-bottom: 16px;">暂无剧本</div>
                            <div style="font-size: 13px; text-align: center; line-height: 1.6; color: #3b82f6;">
                                在左侧选择小说、章节、模板和模型配置<br>点击「开始转换」生成剧本
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤3: 分镜生成（千山AI风格：顶部5下拉 + 操作条 + 右快速定位 + 左场景卡片） -->
        <div id="step-storyboard" class="cd-step-content" style="display: none;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                <div style="font-size:22px;font-weight:700;color:#1f2937;letter-spacing:0.5px;">
                    <span style="background:linear-gradient(90deg,#22d3ee,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;">分镜管理</span>
                </div>
                <button onclick="refreshStoryboard()" style="padding:8px 18px;background:linear-gradient(135deg,#3b82f6,#22d3ee);color:#082f49;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 4px 16px rgba(14,165,233,0.18);">
                    <span>↻</span> 刷新
                </button>
            </div>

            <!-- 顶部配置栏 -->
            <div style="background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(15,23,42,0.05);">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;">
                    <!-- 1. 选择小说 -->
                    <select id="sb-novel-select" class="form-select" onchange="onSBNovelChanged()" style="padding:10px 12px;min-width:160px;background:#ffffff;border:1px solid #d1d5db;color:#1f2937;border-radius:8px;flex:1;min-width:120px;">
                        <option value="">选择小说</option>
                    </select>
                    <!-- 2. 选择章节 -->
                    <select id="sb-chapter-select" class="form-select" style="padding:10px 12px;min-width:200px;background:#ffffff;border:1px solid #d1d5db;color:#1f2937;border-radius:8px;flex:1;min-width:120px;">
                        <option value="">选择章节</option>
                    </select>
                    <!-- 3. 配置分镜模板按钮（未选中文字"配置分镜模板"+▼；选中后显示模板名） -->
                    <button id="sb-template-btn" onclick="openTemplateModal()" style="padding:10px 14px;background:linear-gradient(90deg,#6366f1 0%,#8b5cf6 100%);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;min-width:200px;justify-content:center;flex:0 0 auto;">
                        <span>🟦</span>
                        <span id="sb-template-label">配置分镜模板</span>
                        <span id="sb-template-caret" style="margin-left:2px;color:#c7d2fe;">▼</span>
                    </button>
                    <!-- 4. LLM配置 -->
                    <select id="sb-llm-config" class="form-select" style="padding:10px 12px;min-width:170px;background:#ffffff;border:1px solid #d1d5db;color:#1f2937;border-radius:8px;">
                        <option value="">语言大模型（LLM）</option>
                    </select>
                    <!-- 5. 视觉风格（原来的style-prompt-select，保留"可选"文案） -->
                    <div style="position:relative;min-width:200px;">
                        <select id="sb-style-select" onchange="onSBStyleChanged(this)" style="width:100%;padding:10px 12px;background:#ffffff;border:1px solid #d1d5db;color:#1f2937;border-radius:8px;">
                            <option value="">风格提示词（可选）</option>
                        </select>
                    </div>
                    <input type="hidden" id="selected-style-prompt" value="">
                    <!-- 章节快速定位（右侧快速定位面板已经有，保留在隐藏同步用） -->
                    <select id="sb-quick-scene" class="form-select" onchange="onSBQuickScene(this.value)" style="display:none;">
                        <option value="">定位章节</option>
                    </select>
                </div>

                <!-- 操作按钮行 -->
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                    <button onclick="clearStoryboard()" style="padding:8px 16px;background:#450a0a;border:1px solid #b91c1c;color:#fecaca;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;">清空分镜</button>
                    <button onclick="batchGenerateStoryboard()" style="padding:8px 20px;background:linear-gradient(90deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(14,165,233,0.2);">
                        <span>⦿</span> 批量生成全部分镜
                    </button>
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;cursor:pointer;background:#f8fafc;padding:6px 10px;border:1px solid #d1d5db;border-radius:8px;">
                        <input type="checkbox" id="sb-refine-mode" style="accent-color:#3b82f6;width:14px;height:14px;">
                        分镜精修
                    </label>
                    <button onclick="exportStoryboard()" style="padding:8px 14px;background:#ffffff;border:1px solid #d1d5db;color:#374151;border-radius:8px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;">
                        导出分镜 <span style="color:#d1d5db;">▼</span>
                    </button>
                    <button id="coze-btn-storyboard" style="display:none;padding:8px 14px;background:#ffffff;border:1px solid #d1d5db;color:#374151;border-radius:8px;font-size:13px;cursor:pointer;" onclick="openCozeWorkflowFor('storyboard')">🤖 Coze工作流</button>

                    <div style="flex:1;"></div>

                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="sb-cross-chapter" checked style="accent-color:#10b981;width:14px;height:14px;">
                        跨章节衔接
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="sb-char-status" checked style="accent-color:#10b981;width:14px;height:14px;">
                        生成人物状态
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="sb-cross-section" checked style="accent-color:#10b981;width:14px;height:14px;">
                        跨小节别避重
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="sb-avoid-shot" checked style="accent-color:#10b981;width:14px;height:14px;">
                        跨小节景别避重
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="sb-ref-scene" style="accent-color:#2563eb;width:14px;height:14px;">
                        参考场景图生成
                    </label>
                </div>
            </div>

            <!-- 主体: 左 场景卡片列表 + 右 快速定位面板 -->
            <div style="display:flex;gap:14px;align-items:flex-start;">
                <!-- 左侧：场景卡片（左剧本 + 右分镜面板） -->
                <div id="storyboard-scenes-container" style="flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;">
                    <div id="storyboard-list" style="background:transparent;padding:0;min-height:300px;display:flex;flex-direction:column;gap:14px;">
                        <div class="cd-empty" style="background:#ffffff;border:1px dashed #cbd5e1;border-radius:14px;padding:60px 20px;">
                            <div class="cd-empty-icon" style="font-size:48px;margin-bottom:12px;">🎬</div>
                            <div style="font-size:14px;color:#6b7280;">暂无分镜</div>
                            <div style="font-size:13px;color:#6b7280;margin-top:8px;">选择小说、剧本章节和分镜模板，点击「批量生成全部分镜」生成分镜</div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：快速定位面板 -->
                <div style="width:280px;flex-shrink:0;">
                    <div style="background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;position:sticky;top:16px;box-shadow:0 2px 10px rgba(15,23,42,0.05);">
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                            <div style="font-size:13px;font-weight:600;color:#4b5563;display:flex;align-items:center;gap:6px;">
                                <span style="color:#3b82f6;">⬨</span> 快速定位
                                <span style="color:#94a3b8;font-weight:400;">›</span>
                            </div>
                            <span style="color:#6b7280;font-size:11px;">点击场景或小节直接定位</span>
                        </div>
                        <div id="sb-quick-nav" style="max-height:calc(100vh - 340px);overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:6px;">
                            <div style="font-size:12px;color:#6b7280;">暂无分镜场景，请先选择小说章节并生成。</div>
                        </div>
                        <button onclick="scrollTo(0,0)" style="margin-top:12px;width:100%;padding:8px;background:#f8fafc;border:1px solid #d1d5db;color:#374151;border-radius:8px;font-size:12px;cursor:pointer;">↑ 返回顶部</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤5: 分镜精修 -->
        <div id="step-refine" class="cd-step-content" style="display: none;">
            <!-- 顶部说明 -->
            <div style="background:#ffffff;border-radius:12px;padding:16px 20px;border:1px solid #e5e7eb;margin-bottom:16px;">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap;">
                    <span style="font-size:18px;">✨</span>
                    <div style="font-size:17px;font-weight:600;color:#111827;">分镜精修</div>
                    <span id="refine-current-sb" style="font-size:12px;color:#6b7280;"></span>
                </div>
                <div style="font-size:12px;color:#6b7280;line-height:1.7;">
                    在初版分镜之后做二次加工。先生成<strong style="color:#3b82f6;">临时草稿</strong>、确认差异，再安全应用到正式分镜。
                    <span style="color:#fbbf24;">精修不会直接覆盖原分镜</span>：应用前可预览，应用后保留原始快照并可一键回退。
                </div>
            </div>

            <!-- 步骤卡片 -->
            <div class="rf-step-cards">
                <div class="rf-step-card active" id="rf-card-1" onclick="refineGoStep(1)">
                    <div class="rf-step-card-header">
                        <div class="rf-step-num">1</div>
                        <div class="rf-step-title">选范围</div>
                    </div>
                    <div class="rf-step-desc">整章·场景·小节</div>
                </div>
                <div class="rf-step-card" id="rf-card-2" onclick="refineGoStep(2)">
                    <div class="rf-step-card-header">
                        <div class="rf-step-num">2</div>
                        <div class="rf-step-title">加工方式</div>
                    </div>
                    <div class="rf-step-desc">模板 / LLM直接要求</div>
                </div>
                <div class="rf-step-card" id="rf-card-3" onclick="refineGoStep(3)">
                    <div class="rf-step-card-header">
                        <div class="rf-step-num">3</div>
                        <div class="rf-step-title">确认应用</div>
                    </div>
                    <div class="rf-step-desc">可回退，不删媒体</div>
                </div>
            </div>

            <!-- 左右分栏 -->
            <div class="rf-main">
                <!-- 左侧：步骤表单 -->
                <div class="rf-left">
                    <!-- 步骤1: 选择精修范围 -->
                    <div id="rf-panel-1" class="rf-section">
                        <div class="rf-section-title">
                            <span class="badge">1</span> 选择精修范围
                        </div>
                        <div class="rf-field">
                            <label class="rf-field-label">作品</label>
                            <select id="rf-work-select" class="form-select" onchange="onRefineWorkChanged()">
                                <option value="">选择作品（小说）</option>
                            </select>
                        </div>
                        <div class="rf-field">
                            <label class="rf-field-label">章节/剧本</label>
                            <select id="rf-chapter-select" class="form-select" onchange="onRefineChapterChanged()">
                                <option value="">选择章节/剧本</option>
                            </select>
                            <span id="rf-storyboard-info" style="font-size:11px;color:#6b7280;margin-left:4px;"></span>
                        </div>
                        <div class="rf-field">
                            <label class="rf-field-label">处理范围</label>
                            <div class="rf-scope-options">
                                <label class="tag-option active" id="rf-scope-tag-chapter" style="cursor:pointer;" onclick="setRefineScope('chapter')">
                                    <input type="radio" name="rf-scope" value="chapter" style="display:none;" checked> 整章精修
                                </label>
                                <label class="tag-option" id="rf-scope-tag-scene" style="cursor:pointer;" onclick="setRefineScope('scene')">
                                    <input type="radio" name="rf-scope" value="scene" style="display:none;"> 单场景精修
                                </label>
                                <label class="tag-option" id="rf-scope-tag-shot" style="cursor:pointer;" onclick="setRefineScope('shot')">
                                    <input type="radio" name="rf-scope" value="shot" style="display:none;"> 单小节精修
                                </label>
                            </div>
                        </div>
                        <div id="rf-scope-box" class="rf-scope-box" style="display:none;">
                            <div id="rf-scene-options"></div>
                            <div id="rf-shot-options" style="display:none;margin-top:10px;border-top:1px solid #ffffff;padding-top:10px;"></div>
                        </div>
                        <div style="display:flex;justify-content:flex-end;margin-top:14px;">
                            <button class="cd-btn cd-btn-gradient" onclick="refineGoStep(2)" style="padding:10px 20px;font-weight:600;">下一步 →</button>
                        </div>
                    </div>

                    <!-- 步骤2: 选择加工方式 -->
                    <div id="rf-panel-2" class="rf-section" style="display:none;">
                        <div class="rf-section-title">
                            <span class="badge">2</span> 选择加工方式
                        </div>
                        <div class="rf-source-row">
                            <label class="rf-field-label inline">精修要求来源</label>
                            <label class="tag-option active" id="rf-source-tag-template" style="cursor:pointer;" onclick="setRefineSource('template')">
                                <input type="radio" name="rf-source" value="template" style="display:none;" checked> 选择本地模板
                            </label>
                            <label class="tag-option" id="rf-source-tag-llm" style="cursor:pointer;" onclick="setRefineSource('llm')">
                                <input type="radio" name="rf-source" value="llm" style="display:none;"> 直接输入精修要求
                            </label>
                        </div>
                        <div id="rf-template-box" style="margin:0 0 12px 0;">
                            <select id="rf-template-select" class="form-select" style="width:100%;">
                                <option value="">[系统预制] 分镜精修（默认）</option>
                            </select>
                            <div class="rf-template-hint">模板决定精修方式（重排节奏、增减小节、强化画面细节…）。可在「系统设置 → 提示词模板」新建分类为「分镜精修」的模板。</div>
                        </div>
                        <div id="rf-llm-box" style="display:none;margin:0 0 12px 0;">
                            <textarea id="rf-requirement" class="form-textarea" style="min-height:100px;" placeholder="直接输入精修要求，例如：场景3节奏太拖沓，压缩到4个镜头；加强人物情绪递进；调整景别让冲突更紧张…"></textarea>
                        </div>
                        <div class="rf-field">
                            <label class="rf-field-label">语言大模型</label>
                            <select id="rf-llm-select" class="form-select">
                                <option value="">选择LLM配置（必选）</option>
                            </select>
                        </div>
                        <div class="ref-checkbox-row" style="margin-top:8px;">
                            <input type="checkbox" id="rf-reference-script">
                            <label for="rf-reference-script">开启后，大模型会同时阅读本章剧本，<b>适合按模板重排节奏或增减小节</b>。</label>
                        </div>
                        <div style="display:flex;justify-content:space-between;margin-top:14px;gap:10px;">
                            <button class="cd-btn cd-btn-outline" onclick="refineGoStep(1)" style="padding:10px 16px;">← 上一步</button>
                            <div style="display:flex;gap:10px;">
                                <button class="cd-btn cd-btn-gradient" id="rf-generate-btn" onclick="refineGenerateDraft()" style="padding:10px 20px;font-weight:600;">✦ 生成精修预览</button>
                                <button class="cd-btn cd-btn-outline" onclick="refineGoStep(3)" style="padding:10px 16px;">下一步 →</button>
                            </div>
                        </div>
                    </div>

                    <!-- 步骤3: 确认后应用 -->
                    <div id="rf-panel-3" class="rf-section" style="display:none;">
                        <div class="rf-section-title">
                            <span class="badge">3</span> 确认后应用
                        </div>
                        <div id="rf-summary" style="padding:10px 12px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;color:#4b5563;line-height:1.8;margin-bottom:12px;"></div>
                        <div id="rf-draft-action" style="text-align:center;padding:20px 0;">
                            <div style="font-size:14px;color:#6b7280;margin-bottom:8px;">点击上方「生成精修预览」开始</div>
                        </div>
                        <div id="rf-compare" style="display:none;">
                            <div class="rf-compare-stats">
                                <div class="rf-stat-card orig">
                                    <div class="rf-stat-label">原分镜</div>
                                    <div class="rf-stat-value"><span id="rf-orig-shots">0</span><span class="unit"> 镜头</span></div>
                                    <div style="font-size:12px;color:#6b7280;margin-top:2px;"><span id="rf-orig-dur">0</span>s</div>
                                </div>
                                <div class="rf-stat-card draft">
                                    <div class="rf-stat-label">精修草稿</div>
                                    <div class="rf-stat-value" style="color:#3b82f6;"><span id="rf-draft-shots">0</span><span class="unit"> 镜头</span></div>
                                    <div style="font-size:12px;color:#6b7280;margin-top:2px;"><span id="rf-draft-dur">0</span>s</div>
                                </div>
                            </div>
                            <div id="rf-diff-list" class="rf-diff-list" style="margin-bottom:12px;"></div>
                        </div>
                        <div style="display:flex;justify-content:flex-start;margin-top:10px;">
                            <button class="cd-btn cd-btn-outline" onclick="refineGoStep(2)" style="padding:8px 16px;">← 上一步（修改加工方式）</button>
                        </div>
                    </div>
                </div>

                <!-- 右侧：预览区 -->
                <div class="rf-right">
                    <div class="rf-preview-header">
                        <div class="rf-preview-title">预览</div>
                        <button class="cd-btn cd-btn-outline" onclick="loadRefineHistory()" style="padding:4px 12px;font-size:11px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🕘 精修历史</button>
                    </div>
                    <div class="rf-preview-body" id="rf-preview-body">
                        <div class="rf-preview-empty">
                            <div class="icon">📋</div>
                            <div class="title">先生成一份临时精修草稿</div>
                            <div class="desc">原分镜不会发生变化。生成后可在这里对比小节数量、总时长和具体内容。</div>
                        </div>
                    </div>
                    <!-- 应用/回退操作栏 -->
                    <div id="rf-action-bar" class="rf-action-bar" style="display:none;">
                        <button class="cd-btn" onclick="refineApply()" style="padding:8px 16px;font-weight:600;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border:none;border-radius:6px;">✅ 确认应用</button>
                        <button class="cd-btn cd-btn-outline" onclick="refineRollback()" style="padding:8px 16px;background:transparent;border:1px solid #f59e0b;color:#f59e0b;border-radius:6px;">↩️ 一键回退</button>
                        <label class="rf-force-row">
                            <input type="checkbox" id="rf-force" style="accent-color:#f59e0b;"> 强制应用
                        </label>
                        <span id="rf-status-text" class="status"></span>
                    </div>
                </div>
            </div>

            <!-- 精修历史（内联） -->
            <div class="rf-history-section">
                <div class="rf-history-header">
                    <div class="rf-history-title">
                        本作品最近精修记录
                        <span class="hint">每条记录均标注所属章节；已应用的版本可恢复到精修前状态</span>
                    </div>
                    <button class="cd-btn cd-btn-outline" onclick="loadRefineHistoryInline()" style="padding:4px 12px;font-size:11px;">刷新</button>
                </div>
                <div id="rf-history-list-inline" class="rf-history-list">
                    <div class="rf-history-empty">
                        <div class="icon">📄</div>
                        <div>本作品还没有精修记录</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 即时初始化：确保分镜精修面板在页面解析时就被正确隐藏 -->
        <script>
        (function(){
            var p2 = document.getElementById('rf-panel-2');
            var p3 = document.getElementById('rf-panel-3');
            if (p2) p2.style.display = 'none';
            if (p3) p3.style.display = 'none';
            console.log('[Refine] 即时初始化完成: panel2=' + (p2?p2.style.display:'N/A') + ', panel3=' + (p3?p3.style.display:'N/A'));
        })();
        </script>

        <!-- 精修历史弹窗 -->
        <div id="rf-history-modal" class="modal-overlay" style="display:none;">
            <div class="modal-box" style="max-width:760px;">
                <div class="modal-header">
                    <div class="modal-title">分镜精修历史</div>
                    <button class="modal-close" onclick="closeRefineHistoryModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="rf-history-list" style="font-size:13px;color:#6b7280;"></div>
                </div>
            </div>
        </div>

        <!-- 剧本场景编辑弹窗（场景级原位编辑） -->
        <div id="script-scene-modal" class="modal-overlay" style="display:none;">
            <div class="modal-box" style="max-width:780px;">
                <div class="modal-header">
                    <div class="modal-title" id="script-scene-modal-title">场景编辑</div>
                    <button class="modal-close" onclick="closeScriptSceneModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <div style="font-size:12px;color:#6b7280;margin-bottom:12px;">💡 每个场景可单独编辑正文（场景标头自动保留），保存后仅替换该场景，不影响其他场景。</div>
                    <div id="script-scene-list" style="font-size:13px;color:#4b5563;"></div>
                </div>
            </div>
        </div>

        <!-- 步骤4: 信息提取 -->
        <div id="step-extraction" class="cd-step-content" style="display: none;">
            <!-- 顶部工具栏 -->
            <div style="display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff;margin-bottom:12px;flex-wrap:wrap;">
                <div style="font-size:16px;font-weight:600;color:#111827;margin-right:4px;">信息提取</div>
                <select id="extract-project-select" class="form-select" style="padding:8px 10px;min-width:220px;" onchange="onExtractionProjectChange()">
                    <option value="">选择小说</option>
                </select>
                <select id="extract-llm-select" class="form-select" style="padding:8px 10px;min-width:160px;">
                    <option value="">使用默认语言大模型</option>
                </select>
                <select id="extract-image-select" class="form-select" style="padding:8px 10px;min-width:160px;">
                    <option value="">使用默认图片大模型</option>
                </select>
                <div style="flex:1;"></div>
                <button class="cd-btn cd-btn-gradient" onclick="openExtractModal('characters')" style="background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;padding:8px 16px;font-size:13px;border-radius:6px;font-weight:500;display:flex;align-items:center;gap:4px;">
                    <span>👤</span> 提取人物
                </button>
                <button class="cd-btn cd-btn-gradient" onclick="openExtractModal('scenes')" style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:8px 16px;font-size:13px;border-radius:6px;font-weight:500;display:flex;align-items:center;gap:4px;">
                    <span>🏞</span> 提取场景
                </button>
                <button class="cd-btn cd-btn-gradient" onclick="openExtractModal('props')" style="background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:8px 16px;font-size:13px;border-radius:6px;font-weight:500;display:flex;align-items:center;gap:4px;">
                    <span>🔧</span> 提取道具
                </button>
                <button class="cd-btn cd-btn-outline" id="file-directory-btn" onclick="switchExtractionView('directory')" style="border:1px solid #e5e7eb;background:#ffffff;color:#6b7280;padding:8px 14px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;">
                    <span>📂</span> 文件目录
                </button>
                <button id="coze-btn-extraction" class="cd-btn cd-btn-outline" style="display:none;border:1px solid #e5e7eb;background:#ffffff;color:#6b7280;padding:8px 14px;border-radius:6px;font-size:13px;cursor:pointer;align-items:center;gap:4px;" onclick="openCozeWorkflowFor('extraction')">
                    <span>🤖</span> Coze工作流
                </button>
            </div>

            <!-- 当前项目状态条 -->
            <div id="extract-project-bar" style="display:none;margin-bottom:12px;padding:8px 12px;background:rgba(16,185,129,0.06);border-left:3px solid #10b981;border-radius:6px;font-size:12px;color:#6b7280;line-height:1.6;">
                <span style="color:#10b981;font-weight:600;">当前小说：</span><span id="extract-project-name">—</span>
                <span style="margin-left:16px;">已有人物 <span id="extract-stat-chars" style="color:#3b82f6;">0</span>，场景 <span id="extract-stat-scenes" style="color:#3b82f6;">0</span>，道具 <span id="extract-stat-props" style="color:#3b82f6;">0</span></span>
            </div>

            <!-- 提取进度条 -->
            <div id="extract-progress" style="display:none;margin-bottom:12px;padding:10px 14px;background:#ffffff;border-radius:8px;border:1px solid #e5e7eb;">
                <div style="display:flex;align-items:center;gap:12px;">
                    <span class="loading" style="display:inline-block;width:16px;height:16px;border:2px solid rgba(14,165,233,0.3);border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite;"></span>
                    <div style="flex:1;color:#3b82f6;font-size:13px;" id="extract-progress-text">正在提取...</div>
                    <button class="cd-btn cd-btn-outline" onclick="cancelExtract()" style="padding:4px 12px;font-size:12px;">取消</button>
                </div>
            </div>

            <!-- 提取结果进度（分步骤） -->
            <div id="extract-step-progress" style="display:none;margin-bottom:12px;padding:10px 14px;background:#f1f5f9;border-radius:8px;border:1px solid #e5e7eb;"></div>

            <!-- 主Tab切换：人物/场景/道具/文件目录 -->
            <div style="display:flex;border-bottom:1px solid #ffffff;margin-bottom:12px;">
                <div id="ext-tab-characters" class="ext-tab active" onclick="switchExtractionView('characters')" style="padding:10px 18px;cursor:pointer;font-size:14px;color:#3b82f6;border-bottom:2px solid #3b82f6;">👤 人物</div>
                <div id="ext-tab-scenes" class="ext-tab" onclick="switchExtractionView('scenes')" style="padding:10px 18px;cursor:pointer;font-size:14px;color:#6b7280;border-bottom:2px solid transparent;">🏞 场景</div>
                <div id="ext-tab-props" class="ext-tab" onclick="switchExtractionView('props')" style="padding:10px 18px;cursor:pointer;font-size:14px;color:#6b7280;border-bottom:2px solid transparent;">🔧 道具</div>
                <div id="ext-tab-directory" class="ext-tab" onclick="switchExtractionView('directory')" style="padding:10px 18px;cursor:pointer;font-size:14px;color:#6b7280;border-bottom:2px solid transparent;">📂 文件目录</div>
            </div>

            <!-- 人物列表 -->
            <div id="view-characters" class="ext-view">
                <div style="display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff;border-radius:8px;margin-bottom:12px;flex-wrap:wrap;">
                    <div style="font-size:14px;color:#111827;font-weight:600;">人物列表 (<span id="character-count">0</span>)</div>
                    <input type="text" id="character-search" placeholder="🔍 搜索名称" style="padding:6px 10px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;width:160px;" oninput="filterCharacters()">
                    <select id="character-chapter-filter" onchange="filterCharacters()" style="padding:6px 10px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;min-width:120px;display:none;">
                        <option value="">全部章节</option>
                    </select>
                    <div style="margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                        <label style="display:flex;align-items:center;gap:4px;font-size:13px;color:#6b7280;cursor:pointer;user-select:none;">
                            <input type="checkbox" id="character-select-all" onchange="toggleSelectAllCharacters()" style="accent-color:#2563eb;">
                            全选
                        </label>
                        <span style="font-size:13px;color:#6b7280;">已选 <span id="character-selected-count">0</span></span>
                    </div>
                    <div style="width:1px;height:22px;background:#e5e7eb;"></div>
                    <button class="cd-btn cd-btn-outline" onclick="openStyleSettings('character')" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🎨 风格设置</button>
                    <button class="cd-btn cd-btn-secondary" onclick="batchGenerateImages()" style="padding:6px 10px;font-size:12px;background:#d1d5db;color:#fff;border:none;border-radius:6px;">🖼 批量生图(<span id="character-selected-count2">0</span>)</button>
                    <button class="cd-btn cd-btn-outline" onclick="batchImport()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">⬆ 批量导入</button>
                    <button class="cd-btn cd-btn-outline" onclick="clearAll()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🗑 全部清空</button>
                    <button class="cd-btn cd-btn-gradient" onclick="addCharacter()" style="padding:6px 10px;font-size:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-weight:500;">+ 手动添加</button>
                </div>
                <div id="character-grid" class="cd-card-grid"></div>
            </div>

            <!-- 场景列表 -->
            <div id="view-scenes" class="ext-view" style="display:none;">
                <div style="display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff;border-radius:8px;margin-bottom:12px;flex-wrap:wrap;">
                    <div style="font-size:14px;color:#111827;font-weight:600;">场景列表 (<span id="scene-count">0</span>)</div>
                    <input type="text" id="scene-search" placeholder="🔍 搜索名称" style="padding:6px 10px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;width:160px;" oninput="filterScenes()">
                    <div style="margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                        <label style="display:flex;align-items:center;gap:4px;font-size:13px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="scene-select-all" onchange="toggleSelectAllScenes()" style="accent-color:#2563eb;">
                            全选
                        </label>
                        <span style="font-size:13px;color:#6b7280;">已选 <span id="scene-selected-count4">0</span></span>
                    </div>
                    <div style="width:1px;height:22px;background:#e5e7eb;"></div>
                    <button class="cd-btn cd-btn-outline" onclick="openStyleSettings('scene')" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🎨 风格设置</button>
                    <button class="cd-btn cd-btn-secondary" onclick="batchGenerateImages()" style="padding:6px 10px;font-size:12px;background:#d1d5db;color:#fff;border:none;border-radius:6px;">🖼 批量生图(<span id="scene-selected-count">0</span>)</button>
                    <button class="cd-btn cd-btn-secondary" onclick="batchGeneratePanorama()" style="padding:6px 10px;font-size:12px;background:#d1d5db;color:#fff;border:none;border-radius:6px;">🌐 全景+9视图</button>
                    <button class="cd-btn cd-btn-outline" onclick="batchImport()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">⬆ 批量导入</button>
                    <button class="cd-btn cd-btn-outline" onclick="clearAll()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🗑 全部清空</button>
                    <button class="cd-btn cd-btn-gradient" onclick="addScene()" style="padding:6px 10px;font-size:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-weight:500;">+ 手动添加</button>
                </div>
                <div id="scene-grid" class="cd-card-grid"></div>
            </div>

            <!-- 道具列表 -->
            <div id="view-props" class="ext-view" style="display:none;">
                <div style="display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff;border-radius:8px;margin-bottom:12px;flex-wrap:wrap;">
                    <div style="font-size:14px;color:#111827;font-weight:600;">道具列表 (<span id="prop-count">0</span>)</div>
                    <input type="text" id="prop-search" placeholder="🔍 搜索名称" style="padding:6px 10px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;width:160px;" oninput="filterProps()">
                    <div style="margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                        <label style="display:flex;align-items:center;gap:4px;font-size:13px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="prop-select-all" onchange="toggleSelectAllProps()" style="accent-color:#2563eb;">
                            全选
                        </label>
                        <span style="font-size:13px;color:#6b7280;">已选 <span id="prop-selected-count2">0</span></span>
                    </div>
                    <div style="width:1px;height:22px;background:#e5e7eb;"></div>
                    <button class="cd-btn cd-btn-outline" onclick="openStyleSettings('prop')" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🎨 风格设置</button>
                    <button class="cd-btn cd-btn-secondary" onclick="batchGenerateImages()" style="padding:6px 10px;font-size:12px;background:#d1d5db;color:#fff;border:none;border-radius:6px;">🖼 批量生图(<span id="prop-selected-count">0</span>)</button>
                    <button class="cd-btn cd-btn-outline" onclick="batchImport()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">⬆ 批量导入</button>
                    <button class="cd-btn cd-btn-outline" onclick="clearAll()" style="padding:6px 10px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🗑 全部清空</button>
                    <button class="cd-btn cd-btn-gradient" onclick="addProp()" style="padding:6px 10px;font-size:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-weight:500;">+ 手动添加</button>
                </div>
                <div id="prop-grid" class="cd-card-grid"></div>
            </div>

            <!-- 文件目录视图 -->
            <div id="view-directory" class="ext-view" style="display:none;">
                <div style="padding:20px;background:#ffffff;border-radius:12px;border:1px solid #e5e7eb;">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                        <div style="font-size:18px;">📁</div>
                        <div style="flex:1;">
                            <div style="font-size:15px;color:#111827;font-weight:600;">本地文件存储目录</div>
                            <div style="font-size:12px;color:#6b7280;margin-top:4px;">按项目分目录，内含 <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">characters</code> / <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">scenes</code> / <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">props</code> / <code style="background:#f1f5f9;padding:1px 6px;border-radius:4px;">generated</code> 四个子目录</div>
                        </div>
                        <button class="cd-btn cd-btn-primary" onclick="openImageFolder()" style="padding:8px 16px;font-size:13px;">📂 打开根目录</button>
                        <button class="cd-btn cd-btn-outline" onclick="copyFileDirectory()" style="padding:8px 12px;font-size:13px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;">📋 复制路径</button>
                        <button class="cd-btn cd-btn-outline" onclick="loadFileDirectory()" style="padding:8px 12px;font-size:13px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;">🔄 刷新</button>
                    </div>
                    <div id="file-directory-info" style="font-size:13px;color:#4b5563;background:#f1f5f9;border-radius:8px;padding:12px;font-family:monospace;line-height:1.7;word-break:break-all;">
                        <span style="color:#6b7280;">未选择项目</span>
                    </div>
                    <div id="file-directory-subdirs" style="margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;"></div>
                </div>
            </div>

            <!-- 提取弹窗 -->
            <div id="extract-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;padding:24px;width:520px;max-width:90vw;border:1px solid #e5e7eb;">
                    <div style="font-size:16px;font-weight:600;color:#111827;margin-bottom:20px;" id="extract-modal-title">提取人物</div>
                    <div class="form-group" style="margin-bottom:16px;">
                        <div class="form-label" style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:flex;align-items:center;gap:8px;">
                            <span>* 提示词模板</span>
                            <span id="extract-modal-tags" style="display:none;"></span>
                        </div>
                        <select id="extract-modal-template" class="form-select" style="padding:10px;width:100%;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                            <option value="">选择模板</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom:16px;">
                        <div class="form-label" style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;">* 大模型配置（语言大模型）</div>
                        <select id="extract-modal-model" class="form-select" style="padding:10px;width:100%;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                            <option value="">选择语言大模型</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom:24px;">
                        <div class="form-label" style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;">章节范围</div>
                        <div style="display:flex;gap:20px;align-items:center;">
                            <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                                <input type="radio" name="extract-chapter-scope" value="all" checked style="accent-color:#06b6d4;">
                                全部章节
                            </label>
                            <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                                <input type="radio" name="extract-chapter-scope" value="selected" style="accent-color:#06b6d4;">
                                指定章节
                            </label>
                        </div>
                        <select id="extract-modal-chapters" class="form-select" style="padding:10px;width:100%;margin-top:8px;display:none;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;" multiple>
                        </select>
                    </div>
                    <div style="display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeExtractModal()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button onclick="startEntityExtraction()" style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">开始提取</button>
                    </div>
                </div>
            </div>

            <!-- 风格设置弹窗 -->
            <div id="style-settings-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1003;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;padding:24px;width:640px;max-width:92vw;border:1px solid #e5e7eb;max-height:90vh;overflow-y:auto;">
                    <div style="font-size:16px;font-weight:600;color:#111827;margin-bottom:8px;" id="style-settings-title">角色风格设置</div>
                    <div style="font-size:12px;color:#6b7280;margin-bottom:16px;">设置本作品的<span id="style-settings-type-label">人物</span>生成风格，这些设置将应用于所有<span id="style-settings-type-label2">人物</span>生成。</div>

                    <!-- 实体类型切换 -->
                    <div style="display:flex;gap:8px;margin-bottom:16px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:4px;">
                        <button type="button" onclick="switchStyleType('character')" id="style-tab-character" class="style-type-tab active" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:#e5e7eb;color:#111827;font-size:13px;cursor:pointer;">人物</button>
                        <button type="button" onclick="switchStyleType('scene')" id="style-tab-scene" class="style-type-tab" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:transparent;color:#6b7280;font-size:13px;cursor:pointer;">场景</button>
                        <button type="button" onclick="switchStyleType('prop')" id="style-tab-prop" class="style-type-tab" style="flex:1;padding:8px 12px;border-radius:6px;border:none;background:transparent;color:#6b7280;font-size:13px;cursor:pointer;">道具</button>
                    </div>

                    <input type="hidden" id="style-settings-type" value="character">

                    <!-- 截图反推横幅 -->
                    <div style="display:flex;align-items:center;justify-content:space-between;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:12px 14px;margin-bottom:16px;">
                        <div>
                            <div style="font-size:13px;font-weight:600;color:#111827;margin-bottom:2px;">不知道截图对应什么风格？</div>
                            <div style="font-size:11px;color:#6b7280;">上传参考截图，分析后可同步融合到人物、场景、道具模板。</div>
                        </div>
                        <button type="button" onclick="openStyleReferenceModal()" style="padding:6px 12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap;">🖼 截图反推风格</button>
                    </div>

                    <div style="margin-bottom:14px;">
                        <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">模板预设</label>
                        <select id="style-settings-preset" onchange="onStylePresetChange()" style="padding:10px;width:100%;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                            <option value="">不指定模板</option>
                        </select>
                        <div style="font-size:11px;color:#6b7280;margin-top:4px;">切换预设会<strong style="color:#6b7280;">覆盖</strong>下方完整提示词；选完仍可自由编辑。</div>
                    </div>
                    <div style="margin-bottom:14px;">
                        <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">视觉风格</label>
                        <input id="style-settings-visual" type="text" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;" placeholder="如：真人电影级写实摄影，古装电视剧剧照" autocomplete="off">
                        <div id="style-visual-tags" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">
                            <!-- tags injected by JS -->
                        </div>
                        <div style="font-size:11px;color:#6b7280;margin-top:6px;">点击标签快速插入到“视觉风格”段落；下方模板可完整自由编辑。</div>
                    </div>
                    <div style="margin-bottom:14px;">
                        <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">完整提示词（支持 {视觉风格}、{角色信息}/{场景信息}/{道具信息} 占位符）</label>
                        <textarea id="style-settings-prefix" rows="10" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;line-height:1.6;resize:vertical;" placeholder="选择模板预设后自动填充；也可手动编辑。占位符将在生图时自动替换。"></textarea>
                    </div>
                    <div style="margin-bottom:24px;">
                        <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">后缀提示词（可选）</label>
                        <textarea id="style-settings-suffix" rows="3" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;line-height:1.6;resize:vertical;" placeholder="会追加在完整提示词之后"></textarea>
                    </div>
                    <div style="font-size:11px;color:#6b7280;margin-bottom:16px;">
                        生成图片时会自动把【角色信息】/【场景信息】/【道具信息】替换为每个元素的描述，其余部分原样保留。
                        <span onclick="resetStyleToDefault()" style="color:#06b6d4;cursor:pointer;text-decoration:underline;margin-left:4px;">恢复默认模板</span>
                    </div>
                    <div style="display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeStyleSettings()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button onclick="saveStyleSettings()" style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">保存</button>
                    </div>
                </div>
            </div>

            <!-- 截图反推风格弹窗 -->
            <div id="style-reference-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1004;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;padding:24px;width:640px;max-width:92vw;border:1px solid #e5e7eb;max-height:90vh;overflow-y:auto;">
                    <div style="font-size:16px;font-weight:600;color:#111827;margin-bottom:8px;">截图反推风格预设</div>
                    <div style="font-size:12px;color:#6b7280;margin-bottom:16px;">上传参考截图，分析后可同步融合到人物、场景、道具模板。</div>
                    <input type="hidden" id="style-reference-type" value="character">
                    <div style="margin-bottom:16px;">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;">参考截图</label>
                            <span id="style-reference-count" style="font-size:12px;color:#6b7280;">0/4</span>
                        </div>
                        <div style="font-size:11px;color:#6b7280;margin-bottom:8px;">支持 PNG、JPEG、WebP，最多 4 张，每张不超过 10MB。图片只用于本次分析，不写入素材库。</div>
                        <div id="style-reference-dropzone" onclick="document.getElementById('style-reference-input').click()" style="border:1px dashed #e5e7eb;border-radius:8px;padding:28px;text-align:center;background:#f1f5f9;cursor:pointer;">
                            <div style="font-size:22px;color:#6b7280;margin-bottom:6px;">⬆</div>
                            <div style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:4px;">选择参考截图</div>
                            <div style="font-size:11px;color:#6b7280;">优先上传能看清主体、光影、材质和色彩关系的画面</div>
                        </div>
                        <input id="style-reference-input" type="file" accept="image/png,image/jpeg,image/jpg,image/webp" multiple style="display:none;" onchange="onStyleReferenceFilesSelected(event)">
                        <div id="style-reference-preview" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;"></div>
                    </div>
                    <div style="margin-bottom:20px;">
                        <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">视觉大语言模型</label>
                        <select id="style-reference-llm" style="padding:10px;width:100%;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                            <option value="">请选择视觉大语言模型</option>
                        </select>
                        <div style="display:flex;align-items:center;gap:6px;margin-top:8px;">
                            <input type="checkbox" id="style-reference-layout" style="accent-color:#06b6d4;width:14px;height:14px;">
                            <label for="style-reference-layout" style="font-size:12px;color:#6b7280;cursor:pointer;">同时分析版式语言</label>
                        </div>
                        <div style="font-size:11px;color:#6b7280;margin-top:4px;">默认关闭：开启后只输出版式建议，不会覆盖人物视图、场景单图或道具静物的现有版式。</div>
                    </div>
                    <div id="style-reference-result" style="display:none;margin-bottom:20px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:14px;">
                        <div style="font-size:13px;font-weight:600;color:#111827;margin-bottom:8px;">分析结果：<span id="style-reference-preset-name"></span></div>
                        <div style="font-size:12px;color:#6b7280;margin-bottom:8px;" id="style-reference-summary"></div>
                        <div style="margin-bottom:8px;">
                            <div style="font-size:11px;color:#6b7280;margin-bottom:2px;">共享视觉风格</div>
                            <textarea id="style-reference-shared" rows="2" style="width:100%;padding:8px;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;resize:vertical;"></textarea>
                        </div>
                        <div style="margin-bottom:8px;">
                            <div style="font-size:11px;color:#6b7280;margin-bottom:2px;">人物风格</div>
                            <textarea id="style-reference-character" rows="2" style="width:100%;padding:8px;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;resize:vertical;"></textarea>
                        </div>
                        <div style="margin-bottom:8px;">
                            <div style="font-size:11px;color:#6b7280;margin-bottom:2px;">场景风格</div>
                            <textarea id="style-reference-scene" rows="2" style="width:100%;padding:8px;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;resize:vertical;"></textarea>
                        </div>
                        <div style="margin-bottom:8px;">
                            <div style="font-size:11px;color:#6b7280;margin-bottom:2px;">道具风格</div>
                            <textarea id="style-reference-prop" rows="2" style="width:100%;padding:8px;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;resize:vertical;"></textarea>
                        </div>
                        <div>
                            <div style="font-size:11px;color:#6b7280;margin-bottom:2px;">负面约束</div>
                            <textarea id="style-reference-negative" rows="2" style="width:100%;padding:8px;background:#ffffff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;resize:vertical;"></textarea>
                        </div>
                    </div>
                    <div style="display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeStyleReferenceModal()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button onclick="analyzeStyleReference()" id="style-reference-analyze-btn" style="padding:8px 20px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">分析截图</button>
                        <button onclick="applyStyleReference()" id="style-reference-apply-btn" style="display:none;padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">应用到选中模板</button>
                    </div>
                </div>
            </div>

            <!-- 批量导入弹窗（文件上传 · 命名规范） -->
            <div id="batch-import-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1003;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;padding:24px;width:640px;max-width:94vw;border:1px solid #e5e7eb;max-height:88vh;overflow-y:auto;">
                    <div style="font-size:16px;font-weight:600;color:#111827;margin-bottom:6px;" id="batch-import-title">批量导入人物 · 文件命名规格</div>
                    <div style="font-size:12px;color:#6b7280;margin-bottom:14px;" id="batch-import-hint">文件名按「元素_元素名_后缀」命名，导入时自动归类到对应槽位</div>
                    <input type="hidden" id="batch-import-type" value="character">
                    <input type="file" id="batch-import-file" multiple accept="image/*,audio/*,.mp3,.wav,.m4a,.aac,.ogg" style="display:none;" onchange="handleBatchImportFiles(this.files)">
                    <div id="batch-import-guide" style="background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:14px;font-size:12px;color:#4b5563;line-height:1.9;margin-bottom:16px;"></div>
                    <div style="display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeBatchImport()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button onclick="triggerBatchImportFile()" style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">选择文件导入</button>
                    </div>
                </div>
            </div>

            <!-- 编辑人物/场景/道具弹窗 -->
            <div id="entity-edit-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1001;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;padding:24px;width:560px;max-width:92vw;border:1px solid #e5e7eb;max-height:88vh;overflow-y:auto;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
                        <div style="font-size:16px;font-weight:600;color:#111827;" id="entity-edit-title">编辑人物</div>
                        <div onclick="closeEntityEdit()" style="cursor:pointer;color:#6b7280;font-size:18px;">✕</div>
                    </div>
                    <!-- 人物字段 -->
                    <div id="entity-edit-fields-character" style="display:none;">
                        <div style="margin-bottom:16px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">* 名称</label>
                            <input id="e-name" type="text" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;" placeholder="请输入名称">
                        </div>
                        <div style="margin-bottom:16px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;">
                                <span>描述</span>
                                <button onclick="entityEditPolish()" type="button" style="padding:4px 12px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:14px;font-size:11px;cursor:pointer;">✨ AI润色</button>
                            </label>
                            <textarea id="e-desc" rows="12" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;line-height:1.6;resize:vertical;" placeholder="外貌描述、服装服饰、性格特质等"></textarea>
                        </div>
                        <div style="margin-bottom:16px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">别名</label>
                            <div style="display:flex;gap:8px;">
                                <input id="e-alias-input" type="text" style="flex:1;padding:8px 10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;" placeholder="输入别名后按回车添加">
                                <button onclick="entityEditAddAlias()" type="button" style="padding:8px 16px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;">添加</button>
                            </div>
                            <div id="e-aliases-list" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;"></div>
                        </div>
                    </div>
                    <!-- 场景字段 -->
                    <div id="entity-edit-fields-scene" style="display:none;">
                        <div style="margin-bottom:16px;"><label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">* 名称</label>
                            <input id="e-name" type="text" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                        </div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
                            <div><label style="font-size:12px;color:#6b7280;display:block;margin-bottom:4px;">地点</label>
                                <input id="e-location" type="text" style="width:100%;padding:8px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;">
                            </div>
                            <div><label style="font-size:12px;color:#6b7280;display:block;margin-bottom:4px;">时间</label>
                                <input id="e-time" type="text" style="width:100%;padding:8px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;" placeholder="如 夜晚, 中午, 清晨">
                            </div>
                        </div>
                        <div style="margin-bottom:16px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;">
                                <span>描述</span>
                                <button onclick="entityEditPolish()" type="button" style="padding:4px 12px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:14px;font-size:11px;cursor:pointer;">✨ AI润色</button>
                            </label>
                            <textarea id="e-desc" rows="10" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;line-height:1.6;resize:vertical;"></textarea>
                        </div>
                    </div>
                    <!-- 道具字段 -->
                    <div id="entity-edit-fields-prop" style="display:none;">
                        <div style="margin-bottom:16px;"><label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:block;">* 名称</label>
                            <input id="e-name" type="text" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;">
                        </div>
                        <div style="margin-bottom:16px;">
                            <label style="font-size:13px;color:#1f2937;font-weight:500;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;">
                                <span>描述</span>
                                <button onclick="entityEditPolish()" type="button" style="padding:4px 12px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:14px;font-size:11px;cursor:pointer;">✨ AI润色</button>
                            </label>
                            <textarea id="e-desc" rows="10" style="width:100%;padding:10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;line-height:1.6;resize:vertical;"></textarea>
                        </div>
                        <div style="margin-bottom:16px;"><label style="font-size:12px;color:#6b7280;display:block;margin-bottom:4px;">材质</label>
                            <input id="e-material" type="text" style="width:100%;padding:8px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:12px;">
                        </div>
                    </div>
                    <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:10px;">
                        <button onclick="closeEntityEdit()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button onclick="saveEntityEdit()" style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">保存</button>
                    </div>
                </div>
            </div>

            <!-- 音色库弹窗 -->
            <div id="voice-library-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1002;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;width:760px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;border:1px solid #e5e7eb;">
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #e5e7eb;">
                        <div style="font-size:16px;font-weight:600;color:#111827;">音色库 · <span id="voice-char-name"></span></div>
                        <div onclick="closeVoiceLibrary()" style="cursor:pointer;color:#6b7280;font-size:18px;">✕</div>
                    </div>
                    <!-- 顶部搜索+分类+从视频提取 -->
                    <div style="padding:14px 22px;border-bottom:1px solid #e5e7eb;">
                        <div style="display:flex;gap:10px;align-items:center;margin-bottom:12px;">
                            <input id="voice-search" type="text" placeholder="🔍 搜索音色名..." style="flex:1;padding:8px 12px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937;font-size:13px;" oninput="filterVoiceLibrary()">
                            <div style="display:flex;gap:6px;">
                                <button class="voice-cat-btn active" onclick="switchVoiceCategory(this,'all')" style="padding:6px 14px;background:#2563eb;color:#fff;border:none;border-radius:20px;font-size:12px;cursor:pointer;">全部</button>
                                <button class="voice-cat-btn" onclick="switchVoiceCategory(this,'male')" style="padding:6px 14px;background:#f1f5f9;color:#6b7280;border:1px solid #e5e7eb;border-radius:20px;font-size:12px;cursor:pointer;">男声</button>
                                <button class="voice-cat-btn" onclick="switchVoiceCategory(this,'female')" style="padding:6px 14px;background:#f1f5f9;color:#6b7280;border:1px solid #e5e7eb;border-radius:20px;font-size:12px;cursor:pointer;">女声</button>
                                <button class="voice-cat-btn" onclick="switchVoiceCategory(this,'child')" style="padding:6px 14px;background:#f1f5f9;color:#6b7280;border:1px solid #e5e7eb;border-radius:20px;font-size:12px;cursor:pointer;">童声</button>
                                <button class="voice-cat-btn" onclick="switchVoiceCategory(this,'mine')" style="padding:6px 14px;background:#f1f5f9;color:#6b7280;border:1px solid #e5e7eb;border-radius:20px;font-size:12px;cursor:pointer;">我的</button>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(139,92,246,0.08);border:1px solid #8b5cf6;border-radius:8px;">
                            <div>
                                <div style="font-size:12px;color:#a78bfa;font-weight:600;">🎬 从视频提取人物音色</div>
                                <div style="font-size:11px;color:#6b7280;margin-top:2px;">选择约 5 秒单人对白，本地 AI 自动去除背景音乐和环境声并直接绑定。</div>
                            </div>
                            <button onclick="openVideoExtract()" style="padding:6px 14px;background:#8b5cf6;color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;">从视频提取</button>
                        </div>
                    </div>
                    <!-- 音色列表 -->
                    <div id="voice-list" style="flex:1;overflow-y:auto;padding:12px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;"></div>
                    <!-- 底部 -->
                    <div style="padding:14px 22px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;">
                        <div id="voice-selected-info" style="font-size:12px;color:#6b7280;">未选择</div>
                        <div style="display:flex;gap:10px;">
                            <button onclick="closeVoiceLibrary()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                            <button onclick="confirmVoiceBind()" style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">确认绑定</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 从视频提取音色弹窗 -->
            <div id="video-extract-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1003;align-items:center;justify-content:center;">
                <div style="background:#ffffff;border-radius:12px;width:780px;max-width:94vw;border:1px solid #e5e7eb;overflow:hidden;">
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #e5e7eb;">
                        <div style="font-size:16px;font-weight:600;color:#111827;">从视频提取人物音色 · <span id="v-e-char-name"></span></div>
                        <div onclick="closeVideoExtract()" style="cursor:pointer;color:#6b7280;font-size:18px;">✕</div>
                    </div>
                    <div style="padding:30px 24px;">
                        <div style="padding:40px 24px;background:#f1f5f9;border:1px dashed #e5e7eb;border-radius:10px;text-align:center;">
                            <div style="font-size:15px;color:#111827;font-weight:600;margin-bottom:10px;">选择只有目标人物清晰开口的视频</div>
                            <div style="font-size:12px;color:#6b7280;margin-bottom:18px;">推荐目录：<span id="v-e-recommend-folder" style="color:#6b7280;"></span>；也可以切换到其他目录</div>
                            <div style="display:flex;gap:10px;justify-content:center;margin-bottom:14px;">
                                <button onclick="selectVideoFromFolder('recommend')" style="padding:8px 18px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;">从推荐目录选择</button>
                                <button onclick="selectVideoFromFolder('custom')" style="padding:8px 18px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:12px;cursor:pointer;">从其他位置选择</button>
                            </div>
                            <div style="font-size:11px;color:#d1d5db;">支持 MP4、MOV、MKV、WebM 等格式，视频总时长不限，单文件不超过 1GB</div>
                            <input type="file" id="video-extract-file" accept="video/mp4,video/quicktime,video/x-matroska,video/webm" style="display:none;" onchange="onVideoExtractFileSelected(this)">
                        </div>

                        <div style="margin-top:24px;padding:14px 18px;background:#f1f5f9;border-radius:8px;border:1px solid #e5e7eb;">
                            <div style="display:flex;align-items:center;gap:10px;">
                                <span style="font-size:18px;">💡</span>
                                <div style="font-size:13px;color:#6b7280;line-height:1.6;">
                                    <div style="margin-bottom:4px;">本地 AI 会<b style="color:#4b5563;">分离人声</b>并尽量去除背景音乐、环境声和伴奏</div>
                                    <div style="font-size:12px;color:#6b7280;">全程在本机处理。多人重叠说话无法可单拆成单个人，请在波形上选择只有目标人物开口的区域；循环补足只是重复选中片段，不会生成新台词。</div>
                                </div>
                            </div>
                        </div>

                        <div id="v-e-progress" style="display:none;margin-top:20px;padding:14px;background:#ffffff;border:1px solid #2563eb;border-radius:8px;">
                            <div style="display:flex;align-items:center;gap:10px;">
                                <span class="loading" style="display:inline-block;width:16px;height:16px;border:2px solid rgba(14,165,233,0.3);border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite;"></span>
                                <div id="v-e-progress-text" style="font-size:13px;color:#3b82f6;flex:1;">正在分析视频并提取人声...</div>
                            </div>
                        </div>
                    </div>
                    <div style="padding:14px 22px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeVideoExtract()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">取消</button>
                        <button id="v-e-execute-btn" onclick="executeVoiceExtract()" disabled style="padding:8px 20px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;opacity:0.5;">提取人声、去背景音并绑定</button>
                    </div>
                </div>
            </div>

            <!-- AI打标确认弹窗（面部覆盖模式） -->
            <div id="ai-mark-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1004;align-items:center;justify-content:center;">
                <div style="width:520px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.6);">
                    <div style="padding:16px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;">
                        <div style="font-size:16px;font-weight:600;color:#111827;">打AI合规标识 · <span id="ai-mark-entity-name"></span></div>
                        <span onclick="closeAiMarkConfirm()" style="font-size:18px;color:#6b7280;cursor:pointer;">✕</span>
                    </div>
                    <div style="padding:18px 22px;">
                        <div id="ai-mark-field-label" style="font-size:12px;color:#6b7280;margin-bottom:10px;">打标目标：生成图(generated_image)</div>
                        <div style="display:flex;gap:16px;align-items:flex-start;">
                            <div style="flex:1;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:center;">
                                <img id="ai-mark-preview-src" src="" style="max-width:200px;max-height:200px;border-radius:6px;object-fit:contain;">
                            </div>
                            <div style="flex:1;display:flex;flex-direction:column;gap:10px;">
                                <div style="display:flex;align-items:center;gap:10px;font-size:13px;color:#111827;">
                                    <label style="font-weight:500;">是否启用「面部覆盖模式」？</label>
                                    <span style="font-size:12px;color:#6b7280;">?</span>
                                </div>
                                <label style="font-size:12px;color:#6b7280;display:flex;gap:8px;align-items:center;">
                                    <input type="checkbox" id="ai-mark-face-cover-check" onchange="toggleAiMarkFaceCover(this.checked)" style="accent-color:#3b82f6;width:16px;height:16px;">单脸图(常规人物立绘): 关 → 居中红色"此图由AI生成"水印
                                </label>
                                <label style="font-size:12px;color:#6b7280;padding-left:24px;">多脸图(三视图/表情图): 开 → 每张人脸单独打小"AI"标识</label>
                                <div style="display:flex;gap:6px;align-items:flex-start;font-size:11px;color:#6b7280;line-height:1.5;">
                                    <span style="margin-top:2px;">ℹ</span>
                                    <span>不知道选哪个就关。开启面部覆盖会在图像上半部(人脸高发区域)额外叠加更多"AI"小标，以覆盖人脸区域，降低被真人审核引擎判定为"真人照片"的概率。</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="padding:14px 22px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:10px;">
                        <button onclick="closeAiMarkConfirm()" style="padding:8px 20px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;cursor:pointer;">关闭(默认)</button>
                        <button onclick="applyAiMark(this)" style="padding:8px 20px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">开启面部覆盖</button>
                        <button id="ai-mark-default-btn" onclick="toggleAiMarkFaceCover(false); applyAiMark(this);" style="padding:8px 20px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;">仅打水印</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤5: 视频生成 -->
        <div id="step-video" class="cd-step-content" style="display: none;">
            <!-- 标题栏 -->
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
                <div style="font-size:18px;font-weight:600;color:#111827;">视频生成</div>
                <div style="display:flex;gap:8px;align-items:center;">
                    <button id="coze-btn-video" class="cd-btn cd-btn-outline" style="display:none;padding:6px 14px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;" onclick="openCozeWorkflowFor('video')"> Coze工作流</button>
                    <button class="cd-btn cd-btn-outline" style="padding:6px 14px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;font-size:13px;">🔄 刷新</button>
                </div>
            </div>

            <!-- 视频模式Tab -->
            <div style="display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid #ffffff;padding-bottom:8px;flex-wrap:wrap;">
                <div id="video-mode-0" class="video-mode-tab active" onclick="switchVideoMode(0)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#3b82f6;border-bottom:2px solid #3b82f6;display:flex;align-items:center;gap:6px;">
                    <span>🎬</span> 即梦CLI模式
                </div>
                <div id="video-mode-1" class="video-mode-tab" onclick="switchVideoMode(1)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#6b7280;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;">
                    <span>🐦</span> 小云雀CLI
                </div>
                <div id="video-mode-2" class="video-mode-tab" onclick="switchVideoMode(2)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#6b7280;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;">
                    <span>🤖</span> MiniMax H3
                </div>
                <div id="video-mode-3" class="video-mode-tab" onclick="switchVideoMode(3)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#6b7280;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;">
                    <span>🔥</span> 火山方舟API
                </div>
                <div id="video-mode-4" class="video-mode-tab" onclick="switchVideoMode(4)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#6b7280;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;">
                    <span>🔄</span> 中转(Cool)
                </div>
                <div id="video-mode-5" class="video-mode-tab" onclick="switchVideoMode(5)" style="padding:8px 16px;cursor:pointer;font-size:13px;color:#6b7280;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;">
                    <span>⭐</span> 星链云
                </div>
            </div>

            <!-- 配置栏 -->
            <div id="video-config-bar" style="display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ffffff;border-radius:10px;margin-bottom:16px;flex-wrap:wrap;border:1px solid #e5e7eb;"></div>

            <!-- 队列汇总卡片 -->
            <div id="video-queue-summary" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:16px;"></div>

            <!-- 任务列表（视频队列） -->
            <div style="background:#ffffff;border-radius:10px;padding:14px 16px;border:1px solid #e5e7eb;margin-bottom:16px;">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;">
                    <div style="font-size:13px;color:#111827;font-weight:500;">🎞 视频任务队列</div>
                    <div style="display:flex;gap:8px;flex-wrap:wrap;">
                        <select id="video-provider-select" class="form-select" style="padding:6px 10px;font-size:12px;">
                            <option value="manual">手动回填（模式C）</option>
                            <option value="jimeng_cli">即梦CLI</option>
                            <option value="xiaoyunque_cli">小云雀CLI</option>
                            <option value="dummy">模拟测试</option>
                        </select>
                        <button class="cd-btn cd-btn-outline" onclick="refreshVideoStatus()" style="padding:6px 14px;font-size:12px;background:#f1f5f9;border:1px solid #e5e7eb;color:#6b7280;border-radius:6px;">🔄 刷新</button>
                    </div>
                </div>
                <div id="video-task-list" style="font-size:13px;color:#6b7280;max-height:320px;overflow-y:auto;">
                    <div style="text-align:center;padding:20px;color:#6b7280;">选择剧本集数并点击「⚡ 批量生成」后将分镜加入队列</div>
                </div>
            </div>

            <!-- 主内容区：左右两栏 -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
                <!-- 左侧：分镜列表 -->
                <div style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;min-height:280px;">
                    <!-- 选择小说/章节 -->
                    <div style="display:flex;gap:10px;margin-bottom:12px;">
                        <select id="video-novel-select" class="form-select" style="padding:8px 10px;flex:1;">
                            <option value="">选择小说</option>
                        </select>
                        <select id="video-chapter-select" class="form-select" style="padding:8px 10px;flex:1;">
                            <option value="">选择剧本集数</option>
                        </select>
                    </div>

                    <!-- 筛选标签 -->
                    <div style="display:flex;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e5e7eb;">
                        <label style="display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="filter-section" data-video-column-filter="section" checked style="accent-color:#2563eb;width:13px;height:13px;"> 小节
                        </label>
                        <label style="display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="filter-scene" data-video-column-filter="scene" checked style="accent-color:#2563eb;width:13px;height:13px;"> 场景
                        </label>
                        <label style="display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="filter-overhead" data-video-column-filter="overhead" checked style="accent-color:#2563eb;width:13px;height:13px;"> 俯视人物调度图
                        </label>
                        <label style="display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="filter-tail" data-video-column-filter="tail" checked style="accent-color:#2563eb;width:13px;height:13px;"> 尾帧
                        </label>
                        <label style="display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;cursor:pointer;">
                            <input type="checkbox" id="filter-auto" data-video-column-filter="auto" checked style="accent-color:#2563eb;width:13px;height:13px;"> 自动起分
                        </label>
                    </div>

                    <!-- 分镜列表 -->
                    <div id="video-storyboard-list" style="min-height:180px;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:13px;">
                        No Data
                    </div>
                </div>

                <!-- 右侧：分镜详情区 -->
                <div id="video-shot-detail" style="background:#ffffff;border-radius:10px;padding:16px;border:1px solid #e5e7eb;min-height:280px;display:flex;flex-direction:column;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #e5e7eb;">
                        <div id="video-shot-detail-title" style="font-size:15px;font-weight:600;color:#111827;display:none;"></div>
                        <button id="video-shot-generate-btn" class="cd-btn cd-btn-gradient" style="display:none;padding:6px 14px;background:linear-gradient(90deg,#2563eb 0%,#3b82f6 100%);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;" onclick="generateSingleShot()">生成视频</button>
                    </div>
                    <div id="video-shot-detail-content" style="flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;font-size:13px;color:#1f2937;">
                        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#6b7280;">
                            <div style="font-size:48px;opacity:0.3;margin-bottom:12px;">🎬</div>
                            <div style="font-size:13px;">点击左侧分镜查看详情</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
                <button class="cd-btn cd-btn-gradient" style="padding:8px 16px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;" onclick="batchGenerateVideo()">⚡ 批量生成 (0)</button>
                <button class="cd-btn cd-btn-outline" style="padding:8px 16px;background:transparent;border:1px solid #d1d5db;color:#6b7280;border-radius:6px;font-size:13px;" onclick="toggleBatchView()">🖼 批量俯视图 (0)</button>
                <button class="cd-btn cd-btn-outline" style="padding:8px 16px;background:transparent;border:1px solid #d1d5db;color:#6b7280;border-radius:6px;font-size:13px;" onclick="refreshVideoStatus()">🔄 刷新状态</button>
            </div>

            <!-- 辅助操作行 -->
            <div id="video-aux-bar" style="display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap;"></div>

            <!-- 队列选项 -->
            <div style="display:flex;gap:16px;margin-bottom:12px;">
                <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;cursor:pointer;">
                    <input type="checkbox" id="queue-global" style="accent-color:#2563eb;width:13px;height:13px;"> 全局队列
                </label>
                <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;cursor:pointer;">
                    <input type="checkbox" id="queue-use" style="accent-color:#2563eb;width:13px;height:13px;"> 使用全局队列
                </label>
            </div>

            <!-- 生成日志 -->
            <div style="background:#ffffff;border-radius:10px;padding:14px 18px;border:1px solid #e5e7eb;">
                <div style="font-size:13px;color:#111827;font-weight:500;margin-bottom:10px;">📋 生成日志</div>
                <div id="video-log" style="font-size:12px;color:#6b7280;line-height:1.8;">
                    <div>[19:00:33] 加载了 0 个视频模型配置</div>
                    <div>[19:00:33] 加载了 0 本小说</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 配置分镜模板弹窗（千山AI图2风格） -->
<div id="template-modal" class="modal-overlay" style="display:none;z-index:1100;">
    <div class="modal-box" style="max-width:920px;width:92%;background:#111a33;border:1px solid #1f335c;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.7);">
        <div class="modal-header" style="padding:16px 22px;border-bottom:1px solid #1f335c;background:linear-gradient(180deg,rgba(99,102,241,0.10),transparent);">
            <div class="modal-title" style="font-size:17px;font-weight:700;color:#1f2937;letter-spacing:0.3px;">配置分镜模板</div>
            <button class="modal-close" onclick="closeTemplateModal()" style="color:#6b7280;">&times;</button>
        </div>
        <div class="modal-body" style="padding:16px 22px 20px 22px;">
            <!-- 搜索框 + 短剧/短片切换（顶部） -->
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;">
                <div style="position:relative;flex:1;min-width:260px;">
                    <input type="text" id="template-search" placeholder="🔍 搜索模板名称/描述" oninput="filterTemplates()"
                           style="width:100%;padding:10px 14px 10px 36px;border-radius:8px;border:1px solid #2a3f6d;background:#0b1530;color:#1f2937;font-size:13px;outline:none;">
                    <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;font-size:14px;">🔍</span>
                </div>
                <!-- 短剧 / 短片 -->
                <div style="display:flex;background:#0b1530;border:1px solid #2a3f6d;border-radius:10px;overflow:hidden;">
                    <div id="template-content-tab-short" onclick="switchTemplateContent('短剧')" style="padding:8px 22px;cursor:pointer;font-size:13px;font-weight:500;">短剧</div>
                    <div id="template-content-tab-film" onclick="switchTemplateContent('短片')" style="padding:8px 22px;cursor:pointer;font-size:13px;font-weight:500;">短片</div>
                </div>
            </div>

            <!-- 适配模型：Seedance 2.0 / 2.5 (tab 样式） -->
            <div style="margin-bottom:12px;">
                <div style="font-size:12px;color:#6b7280;margin-bottom:8px;">适配模型</div>
                <div style="display:flex;background:#0b1530;border:1px solid #2a3f6d;border-radius:8px;overflow:hidden;width:380px;">
                    <div id="template-model-tab-20" onclick="switchTemplateModel('Seedance 2.0')" style="flex:1;padding:9px 0;text-align:center;cursor:pointer;font-size:13px;font-weight:500;">Seedance 2.0</div>
                    <div id="template-model-tab-25" onclick="switchTemplateModel('Seedance 2.5')" style="flex:1;padding:9px 0;text-align:center;cursor:pointer;font-size:13px;font-weight:500;border-left:1px solid #2a3f6d;">Seedance 2.5</div>
                </div>
            </div>

            <!-- 模板列表：每卡片三标签+标题+右侧勾选圆圈 -->
            <div id="template-list" style="max-height:340px;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:10px;"></div>

            <!-- 模板说明蓝色框 -->
            <div id="template-desc" style="margin-top:14px;padding:14px 16px;background:linear-gradient(180deg,rgba(14,165,233,0.12),rgba(14,165,233,0.04));border:1px solid #1e40af;border-radius:10px;font-size:12px;color:#93c5fd;line-height:1.8;">
                <div style="font-size:13px;font-weight:600;color:#bfdbfe;margin-bottom:5px;display:flex;align-items:center;gap:5px;">
                    <span style="color:#3b82f6;">🛈</span> 模板说明
                </div>
                <div id="template-desc-body">选择一个模板查看详细说明。适用于 Seedance 2.0 / 即梦 2.0 动漫视频生成的小说转分镜式剧本模板。模板强调忠实保留原文台词和核心剧情，将小说内容拆分为15秒以内的小节，并按编号标注具体时长，适合直接复制用于动漫分镜创作与视频生成。</div>
            </div>
        </div>
    </div>
</div>

<!-- 分镜-镜头（小节）编辑弹窗 -->
<div id="shot-edit-modal" class="modal-overlay" style="display:none;z-index:1090;">
    <div class="modal-box" style="max-width:880px;width:94%;background:#111a33;border:1px solid #1f335c;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.7);">
        <div class="modal-header" style="padding:14px 22px;border-bottom:1px solid #1f335c;background:linear-gradient(180deg,rgba(99,102,241,0.10),transparent);">
            <div class="modal-title" style="font-size:16px;font-weight:700;color:#1f2937;">📝 编辑小节 · 镜头 <span id="shot-edit-title"></span></div>
            <button class="modal-close" onclick="closeShotEditModal()" style="color:#6b7280;">&times;</button>
        </div>
        <div class="modal-body" style="padding:16px 22px 12px 22px;max-height:66vh;overflow:auto;">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 14px;">
                <div><label style="font-size:12px;color:#6b7280;">序号</label><input id="se-shot_number" type="number" class="form-input" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">景别（镜头类型）</label><input id="se-shot_type" type="text" class="form-input" placeholder="如：特写/中景/全景…" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">时长（秒）</label><input id="se-duration_seconds" type="number" class="form-input" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">时间码</label><input id="se-timing" type="text" class="form-input" placeholder="00:00-00:03" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">机位角度</label><input id="se-camera_angle" type="text" class="form-input" placeholder="如：平视/仰视/微仰15°" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">镜头运动</label><input id="se-camera_movement" type="text" class="form-input" placeholder="如：slow dolly in/pan" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">光线</label><input id="se-lighting" type="text" class="form-input" placeholder="如：冷白顶光/侧光" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">画面比例</label><input id="se-aspect_ratio" type="text" class="form-input" placeholder="如：16:9/9:16" style="padding:8px 10px;"></div>
                <div><label style="font-size:12px;color:#6b7280;">画面质感</label><input id="se-quality_tags" type="text" class="form-input" placeholder="如：4K电影级" style="padding:8px 10px;"></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">人物站位（JSON）</label><textarea id="se-character_positions" rows="2" class="form-input" placeholder="{\"角色A\":\"左前\"}" style="padding:8px 10px;"></textarea></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">视线方向</label><textarea id="se-sight_line" rows="2" class="form-input" placeholder="角色A注视角色B右手U盘…" style="padding:8px 10px;"></textarea></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">画面 / 动作描述 *</label><textarea id="se-action_description" rows="4" class="form-input" placeholder="画面中出现的内容、动作调度…" style="padding:8px 10px;"></textarea></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">微表情 / 情绪</label><textarea id="se-micro_expression" rows="2" class="form-input" placeholder="嘴角微颤、瞳孔收缩…" style="padding:8px 10px;"></textarea></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">视觉钩子 / 重要元素</label><textarea id="se-visual_hook" rows="2" class="form-input" placeholder="停帧画面或戏剧化元素…" style="padding:8px 10px;"></textarea></div>
                <div style="grid-column:1 / 4;"><label style="font-size:12px;color:#6b7280;">原始生成内容（raw）</label><textarea id="se-raw_content" rows="3" class="form-input" placeholder="模型生成的原始文本" style="padding:8px 10px;"></textarea></div>
            </div>
        </div>
        <div class="modal-footer" style="border-top:1px solid #1f335c;padding:12px 22px;">
            <button class="cd-btn cd-btn-outline" onclick="closeShotEditModal()">取消</button>
            <button class="cd-btn cd-btn-primary" id="shot-edit-save" onclick="saveShotEdit()" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);">💾 保存</button>
        </div>
    </div>
</div>

<!-- 敏感词扫描结果弹窗 -->
<div id="sensitive-result-modal" class="modal-overlay" style="display:none;z-index:1100;">
    <div class="modal-box" style="max-width:780px;width:94%;background:#111a33;border:1px solid #1f335c;border-radius:14px;">
        <div class="modal-header" style="padding:14px 22px;border-bottom:1px solid #1f335c;background:linear-gradient(180deg,rgba(239,68,68,0.10),transparent);">
            <div class="modal-title" style="font-size:16px;font-weight:700;color:#1f2937;">🔍 敏感词扫描结果 · <span id="sr-summary" style="color:#f87171;">0 处命中</span></div>
            <button class="modal-close" onclick="closeSensitiveResultModal()" style="color:#6b7280;">&times;</button>
        </div>
        <div class="modal-body" style="padding:14px 22px;max-height:60vh;overflow:auto;">
            <div id="sr-hits" style="display:flex;flex-direction:column;gap:8px;"></div>
        </div>
        <div class="modal-footer" style="border-top:1px solid #1f335c;padding:12px 22px;">
            <button class="cd-btn cd-btn-primary" onclick="closeSensitiveResultModal()">知道了</button>
        </div>
    </div>
</div>

<!-- 小说查看/编辑弹窗 -->
<div id="novel-view-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:900px;">
        <div class="modal-header">
            <div class="modal-title">📖 <span id="novel-view-name">小说</span></div>
            <button class="modal-close" onclick="closeNovelView()">&times;</button>
        </div>
        <div class="modal-body">
            <div style="display:flex;gap:16px;height:480px;">
                <!-- 章节列表 -->
                <div style="width:240px;flex-shrink:0;background:#ffffff;border-radius:10px;border:1px solid #e5e7eb;overflow-y:auto;padding:10px;">
                    <div style="font-size:13px;color:#6b7280;padding:6px 8px;margin-bottom:6px;">章节列表</div>
                    <div id="novel-view-chapters"></div>
                </div>
                <!-- 编辑区 -->
                <div style="flex:1;display:flex;flex-direction:column;gap:10px;">
                    <div id="novel-view-editor" style="flex:1;display:flex;flex-direction:column;gap:10px;">
                        <div style="color:#6b7280;font-size:13px;display:flex;align-items:center;justify-content:center;height:100%;">点击左侧章节进行查看/编辑</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeNovelView()">关闭</button>
            <button class="cd-btn cd-btn-gradient" onclick="gotoScriptConvertFromNovel()" style="background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;">🎬 跳转剧本转换</button>
        </div>
    </div>
</div>

<!-- 导入/创作小说弹窗 -->
<div id="create-modal" class="modal-overlay">
    <div class="modal-box">
        <div class="modal-header">
            <div class="modal-title">导入 / 创作小说</div>
            <button class="modal-close" onclick="closeCreateModal()">&times;</button>
        </div>
        <div class="modal-body">
            <!-- 一级Tab: 剧本/小说导入 | AI创作 | Coze工作流 -->
            <div class="modal-tabs">
                <div class="modal-tab active" onclick="switchModalTab('import')">剧本/小说导入</div>
                <div class="modal-tab" onclick="switchModalTab('ai')">AI创作</div>
                <div class="modal-tab" onclick="switchModalTab('coze')">Coze工作流</div>
            </div>

            <!-- Tab 1: 剧本/小说导入 -->
            <div id="modal-panel-import">
                <!-- 子Tab: 小说 | 剧本 -->
                <div class="sub-tabs">
                    <div class="sub-tab active" onclick="switchImportSubTab('novel')">小说</div>
                    <div class="sub-tab" onclick="switchImportSubTab('script')">剧本</div>
                </div>

                <!-- 小说导入表单 -->
                <div id="import-novel-form">
                    <div class="form-group">
                        <div class="form-label">内容类型</div>
                        <div class="sub-tabs" style="margin-bottom: 8px;">
                            <div class="sub-tab active" id="ctype-novel" onclick="setContentType('novel')">小说</div>
                            <div class="sub-tab" id="ctype-script" onclick="setContentType('script')">剧本</div>
                        </div>
                        <div class="form-hint" id="content-type-hint">小说:原样导入,按「第X章」等正则切分。后续在「剧本转换」用小说转剧本模板。</div>
                    </div>
                    <div class="form-group">
                        <div class="form-label" id="name-label">小说名称</div>
                        <input type="text" id="import-name" class="form-input" placeholder="名称(上传文件时留空则用文件名)">
                    </div>
                    <div class="form-group">
                        <div class="form-label">屏幕模式</div>
                        <div class="tag-group">
                            <div class="tag-option" id="screen-v" onclick="toggleScreenMode('竖屏')">竖屏</div>
                            <div class="tag-option" id="screen-h" onclick="toggleScreenMode('横屏')">横屏</div>
                        </div>
                        <div class="form-hint">必选 1 个；后续短剧分镜模板会按横屏/竖屏自动过滤。</div>
                    </div>
                    <div class="form-group">
                        <div class="form-label">视觉方向标签</div>
                        <div class="tag-group">
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D国内真人')">3D国内真人</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D海外真人')">3D海外真人</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D国漫')">3D国漫</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '2D国漫')">2D国漫</div>
                        </div>
                        <div class="form-hint">只选择 1 个画面方向；女频、宅斗、复仇等内容标签由系统自动拆分识别。</div>
                    </div>
                    <div class="form-group">
                        <div class="sub-tabs" style="margin-bottom: 8px;">
                            <div class="sub-tab active" id="input-paste" onclick="switchInputMode('paste')">粘贴文本</div>
                            <div class="sub-tab" id="input-upload" onclick="switchInputMode('upload')">上传文件</div>
                        </div>
                        <textarea id="import-text" class="form-textarea" rows="8" placeholder="粘贴小说内容..."></textarea>
                        <input type="file" id="import-file" style="display: none;" accept=".txt,.md,.doc,.docx" onchange="handleFileSelect(this)">
                        <div id="file-name-display" style="font-size: 12px; color: #3b82f6; margin-top: 4px; display: none;"></div>
                    </div>
                </div>

                <!-- 剧本导入表单 -->
                <div id="import-script-form" style="display: none;">
                    <div class="form-group">
                        <div class="form-label">内容类型</div>
                        <div class="sub-tabs" style="margin-bottom: 8px;">
                            <div class="sub-tab" id="sctype-novel" onclick="setScriptContentType('novel')">小说</div>
                            <div class="sub-tab active" id="sctype-script" onclick="setScriptContentType('script')">剧本</div>
                        </div>
                        <div class="form-hint" id="script-content-type-hint">剧本:原样导入,按「第X集 / EP01」等集标号正则切分。后续在「剧本转换」用剧本格式化模板。</div>
                    </div>
                    <div class="form-group">
                        <div class="form-label" id="script-name-label">剧本名称</div>
                        <input type="text" id="import-script-name" class="form-input" placeholder="名称(上传文件时留空则用文件名)">
                    </div>
                    <div class="form-group">
                        <div class="form-label">屏幕模式</div>
                        <div class="tag-group">
                            <div class="tag-option" id="sscreen-v" onclick="toggleScriptScreenMode('竖屏')">竖屏</div>
                            <div class="tag-option" id="sscreen-h" onclick="toggleScriptScreenMode('横屏')">横屏</div>
                        </div>
                        <div class="form-hint">必选 1 个；后续短剧分镜模板会按横屏/竖屏自动过滤。</div>
                    </div>
                    <div class="form-group">
                        <div class="form-label">视觉方向标签</div>
                        <div class="tag-group">
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D国内真人')">3D国内真人</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D海外真人')">3D海外真人</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '3D国漫')">3D国漫</div>
                            <div class="tag-option" onclick="toggleVisualTag(this, '2D国漫')">2D国漫</div>
                        </div>
                        <div class="form-hint">只选择 1 个画面方向；女频、宅斗、复仇等内容标签由系统自动拆分识别。</div>
                    </div>
                    <div class="form-group">
                        <div class="sub-tabs" style="margin-bottom: 8px;">
                            <div class="sub-tab active" id="sinput-paste" onclick="switchScriptInputMode('paste')">粘贴文本</div>
                            <div class="sub-tab" id="sinput-upload" onclick="switchScriptInputMode('upload')">上传文件</div>
                        </div>
                        <textarea id="import-script-text" class="form-textarea" rows="8" placeholder="粘贴剧本内容(需含「第X集 / EP01」等集标号)..."></textarea>
                        <input type="file" id="import-script-file" style="display: none;" accept=".txt,.md,.doc,.docx" onchange="handleScriptFileSelect(this)">
                        <div id="script-file-name-display" style="font-size: 12px; color: #3b82f6; margin-top: 4px; display: none;"></div>
                    </div>
                </div>
            </div>

            <!-- Tab 2: AI创作 -->
            <div id="modal-panel-ai" style="display: none;">
                <!-- 阶段1：输入概念，生成大纲 -->
                <div id="ai-phase-1">
                    <div class="form-group">
                        <div class="form-label">小说名称</div>
                        <input type="text" id="ai-novel-name" class="form-input" placeholder="请输入小说名称">
                    </div>
                    <div class="form-group">
                        <div class="form-label">创作概念</div>
                        <textarea id="ai-concept" class="form-textarea" rows="4" placeholder="请用一句话描述你想要创作的小说概念，例如：穿越到古代的女主利用现代知识逆袭复仇的故事"></textarea>
                    </div>
                    <div class="form-group">
                        <div class="form-label">AI模型（语言大模型）</div>
                        <select id="ai-model-select" class="form-select">
                            <option value="">选择语言大模型</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-label">大纲模板</div>
                        <select id="ai-template-select" class="form-select">
                            <option value="">选择模板（可选）</option>
                        </select>
                    </div>
                </div>
                <!-- 阶段2：大纲 + 逐章生成 + 写作上下文 -->
                <div id="ai-phase-2" style="display:none;">
                    <div id="ai-outline-view"></div>
                    <!-- 生成进度 -->
                    <div id="ai-gen-bar" style="display:none;margin-bottom:12px;padding:12px 14px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;">
                        <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                            <span class="loading" style="display:inline-block;width:14px;height:14px;border:2px solid rgba(14,165,233,0.3);border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite;"></span>
                            <span id="ai-gen-text" style="font-size:13px;color:#3b82f6;">正在生成...</span>
                        </div>
                        <div style="height:6px;background:#ffffff;border-radius:3px;overflow:hidden;">
                            <div id="ai-gen-progress" style="height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:3px;transition:width 0.3s;"></div>
                        </div>
                    </div>
                    <!-- 写作上下文 -->
                    <div id="ai-context-box" style="margin-top:12px;"></div>
                </div>
            </div>

            <!-- Tab 3: Coze工作流 -->
            <div id="modal-panel-coze" style="display: none;">
                <div style="text-align: center; padding: 30px 0;">
                    <div style="font-size: 48px; margin-bottom: 16px;">🤖</div>
                    <div style="font-size: 16px; color: #111827; margin-bottom: 8px;">Coze 工作流 - 小说创作</div>
                    <div style="font-size: 13px; color: #6b7280; margin-bottom: 24px;">通过 Coze 工作流进行小说创作，支持更复杂的创作流程</div>
                    <button id="coze-workflow-btn" class="cd-btn cd-btn-gradient" onclick="openCozeWorkflow()">
                        打开 Coze 工作流
                    </button>
                    <div id="coze-workflow-hint" style="font-size: 12px; color: #f59e0b; margin-top: 12px; display: none;">
                        请先在系统设置中配置Coze工作流链接
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer" id="modal-footer-buttons">
            <button class="cd-btn cd-btn-outline" onclick="closeCreateModal()">取消</button>
            <button class="cd-btn cd-btn-primary" id="modal-submit-btn" onclick="submitImport()">导入</button>
        </div>
    </div>
</div>

<!-- 选题雷达数据源配置弹窗 -->
<div id="radar-api-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:720px;">
        <div class="modal-header">
            <div class="modal-title">选题雷达数据源配置</div>
            <button class="modal-close" onclick="closeRadarApiModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div style="font-size:12px;color:#6b7280;margin-bottom:16px;padding:10px;background:#f1f5f9;border-radius:6px;border:1px solid #e5e7eb;">
                💡 启用数据源后，系统将自动从以下网站采集短剧榜单数据并融合展示
            </div>

            <!-- 千山AI短剧雷达（独家数据源，启用后忽略其他数据源） -->
            <div style="margin-bottom:20px;padding:14px;border:1px solid #3b82f644;border-radius:8px;background:#3b82f608;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="font-size:15px;font-weight:600;color:#111827;">千山AI短剧雷达</div>
                    <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#3b82f622;color:#3b82f6;border:1px solid #3b82f644;">独家数据源</span>
                </div>
                <div style="font-size:11px;color:#6b7280;margin-bottom:10px;">启用后将排他性使用千山AI数据，其他数据源自动禁用</div>
                <div>
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">数据源URL</label>
                    <input type="text" id="qianshan-url" value="https://qianshanai.cn/tools/web/short-drama-radar" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;box-sizing:border-box;">
                </div>
                <div style="margin-top:10px;">
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">
                        Authorization Token（JWT Bearer）
                        <span style="color:#22c55e;margin-left:4px;">（推荐！直接调API，速度快、成功率高）</span>
                    </label>
                    <textarea id="qianshan-jwt" rows="2" placeholder="示例：Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:12px;font-family:monospace;box-sizing:border-box;resize:vertical;"></textarea>
                    <div style="font-size:11px;color:#6b7280;margin-top:4px;">
                        获取方式：浏览器登录千山 → F12 → Network → 点击任意XHR请求（如view-count）→ Headers → 找到 Authorization → 复制整行值粘贴（含"Bearer "前缀）
                    </div>
                </div>
                <div style="margin-top:10px;">
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">
                        登录Cookie
                        <span style="color:#f59e0b;margin-left:4px;">（备选，仅部分接口有效）</span>
                    </label>
                    <textarea id="qianshan-cookie" rows="2" placeholder="示例：p_h5_u=xxx; selectedStreamLevel=OD" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:12px;font-family:monospace;box-sizing:border-box;resize:vertical;"></textarea>
                </div>
                <div style="margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="qianshan-enabled" style="accent-color:#3b82f6;" onchange="onQianshanToggle(this.checked)">
                        启用千山AI数据源（启用后将忽略其他所有数据源）
                    </label>
                </div>
            </div>

            <div style="height:1px;background:#e5e7eb;margin:16px 0;"></div>

            <!-- 其他数据源容器（千山启用时整体禁用） -->
            <div id="radar-other-sources">
            <!-- 短剧工程风向标（红果短剧） -->
            <div style="margin-bottom:20px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="font-size:15px;font-weight:600;color:#111827;">短剧工程风向标</div>
                    <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#ef444422;color:#ef4444;">红果短剧</span>
                </div>
                <div>
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">数据源URL</label>
                    <input type="text" id="duanjugongcheng-url" value="https://www.duanjugongcheng.com/cn/fengxiangbiao" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;box-sizing:border-box;">
                </div>
                <div style="margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="duanjugongcheng-enabled" style="accent-color:#ef4444;">
                        启用短剧工程风向标数据源
                    </label>
                </div>
            </div>

            <div style="height:1px;background:#e5e7eb;margin:16px 0;"></div>

            <!-- 短剧007 -->
            <div style="margin-bottom:20px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="font-size:15px;font-weight:600;color:#111827;">短剧007</div>
                    <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#10b98122;color:#10b981;">多平台榜单</span>
                </div>
                <div>
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">数据源URL</label>
                    <input type="text" id="duanju007-url" value="https://duanju007.com/" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;box-sizing:border-box;">
                </div>
                <div style="margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="duanju007-enabled" style="accent-color:#10b981;">
                        启用短剧007数据源
                    </label>
                </div>
            </div>

            <div style="height:1px;background:#e5e7eb;margin:16px 0;"></div>

            <!-- 抖音话题页 -->
            <div style="margin-bottom:20px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="font-size:15px;font-weight:600;color:#111827;">抖音话题页</div>
                    <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#2563eb22;color:#2563eb;">短视频平台</span>
                </div>
                <div>
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">数据源URL</label>
                    <input type="text" id="douyin-url" value="https://www.douyin.com/hashtag/1740586899099651" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;box-sizing:border-box;">
                </div>
                <div style="margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="douyin-enabled" style="accent-color:#2563eb;">
                        启用抖音话题页数据源
                    </label>
                </div>
            </div>

            <div style="height:1px;background:#e5e7eb;margin:16px 0;"></div>

            <!-- vvvvvv.com 视频排行榜 -->
            <div style="margin-bottom:20px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <div style="font-size:15px;font-weight:600;color:#111827;">vvvvvv视频排行榜</div>
                    <span style="padding:2px 8px;border-radius:10px;font-size:10px;background:#8b5cf622;color:#8b5cf6;">视频榜单</span>
                </div>
                <div>
                    <label style="font-size:12px;color:#6b7280;margin-bottom:4px;display:block;">数据源URL</label>
                    <input type="text" id="vvvvvv-url" value="https://vvvvvv.com/video/rank?rankType=hotRank" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;box-sizing:border-box;">
                </div>
                <div style="margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" id="vvvvvv-enabled" style="accent-color:#8b5cf6;">
                        启用vvvvvv视频排行榜数据源
                    </label>
                </div>
            </div>
            </div><!-- /radar-other-sources -->

            <div style="height:1px;background:#e5e7eb;margin:16px 0;"></div>

            <!-- 同步设置 -->
            <div>
                <div style="font-size:14px;font-weight:600;color:#111827;margin-bottom:12px;">自动同步设置</div>
                <div style="display:flex;align-items:center;gap:12px;">
                    <label style="font-size:13px;color:#6b7280;">同步间隔：</label>
                    <select id="radar-sync-interval" style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;">
                        <option value="1">每 1 小时</option>
                        <option value="3">每 3 小时</option>
                        <option value="6" selected>每 6 小时</option>
                        <option value="12">每 12 小时</option>
                        <option value="24">每 24 小时</option>
                    </select>
                    <span id="radar-last-sync" style="font-size:12px;color:#6b7280;margin-left:auto;"></span>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeRadarApiModal()">取消</button>
            <button class="cd-btn cd-btn-primary" onclick="saveRadarApiConfig()">保存配置</button>
        </div>
    </div>
</div>

<!-- 增量导入弹窗 -->
<div id="incremental-import-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:600px;">
        <div class="modal-header">
            <div class="modal-title">📥 增量导入 - <span id="ii-modal-novel-name"></span></div>
            <button class="modal-close" onclick="closeIncrementalImport()">&times;</button>
        </div>
        <div class="modal-body">
            <div style="display:flex;gap:8px;margin-bottom:16px;">
                <div id="ii-tab-paste" class="modal-tab active" onclick="switchIITab('paste')">粘贴文本</div>
                <div id="ii-tab-upload" class="modal-tab" onclick="switchIITab('upload')">上传文件</div>
            </div>
            <div id="ii-panel-paste">
                <textarea id="ii-text" rows="10" placeholder="粘贴小说内容，按「第X章」自动切分..." style="width:100%;padding:12px;border-radius:8px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;line-height:1.8;outline:none;resize:none;"></textarea>
            </div>
            <div id="ii-panel-upload" style="display:none;">
                <div style="border:2px dashed #e5e7eb;border-radius:8px;padding:30px;text-align:center;cursor:pointer;" onclick="document.getElementById('ii-file').click()">
                    <div style="font-size:36px;margin-bottom:8px;">📎</div>
                    <div style="color:#6b7280;font-size:13px;">点击选择文件或拖拽到此处</div>
                    <input type="file" id="ii-file" accept=".txt,.md" style="display:none;" onchange="onIIFileSelected(this)">
                    <div id="ii-file-name" style="margin-top:8px;color:#3b82f6;font-size:12px;"></div>
                </div>
            </div>
            <div style="margin-top:12px;padding:10px;background:#f1f5f9;border-radius:6px;font-size:12px;color:#6b7280;">
                💡 将自动按「第X章/第X节」等章节标记切分，跳过已有章节，仅导入新增内容
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeIncrementalImport()">取消</button>
            <button class="cd-btn cd-btn-gradient" onclick="submitIncrementalImport()">开始导入</button>
        </div>
    </div>
</div>

<!-- 标签管理弹窗 -->
<div id="tags-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:500px;">
        <div class="modal-header">
            <div class="modal-title">🏷 标签管理 - <span id="tags-modal-novel-name"></span></div>
            <button class="modal-close" onclick="closeTagsModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="form-label">视觉方向标签</div>
                <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;">
                    <label style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;cursor:pointer;font-size:12px;color:#6b7280;">
                        <input type="checkbox" class="vt-tag" value="3D国内真人" style="accent-color:#2563eb;"> 3D国内真人
                    </label>
                    <label style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;cursor:pointer;font-size:12px;color:#6b7280;">
                        <input type="checkbox" class="vt-tag" value="3D海外真人" style="accent-color:#2563eb;"> 3D海外真人
                    </label>
                    <label style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;cursor:pointer;font-size:12px;color:#6b7280;">
                        <input type="checkbox" class="vt-tag" value="3D国漫" style="accent-color:#2563eb;"> 3D国漫
                    </label>
                    <label style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;cursor:pointer;font-size:12px;color:#6b7280;">
                        <input type="checkbox" class="vt-tag" value="2D国漫" style="accent-color:#2563eb;"> 2D国漫
                    </label>
                    <label style="padding:6px 12px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;cursor:pointer;font-size:12px;color:#6b7280;">
                        <input type="checkbox" class="vt-tag" value="真人短剧" style="accent-color:#2563eb;"> 真人短剧
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="form-label">自定义标签（逗号分隔）</div>
                <input id="tags-custom" type="text" placeholder="如：玄幻,古风,言情" style="width:100%;padding:10px;border-radius:6px;border:1px solid #e5e7eb;background:#f1f5f9;color:#1f2937;font-size:13px;">
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeTagsModal()">取消</button>
            <button class="cd-btn cd-btn-gradient" onclick="saveTagsModal()">保存标签</button>
        </div>
    </div>
</div>

<!-- 封面生成弹窗 -->
<div id="cover-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:560px;">
        <div class="modal-header">
            <div class="modal-title">🖼 封面生成 - <span id="cover-modal-novel-name"></span></div>
            <button class="modal-close" onclick="closeCoverModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="form-label">选择比例</div>
                <div style="display:flex;gap:10px;margin-bottom:16px;">
                    <label class="cover-ratio" data-ratio="3:4" style="padding:10px 14px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7280;">3:4 竖屏</label>
                    <label class="cover-ratio" data-ratio="4:3" style="padding:10px 14px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7280;">4:3 横屏</label>
                    <label class="cover-ratio" data-ratio="1:1" style="padding:10px 14px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7280;">1:1 方形</label>
                    <label class="cover-ratio" data-ratio="9:16" style="padding:10px 14px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7280;">9:16 竖屏</label>
                    <label class="cover-ratio" data-ratio="16:9" style="padding:10px 14px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;color:#6b7280;">16:9 横屏</label>
                </div>
            </div>
            <div class="form-group">
                <div class="form-label">选择模型（图片大模型）</div>
                <select id="cover-model" class="form-select" style="width:100%;padding:10px;">
                    <option value="">选择图片大模型</option>
                </select>
            </div>
            <div class="form-group">
                <div class="form-label">参考图（可选）</div>
                <div style="border:1px dashed #e5e7eb;border-radius:6px;padding:16px;text-align:center;cursor:pointer;" onclick="document.getElementById('cover-ref-file').click()">
                    <div style="font-size:24px;">📷</div>
                    <div style="color:#6b7280;font-size:12px;margin-top:4px;">点击上传参考图</div>
                    <input type="file" id="cover-ref-file" accept="image/*" style="display:none;" onchange="onCoverRefSelected(this)">
                </div>
            </div>
            <div id="cover-preview" style="margin-top:12px;"></div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeCoverModal()">取消</button>
            <button class="cd-btn cd-btn-gradient" onclick="generateCover()">生成封面</button>
        </div>
    </div>
</div>

<!-- 导出弹窗 -->
<div id="export-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:480px;">
        <div class="modal-header">
            <div class="modal-title">📦 导出小说 - <span id="export-modal-novel-name"></span></div>
            <button class="modal-close" onclick="closeExportModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="form-label">导出格式</div>
                <div style="display:flex;gap:10px;">
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-format" value="txt" checked style="accent-color:#2563eb;margin-right:4px;"> TXT
                    </label>
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-format" value="md" style="accent-color:#2563eb;margin-right:4px;"> Markdown
                    </label>
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-format" value="json" style="accent-color:#2563eb;margin-right:4px;"> JSON
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="form-label">导出范围</div>
                <div style="display:flex;gap:10px;">
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-scope" value="all" checked style="accent-color:#2563eb;margin-right:4px;"> 全部章节
                    </label>
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-scope" value="novel" style="accent-color:#2563eb;margin-right:4px;"> 仅小说
                    </label>
                    <label style="flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;text-align:center;font-size:13px;color:#6b7280;">
                        <input type="radio" name="export-scope" value="script" style="accent-color:#2563eb;margin-right:4px;"> 仅剧本
                    </label>
                </div>
            </div>
            <div style="padding:10px;background:#f1f5f9;border-radius:6px;font-size:12px;color:#6b7280;">
                💡 将下载文件到浏览器默认下载目录
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeExportModal()">取消</button>
            <button class="cd-btn cd-btn-gradient" onclick="submitExport()">开始导出</button>
        </div>
    </div>
</div>

<!-- 即梦登录确认弹窗 -->
<div id="jimeng-login-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:480px;">
        <div class="modal-header">
            <div class="modal-title">登录即梦提示</div>
            <button class="modal-close" onclick="closeJimengLoginModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div style="background:#f59e0b22;border:1px solid #f59e0b44;border-radius:8px;padding:14px 16px;margin-bottom:12px;">
                <div style="color:#f59e0b;font-size:13px;font-weight:600;margin-bottom:8px;">⚠️ 注意事项</div>
                <div style="color:#1f2937;font-size:12px;line-height:1.8;">
                    账号需同时具备【即梦高级会员】与平台侧【CLI生成权限】
                </div>
            </div>
            <div style="background:#f1f5f9;border:1px solid #e5e7eb;border-radius:8px;padding:14px 16px;margin-bottom:12px;">
                <div style="color:#f59e0b;font-size:12px;font-weight:600;margin-bottom:6px;">⚠️ 权限说明</div>
                <div style="color:#6b7280;font-size:12px;line-height:1.7;">
                    网页登录成功、显示高级会员或会员积分，都不等于<br>
                    CLI 权限已经开放；无权限账号会在生成前被明确提示。
                </div>
            </div>
            <div style="background:#2563eb22;border:1px solid #2563eb44;border-radius:8px;padding:14px 16px;">
                <div style="color:#3b82f6;font-size:12px;line-height:1.7;">
                    点击"开始授权"后将自动打开默认浏览器；<br>
                    若浏览器已经登录即梦，只需确认授权，完成后工具会自动检测登录状态。
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="cd-btn cd-btn-outline" onclick="closeJimengLoginModal()">取消</button>
            <button id="jimeng-login-start-btn" class="cd-btn cd-btn-gradient" onclick="doJimengLogin()" style="background:linear-gradient(90deg,#2563eb 0%,#3b82f6 100%);">开始授权</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/comic_drama.js?v=20260824j"></script>
<script>
(function(){
    function initRefinePanels(){
        console.log('[Refine] initRefinePanels called');
        try {
            for(var i=2;i<=3;i++){
                var p=document.getElementById('rf-panel-'+i);
                if(p){
                    p.style.display='none';
                    console.log('[Refine] rf-panel-'+i+' hidden');
                }
                var c=document.getElementById('rf-card-'+i);
                if(c){
                    c.classList.remove('active','done');
                }
            }
            var p1=document.getElementById('rf-panel-1');
            if(p1){
                p1.style.display='block';
                console.log('[Refine] rf-panel-1 shown');
            }
            var c1=document.getElementById('rf-card-1');
            if(c1){
                c1.classList.add('active');
                c1.classList.remove('done');
            }
        } catch(e) {
            console.error('[Refine] initRefinePanels error:', e);
        }
    }
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',initRefinePanels);
    }else{
        initRefinePanels();
    }
    window.initRefinePanels = initRefinePanels;
})();
</script>
{% endblock %}