/*
         * 操作台样式备注
         * 对应页面：studio.html
         * 对应 JS：
         * - studio.core.js：风格图库、色盘、弹窗、状态摘要、线路显示。
         * - studio.history.js：上传/输出历史缩略图、置顶、查看更多。
         * - studio.runtime.js：上传区状态、整理提示词、生图状态。
         *
         * 当前待核对的旧样式：
         * - #apiSettingsBtn：当前 HTML 没有 API 设置按钮。
         * - .engine-btn：当前 HTML 没有旧 API 引擎弹窗按钮。
         * - .version-example：当前 HTML 没有 #versionExample，已由 .style-gallery-board 取代。
         * - .palette-summary / #colorPaletteBars：当前 HTML 不再显示旧三色条。
         * - .style-action-row / .style-action-btn：当前 HTML 的复位/随机按钮使用 Tailwind 类，旧 class 未挂上。
         */

        /* 基础主题变量：全页面共享的暗色背景、文字、边框、圆角和状态色。 */
        :root {
            --bg-base: #030712;
            --bg-surface: #0b1220;
            --bg-elevated: #111a2e;
            --bg-hover: #1a2742;
            --border-color: #365072;
            --border-blue-dim: #2d4564;
            --border-focus: #0a84ff;
            --text-primary: #ffffff;
            --text-secondary: #8e8e93;
            --text-tertiary: #636366;
            --accent-blue: #0a84ff;
            --accent-green: #32d74b;
            --accent-red: #ff453a;
            --radius-md: 0px;
            --radius-lg: 0px;
            --radius-xl: 0px;
        }

        body { 
            background-color: var(--bg-base); 
            color: var(--text-primary); 
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.01em;
        }

        /* 标题与模块排版：对应页面顶部品牌区和三列 module-card 标题。 */
        .title-text { color: var(--text-primary); font-weight: 700; letter-spacing: -0.03em; }
        .section-label { color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; display: block; }
        .module-title { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
        .module-title-main { color: #60a5fa; }
        .module-title-sub { color: #7f97b6; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
        .module-title.module-title-bar {
            position: relative;
            padding-left: 10px;
        }
        .module-title.module-title-bar::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 2px;
            background: #60a5fa;
        }
        .brand-logo {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex: 0 0 auto;
        }
        .module-column { min-height: 0; height: 100%; display: flex; flex-direction: column; }
        .module-card { min-height: 0; flex: 1; }
        
        /* 容器和输入框：surface-card / surface-input 是多数卡片、输入、按钮的基础外观。 */
        .surface-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-xl); }
        .surface-input { background: var(--bg-elevated); border: 1px solid var(--border-blue-dim); color: var(--text-primary); border-radius: var(--radius-md); transition: border-color 0.2s, background-color 0.2s; }
        .surface-input:focus { border-color: var(--border-focus); outline: none; }
        .surface-input::placeholder { color: var(--text-tertiary); }
        #style option:checked {
            color: var(--accent-blue);
            font-weight: 600;
        }

        /* 上传区域：对应 #dropZone、#uploadIdleFx；runtime 在有图片时切换 has-content。 */
        .drop-zone { border: 1px dashed var(--border-blue-dim); background: var(--bg-surface); transition: all 0.2s; }
        .drop-zone.active { border-color: var(--accent-blue); background: rgba(10, 132, 255, 0.1); }
        .drop-zone:hover { border-color: var(--border-focus); }
        .drop-zone > *:not(.upload-idle-fx) { position: relative; z-index: 1; }
        .upload-idle-fx {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.86;
            transition: opacity 0.28s ease;
            background-color: #060b13;
            background-image:
                linear-gradient(rgba(160, 182, 210, 0.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(160, 182, 210, 0.05) 1px, transparent 1px);
            background-size: 16px 16px, 16px 16px;
            background-position: 0 0, 0 0;
            animation: idleGridDrift 26s linear infinite;
        }
        .upload-idle-fx::before {
            content: "";
            position: absolute;
            inset: -20%;
            background:
                radial-gradient(circle at 24% 34%, rgba(145, 170, 202, 0.14), rgba(145, 170, 202, 0) 34%),
                radial-gradient(circle at 76% 64%, rgba(116, 140, 170, 0.13), rgba(116, 140, 170, 0) 35%);
            mix-blend-mode: screen;
            filter: blur(1px);
            animation: idleGlowShift 22s ease-in-out infinite;
        }
        .upload-idle-fx::after {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at 50% 50%, rgba(128, 153, 184, 0.2), rgba(9, 13, 20, 0.02) 56%, rgba(6, 11, 19, 0) 74%);
            will-change: transform, opacity;
            animation: idleOrbPath 26s linear infinite, idleOrbPulse 13s ease-in-out infinite;
        }
        .drop-zone.has-content .upload-idle-fx { opacity: 0; }

        /* 按钮基础样式：btn-primary / btn-secondary 当前仍使用；engine-btn 是旧 API 弹窗遗留。 */
        .engine-btn { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary); transition: all 0.2s; }
        .engine-btn.active { background: var(--bg-hover); border-color: var(--text-primary); color: var(--text-primary); }
        .btn-primary { background: var(--accent-blue); color: #fff; font-weight: 600; transition: opacity 0.2s, transform 0.1s; }
        .btn-primary:hover { opacity: 0.9; }
        .btn-primary:active { transform: scale(0.98); }
        .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); font-weight: 500; border: 1px solid var(--border-color); transition: all 0.2s; }
        .btn-secondary:hover { background: var(--bg-hover); }
        .compile-btn-warning-flash {
            animation: compileBtnWarningFlash 0.42s ease-in-out 5;
        }

        /* 状态灯：对应 compilerDot，整理提示词时切换 loading / ready / error。 */
        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); transition: background 0.3s; }
        .status-dot.loading { background: #ffd60a; animation: pulseFlat 1.5s infinite; }
        .status-dot.ready { background: var(--accent-green); }
        .status-dot.error { background: var(--accent-red); }

        /* 开关控件：对应素材模块里的 AI 修正、多图、补身体等 toggle-row。 */
        .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
        .toggle-row:last-child { border-bottom: none; }
        .toggle-row > div:first-child {
            position: relative;
            padding-left: 10px;
        }
        .toggle-row > div:first-child::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 2px;
            background: #60a5fa;
        }
        .section-divider { height: 2px; background: #5b7088; border: none; margin: 4px 0 8px; border-radius: 1px; opacity: 0.9; }
        .toggle-state { font-size: 11px; font-weight: 700; color: var(--text-tertiary); min-width: 28px; text-align: right; margin-right: 8px; }
        .toggle-state.on { color: #34d399; }
        .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
        .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-elevated); transition: .3s; border-radius: 24px; border: 1px solid var(--border-color); }
        .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 1px; bottom: 1px; background-color: #fff; transition: .3s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        .toggle-switch input:checked + .toggle-slider { background-color: var(--accent-green); border-color: var(--accent-green); }
        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

        /* 弹窗和浮层：图片预览、提示词历史、JSON 编辑器、粘贴提示词弹窗共用。 */
        .image-modal, .prompt-panel, .floating-panel { position: fixed; inset: 0; z-index: 50; display: none; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); padding: 24px; }
        .image-modal.open, .prompt-panel.open, .floating-panel.open { display: flex; }
        .image-modal.open { align-items: center; justify-content: center; flex-direction: row; gap: 10px; padding-top: 0; }
        .image-modal img {
            width: auto;
            height: auto;
            max-width: 75vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: var(--radius-md);
        }
        .modal-caption {
            position: relative;
            margin-top: 0;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 30px 10px 30px;
            color: var(--text-secondary);
            font-size: 12px;
            width: min(320px, 22vw);
            max-height: 68vh;
            overflow-y: auto;
            text-align: left;
            white-space: normal;
        }
        .modal-caption-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
            line-height: 1.15;
        }
        .modal-caption-subtitle {
            font-size: 11px;
            color: #9ca3af;
            margin-bottom: 4px;
            line-height: 1.2;
        }
        .modal-sep {
            height: 1px;
            background: var(--border-color);
            margin: 8px 0;
        }
        .modal-meta-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            white-space: normal;
        }
        .modal-meta-item {
            font-size: 12px;
            color: #c7c7cc;
            line-height: 1.2;
        }
        .modal-meta-key {
            font-weight: 700;
            color: #e5e7eb;
            margin-right: 4px;
        }
        .modal-meta-section {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed rgba(74, 93, 115, 0.6);
        }
        .modal-meta-section:first-of-type {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        .modal-meta-section-title {
            font-size: 11px;
            font-weight: 700;
            color: #93c5fd;
            margin-bottom: 4px;
            letter-spacing: 0.04em;
        }
        .modal-state-on {
            color: #60a5fa;
            font-weight: 700;
        }
        .modal-actions {
            margin-top: 8px;
            margin-bottom: 4px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: wrap;
        }
        .modal-reuse-btn {
            border: 1px solid var(--border-color);
            background: #0a84ff;
            color: #fff;
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .modal-reuse-btn:hover {
            background: #3b9dff;
        }
        #hideThisImageBtn {
            background: #d9482d;
            border-color: #e05a40;
        }
        #hideThisImageBtn:hover {
            background: #e05a40;
        }
        .modal-panel-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 22px;
            height: 22px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: rgba(44,44,46,0.85);
            color: #e5e7eb;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .modal-panel-close:hover {
            background: rgba(58,58,60,0.9);
        }
        .modal-panel-home {
            position: absolute;
            top: 8px;
            right: 66px;
            height: 22px;
            border: 1px solid #2f7fe0;
            border-radius: 999px;
            background: rgba(10,132,255,0.22);
            color: #dbeafe;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 8px;
            font-weight: 600;
        }
        .modal-panel-home:hover {
            background: rgba(10,132,255,0.33);
        }
        .modal-panel-home:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .modal-panel-fav {
            position: absolute;
            top: 8px;
            right: 36px;
            width: 22px;
            height: 22px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: rgba(44,44,46,0.85);
            color: #e5e7eb;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .modal-panel-fav:hover { background: rgba(58,58,60,0.9); }
        .modal-panel-fav.is-pinned { color: #60a5fa; border-color: #60a5fa; }
        .floating-card { width: min(600px, 100%); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 24px; max-height: 90vh; overflow-y: auto; }

        /* 图片弹窗导航：上一张/下一张/关闭按钮。 */
        .modal-close, .modal-nav { position: fixed; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 50%; cursor: pointer; transition: background 0.2s; }
        .modal-close:hover, .modal-nav:hover { background: var(--bg-hover); }
        .modal-close { top: 24px; right: 24px; width: 36px; height: 36px; font-size: 20px; z-index: 51; }
        .modal-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 24px; z-index: 51; }
        .modal-prev { left: 24px; }
        .modal-next { right: 24px; }
        @media (max-width: 980px) {
            .image-modal.open { flex-direction: column; align-items: center; gap: 10px; padding-top: 48px; }
            .image-modal img { max-width: 92vw; max-height: 68vh; align-self: center; }
            .modal-caption { width: min(92vw, 760px); max-height: 20vh; align-self: center; }
        }

        /* 历史栏：上传历史 uploadRail、输出历史 historyRail、输出置顶 historyPinnedRail。 */
        .history-column { width: 128px; min-width: 128px; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
        .history-column.pinned-column { width: 66px; min-width: 66px; grid-template-rows: auto minmax(0, 1fr); }
        .history-column.pinned-column .history-thumb {
            width: 84%;
            margin-left: auto;
            margin-right: auto;
            transition: border-color 0.2s, transform 0.2s ease;
        }
        .history-column.pinned-column .history-thumb:hover {
            transform: translateY(-2px);
        }
        .history-column .section-label {
            text-align: center;
        }
        .history-rail { width: 100%; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
        .history-thumb { position: relative; width: 100%; aspect-ratio: 1; margin-bottom: 8px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); cursor: pointer; transition: border-color 0.2s; background: var(--bg-elevated); }
        .history-thumb.history-thumb-enter { opacity: 0; transform: translateY(10px); }
        .history-thumb.history-thumb-enter.history-thumb-show { opacity: 1; transform: translateY(0); transition: opacity 0.28s ease, transform 0.28s ease; }
        .history-thumb:hover { border-color: var(--text-primary); }
        .history-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            image-rendering: auto;
            image-rendering: smooth;
            image-rendering: -webkit-optimize-contrast;
            backface-visibility: hidden;
            transform: translateZ(0);
        }
        .history-thumb.history-placeholder { cursor: default; border-style: dashed; border-color: #2d4564; background: rgba(10, 18, 32, 0.45); }
        .history-thumb.history-placeholder:hover { border-color: #365072; }
        .history-thumb.history-placeholder::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(148, 163, 184, 0.03)),
                repeating-linear-gradient(45deg, rgba(96, 165, 250, 0.05) 0 7px, transparent 7px 14px);
        }
        .history-thumb.history-placeholder::after {
            content: "空位";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #6b7280;
            font-size: 10px;
            letter-spacing: 0.06em;
        }
        .history-pin { position: absolute; left: 4px; top: 4px; right: auto; z-index: 2; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(0,0,0,0.52); color: #ffffff; font-size: 10px; line-height: 1; opacity: 0; transition: opacity 0.2s; border: none; }
        .history-hide { position: absolute; right: 4px; top: 4px; z-index: 2; min-width: 28px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0,0,0,0.58); color: #e5e7eb; font-size: 11px; line-height: 1; padding: 0 6px; opacity: 0; transition: opacity 0.2s; border: none; }
        .history-remove { position: absolute; right: 4px; top: 4px; z-index: 2; min-width: 28px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(127, 29, 29, 0.92); color: #fee2e2; font-size: 11px; line-height: 1; padding: 0 6px; opacity: 0; transition: opacity 0.2s; border: 1px solid rgba(248, 113, 113, 0.7); }
        .history-thumb:hover .history-pin, .history-thumb:hover .history-hide { opacity: 1; }
        .history-thumb:hover .history-remove { opacity: 1; }
        .history-thumb.pinned { border-color: #ffd60a; }
        .history-thumb.pinned .history-pin { color: #ffd60a; }
        .history-column.pinned-column .history-pin { right: 4px; left: auto; }
        .history-column.pinned-column .history-thumb .history-pin { opacity: 0; }
        .history-column.pinned-column .history-thumb:hover .history-pin { opacity: 1; }
        #historyRail.history-rail,
        #historyPinnedRail.history-rail {
            padding-right: 2px;
        }
        #historyRail.history-rail .history-thumb { margin-right: 0; }
        .history-column.pinned-column {
            margin-left: 0;
        }
        #historyPinnedRail {
            margin-left: 0;
        }
        #historyPinnedRail .history-thumb.history-real .history-hide {
            display: none !important;
        }
        .section-label-star {
            font-size: 10px;
            line-height: 1;
            margin-right: 3px;
            position: relative;
            top: -0.5px;
        }
        .history-empty { width: 100%; min-height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); font-size: 12px; }
        .history-more-wrap { width: 100%; flex: 0 0 auto; min-height: 30px; padding-top: 16px; }
        #uploadMoreWrap,
        #historyMoreWrap {
            padding-right: 12px;
            box-sizing: border-box;
        }
        .history-more {
            width: 100%;
            box-sizing: border-box;
            display: block;
            padding: 7px 0;
            text-align: center;
            color: var(--accent-blue);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            background: rgba(10, 18, 32, 0.72);
            border: 1px solid #3b82f6;
            box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
        }
        .history-more:hover {
            background: rgba(18, 31, 54, 0.88);
        }
        .history-more[disabled] { opacity: .55; cursor: default; }

        /* 自定义选择器：隐藏 select 提供数据，button/menu 提供可视交互。 */
        .custom-select { position: relative; }
        .custom-select-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 13px; text-align: left; cursor: pointer; overflow: hidden; }
        .custom-select-button::after {
            content: "▾";
            color: #e5e7eb;
            font-size: 13px;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border: 1px solid #4b5563;
            border-radius: 4px;
            background: #2a2d34;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            line-height: 1;
        }
        .custom-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: none; max-height: 200px; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); scrollbar-width: thin; scrollbar-color: transparent transparent; }
        #styleMenu.custom-select-menu { max-height: none; overflow-y: visible; }
        #styleVersionMenu.custom-select-menu { max-height: none; overflow-y: visible; }
        #ratioMenu.custom-select-menu { max-height: none; overflow-y: visible; }
        #fontStyleMenu.custom-select-menu { max-height: none; overflow-y: visible; }
        #compositionModeMenu.custom-select-menu { max-height: none; overflow-y: visible; }
        .custom-select-menu::-webkit-scrollbar { width: 8px; height: 8px; }
        .custom-select-menu::-webkit-scrollbar-track { background: transparent; }
        .custom-select-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
        .custom-select-menu:hover { scrollbar-color: #0a84ff transparent; }
        .custom-select-menu:hover::-webkit-scrollbar-thumb { background: #0a84ff; }
        .custom-select.open .custom-select-menu { display: block; }
        .custom-select-option { width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; color: var(--text-primary); border-radius: 4px; border: none; background: transparent; cursor: pointer; }
        .custom-select-option:hover { background: var(--bg-hover); }
        .custom-select-option.active { background: transparent; color: var(--accent-blue); font-weight: 600; }
        .custom-select.is-disabled .custom-select-button { opacity: 0.5; cursor: not-allowed; }
        #ratioButton,
        #layoutDynamicsButton,
        #fontStyleButton,
        #compositionModeButton {
            height: 34px !important;
            min-height: 34px !important;
            max-height: 34px !important;
            line-height: 34px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            display: flex;
            align-items: center;
        }
        .split-wrap { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .split-main { color: #f5f5f7; font-weight: 600; }
        .split-sub { color: #a1a1aa; font-weight: 500; }
        .split-divider { color: #70707a; margin: 0 4px; }
        .layout-dyn-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 20px); }
        .layout-dyn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .layout-dyn-icon-box {
            width: 20px;
            height: 20px;
            border: 1px solid #5b7088;
            border-radius: 4px;
            background: #2a2d34;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .layout-dyn-icon-box svg {
            width: 14px;
            height: 14px;
            stroke: #c7cbd3;
            stroke-width: 1.7;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .layout-dyn-option-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; }
        .comp-icon-box {
            width: 20px;
            height: 20px;
            border: 1px solid #5b7088;
            border-radius: 4px;
            background: #2a2d34;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .comp-icon-box svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: #c7cbd3;
            stroke-width: 1.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .comp-option-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; }
        .ratio-shape-box {
            width: 20px;
            height: 20px;
            border: 1px solid #5b7088;
            border-radius: 4px;
            background: #2a2d34;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .ratio-shape {
            border: 1.4px solid #c7cbd3;
            border-radius: 2px;
            display: inline-block;
        }
        .ratio-shape.square { width: 8px; height: 8px; }
        .ratio-shape.landscape { width: 11px; height: 7px; }
        .ratio-shape.portrait { width: 7px; height: 11px; }
        .ratio-option-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; }
        .custom-select-sep {
            padding: 7px 12px;
            font-size: 11px;
            color: #8e8e93;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            user-select: none;
        }
        .font-preview-box {
            min-width: 24px;
            height: 20px;
            border: 1px solid #5b7088;
            border-radius: 4px;
            background: #2a2d34;
            color: #d1d5db;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            font-size: 10px;
            line-height: 1;
            flex: 0 0 auto;
            letter-spacing: 0;
        }
        .font-preview-box.serif { font-family: "Times New Roman", Georgia, serif; }
        .font-preview-box.sans { font-family: "Segoe UI", Arial, sans-serif; }
        .font-preview-box.roman { font-family: "Times New Roman", Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; }
        .font-preview-box.mincho { font-family: "MS Mincho", "Yu Mincho", serif; letter-spacing: 0.02em; }
        .font-preview-box.bold { font-family: "Arial Black", "Segoe UI", sans-serif; font-weight: 800; }
        .font-preview-box.round { font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-weight: 700; border-radius: 10px; letter-spacing: 0.02em; }
        .font-option-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; }

        /* 新版风格图库：对应 #styleGalleryBoard / #styleJumpRail，由 core.js 渲染封面卡片。 */
        .style-gallery-shell {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }
        .style-jump-rail {
            width: 26px;
            min-width: 26px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .style-jump-card {
            width: 26px;
            height: 26px;
            border: 1px solid #3a4d6c;
            background: #111a2b;
            color: #9fb6d5;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
        }
        .style-jump-card:hover {
            border-color: #60a5fa;
            color: #dbeafe;
            transform: translateY(-1px);
        }
        .style-jump-card.is-active {
            border-color: #60a5fa;
            background: #0f2a4c;
            color: #eff6ff;
            box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.3) inset;
        }
        .style-jump-card[disabled] {
            cursor: default;
            opacity: 0.35;
            transform: none;
            border-color: #2f405b;
        }
        .style-gallery-board {
            flex: 1;
            max-height: 360px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .style-gallery-empty {
            color: var(--text-secondary);
            font-size: 12px;
            padding: 6px 2px;
        }
        .style-group {
            border: 2px solid transparent;
            background: transparent;
            border-radius: 0;
            padding: 7px;
            transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }
        .style-group.active {
            border-color: #7dd3fc;
            background: rgba(15, 42, 76, 0.12);
            box-shadow:
                0 0 0 1px rgba(125, 211, 252, 0.34) inset,
                0 0 0 1px rgba(96, 165, 250, 0.16);
        }
        .style-group-title {
            color: #dbeafe;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.01em;
            margin-bottom: 6px;
            border-left: 2px solid #60a5fa;
            padding-left: 8px;
        }
        .style-version-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .style-version-card {
            border: none;
            background: transparent;
            border-radius: 0;
            padding: 0;
            cursor: pointer;
            transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .style-version-card:hover {
            transform: translateY(-1px);
        }
        .style-version-card.active {
            box-shadow: none;
            background: transparent;
        }
        .style-version-thumb {
            width: 100%;
            aspect-ratio: 3 / 2;
            border-radius: 4px;
            border: 1px solid #42546f;
            background: linear-gradient(180deg, #1a2435 0%, #0f1726 100%);
            overflow: hidden;
            position: relative;
        }
        .style-version-card.active .style-version-thumb {
            border: 2px solid #7dd3fc;
            box-shadow:
                0 0 0 1px rgba(125, 211, 252, 0.48) inset,
                0 0 0 1px rgba(96, 165, 250, 0.28);
        }
        .style-version-card.active .style-version-name {
            color: #f0f9ff;
            font-weight: 700;
        }
        .style-version-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .style-version-thumb::after {
            content: "封面待补";
            position: absolute;
            inset: auto 6px 6px 6px;
            font-size: 10px;
            color: #8fa3c2;
            letter-spacing: 0.03em;
            text-align: center;
            background: rgba(11, 18, 32, 0.62);
            border-radius: 4px;
            padding: 2px 4px;
            pointer-events: none;
        }
        .style-version-thumb.has-image::after { display: none; }
        .style-version-name {
            font-size: 11px;
            line-height: 1.1;
            color: #e5e7eb;
            min-height: 14px;
            display: block;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 风格参数区：比例、取景、字体、版式的紧凑两列布局。 */
        .style-controls-narrow {
            width: calc(100% - 2px);
            max-width: none;
            align-self: flex-end;
        }
        .control-inline-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 196px;
            gap: 8px;
            align-items: center;
            margin-bottom: 6px;
        }
        .control-inline-block {
            position: relative;
            padding-bottom: 6px;
            margin-bottom: 2px;
        }
        .control-inline-block.with-divider::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 0;
            bottom: 0;
            height: 1px;
            background: #5b7088;
            border-radius: 1px;
            opacity: 0.9;
        }
        .control-inline-meta {
            position: relative;
            padding-left: 10px;
            min-width: 0;
        }
        .control-inline-meta::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 2px;
            background: #60a5fa;
        }
        .control-inline-title {
            color: #dbeafe;
            font-size: 12px;
            line-height: 1.15;
            font-weight: 700;
            margin: 0;
        }
        .control-inline-sub {
            color: #7f97b6;
            font-size: 10px;
            line-height: 1.15;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .control-inline-select {
            min-width: 0;
            margin-left: -80px;
            width: calc(100% + 80px);
        }
        .control-inline-select .custom-select-button {
            height: 34px;
            padding-top: 0;
            padding-bottom: 0;
        }

        /* 输出摘要：对应 #selectionSummary，展示当前所有选项是否已开/已选。 */
        .selection-summary { flex: 1; min-height: 220px; overflow-y: auto; border: 1px solid var(--border-color); background: var(--bg-elevated); border-radius: var(--radius-md); padding: 12px; }
        #resultWorkArea {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        #summaryPanel {
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #summaryPanel #selectionSummary {
            min-height: 120px;
            max-height: 32vh;
        }
        #resultFrame {
            min-height: 120px;
            flex: 1 1 auto;
        }
        #generateActionBar {
            flex-shrink: 0;
            margin-top: auto;
        }
        .hover-scroll {
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
        }
        .hover-scroll::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .hover-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .hover-scroll::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 999px;
        }
        .hover-scroll:hover {
            scrollbar-color: #0a84ff transparent;
        }
        .hover-scroll:hover::-webkit-scrollbar-thumb {
            background: #0a84ff;
        }
        .selection-flow {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-content: flex-start;
        }
        .summary-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            width: fit-content;
            max-width: calc(50% - 4px);
            flex: 0 1 calc(50% - 4px);
            min-width: 0;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: #222327;
            line-height: 1.2;
            white-space: nowrap;
        }
        .summary-chip .chip-key,
        .summary-chip .chip-value {
            font-size: 12px;
            font-weight: 600;
        }
        .summary-chip .chip-key { color: #9ca3af; white-space: nowrap; }
        .summary-chip .chip-value { color: #d1d5db; }
        .summary-chip.on .chip-value { color: #60a5fa; }
        .summary-chip.off .chip-value { color: #6b7280; }
        .summary-chip .chip-value {
            overflow-wrap: break-word;
            word-break: normal;
            line-break: auto;
            min-width: 0;
            white-space: normal;
        }
        .accent-head {
            color: #60a5fa;
            font-weight: 700;
        }
        @media (max-width: 640px) {
            .summary-chip {
                max-width: 100%;
                flex-basis: 100%;
            }
        }

        /* 色盘区：新版使用 palette-category-list / palette-keep-toggle / palette-swatch。 */
        .palette-category-list {
            max-height: 280px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 10px;
            padding-left: 12px;
            padding-right: 4px;
        }
        .palette-category-row {
            display: grid;
            grid-template-columns: 62px minmax(0, 1fr);
            gap: 8px;
            align-items: start;
        }
        .palette-category-name {
            color: #8e8e93;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            line-height: 1.15;
            text-transform: uppercase;
            padding-top: 2px;
            white-space: nowrap;
        }
        .palette-grid {
            display: grid;
            grid-template-columns: repeat(8, 40px);
            grid-auto-rows: 40px;
            gap: 6px;
            justify-content: start;
            padding-top: 4px;
            padding-left: 4px;
            padding-bottom: 4px;
        }
        /* 待核对：旧色盘摘要条，当前 HTML 没有 #colorPaletteBars，但旧 CSS 仍保留。 */
        .palette-summary { display: inline-flex; align-items: center; gap: 6px; }
        .palette-keep-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #5b7088;
            background: #2c2c2e;
            color: #d1d1d6;
            min-height: 28px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .palette-keep-toggle:hover {
            background: #3a3a3c;
        }
        .palette-keep-toggle input {
            width: 12px;
            height: 12px;
            accent-color: #60a5fa;
            cursor: pointer;
        }
        .palette-swatch { width: 40px; height: 40px; aspect-ratio: 1; border-radius: 0; border: 1px solid var(--border-color); background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); cursor: pointer; position: relative; transition: transform 0.1s; }
        .palette-swatch:hover { transform: scale(1.1); }
        .palette-swatch.active {
            border: 1px solid var(--border-color);
            box-shadow:
                0 0 0 2px #ffffff,
                0 0 0 4px #0a84ff;
        }
        .reuse-picked-target {
            position: relative !important;
        }
        .reuse-picked-target::before {
            content: "🎨 采用";
            position: absolute;
            right: -8px;
            top: -10px;
            z-index: 60;
            pointer-events: none;
            border: 1px solid #ff4d4f;
            color: #ffffff;
            background: rgba(17, 17, 17, 0.86);
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1;
            padding: 3px 6px;
            white-space: nowrap;
            min-width: max-content;
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.28);
            animation: reusePickedPulse 1.8s ease-in-out infinite;
        }
        .palette-swatch.reuse-picked-target::before {
            right: -14px;
            top: -13px;
        }
        @keyframes reusePickedPulse {
            0%, 100% { box-shadow: 0 4px 10px rgba(255, 77, 79, 0.24); }
            50% { box-shadow: 0 6px 18px rgba(255, 77, 79, 0.42); }
        }
        .palette-swatch::after { content: ""; position: absolute; left: 74%; top: 74%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 2px; background: var(--accent); border: 1px solid rgba(0,0,0,0.5); }
        .palette-swatch.none { background: transparent; display: flex; align-items: center; justify-content: center; }
        .palette-swatch.none::before { content: "×"; color: var(--text-tertiary); font-size: 16px; }
        .palette-swatch.none::after { display: none; }
        /* 待核对：旧风格按钮行；当前 HTML 的 resetStyleBtn/randomDrawBtn 未使用 style-action-row/style-action-btn。 */
        .style-action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 8px;
        }
        .style-action-btn {
            border: 1px solid #5b7088;
            background: transparent;
            color: #cbd5e1;
            border-radius: 8px;
            height: 40px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s;
        }
        .style-action-btn:hover {
            border-color: var(--accent-blue);
            color: #eaf2ff;
            background: rgba(10, 132, 255, 0.12);
        }

        /* 输出结果框：对应 #resultFrame、#resultIdleFx、生成中状态。 */
        .result-frame { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #223850; border-radius: var(--radius-md); background: #050a12; min-height: 200px; }
        .result-frame.generating { border-color: var(--accent-blue); }
        .result-idle-fx {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.88;
            transition: opacity 0.35s ease;
            background-color: #070c14;
            background-image:
                linear-gradient(rgba(170, 190, 215, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(170, 190, 215, 0.05) 1px, transparent 1px);
            background-size: 16px 16px, 16px 16px;
            background-position: 0 0, 0 0;
            animation: idleGridDrift 24s linear infinite;
        }
        .result-idle-fx::before {
            content: "";
            position: absolute;
            inset: -20%;
            background:
                radial-gradient(circle at 18% 30%, rgba(170, 190, 215, 0.16), rgba(170, 190, 215, 0) 34%),
                radial-gradient(circle at 78% 62%, rgba(120, 145, 175, 0.16), rgba(120, 145, 175, 0) 35%);
            mix-blend-mode: screen;
            filter: blur(1px);
            animation: idleGlowShift 18s ease-in-out infinite;
        }
        .result-idle-fx::after {
            content: "";
            position: absolute;
            width: 520px;
            height: 520px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at 50% 50%, rgba(136, 160, 190, 0.24), rgba(10, 14, 22, 0.02) 56%, rgba(7, 12, 20, 0) 74%);
            filter: blur(0.4px);
            will-change: transform, opacity;
            animation: idleOrbPath 23s linear infinite, idleOrbPulse 12.5s ease-in-out infinite;
        }
        .result-frame.has-result .result-idle-fx,
        .result-frame.generating .result-idle-fx { opacity: 0.18; }
        .result-frame > *:not(.result-idle-fx) { position: relative; z-index: 1; }
        .concurrent-task-rack {
            position: absolute;
            right: 10px;
            top: -10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: fit-content;
            max-width: 88px;
            border: 1px solid rgba(96, 165, 250, 0.45);
            background: rgba(12, 20, 36, 0.92);
            color: #dbeafe;
            border-radius: 999px;
            padding: 3px 6px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            z-index: 4;
            pointer-events: none;
        }
        .concurrent-task-label { display: none; }
        .concurrent-task-count {
            opacity: 0.9;
            min-width: 0;
            text-align: left;
            display: inline-flex;
            align-items: center;
            line-height: 12px;
        }
        .concurrent-task-dots { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
        .concurrent-task-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            border: 1.2px solid rgba(96, 165, 250, 0.45);
            border-top-color: #60a5fa;
            animation: concurrentDotSpin 0.8s linear infinite;
            box-shadow: 0 0 0 1px rgba(8, 15, 28, 0.5) inset;
        }
        @keyframes concurrentDotSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .generating-notice {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.01em;
            white-space: nowrap;
            background: linear-gradient(90deg, #60a5fa 0%, #22d3ee 46%, #2dd4bf 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 8px rgba(34, 211, 238, 0.26);
            animation: generatingNoticeBreath 4.8s ease-in-out infinite;
        }
        @keyframes generatingNoticeBreath {
            0%, 100% { opacity: 0.62; transform: translateY(0); filter: saturate(0.95) brightness(0.92); }
            50% { opacity: 1; transform: translateY(-1px); filter: saturate(1.16) brightness(1.12); }
        }
        @keyframes idleGridDrift {
            from { background-position: 0 0, 0 0, 10% 18%; }
            to { background-position: 16px 12px, 14px 16px, 82% 70%; }
        }
        @keyframes idleGlowShift {
            0% { transform: translate(-3%, -2%); opacity: 0.65; }
            50% { transform: translate(3%, 4%); opacity: 0.95; }
            100% { transform: translate(-2%, 1%); opacity: 0.7; }
        }
        @keyframes idleOrbPath {
            0% { transform: translate(-52%, -58%) scale(0.96); }
            18% { transform: translate(-28%, -54%) scale(1.03); }
            36% { transform: translate(-19%, -26%) scale(1.07); }
            54% { transform: translate(-47%, -12%) scale(1.01); }
            72% { transform: translate(-72%, -29%) scale(0.95); }
            88% { transform: translate(-67%, -53%) scale(0.99); }
            100% { transform: translate(-52%, -58%) scale(0.96); }
        }
        @keyframes idleOrbPulse {
            0% { opacity: 0.55; }
            50% { opacity: 0.92; }
            100% { opacity: 0.55; }
        }

        /* 通用工具：prompt-dbl 表示可双击/可编辑提示词片段的交互提示。 */
        .prompt-dbl { cursor: text; }
        .prompt-dbl:hover { color: var(--text-primary); }
        
        /* 顶部固定按钮与线路测试栏。 */
        .studio-top-controls {
            position: fixed !important;
            top: 12px !important;
            left: 16px !important;
            right: auto !important;
            z-index: 35;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start;
            gap: 6px;
            width: min(310px, calc(100vw - 32px));
        }
        .top-btn-row {
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
            width: auto;
            white-space: nowrap;
        }
        .top-btn {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            flex: 0 0 auto;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 9px;
            border-radius: 16px;
            line-height: 1.2;
            white-space: nowrap;
        }
        .line-test-bar {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 5px 8px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
            width: auto;
            max-width: min(280px, calc(100vw - 32px));
            align-self: flex-start;
        }
        .line-quality-strip {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            border-radius: 12px;
            border: 1px solid #2e4562;
            background: #101a2a;
        }
        .line-quality-btn {
            flex: 1;
            min-width: 0;
            height: 32px;
            border-radius: 9px;
            border: 1px solid #3c4d66;
            background: #1d2a3a;
            color: #cfd8e3;
            font-size: 12px;
            font-weight: 600;
            transition: all .16s ease;
        }
        .line-quality-btn:hover {
            background: #26364b;
            border-color: #5a6f8d;
            color: #e5edf8;
        }
        .line-quality-btn.is-active {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.18);
            color: #93c5fd;
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
        }
        .line-test-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .line-select-wrap {
            position: relative;
            min-width: 0;
            flex: 1;
        }
        .provider-select-wrap {
            flex: 0 0 72px;
            min-width: 72px;
            max-width: 72px;
        }
        .model-select-wrap {
            flex: 0 0 138px;
            min-width: 138px;
            max-width: 138px;
        }
        .line-select {
            width: 100%;
            height: 30px;
            padding: 0 28px 0 10px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-elevated);
            color: var(--text-primary);
            font-size: 12px;
            appearance: none;
            outline: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .line-check-btn {
            white-space: nowrap;
            flex: 0 0 auto;
            min-width: 32px;
            padding-left: 8px;
            padding-right: 8px;
        }
        .line-select-wrap::after {
            content: "▾";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            font-size: 11px;
            pointer-events: none;
        }
        .line-test-status {
            min-width: 0;
            font-size: 11px;
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: normal;
            line-height: 1.2;
            max-width: 100%;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .net-dot {
            display: inline-flex;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #6b7280;
            flex: 0 0 auto;
        }
        .net-dot.ok {
            background: #22c55e;
            box-shadow: 0 0 0 0 rgba(34,197,94,.55);
            animation: netDotPulse 1.6s ease-in-out infinite;
        }
        .net-dot.off {
            background: #6b7280;
            animation: none;
            box-shadow: none;
        }
        @keyframes netDotPulse {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
            70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
            100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
        }
        .top-toast {
            position: fixed;
            top: -56px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 60;
            background: rgba(28, 28, 30, 0.96);
            border: 1px solid var(--border-color);
            color: #dbeafe;
            border-radius: 10px;
            padding: 9px 14px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
            transition: top 0.28s ease;
            pointer-events: none;
        }
        .top-toast.show { top: 10px; }

        /* 主三列布局：左素材、中风格、右输出。 */
        .main-layout { display: grid; grid-template-columns: 524px 510px minmax(0, 1fr); gap: 16px; height: calc(100vh - 160px); min-width: 0; }
        @media (max-width: 1200px) { .main-layout { grid-template-columns: 1fr; height: auto; } }

        /* 待核对：旧版本封面预览区；当前 HTML 没有 #versionExample，新版用 styleGalleryBoard。 */
        .version-example {
            aspect-ratio: 3/2;
            background: var(--bg-elevated);
            border: 1px solid var(--border-blue-dim);
            border-radius: 0;
            overflow: hidden;
            position: relative;
        }
        .version-example-media {
            position: absolute;
            inset: 8px;
            background: var(--bg-elevated);
            border-radius: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        .version-example img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; display: block; }
        .version-example-empty { color: #64748b; font-size: 12px; }
        .version-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #8da2bd;
        }
        .version-placeholder svg {
            width: 26px;
            height: 26px;
            opacity: 0.75;
        }
        .version-placeholder-text {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        /* 基础动画：状态灯、历史占位、生成特效共用。 */
        @keyframes pulseFlat {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        @keyframes compileBtnWarningFlash {
            0%, 100% {
                background: var(--bg-elevated);
                border-color: var(--border-color);
                color: var(--text-primary);
                box-shadow: 0 0 0 rgba(251, 191, 36, 0);
            }
            50% {
                background: linear-gradient(120deg, #fde047, #ef4444);
                border-color: #facc15;
                color: #1f2937;
                box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.26), 0 0 16px rgba(250, 204, 21, 0.4);
            }
        }

        /* 生成中光环：对应 #siriWave，生图时显示。 */
        .siri-wave {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 184px;
            height: 184px;
            pointer-events: none;
            border-radius: 999px;
            isolation: isolate;
            filter: saturate(1.12);
        }
        .siri-wave span { display: none; }
        .siri-wave::before,
        .siri-wave::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
        }
        .siri-wave::before {
            background:
                conic-gradient(
                    from 0deg,
                    rgba(56, 189, 248, 0.9),
                    rgba(99, 102, 241, 0.9),
                    rgba(45, 212, 191, 0.9),
                    rgba(14, 165, 233, 0.88),
                    rgba(56, 189, 248, 0.9)
                );
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 15px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 15px));
            animation: haloRotate 16s linear infinite, haloFlow 9s ease-in-out infinite alternate, haloBreath 5.8s ease-in-out infinite;
            filter: blur(0.3px);
        }
        .siri-wave::after {
            inset: 8px;
            background:
                conic-gradient(
                    from 160deg,
                    rgba(147, 197, 253, 0.35),
                    rgba(96, 165, 250, 0.12),
                    rgba(165, 180, 252, 0.28),
                    rgba(34, 211, 238, 0.2),
                    rgba(147, 197, 253, 0.35)
                );
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 11px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 11px));
            animation: haloRotateReverse 23s linear infinite, haloFlow 11s ease-in-out infinite alternate-reverse, haloBreath 7s ease-in-out infinite;
            opacity: 0.86;
            filter: blur(1.6px);
        }
        @keyframes haloRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes haloRotateReverse {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }
        @keyframes haloFlow {
            0% { filter: hue-rotate(0deg) saturate(1.08); }
            50% { filter: hue-rotate(22deg) saturate(1.18); }
            100% { filter: hue-rotate(0deg) saturate(1.08); }
        }
        @keyframes haloBreath {
            0%, 100% { transform: scale(0.988); opacity: 0.8; }
            50% { transform: scale(1.018); opacity: 1; }
        }
        
        .status-dots span { animation: pulseFlat 1.4s infinite; }
        .status-dots span:nth-child(2) { animation-delay: 0.2s; }
        .status-dots span:nth-child(3) { animation-delay: 0.4s; }

        /* 全局直角实验：覆盖 Tailwind rounded，让操作台整体更硬朗。 */
        .surface-card,
        .surface-input,
        .drop-zone,
        .history-thumb,
        .history-more,
        .custom-select-button,
        .custom-select-menu,
        .custom-select-option,
        .result-frame,
        .modal-caption,
        .modal-reuse-btn,
        .floating-card,
        .top-btn,
        .style-action-btn,
        .palette-swatch,
        .layout-dyn-icon-box,
        .comp-icon-box,
        .ratio-icon-box,
        .font-icon-box,
        .selection-chip,
        .selection-summary,
        .line-select,
        .line-test-bar {
            border-radius: 0 !important;
        }
        .rounded,
        .rounded-sm,
        .rounded-md,
        .rounded-lg,
        .rounded-xl,
        .rounded-2xl,
        .rounded-3xl {
            border-radius: 0 !important;
        }
        #styleHoverPreview.thumb-preview-mode #styleHoverPreviewImg {
            width: 120px !important;
            height: 120px !important;
            object-fit: cover !important;
        }