:root {
            --bg-dark: #09090b;
            --bg-panel: #18181b;
            --bg-border: #27272a;
            --accent: #00ffcc; 
            --accent-glow: rgba(0, 255, 204, 0.2);
            --text-main: #ffffff;
            --text-dim: #a1a1aa;
            --actions-bar-h: 112px;
            --topbar-h: 56px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
        
        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Segoe UI', 'Inter', sans-serif;
            height: 100vh;
            display: flex;
            overflow: hidden;
            padding-top: var(--topbar-h);
        }

        .top-bar{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--topbar-h);
            z-index: 2100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px 0 16px;
            background: linear-gradient(180deg, #0d1118 0%, #0a0d12 100%);
            border-bottom: 1px solid #252b36;
            box-shadow: 0 8px 30px rgba(0,0,0,.35);
        }
        .top-logo{
            font-size: 20px;
            font-weight: 700;
            letter-spacing: .4px;
            color: #dffff8;
            text-shadow: 0 0 24px rgba(0,255,204,.15);
            user-select: none;
        }
        .top-logo b{ color: var(--accent); font-weight: 700; }
        .top-right{
            display:flex;
            align-items:center;
            gap: 10px;
            min-width: 220px;
            justify-content: flex-end;
        }

        /* --- 侧边导航栏 --- */
        .app-nav {
            width: 60px; background: #000; border-right: 1px solid var(--bg-border);
            display: flex; flex-direction: column; align-items: center; padding-top: 20px; z-index: 100; flex-shrink: 0;
            height: calc(100vh - var(--topbar-h));
        }
        .nav-item {
            width: 40px; height: 40px; margin-bottom: 20px; border-radius: 8px; color: #666; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-size: 18px; transition: 0.2s; position: relative;
        }
        .nav-item.active, .nav-item:hover { color: var(--accent); background: rgba(255,255,255,0.1); }

        /* --- 主布局 --- */
        .main-container { flex: 1; display: flex; overflow: hidden; position: relative; height: calc(100vh - var(--topbar-h)); }
        .view-section { display: none; width: 100%; height: 100%; }
        .view-section.active { display: flex; }

        /* --- 导演台布局 --- */
        .project-sidebar {
            width: 240px; background: var(--bg-panel); border-right: 1px solid var(--bg-border);
            display: flex; flex-direction: column; min-width: 220px;
            position: relative;
            z-index: 8;
        }
        .project-list { flex: 1; overflow-y: auto; padding: 10px; }
        .project-item{
            padding: 10px 12px;
            margin-bottom: 8px;
            background: var(--bg-border);
            border-radius: 6px;
            border-left: 3px solid transparent;
            cursor: pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            transition:.16s ease;
        }
        .project-item:hover{ background:#333; }
        .project-item.active{
            border-left-color: var(--accent);
            background: rgba(0,255,204,0.06);
        }
        .project-item.drag-over{
            border-color: var(--accent);
            box-shadow: inset 0 0 0 1px rgba(0,255,204,.35);
        }
        .project-title{
            font-size:13px;
            font-weight:600;
            color:#d4dde8;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            flex:1;
        }
        .project-actions{
            display:flex;
            align-items:center;
            gap:6px;
            flex-shrink:0;
        }
        .scene-sidebar {
            width: 280px; background: var(--bg-panel); border-right: 1px solid var(--bg-border);
            display: flex; flex-direction: column;
            position: relative;
            z-index: 8;
        }
        .sidebar-header { padding: 15px; border-bottom: 1px solid var(--bg-border); display: flex; justify-content: space-between; align-items: center; }
        .scene-list { flex: 1; overflow-y: auto; padding: 10px; }
        .scene-item {
            padding: 12px; margin-bottom: 8px; background: var(--bg-border); border-radius: 6px; cursor: pointer;
            border-left: 3px solid transparent; transition: 0.2s;
        }
        .scene-item:hover { background: #333; }
        .scene-item.active { border-left-color: var(--accent); background: rgba(0,255,204,0.05); }

        /* --- 本地图上传按钮 --- */
        .scene-item { position: relative; padding-right: 70px; }
        .scene-actions {
            position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; align-items: center;
        }
        .icon-btn {
            width: 28px; height: 28px; border-radius: 6px;
            background: #1f1f1f; border: 1px solid #333; color: #aaa;
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; transition: 0.2s;
        }
        .icon-btn:hover { color: var(--accent); border-color: #555; background: #262626; }
        .icon-btn.icon-btn-danger{
            border-color:#7a2c2c;
            color:#ff8d8d;
            background:#2a1212;
        }
        .icon-btn.icon-btn-danger:hover{
            border-color:#ff6b6b;
            color:#ffd0d0;
            background:#3a1414;
        }

        .asset-card { position: relative; }
        .card-actions {
            position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 5;
        }
        .add-shot-card {
            cursor: pointer;
            border: 1px dashed #444 !important;
            background: rgba(255,255,255,0.03) !important;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            height: var(--story-media-h, 160px);
        }
        .add-shot-card:hover { border-color: var(--accent) !important; box-shadow: 0 0 15px var(--accent-glow); }

        .scene-idx { font-size: 10px; color: var(--accent); font-weight: bold; text-transform: uppercase; }
        .scene-title { font-size: 13px; font-weight: 600; margin-top: 2px; }

        .editor-main { flex: 1; display: flex; overflow: hidden; background: #000; }
        .editor-panel {
            width: 450px; background: var(--bg-dark); border-right: 1px solid var(--bg-border);
            padding: 20px;
            padding-bottom: calc(20px + var(--actions-bar-h) + env(safe-area-inset-bottom, 0px));
            overflow-y: auto; display: flex; flex-direction: column; gap: 15px; position: relative;
        }
        .preview-panel {
            flex: 1; padding: 20px; display: flex; flex-direction: column; 
            align-items: center; overflow-y: auto; background: radial-gradient(circle at center, #111 0%, #000 100%);
        }

        

        /* --- 底部动作条：仅固定“立即生成/生成视频” --- */
        .editor-actions-sticky{
            position: fixed;
            left: 0;
            width: 0;
            bottom: 0;
            z-index: 1200;
            padding: 10px 12px 14px;
            background: linear-gradient(to top, rgba(9,9,11,0.98) 0%, rgba(9,9,11,0.82) 70%, rgba(9,9,11,0.0) 100%);
            backdrop-filter: blur(10px);
            transform: translateZ(0);
        }
        .editor-actions-sticky .actions-inner{
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(20,20,23,0.92);
            border-radius: 14px;
            padding: 12px;
            box-shadow: 0 -12px 28px rgba(0,0,0,0.55);
        }
/* --- 组件 --- */
        .form-group { margin-bottom: 10px; }
        .form-label { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 11px; margin-bottom: 5px; text-transform: uppercase; }
        input, select {
            width: 100%; background: #1a1a1a; border: 1px solid #333; color: #fff;
            padding: 10px; border-radius: 6px; font-size: 13px; font-family: inherit;
        }
        
        /* 富文本编辑器 */
        .rich-editor {
            width: 100%; min-height: 120px; background: #1a1a1a; border: 1px solid #333; color: #fff;
            padding: 10px; border-radius: 6px; font-size: 14px; font-family: 'Segoe UI', sans-serif;
            line-height: 2.2; 
            white-space: pre-wrap; overflow-y: auto;
        }
        .rich-editor:focus { border-color: var(--accent); box-shadow: 0 0 5px var(--accent-glow); }

        /* 标签样式 */
        .asset-tag {
            border-radius: 6px !important; 
            padding: 2px 8px !important; 
            margin: 0 4px !important; 
            display: inline-flex !important; 
            align-items: center;
            font-weight: bold; font-size: 12px;
            user-select: none; -webkit-user-select: none;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            height: 24px;
            vertical-align: middle;
            white-space: nowrap;
        }
        .tag-char { background-color: #a61e1e !important; color: white !important; border: 1px solid #ff6666 !important; }
        .tag-prop { background-color: #1ea61e !important; color: white !important; border: 1px solid #66ff66 !important; }
        .tag-env  { background-color: #1e1ea6 !important; color: white !important; border: 1px solid #6666ff !important; }
        .tag-history { background-color: #c026d3 !important; color: white !important; border: 1px solid #f0abfc !important; }

        /* 菜单样式 */
        .mention-menu {
            position: fixed; display: none; background: #1c1c1e; border: 1px solid #444; 
            border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.95); z-index: 9999;
            width: 240px; max-height: 300px; overflow-y: auto;
        }
        .mention-category {
            padding: 8px 12px; font-size: 11px; color: var(--accent); background: #252525;
            text-transform: uppercase; font-weight: bold; position: sticky; top: 0; border-bottom: 1px solid #333;
        }
        .mention-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: 0.2s; border-bottom: 1px solid #2a2a2a;
        }
        .mention-item:hover { background: #333; }
        .mention-item img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: #000; border: 1px solid #444; }
        .mention-item span { font-size: 13px; color: #eee; }

        /* 同步预览区 */
        .sync-preview-box {
            background: #111; border: 1px solid #333; border-radius: 8px; padding: 10px; margin-bottom: 15px;
        }
        .sync-preview-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:6px;
            gap:8px;
        }
        .sync-add-btn{
            width:24px;
            height:24px;
            border-radius:999px;
            border:1px solid #35554a;
            background:#13261f;
            color:var(--accent);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            font-size:12px;
        }
        .sync-add-btn:hover{
            border-color:var(--accent);
            box-shadow:0 0 10px var(--accent-glow);
        }
        .sync-grid {
            display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;
        }
        .sync-item {
            min-width: 70px; display: flex; flex-direction: column; align-items: center; gap: 5px;
            position: relative; opacity: 0.6; transition: 0.3s;
        }
        .sync-item.ready { opacity: 1; }
        .sync-img {
            width: 50px; height: 50px; border-radius: 6px; background: #000; border: 2px solid #444;
            object-fit: cover;
        }
        .sync-item.done .sync-img { border-color: var(--accent); }
        .sync-status {
            font-size: 9px; padding: 2px 4px; border-radius: 3px; background: #333; color: #888;
            position: absolute; top: -5px; right: -5px; z-index: 2;
        }
        .sync-item.done .sync-status { background: var(--accent); color: #000; }
        .sync-remove-btn{
            position:absolute;
            top:-8px;
            left:-8px;
            width:16px;
            height:16px;
            border-radius:999px;
            border:1px solid #7a2c2c;
            background:#2a1212;
            color:#ff8d8d;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:3;
            font-size:9px;
        }
        .sync-remove-btn:hover{
            border-color:#ff6b6b;
            color:#ffd0d0;
        }
        .sync-label { font-size: 10px; color: #aaa; text-align: center; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* UI */
        .detail-card {
            background: #141414; border: 1px solid #333; border-radius: 6px; padding: 10px; margin-bottom: 10px;
            display: flex; gap: 10px; align-items: flex-start;
        }
        .detail-card-img { width: 60px; height: 60px; border-radius: 4px; background: #000; object-fit: cover; border: 1px solid #333; flex-shrink: 0; }
        .detail-card-content { flex: 1; display: flex; flex-direction: column; gap: 5px; }
        .detail-card input { padding: 6px; font-size: 12px; background: #222; border-color: #444; }
        
        .btn {
            background: #2a2a2a; color: #fff; border: 1px solid #333;
            padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 12px;
            display: inline-flex; align-items: center; gap: 6px; justify-content: center;
        }
        .btn:hover { background: #333; border-color: #555; }
        .btn-primary { background: var(--accent); color: #000; border: none; font-weight: bold; box-shadow: 0 0 10px var(--accent-glow); }
        .btn-primary:hover { filter: brightness(1.1); }
        .btn-danger { color: #ff5555; border-color: #ff555533; background: #ff555511; }
        .btn-small { padding: 4px 8px; font-size: 11px; }

        .viewport {
            width: 100%; max-width: 1000px; aspect-ratio: 16/9; background: #000;
            border: 1px solid #333; border-radius: 8px; overflow: hidden;
            display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
            position: relative; flex-shrink: 0;
        }
        .viewport-close{
            position:absolute;
            top:10px;
            right:10px;
            width:30px;
            height:30px;
            border-radius:8px;
            background:rgba(0,0,0,0.55);
            border:1px solid #333;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:10;
        }
        .viewport-close:hover{ border-color: var(--accent); color: var(--accent); }
    
        
        .viewport-download{
            position:absolute;
            top:10px;
            right:50px;
            height:30px;
            padding:0 10px;
            border-radius:8px;
            background:rgba(0,0,0,0.55);
            border:1px solid #333;
            color:#fff;
            display:flex;
            align-items:center;
            gap:6px;
            cursor:pointer;
            z-index:10;
            font-size:12px;
        }
        .viewport-download:hover{ border-color: var(--accent); color: var(--accent); }
        .viewport-zoom{
            position:absolute;
            top:10px;
            left:10px;
            height:30px;
            padding:0 10px;
            border-radius:8px;
            background:rgba(0,0,0,0.55);
            border:1px solid #333;
            color:#fff;
            display:flex;
            align-items:center;
            gap:6px;
            cursor:pointer;
            z-index:10;
            font-size:12px;
        }
        .viewport-zoom:hover{ border-color: var(--accent); color: var(--accent); }
.viewport img, .viewport video { width: 100%; height: 100%; object-fit: contain; }
        .viewport-action-btn{
            position:static;
            height:34px;
            padding:0 12px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,0.14);
            background:rgba(10,10,10,0.72);
            color:#fff;
            display:inline-flex;
            align-items:center;
            gap:6px;
            white-space:nowrap;
            cursor:pointer;
            font-size:12px;
        }
        .viewport-action-group{
            position:absolute;
            right:10px;
            bottom:10px;
            display:flex;
            gap:8px;
            z-index:11;
        }
        .viewport-action-group-left{
            position:absolute;
            left:10px;
            bottom:10px;
            display:flex;
            gap:8px;
            z-index:11;
        }
        .viewport-action-btn:hover{
            border-color:var(--accent);
            color:var(--accent);
        }
        .viewport-upload-empty{
            border:1px dashed #3a3a3f;
            border-radius:10px;
            background:#101113;
            color:#c7c7cd;
            padding:12px 14px;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:13px;
        }
        .viewport-upload-empty:hover{
            border-color:var(--accent);
            color:var(--accent);
        }

        .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 20px; width: 100%; overflow: visible; }
        .library-asset-grid{
            flex:1;
            height:100%;
            min-height:300px;
            align-content:start;
        }
        .asset-grid.active,
        .ref-picker-list.active{
            box-shadow: inset 0 0 0 1px rgba(0,255,204,.35);
            background: rgba(0,255,204,.03);
            border-radius: 8px;
        }
        .asset-card { background: #222; border-radius: 6px; padding: 10px; text-align: center; overflow: hidden;}
        .asset-card img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; margin-bottom: 5px; }
        .library-asset-card{
            border:1px solid #344156;
            background:#101926;
            cursor:grab;
            position:relative;
        }
        .library-asset-card:active{ cursor:grabbing; }
        .library-asset-card.drag-over{
            border-color:var(--accent);
            box-shadow:0 0 0 1px rgba(0,255,204,.4), 0 0 12px var(--accent-glow);
        }
        .asset-mini-actions{
            display:flex;
            justify-content:center;
            gap:6px;
            margin-top:6px;
        }
        .asset-mini-btn{
            width:22px;
            height:22px;
            border-radius:6px;
            border:1px solid #374155;
            background:#151f2e;
            color:#b7c4d8;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            font-size:10px;
        }
        .asset-mini-btn:hover{
            border-color:var(--accent);
            color:var(--accent);
        }
        .asset-mini-btn.danger{
            border-color:#6a2c35;
            color:#ff9aa8;
            background:#23141a;
        }
        .asset-mini-btn.danger:hover{
            border-color:#ff7f96;
            color:#ffd2db;
        }
        .asset-grid-drop{
            border:1px dashed #2f3f57;
            border-radius:10px;
            padding:10px;
            min-height:90px;
            color:#5f6d84;
            font-size:12px;
            text-align:center;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#0e1520;
        }
        .asset-grid-drop.active{
            border-color:var(--accent);
            color:var(--accent);
            box-shadow:0 0 0 1px rgba(0,255,204,.35) inset;
        }

        .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); z-index: 999; backdrop-filter: blur(5px); align-items: center; justify-content: center; }
        #viewportZoomModal { z-index: 6000; }
        .modal.open { display: flex; }
        .modal-box { background: var(--bg-panel); width: 600px; max-height: 90vh; padding: 30px; border-radius: 12px; border: 1px solid var(--bg-border); overflow-y: auto; }
        .ref-picker-box{
            width:min(1320px, 97vw);
            max-height:95vh;
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .ref-picker-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
            min-height:0;
        }
        .ref-picker-col{
            border:1px solid #2f3744;
            border-radius:10px;
            background:#0f131b;
            display:flex;
            flex-direction:column;
            min-height:0;
        }
        .ref-picker-col-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            padding:10px;
            border-bottom:1px solid #273244;
        }
        .ref-picker-col-title{
            color:#9fc0e6;
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.6px;
        }
        .ref-picker-list{
            padding:10px;
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
            gap:8px;
            overflow:auto;
            min-height:340px;
            flex:1;
            align-content:start;
        }
        .ref-picker-card{
            border:1px solid #324158;
            border-radius:8px;
            background:#0d1624;
            padding:5px;
            cursor:pointer;
            transition:.16s ease;
        }
        .ref-picker-card:hover{
            border-color:#5b6d88;
            transform:translateY(-1px);
        }
        .ref-picker-card.selected{
            border-color:#ff4d4f;
            box-shadow:0 0 0 1px rgba(255,77,79,.4), 0 0 14px rgba(255,77,79,.28);
            background:#2a1416;
        }
        .ref-picker-card.drag-over{
            border-color:var(--accent);
            box-shadow:0 0 0 1px rgba(0,255,204,.42), 0 0 12px rgba(0,255,204,.25);
        }
        .ref-picker-card img{
            width:100%;
            aspect-ratio:1/1;
            height:auto;
            border-radius:6px;
            object-fit:cover;
            background:#000;
        }
        .ref-picker-card-name{
            margin-top:4px;
            font-size:10px;
            color:#c9d2df;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            text-align:center;
        }
        .ref-picker-selected{
            border:1px solid #2f3744;
            border-radius:10px;
            background:#0f131b;
            padding:10px;
            max-height:130px;
            overflow:auto;
        }
        .ref-picker-selected-head{
            color:#8fa2bd;
            font-size:11px;
            margin-bottom:8px;
            text-transform:uppercase;
            letter-spacing:.6px;
        }
        .ref-picker-pill-wrap{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .ref-picker-pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:4px 8px;
            border-radius:999px;
            border:1px solid #a33;
            background:#36181b;
            color:#ffd3d3;
            font-size:11px;
            white-space:nowrap;
        }
        .ref-picker-empty{
            color:#5f6d84;
            font-size:12px;
        }
        @media (max-width: 1100px){
            .ref-picker-grid{
                grid-template-columns:1fr;
            }
        }
        .viewport-zoom-box{
            width:min(96vw, 1600px);
            height:min(94vh, 980px);
            background:#000;
            border:1px solid #2d2d2d;
            border-radius:12px;
            position:relative;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .viewport-zoom-box img,
        .viewport-zoom-box video{
            width:100%;
            height:100%;
            object-fit:contain;
            background:#000;
        }
        .viewport-zoom-close{
            position:absolute;
            top:10px;
            right:10px;
            width:32px;
            height:32px;
            border-radius:8px;
            border:1px solid #3a3a3a;
            background:rgba(0,0,0,.6);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:4;
        }
        .viewport-zoom-close:hover{
            border-color:var(--accent);
            color:var(--accent);
        }

        .progress-bar { width: 100%; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-top: 10px; display: none; }
        .progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s; }

        .viewport-wrap { position: relative; width: 100%; max-width: 800px; }
        .vp-gen-overlay {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
            border-radius: 12px;
        }
        .vp-gen-card{
            width: min(520px, calc(100% - 32px));
            background: rgba(10,10,10,.75);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            padding: 14px 14px 12px;
            box-shadow: 0 12px 40px rgba(0,0,0,.45);
            backdrop-filter: blur(10px);
            pointer-events: none;
        }
        .vp-gen-actions,
        .vp-gen-actions .btn{ pointer-events:auto; }
        .vp-gen-title{
            display:flex; align-items:center; gap:10px;
            color: #d9fff6;
            font-size: 13px;
            margin-bottom: 10px;
            letter-spacing: .2px;
        }
        #vpGenStatus{
            font-size: 12px;
            color: var(--accent);
            margin-top: 10px;
            min-height: 18px;
            word-break: break-word;
        }
        #vpGenProgress { display:block; margin-top: 6px; }
        .vp-gen-actions{
            margin-top:10px;
            display:flex;
            justify-content:flex-end;
            gap:8px;
        }
        .vp-gen-actions .btn{
            padding:6px 10px;
            font-size:12px;
        }
        .media-toolbar { display: flex; gap: 10px; background: #111; padding: 10px; border-radius: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap;}
        .history-carousel-wrap{
            position: relative;
            width: 100%;
            border: 1px solid #222;
            border-radius: 16px;
            background: #0c0d10;
            padding: 12px 42px;
            min-height: 122px;
        }
        .history-carousel-arrow{
            position:absolute;
            top:50%;
            transform: translateY(-50%);
            width:30px;
            height:30px;
            border-radius:999px;
            border:1px solid #333;
            background: rgba(20,20,20,0.85);
            color:#fff;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            z-index:2;
        }
        .history-carousel-arrow:hover{ border-color: var(--accent); color: var(--accent); }
        .history-carousel-arrow.left{ left:8px; }
        .history-carousel-arrow.right{ right:8px; }
        .history-carousel-track{
            display:flex;
            gap:10px;
            overflow-x:auto;
            overflow-y:hidden;
            scroll-behavior:auto;
            padding-bottom:4px;
        }
        .history-carousel-track::-webkit-scrollbar{ height:6px; }
        .history-carousel-track::-webkit-scrollbar-thumb{ background:#29303a; border-radius:20px; }
        .history-card{
            flex:0 0 170px;
            background:#121419;
            border:1px solid #262b36;
            border-radius:12px;
            padding:8px;
            cursor:pointer;
            transition:0.15s;
        }
        .history-card:hover{ border-color:#4a5568; }
        .history-card.selected{
            border-color:#fff;
            box-shadow:0 0 0 1px #fff inset;
        }
        .history-card .thumb{
            width:100%;
            height:86px;
            border-radius:8px;
            overflow:hidden;
            background:#000;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .history-card .thumb img,
        .history-card .thumb video{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .history-card .meta{
            margin-top:8px;
            display:flex;
            flex-direction:column;
            gap:2px;
        }
        .history-card .name{
            font-size:15px;
            color:#dce4f1;
            line-height:1.25;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .history-card .model{
            font-size:11px;
            color:#7d8a9e;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .history-card.pending{
            border-color:#2d4662;
            background:linear-gradient(180deg,#0f1824,#0d131e);
        }
        .history-card .queue-status{
            font-size:11px;
            color:#7dd3fc;
            margin-top:2px;
        }
        .history-card .queue-actions{
            margin-top:4px;
            display:flex;
            gap:6px;
            flex-wrap:wrap;
        }
        .history-card .queue-actions .btn{
            padding:3px 8px;
            font-size:11px;
        }
        .history-multi-grid{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            width:100%;
            border:1px solid #222;
            border-radius:16px;
            background:#0c0d10;
            padding:10px;
        }
        .history-multi-grid .history-card{
            flex:1 1 calc(25% - 8px);
            min-width:220px;
            max-width:320px;
        }
        .history-multi-grid .history-card .thumb{
            height:120px;
        }
        .history-view-row{
            display:flex;
            align-items:center;
            gap:10px;
            background:#101217;
            border:1px solid #232a35;
            border-radius:10px;
            padding:10px;
        }
        .history-view-row.focused{
            border-color:#fff;
            box-shadow:0 0 0 1px #fff inset;
        }
        .history-view-row .thumb{
            width:88px;
            height:56px;
            border-radius:8px;
            overflow:hidden;
            background:#000;
            flex:0 0 auto;
        }
        .history-view-row .thumb img,
        .history-view-row .thumb video{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .history-view-row .main{
            flex:1;
            min-width:0;
        }
        .history-view-row .title{
            font-size:13px;
            color:#dce6f4;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .history-view-row .sub{
            margin-top:3px;
            font-size:11px;
            color:#7f8ea6;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .history-view-row .ops{
            display:flex;
            align-items:center;
            gap:6px;
            flex-wrap:wrap;
        }
    
        /* --- 常用参数按钮 --- */
        .param-panel {
            background:#111; border:1px solid #333; border-radius:8px; padding:10px; margin-top:10px;
        }
        .param-cat { margin-bottom:10px; }
        .param-cat-title { font-size:11px; color:#aaa; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; display:flex; justify-content:space-between; align-items:center; }
        .param-btns { display:flex; flex-wrap:wrap; gap:8px; }
        .param-btn {
            padding:6px 10px; border-radius:10px; border:1px solid #333; background:#1a1a1a; color:#ccc;
            cursor:pointer; font-size:12px; transition:0.15s; user-select:none;
        }
        .param-btn:hover { border-color:#555; color:#fff; }
        .param-btn.active { background:#1d4ed8; border-color:#3b82f6; color:#fff; box-shadow:0 0 10px rgba(59,130,246,0.25); }
        .param-selected-summary{
            display:flex;
            flex-wrap:wrap;
            gap:6px;
            margin-top:8px;
        }
        .param-summary-pill{
            padding:4px 8px;
            border-radius:999px;
            border:1px solid #3b82f6;
            background:#1d4ed8;
            color:#fff;
            font-size:11px;
            white-space:nowrap;
        }
        .param-summary-empty{
            font-size:11px;
            color:#6f7f96;
        }
        .collapsible.open .param-selected-summary{ display:none; }
        .param-tag {
            border-radius:10px !important;
            padding:2px 10px !important;
            margin: 0 4px !important;
            display:inline-flex !important;
            align-items:center;
            font-weight:700; font-size:12px;
            user-select:none; -webkit-user-select:none;
            cursor:pointer;
            background:#7c3aed !important;
            color:#fff !important;
            border:1px solid rgba(255,255,255,0.12) !important;
            box-shadow:0 2px 10px rgba(124,58,237,0.25);
            height:26px;
            vertical-align:middle;
            white-space:nowrap;
        }

        .story-media-box{
            width:100%;
            height: var(--story-media-h, 160px);
            background:#000;
            border-radius:6px;
            border:1px solid #333;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:center;
            margin-bottom:6px;
            position:relative;
        }
        .story-media-box img,
        .story-media-box video{
            width:100%;
            height:100%;
            object-fit:contain; /* 关键：不裁剪，完整显示任意比例 */
            background:#000;
        }
        .story-media-switch{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:24px;
            height:24px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.26);
            background:rgba(10,10,10,.58);
            color:#f4f5f7;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:10;
            font-size:11px;
            line-height:1;
            backdrop-filter:blur(4px);
        }
        .story-media-switch.left{ left:6px; }
        .story-media-switch.right{ right:6px; }
        .story-media-switch:hover{
            border-color:var(--accent);
            color:var(--accent);
            box-shadow:0 0 10px var(--accent-glow);
        }
        .story-media-switch.disabled{
            opacity:.4;
            cursor:not-allowed;
            pointer-events:none;
        }
        .story-media-meta{
            margin-top:2px;
            font-size:10px;
            color:#7b8390;
            min-height:14px;
        }
        .story-action-row{
            margin-top:8px;
            display:flex;
            gap:6px;
            flex-wrap:wrap;
            justify-content:center;
        }
        .story-item-card{
            position:relative;
            border:1px solid #333;
            border-radius:8px;
            overflow:visible !important;
            background:#181818;
        }
        .story-item-card.selected{
            border-color:#facc15;
            box-shadow:0 0 0 2px rgba(250,204,21,.35);
        }
        .story-insert-slot{
            width:22px;
            min-width:22px;
            max-width:22px;
            height: var(--story-media-h, 160px);
            justify-self:center;
            align-self:stretch;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#9aa7b8;
            cursor:pointer;
            background:#101216;
            transition:.15s;
            border:1px dashed #2e333d;
            border-radius:8px;
            font-size:18px;
            line-height:1;
            padding:0;
            overflow:hidden;
        }
        .story-insert-slot:hover{
            color:var(--accent);
            border-color:var(--accent);
            box-shadow:0 0 8px var(--accent-glow);
        }
        .story-between-plus{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:30px;
            height:30px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.18);
            background:#9a3f0d;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:24;
            font-size:14px;
            line-height:1;
            box-shadow:0 6px 16px rgba(0,0,0,.35);
        }
        .story-between-plus.left{ left:-16px; }
        .story-between-plus.right{ right:-16px; }
        .story-between-plus:hover{
            filter:brightness(1.08);
            box-shadow:0 0 14px rgba(255,140,64,.35);
        }
        .story-insert-handle{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:22px;
            height:22px;
            border-radius:999px;
            border:1px solid #3a434c;
            background:#0f141a;
            color:var(--accent);
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            z-index:20;
            opacity:.9;
        }
        .story-insert-left{ left:-10px; }
        .story-insert-right{ right:-10px; }
        .story-insert-slot{
            width:18px;
            height:18px;
            justify-self:center;
            align-self:center;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#9aa7b8;
            cursor:pointer;
            background:transparent;
            transition:.15s;
            border:none;
            font-size:18px;
            line-height:1;
        }
        .story-insert-slot:hover{
            color:var(--accent);
            text-shadow:0 0 8px var(--accent-glow);
        }
        .story-transition-box{
            position:relative;
            width:100%;
            height: var(--story-media-h, 160px);
            border-radius:6px;
            overflow:hidden;
            border:1px solid #3a3a3a;
            background:#101217;
            display:flex;
        }
        .story-transition-side{
            flex:1;
            position:relative;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            font-size:11px;
            text-shadow:0 1px 3px #000;
        }
        .story-transition-side.left{ background:linear-gradient(90deg, rgba(170,32,32,.48), rgba(95,25,25,.35)); }
        .story-transition-side.right{ background:linear-gradient(90deg, rgba(28,65,162,.35), rgba(39,114,225,.45)); }
        .story-transition-side img,
        .story-transition-side video{
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:.34;
            transition:.18s;
        }
        .story-transition-side:hover img,
        .story-transition-side:hover video{ opacity:1; }
        .story-transition-side .shot-no{
            position:absolute;
            top:6px;
            left:8px;
            font-size:10px;
            color:#f2f2f2;
            background:rgba(0,0,0,.45);
            padding:2px 6px;
            border-radius:6px;
        }
        .story-transition-info{
            margin-top:8px;
            font-size:11px;
            color:#9ea6b3;
            min-height:16px;
        }
        .story-transition-actions{
            margin-top:8px;
            display:flex;
            gap:6px;
            flex-wrap:wrap;
        }
        .story-batch-bar{
            position:fixed;
            left:74px;
            bottom:14px;
            z-index:1300;
            display:none;
            align-items:center;
            gap:10px;
            background:rgba(13,15,19,.94);
            border:1px solid #343b45;
            border-radius:12px;
            padding:8px 12px;
            box-shadow:0 12px 28px rgba(0,0,0,.45);
        }
        .toggle-pill{
            padding:6px 10px;
            border-radius:999px;
            background:#1a1a1a;
            border:1px solid #333;
            color:#ddd;
            cursor:pointer;
            font-size:12px;
            display:inline-flex;
            align-items:center;
            gap:6px;
        }
        .toggle-pill.active{
            border-color: var(--accent);
            box-shadow: 0 0 10px var(--accent-glow);
            color: var(--accent);
        }
        .story-frame-pick-bar{
            display:none;
            margin:0 10px 12px;
            padding:10px 12px;
            border:1px solid #5d1f24;
            border-radius:10px;
            background:rgba(80, 18, 24, .45);
            color:#ffd7d8;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .story-frame-pick-bar .title{
            font-size:13px;
            font-weight:700;
            letter-spacing:.2px;
        }
        .story-frame-pick-bar .desc{
            font-size:12px;
            color:#ffb8ba;
        }
        .story-item-card.frame-pickable:hover{
            border-color:#ff4d4f !important;
            box-shadow:0 0 0 2px rgba(255,77,79,.3);
        }
        .story-item-card.frame-picked{
            border-color:#ff4d4f !important;
            box-shadow:0 0 0 2px rgba(255,77,79,.4);
        }
        .story-between-plus.frame-add-mode{
            border-color:#ffb4b4;
            background:#b33434;
        }
        .toolbox-wrap{
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:16px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        .stats-shell{
            width:100%;
            max-width:1520px;
            margin:0 auto;
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .stats-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:12px 14px;
            border:1px solid #2a3446;
            border-radius:14px;
            background:linear-gradient(135deg, rgba(14,21,31,.92), rgba(11,18,28,.85));
            box-shadow:0 10px 26px rgba(0,0,0,.24);
        }
        .stats-head h2{
            margin:0;
            color:#dbfff7;
            font-size:28px;
            font-weight:800;
            letter-spacing:.2px;
            text-shadow:0 0 20px rgba(0,255,204,.14);
        }
        .stats-sub{
            margin-top:6px;
            color:#97adc4;
            font-size:12px;
            letter-spacing:.2px;
        }
        .stats-scope-select{
            min-width:190px;
            background:#152131;
            border:1px solid #334760;
            color:#e3effb;
            border-radius:10px;
            padding:8px 12px;
            font-size:12px;
            font-weight:600;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .stats-tabs{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            background:#0e151f;
            border:1px solid #253243;
            border-radius:12px;
            padding:6px;
            width:max-content;
            max-width:100%;
        }
        .stats-workbench{
            display:grid;
            grid-template-columns: 170px minmax(0,1fr);
            gap:12px;
            align-items:start;
        }
        .stats-tabs.stats-tabs-vertical{
            width:100%;
            max-width:none;
            display:flex;
            flex-direction:column;
            gap:6px;
            position:sticky;
            top:8px;
            padding:8px;
        }
        .stats-tabs.stats-tabs-vertical .stats-tab{
            width:100%;
            text-align:left;
            border-radius:10px;
            padding:9px 12px;
        }
        .stats-pane-wrap{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .stats-tab{
            border:1px solid transparent;
            background:transparent;
            color:#afc2d8;
            font-size:12px;
            border-radius:999px;
            padding:7px 14px;
            cursor:pointer;
            transition:.18s ease;
        }
        .stats-tab:hover{
            color:#e1edf8;
            border-color:#2f4258;
            background:#162333;
        }
        .stats-tab.active{
            color:#031118;
            background:linear-gradient(135deg,#3ce6c9,#60a5fa);
            border-color:transparent;
            font-weight:700;
            box-shadow:0 8px 18px rgba(96,165,250,.24);
        }
        .stats-pane{
            display:none;
            flex-direction:column;
            gap:12px;
        }
        .stats-pane.active{
            display:flex;
        }
        .stats-overview-grid{
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap:10px;
        }
        .stats-kpi{
            border:1px solid #2a3443;
            background:#10161f;
            border-radius:12px;
            padding:10px 12px;
        }
        .stats-kpi .k{
            color:#91a4ba;
            font-size:11px;
        }
        .stats-kpi .v{
            color:#eaf3ff;
            font-weight:700;
            font-size:20px;
            margin-top:4px;
        }
        .stats-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .stats-row.stats-row-overview{
            grid-template-columns:minmax(280px,.85fr) minmax(320px,1fr) minmax(520px,1.45fr);
            align-items:stretch;
        }
        .stats-card{
            border:1px solid #2a374a;
            background:linear-gradient(160deg, rgba(14,21,31,.96), rgba(11,17,26,.94));
            border-radius:16px;
            padding:14px;
            min-height:220px;
            box-shadow:0 14px 30px rgba(0,0,0,.26);
        }
        .stats-card.stats-card-tall{
            min-height:720px;
        }
        .stats-card-title{
            color:#e7f2ff;
            font-size:15px;
            font-weight:700;
            margin-bottom:10px;
            letter-spacing:.2px;
        }
        .stats-card-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:10px;
        }
        .stats-card-head .stats-card-title{
            margin-bottom:0;
        }
        .stats-chart-mode{
            display:inline-flex;
            align-items:center;
            gap:6px;
            border:1px solid #2d3d53;
            background:#0f1a27;
            color:#b6cbe2;
            border-radius:9px;
            padding:5px 8px;
            font-size:12px;
            cursor:pointer;
        }
        .stats-chart-mode i{
            color:#7dd3fc;
            font-size:12px;
        }
        .stats-chart-mode select{
            width:auto;
            min-width:84px;
            padding:0;
            border:none;
            background:transparent;
            color:#dbe9f8;
            font-size:12px;
        }
        .stats-chart{
            width:100%;
            height:280px;
            display:block;
            background:radial-gradient(circle at 20% 10%, #0f1d2c 0%, #0b121b 72%);
            border:1px solid #2b3a50;
            border-radius:12px;
        }
        .stats-ability-chart-wrap{
            display:flex;
            flex-direction:column;
            align-items:center;
        }
        .stats-ability-overlay{
            position:static;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:2px;
            pointer-events:none;
            text-align:center;
            margin-top:8px;
            min-height:58px;
        }
        .stats-ability-overlay .nick{
            font-size:28px;
            line-height:1.05;
            font-weight:800;
            color:#f0fbff;
            text-shadow:0 4px 16px rgba(0,0,0,.55), 0 0 20px rgba(125,211,252,.35);
            letter-spacing:.4px;
        }
        .stats-ability-overlay .score{
            font-size:13px;
            color:#9ec7ea;
            font-weight:700;
            text-shadow:0 2px 10px rgba(0,0,0,.45);
        }
        .stats-rank-title{
            margin-top:10px;
            margin-bottom:6px;
            color:#b9cee4;
            font-weight:700;
            font-size:12px;
        }
        .stats-rank-board{
            border:1px solid #29415b;
            border-radius:10px;
            background:#0f1926;
            overflow:hidden;
        }
        .stats-rank-row{
            display:flex;
            align-items:center;
            gap:8px;
            padding:7px 10px;
            border-bottom:1px dashed #27405b;
            color:#d6e7f8;
            font-size:12px;
        }
        .stats-rank-row:last-child{
            border-bottom:none;
        }
        .stats-rank-row.me{
            background:linear-gradient(90deg, rgba(239,68,68,.24), rgba(239,68,68,.06));
            color:#ffe9e9;
            font-weight:700;
        }
        .stats-rank-row.me .r-no,
        .stats-rank-row.me .r-name,
        .stats-rank-row.me .r-score{
            color:#ff6b6b;
        }
        .stats-rank-row .r-no{
            min-width:40px;
            color:#8cb4d8;
            font-weight:700;
        }
        .stats-rank-row .r-name{
            flex:1;
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .stats-rank-row .r-score{
            min-width:34px;
            text-align:right;
            color:#9dd4ff;
            font-weight:700;
        }
        .stats-chart.stats-chart-detail{
            height:260px;
        }
        .stats-table{
            margin-top:10px;
            color:#9fb3c9;
            font-size:12px;
            line-height:1.6;
            max-height:220px;
            overflow:auto;
            border:1px solid #263548;
            background:#0c131b;
            border-radius:12px;
            padding:10px 12px;
        }
        .stats-table.stats-table-tall{
            max-height:650px;
            font-size:13px;
        }
        #statsAbilityBox{
            max-height:none;
            overflow:visible;
        }
        #statsGlobalRankBoard{
            max-height:none;
            overflow:visible;
        }
        .stats-table-row{
            display:flex;
            justify-content:space-between;
            gap:12px;
            border-bottom:1px dashed #2a3b50;
            padding:7px 0;
            align-items:flex-start;
        }
        .stats-table-row span:first-child{
            color:#c5d7eb;
            min-width:160px;
            flex:1;
        }
        .stats-table-row span:last-child{
            color:#e6f2ff;
            font-weight:600;
            text-align:right;
            word-break:break-word;
        }
        .stats-group-title{
            margin:8px 0 4px;
            padding:7px 10px;
            border-radius:9px;
            font-size:12px;
            font-weight:700;
            letter-spacing:.2px;
            border:1px solid transparent;
        }
        .stats-group-row{
            border-left:3px solid transparent;
            padding-left:10px;
            border-radius:8px;
        }
        .stats-group-core{
            background:linear-gradient(90deg, rgba(79,195,247,.16), rgba(79,195,247,.03));
            border-color:#3ea8d7;
            color:#d8f4ff;
        }
        .stats-group-output{
            background:linear-gradient(90deg, rgba(102,187,106,.14), rgba(102,187,106,.03));
            border-color:#58a85c;
            color:#dcf6df;
        }
        .stats-group-cost{
            background:linear-gradient(90deg, rgba(245,158,11,.15), rgba(245,158,11,.03));
            border-color:#d08a18;
            color:#ffe8bf;
        }
        .stats-group-profile{
            background:linear-gradient(90deg, rgba(167,139,250,.15), rgba(167,139,250,.03));
            border-color:#8f73d7;
            color:#efe5ff;
        }
        .stats-persona-tags{
            display:flex;
            flex-wrap:wrap;
            gap:6px;
            margin-bottom:8px;
        }
        .stats-persona-tag{
            border:1px solid #2f4258;
            background:#122031;
            color:#cde3f9;
            border-radius:999px;
            font-size:11px;
            padding:3px 10px;
        }
        .stats-prompt-timeline{
            display:grid;
            grid-template-columns:minmax(260px, 340px) 1fr;
            gap:12px;
            max-height:760px;
            overflow:auto;
            border:1px solid #29384d;
            border-radius:14px;
            background:#0b121a;
            padding:10px;
        }
        .stats-shot-list{
            border:1px solid #2b3c52;
            border-radius:12px;
            background:#0f1823;
            overflow:auto;
            min-height:360px;
            max-height:700px;
        }
        .stats-shot-item{
            border-bottom:1px solid #25364a;
            padding:11px 12px;
            cursor:pointer;
            display:flex;
            flex-direction:column;
            gap:6px;
            transition:.16s ease;
        }
        .stats-shot-item:hover{
            background:#152637;
        }
        .stats-shot-item:last-child{
            border-bottom:none;
        }
        .stats-shot-item.active{
            background:#183049;
            box-shadow:inset 0 0 0 1px #4f7aa8;
        }
        .stats-shot-main{
            display:flex;
            justify-content:space-between;
            gap:8px;
            align-items:center;
        }
        .stats-shot-title{
            color:#e2eefb;
            font-weight:700;
            font-size:13px;
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .stats-shot-no{
            color:#7dd3fc;
            font-size:11px;
            white-space:nowrap;
        }
        .stats-shot-kpis{
            display:flex;
            gap:10px;
            font-size:12px;
            color:#a8bed6;
            flex-wrap:wrap;
        }
        .stats-shot-kpis b{
            color:#eff7ff;
        }
        .stats-prompt-panel{
            border:1px solid #2b3c52;
            border-radius:12px;
            background:#101a26;
            min-height:360px;
            max-height:700px;
            overflow:auto;
            padding:12px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .stats-prompt-version{
            border:1px solid #334960;
            border-radius:10px;
            background:#132133;
            padding:10px;
        }
        .stats-prompt-version-head{
            display:flex;
            justify-content:space-between;
            gap:8px;
            color:#9fb7d2;
            font-size:11px;
            margin-bottom:6px;
        }
        .stats-prompt-version-type{
            display:inline-block;
            border:1px solid #4a6a89;
            border-radius:999px;
            padding:1px 7px;
            color:#b5e2ff;
            font-size:10px;
            margin-right:6px;
            background:#1a3349;
        }
        .stats-prompt-version-text{
            color:#e1ecf8;
            font-size:12px;
            line-height:1.6;
            white-space:pre-wrap;
            word-break:break-word;
        }
        .stats-table::-webkit-scrollbar,
        .stats-prompt-timeline::-webkit-scrollbar,
        .stats-shot-list::-webkit-scrollbar,
        .stats-prompt-panel::-webkit-scrollbar{
            width:8px;
            height:8px;
        }
        .stats-table::-webkit-scrollbar-thumb,
        .stats-prompt-timeline::-webkit-scrollbar-thumb,
        .stats-shot-list::-webkit-scrollbar-thumb,
        .stats-prompt-panel::-webkit-scrollbar-thumb{
            background:#35506c;
            border-radius:999px;
        }
        .stats-table::-webkit-scrollbar-track,
        .stats-prompt-timeline::-webkit-scrollbar-track,
        .stats-shot-list::-webkit-scrollbar-track,
        .stats-prompt-panel::-webkit-scrollbar-track{
            background:#0d1722;
        }
        .stats-matrix-card{
            border:1px solid #263243;
            border-radius:12px;
            padding:10px;
            background:#0d131b;
        }
        .stats-matrix-head{
            display:flex;
            align-items:center;
            gap:8px;
            margin-bottom:8px;
        }
        .stats-matrix-shot{
            flex-shrink:0;
            font-size:10px;
            color:#7dd3fc;
            border:1px solid #2e4458;
            border-radius:999px;
            padding:2px 8px;
            letter-spacing:.3px;
        }
        .stats-matrix-title{
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            color:#e5f2ff;
            font-size:13px;
            font-weight:700;
        }
        .stats-matrix-kpis{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:8px;
            margin-bottom:8px;
        }
        .stats-matrix-kpi{
            border:1px solid #2a3a4f;
            border-radius:10px;
            background:#0b1622;
            padding:8px;
            display:flex;
            flex-direction:column;
            gap:2px;
        }
        .stats-matrix-kpi .k{
            font-size:11px;
            color:#8ea4be;
        }
        .stats-matrix-kpi .v{
            font-size:20px;
            color:#ecf7ff;
            font-weight:700;
            line-height:1.1;
        }
        .stats-matrix-meta{
            display:flex;
            justify-content:space-between;
            gap:8px;
            font-size:11px;
            color:#7f95ad;
            margin-bottom:6px;
        }
        .stats-matrix-top{
            border-top:1px dashed #223042;
            padding-top:6px;
            font-size:12px;
            color:#a2b5ca;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .stats-matrix-top b{
            color:#b9cee5;
        }
        @media (max-width: 1180px){
            .stats-row{ grid-template-columns:1fr; }
            .stats-prompt-timeline{ grid-template-columns:1fr; }
            .stats-card.stats-card-tall{ min-height:560px; }
            .stats-shell{ gap:12px; }
            .stats-head{ padding:10px; }
            .stats-head h2{ font-size:24px; }
            .stats-workbench{ grid-template-columns:1fr; }
            .stats-tabs.stats-tabs-vertical{
                position:static;
                flex-direction:row;
                flex-wrap:wrap;
            }
            .stats-tabs.stats-tabs-vertical .stats-tab{
                width:auto;
                text-align:center;
                border-radius:999px;
            }
        }
        @media (max-width: 780px){
            .stats-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .stats-scope-select{ min-width:100%; }
            .stats-table-row{
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }
            .stats-table-row span:last-child{
                text-align:left;
            }
        }
        .toolbox-home{
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .toolbox-title{
            font-size:28px;
            color:var(--accent);
            font-weight:800;
            letter-spacing:.4px;
        }
        .toolbox-sub{
            color:#8f98a3;
            font-size:13px;
        }
        .toolbox-tool-header{
            display:none;
            align-items:center;
            gap:10px;
            margin-bottom:4px;
        }
        .toolbox-tool-title{
            font-size:20px;
            color:var(--accent);
            font-weight:800;
            letter-spacing:.2px;
        }
        .toolbox-back-btn{
            display:inline-flex;
            align-items:center;
            gap:6px;
        }
        .tool-app-grid{
            display:grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap:16px;
            max-width:760px;
        }
        .tool-app{
            background:#111821;
            border:1px solid #2e3a48;
            border-radius:14px;
            padding:14px 10px;
            min-height:132px;
            cursor:pointer;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:10px;
            transition:.18s;
        }
        .tool-app:hover{
            border-color:var(--accent);
            box-shadow:0 10px 25px rgba(0,255,204,.12);
            transform:translateY(-2px);
        }
        .tool-app i{
            font-size:34px;
            color:var(--accent);
        }
        .tool-app span{
            font-size:13px;
            color:#ecf4ff;
            text-align:center;
            line-height:1.35;
            font-weight:600;
        }
        .toolbox-panel{
            margin-top:8px;
            max-width:980px;
            border:1px solid #27303b;
            border-radius:14px;
            background:#111419;
            padding:16px;
            display:none;
            flex-direction:column;
            gap:12px;
        }
        .toolbox-panel.active{ display:flex; }
        .toolbox-image-editor-panel{
            max-width:1400px;
            min-height:760px;
            padding:0;
            overflow:hidden;
        }
        .toolbox-image-editor-frame{
            width:100%;
            height:76vh;
            min-height:760px;
            border:0;
            display:block;
            background:#090d12;
        }
        html.fx-scroll-locked,
        body.fx-scroll-locked{
            overflow:hidden !important;
        }
        .toolbox-editor-fullscreen{
            position:fixed;
            inset:0;
            z-index:20000;
            background:#090d12;
            display:none;
        }
        .toolbox-editor-fullscreen.open{
            display:block;
        }
        .toolbox-editor-fullscreen-frame{
            width:100vw;
            height:100vh;
            border:0;
            display:block;
            background:#090d12;
        }
        .tool-video-wrap{
            position:relative;
            width:100%;
            max-width:860px;
            border:1px solid #2c333c;
            border-radius:12px;
            background:#000;
            overflow:hidden;
        }
        .tool-video-wrap video{
            width:100%;
            max-height:480px;
            display:block;
            background:#000;
        }
        .tool-btn-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .tool-slider-row{
            display:flex;
            align-items:center;
            gap:10px;
            background:#10151e;
            border:1px solid #2b3340;
            border-radius:10px;
            padding:10px;
        }
        .tool-slider-row input[type="range"]{
            flex:1;
        }
        .snapshot-flash{
            position:absolute;
            inset:0;
            background:rgba(255,255,255,.8);
            pointer-events:none;
            animation:flashShot .36s ease-out forwards;
            z-index:12;
        }
        @keyframes flashShot{
            0%{ opacity:0; }
            20%{ opacity:.95; }
            100%{ opacity:0; }
        }

    
        /* --- Scrollbar polish (matches dark + accent theme) --- */
        /* Firefox */
        * { scrollbar-width: thin; scrollbar-color: rgba(0,255,204,0.35) rgba(255,255,255,0.04); }
        /* WebKit (Chrome/Safari/Edge) */
        *::-webkit-scrollbar { width: 10px; height: 10px; }
        *::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }
        *::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(0,255,204,0.35), rgba(0,255,204,0.18));
            border: 2px solid rgba(0,0,0,0.6);
            border-radius: 999px;
        }
        *::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(0,255,204,0.55), rgba(0,255,204,0.28));
        }
        *::-webkit-scrollbar-corner { background: transparent; }

    
        /* Collapsible sections */
        .collapse-header{
            display:flex; align-items:center; gap:10px;
            cursor:pointer; user-select:none;
        }
        .collapse-header .collapse-icon{
            margin-left:auto; opacity:0.7; transition:transform 0.18s ease;
        }
        .collapsible.open .collapse-header .collapse-icon{ transform:rotate(90deg); }
        .collapse-body.collapsed{ display:none; }
        .collapse-body{ margin-top:10px; }
        .asset-group{ display:none !important; }

        /* Sticky bottom generation panel inside editor */
        .editor-footer-sticky{
            position: sticky;
            bottom: 0;
            z-index: 80;
            background: linear-gradient(180deg, rgba(15,15,15,0.0) 0%, rgba(15,15,15,0.85) 20%, rgba(15,15,15,0.98) 55%, rgba(15,15,15,1) 100%);
            padding-top: 12px;
            padding-bottom: 14px;
            border-top: 1px solid #222;
            margin-top: 16px;
        
            margin-top: auto;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
}
        .editor-footer-sticky .btn-danger{ margin-bottom: 12px; }
        .gen-panel{
            width:100%;
            background: var(--bg-panel);
            border: 1px solid #333;
            border-radius: 10px;
            padding: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }
        .gen-panel .sync-grid{ scrollbar-width: thin; }

        /* Global preview scroll */
        #view-preview{
            overflow-y:auto;
            overflow-x:visible;
            -webkit-overflow-scrolling: touch;
            padding-right: 10px;
        }

        /* Novel To Video Studio (标准模式，嵌入 script 页面) */
        .n2v-wrap{
            margin-top:16px;
            border:1px solid #333;
            border-radius:12px;
            background:#0f0f10;
            padding:14px;
            display:flex;
            flex-direction:column;
            gap:10px;
            min-height:0;
        }
        .n2v-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .n2v-head h3{
            color:var(--accent);
            font-size:16px;
        }
        .n2v-status{
            color:#8b8b8f;
            font-size:12px;
        }
        .n2v-actions{
            display:grid;
            grid-template-columns:minmax(260px,1fr) repeat(3,auto);
            gap:8px;
            align-items:center;
        }
        .n2v-proxy-card{
            border:1px solid #2b3647;
            border-radius:10px;
            background:#101722;
            padding:9px 10px;
        }
        .n2v-proxy-line{
            display:flex;
            gap:8px;
            align-items:stretch;
            flex-wrap:wrap;
        }
        .n2v-proxy-line label{
            display:flex;
            align-items:center;
            gap:6px;
            font-size:12px;
            color:#a0adbf;
            white-space:nowrap;
        }
        .n2v-proxy-line input[type="checkbox"]{
            width:auto;
        }
        .n2v-proxy-line input[type="text"]{
            flex:1;
            min-width:240px;
        }
        .n2v-proxy-line textarea{
            flex:1;
            min-width:240px;
            min-height:68px;
            resize:vertical;
            line-height:1.45;
            background:#141d2a;
            border:1px solid #334258;
            color:#d4deec;
            border-radius:8px;
            padding:8px 10px;
        }
        .n2v-proxy-side{
            min-width:210px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            align-items:flex-end;
            gap:8px;
        }
        .n2v-proxy-toggle{
            padding:6px 8px;
            border:1px solid #33465f;
            border-radius:8px;
            background:#121b2a;
        }
        .n2v-proxy-hint{
            font-size:11px;
            color:#6f809a;
            text-align:right;
            line-height:1.4;
            max-width:230px;
        }
        .n2v-proxy-check-row{
            border:1px solid #2f3744;
            border-radius:8px;
            padding:8px;
            margin-bottom:8px;
            background:#111721;
        }
        .n2v-proxy-check-row.ok{
            border-color:#2f6f5a;
            background:#0f1c1a;
        }
        .n2v-proxy-check-row.fail{
            border-color:#5d3131;
            background:#1b1414;
        }
        .n2v-proxy-check-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            margin-top:4px;
            color:#8ca0b9;
            font-size:11px;
        }
        .n2v-grid{
            display:grid;
            grid-template-columns:minmax(190px,0.65fr) minmax(220px,0.9fr) minmax(320px,1.35fr);
            gap:10px;
            min-height:260px;
        }
        .n2v-book-row{
            border:1px solid #2f3744;
            border-radius:8px;
            background:#111721;
            padding:8px;
            margin-bottom:8px;
            cursor:pointer;
        }
        .n2v-book-row.active{
            border-color:var(--accent);
            background:rgba(0,255,204,0.08);
        }
        .n2v-book-title{
            color:#d7e1ef;
            font-size:13px;
            line-height:1.45;
            font-weight:600;
            word-break:break-word;
        }
        .n2v-book-meta{
            margin-top:4px;
            color:#7f8ea6;
            font-size:11px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
        }
        .n2v-chip{
            display:inline-flex;
            align-items:center;
            gap:4px;
            padding:1px 8px;
            border-radius:999px;
            border:1px solid #32506f;
            background:#13283d;
            color:#9fd0ff;
            font-size:11px;
            margin-left:6px;
            white-space:nowrap;
        }
        .n2v-box{
            border:1px solid #2f2f33;
            border-radius:8px;
            background:#121214;
            padding:10px;
            min-height:0;
            overflow:auto;
        }
        .n2v-item{
            border:1px solid #333;
            border-radius:8px;
            background:#0f0f10;
            padding:10px;
            margin-bottom:8px;
        }
        .n2v-item.active{
            border-color:var(--accent);
            background:rgba(0,255,204,0.06);
        }
        .n2v-story{
            max-height:190px;
            overflow:auto;
        }
        .n2v-story-item{
            border-bottom:1px dashed #2e2e31;
            padding:6px 0;
            color:#aaa;
            font-size:12px;
            cursor:pointer;
        }
        .n2v-story-item:last-child{ border-bottom:none; }
        .n2v-fetch-row{
            border:1px solid #2f3744;
            border-radius:8px;
            padding:8px;
            margin-bottom:8px;
            background:#111721;
        }
        .n2v-fetch-progress{
            height:6px;
            background:#1b2432;
            border-radius:999px;
            overflow:hidden;
            margin-top:6px;
        }
        .n2v-fetch-progress > i{
            display:block;
            height:100%;
            background:linear-gradient(90deg,#3ddc97,#00ffd0);
            width:0;
            transition:width .2s ease;
        }
        @media (max-width: 1100px){
            .n2v-actions{ grid-template-columns:1fr 1fr; }
            .n2v-grid{ grid-template-columns:1fr; }
        }