.glass { background: rgba(39,39,42,0.85); backdrop-filter: blur(12px); }
        .tab-active { border-bottom: 2px solid #8b5cf6; color: #a78bfa; }
        .tab-inactive { border-bottom: 2px solid transparent; color: #a1a1aa; }
        .batch-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
        .batch-upload-item { position: relative; aspect-ratio: 1; border-radius: 8px; border: 2px dashed #52525b; overflow: hidden; cursor: pointer; }
        .batch-upload-item img { width: 100%; height: 100%; object-fit: cover; }
        .batch-upload-item .remove-btn { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(239,68,68,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
        .batch-upload-item:hover .remove-btn { opacity: 1; }
        /* 拖拽排序 */
        .drag-item { cursor: grab; }
        .drag-item:active { cursor: grabbing; }
        .drag-item.dragging { opacity: 0.4; }
        .drag-item.drag-over { border-color: #8b5cf6 !important; border-style: solid !important; background: rgba(139,92,246,0.1) !important; }
        .subtask-item { background: rgba(39,39,42,0.6); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 11px; border-left: 2px solid transparent; }
        .subtask-item.running { border-left-color: #3b82f6; }
        .subtask-progress { height: 2px; background: #3f3f46; border-radius: 1px; overflow: hidden; margin-top: 4px; }
        .subtask-progress-bar { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); width: 0%; transition: width 0.2s; }
        .task-item { background: rgba(39,39,42,0.6); border-radius: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(82,82,91,0.3); }
        .image-model-chip { background: var(--ui-control); color: var(--ui-text-muted); border-color: var(--ui-border); }
        .image-model-chip:hover { border-color: var(--ui-primary-border); color: var(--ui-text); background: var(--ui-control-hover); }
        .image-model-chip.active { background: var(--ui-primary-soft); color: var(--ui-primary-text); border-color: var(--ui-primary-border); font-weight: 600; }
        .ref-block-mode-hint { background: var(--ui-control); color: var(--ui-text); border: 1px solid var(--ui-border); }
        .ref-block-mode-hint i { color: var(--ui-primary-text); }
        .category-toggle-btn, .category-setting-btn { border: 1px solid var(--ui-border); font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; }
        .category-toggle-btn.is-off { background: var(--ui-warning-bg); color: var(--ui-warning-text); border-color: var(--ui-warning-border); }
        .category-toggle-btn.is-on { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); box-shadow: 0 0 0 2px rgba(16,185,129,0.12); }
        .category-setting-btn, .category-primary-soft-btn { background: var(--ui-primary-soft); color: var(--ui-primary-text); border: 1px solid var(--ui-primary-border); }
        .category-setting-btn:hover, .category-primary-soft-btn:hover { background: var(--ui-primary); color: #fff; }
        .category-panel-card { background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text); }
        .category-panel-subtitle, .category-panel-label, .category-preset-time { color: var(--ui-text-muted); }
        .category-panel-input { background: var(--detail-asset-bg); border: 1px solid var(--ui-border); color: var(--ui-text); }
        .category-panel-input::placeholder { color: var(--ui-text-soft); }
        .category-primary-btn { background: var(--ui-success-soft); border: 1px solid var(--ui-success-border); color: var(--ui-success-text); font-weight: 700; }
        .category-primary-btn:hover { background: var(--ui-success-text); color: var(--ui-surface); }
        .category-primary-btn:disabled { opacity: 0.72; cursor: wait; }
        .category-icon-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-muted); background: var(--ui-control); border: 1px solid var(--ui-border); }
        .category-icon-btn:hover { color: var(--ui-text); background: var(--ui-control-hover); }
        .category-panel-section { border: 1px solid var(--ui-border); background: var(--ui-surface-soft); }
        .category-panel-footer { border-top: 1px solid var(--ui-border); }
        .category-secondary-btn { background: var(--ui-control); color: var(--ui-text-muted); border: 1px solid var(--ui-border); }
        .category-secondary-btn:hover { background: var(--ui-control-hover); color: var(--ui-text); }
        .category-current-name, .category-preset-name { color: var(--ui-text); font-weight: 700; }
        .category-preset-item { background: var(--ui-control); border: 1px solid var(--ui-border); }
        .category-load-btn { background: var(--ui-success-soft); color: var(--ui-success-text); border: 1px solid var(--ui-success-border); }
        .category-delete-btn { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.32); }
        .category-admin-debug { color: var(--ui-text-muted); display: grid; gap: 4px; }
        .category-admin-debug span { color: var(--ui-text); }
        .category-admin-raw { background: var(--detail-asset-bg); color: var(--ui-text); border: 1px solid var(--ui-border); max-height: 180px; }
        .status-badge { font-size: 9px; padding: 2px 4px; border-radius: 4px; }
        .status-pending { background: rgba(139,92,246,0.2); color: #a78bfa; }
        .status-running { background: rgba(59,130,246,0.2); color: #60a5fa; }
        .status-success { background: rgba(139,92,246,0.15); color: #7c3aed; font-size: 10px; font-weight: 600; }
        .status-failed { background: rgba(239,68,68,0.2); color: #f87171; }
        #toast { transition: all 0.3s; }
        /* 加载动画（本地定义，不依赖 Font Awesome CDN） */
        @keyframes spin-fade { 0% { opacity: 1; transform: rotate(0deg); } 50% { opacity: 0.5; } 100% { opacity: 1; transform: rotate(360deg); } }
        @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .spin-anim { animation: spin-fade 1.2s ease-in-out infinite; }
        .loading-spin { animation: fa-spin 1s linear infinite; display: inline-block; }
        /* 缩略图容器 */
        .thumb-wrap { width: 40px; height: 40px; flex-shrink: 0; }
        .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); cursor: zoom-in; }
        .thumb-wrap .loading-spin { width: 40px; height: 40px; display: flex; align-items: center; justify-center; }
        /* 确认弹窗 */
        #confirmDialog { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
        #confirmDialog.active { display: flex; }
        #exportDialog { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
        #exportDialog.active { display: flex; }
        #importRefTemplateDialog { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
        #importRefTemplateDialog.active { display: flex; }
        .confirm-card { background: #27272a; border: 1px solid #52525b; border-radius: 16px; padding: 24px; max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; }
        .confirm-card h3 { font-size: 16px; font-weight: 600; color: #a78bfa; margin-bottom: 16px; }
        .confirm-field { margin-bottom: 12px; }
        .confirm-field label { display: block; font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
        .confirm-field .value { background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #d4d4d8; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; }
        .confirm-field textarea.value { width: 100%; resize: none; font-family: inherit; }
        .confirm-btns { display: flex; gap: 10px; margin-top: 20px; }
        .confirm-btns button { flex: 1; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .confirm-cancel { background: #3f3f46; color: #a1a1aa; border: 1px solid #52525b; }
        .confirm-cancel:hover { background: #52525b; color: #fff; }
        .confirm-ok { background: #8b5cf6; color: #fff; border: none; font-weight: 600; }
        .confirm-ok:hover { background: #a78bfa; }
        .confirm-analyze { background: #7c3aed; color: #fff; border: none; font-weight: 500; }
        .confirm-analyze:hover { background: #8b5cf6; }
        .confirm-analyze:disabled { background: #52525b; color: #a1a1aa; cursor: not-allowed; }
        /* 确认弹窗调试面板（左右分栏） */
        .confirm-split { display: flex; gap: 16px; }
        .confirm-left { flex: 1; min-width: 0; overflow-y: auto; max-height: 60vh; }
        .confirm-right { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 60vh; }
        .confirm-right .preview-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
        .confirm-right .preview-toolbar .preview-label { font-size: 11px; color: #a78bfa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
        .confirm-right .preview-toolbar .preview-btn { padding: 3px 10px; border-radius: 6px; background: #3f3f46; color: #a1a1aa; font-size: 11px; cursor: pointer; border: 1px solid #52525b; transition: all 0.15s; white-space: nowrap; }
        .confirm-right .preview-toolbar .preview-btn:hover { background: #52525b; color: #fff; }
        .confirm-right .preview-toolbar .preview-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .preview-textarea { flex: 1; width: 100%; background: #18181b; border: 1px solid #3f3f46; border-radius: 10px; padding: 12px; font-size: 12px; color: #d4d4d8; font-family: 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace; line-height: 1.6; resize: none; white-space: pre; overflow: auto; min-height: 200px; }
        .preview-textarea:focus { outline: none; border-color: #8b5cf6; }
        .preview-block-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .preview-block-tab { padding: 2px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; border: 1px solid #3f3f46; background: #27272a; color: #a1a1aa; transition: all 0.15s; }
        .preview-block-tab.active { background: rgba(139,92,246,0.25); border-color: rgba(139,92,246,0.5); color: #a78bfa; }
        /* 提示词历史 */
        .prompt-history-btn { padding: 4px 10px; border-radius: 6px; background: #3f3f46; color: #a1a1aa; font-size: 12px; cursor: pointer; border: 1px solid #52525b; transition: all 0.15s; white-space: nowrap; }
        .prompt-history-btn:hover { background: #52525b; color: #fff; }
        #promptHistoryPanel { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #27272a; border: 1px solid #52525b; border-radius: 10px; margin-top: 6px; max-height: 200px; overflow-y: auto; z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
        #promptHistoryPanel.active { display: block; }
        .ph-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: #d4d4d8; cursor: pointer; border-bottom: 1px solid #3f3f46; transition: background 0.15s; }
        .ph-item:last-child { border-bottom: none; }
        .ph-item:hover { background: #3f3f46; }
        .ph-item-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ph-item-del { color: #ef4444; padding: 2px 6px; border-radius: 4px; font-size: 11px; }
        .ph-item-del:hover { background: rgba(239,68,68,0.2); }
        .ph-empty { padding: 16px; text-align: center; color: #71717a; font-size: 13px; }
        .prompt-history-wrap { position: relative; }
        #modelBody { transition: max-height 0.25s ease; }
        #modelBody.collapsed { max-height: 0 !important; overflow:hidden; }
        #modelBody:not(.collapsed) { max-height: 560px; }
        .sectionBody { transition: max-height 0.25s ease; overflow:hidden; }
        .sectionBody.collapsed { max-height: 0 !important; margin:0 !important; padding:0 !important; border:0 !important; }
        .sectionBody:not(.collapsed) { max-height: 2000px; }
        #floatingList { max-height: none; overflow-y: auto; }
        #floatingBar { max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
        #floatingBar > div:last-child { flex: 1; min-height: 0; }
        /* 重试弹窗 */
        #retryDialog { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
        #retryDialog.active { display: flex; }
        /* 逐块标签 */
        .ref-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: calc(10px * var(--sf)); cursor: pointer; transition: all 0.15s; user-select: none; flex-shrink: 0; }
        .ref-tag-off { background: rgba(255,255,255,0.06); color: #71717a; border: 1px solid rgba(255,255,255,0.08); }
        .ref-tag-on { font-weight: 500; border: 1px solid; }
        .ref-tag-off:hover { background: rgba(255,255,255,0.1); }
        .tag-violet.ref-tag-on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
        .tag-emerald.ref-tag-on { background: #059669; color: #fff; border-color: #059669; }
        .tag-amber.ref-tag-on { background: #d97706; color: #fff; border-color: #d97706; }
        .tag-teal.ref-tag-on { background: #0d9488; color: #fff; border-color: #0d9488; }
        .tag-blue.ref-tag-on { background: #2563eb; color: #fff; border-color: #2563eb; }
        /* 多产品灵活绑定 v19 样式 */
        .ref-block-active { border-color: #8b5cf6 !important; border-width: 2px !important; box-shadow: 0 0 20px rgba(139,92,246,0.3) !important; }
        .product-selected { border-color: #8b5cf6 !important; border-style: solid !important; box-shadow: 0 0 12px rgba(139,92,246,0.4) !important; }
        .product-selected-badge { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #8b5cf6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; z-index: 2; }
        .block-name-input { background: transparent; border: none; border-bottom: 1px dashed rgba(255,255,255,0.2); color: #e4e4e7; font-size: inherit; outline: none; width: 100%; }
        .block-name-input:focus { border-bottom-color: #8b5cf6; }
        .block-hover-desc { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; padding: 6px 10px; font-size: calc(11px * var(--sf)); color: #d4d4d8; white-space: nowrap; max-width: 260px; z-index: 50; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
        .block-hover-trigger:hover .block-hover-desc { display: block; }
        .save-task-btn { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; border: none; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .save-task-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(139,92,246,0.4); }
        .save-task-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .active-block-hint { font-size: calc(11px * var(--sf)); color: #a78bfa; padding: 4px 8px; background: rgba(139,92,246,0.15); border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
        /* v20 三页布局样式 */
        .page-tab { cursor: pointer; transition: all 0.15s; }
        .page-tab:hover { background: rgba(139,92,246,0.1); }
        .page-tab.active { background: rgba(139,92,246,0.2); border: 1px solid rgba(139,92,246,0.4); }
        .page-tab:not(.active) { border: 1px solid transparent; }
        #historyPanel { transition: opacity 0.2s; }
        #historyPanel.collapsed { width: 36px !important; min-width: 36px; }
        #historyPanel.collapsed #historyBody { display: none; }
        #historyPanel.collapsed #historyCollapseBtn i { transform: rotate(180deg); }
        #historyPanel:not(.collapsed) { width: 180px; min-width: 180px; }
        /* ====== 自适应宽度 CSS 变量（大屏扩展 + 小屏收缩） ====== */
        :root {
            --container-max-w: 1400px;  /* 默认 ~1400px 内容区 */
            --left-col-w: 400px;
            --right-col-w: 200px;
            --flex-gap: 16px;
            --ui-surface: #18181b;
            --ui-surface-raised: #27272a;
            --ui-surface-soft: rgba(24,24,27,0.82);
            --ui-control: rgba(39,39,42,0.9);
            --ui-control-hover: #3f3f46;
            --ui-border: rgba(63,63,70,0.85);
            --ui-border-soft: rgba(63,63,70,0.8);
            --ui-text: #e4e4e7;
            --ui-text-muted: #a1a1aa;
            --ui-text-soft: #71717a;
            --ui-primary: #8b5cf6;
            --ui-primary-text: #c4b5fd;
            --ui-primary-soft: rgba(124,58,237,0.25);
            --ui-primary-border: rgba(139,92,246,0.8);
            --ui-success-text: #6ee7b7;
            --ui-success-soft: rgba(16,185,129,0.14);
            --ui-success-border: rgba(16,185,129,0.55);
            --ui-warning-bg: rgba(245,158,11,0.13);
            --ui-warning-border: rgba(245,158,11,0.55);
            --ui-warning-text: #fde68a;
            --ui-warning-icon: #f59e0b;
            --ui-danger-line: rgba(244,63,94,0.88);
            --ui-guide-selected: rgba(251,191,36,0.95);
            --detail-stage-bg: rgba(24,24,27,0.72);
            --detail-asset-bg: #09090b;
            --detail-badge-bg: rgba(0,0,0,0.72);
            --detail-canvas-shadow: 0 12px 32px rgba(0,0,0,0.35);
            --detail-modal-bg: rgba(0,0,0,0.86);
            --detail-empty-border: rgba(113,113,122,0.55);
            --sf: 1;  /* 尺寸缩放因子 */
        }
        /* ====== 大屏扩展（宽屏显示器自适应） ====== */
        @media (min-width: 1920px) {
            :root {
                --container-max-w: 1800px;
                --left-col-w: 520px;
                --right-col-w: 280px;
                --flex-gap: 20px;
            }
        }
        @media (min-width: 2560px) {
            :root {
                --container-max-w: 2200px;
                --left-col-w: 620px;
                --right-col-w: 320px;
                --flex-gap: 24px;
            }
        }
        @media (min-width: 3840px) {
            :root {
                --container-max-w: 3000px;
                --left-col-w: 750px;
                --right-col-w: 380px;
                --flex-gap: 28px;
            }
        }
        /* ====== 小屏收缩 ====== */
        @media (max-width: 1200px) {
            :root {
                --container-max-w: 100%;
                --left-col-w: 340px;
                --right-col-w: 170px;
                --flex-gap: 12px;
            }
        }
        @media (max-width: 1000px) {
            :root {
                --container-max-w: 100%;
                --left-col-w: 280px;
                --right-col-w: 150px;
                --flex-gap: 10px;
            }
        }
        /* 容器宽度使用 CSS 变量 */
        .max-w-7xl {
            max-width: var(--container-max-w, 1400px) !important;
        }
        /* ====== 尺寸缩放模式（font-size 方案，不影响 canvas） ====== */
        html { font-size: calc(16px * var(--sf)); }
        /* 让固定 px 的 text-[10px] 和 text-[11px] 跟随缩放 */
        .text-\[10px\] { font-size: calc(10px * var(--sf)) !important; }
        .text-\[11px\] { font-size: calc(11px * var(--sf)) !important; }
        .text-\[12px\] { font-size: calc(12px * var(--sf)) !important; }
        .text-\[13px\] { font-size: calc(13px * var(--sf)) !important; }
        /* 缩略图尺寸跟随缩放 */
        .thumb-wrap { width: calc(40px * var(--sf)) !important; height: calc(40px * var(--sf)) !important; }
        .thumb-wrap img { border-radius: calc(6px * var(--sf)); }
        .thumb-wrap .loading-spin { width: calc(40px * var(--sf)) !important; height: calc(40px * var(--sf)) !important; }
        .size-btn {
            cursor: pointer; padding: 2px 8px; border-radius: 6px;
            font-size: 12px; transition: all 0.15s; line-height: 1.6;
            background: #3f3f46; color: #a1a1aa; border: 1px solid #52525b;
        }
        .size-btn:hover { background: #52525b; color: #fff; }
        .size-btn.active { background: rgba(139,92,246,0.25); color: #a78bfa; border-color: rgba(139,92,246,0.5); }
        /* ====== 三栏布局核心修复 ====== */
        /* flex 行布局，水平溢出显示滚动条，不裁剪 */
        #mainFlexRow {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: var(--flex-gap, 16px);
            overflow: visible !important;
            width: 100% !important;
            flex: 1 !important;
            min-height: 0 !important;
        }
        #mainFlexRow > .page-panel.active {
            flex: 1 !important;
            min-width: 0 !important;
        }
        .page-panel { display: none; }
        .page-panel.active { display: flex; flex-direction: column; min-width: 0; }
        #sharedLeftCol { overflow-y: auto; overflow-x: hidden; min-width: 0 !important; }
        #sharedLeftCol > * { flex-shrink: 0; }
        #floatingBar { flex: 0 0 auto; width: var(--right-col-w); min-width: 0; }
        .layout-resizer {
            flex: 0 0 10px;
            align-self: stretch;
            min-height: 160px;
            cursor: col-resize;
            position: relative;
            border-radius: 6px;
            touch-action: none;
        }
        .layout-resizer::before {
            content: "";
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            border-radius: 999px;
            background: var(--ui-border-soft);
            opacity: 0.55;
            transition: opacity 0.15s, background 0.15s, width 0.15s;
        }
        .layout-resizer:hover::before,
        .layout-resizer.dragging::before {
            width: 3px;
            opacity: 1;
            background: var(--ui-primary);
        }
        body.layout-resizing {
            cursor: col-resize;
            user-select: none;
        }
        body.layout-resizing #sharedLeftCol,
        body.layout-resizing #floatingBar,
        body.layout-resizing #mainFlexRow > .page-panel.active {
            transition: none !important;
        }
        #refAnalysisControls,
        #cloneModeExtraControls,
        #refBlockFineTune .flex,
        #multiBindToolbar .flex {
            min-width: 0;
        }
        #refAnalysisControls,
        #cloneModeExtraControls {
            flex-wrap: wrap;
            row-gap: 4px;
            white-space: normal !important;
        }
        #refAnalysisControls > span,
        #cloneModeExtraControls > div {
            flex-shrink: 0;
        }
        #previewArea,
        #previewArea2,
        #previewArea3 {
            min-width: 0;
            overflow-x: auto !important;
        }
        .generation-results-empty {
            width: 100%;
            min-height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ui-text-soft);
            font-size: 13px;
        }
        .generation-results-grid {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            padding: 10px;
            align-content: start;
        }
        @media (max-width: 700px) {
            .generation-results-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        .generation-result-card {
            position: relative;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid var(--ui-border);
            background: var(--ui-surface);
            color: var(--ui-text);
        }
        .generation-result-card img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .generation-result-card.loading,
        .generation-result-card.failed {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 7px;
            padding: 10px;
        }
        .generation-result-card.loading {
            color: var(--ui-primary-text);
            background: var(--ui-primary-soft);
            border-color: var(--ui-primary-border);
            font-size: 12px;
            font-weight: 700;
        }
        .generation-result-card.loading.developing {
            justify-content: center;
            background:
                radial-gradient(circle at 30% 22%, rgba(255,255,255,0.2), transparent 24%),
                radial-gradient(circle at 68% 76%, rgba(45,212,191,0.22), transparent 30%),
                linear-gradient(145deg, rgba(51,65,85,0.92), rgba(15,23,42,0.96));
            border-color: var(--ui-border);
            color: rgba(255,255,255,0.88);
            padding: 0;
            isolation: isolate;
        }
        .generation-develop-scene {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.18), transparent 24%, rgba(255,255,255,0.08) 42%, transparent 64%),
                repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 11px),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 13px),
                linear-gradient(160deg, rgba(34,197,94,0.22), rgba(59,130,246,0.16) 48%, rgba(168,85,247,0.18));
            filter: saturate(1.05);
        }
        .generation-develop-frame {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 42% 34%, rgba(255,255,255,0.34), transparent 18%),
                radial-gradient(circle at 62% 58%, rgba(255,255,255,0.16), transparent 26%),
                linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.24) 42%, rgba(255,255,255,0.04));
            opacity: 0.24;
            transform: scale(1.04);
            animation: developReveal 2.4s ease-in-out infinite;
            mix-blend-mode: screen;
        }
        .generation-develop-glow {
            position: absolute;
            inset: -25%;
            background: conic-gradient(from 90deg, transparent, rgba(255,255,255,0.18), transparent, rgba(14,165,233,0.18), transparent, rgba(168,85,247,0.16), transparent);
            animation: developGlow 4.2s linear infinite;
            opacity: 0.7;
        }
        .generation-develop-scan {
            position: absolute;
            left: -35%;
            right: -35%;
            top: -36%;
            height: 42%;
            background: linear-gradient(180deg, transparent, rgba(255,255,255,0.42), rgba(255,255,255,0.08), transparent);
            filter: blur(1.5px);
            transform: rotate(-8deg);
            animation: developScan 2.15s ease-in-out infinite;
        }
        @keyframes developReveal {
            0% { opacity: 0.18; transform: scale(1.08); filter: blur(9px) saturate(0.78); }
            45% { opacity: 0.72; transform: scale(1); filter: blur(1.5px) saturate(1.18); }
            100% { opacity: 0.26; transform: scale(1.05); filter: blur(7px) saturate(0.9); }
        }
        @keyframes developGlow {
            to { transform: rotate(360deg); }
        }
        @keyframes developScan {
            0% { transform: translateY(0) rotate(-8deg); opacity: 0; }
            18% { opacity: 1; }
            78% { opacity: 0.9; }
            100% { transform: translateY(335%) rotate(-8deg); opacity: 0; }
        }
        .generation-result-card.loading.developing > span {
            position: relative;
            z-index: 2;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.34);
            color: rgba(255,255,255,0.92);
            font-size: 12px;
            letter-spacing: 0;
            backdrop-filter: blur(5px);
        }
        .generation-result-card.loading.developing .generation-thumb-progress {
            display: none !important;
        }
        .generation-result-card.loading i {
            font-size: 22px;
        }
        .generation-thumb-progress {
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 8px;
            padding: 7px;
            border-radius: 7px;
            background: rgba(15, 23, 42, 0.78);
            border: 1px solid rgba(255,255,255,0.12);
            backdrop-filter: blur(8px);
        }
        .generation-thumb-progress-head {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            color: rgba(255,255,255,0.82);
            font-size: 10px;
            line-height: 1;
            margin-bottom: 5px;
        }
        .generation-thumb-progress-track {
            height: 4px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255,255,255,0.16);
        }
        .generation-thumb-progress-fill {
            height: 100%;
            border-radius: 999px;
            transition: width 0.24s ease;
        }
        .generation-thumb-progress-fill.active {
            background: linear-gradient(90deg, #38bdf8, #8b5cf6);
        }
        .generation-thumb-progress-fill.paused {
            background: #f59e0b;
        }
        .generation-result-card.failed {
            background: rgba(127, 29, 29, 0.16);
            border-color: rgba(244, 63, 94, 0.55);
            padding-bottom: 10px;
        }
        .generation-result-fail-title {
            color: #fb7185;
            font-size: 14px;
            line-height: 1.25;
            font-weight: 800;
        }
        .generation-result-fail-sub {
            color: var(--ui-text-muted);
            font-size: 12px;
            line-height: 1.35;
        }
        .generation-result-actions {
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 8px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.15s, transform 0.15s;
        }
        .generation-result-actions.failed-actions {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .generation-result-card:hover .generation-result-actions {
            opacity: 1;
            transform: translateY(0);
        }
        .generation-result-actions button,
        .generation-result-delete {
            min-height: 28px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 700;
            color: #fff;
            background: rgba(15,23,42,0.78);
            border: 1px solid rgba(255,255,255,0.16);
            backdrop-filter: blur(8px);
        }
        .generation-result-actions button.danger,
        .generation-result-delete {
            background: rgba(185,28,28,0.82);
        }
        #floatingBar .task-item {
            overflow-wrap: anywhere;
        }
        #floatingBar.floating-collapsed {
            width: 36px !important;
            min-width: 36px !important;
            padding-left: 6px !important;
            padding-right: 6px !important;
            align-items: center;
        }
        #floatingBar.floating-collapsed > div:first-child {
            width: 100%;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 0 !important;
        }
        #floatingBar.floating-collapsed > div:first-child > span {
            writing-mode: vertical-rl;
            white-space: nowrap;
            letter-spacing: 0;
        }
        #floatingBar.floating-collapsed > div:first-child > div {
            flex-direction: column;
            gap: 6px;
        }
        #floatingBar.floating-collapsed > div:not(:first-child) {
            display: none !important;
        }
        #floatingBar.floating-collapsed button[onclick="clearHistory()"] {
            display: none !important;
        }
        @media (max-width: 1440px) {
            :root {
                --left-col-w: clamp(320px, 29vw, 380px);
                --right-col-w: 180px;
                --flex-gap: 12px;
            }
            header.max-w-7xl,
            nav.max-w-7xl,
            main.max-w-7xl {
                padding-left: 18px !important;
                padding-right: 18px !important;
            }
            #taskBadge {
                padding: 1px 5px !important;
            }
        }
        @media (max-width: 1100px) {
            :root {
                --left-col-w: 300px;
                --right-col-w: 160px;
                --flex-gap: 10px;
            }
            #sharedLeftCol {
                min-width: 0 !important;
            }
        }
        @media (max-width: 920px) {
            main.max-w-7xl {
                overflow: visible !important;
            }
            #pagePanel1,
            #pagePanel2,
            #pagePanel3 {
                min-width: 260px;
            }
        }
    /* ====== 浅色主题（专业清爽，层次分明的灰白配色）====== */
    html:not(.dark) { --bg-card: #ffffff; --bg-soft: #f0f2f5; --text-main: #1e1e2a; --text-sec: #52525b; --text-muted: #8a8c98; --bd: #e2e5ea; --bd-light: #eef0f4; --purple: #7c3aed; --ui-surface: #ffffff; --ui-surface-raised: #ffffff; --ui-surface-soft: #ffffff; --ui-control: #f6f7f9; --ui-control-hover: #eef0f4; --ui-border: #dfe3ea; --ui-border-soft: #e8ebf0; --ui-text: #1e1e2a; --ui-text-muted: #52525b; --ui-text-soft: #8a8c98; --ui-primary: #7c3aed; --ui-primary-text: #6d28d9; --ui-primary-soft: rgba(124,58,237,0.12); --ui-primary-border: rgba(124,58,237,0.34); --ui-success-text: #047857; --ui-success-soft: rgba(5,150,105,0.11); --ui-success-border: rgba(5,150,105,0.28); --ui-warning-bg: #fff7ed; --ui-warning-border: #fdba74; --ui-warning-text: #9a3412; --ui-warning-icon: #ea580c; --ui-danger-line: rgba(225,29,72,0.9); --ui-guide-selected: rgba(217,119,6,0.95); --detail-stage-bg: #eef0f4; --detail-asset-bg: #ffffff; --detail-badge-bg: rgba(30,30,42,0.72); --detail-canvas-shadow: 0 12px 28px rgba(15,23,42,0.16); --detail-modal-bg: rgba(15,23,42,0.5); --detail-empty-border: rgba(138,140,152,0.45); }
    html:not(.dark) body { background-color: #f0f2f5 !important; color: #1e1e2a !important; }
    /* 背景层：body 浅灰 → 卡片白 → 面板白带阴影，逐层递进 */
    html:not(.dark) .bg-neutral-900 { background: #f0f2f5 !important; }
    html:not(.dark) .bg-zinc-900, html:not(.dark) .bg-zinc-900\/60 { background: #ffffff !important; }
    html:not(.dark) .bg-zinc-800, html:not(.dark) .bg-zinc-800\/40, html:not(.dark) .bg-zinc-800\/50, html:not(.dark) .bg-zinc-800\/60, html:not(.dark) .bg-zinc-800\/80, html:not(.dark) .bg-zinc-800\/85, html:not(.dark) .bg-zinc-800\/30 { background: #ffffff !important; border-color: var(--bd) !important; }
    html:not(.dark) .bg-zinc-700, html:not(.dark) .bg-zinc-700\/50, html:not(.dark) .bg-zinc-700\/40, html:not(.dark) .bg-zinc-700\/30 { background: #f5f6f8 !important; border-color: var(--bd) !important; }
    html:not(.dark) .bg-zinc-700\/20 { background: #eef0f4 !important; }
    /* 玻璃卡片：白色半透明，增加通透感 */
    html:not(.dark) .glass { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(12px); border: 1px solid var(--bd) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }
    /* 文字：深色为主，层次分明 */
    html:not(.dark) .text-gray-100, html:not(.dark) .text-zinc-200, html:not(.dark) .text-zinc-300 { color: var(--text-main) !important; }
    html:not(.dark) .text-zinc-400, html:not(.dark) .text-zinc-500 { color: var(--text-sec) !important; }
    html:not(.dark) .text-zinc-600 { color: var(--text-muted) !important; }
    html:not(.dark) .text-violet-300 { color: var(--purple) !important; }
    html:not(.dark) .text-violet-400 { color: var(--purple) !important; }
    /* 边框统一 */
    html:not(.dark) .border-zinc-700, html:not(.dark) .border-zinc-700\/50, html:not(.dark) .border-zinc-700\/40, html:not(.dark) .border-zinc-700\/30, html:not(.dark) .border-white\/5, html:not(.dark) .border-white\/10 { border-color: var(--bd) !important; }
    html:not(.dark) .border-zinc-600 { border-color: var(--bd) !important; }
    html:not(.dark) .border-violet-500\/30, html:not(.dark) .border-violet-500\/40 { border-color: rgba(124,58,237,0.25) !important; }
    /* 输入区：白底灰边 */
    html:not(.dark) input, html:not(.dark) select { background: #ffffff !important; border-color: var(--bd) !important; color: var(--text-main) !important; }
    html:not(.dark) #previewTextarea, html:not(.dark) #confirmPrompt, html:not(.dark) #productDescText, html:not(.dark) #extraPrompt, html:not(.dark) textarea.value, html:not(.dark) .preview-textarea { background: #ffffff !important; border-color: var(--bd) !important; color: var(--text-main) !important; }
    html:not(.dark) .confirm-field .value { background: #f5f6f8 !important; border-color: var(--bd) !important; color: var(--text-main) !important; }
    /* 子任务/任务卡片 */
    html:not(.dark) .subtask-item { background: #f5f6f8 !important; border-left-color: #3b82f6 !important; }
    html:not(.dark) .subtask-item.running { border-left-color: #3b82f6 !important; }
    html:not(.dark) .task-item { background: #ffffff !important; border-color: var(--bd) !important; }
    /* 确认弹窗 */
    html:not(.dark) .confirm-card { background: #ffffff !important; border-color: var(--bd) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important; }
    html:not(.dark) .preview-block-tab { background: #f0f2f5 !important; border-color: var(--bd) !important; color: var(--text-sec) !important; }
    html:not(.dark) .preview-block-tab.active { background: rgba(124,58,237,0.12) !important; border-color: rgba(124,58,237,0.3) !important; color: var(--purple) !important; }
    /* 下拉面板/历史记录 */
    html:not(.dark) .ph-item { border-color: var(--bd-light) !important; color: var(--text-main) !important; }
    html:not(.dark) .ph-item:hover { background: #f5f6f8 !important; }
    html:not(.dark) #promptHistoryPanel { background: #ffffff !important; border-color: var(--bd) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }
    html:not(.dark) .prompt-history-btn { background: #ffffff !important; border-color: var(--bd) !important; color: var(--text-sec) !important; }
    /* 进度条 */
    html:not(.dark) .progress-bar, html:not(.dark) .subtask-progress { background: #e2e5ea !important; }
    /* 导航按钮 */
    html:not(.dark) .size-btn { background: #eef0f4 !important; color: var(--text-sec) !important; border-color: var(--bd) !important; }
    html:not(.dark) .size-btn.active { background: rgba(124,58,237,0.12) !important; color: var(--purple) !important; border-color: rgba(124,58,237,0.3) !important; }
    /* 顶栏按钮 */
    html:not(.dark) header .bg-zinc-800 { background: #ffffff !important; border: 1px solid var(--bd) !important; }
    html:not(.dark) header .bg-zinc-800:hover { background: #f5f6f8 !important; }
    html:not(.dark) #webUserBar .web-user-pill,
    html:not(.dark) #webUserBar #webUsageBtn,
    html:not(.dark) #webUserBar #webLogoutBtn {
        background: #ffffff !important;
        border: 1px solid var(--bd) !important;
        color: var(--text-main) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    html:not(.dark) #webUserBar #webUsageBtn:hover,
    html:not(.dark) #webUserBar #webLogoutBtn:hover { background: #f5f6f8 !important; }
    html:not(.dark) #webUserBar .web-user-pill .text-zinc-500 { color: var(--text-muted) !important; }
    /* 导航标签 */
    html:not(.dark) nav .bg-zinc-800\/40 { background: #ffffff !important; border-color: var(--bd) !important; }
    /* 模式栏背景 */
    html:not(.dark) #modeBar .bg-gradient-to-r { background: rgba(124,58,237,0.06) !important; border-color: rgba(124,58,237,0.15) !important; }
    /* 块名称输入 */
    html:not(.dark) .block-name-input { color: var(--text-main) !important; border-bottom-color: var(--bd) !important; }
    /* 灯箱覆盖层 */
    html:not(.dark) #lightbox { background: rgba(255,255,255,0.95) !important; }
    /* 悬浮任务栏 */
    html:not(.dark) #floatingBar .glass { background: #ffffff !important; }
    /* 绿色/翡翠色全部改为紫色或深绿，浅色下才看得清 */
    html:not(.dark) .text-green-400, html:not(.dark) .text-emerald-300, html:not(.dark) .text-emerald-400 { color: #059669 !important; }
    html:not(.dark) .bg-green-500\/20, html:not(.dark) .bg-emerald-500\/20 { background: rgba(5,150,105,0.12) !important; }
    html:not(.dark) .bg-green-500\/30, html:not(.dark) .bg-emerald-500\/30, html:not(.dark) .bg-emerald-500\/25 { background: rgba(5,150,105,0.15) !important; border-color: rgba(5,150,105,0.3) !important; }
    html:not(.dark) .border-green-500\/30, html:not(.dark) .border-green-500\/50, html:not(.dark) .border-emerald-500\/30, html:not(.dark) .border-emerald-500\/50, html:not(.dark) .border-emerald-500\/25, html:not(.dark) .border-emerald-500\/40 { border-color: rgba(5,150,105,0.3) !important; }
    html:not(.dark) .hover\:border-emerald-400\/50:hover { border-color: rgba(5,150,105,0.4) !important; }
    html:not(.dark) .status-success { background: rgba(139,92,246,0.12) !important; color: #7c3aed !important; font-size: 10px !important; font-weight: 600 !important; }
    html:not(.dark) .bg-gradient-to-r.from-emerald-600\/15 { background: rgba(5,150,105,0.08) !important; border-color: rgba(5,150,105,0.15) !important; }
    /* 逐块标签浅色适配 */
    html:not(.dark) .ref-tag-off { background: #eef0f4 !important; color: #8a8c98 !important; border-color: #dce0e6 !important; }
    html:not(.dark) .ref-tag-off:hover { background: #e4e7ec !important; }
    /* 文案量按钮：浅色下不透明度拉满 */
    html:not(.dark) .bg-teal-500\/20 { background: rgba(13,148,136,0.12) !important; border-color: rgba(13,148,136,0.35) !important; }
    html:not(.dark) .bg-teal-500\/20,
    html:not(.dark) .bg-amber-500\/20,
    html:not(.dark) .bg-red-500\/20,
    html:not(.dark) .bg-sky-500\/20,
    html:not(.dark) .bg-zinc-700 { opacity: 1 !important; }
    html:not(.dark) .text-teal-300 { color: #0d6d6a !important; }
    html:not(.dark) .text-amber-300 { color: #b45309 !important; }
    html:not(.dark) .text-red-300 { color: #dc2626 !important; }
    html:not(.dark) .text-sky-300 { color: #0369a1 !important; }
    /* 文案量标签：浅色下的颜色加深 */
    html:not(.dark) .text-teal-400 { color: #0d6d6a !important; }
    html:not(.dark) .text-sky-400 { color: #0369a1 !important; }
    html:not(.dark) .text-red-400 { color: #dc2626 !important; }
    html:not(.dark) .text-amber-400 { color: #b45309 !important; }
    /* 参考块面板：浅色模式分层 */
    html:not(.dark) #refBlocksPanel {
        background: #ffffff !important;
        border-color: #dfe3ea !important;
        box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
    }
    html:not(.dark) #refBlockModeRow {
        background: #f5f2ff !important;
        border: 1px solid #e4ddff !important;
    }
    html:not(.dark) #refBlockModeRow button {
        background: #f6f7f9 !important;
        color: #52525b !important;
        border: 1px solid transparent !important;
    }
    html:not(.dark) #refBlockModeRow button.bg-violet-500\/20 {
        background: #e9ddff !important;
        color: #7c3aed !important;
        border-color: #c8b6ff !important;
    }
    html:not(.dark) #refAnalysisControls,
    html:not(.dark) #refBlockFineTune > div {
        background: #f8fafc !important;
        border: 1px solid #e3e7ee !important;
        border-radius: 8px !important;
        padding: 6px 8px !important;
    }
    html:not(.dark) #refAnalysisControls {
        color: #52525b !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: hidden !important;
        gap: 4px 6px !important;
    }
    html:not(.dark) #refAnalysisControls .text-zinc-600 {
        color: #c5cad3 !important;
    }
    html:not(.dark) #refAnalysisControls button[id$="Toggle"],
    html:not(.dark) #strictToggle,
    html:not(.dark) #smartReplaceToggle,
    html:not(.dark) #qualityToggle {
        background: #d7dce5;
    }
    html:not(.dark) #refBlockFineTune button,
    html:not(.dark) #refBlocksPanel button {
        box-shadow: none !important;
    }
    html:not(.dark) #refBlockFineTune button.bg-zinc-800,
    html:not(.dark) #refBlockFineTune button.bg-zinc-700,
    html:not(.dark) #refBlocksPanel button.bg-zinc-800,
    html:not(.dark) #refBlocksPanel button.bg-zinc-700 {
        background: #ffffff !important;
        color: #52525b !important;
        border-color: #dfe3ea !important;
    }
    html:not(.dark) #refBlockFineTune button.bg-violet-500\/20,
    html:not(.dark) #refBlocksPanel button.bg-violet-500\/20 {
        background: #efe7ff !important;
        color: #7c3aed !important;
        border-color: #c8b6ff !important;
    }
    html:not(.dark) #refBlocksList .drag-item {
        background: #ffffff !important;
        border-color: #dfe3ea !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
    }
    html:not(.dark) #refBlocksList .drag-item:hover {
        background: #fbfcfe !important;
        border-color: #cfd6e2 !important;
    }
    html:not(.dark) .ref-block-active {
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 2px rgba(139,92,246,0.14), 0 6px 14px rgba(15,23,42,0.08) !important;
    }
    html:not(.dark) #refBlocksList .bg-zinc-800,
    html:not(.dark) #refBlocksList .bg-zinc-800\/50,
    html:not(.dark) #refBlocksList .bg-zinc-700,
    html:not(.dark) #refBlocksList .bg-zinc-700\/50 {
        background: #f1f3f6 !important;
        color: #52525b !important;
        border-color: #dfe3ea !important;
    }
    html:not(.dark) #refBlocksList .bg-violet-500\/20 {
        background: #efe7ff !important;
        color: #7c3aed !important;
        border-color: #c8b6ff !important;
    }
    html:not(.dark) #refBlocksList .bg-red-500\/20,
    html:not(.dark) #refBlocksList .bg-red-500\/10 {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border-color: #fecaca !important;
    }


    
        #webAuthModal { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.82); align-items: center; justify-content: center; }
        #webAuthModal.hidden { display: none !important; }
        #webAuthModal:not(.hidden) { display: flex !important; }
        .detail-projects-view { min-height: calc(100vh - 128px); display: grid; grid-template-rows: auto 1fr; gap: 12px; }
        .detail-projects-view.hidden { display: none !important; }
        .detail-projects-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
        .detail-projects-title { color: var(--ui-text); font-size: 20px; line-height: 1.25; font-weight: 800; }
        .detail-projects-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
        .detail-project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-content: start; }
        .detail-project-card { min-height: 260px; border: 1px solid var(--ui-border); background: var(--ui-surface-soft); color: var(--ui-text); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
        button.detail-project-card { cursor: pointer; }
        .detail-project-card:hover { border-color: var(--ui-primary-border); box-shadow: 0 8px 24px rgba(15,23,42,0.1); }
        .detail-project-card.new { align-items: center; justify-content: center; text-align: center; border-style: dashed; }
        .detail-project-card-icon { width: 52px; height: 52px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-primary-soft); color: var(--ui-primary-text); font-size: 22px; }
        .detail-project-thumb { width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--detail-stage-bg); border: 1px solid var(--ui-border-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ui-text-soft); }
        .detail-project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .detail-project-name { color: var(--ui-text); font-size: 14px; line-height: 1.35; font-weight: 700; word-break: break-word; }
        .detail-project-meta { color: var(--ui-text-muted); font-size: 11px; line-height: 1.45; }
        .detail-project-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
        .detail-editor-shell { height: calc(100vh - 128px); min-height: 620px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
        .detail-editor-shell.hidden { display: none !important; }
        .detail-editor-topbar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(260px, 520px) minmax(280px, 1fr); align-items: center; gap: 12px; }
        .detail-editor-topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
        .detail-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex-wrap: wrap; }
        .detail-project-title-wrap { justify-self: center; width: 100%; max-width: 520px; display: grid; gap: 4px; text-align: center; }
        .detail-project-title-wrap label { font-size: 11px; color: var(--ui-text-muted); font-weight: 600; }
        .detail-project-name-input { width: 100%; min-width: 0; text-align: center; background: var(--detail-asset-bg); color: var(--ui-text); border: 1px solid var(--ui-primary-border); border-radius: 8px; padding: 8px 12px; font-size: 18px; font-weight: 700; }
        .detail-save-state { white-space: nowrap; font-size: 12px; border-radius: 999px; padding: 5px 9px; border: 1px solid var(--ui-border); color: var(--ui-text-muted); background: var(--ui-control); }
        .detail-save-state.saved { color: var(--ui-success-text); background: var(--ui-success-soft); border-color: var(--ui-success-border); }
        .detail-save-state.dirty { color: var(--ui-warning-text); background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
        .detail-secondary-btn, .detail-save-btn, .detail-import-primary, .detail-import-secondary { border-radius: 8px; border: 1px solid var(--ui-border); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
        .detail-secondary-btn { padding: 7px 10px; font-size: 12px; background: var(--ui-control); color: var(--ui-text); }
        .detail-secondary-btn:hover { background: var(--ui-control-hover); }
        .detail-save-btn { padding: 8px 13px; font-size: 13px; font-weight: 700; background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
        .detail-save-btn:hover { filter: brightness(1.08); }
        .detail-import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
        .detail-import-primary, .detail-import-secondary { min-height: 40px; padding: 9px 10px; font-size: 13px; font-weight: 700; }
        .detail-import-primary { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
        .detail-import-secondary { background: var(--ui-primary-soft); color: var(--ui-primary-text); border-color: var(--ui-primary-border); }
        .detail-editor-layout { min-height: 0; display: grid; grid-template-columns: var(--detail-asset-panel-w, 300px) 10px 52px minmax(360px, 1fr) 300px; gap: 10px; }
        .detail-panel { min-height: 0; background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
        .detail-panel-head { padding: 10px 12px; border-bottom: 1px solid var(--ui-border-soft); }
        .detail-panel-title { color: var(--ui-text); font-size: 16px; line-height: 1.35; font-weight: 700; }
        .detail-panel-title-sm { font-size: 14px; }
        .detail-panel-subtitle { color: var(--ui-text-muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }
        .detail-icon-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-control); color: var(--ui-text); border: 1px solid var(--ui-border); }
        .detail-icon-btn:hover { background: var(--ui-control-hover); }
        .detail-selected-count { color: var(--ui-text-muted); font-size: 11px; line-height: 1.45; }
        .detail-mini-primary, .detail-mini-secondary { border-radius: 6px; border: 1px solid var(--ui-border); padding: 4px 8px; font-size: 11px; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
        .detail-mini-primary { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
        .detail-mini-primary:hover { filter: brightness(1.08); }
        .detail-mini-secondary { background: var(--ui-control); color: var(--ui-text); }
        .detail-mini-secondary:hover { background: var(--ui-control-hover); }
        .detail-mini-danger { border-radius: 6px; border: 1px solid rgba(239,68,68,0.45); padding: 4px 8px; font-size: 11px; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: rgba(239,68,68,0.12); color: #f87171; }
        .detail-mini-danger:hover { background: rgba(239,68,68,0.2); }
        .library-thumb-card { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--ui-border); background: var(--detail-asset-bg); }
        .library-thumb-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .library-thumb-actions { position: absolute; inset: auto 8px 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; }
        .library-thumb-card:hover .library-thumb-actions { opacity: 1; transform: translateY(0); }
        .library-thumb-action { min-height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; background: rgba(15,23,42,0.78); color: white; border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); }
        .library-thumb-action.danger { background: rgba(185,28,28,0.82); }
        .library-thumb-name { position: absolute; left: 8px; right: 8px; top: 8px; border-radius: 6px; padding: 4px 6px; font-size: 11px; color: white; background: rgba(15,23,42,0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
        .library-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; align-items: start; grid-auto-flow: row; }
        .library-picker-card { position: relative; display: block; width: 100%; min-width: 0; height: auto; padding: 0; border-radius: 8px; border: 1px solid var(--ui-border); overflow: hidden; background: var(--detail-asset-bg); text-align: left; }
        .library-picker-card::before { content: ""; display: block; width: 100%; padding-top: 100%; }
        .library-picker-card:hover { background: var(--ui-control-hover); }
        .library-picker-card.selected { border-color: var(--ui-success-border); box-shadow: 0 0 0 1px var(--ui-success-border); }
        .library-picker-card.disabled { opacity: 0.5; }
        .library-picker-thumb { position: absolute; inset: 0; display: block; overflow: hidden; width: 100%; height: 100%; background: var(--detail-asset-bg); }
        .library-picker-ratio { display: none; }
        .library-picker-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
        .library-picker-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--ui-border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--detail-badge-bg); color: var(--ui-text-muted); }
        .library-picker-card.selected .library-picker-check { background: var(--ui-success-text); border-color: var(--ui-success-border); color: white; }
        .library-picker-unusable { position: absolute; left: 8px; top: 8px; font-size: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(239,68,68,0.88); color: white; }
        .library-picker-name { position: absolute; left: 8px; right: 8px; bottom: 8px; border-radius: 6px; padding: 4px 6px; font-size: 11px; line-height: 1.25; color: white; background: rgba(15,23,42,0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
        .works-generated-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .works-generated-filter { border-radius: 8px; border: 1px solid var(--ui-border); background: var(--ui-control); color: var(--ui-text-muted); padding: 6px 10px; font-size: 12px; line-height: 1.35; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
        .works-generated-filter:hover { background: var(--ui-control-hover); color: var(--ui-text); }
        .works-generated-filter.active { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
        .works-generated-filter span { min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; background: var(--ui-surface); color: currentColor; font-size: 11px; }
        .detail-slice-tool-btn { border-radius: 8px; border: 1px solid var(--ui-primary-border); background: var(--ui-primary-soft); color: var(--ui-primary-text); padding: 6px 10px; font-size: 12px; line-height: 1.35; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
        .detail-slice-tool-btn:hover { filter: brightness(1.08); }
        .detail-tool-rail { background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
        .detail-tool-button { width: 34px; height: 34px; border-radius: 6px; background: var(--ui-control); color: var(--ui-text-muted); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); }
        .detail-tool-button:hover { background: var(--ui-control-hover); color: var(--ui-text); }
        .detail-tool-button.active { background: var(--ui-primary-soft); color: var(--ui-primary-text); border-color: var(--ui-primary-border); }
        .detail-assets-tabs button.active { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
        .detail-panel-resizer { min-height: 0; border-radius: 8px; cursor: col-resize; position: relative; touch-action: none; }
        .detail-panel-resizer::before { content: ""; position: absolute; inset: 8px 3px; border-radius: 999px; background: var(--ui-border); opacity: 0.7; transition: background 0.15s, opacity 0.15s; }
        .detail-panel-resizer:hover::before,
        .detail-panel-resizer.dragging::before { background: var(--ui-primary); opacity: 1; }
        body.detail-panel-resizing { cursor: col-resize; user-select: none; }
        .detail-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; align-content: start; align-items: start; }
        .detail-asset-card { position: relative; width: 100%; min-width: 0; border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; background: var(--detail-asset-bg); padding: 0; display: block; }
        .detail-asset-card.active { border-color: var(--ui-primary); box-shadow: 0 0 0 1px var(--ui-primary-border); }
        .detail-asset-thumb { position: relative; width: 100%; overflow: hidden; display: block; background: var(--detail-asset-bg); }
        .detail-asset-ratio { display: block; width: 100%; padding-top: 100%; }
        .detail-asset-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
        .detail-asset-order, .detail-asset-used { position: absolute; top: 6px; border-radius: 999px; font-size: 10px; padding: 2px 6px; background: var(--detail-badge-bg); color: white; }
        .detail-asset-order { left: 6px; }
        .detail-asset-used { right: 6px; color: var(--ui-success-text); }
        .library-picker-box { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text); }
        .library-picker-box > div { border-color: var(--ui-border-soft) !important; }
        .library-picker-box .bg-zinc-950 { background: var(--ui-surface) !important; }
        .library-picker-box .bg-zinc-900 { background: var(--ui-control) !important; }
        .library-picker-box .hover\:bg-zinc-800:hover { background: var(--ui-control-hover) !important; }
        .library-picker-box .border-zinc-700 { border-color: var(--ui-border) !important; }
        .library-picker-box .text-zinc-100,
        .library-picker-box .text-zinc-300 { color: var(--ui-text) !important; }
        .library-picker-box .text-zinc-500 { color: var(--ui-text-muted) !important; }
        .library-retention-notice { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning-text); border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 600; }
        .library-retention-notice i { color: var(--ui-warning-icon); }
        .detail-canvas-stage { min-height: 0; background: var(--detail-stage-bg); border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
        .detail-canvas-scroller { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
        .detail-canvas { position: relative; margin: 0 auto; background: #fff; color: #111827; box-shadow: var(--detail-canvas-shadow); transform-origin: top center; }
        .detail-element { position: absolute; box-sizing: border-box; cursor: move; outline: 1px solid transparent; touch-action: none; }
        .detail-element.selected { outline: 2px solid var(--ui-primary); z-index: 30; }
        .detail-canvas.detail-tool-line .detail-element { pointer-events: none; cursor: default; }
        .detail-canvas.detail-tool-text .detail-element { cursor: default; }
        .detail-image-frame { width: 100%; height: 100%; overflow: hidden; background: transparent; }
        .detail-image-frame img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: center center; }
        .detail-text-element { white-space: pre-wrap; overflow: hidden; padding: 4px; }
        .detail-guide-line { position: absolute; left: 0; right: 0; height: 12px; margin-top: -6px; background: transparent; cursor: ns-resize; z-index: 60; touch-action: none; }
        .detail-guide-line::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--ui-danger-line); }
        .detail-guide-line.selected::before { background: var(--ui-guide-selected); }
        .detail-empty-canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ui-text-soft); border: 2px dashed var(--detail-empty-border); margin: 16px; text-align: center; pointer-events: none; }
        .detail-prop-row { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: center; margin-bottom: 9px; font-size: 12px; }
        .detail-prop-row label { color: var(--ui-text-muted); }
        .detail-prop-row input, .detail-prop-row textarea, .detail-prop-row select { background: var(--detail-asset-bg); border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: 6px; padding: 6px 8px; width: 100%; }
        .detail-preview-modal { position: fixed; inset: 0; z-index: 4300; background: var(--detail-modal-bg); display: none; align-items: center; justify-content: center; padding: 22px; }
        .detail-preview-modal.active { display: flex; }
        .detail-preview-box { width: min(980px, 96vw); height: min(90vh, 980px); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
        .detail-preview-body { flex: 1; min-height: 0; overflow: auto; background: var(--ui-surface-raised); padding: 18px; }
        .detail-preview-body canvas { display: block; margin: 0 auto; background: white; max-width: 100%; height: auto; }
        .support-editor-toolbar { border: 1px solid var(--ui-border); background: var(--ui-surface-soft); color: var(--ui-text); }
        .support-editor-input { width: 100%; background: var(--detail-asset-bg); border: 1px solid var(--ui-border); color: var(--ui-text); }
        .support-editor-input::placeholder { color: var(--ui-text-soft); }
        .support-stage { min-height: 460px; overflow: auto; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--detail-stage-bg); padding: 18px; }
        .support-canvas { position: relative; width: min(100%, 960px); min-height: 520px; margin: 0 auto; border-radius: 8px; overflow: hidden; background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--detail-canvas-shadow); }
        .support-element { position: absolute; box-sizing: border-box; outline: 1px solid transparent; touch-action: none; }
        .support-editing .support-element { cursor: move; }
        .support-editing .support-element.selected { outline: 2px solid var(--ui-primary); z-index: 20; }
        .support-text { white-space: pre-wrap; line-height: 1.35; }
        .support-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .support-resize-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ui-surface); background: var(--ui-primary); cursor: nwse-resize; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
        body.web-production .confirm-right,
        body.web-production .preview-toolbar,
        body.web-production .preview-block-tabs,
        body.web-production .preview-textarea,
        body.web-production .prompt-history-btn,
        body.web-production #promptHistoryPanel,
        body.web-production button[onclick*="refreshPromptPreview"],
        body.web-production button[onclick*="copyPromptPreview"],
        body.web-production button[onclick*="toggleAICache"],
        body.web-production button[onclick*="switchTab('apiConfig')"],
        body.web-production button[onclick*="switchTab('prompts')"],
        body.web-production #apiConfigPanel,
        body.web-production #promptTemplatesPanel,
        body.web-production #confirmAnalyzeBtn,
        body.web-production #confirmAnalyzeArea,
        body.web-production #cacheToggle { display: none !important; }
        body.web-production .local-only-tool { display: none !important; }
        body.web-production .confirm-left { flex: 1 1 100%; max-width: none; }
        body.web-production.prompt-preview-admin .confirm-right { display: flex !important; }
        body.web-production.prompt-preview-admin .preview-toolbar { display: flex !important; }
        body.web-production.prompt-preview-admin .preview-block-tabs,
        body.web-production.prompt-preview-admin .preview-textarea,
        body.web-production.prompt-preview-admin button[onclick*="refreshPromptPreview"],
        body.web-production.prompt-preview-admin button[onclick*="copyPromptPreview"],
        body.web-production.prompt-preview-admin button[onclick*="toggleAICache"] { display: block !important; }
        body.web-production.prompt-preview-admin .confirm-left { flex: 1 1 0; }
        /* Lightweight build fallback: keep the page usable even if Tailwind runtime is blocked. */
        .hidden { display: none !important; }
        .block { display: block; }
        .inline-block { display: inline-block; }
        .flex { display: flex; }
        .inline-flex { display: inline-flex; }
        .grid { display: grid; }
        .fixed { position: fixed; }
        .absolute { position: absolute; }
        .relative { position: relative; }
        .sticky { position: sticky; }
        .inset-0 { inset: 0; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-end { justify-content: flex-end; }
        .flex-col { flex-direction: column; }
        .flex-row { flex-direction: row; }
        .flex-wrap { flex-wrap: wrap; }
        .flex-1 { flex: 1 1 0%; }
        .flex-shrink-0 { flex-shrink: 0; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .min-h-screen { min-height: 100vh; }
        .overflow-hidden { overflow: hidden; }
        .overflow-y-auto { overflow-y: auto; }
        .overflow-x-hidden { overflow-x: hidden; }
        .object-contain { object-fit: contain; }
        .object-cover { object-fit: cover; }
        .text-center { text-align: center; }
        .cursor-pointer { cursor: pointer; }
        .whitespace-nowrap { white-space: nowrap; }
        .min-w-0 { min-width: 0; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .mt-auto { margin-top: auto; }