/* ================= 一级界面原有样式 (绝对保持不变) ================= */
        body { background-color: #121212; user-select: none; font-family: "Microsoft YaHei", sans-serif; }
        * { -webkit-tap-highlight-color: transparent; }
        button { touch-action: manipulation; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .dragging { opacity: 0.5; border: 2px dashed #3b82f6; transform: scale(0.95); }
        .project-card { transition: transform 0.2s, box-shadow 0.2s; }
        .project-card:not(.locked):hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 10; }
        .locked { filter: grayscale(100%) brightness(0.6); pointer-events: none; }
        .locked .menu-btn, .locked .menu-dropdown { pointer-events: auto !important; }
        .locked .menu-btn { cursor: pointer; filter: brightness(1.5); }
        .style-card.active { border-color: #3b82f6; box-shadow: inset 0 0 0 2px #3b82f6; }
        .style-card.active .checkmark { display: flex; }
        .shake { animation: shake 0.5s; border-color: #ef4444 !important; }
        @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

        /* ================= 二级界面新增样式 (Level 2) ================= */
        
        /* 视图切换辅助 */
        #view-dashboard, #view-editor, #view-login { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; transition: opacity 0.3s; }
        .hidden-view { display: none !important; opacity: 0; pointer-events: none; }
        #view-login { z-index: 250; display: flex; align-items: center; justify-content: center; background: #0d0e10; }
        #view-login.hidden-view { display: none !important; }
        #view-login .login-card { width: min(440px, calc(100vw - 32px)); background: #1c1d1f !important; border: 1px solid #333638 !important; border-radius: 12px !important; padding: 28px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
        #view-login .login-brand { text-align: center; margin-bottom: 18px; }
        #view-login .login-brand img { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 8px; }
        #view-login .login-title { color: #ffffff !important; font-size: 20px; font-weight: 800; letter-spacing: 0; }
        #view-login .login-sub { color: #8d9396; font-size: 12px; margin-top: 4px; }
        #view-login .login-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
        #view-login .login-tab { height: 38px; border: 1px solid #3a3d3f !important; border-radius: 8px !important; background: #232426 !important; color: #aeb3b5 !important; font-size: 13px; font-weight: 700; cursor: pointer; }
        #view-login .login-tab.active { border-color: #16b678 !important; background: #144b39 !important; color: #ffffff !important; }
        #view-login .auth-panel { display: grid; gap: 12px; }
        #view-login .auth-panel.hidden { display: none; }
        #view-login label { display: block; color: #aeb3b5; font-size: 12px; font-weight: 700; }
        #view-login input { width: 100%; height: 42px; margin-top: 6px; padding: 0 12px; border: 1px solid #3d4042 !important; border-radius: 7px !important; background: #151617 !important; color: #e8e8e8 !important; outline: none; font-size: 14px; }
        #view-login input:focus { border-color: #58a9cf !important; }
        #view-login .auth-code-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: end; }
        #view-login .auth-submit { height: 44px; border: 0 !important; border-radius: 8px !important; background: #16b678 !important; color: #ffffff !important; font-size: 14px; font-weight: 800; cursor: pointer; }
        #view-login .auth-submit:hover { background: #12a368 !important; }
        #view-login .auth-submit.ghost { background: #2d7899 !important; }
        #view-login .auth-submit.ghost:hover { background: #256b8a !important; }
        #view-login .auth-switch { border: 0 !important; background: transparent !important; color: #58a9cf !important; font-size: 12px; font-weight: 700; cursor: pointer; }
        #view-login .auth-message { min-height: 20px; margin-top: 10px; text-align: center; color: #8d9396; font-size: 12px; line-height: 1.5; }
        #view-login .auth-message.error { color: #e2a7a7; }
        #view-login .auth-message.ok { color: #8fd6b5; }
        #view-login .auth-qr-box { height: 210px; border: 1px dashed #3d4042; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #101112; }
        #view-login .auth-qr-grid { display: grid; grid-template-columns: repeat(21, 1fr); gap: 1px; padding: 10px; width: 210px; }
        #view-login .auth-qr-grid i { aspect-ratio: 1; border-radius: 1px; background: #dfe3e4; }
        #view-login .auth-qr-grid i.off { background: transparent; }
        #view-login .auth-wechat-status { text-align: center; color: #aeb3b5; font-size: 12px; min-height: 18px; }
        #view-login .auth-note { color: #7b8285; font-size: 11px; line-height: 1.6; }
        .brand-logo {
            width: 168px;
            height: 37px;
            object-fit: cover;
            display: block;
        }
        .editor-brand-logo {
            width: 82px;
            height: 18px;
            object-fit: cover;
            display: block;
            opacity: 0.96;
        }
        .editor-project-chip {
            max-width: 280px;
            color: #d8d8d8;
            font-size: 13px;
            font-weight: 700;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #1e1e1e; }
        ::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        /* 拖拽调整宽度的把手 */
        #resizer { width: 4px; cursor: col-resize; background-color: #111; transition: background 0.2s; z-index: 50; }
        #resizer:hover, #resizer.resizing { background-color: #3b82f6; }

        /* 镜头表网格布局: 镜号|内容|演员|场景|道具|首帧|尾帧|视频 */
        .shot-header, .shot-row { 
            display: grid; 
            grid-template-columns: 50px 3fr 1fr 1fr 1fr 0.8fr 0.8fr 1.2fr; 
            gap: 1px; 
            background-color: #333; 
        }
        .shot-row { border-bottom: 1px solid #2a2a2a; }
        .shot-cell { background-color: #1e1e1e; padding: 6px; font-size: 12px; display: flex; align-items: center; overflow: hidden; min-height: 100px; position: relative; flex-wrap: wrap; content-visibility: auto; }
        .shot-header .shot-cell { background-color: #252526; font-weight: bold; color: #9ca3af; justify-content: center; min-height: 32px; align-items: center; }
        
        /* 拖拽验证的高亮样式 */
        .drag-valid-target { background-color: rgba(59, 130, 246, 0.15) !important; border: 2px dashed #3b82f6; }
        
        /* 大纲联动高亮 */
        .shot-row.highlighted .shot-cell { background-color: #26262b; } /* 选中某集时的高亮底色 */
        
        /* 行间插入按钮 */
        .shot-wrapper { position: relative; }
        .insert-trigger { height: 12px; position: absolute; left: 0; right: 0; bottom: -6px; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
        .insert-trigger:hover { opacity: 1; }
        .insert-line { height: 2px; width: 100%; background-color: #3b82f6; }
        .insert-icon { width: 20px; height: 20px; background-color: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; position: absolute; }

        /* 侧边栏Tab */
        .tab-btn.active { color: white; border-bottom: 2px solid #3b82f6; background-color: #252526; }
        .asset-tab.active { color: #60a5fa; font-weight: bold; border-bottom: 2px solid #60a5fa; }
        .outline-item.active { background-color: #2d2d30; border-left: 3px solid #3b82f6; }

        /* API 设置窗口专用样式 */
        .api-tab-btn { text-align: left; padding: 10px 15px; font-size: 13px; color: #9ca3af; border-left: 3px solid transparent; }
        .api-tab-btn:hover { background-color: #2a2a2d; color: white; }
        .api-tab-btn.active { background-color: #252526; color: #3b82f6; border-left-color: #3b82f6; font-weight: bold; }
        .workspace-tab.active { color: white; background-color: #2d7899; border-color: #58a9cf; }
        .workspace-panel { display: none; }
        .workspace-panel.active { display: flex; }
        .editor-titlebar { height: 38px; background: #3b3c3c !important; color: #d8d8d8; border-bottom: 1px solid #1f2020; }
        .editor-shell { background: #2f3030 !important; color: #d8d8d8; }
        @property --module-rgb {
            syntax: "<color>";
            inherits: true;
            initial-value: #16b678;
        }
        @property --module-rgb-dark {
            syntax: "<color>";
            inherits: true;
            initial-value: #0b7f53;
        }
        @property --module-rgb-soft {
            syntax: "<color>";
            inherits: true;
            initial-value: rgba(22,182,120,0.14);
        }
        @property --module-rgb-mid {
            syntax: "<color>";
            inherits: true;
            initial-value: rgba(22,182,120,0.55);
        }
        @property --module-rgb-clear {
            syntax: "<color>";
            inherits: true;
            initial-value: rgba(22,182,120,0);
        }
        @keyframes moduleRgbBreath {
            0%, 100% {
                --module-rgb: #16b678;
                --module-rgb-dark: #0b7f53;
                --module-rgb-soft: rgba(22,182,120,0.14);
                --module-rgb-mid: rgba(22,182,120,0.55);
                --module-rgb-clear: rgba(22,182,120,0);
            }
            25% {
                --module-rgb: #23a8f2;
                --module-rgb-dark: #12658f;
                --module-rgb-soft: rgba(35,168,242,0.14);
                --module-rgb-mid: rgba(35,168,242,0.55);
                --module-rgb-clear: rgba(35,168,242,0);
            }
            50% {
                --module-rgb: #8b68ff;
                --module-rgb-dark: #5630b8;
                --module-rgb-soft: rgba(139,104,255,0.14);
                --module-rgb-mid: rgba(139,104,255,0.55);
                --module-rgb-clear: rgba(139,104,255,0);
            }
            75% {
                --module-rgb: #ff4f8b;
                --module-rgb-dark: #9c2853;
                --module-rgb-soft: rgba(255,79,139,0.14);
                --module-rgb-mid: rgba(255,79,139,0.55);
                --module-rgb-clear: rgba(255,79,139,0);
            }
        }
        .module-dock { height: 100%; background: transparent !important; border-bottom: 0; padding-top: 2px; overflow: visible; gap: 6px; }
        .module-btn { height: 30px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #c8ccd0; font-size: 12px; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; position: relative; }
        .module-btn:hover { background: rgba(255,255,255,.07); color: #ffffff; }
        .module-btn.active { height: 18px; min-width: 64px; background: #f4d98a; color: #4a3f2a; border-radius: 6px; box-shadow: none; transform: none; animation: none; }
        .module-btn.active::before,
        .module-btn.active::after { display: none; }
        .module-icon { display: none; }
        .module-label { margin-top: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; position: relative; z-index: 1; background: transparent !important; }
        .light-panel { background: #252626 !important; color: #d8d8d8; border: 0; align-items: stretch; justify-content: stretch; padding: 0; box-shadow: none; }
        .workspace-panel.active {
            flex: 1 1 auto !important;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: #252626 !important;
            border: 0;
            box-shadow: none;
            overflow: hidden;
        }

        /* ================= Maya 风格主题覆盖 ================= */
        :root {
            --maya-bg: #2f3030;
            --maya-panel: #3b3c3c;
            --maya-panel-dark: #292a2a;
            --maya-panel-soft: #454646;
            --maya-border: #1f2020;
            --maya-border-light: #555757;
            --maya-text: #d8d8d8;
            --maya-muted: #9fa3a6;
            --maya-accent: #58a9cf;
            --maya-accent-dark: #2d7899;
            --maya-field: #252626;
        }
        body {
            background: var(--maya-bg) !important;
            color: var(--maya-text);
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        #view-dashboard,
        #view-editor {
            background: var(--maya-bg) !important;
        }
        header,
        aside,
        #left-sidebar,
        .bg-\[\#18181b\],
        .bg-\[\#1e1e1e\],
        .bg-\[\#202023\],
        .bg-\[\#252526\],
        .bg-\[\#27272a\],
        .bg-\[\#2a2a2d\] {
            background-color: var(--maya-panel) !important;
        }
        .border-\[\#111\],
        .border-\[\#2a2a2a\],
        .border-\[\#333\],
        .border-\[\#444\] {
            border-color: var(--maya-border) !important;
        }
        .text-blue-300,
        .text-blue-400,
        .text-blue-500,
        .text-purple-400 {
            color: var(--maya-accent) !important;
        }
        .bg-blue-600,
        .bg-purple-600,
        .bg-gradient-to-tr {
            background: var(--maya-accent-dark) !important;
            background-image: none !important;
        }
        .hover\:bg-blue-500:hover,
        .hover\:bg-purple-500:hover {
            background-color: var(--maya-accent) !important;
        }
        button,
        input,
        textarea,
        select,
        .project-card,
        .new-project-card,
        .menu-dropdown,
        .rounded,
        .rounded-lg,
        .rounded-xl,
        .rounded-2xl,
        .rounded-full {
            border-radius: 2px !important;
        }
        button {
            box-shadow: none !important;
        }
        input,
        textarea,
        select {
            background: var(--maya-field) !important;
            border-color: var(--maya-border-light) !important;
            color: var(--maya-text) !important;
        }
        input:focus,
        textarea:focus {
            border-color: var(--maya-accent) !important;
        }
        .project-card {
            background: var(--maya-panel-dark) !important;
            border-color: var(--maya-border) !important;
            box-shadow: none !important;
        }
        .project-card:not(.locked):hover {
            transform: none;
            border-color: var(--maya-accent) !important;
            box-shadow: none;
        }
        .new-project-card {
            background: var(--maya-panel-dark) !important;
            border-color: var(--maya-border-light) !important;
        }
        .new-project-card:hover {
            background: var(--maya-panel-soft) !important;
            border-color: var(--maya-accent) !important;
        }
        #view-dashboard button {
            border-radius: 8px !important;
        }
        #view-dashboard input {
            border-radius: 8px !important;
        }
        #view-dashboard .rounded-full {
            border-radius: 999px !important;
        }
        #view-dashboard .project-card,
        #view-dashboard .new-project-card {
            border-radius: 14px !important;
        }
        #confirm-enter-modal > div {
            border-radius: 14px !important;
            background: rgba(37,37,38,.85) !important;
        }
        #confirm-enter-modal button {
            border-radius: 8px !important;
        }
        #view-dashboard .project-card {
            transition: transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s ease, border-color .25s ease;
        }
        #view-dashboard .project-card:not(.locked):hover {
            transform: scale(1.035) translateY(-4px);
            box-shadow: 0 14px 30px rgba(0,0,0,.42);
        }
        .shot-header,
        .shot-row {
            background: var(--maya-border) !important;
        }
        .shot-cell,
        .shot-header .shot-cell {
            background-color: var(--maya-panel) !important;
        }
        .shot-row.highlighted .shot-cell {
            background-color: #404141 !important;
        }
        .tab-btn.active,
        .asset-tab.active,
        .outline-item.active,
        .api-tab-btn.active {
            color: var(--maya-accent) !important;
            border-color: var(--maya-accent) !important;
            background-color: var(--maya-panel-dark) !important;
        }
        #resizer,
        #resizer:hover,
        #resizer.resizing,
        .insert-line,
        .insert-icon {
            background-color: var(--maya-accent) !important;
        }
        #new-project-modal > div,
        #api-modal > div,
        #gallery-modal > div,
        #confirm-enter-modal > div,
        #password-modal > div {
            background: var(--maya-panel) !important;
            border-color: var(--maya-border) !important;
            box-shadow: none !important;
            border-radius: 2px !important;
        }
        #confirm-enter-modal > div {
            border-radius: 14px !important;
        }
        #confirm-enter-modal button {
            border-radius: 8px !important;
        }
        #new-project-modal .bg-\[\#101014\] {
            background: var(--maya-panel-dark) !important;
            box-shadow: none !important;
        }
        .shadow-\[0_0_30px_rgba\(59\,130\,246\,0\.08\)\] {
            box-shadow: none !important;
        }
        #view-editor.editor-shell,
        #view-editor .editor-titlebar,
        #view-editor .module-dock,
        #view-editor .light-panel,
        #view-editor .workspace-panel {
            background: var(--maya-bg) !important;
            color: var(--maya-text) !important;
        }
        #view-editor.canvas-float-menu .editor-titlebar {
            position: absolute;
            top: 8px;
            left: 0;
            right: 0;
            z-index: 60;
            background: transparent !important;
            border: 0 !important;
            border-bottom: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
        }
        #view-editor.canvas-float-menu .module-dock {
            border-bottom: 0 !important;
        }
        #view-editor.canvas-float-menu .editor-titlebar button {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }
        #view-editor .module-btn {
            background: transparent !important;
            color: #c8ccd0 !important;
            border: 0 !important;
            border-radius: 8px !important;
            height: 30px;
            min-width: 64px;
            padding: 0 12px;
            font-size: 12px;
        }
        #view-editor .module-btn:hover {
            background: rgba(255,255,255,.07) !important;
            color: #ffffff !important;
        }
        #view-editor .module-btn.active {
            background: #f4d98a !important;
            color: #4a3f2a !important;
            border-radius: 6px !important;
            border: 0 !important;
            box-shadow: none !important;
            transform: none !important;
        }
        #view-editor.canvas-float-menu .module-btn.active {
            animation: none !important;
            background: #f4d98a !important;
            border: 0 !important;
            border-radius: 6px !important;
            color: #4a3f2a !important;
            box-shadow: none !important;
            transform: none !important;
        }
        #view-editor.canvas-float-menu .module-btn.active::before,
        #view-editor.canvas-float-menu .module-btn.active::after {
            display: none !important;
        }
        #view-editor.canvas-float-menu .module-dock {
            height: auto;
            align-self: center;
            background: #3a3a3a !important;
            border: 1px solid #4a4a4a !important;
            border-bottom: 1px solid #4a4a4a !important;
            border-radius: 10px !important;
            padding: 4px 8px;
            overflow: visible !important;
            gap: 4px !important;
        }
        #view-editor .light-panel {
            border: 0 !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            padding: 0 !important;
            margin: 0 !important;
            background: var(--maya-field) !important;
            box-shadow: none !important;
        }
        #view-editor .workspace-panel.active {
            flex: 1 1 auto !important;
            width: 100% !important;
            height: 100% !important;
            background: var(--maya-field) !important;
            border: 0 !important;
            box-shadow: none !important;
            overflow: hidden !important;
        }
        #view-editor .workspace-panel textarea,
        #view-editor .workspace-panel select {
            background: #202121 !important;
            color: var(--maya-text) !important;
            border-color: var(--maya-border-light) !important;
        }
        #view-editor .workspace-panel .bg-\[\#202023\],
        #view-editor .workspace-panel .bg-\[\#252526\],
        #view-editor .workspace-panel .bg-\[\#1e1e1e\] {
            background: #303131 !important;
        }
        #view-editor .workspace-panel .text-white,
        #view-editor .workspace-panel .text-\[\#222\] {
            color: var(--maya-text) !important;
        }
        #view-editor .workspace-panel .text-gray-300,
        #view-editor .workspace-panel .text-gray-400,
        #view-editor .workspace-panel .text-gray-500,
        #view-editor .workspace-panel .text-gray-600 {
            color: var(--maya-muted) !important;
        }
        #view-editor .global-stage {
            background: #252626 !important;
            padding: 22px;
            overflow: auto;
        }
        #view-editor .global-floating-panel {
            width: min(1180px, calc(100vw - 72px));
            margin: 0 auto;
            background: #303131 !important;
            border: 1px solid #151616;
            box-shadow: 0 18px 42px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
            border-radius: 10px !important;
            overflow: hidden;
        }
        #view-editor .global-panel-head,
        #view-editor .global-section-title {
            background: #383939 !important;
            border-bottom: 1px solid #1f2020;
        }
        #view-editor .global-readonly,
        #view-editor .global-keywords {
            background: #242525 !important;
            border: 1px solid #444646 !important;
            border-radius: 6px !important;
            color: #d8d8d8 !important;
        }
        #view-editor .team-tab {
            height: 28px;
            padding: 0 12px;
            border-radius: 6px;
            border: 1px solid #4a4d4f;
            background: #272929;
            color: #c8cccf;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
        }
        #view-editor .team-tab:hover {
            background: #343737;
            color: #ffffff;
        }
        #view-editor .team-tab.active {
            border-color: #c08a2a;
            background: #3a2d19;
            color: #ffd37a;
        }
        #view-editor .team-btn {
            height: 28px;
            padding: 0 12px;
            border-radius: 6px;
            border: 1px solid rgba(227,201,141,.7);
            background: rgba(227,201,141,.14);
            color: #e3c98d;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            transition: background .18s ease, transform .18s ease;
        }
        #view-editor .team-btn:hover {
            background: rgba(227,201,141,.26);
            transform: translateY(-1px);
        }
        #view-editor .global-page-tab {
            height: 40px;
            padding: 0 30px;
            border-radius: 999px !important;
            border: 1px solid rgba(227,201,141,.55);
            background: rgba(227,201,141,.12);
            color: #e3c98d;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: background .18s ease, transform .18s ease;
        }
        #view-editor .global-page-tab:hover {
            background: rgba(227,201,141,.26);
            transform: translateY(-1px);
        }
        #view-editor .global-page-tab.active {
            background: rgba(227,201,141,.32);
            border-color: #e3c98d;
            color: #fff3d1;
        }
        #view-editor .ratio-grid,
        #view-editor .style-grid,
        #view-editor .stat-grid {
            display: grid;
            gap: 8px;
        }
        #view-editor .ratio-grid {
            grid-template-columns: repeat(6, minmax(70px, 1fr));
        }
        #view-editor .style-grid {
            grid-template-columns: repeat(4, minmax(120px, 1fr));
        }
        #view-editor .stat-grid {
            grid-template-columns: repeat(6, minmax(90px, 1fr));
        }
        #view-editor .ratio-option,
        #view-editor .style-option,
        #view-editor .stat-card {
            background: #262727 !important;
            border: 1px solid #3e4040 !important;
            border-radius: 8px !important;
            color: #c8cccf !important;
        }
        #view-editor .ratio-option,
        #view-editor .style-option {
            min-height: 62px;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        #view-editor .ratio-option:hover,
        #view-editor .style-option:hover {
            background: #343636 !important;
            border-color: #5d6060 !important;
            color: #ffffff !important;
        }
        #view-editor .ratio-option.active,
        #view-editor .style-option.active {
            background: #3b4d48 !important;
            border-color: #16b678 !important;
            color: #ffffff !important;
            box-shadow: inset 0 0 0 1px rgba(22,182,120,0.28);
        }
        #view-editor .global-lock-btn {
            width: 24px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #242525 !important;
            border: 1px solid #555757 !important;
            border-radius: 6px !important;
            color: #9fa3a6 !important;
        }
        #view-editor .global-lock-btn.locked {
            color: #16b678 !important;
            border-color: #16b678 !important;
            background: #21332e !important;
        }
        #view-editor .global-lock-btn svg {
            width: 13px;
            height: 13px;
        }
        #view-editor .global-locked {
            opacity: 0.58;
        }
        #view-editor .global-locked textarea,
        #view-editor textarea:disabled {
            cursor: not-allowed;
        }
        #view-editor .ratio-icon {
            width: 22px;
            height: 16px;
            border: 2px solid currentColor;
            border-radius: 3px;
            opacity: 0.9;
        }
        #view-editor .stat-card {
            min-height: 74px;
            padding: 12px;
        }
        #view-editor .stat-value {
            font-size: 24px;
            line-height: 1;
            font-weight: 800;
            color: #f1f3f3;
        }
        #view-editor .asset-workspace {
            display: grid;
            grid-template-columns: 1fr;
            min-height: 0;
            background: var(--maya-bg) !important;
        }
        #view-editor .workspace-panel:not(.active),
        #view-editor .asset-workspace:not(.active) {
            display: none !important;
        }
        #view-editor .workspace-panel.active:not(.asset-workspace) {
            display: flex !important;
        }
        #view-editor .asset-workspace.active {
            display: grid !important;
        }
        #view-editor .asset-rail {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 7;
            width: 0;
            overflow: visible;
            background: transparent;
            border: 0;
            pointer-events: none;
        }
        #view-editor #workspace-chapter {
            position: relative;
        }
        #view-editor .asset-rail-stack {
            position: static;
            display: grid;
            gap: 12px;
        }
        #view-editor .asset-rail-btn {
            position: relative;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 0;
            border-radius: 999px !important;
            background: transparent !important;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            box-shadow: none;
            transition: background .14s, border-color .14s, transform .14s;
        }
        #view-editor .asset-rail-btn svg {
            width: 22px;
            height: 22px;
            display: block;
        }
        #view-editor .asset-rail-count {
            position: absolute;
            left: calc(100% + 6px);
            top: 50%;
            transform: translateY(-50%);
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            opacity: 0;
            pointer-events: none;
            transition: opacity .14s;
        }
        #view-editor .asset-rail-btn.active .asset-rail-count {
            opacity: 1;
        }
        #view-editor .asset-rail-btn:hover {
            background: rgba(255,255,255,.08) !important;
            transform: scale(1.06);
        }
        #view-editor .asset-rail-btn.active {
            background: rgba(255,255,255,.16) !important;
            box-shadow: 0 0 14px rgba(255,255,255,.28) !important;
        }
        #view-editor .asset-main {
            min-width: 0;
            min-height: 0;
            flex: 1 1 auto;
            width: 100%;
            padding-left: 76px;
            display: flex;
            flex-direction: column;
            background: transparent;
        }
        #view-editor .asset-toolbar {
            height: 42px;
            border-bottom: 0;
            background: transparent;
        }
        #view-editor .asset-grid-panel {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 16px;
        }
        #view-editor .asset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
            gap: 12px;
            align-content: start;
        }
        #view-editor .asset-create-tile,
        #view-editor .asset-card {
            aspect-ratio: 1;
            border-radius: 6px;
            min-width: 0;
        }
        #view-editor .asset-create-tile {
            background: #2b2c2c;
            border: 1px dashed #575b5d;
            color: #8d9396;
        }
        #view-editor .asset-create-tile:hover {
            border-color: #58a9cf;
            color: #dceff7;
            background: #303839;
        }
        #view-editor .asset-card {
            background: #292a2a;
            border: 1px solid #464949;
        }
        #view-editor .asset-card:hover {
            border-color: #58a9cf;
        }
        #view-editor .asset-card.selected {
            border: 2px solid #e8c46a !important;
            box-shadow: 0 0 0 1px rgba(232,196,106,.35), 0 0 14px rgba(232,196,106,.35);
        }
        .asset-marquee {
            position: fixed;
            z-index: 300;
            border: 1px solid #e8c46a;
            background: rgba(232,196,106,.12);
            pointer-events: none;
            display: none;
        }
        #asset-batch-bar {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 260;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 18px;
            background: #252729;
            border: 1px solid #4a5055;
            border-radius: 12px !important;
            box-shadow: 0 12px 30px rgba(0,0,0,.45);
            color: #ffffff;
            font-size: 14px;
        }
        #asset-batch-bar.hidden {
            display: none !important;
        }
        #asset-batch-bar button {
            height: 34px;
            padding: 0 16px;
            border-radius: 8px !important;
            font-size: 13px;
            cursor: pointer;
        }
        #asset-batch-bar .del {
            background: #c0392b;
            color: #ffffff;
            border: 0;
        }
        #asset-batch-bar .del:hover {
            background: #d64535;
        }
        #asset-batch-bar .cancel {
            background: #333;
            color: #cccccc;
            border: 1px solid #4a5055;
        }
        #asset-batch-bar .cancel:hover {
            background: #404040;
        }
        #view-editor .asset-card.audio-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #view-editor .asset-audio-thumb {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #202426;
            color: #9fb3bd;
            padding: 10px 10px 4px;
        }
        #view-editor .asset-audio-thumb svg {
            width: 34px;
            height: 34px;
            display: block;
        }
        #view-editor .asset-audio-player {
            width: 100%;
            height: 34px;
            display: block;
        }
        #view-editor .asset-audio-name {
            padding: 4px 6px;
            color: #d8dde0;
            font-size: 10px;
            background: #242627;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #view-editor .script-workbench {
            display: grid;
            grid-template-columns: var(--script-col-1, 300px) 6px var(--script-col-2, 360px) 6px minmax(0, 1fr);
            min-height: 0;
            background: #2f3030;
        }
        #view-editor .script-resizer {
            width: 6px;
            cursor: col-resize;
            background: transparent;
            z-index: 5;
        }
        #view-editor .script-resizer:hover,
        #view-editor .script-resizer.resizing {
            background: rgba(88,169,207,.35);
        }
        #view-editor .script-column {
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #171818;
            background: #303131;
        }
        #view-editor .script-column:last-child {
            border-right: 0;
        }
        #view-editor .script-panel-title {
            height: 34px;
            padding: 0 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #171818;
            background: #3a3b3b;
            color: #d6dada;
            font-size: 12px;
            font-weight: 800;
        }
        #view-editor .script-stage-list {
            padding: 12px;
            display: grid;
            gap: 10px;
            overflow: auto;
        }
        #view-editor .script-stage-card {
            min-height: 94px;
            padding: 10px;
            border: 1px solid #454848;
            border-radius: 7px;
            background: #292a2a;
            color: #aeb5b8;
            text-align: left;
            cursor: pointer;
        }
        #view-editor .script-stage-card:hover {
            border-color: #5c6265;
            background: #303232;
            color: #e6eeee;
        }
        #view-editor .script-stage-card.active {
            border-color: #2d7899;
            background: #243840;
            box-shadow: inset 3px 0 0 #58a9cf;
            color: #ffffff;
        }
        #view-editor .script-stage-lock-btn {
            width: 26px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid #505454;
            background: #202121;
            color: #9fa6a9;
            font-size: 13px;
            line-height: 1;
        }
        #view-editor .script-stage-lock-btn.locked {
            border-color: #c08a2a;
            background: #3a2d19;
            color: #ffd37a;
        }
        #view-editor #storyboard-output.locked-output {
            color: #8f9699;
            background: #202121;
        }
        #view-editor .script-status-pill {
            min-width: 52px;
            height: 20px;
            padding: 0 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #202121;
            border: 1px solid #4b4d4d;
            color: #9ca3a6;
            font-size: 10px;
            font-weight: 800;
        }
        #view-editor .script-status-pill.pass {
            color: #b5f5d6;
            border-color: #16b678;
            background: #1d332b;
        }
        #view-editor .script-status-pill.running {
            color: #d6efff;
            border-color: #58a9cf;
            background: #20303a;
        }
        #view-editor .script-stage-meta {
            color: #8f979a;
            font-size: 11px;
            line-height: 1.55;
        }
        #view-editor .script-toolbar-btn {
            height: 28px;
            padding: 0 10px;
            border-radius: 6px;
            border: 1px solid #4a4d4f;
            background: #272929;
            color: #c8cccf;
            font-size: 11px;
            font-weight: 800;
        }
        #view-editor .script-toolbar-btn:hover {
            background: #343737;
            color: #ffffff;
            border-color: #626769;
        }
        #view-editor .script-toolbar-btn.primary {
            background: #2d7899;
            border-color: #58a9cf;
            color: #ffffff;
        }
        #view-editor .script-run-btn {
            height: 28px;
            padding: 0 10px;
            border-radius: 999px !important;
            border: 1px solid rgba(227,201,141,.7);
            background: rgba(227,201,141,.14);
            color: #e3c98d;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            outline: none;
            appearance: none;
            transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        #view-editor .script-run-btn:hover {
            background: rgba(227,201,141,.26);
            border-color: #e3c98d;
            color: #fff3d1;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(227,201,141,.18);
        }
        #view-editor .script-capsule-btn {
            height: 24px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(227,201,141,.55);
            background: rgba(227,201,141,.12);
            color: #e3c98d;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            transition: background .18s ease, transform .18s ease;
        }
        #view-editor .script-capsule-btn:hover {
            background: rgba(227,201,141,.28);
            transform: translateY(-1px);
        }
        #view-editor .script-run-points {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #e3c98d;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        #view-editor .production-workspace {
            min-height: 0;
            background: #2f3030 !important;
        }
        #view-editor .production-toolbar {
            height: 42px;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid #171818;
            background: #3a3b3b;
        }
        #view-editor .production-title {
            color: #e1e4e4;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .production-subtitle {
            color: #8f979a;
            font-size: 11px;
        }
        #view-editor .tool-btn {
            height: 28px;
            padding: 0 10px;
            border: 1px solid #4a4d4f;
            border-radius: 6px !important;
            background: #272929;
            color: #c8cccf;
            font-size: 11px;
            font-weight: 800;
        }
        #view-editor .tool-btn:hover {
            background: #343737;
            color: #ffffff;
            border-color: #626769;
        }
        #view-editor .tool-btn.primary {
            background: #2d7899;
            border-color: #58a9cf;
            color: #ffffff;
        }
        #view-editor .team-board-layout {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: 260px minmax(0, 1fr) 320px;
            background: #2f3030;
        }
        #view-editor .team-column {
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #171818;
            background: #303131;
        }
        #view-editor .team-column:last-child {
            border-right: 0;
        }
        #view-editor .team-column-head {
            height: 34px;
            padding: 0 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #171818;
            background: #383939;
            color: #d6dada;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .pxx-list {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 10px;
            display: grid;
            align-content: start;
            gap: 8px;
        }
        #view-editor .pxx-card {
            min-height: 78px;
            padding: 9px;
            border: 1px solid #454848;
            border-radius: 7px !important;
            background: #292a2a;
            color: #aeb5b8;
            text-align: left;
        }
        #view-editor .pxx-card:hover {
            border-color: #5f6668;
            color: #ffffff;
        }
        #view-editor .pxx-card.active {
            border-color: #58a9cf;
            background: #243840;
            box-shadow: inset 3px 0 0 #58a9cf;
            color: #ffffff;
        }
        #view-editor .meta-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 20px;
            padding: 0 7px;
            border: 1px solid #4b4d4d;
            border-radius: 999px !important;
            background: #202121;
            color: #a6adb0;
            font-size: 10px;
            font-weight: 800;
            white-space: nowrap;
        }
        #view-editor .meta-pill.pass {
            color: #b5f5d6;
            border-color: #16b678;
            background: #1d332b;
        }
        #view-editor .meta-pill.warn {
            color: #ffd9a2;
            border-color: #9c6a2a;
            background: #3b2f1d;
        }
        #view-editor .story-editor {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            background: #252626;
        }
        #view-editor .story-form-grid {
            padding: 12px;
            display: grid;
            grid-template-columns: 120px 120px minmax(0, 1fr);
            gap: 10px;
            border-bottom: 1px solid #171818;
            background: #303131;
        }
        #view-editor .field-label {
            display: block;
            margin-bottom: 4px;
            color: #8f979a;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .story-editor textarea {
            width: 100%;
            height: 100%;
            min-height: 0;
            resize: none;
            padding: 12px;
            border: 0 !important;
            border-radius: 0 !important;
            font-size: 13px;
            line-height: 1.65;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        #view-editor .reference-card,
        #view-editor .canvas-node {
            border: 1px solid #454848;
            border-radius: 7px !important;
            background: #292a2a;
            color: #c8cccf;
        }
        #view-editor .reference-card {
            padding: 10px;
        }
        #view-editor .slot-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        #view-editor .ref-slot {
            min-height: 54px;
            border: 1px dashed #565b5d;
            background: #242626;
            color: #8f979a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            text-align: center;
            padding: 6px;
        }
        #view-editor .canvas-platform {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) var(--solo-width, 320px);
            background: #151719;
            border-top: 1px solid #111315;
        }
        #view-editor .canvas-platform.solo-collapsed {
            grid-template-columns: minmax(0, 1fr);
        }
        #view-editor .canvas-solo {
            position: relative;
            z-index: 70;
            min-height: 0;
            background: #232527;
            color: #cbd2d6;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            border-left: 1px solid #111315;
        }
        #view-editor .solo-resize-handle {
            position: absolute;
            z-index: 6;
            left: -4px;
            top: 0;
            bottom: 0;
            width: 8px;
            cursor: col-resize;
            background: transparent;
        }
        #view-editor .solo-resize-handle:hover {
            background: rgba(66, 150, 210, .22);
        }
        #view-editor .canvas-solo-head {
            min-height: 58px;
            padding: 12px;
            border-bottom: 1px solid #30353a;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        #view-editor .canvas-solo-title {
            color: #eef3f5;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .canvas-solo-subtitle {
            color: #7f8990;
            font-size: 11px;
            margin-top: 3px;
        }
        #view-editor .canvas-solo-body {
            min-height: 0;
            padding: 6px;
            overflow: auto;
            background: #232527;
        }
        #view-editor .canvas-solo-empty {
            border: 0;
            background: transparent;
            padding: 12px;
            color: #9fa9af;
            font-size: 12px;
            line-height: 1.7;
        }
        #view-editor .solo-message-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #view-editor .solo-message {
            height: auto !important;
            min-height: 25px !important;
            width: fit-content;
            max-width: 92%;
            border-radius: 14px !important;
            padding: 4px 10px !important;
            border: 0;
            color: #ffffff;
            background: #141414;
            font-size: 13px;
            line-height: 1.3;
            display: flex;
            align-items: center;
            white-space: pre-line;
            word-break: break-word;
            user-select: text;
        }
        #view-editor .solo-message.user {
            align-self: flex-end;
            margin-left: auto;
            margin-right: 10px;
            border: 0;
            background: #141414;
            color: #ffffff;
        }
        #view-editor .solo-message.assistant {
            align-self: flex-start;
            margin-right: auto;
            margin-left: 10px;
            border: 0;
            background: #141414;
        }
        #view-editor .solo-message.pending {
            align-self: flex-start;
            margin-right: auto;
            border: 0;
            background: #141414;
            color: #9fb0ba;
        }
        #view-editor .solo-message.error {
            align-self: flex-start;
            margin-right: auto;
            border: 0;
            background: #141414;
            color: #ffb9bd;
        }
        #view-editor .solo-message-role {
            display: block;
            margin-bottom: 4px;
            color: #eef3f5;
            font-size: 11px;
            font-weight: 900;
            user-select: text;
        }
        #view-editor .solo-message-text {
            display: block;
            min-height: 0;
            user-select: text;
            line-height: 1.25;
        }
        #view-editor .solo-copy-row {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
            user-select: none;
        }
        #view-editor .solo-copy-btn {
            width: 22px;
            height: 22px;
            border: 1px solid #3a4249;
            border-radius: 5px !important;
            background: #20262b;
            color: #9fa9af;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            line-height: 1;
        }
        #view-editor .solo-copy-btn:hover {
            color: #ffffff;
            border-color: #5b6b76;
            background: #293139;
        }
        #view-editor .solo-progress {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        #view-editor .solo-progress-dots {
            display: inline-flex;
            gap: 3px;
        }
        #view-editor .solo-progress-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50% !important;
            background: #8fb6ce;
            animation: soloProgressPulse 1s infinite ease-in-out;
        }
        #view-editor .solo-progress-dots span:nth-child(2) {
            animation-delay: .16s;
        }
        #view-editor .solo-progress-dots span:nth-child(3) {
            animation-delay: .32s;
        }
        @keyframes soloProgressPulse {
            0%, 80%, 100% { opacity: .28; transform: translateY(0); }
            40% { opacity: 1; transform: translateY(-2px); }
        }
        #view-editor .canvas-solo-input-wrap {
            position: relative;
            padding: 12px;
            border-top: 1px solid #30353a;
            display: grid;
            gap: 8px;
            background: #232527;
        }
        #view-editor .solo-input-resize-handle {
            position: absolute;
            top: -4px;
            left: 0;
            right: 0;
            height: 8px;
            cursor: ns-resize;
            background: transparent;
        }
        #view-editor .solo-input-resize-handle:hover {
            background: rgba(66, 150, 210, .2);
        }
        #view-editor .canvas-solo-model {
            height: 30px;
            border: 1px solid #394149 !important;
            border-radius: 12px !important;
            background: #232527;
            color: #d6dee2;
            padding: 0 26px 0 8px;
            font-size: 11px;
            outline: none;
            max-width: 210px;
            min-width: 138px;
        }
        #view-editor #solo-send-btn {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 50% !important;
            background: #2f3944;
            border-color: #3b4a58;
            color: #e8edf2;
        }
        #view-editor #solo-send-btn:hover {
            background: #3b4a5a;
        }
        #view-editor .canvas-platform.solo-collapsed .canvas-solo {
            display: none;
        }
        #view-editor .solo-open-fab {
            position: absolute;
            z-index: 7;
            top: 14px;
            right: 14px;
            height: 30px;
            min-width: 48px;
            padding: 0 10px;
            border: 1px solid #3a4249;
            border-radius: 7px !important;
            background: #252c33;
            color: #e8edf0;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 900;
            box-shadow: 0 10px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-platform.solo-collapsed .solo-open-fab {
            display: flex;
        }
        #view-editor .canvas-floating-actions {
            position: absolute;
            z-index: 8;
            top: 14px;
            right: 14px;
            display: none;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            max-width: calc(100% - 28px);
        }
        #view-editor.canvas-float-menu .canvas-floating-actions {
            top: 58px;
        }
        #view-editor .canvas-platform.solo-collapsed .canvas-floating-actions {
            display: flex;
        }
        #view-editor .canvas-floating-actions .solo-open-fab,
        #view-editor .canvas-create-fab,
        #view-editor .canvas-board-chip {
            position: static;
            z-index: auto;
            top: auto;
            right: auto;
            display: inline-flex;
            height: 30px;
            min-width: 48px;
            padding: 0 10px;
            border: 1px solid #3a4249;
            border-radius: 7px !important;
            background: #252c33;
            color: #e8edf0;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 900;
            box-shadow: 0 10px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-create-fab {
            min-width: 30px;
            width: 30px;
            padding: 0;
            font-size: 15px;
        }
        #view-editor .canvas-bottom-center-bar {
            position: absolute;
            z-index: 9;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            height: 44px;
            padding: 6px 10px;
            border: 0;
            border-radius: 10px !important;
            background: rgba(30,33,36,.45);
            box-shadow: 0 10px 24px rgba(0,0,0,.3);
        }
        #view-editor .canvas-bottom-center-bar button {
            width: 44px;
            height: 32px;
            padding: 0 8px;
            border: 0;
            border-radius: 7px !important;
            background: transparent;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-bottom-center-bar button svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        #view-editor .canvas-bottom-center-bar button:hover {
            background: rgba(255,255,255,.1);
            color: #f1d99e;
        }
        #view-editor .canvas-bottom-center-bar button.off {
            opacity: .42;
        }
        #view-editor .canvas-bottom-center-bar button.canvas-dudu-toggle-btn {
            width: 44px;
            min-width: 0;
            gap: 0;
            padding: 0;
            color: #e8edf0;
        }
        #view-editor .canvas-bottom-center-bar button.canvas-dudu-toggle-btn svg {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
        }
        #view-editor .canvas-bottom-center-bar button.canvas-dudu-toggle-btn.active {
            background: rgba(241, 217, 158, .2);
            color: #f1d99e;
        }
        #view-editor .canvas-bottom-center-bar button.canvas-dudu-toggle-btn.active .dudu-btn-eye {
            animation: canvas-dudu-btn-blink 2.4s ease-in-out infinite;
        }
        #view-editor .canvas-bottom-center-bar.dudu-locked button:not(.canvas-dudu-toggle-btn) {
            opacity: .32;
            filter: grayscale(1);
            pointer-events: none;
        }
        #view-editor .canvas-bottom-center-bar .dudu-btn-wrap {
            position: relative;
            display: inline-flex;
        }
        #dudu-adopt-countdown {
            position: absolute;
            z-index: 14;
            left: 50%;
            bottom: calc(100% + 10px);
            transform: translateX(-50%);
            min-width: 38px;
            height: 38px;
            padding: 0 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(241, 217, 158, .85);
            border-radius: 999px;
            background: rgba(28, 30, 33, .98);
            color: #f1d99e;
            font-size: 20px;
            font-weight: 900;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
            animation: dudu-countdown-beat 1s ease-in-out infinite;
        }
        #dudu-adopt-countdown.hidden { display: none; }
        #dudu-adopt-countdown.end {
            animation: dudu-countdown-pop .35s ease-out forwards;
        }
        @keyframes dudu-countdown-beat {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.16); }
        }
        @keyframes dudu-countdown-pop {
            0% { transform: translateX(-50%) scale(1); opacity: 1; }
            60% { transform: translateX(-50%) scale(1.45); opacity: 1; }
            100% { transform: translateX(-50%) scale(.1); opacity: 0; }
        }
        #dudu-options-panel {
            position: fixed;
            z-index: 430;
            width: fit-content;
            min-width: 190px;
            padding: 14px 14px 16px;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 14px !important;
            background: rgba(28, 30, 33, .98);
            box-shadow: 0 20px 52px rgba(0, 0, 0, .6);
            display: grid;
            gap: 8px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        #dudu-options-panel.hidden {
            display: none;
        }
        #dudu-options-panel .dudu-options-title {
            color: #e3c98d;
            font-size: 13px;
            font-weight: 800;
            padding: 0 2px 4px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            margin-bottom: 2px;
        }
        #dudu-options-panel .dudu-option-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            height: 46px;
            padding: 0 12px;
            border: 1px solid transparent;
            border-radius: 10px !important;
            background: transparent;
            color: #e8edf0;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
        }
        #dudu-options-panel .dudu-option-btn:hover {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(227, 201, 141, .45);
        }
        #dudu-options-panel .dudu-option-btn.on {
            background: rgba(241, 217, 158, .16);
            border-color: rgba(241, 217, 158, .55);
            color: #f1d99e;
        }
        #dudu-options-panel .dudu-option-btn svg {
            width: 24px;
            height: 24px;
            flex: 0 0 auto;
        }
        #dudu-options-panel .dudu-option-btn span {
            flex: 1;
        }
        #dudu-options-panel .dudu-options-arrow {
            position: absolute;
            left: 50%;
            bottom: -7px;
            width: 14px;
            height: 14px;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(28, 30, 33, .98);
            border-right: 1px solid rgba(255, 255, 255, .12);
            border-bottom: 1px solid rgba(255, 255, 255, .12);
        }
        @keyframes canvas-dudu-btn-blink {
            0%, 86%, 100% { transform: scaleY(1); }
            92% { transform: scaleY(.1); }
            96% { transform: scaleY(1); }
        }
        #dudu-pet {
            position: absolute;
            z-index: 8;
            left: 50%;
            bottom: 68px;
            width: 64px;
            height: 64px;
            margin-left: -32px;
            pointer-events: none;
            display: none;
            filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
        }
        #dudu-pet.show {
            display: block;
        }
        #dudu-pet .dudu-pop-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            will-change: transform;
        }
        #dudu-pet .dudu-grab-zone {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 120px;
            height: 120px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 16;
            pointer-events: auto;
            cursor: grab;
            touch-action: none;
        }
        #dudu-pet.dudu-held .dudu-grab-zone {
            cursor: grabbing;
        }
        #dudu-pet.drop-bounce .dudu-pop-wrap {
            animation: dudu-drop-bounce .55s cubic-bezier(.3, 1.25, .4, 1);
        }
        #dudu-pet .dudu-chat-box {
            position: absolute;
            left: 104px;
            top: -6px;
            z-index: 22;
            width: 268px;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 12px;
            background: rgba(22, 24, 27, .55);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
            pointer-events: auto;
            animation: dudu-chat-in .22s ease-out;
        }
        #dudu-pet .dudu-chat-box.left {
            left: auto;
            right: 104px;
        }
        #dudu-pet .dudu-chat-box.hidden { display: none; }
        @keyframes dudu-chat-in {
            from { opacity: 0; transform: translateX(-8px) scale(.96); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }
        #dudu-pet .dudu-chat-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #dudu-pet .dudu-chat-row input {
            flex: 1;
            min-width: 0;
            height: 34px;
            padding: 0 12px;
            border: 1px solid rgba(255, 255, 255, .22);
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            color: #ffffff;
            font-size: 13px;
            outline: none;
        }
        #dudu-pet .dudu-chat-row input:focus {
            border-color: rgba(241, 217, 158, .7);
        }
        #dudu-pet .dudu-chat-row input::placeholder {
            color: rgba(255, 255, 255, .45);
        }
        #dudu-pet .dudu-chat-send {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: rgba(241, 217, 158, .92);
            color: #16181a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        #dudu-pet .dudu-chat-send svg {
            width: 16px;
            height: 16px;
        }
        #dudu-pet .dudu-chat-send:disabled {
            opacity: .5;
            cursor: default;
        }
        .dudu-chat-log-card {
            width: min(440px, calc(100vw - 32px));
            max-height: min(560px, calc(100vh - 120px));
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 16px;
            background: rgba(24, 25, 27, .88);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
            overflow: hidden;
        }
        .dudu-chat-log-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }
        .dudu-chat-log-title {
            color: #e3c98d;
            font-size: 15px;
            font-weight: 800;
        }
        .dudu-chat-log-close {
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
            color: #c8ccce;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .dudu-chat-log-close:hover {
            background: rgba(255, 255, 255, .16);
            color: #ffffff;
        }
        .dudu-chat-log-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 14px 14px 18px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .dudu-chat-log-row {
            display: flex;
            align-items: flex-end;
            gap: 8px;
        }
        .dudu-chat-log-row.user {
            flex-direction: row-reverse;
        }
        .dudu-chat-log-row .cl-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #101112;
            border: 1px solid rgba(241, 217, 158, .55);
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #e3c98d;
            font-size: 13px;
            font-weight: 800;
        }
        .dudu-chat-log-row .cl-avatar svg {
            width: 18px;
            height: 18px;
        }
        .dudu-chat-log-row .cl-bubble {
            max-width: 76%;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.55;
            color: #ffffff;
            word-break: break-word;
        }
        .dudu-chat-log-row.dudu .cl-bubble {
            background: rgba(60, 63, 68, .92);
            border-bottom-left-radius: 3px;
        }
        .dudu-chat-log-row.user .cl-bubble {
            background: rgba(227, 201, 141, .92);
            color: #1b1c1e;
            border-bottom-right-radius: 3px;
        }
        .dudu-chat-log-row .cl-time {
            font-size: 10px;
            color: #8d9396;
            margin-top: 3px;
            text-align: right;
        }
        @keyframes dudu-drop-bounce {
            0% { transform: translateY(-16px) scale(1.16, .82); }
            40% { transform: translateY(0) scale(.88, 1.16); }
            70% { transform: translateY(-6px) scale(1.08, .93); }
            100% { transform: translateY(0) scale(1, 1); }
        }
        #dudu-pet.pop-in .dudu-pop-wrap {
            animation: dudu-pop-in .78s ease-out;
        }
        @keyframes dudu-pop-in {
            0% { transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) scale(.25, .12); opacity: 0; }
            22% { transform: translate(calc(var(--pop-x, 0px) * .82), calc(var(--pop-y, 0px) * .82)) scale(1.18, .72); opacity: 1; }
            48% { transform: translate(calc(var(--pop-x, 0px) * .38), calc(var(--pop-y, 0px) * .38)) scale(.92, 1.18); }
            68% { transform: translate(calc(var(--pop-x, 0px) * .16), calc(var(--pop-y, 0px) * .16)) scale(1.08, .94); }
            86% { transform: translate(calc(var(--pop-x, 0px) * .05), calc(var(--pop-y, 0px) * .05)) scale(.98, 1.04); }
            100% { transform: translate(0, 0) scale(1, 1); }
        }
        #dudu-pet svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        #dudu-pet .dudu-comic-bubble {
            position: absolute;
            z-index: 14;
            left: 70px;
            top: -56px;
            width: max-content;
            max-width: 236px;
            min-width: 36px;
            padding: 10px 14px;
            background: rgba(44, 47, 51, .72);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
            font-size: 13px;
            font-weight: 600;
            color: #ffffff;
            line-height: 1.5;
            animation: dudu-bubble-wobble .5s ease-out;
        }
        #dudu-pet .dudu-comic-bubble.left {
            left: auto;
            right: 70px;
        }
        #dudu-pet.chat-open .dudu-comic-bubble {
            top: -86px;
        }
        #dudu-pet .dudu-comic-bubble.wrap {
            max-width: 158px;
        }
        #dudu-pet .dudu-comic-bubble::after {
            content: '';
            position: absolute;
            left: 18px;
            bottom: -7px;
            width: 12px;
            height: 12px;
            background: rgba(44, 47, 51, .72);
            border-right: 1px solid rgba(255, 255, 255, .12);
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            transform: rotate(45deg);
        }
        #dudu-pet .dudu-comic-bubble.left::after {
            left: auto;
            right: 18px;
        }
        #dudu-pet .dudu-comic-bubble.hidden { display: none; }
        @keyframes dudu-bubble-wobble {
            0% { transform: scale(.4) rotate(-3deg); opacity: 0; }
            60% { transform: scale(1.12) rotate(1.5deg); opacity: 1; }
            100% { transform: scale(1) rotate(0); opacity: 1; }
        }
        #dudu-pet .drag-eye-group {
            transform-box: view-box;
        }
        #dudu-pet .eye-shape { display: none; }
        #dudu-pet .drag-eye-group[data-shape="circle"] .eye-circle,
        #dudu-pet .drag-eye-group[data-shape="square"] .eye-square,
        #dudu-pet .drag-eye-group[data-shape="line"] .eye-line,
        #dudu-pet .drag-eye-group[data-shape="dot"] .eye-dot { display: block; }
        #dudu-pet .drag-eye-group[data-shape="line"] .eye-pupil,
        #dudu-pet .drag-eye-group[data-shape="dot"] .eye-pupil { display: none; }
        #dudu-pet .dudu-shadow {
            position: absolute;
            left: 50%;
            bottom: -3px;
            width: 38px;
            height: 7px;
            transform: translateX(-50%);
            border-radius: 50%;
            background: rgba(0, 0, 0, .38);
            filter: blur(2px);
            transition: width .25s ease;
        }
        #dudu-pet.walking .dudu-shadow {
            width: 28px;
        }
        #view-editor #workspace-canvas {
            position: relative;
        }
        #view-editor .canvas-shortcuts-panel {
            position: fixed;
            z-index: 420;
            left: 50%;
            bottom: 70px;
            transform: translateX(-50%);
            width: min(920px, calc(100vw - 24px));
            padding: 20px 20px 24px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 16px !important;
            background: rgba(30,32,35,.97);
            box-shadow: 0 24px 60px rgba(0,0,0,.55);
            color: #e7ebee;
        }
        #view-editor .canvas-shortcuts-panel.hidden { display: none; }
        #view-editor .canvas-shortcuts-cols {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #view-editor .canvas-sc-col { padding: 0 16px; }
        #view-editor .canvas-sc-col + .canvas-sc-col { border-left: 1px solid rgba(255,255,255,.12); }
        #view-editor .canvas-sc-title {
            color: #58c5e6;
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 10px;
        }
        #view-editor .canvas-sc-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 27px;
            color: #c9d0d4;
            font-size: 12px;
            font-weight: 600;
        }
        #view-editor .canvas-sc-keys { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
        #view-editor .canvas-sc-keys i {
            font-style: normal;
            min-width: 22px;
            padding: 2px 7px;
            border-radius: 5px;
            background: #3c4043;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
        }
        #view-editor .canvas-sc-keys b { color: #ffffff; font-size: 10px; font-weight: 700; }
        #view-editor .canvas-sc-keys em {
            font-style: normal;
            font-weight: 800;
            color: #f1d99e;
            font-size: 12px;
            white-space: nowrap;
        }
        #view-editor .canvas-shortcuts-close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 26px;
            height: 26px;
            padding: 0;
            border: 0;
            border-radius: 7px !important;
            background: rgba(255,255,255,.08);
            color: #ffffff;
            font-size: 17px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-shortcuts-close:hover { background: rgba(255,255,255,.18); }
        #view-editor .canvas-shortcuts-arrow {
            position: absolute;
            left: 50%;
            bottom: -7px;
            width: 14px;
            height: 14px;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(30,32,35,.97);
            border-right: 1px solid rgba(255,255,255,.1);
            border-bottom: 1px solid rgba(255,255,255,.1);
        }
        #view-editor .canvas-asset-load-panel {
            position: fixed;
            z-index: 420;
            left: 50%;
            width: min(760px, 92vw);
            height: min(520px, 70vh);
            padding: 16px 16px 20px;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 16px !important;
            background: rgba(30,32,35,.97);
            box-shadow: 0 24px 60px rgba(0,0,0,.55);
            overflow: hidden;
        }
        #view-editor .canvas-asset-load-panel.hidden { display: none; }
        #view-editor .canvas-asset-load-close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 26px;
            height: 26px;
            padding: 0;
            border: 0;
            border-radius: 7px !important;
            background: rgba(255,255,255,.08);
            color: #ffffff;
            font-size: 17px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-asset-load-close:hover { background: rgba(255,255,255,.18); }
        #view-editor .canvas-asset-load-head {
            height: 38px;
            display: flex;
            align-items: center;
            color: #e7ebee;
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 6px;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-tabs {
            display: flex;
            gap: 6px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,.1);
            overflow-x: auto;
            flex-shrink: 0;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-tab {
            flex: 0 0 auto;
            height: 34px;
            padding: 0 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #3b4348;
            border-radius: 7px !important;
            background: #272c2f;
            color: #9aa4a9;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-tab:hover {
            color: #e3e9eb;
            border-color: #59636a;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-tab.active {
            color: #f0d9a0;
            border-color: #b8975c;
            background: rgba(216,184,114,.12);
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-tab span {
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: rgba(255,255,255,.09);
            color: #c9d2d5;
            font-size: 10px;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-picker-grid {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 14px 2px;
            display: grid;
            align-content: start;
            gap: 16px;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-group-title {
            margin-bottom: 9px;
            color: #8f9aa1;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
            gap: 10px;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card {
            height: 102px;
            padding: 0;
            display: grid;
            grid-template-rows: 84px 18px;
            border: 1px solid #3d454b;
            border-radius: 7px !important;
            background: #1c2022;
            color: #c6cdd0;
            overflow: hidden;
            font-size: 13px;
            font-weight: 600;
            text-align: left;
            cursor: grab;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card:hover {
            border-color: #b8975c;
            box-shadow: 0 0 0 1px rgba(216,184,114,.22);
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #151719;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card span {
            padding: 0 7px;
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-empty {
            align-self: center;
            justify-self: center;
            color: #737d83;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-settings-panel {
            position: fixed;
            z-index: 420;
            width: 300px;
            padding: 16px 16px 18px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 16px !important;
            background: rgba(30,32,35,.97);
            box-shadow: 0 24px 60px rgba(0,0,0,.55);
            display: grid;
            gap: 12px;
        }
        #view-editor .canvas-settings-panel.hidden { display: none; }
        #view-editor .canvas-settings-arrow {
            position: absolute;
            left: 50%;
            bottom: -7px;
            width: 14px;
            height: 14px;
            transform: translateX(-50%) rotate(45deg);
            background: rgba(30,32,35,.97);
            border-right: 1px solid rgba(255,255,255,.1);
            border-bottom: 1px solid rgba(255,255,255,.1);
        }
        #view-editor .canvas-settings-title {
            color: #ffffff;
            font-size: 14px;
            font-weight: 800;
        }
        #view-editor .canvas-settings-row {
            display: grid;
            grid-template-columns: 64px 1fr 52px;
            align-items: center;
            gap: 8px;
            color: #cbd2d6;
            font-size: 12px;
            font-weight: 700;
        }
        #view-editor .canvas-settings-row input[type="range"] {
            width: 100%;
            accent-color: #ffffff;
        }
        #view-editor .canvas-settings-row output {
            text-align: right;
            color: #ffffff;
            font-weight: 800;
        }
        #view-editor .canvas-settings-swatch {
            height: 40px;
            border-radius: 8px !important;
            border: 1px solid rgba(255,255,255,.2);
        }
        #view-editor .canvas-settings-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
            align-items: center;
        }
        #view-editor .canvas-hsv-sliders {
            display: grid;
            gap: 10px;
        }
        #view-editor .canvas-slider-row {
            display: grid;
            grid-template-columns: 22px 54px 1fr;
            align-items: center;
            gap: 8px;
            color: #cbd2d6;
            font-size: 12px;
            font-weight: 700;
        }
        #view-editor .canvas-slider-row input[type="number"] {
            width: 54px;
            height: 26px;
            margin: 0;
            padding: 0 6px;
            background: #181b1e !important;
            border: 1px solid #3a4249 !important;
            border-radius: 5px !important;
            color: #ffffff !important;
            font-size: 12px;
            text-align: right;
        }
        #view-editor .canvas-slider-row input[type="range"] {
            width: 100%;
            height: 10px;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
            border: 0 !important;
            border-radius: 5px !important;
            outline: none;
            background: #3a4249;
        }
        #view-editor .canvas-slider-row input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 8px;
            height: 18px;
            border-radius: 2px !important;
            background: #ffffff;
            border: 1px solid #222222;
            box-shadow: 0 0 4px rgba(0,0,0,.5);
        }
        #view-editor .canvas-slider-row input[type="range"]::-moz-range-thumb {
            width: 8px;
            height: 18px;
            border-radius: 2px !important;
            background: #ffffff;
            border: 1px solid #222222;
        }
        #view-editor .canvas-board-shortcuts {
            display: none;
            position: absolute;
            top: 36px;
            left: auto;
            right: 0;
            width: 220px;
            max-height: 60vh;
            overflow-y: auto;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding: 6px;
            background: #252a2f;
            border: 1px solid #3a4249;
            border-radius: 10px;
            z-index: 30;
        }
        #view-editor .canvas-board-shortcuts.open {
            display: flex;
        }
        #view-editor .canvas-board-toggle {
            height: 30px;
            min-width: 48px;
            padding: 0 10px;
            border: 1px solid #3a4249;
            border-radius: 7px !important;
            background: #252c33;
            color: #e8edf0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 900;
            box-shadow: 0 10px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-board-chip {
            max-width: none;
            width: 100%;
            justify-content: flex-start;
            gap: 8px;
            transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        #view-editor .canvas-board-chip:hover {
            transform: translateX(4px) scale(1.02);
            background: rgba(255,255,255,.08);
            box-shadow: 0 6px 14px rgba(0,0,0,.25);
        }
        #view-editor .canvas-board-chip.active {
            border-color: #8b5cf6;
            background: #a79fd1;
            color: #241f3d;
        }
        #view-editor .canvas-board-chip-icon {
            width: 13px;
            height: 13px;
            border-radius: 3px !important;
            border: 1px solid currentColor;
            display: inline-block;
            opacity: .8;
        }
        #view-editor .canvas-board-chip-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #canvas-board-context-menu,
        #canvas-node-context-menu,
        #canvas-connection-context-menu,
        #canvas-box-context-menu {
            position: fixed;
            z-index: 260;
            min-width: 118px;
            padding: 5px;
            border: 1px solid #3a4249;
            border-radius: 7px !important;
            background: #202428;
            box-shadow: 0 16px 30px rgba(0,0,0,.35);
        }
        #canvas-board-context-menu button,
        #canvas-node-context-menu button,
        #canvas-connection-context-menu button,
        #canvas-box-context-menu button {
            width: 100%;
            height: 28px;
            padding: 0 9px;
            border-radius: 5px !important;
            color: #cbd2d6;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 12px;
            font-weight: 800;
            text-align: left;
        }
        #canvas-board-context-menu button:hover,
        #canvas-node-context-menu button:hover,
        #canvas-connection-context-menu button:hover,
        #canvas-box-context-menu button:hover {
            background: #303842;
            color: #ffffff;
        }
        #canvas-board-context-menu button.danger,
        #canvas-node-context-menu button.danger,
        #canvas-connection-context-menu button.danger,
        #canvas-box-context-menu button.danger {
            color: #ffb9bd;
        }
        #canvas-connection-context-menu { min-width: 218px; max-width: 300px; }
        #canvas-connection-context-menu .canvas-connection-context-title {
            padding: 5px 8px 6px;
            color: #9ea9b0;
            font-size: 11px;
        }
        #canvas-connection-context-menu button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #view-editor .canvas-sidebar,
        #view-editor .canvas-assistant {
            min-height: 0;
            background: #202224;
            color: #cbd2d6;
            display: flex;
            flex-direction: column;
        }
        #view-editor .canvas-sidebar {
            border-right: 1px solid #111315;
        }
        #view-editor .canvas-assistant {
            border-left: 1px solid #111315;
        }
        #view-editor .canvas-side-head {
            min-height: 72px;
            padding: 12px;
            border-bottom: 1px solid #30353a;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #view-editor .canvas-project-row,
        #view-editor .canvas-panel-title,
        #view-editor .canvas-node-row,
        #view-editor .canvas-toolbar-row,
        #view-editor .canvas-assist-icons,
        #view-editor .canvas-bottom-tools {
            display: flex;
            align-items: center;
        }
        #view-editor .canvas-project-row {
            justify-content: space-between;
            gap: 10px;
            color: #eef3f5;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-crumb {
            min-width: 0;
            color: #8f989f;
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #view-editor .canvas-mini-btn,
        #view-editor .canvas-tool-btn {
            height: 28px;
            border: 1px solid #3b4248;
            border-radius: 6px !important;
            background: #262a2e;
            color: #c8d0d5;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .canvas-mini-btn {
            padding: 0 10px;
        }
        #view-editor .canvas-mini-btn.active,
        #view-editor .canvas-view-tab.active {
            color: #ffffff;
            background: #3a4148;
            border-color: #606a72;
        }
        #view-editor .canvas-side-tabs {
            height: 34px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            padding: 6px 8px;
            border-bottom: 1px solid #30353a;
            background: #1b1e20;
        }
        #view-editor .canvas-side-tab {
            border: 1px solid transparent;
            border-radius: 5px !important;
            color: #8f989f;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .canvas-side-tab.active {
            border-color: #4b555d;
            background: #30353a;
            color: #ffffff;
        }
        #view-editor .canvas-search {
            margin: 10px 8px 8px;
            height: 30px;
            border: 1px solid #394149;
            border-radius: 6px !important;
            background: #171a1d;
            color: #cbd2d6;
            padding: 0 9px;
            font-size: 11px;
            outline: none;
        }
        #view-editor .canvas-node-list {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 0 8px 10px;
            display: grid;
            align-content: start;
            gap: 7px;
        }
        #view-editor .canvas-node-row {
            min-height: 42px;
            gap: 8px;
            padding: 7px 8px;
            border: 1px solid #30363b;
            border-radius: 6px !important;
            background: #25292d;
            color: #cbd2d6;
            font-size: 11px;
        }
        #view-editor .canvas-node-row.active {
            border-color: #5b6f83;
            background: #2f3942;
            color: #ffffff;
        }
        #view-editor .canvas-node-icon,
        #view-editor .canvas-quick-icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            border-radius: 6px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #343b42;
            color: #dbe4e8;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-node-meta {
            min-width: 0;
            display: grid;
            gap: 2px;
        }
        #view-editor .canvas-node-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 900;
        }
        #view-editor .canvas-node-type {
            color: #818b92;
            font-size: 10px;
        }
        #view-editor .canvas-sidebar-foot {
            height: 36px;
            padding: 0 10px;
            border-top: 1px solid #30353a;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #8f989f;
            font-size: 11px;
        }
        #view-editor .canvas-stage {
            position: relative;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            --canvas-pan-x: 0px;
            --canvas-pan-y: 0px;
            --canvas-zoom: 1;
            --canvas-grid-size: 11px;
            background-image:
                linear-gradient(rgba(125,145,165,.14) 1px, transparent 1px),
                linear-gradient(90deg, rgba(125,145,165,.14) 1px, transparent 1px);
            background-size: 11px 11px;
            background-position: var(--canvas-pan-x) var(--canvas-pan-y);
            background-color: #000000;
            cursor: default;
        }
        #view-editor .canvas-stage.canvas-bg-dots {
            background-image: radial-gradient(circle, rgba(125,145,165,.4) 1.2px, transparent 1.2px);
            background-size: 22px 22px;
        }
        #view-editor .canvas-stage.canvas-bg-none {
            background-image: none;
        }
        #view-editor .canvas-stage::before,
        #view-editor .canvas-stage::after {
            content: none;
            position: absolute;
            inset: -140px;
            pointer-events: none;
            z-index: 0;
            background-repeat: repeat;
        }
        #view-editor .canvas-stage::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjYyMCIgdmlld0JveD0iMCAwIDEwMDAgNjIwIj48Y2lyY2xlIGN4PSIxMjIuMiIgY3k9IjMxMS41IiByPSIxLjE2IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjcpIi8+PGNpcmNsZSBjeD0iODgxLjAiIGN5PSI1NTEuNiIgcj0iMS4yNiIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjIpIi8+PGNpcmNsZSBjeD0iNTQ3LjQiIGN5PSI0NTEuMSIgcj0iMS4zOSIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjI2KSIvPjxjaXJjbGUgY3g9IjQ0MS42IiBjeT0iNS42IiByPSIwLjc3IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMTcpIi8+PGNpcmNsZSBjeD0iNDUwLjEiIGN5PSI1MDIuNiIgcj0iMS4zMiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjI0KSIvPjxjaXJjbGUgY3g9IjM5OC4wIiBjeT0iMjE2LjgiIHI9IjEuNiIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjE4KSIvPjxjaXJjbGUgY3g9Ijk5NS43IiBjeT0iMzE4LjMiIHI9IjAuNzciIGZpbGw9InJnYmEoMTkwLDIxMCwyNDAsMC4xOCkiLz48Y2lyY2xlIGN4PSI1MzcuOCIgY3k9IjE4MC4wIiByPSIwLjgzIiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMjQpIi8+PGNpcmNsZSBjeD0iNTc2LjgiIGN5PSIxOS4xIiByPSIxLjM0IiBmaWxsPSJyZ2JhKDIxMCwyMjUsMjQ1LDAuMTkpIi8+PGNpcmNsZSBjeD0iOTQuMCIgY3k9IjU0OS4zIiByPSIxLjIiIGZpbGw9InJnYmEoMjEwLDIyNSwyNDUsMC4yOCkiLz48Y2lyY2xlIGN4PSI1MDYuMyIgY3k9IjQ2My4xIiByPSIxLjI0IiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMjEpIi8+PGNpcmNsZSBjeD0iMjYwLjYiIGN5PSIyNjEuMCIgcj0iMS41MyIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjIxKSIvPjxjaXJjbGUgY3g9IjgwMi43IiBjeT0iMzU2LjIiIHI9IjEuMzkiIGZpbGw9InJnYmEoMTkwLDIxMCwyNDAsMC4yNykiLz48Y2lyY2xlIGN4PSI1MjMuMCIgY3k9IjQxNC4zIiByPSIxLjM1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMikiLz48Y2lyY2xlIGN4PSI0ODIuMyIgY3k9IjE0NC4xIiByPSIxLjUiIGZpbGw9InJnYmEoMjEwLDIyNSwyNDUsMC4yMykiLz48Y2lyY2xlIGN4PSI2NzIuOSIgY3k9IjQ0MS4zIiByPSIxLjU2IiBmaWxsPSJyZ2JhKDIxMCwyMjUsMjQ1LDAuMykiLz48Y2lyY2xlIGN4PSI1NTkuMyIgY3k9IjQxMy45IiByPSIwLjk4IiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMjYpIi8+PGNpcmNsZSBjeD0iNjk2LjciIGN5PSI0OTYuNiIgcj0iMS4wNiIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjE2KSIvPjxjaXJjbGUgY3g9IjEzLjIiIGN5PSI5NS43IiByPSIxLjQ5IiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMjkpIi8+PGNpcmNsZSBjeD0iOTIzLjUiIGN5PSIyMjQuMyIgcj0iMC44OCIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjI0KSIvPjxjaXJjbGUgY3g9IjUxMS4yIiBjeT0iNTA5LjYiIHI9IjEuNDMiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMikiLz48Y2lyY2xlIGN4PSI4MjguOCIgY3k9IjE5Ny44IiByPSIxLjUzIiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMTQpIi8+PGNpcmNsZSBjeD0iNzE0LjgiIGN5PSI1OTIuOSIgcj0iMC45MyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjI5KSIvPjxjaXJjbGUgY3g9Ijk2My41IiBjeT0iNTE5LjYiIHI9IjEuMTMiIGZpbGw9InJnYmEoMjEwLDIyNSwyNDUsMC4xMykiLz48Y2lyY2xlIGN4PSI5MDAuMCIgY3k9IjIzMC41IiByPSIwLjg4IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjcpIi8+PGNpcmNsZSBjeD0iNDQ5LjgiIGN5PSIxMi42IiByPSIwLjciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMikiLz48Y2lyY2xlIGN4PSI2MDkuMyIgY3k9IjEyNS43IiByPSIwLjgxIiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMTMpIi8+PGNpcmNsZSBjeD0iOTUyLjciIGN5PSI0MTMuMSIgcj0iMS4yNyIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjE1KSIvPjxjaXJjbGUgY3g9IjY2My4zIiBjeT0iMzU1LjUiIHI9IjEuNTMiIGZpbGw9InJnYmEoMTkwLDIxMCwyNDAsMC4yNykiLz48Y2lyY2xlIGN4PSI3MTguNyIgY3k9Ijg2LjUiIHI9IjAuOSIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjIzKSIvPjxjaXJjbGUgY3g9Ijg3My4wIiBjeT0iMzEyLjkiIHI9IjAuNzgiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNCkiLz48Y2lyY2xlIGN4PSI3ODEuMiIgY3k9IjU2NC4wIiByPSIwLjk4IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMTkpIi8+PGNpcmNsZSBjeD0iNTE5LjkiIGN5PSIxMjQuNCIgcj0iMC43MSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE0KSIvPjxjaXJjbGUgY3g9IjU1LjAiIGN5PSIyMTYuNCIgcj0iMS4wMiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjI2KSIvPjxjaXJjbGUgY3g9IjI5LjQiIGN5PSIyOTUuMyIgcj0iMS4zMSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIi8+PGNpcmNsZSBjeD0iNDk3LjYiIGN5PSIyODkuNSIgcj0iMS4yNiIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjE1KSIvPjwvc3ZnPg==");
            background-size: 1000px 620px;
            background-position: var(--canvas-pan-x) var(--canvas-pan-y);
            opacity: .2;
        }
        #view-editor .canvas-stage::after {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDE1MDAgODAwIj48Y2lyY2xlIGN4PSI3NzkuMyIgY3k9IjM0Ny40IiByPSIxLjAiIGZpbGw9InJnYmEoMTkwLDIxMCwyNDAsMC4xOSkiLz48Y2lyY2xlIGN4PSIxMDY0LjYiIGN5PSI0MzcuNSIgcj0iMC43MyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIi8+PGNpcmNsZSBjeD0iNzEuNSIgY3k9IjQzNS41IiByPSIxLjQ2IiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMTcpIi8+PGNpcmNsZSBjeD0iMjg1LjMiIGN5PSI1NjcuMSIgcj0iMS40OSIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjE0KSIvPjxjaXJjbGUgY3g9IjMzMC4zIiBjeT0iNzAzLjEiIHI9IjEuNTEiIGZpbGw9InJnYmEoMTkwLDIxMCwyNDAsMC4xNCkiLz48Y2lyY2xlIGN4PSIxMjYzLjgiIGN5PSIzMTIuOSIgcj0iMS4wOCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE3KSIvPjxjaXJjbGUgY3g9IjU3NS43IiBjeT0iMTUyLjMiIHI9IjAuODYiIGZpbGw9InJnYmEoMjEwLDIyNSwyNDUsMC4xOCkiLz48Y2lyY2xlIGN4PSI0MzMuMiIgY3k9IjE0NC4yIiByPSIxLjE3IiBmaWxsPSJyZ2JhKDE5MCwyMTAsMjQwLDAuMTcpIi8+PGNpcmNsZSBjeD0iMTE5Mi41IiBjeT0iNjM1LjAiIHI9IjEuNDMiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMikiLz48Y2lyY2xlIGN4PSIxMS4zIiBjeT0iNzcuOCIgcj0iMS4xMSIgZmlsbD0icmdiYSgxOTAsMjEwLDI0MCwwLjE2KSIvPjxjaXJjbGUgY3g9IjExNzIuNyIgY3k9IjY3Ni44IiByPSIxLjMiIGZpbGw9InJnYmEoMjEwLDIyNSwyNDUsMC4yNCkiLz48Y2lyY2xlIGN4PSIxMjY3LjAiIGN5PSIyODIuNSIgcj0iMS4zMiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIyKSIvPjxjaXJjbGUgY3g9IjE2Ny43IiBjeT0iNTcxLjEiIHI9IjEuMiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE5KSIvPjxjaXJjbGUgY3g9Ijg1NC4yIiBjeT0iNDQ5LjgiIHI9IjEuMyIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjE0KSIvPjxjaXJjbGUgY3g9IjE0Ny45IiBjeT0iMzQ5LjQiIHI9IjAuOCIgZmlsbD0icmdiYSgyMTAsMjI1LDI0NSwwLjEzKSIvPjxjaXJjbGUgY3g9IjEwODEuOCIgY3k9IjE1MC45IiByPSIxLjI3IiBmaWxsPSJyZ2JhKDIxMCwyMjUsMjQ1LDAuMTgpIi8+PGNpcmNsZSBjeD0iODgxLjUiIGN5PSI1NC42IiByPSIxLjU0IiBmaWxsPSJyZ2JhKDIxMCwyMjUsMjQ1LDAuMTQpIi8+PGNpcmNsZSBjeD0iOTcuOCIgY3k9IjMzMC4wIiByPSIxLjUxIiBmaWxsPSJyZ2JhKDIxMCwyMjUsMjQ1LDAuMjEpIi8+PC9zdmc+");
            background-size: 1500px 800px;
            background-position: var(--canvas-pan-x) var(--canvas-pan-y);
            opacity: .15;
        }
        #view-editor .canvas-starfield {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }
        #view-editor .canvas-starfield .canvas-star {
            position: absolute;
            border-radius: 50% !important;
            background: #ffffff;
            animation: canvasStarPulse var(--star-dur, 4s) ease-in-out var(--star-delay, 0s) infinite;
            opacity: var(--star-min, .5);
        }
        @keyframes canvasStarPulse {
            0%, 100% { opacity: var(--star-min, .3); transform: scale(.7); }
            50% { opacity: var(--star-max, 1); transform: scale(1.4); }
        }
        #view-editor .canvas-bright-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }
        #view-editor .canvas-bright-star {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50% !important;
            background: #ffffff;
            box-shadow: 0 0 16px 6px rgba(255,255,255,.95), 0 0 42px 18px rgba(190,220,255,.55);
            animation: canvasBrightStarFlash 3s ease-out forwards;
        }
        #view-editor .canvas-guides {
            position: absolute;
            inset: 0;
            z-index: 22;
            pointer-events: none;
            overflow: hidden;
        }
        #view-editor .canvas-guide {
            position: absolute;
            background: transparent;
        }
        #view-editor .canvas-guide.vertical {
            width: 0;
            top: 0;
            bottom: 0;
            border-left: 1px dashed rgba(207,177,110,.23);
        }
        #view-editor .canvas-guide.horizontal {
            height: 0;
            left: 0;
            right: 0;
            border-top: 1px dashed rgba(207,177,110,.23);
        }
        @keyframes canvasBrightStarFlash {
            0% { opacity: 0; transform: scale(.3); }
            18% { opacity: 1; transform: scale(1.05); }
            55% { opacity: .85; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.25); }
        }
        #view-editor .canvas-big-dipper {
            position: absolute;
            width: 200px;
            height: 120px;
            pointer-events: none;
            opacity: 0;
            animation: canvasDipperFade 10s ease-in-out forwards;
        }
        #view-editor .canvas-big-dipper svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        #view-editor .canvas-big-dipper .canvas-dipper-star {
            position: absolute;
            width: 5px;
            height: 5px;
            margin: -2.5px 0 0 -2.5px;
            border-radius: 50% !important;
            background: #ffffff;
            box-shadow: 0 0 12px 4px rgba(255,255,255,.85), 0 0 28px 10px rgba(180,215,255,.45);
            animation: canvasDipperPulse 2.2s ease-in-out infinite;
        }
        @keyframes canvasDipperFade {
            0%, 100% { opacity: 0; }
            10%, 75% { opacity: 1; }
        }
        @keyframes canvasDipperPulse {
            0%, 100% { opacity: .45; transform: scale(.8); }
            50% { opacity: 1; transform: scale(1.25); }
        }
        #view-editor .canvas-stage.is-panning {
            cursor: grabbing;
        }
        #view-editor .canvas-top-switch {
            position: absolute;
            z-index: 4;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            height: 38px;
            padding: 4px;
            display: flex;
            gap: 4px;
            border: 1px solid #303840;
            border-radius: 9px !important;
            background: rgba(28,31,35,.9);
            box-shadow: 0 12px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-view-tab {
            width: 78px;
            border-radius: 6px !important;
            color: #9aa4aa;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-stage-actions {
            position: absolute;
            z-index: 4;
            top: 16px;
            right: 16px;
            display: flex;
            gap: 8px;
        }
        #view-editor .canvas-tool-btn {
            width: 38px;
            height: 38px;
            min-width: 38px;
            border-radius: 9px !important;
            font-size: 14px;
        }
        #view-editor .canvas-board {
            position: absolute;
            inset: 0;
            transform: translate(var(--canvas-pan-x), var(--canvas-pan-y)) scale(var(--canvas-zoom));
            transform-origin: 0 0;
            will-change: transform;
        }
        #view-editor .canvas-overview {
            position: absolute;
            z-index: 4;
            left: 14px;
            bottom: 14px;
            width: 184px;
            height: 118px;
            overflow: hidden;
            border: 1px solid #3a4046;
            border-radius: 5px !important;
            background: rgba(25, 28, 31, .96);
            box-shadow: 0 10px 24px rgba(0,0,0,.32);
            cursor: crosshair;
        }
        #view-editor .canvas-overview-map {
            position: absolute;
            inset: 0;
        }
        #view-editor .canvas-overview-node {
            position: absolute;
            min-width: 3px;
            min-height: 3px;
            border-radius: 1px !important;
            background: #7ba7c5;
        }
        #view-editor .canvas-overview-node.text { background: #73b7d4; }
        #view-editor .canvas-overview-node.image { background: #7eb77a; }
        #view-editor .canvas-overview-node.video { background: #d4a65e; }
        #view-editor .canvas-overview-node.audio { background: #b28ad8; }
        #view-editor .canvas-overview-node.selected { box-shadow: 0 0 0 1px #f0f4f5; }
        #view-editor .canvas-overview-node.capsule {
            border-radius: 999px !important;
            opacity: .5;
            box-shadow: 0 0 0 1px rgba(255,255,255,.35);
        }
        #view-editor .canvas-overview-viewport {
            position: absolute;
            border: 1px solid #b469d0;
            background: rgba(180, 105, 208, .05);
            pointer-events: none;
        }
        #view-editor .canvas-empty-hint {
            position: absolute;
            z-index: 3;
            left: 50%;
            top: 45%;
            transform: translate(-50%, -50%);
            display: grid;
            justify-items: center;
            gap: 9px;
            color: #cbd2d6;
            text-align: center;
            pointer-events: none;
        }
        #view-editor .canvas-empty-cursor {
            width: 38px;
            height: 38px;
            border-radius: 50% !important;
            border: 1px solid #4b555d;
            background-color: #22282d;
            background-image: url('../icons/aixmov-logo.png');
            background-position: 3px center;
            background-repeat: no-repeat;
            background-size: auto 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 24px rgba(0,0,0,.32);
        }
        #view-editor .canvas-node-menu {
            position: absolute;
            z-index: 20;
            width: 178px;
            padding: 12px;
            border: 1px solid #373b3f;
            border-radius: 12px !important;
            background: #27292b;
            color: #e8edf0;
            box-shadow: 0 18px 36px rgba(0,0,0,.38);
        }
        #view-editor .canvas-node-menu.hidden {
            display: none;
        }
        #view-editor .canvas-node-menu-title {
            margin-bottom: 8px;
            color: #9ca5ab;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .canvas-node-menu-section {
            margin-top: 10px;
            margin-bottom: 6px;
            color: #737d84;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .canvas-node-menu-item {
            width: 100%;
            min-height: 34px;
            padding: 0 4px;
            border-radius: 6px !important;
            display: grid;
            grid-template-columns: 23px minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px;
            color: #eef3f5;
            text-align: left;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .canvas-node-menu-item:hover {
            background: #34383b;
        }
        #view-editor .canvas-node-menu-icon {
            width: 19px;
            height: 19px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #e8edf0;
            font-size: 13px;
        }
        #view-editor .canvas-node-menu-badge {
            height: 17px;
            padding: 0 5px;
            border-radius: 4px !important;
            background: #354048;
            color: #9ed7e6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 900;
        }
        #view-editor .canvas-node-menu-arrow {
            color: #8d969d;
            font-size: 15px;
        }
        #view-editor .canvas-node-layer {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
        }
        #view-editor .canvas-node-layer > .canvas-text-node,
        #view-editor .canvas-node-layer > .canvas-generic-node {
            pointer-events: auto;
        }
        #view-editor .canvas-box-layer {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }
        #view-editor .canvas-network-box {
            position: absolute;
            min-width: 220px;
            min-height: 170px;
            border: 1px solid rgba(203,178,120,.45);
            border-radius: 50px !important;
            background: rgba(52,50,44,.23);
            pointer-events: auto;
            cursor: move;
            user-select: none;
            transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
        }
        #view-editor .canvas-network-box.selected {
            border: 2px solid var(--box-contrast, #e9d08c) !important;
            box-shadow: 0 0 0 1px var(--box-contrast-glow, rgba(233,208,140,.45)), 0 0 22px var(--box-contrast-glow, rgba(233,208,140,.5));
            background: transparent !important;
        }
        #view-editor .canvas-network-box-resize {
            position: absolute;
            z-index: 9;
            background: transparent;
            touch-action: none;
        }
        #view-editor .canvas-network-box-resize.corner {
            width: 14px;
            height: 14px;
        }
        #view-editor .canvas-network-box-resize.corner::after {
            content: '';
            position: absolute;
            left: 3px;
            top: 3px;
            width: 8px;
            height: 8px;
            border: 1px solid rgba(255, 255, 255, .6);
            border-radius: 2px;
            background: rgba(30, 33, 36, .88);
        }
        #view-editor .canvas-network-box-resize.edge {
            height: 10px;
        }
        #view-editor .canvas-network-box-resize.edge-v {
            width: 10px;
        }
        #view-editor .canvas-network-box-resize.edge::after {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            top: 4px;
            height: 2px;
            border-radius: 2px;
            background: rgba(255, 255, 255, .35);
        }
        #view-editor .canvas-network-box-resize.edge-v::after {
            left: 4px;
            right: 4px;
            top: 10px;
            bottom: 10px;
            width: 2px;
            height: auto;
            background: rgba(255, 255, 255, .35);
        }
        #view-editor .canvas-network-box-resize[data-resize="nw"],
        #view-editor .canvas-network-box-resize[data-resize="se"] { cursor: nwse-resize; left: -7px; top: -7px; }
        #view-editor .canvas-network-box-resize[data-resize="ne"],
        #view-editor .canvas-network-box-resize[data-resize="sw"] { cursor: nesw-resize; right: -7px; top: -7px; }
        #view-editor .canvas-network-box-resize[data-resize="sw"] { top: auto; bottom: -7px; }
        #view-editor .canvas-network-box-resize[data-resize="se"] { top: auto; bottom: -7px; }
        #view-editor .canvas-network-box-resize[data-resize="n"] { cursor: ns-resize; left: 12px; right: 12px; top: -5px; }
        #view-editor .canvas-network-box-resize[data-resize="s"] { cursor: ns-resize; left: 12px; right: 12px; top: auto; bottom: -5px; }
        #view-editor .canvas-network-box-resize[data-resize="e"] { cursor: ew-resize; top: 12px; bottom: 12px; right: -5px; }
        #view-editor .canvas-network-box-resize[data-resize="w"] { cursor: ew-resize; top: 12px; bottom: 12px; left: -5px; }
        #view-editor .canvas-network-box-title {
            position: absolute;
            left: 16px;
            top: -38px;
            min-height: 0;
            padding: 0 4px;
            display: flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            border-radius: 0;
            color: #7a8388;
            font-size: 25px;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 62%;
            cursor: text;
            outline: none;
            user-select: text;
        }
        #view-editor .canvas-network-box-title.editing {
            cursor: text;
            caret-color: #7a8388;
        }
        #view-editor .canvas-network-box-collapsed {
            position: absolute;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: 2070px;
            min-width: 585px;
            height: 225px;
            padding: 0 108px;
            border-radius: 114px !important;
            box-shadow: 0 4px 16px rgba(0,0,0,.38);
            color: #ffffff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 108px;
            font-weight: 700;
            letter-spacing: 3px;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            pointer-events: auto;
            transition: border-color .12s ease, box-shadow .12s ease;
        }
        #view-editor .canvas-network-box-collapsed.selected {
            border: 2px solid var(--box-contrast, #e9d08c) !important;
            box-shadow: 0 0 0 2px var(--box-contrast-glow, rgba(233,208,140,.25)), 0 0 22px var(--box-contrast-glow, rgba(233,208,140,.55)), 0 6px 20px rgba(0,0,0,.45);
        }
        #view-editor .canvas-network-box-collapsed-name {
            max-width: 1200px;
            color: #ffffff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 90px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        #view-editor .canvas-network-box-title .canvas-box-title-icon,
        #view-editor .canvas-network-box-collapsed-name .canvas-box-title-icon {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
            display: block;
        }
        #view-editor .canvas-network-box-title .canvas-box-title-icon {
            width: 22px;
            height: 22px;
        }
        #view-editor .canvas-network-box-collapsed-layers {
            position: absolute;
            left: 50%;
            bottom: calc(100% + 10px);
            transform: translateX(-50%);
            padding: 2px 16px;
            border-radius: 999px !important;
            background: rgba(20,22,24,.88);
            color: #ffd27d;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 28px;
            font-weight: 700;
            white-space: nowrap;
            pointer-events: none;
            z-index: 4;
        }
        #view-editor .canvas-network-box-collapsed-port {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50% !important;
            border: 4px solid rgba(255,255,255,.9);
            background: rgba(20,18,14,.82);
            color: #ffffff;
            font-size: 58px;
            font-weight: 700;
            line-height: 1;
            pointer-events: none;
        }
        #view-editor .canvas-network-box-collapsed-port.input {
            left: -45px;
        }
        #view-editor .canvas-network-box-collapsed-port.output {
            right: -45px;
        }
        #view-editor .canvas-network-box-collapsed-port.output {
            pointer-events: auto;
            cursor: crosshair;
        }
        #view-editor .canvas-network-box-output-port {
            position: absolute;
            right: -50px;
            top: 50%;
            width: 100px;
            height: 100px;
            padding: 0;
            border: 2px solid #d7bb7a;
            border-radius: 50% !important;
            background: rgba(20,22,24,.35);
            color: #d7bb7a;
            cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13.5' fill='%2316181a' stroke='%23d9bc7a' stroke-width='2.5'/><circle cx='11' cy='13' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='21' cy='19' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/></svg>") 16 16, copy;
            z-index: 4;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 12px rgba(224,195,129,.32);
        }
        #view-editor .canvas-network-box-output-port:hover {
            border-color: #f1d99e;
            color: #f1d99e;
            background: rgba(38,41,45,.92);
            box-shadow: 0 0 14px rgba(244,216,154,.5);
        }
        #canvas-box-context-menu {
            z-index: 300;
        }
        #canvas-box-context-menu.hidden { display: none; }
        #canvas-box-context-menu button {
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        #canvas-box-color-picker {
            position: fixed;
            z-index: 301;
            width: 232px;
            padding: 10px;
            border: 1px solid #4a5055;
            border-radius: 8px !important;
            background: #232527;
            box-shadow: 0 14px 30px rgba(0,0,0,.42);
        }
        .cb-modal {
            width: min(92vw, 1100px);
            max-height: 86vh;
            display: flex;
            flex-direction: column;
            background: #1c1e20;
            border: 1px solid #3a4046;
            border-radius: 14px !important;
            box-shadow: 0 20px 50px rgba(0,0,0,.5);
            overflow: hidden;
        }
        .cb-modal-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: #202326;
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
        }
        .cb-modal-head button {
            width: 36px;
            height: 36px;
            border-radius: 8px !important;
            border: 1px solid #4a5055;
            background: transparent;
            color: #ffffff;
            font-size: 22px;
            cursor: pointer;
        }
        .cb-modal-head button:hover {
            background: #33383c;
        }
        .cb-modal-body {
            padding: 18px;
            overflow: auto;
            color: #dde3e6;
            font-size: 15px;
            line-height: 1.7;
        }
        .cb-modal-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0 16px;
        }
        .cb-modal-body th,
        .cb-modal-body td {
            border: 1px solid #3a4046;
            padding: 8px 12px;
            text-align: left;
            vertical-align: top;
        }
        .cb-modal-body th {
            background: #26292c;
            color: #e8c46a;
            font-weight: 700;
        }
        .cb-modal-body p {
            margin: 4px 0 10px;
        }
        .cb-modal-body h2,
        .cb-modal-body h3,
        .cb-modal-body h4 {
            margin: 14px 0 6px;
            color: #e8c46a;
            font-weight: 700;
        }
        .cb-modal-body h2 {
            font-size: 19px;
        }
        .cb-modal-body h3 {
            font-size: 17px;
        }
        .cb-modal-body h4 {
            font-size: 16px;
        }
        #canvas-box-color-picker.hidden { display: none; }
        #canvas-box-color-picker .canvas-box-color-title {
            margin-bottom: 8px;
            color: #cfd6d9;
            font-size: 13px;
            font-weight: 900;
        }
        #canvas-box-color-picker .canvas-box-color-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 7px;
        }
        #canvas-box-color-picker .canvas-box-color-swatch {
            height: 22px;
            border-radius: 5px !important;
            border: 1px solid rgba(255,255,255,.25);
            cursor: pointer;
        }
        #canvas-box-color-picker .canvas-box-color-swatch:hover {
            transform: scale(1.15);
            box-shadow: 0 0 8px rgba(255,255,255,.35);
        }
        #view-editor .canvas-large-text-editor {
            position: absolute;
            z-index: 24;
            display: flex;
            flex-direction: column;
            width: min(700px, calc(100% - 32px));
            height: min(480px, calc(100% - 32px));
            padding: 14px;
            border: 0;
            border-radius: 21px !important;
            background: #242729;
            box-shadow: 0 20px 48px rgba(0,0,0,.55);
        }
        #view-editor .canvas-large-text-editor.hidden { display: none; }
        #view-editor .canvas-large-text-editor-title {
            height: 26px;
            color: #cbd4d8;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 700;
            cursor: move;
            user-select: none;
        }
        #view-editor .canvas-large-text-editor textarea {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 14px;
            resize: none;
            border: 0;
            outline: 0;
            background: transparent !important;
            color: transparent !important;
            caret-color: #ffffff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            cursor: text;
            user-select: text;
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
        }
        #view-editor .workspace-panel .canvas-large-text-editor textarea {
            color: transparent !important;
            background: transparent !important;
        }
        #view-editor .canvas-large-text-editor textarea::-webkit-scrollbar {
            display: none;
        }
        #view-editor .canvas-large-text-editor textarea::-webkit-scrollbar-thumb {
            background: rgba(180,190,200,.35);
            border-radius: 4px;
        }
        #view-editor .canvas-large-text-editor textarea:focus { border-color: transparent; }
        #view-editor .canvas-large-prompt-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            height: auto;
            aspect-ratio: auto;
            border: 0;
            border-radius: 16px !important;
            background: #1a1c1d;
            overflow: hidden;
        }
        #view-editor .canvas-large-prompt-wrap .canvas-prompt-highlight {
            padding: 14px;
            color: #edf1f2;
            font-size: 16px;
            line-height: 1.7;
        }
        #view-editor .canvas-large-text-editor-resize {
            position: absolute;
            width: 12px;
            height: 12px;
            z-index: 26;
            border-radius: 2px !important;
            background: rgba(190,200,210,.45);
        }
        #view-editor .canvas-large-text-editor-resize:hover {
            background: rgba(220,230,240,.85);
        }
        #view-editor .canvas-large-text-editor-resize.nw { left: -5px; top: -5px; cursor: nwse-resize; }
        #view-editor .canvas-large-text-editor-resize.ne { right: -5px; top: -5px; cursor: nesw-resize; }
        #view-editor .canvas-large-text-editor-resize.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
        #view-editor .canvas-large-text-editor-resize.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
        #view-editor .canvas-large-text-editor .canvas-video-ref-picker {
            left: 50%;
            right: auto;
            top: 40px;
            bottom: auto;
            transform: translateX(-50%);
            z-index: 999;
            width: min(34%, 520px);
            max-height: 1024px;
        }
        #view-editor .canvas-connection-layer {
            position: absolute;
            z-index: 1;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
            pointer-events: none;
            shape-rendering: geometricPrecision;
        }
        #view-editor .canvas-connection-layer path {
            shape-rendering: geometricPrecision;
        }
        #view-editor .canvas-connection-path {
            fill: none;
            stroke: #e7d7a5;
            stroke-width: 3;
            vector-effect: non-scaling-stroke;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 1;
            filter: none;
            pointer-events: stroke;
            cursor: pointer;
        }
        #view-editor .canvas-connection-hit-area {
            fill: none;
            stroke: rgba(0,0,0,.01);
            stroke-width: 20;
            vector-effect: non-scaling-stroke;
            pointer-events: stroke;
            cursor: pointer;
        }
        #view-editor .canvas-connection-visible { pointer-events: none; }
        #view-editor .canvas-connection.canvas-connection-capsule {
            filter: brightness(3);
        }
        #view-editor .canvas-connection-locked {
            pointer-events: none;
            opacity: .72;
        }
        #view-editor .canvas-connection:hover { filter: drop-shadow(0 0 5px rgba(255,238,180,.95)); }
        #view-editor .canvas-connection:hover .canvas-connection-path { stroke: #ffedb0; stroke-width: 2.8; opacity: 1; }
        #view-editor .canvas-connection-path.reference { stroke: #6d8b9d; stroke-width: 2.8; }
        #view-editor .canvas-connection.is-active .canvas-connection-path {
            stroke: #ffe9a3;
            stroke-width: 2.8;
            opacity: 1;
        }
        #view-editor .canvas-connection.is-active { filter: drop-shadow(0 0 6px rgba(255,236,170,.95)); }
        #view-editor .canvas-connection.is-selected .canvas-connection-path {
            stroke: #fff3c4;
            stroke-width: 3;
            opacity: 1;
        }
        #view-editor .canvas-connection.is-selected { filter: drop-shadow(0 0 7px rgba(255,241,190,1)); }
        #view-editor .canvas-connection-hint {
            position: fixed;
            z-index: 90;
            padding: 6px 12px;
            border: 1px solid rgba(240,207,133,.35);
            border-radius: 8px !important;
            background: rgba(18,20,22,.9);
            color: #f0cf85;
            font-size: 12px;
            font-weight: 600;
            pointer-events: none;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0,0,0,.38);
            transform: translate(14px, 16px);
        }
        #view-editor .canvas-connection-hint.hidden { display: none; }
        #view-editor .canvas-connection-draft { stroke: #d7bb7a; stroke-width: 1.35; stroke-dasharray: 7 6; opacity: .76; pointer-events: none; vector-effect: non-scaling-stroke; }
        .canvas-cut-trail {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 390;
            pointer-events: none;
        }
        body.canvas-connecting,
        body.canvas-connecting * { cursor: none !important; }
        #canvas-drag-cursor {
            position: fixed;
            z-index: 400;
            width: 44px;
            height: 44px;
            pointer-events: none;
            display: none;
            transform: translate(-50%, -50%);
        }
        body.canvas-connecting #canvas-drag-cursor { display: block; }
        #canvas-drag-cursor svg {
            width: 100%;
            height: 100%;
            display: block;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
        }
        #canvas-drag-cursor .drag-eye-group {
            transform-box: view-box;
        }
        #canvas-drag-cursor .eye-shape { display: none; }
        #canvas-drag-cursor .drag-eye-group[data-shape="circle"] .eye-circle,
        #canvas-drag-cursor .drag-eye-group[data-shape="square"] .eye-square,
        #canvas-drag-cursor .drag-eye-group[data-shape="line"] .eye-line,
        #canvas-drag-cursor .drag-eye-group[data-shape="dot"] .eye-dot { display: block; }
        #canvas-drag-cursor .drag-eye-group[data-shape="line"] .eye-pupil,
        #canvas-drag-cursor .drag-eye-group[data-shape="dot"] .eye-pupil { display: none; }
        body.canvas-cut-mode,
        body.canvas-cut-mode * {
            cursor: none !important;
        }
        #canvas-cut-cursor {
            position: fixed;
            z-index: 391;
            width: 30px;
            height: 30px;
            pointer-events: none;
            display: none;
            transform: translate(-50%, -50%);
        }
        body.canvas-cut-mode #canvas-cut-cursor {
            display: block;
        }
        #canvas-cut-cursor svg {
            width: 30px;
            height: 30px;
            display: block;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
        }
        #view-editor .canvas-connection.cut-marked .canvas-connection-path {
            stroke: #7fc4ff;
            stroke-width: 3.6;
            opacity: 1;
        }
        #view-editor .canvas-connection.cut-marked {
            filter: drop-shadow(0 0 5px rgba(127,196,255,.9));
        }
        #view-editor .canvas-node-port.is-connecting {
            background: #fff0bd;
            box-shadow: 0 0 13px rgba(244,216,154,.95);
        }
        #view-editor .canvas-node-port.output.is-connecting {
            background: transparent;
            box-shadow: none;
            filter: drop-shadow(0 0 8px rgba(244,216,154,.95));
        }
        #view-editor .canvas-node-port.output.is-connecting::before {
            border-left-color: #fff0bd;
        }
        #view-editor .canvas-selection-marquee {
            position: absolute;
            z-index: 3;
            display: none;
            pointer-events: none;
            border: 1px solid #7fb7ea;
            background: rgba(74, 142, 198, .16);
        }
        #view-editor .canvas-text-node {
            position: absolute;
            z-index: 2;
            width: 316px;
            color: #f3f5f6;
            user-select: none;
        }
        #view-editor .canvas-text-node.selected,
        #view-editor .canvas-generic-node.selected { z-index: 6; }
        #view-editor .canvas-text-node.is-active-editor,
        #view-editor .canvas-generic-node.is-active-editor { z-index: 12; }
        #view-editor .canvas-text-node.selected .canvas-text-node-card,
        #view-editor .canvas-text-node.selected .canvas-text-node-result {
            border: 1px solid #d8b96e;
            box-shadow: 0 0 0 1px rgba(238,214,150,.35), 0 18px 34px rgba(0,0,0,.3);
        }
        #view-editor .canvas-text-node-head {
            position: relative;
            min-height: 56px;
            height: auto;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 1px 7px;
            color: #aeb7bd;
            cursor: grab;
            font-size: 40px;
            font-weight: 900;
            background: transparent !important;
            border-bottom: 0;
        }
        #view-editor .canvas-image-node .canvas-text-node-head {
            min-height: 40px;
            padding: 0 1px 4px;
            align-items: center;
        }
        #view-editor .canvas-text-node-head:active {
            cursor: grabbing;
        }
        #view-editor .canvas-text-node-head-icon {
            width: 50px;
            height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 50px;
            line-height: 1;
            flex-shrink: 0;
        }
        #view-editor .canvas-text-node-head-icon svg {
            width: 50px;
            height: 50px;
            display: block;
        }
        #view-editor .canvas-text-node-name {
            width: 100%;
            min-width: 0;
            padding: 0;
            border: 0;
            outline: 0;
            background: transparent !important;
            color: #ffffff;
            font-size: 40px;
            font-weight: 900;
            line-height: 1.1;
        }
        #view-editor .canvas-text-node-card {
            position: relative;
            min-height: 314px;
            padding: 34px 22px 22px;
            border: 0;
            box-shadow: inset 0 0 0 0.5px rgba(43,45,47,.5), 0 14px 30px rgba(0,0,0,.24);
            border-radius: 11px !important;
            background: #252627;
            transition: border-color .15s ease, box-shadow .15s ease;
            cursor: pointer;
        }
        #view-editor .canvas-text-node-placeholder {
            width: 52px;
            margin: 10px auto 28px;
            display: grid;
            gap: 6px;
        }
        #view-editor .canvas-text-node-placeholder i {
            display: block;
            height: 5px;
            background: #585a5c;
        }
        #view-editor .canvas-text-node-placeholder i:nth-child(2) { width: 88%; }
        #view-editor .canvas-text-node-placeholder i:nth-child(3) { width: 60%; }
        #view-editor .canvas-text-node-try {
            margin-bottom: 10px;
            color: #9ca6ab;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-text-node-mode {
            width: 100%;
            height: 35px;
            padding: 0 9px;
            border: 1px solid transparent;
            border-radius: 6px !important;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #f3f5f6;
            text-align: left;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
        }
        #view-editor .canvas-text-node-mode:hover,
        #view-editor .canvas-text-node-mode.active {
            border-color: #50565a;
            background: #303234;
        }
        #view-editor .canvas-text-node-mode-icon {
            width: 15px;
            color: #eef2f3;
            text-align: center;
            font-size: 13px;
        }
        #view-editor .canvas-node-port {
            position: absolute;
            top: 50%;
            width: 5px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 2px !important;
            background: #d7bb7a;
            color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-50%);
            box-shadow: 0 0 7px rgba(224,195,129,.38);
            font-size: 0;
            line-height: 1;
            cursor: crosshair;
            transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, filter .25s ease;
        }
        #view-editor .canvas-node-port.input {
            left: -17px;
            width: 8px;
            height: 45px;
            border-radius: 3px !important;
        }
        #view-editor .canvas-node-port.output {
            right: -39px;
            width: 52px;
            height: 58px;
            border: 0;
            border-radius: 0 !important;
            background: transparent;
            box-shadow: none;
            filter: none;
            cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13.5' fill='%2316181a' stroke='%23d9bc7a' stroke-width='2.5'/><circle cx='11' cy='13' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='21' cy='19' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/></svg>") 16 16, copy;
        }
        #view-editor .canvas-node-port.output::before {
            content: '';
            position: absolute;
            right: 50%;
            top: 50%;
            width: 0;
            height: 0;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            border-left: 26px solid #d7bb7a;
            transform: translate(50%, -50%);
            filter: drop-shadow(0 0 4px rgba(224,195,129,.45));
        }
        #view-editor .canvas-node-port:hover {
            background: #f1d99e;
            box-shadow: 0 0 10px rgba(244,216,154,.78);
        }
        #view-editor .canvas-text-node:hover .canvas-node-port.input,
        #view-editor .canvas-generic-node:hover .canvas-node-port.input {
            transform: translateY(-50%) scale(1.2);
            box-shadow: 0 0 12px rgba(244,216,154,.9);
        }
        #view-editor .canvas-text-node:hover .canvas-node-port.output,
        #view-editor .canvas-generic-node:hover .canvas-node-port.output {
            transform: translateY(-50%) scale(1.2);
            filter: drop-shadow(0 0 8px rgba(244,216,154,.95));
        }
        #view-editor .canvas-node-port.output:hover {
            background: transparent;
            box-shadow: none;
            filter: drop-shadow(0 0 7px rgba(244,216,154,.82));
        }
        #view-editor .canvas-node-port.output:hover::before {
            border-left-color: #f1d99e;
        }
        #view-editor .canvas-node-output-hotzone {
            position: absolute;
            top: 0;
            right: 0;
            width: 10%;
            height: 100%;
            z-index: 2;
            cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13.5' fill='%2316181a' stroke='%23d9bc7a' stroke-width='2.5'/><circle cx='11' cy='13' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='21' cy='19' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/></svg>") 16 16, copy;
            border-radius: 999px 0 0 999px;
            background: transparent;
            box-shadow: none;
            transition: background .2s ease, box-shadow .2s ease;
        }
        #view-editor .canvas-node-output-hotzone:hover {
            background: linear-gradient(180deg, rgba(216,183,122,.32), rgba(216,183,122,.15));
            box-shadow: inset 0 0 16px rgba(240,207,133,.24), 0 0 0 1px rgba(240,207,133,.3);
        }
        #view-editor .canvas-text-node-composer {
            position: relative;
            width: 2160px;
            min-height: 160px;
            margin: 16px 0 0;
            left: 50%;
            zoom: var(--canvas-input-scale, 1);
            transform: translateX(-50%);
            padding: 12px 14px 10px;
            border: 0;
            border-radius: 30px !important;
            background: #292a2b;
            box-shadow: 0 12px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-text-node-composer.collapsed {
            display: none;
        }
        #view-editor .canvas-text-node.is-dragging .canvas-text-node-composer { visibility: hidden; }
        #view-editor .canvas-text-node.is-dragging,
        #view-editor .canvas-generic-node.is-dragging {
            transition: none !important;
        }
        #view-editor .canvas-text-node-input {
            width: 100%;
            height: auto;
            aspect-ratio: 2132 / 708;
            box-sizing: border-box;
            padding: 6px 8px;
            resize: none;
            border: 0;
            outline: 0;
            border-radius: 24px !important;
            background: #181b1d;
            color: #e8edef;
            caret-color: #ffffff !important;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 57px;
            line-height: 1.2;
            cursor: text;
            user-select: text;
            overflow-y: auto;
        }
        #view-editor .canvas-text-node-input::placeholder { color: #70777c; }
        #view-editor .canvas-text-node-input::placeholder { color: #70777c; }
        #view-editor .canvas-text-node-input[readonly] {
            cursor: text;
            user-select: text;
        }
        #view-editor .canvas-text-node-actions {
            min-height: 69px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        #view-editor .canvas-text-node-model {
            width: fit-content;
            height: 60px;
            max-width: none;
            padding: 0 21px;
            border: 0;
            border-radius: 9px !important;
            outline: 0;
            appearance: none;
            overflow: hidden;
            background: #202326;
            color: #eef2f3;
            font-size: 30px;
            font-weight: 900;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #view-editor .canvas-text-node-action-group {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #adb5b8;
        }
        #view-editor .canvas-text-node-icon-btn {
            width: 44px;
            height: 44px;
            border-radius: 9px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #b8c0c3;
            font-size: 24px;
        }
        #view-editor .canvas-text-node-icon-btn:hover { background: #3a3d40; color: #fff; }
        #view-editor .canvas-text-node-save {
            width: 60px;
            height: 60px;
            border-radius: 50% !important;
            background: #c8a96a;
            color: #24201a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 900;
        }
        #view-editor .canvas-text-node-save:hover { background: #eed49a; }
        #view-editor .canvas-text-node-tools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 54px;
            padding: 0 12px;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        #view-editor .canvas-text-node-tools-label {
            color: #c8a96a;
            font-size: 22px;
            font-weight: 700;
        }
        #view-editor .canvas-text-node-tools-btn {
            height: 42px;
            padding: 0 22px;
            border: 1px solid rgba(232,196,106,.55);
            border-radius: 10px !important;
            background: rgba(232,196,106,.12);
            color: #e8c46a;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s ease;
        }
        #view-editor .canvas-text-node-tools-btn:hover {
            background: rgba(232,196,106,.24);
        }
        #view-editor .canvas-text-node-tools-btn.breakdown {
            margin-left: auto;
        }
        #view-editor .canvas-text-node-table-btn {
            position: absolute;
            right: 14px;
            top: 12px;
            height: 34px;
            padding: 0 12px;
            border: 1px solid rgba(232,196,106,.55);
            border-radius: 10px !important;
            background: rgba(232,196,106,.12);
            color: #e8c46a;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            z-index: 3;
            transition: background .2s ease;
        }
        #view-editor .canvas-text-node-table-btn:hover {
            background: rgba(232,196,106,.24);
        }
        #view-editor .canvas-text-node-sync-btn {
            position: absolute;
            right: 118px;
            top: 12px;
            height: 34px;
            padding: 0 14px;
            border: 1px solid rgba(140,190,255,.55);
            border-radius: 10px !important;
            background: rgba(140,190,255,.12);
            color: #8fc8ff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            z-index: 3;
            transition: background .2s ease;
        }
        #view-editor .canvas-text-node-sync-btn:hover {
            background: rgba(140,190,255,.24);
        }
        #view-editor .canvas-generic-node {
            position: absolute;
            width: 316px;
            color: #f3f5f6;
            user-select: none;
        }
        #view-editor .canvas-generic-node-card {
            position: relative;
            min-height: 206px;
            padding: 27px 22px;
            border: 0;
            box-shadow: inset 0 0 0 0.5px rgba(43,45,47,.5), 0 14px 30px rgba(0,0,0,.24);
            border-radius: 11px !important;
            background: #252627;
            cursor: pointer;
        }
        #view-editor .canvas-generic-node.selected .canvas-generic-node-card {
            border: 1px solid #d8b96e;
            box-shadow: 0 0 0 1px rgba(238,214,150,.35), 0 18px 34px rgba(0,0,0,.3);
        }
        #view-editor .canvas-generic-node-symbol {
            width: 104px;
            height: 104px;
            margin: 12px auto 16px;
            border: 0;
            border-radius: 9px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #b8c3c8;
            background: #303234;
            font-size: 24px;
        }
        #view-editor .canvas-generic-node-label {
            color: #e8edef;
            text-align: center;
            font-size: 13px;
            font-weight: 900;
        }
        /* 无限画布中的导演台节点专属外观；不影响 3D 导演台内部界面。 */
        #view-editor .canvas-director-node { width: 420px; }
        #view-editor .canvas-director-node .canvas-text-node-head-icon {
            width: 30px;
            height: 30px;
            color: #f5d88e;
        }
        #view-editor .canvas-director-node .canvas-text-node-head-icon svg {
            display: block;
            width: 30px;
            height: 30px;
        }
        #view-editor .canvas-director-node-card {
            position: relative;
            width: 420px;
            min-height: 236px;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 22px !important;
            background: radial-gradient(circle at 76% 18%, rgba(74,167,211,.18), transparent 34%), linear-gradient(145deg, #24272a 0%, #151719 62%, #101113 100%);
            box-shadow: 0 22px 42px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.055);
            cursor: pointer;
        }
        #view-editor .canvas-director-node.selected .canvas-director-node-card {
            border-color: #d8b96e;
            background: radial-gradient(circle at 76% 18%, rgba(74,167,211,.18), transparent 34%), linear-gradient(145deg, #24272a 0%, #151719 62%, #101113 100%) !important;
            box-shadow: 0 0 0 1px rgba(238,214,150,.36), 0 22px 46px rgba(0,0,0,.42), 0 0 28px rgba(216,185,110,.12);
        }
        #view-editor .canvas-director-node-topline {
            position: absolute;
            z-index: 3;
            top: 14px;
            left: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
        }
        #view-editor .canvas-director-node-eyebrow {
            color: rgba(255,255,255,.58);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .18em;
        }
        #view-editor .canvas-director-node-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,.72);
            font-size: 10px;
        }
        #view-editor .canvas-director-node-status::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #e0c47f;
            box-shadow: 0 0 9px rgba(224,196,127,.72);
        }
        #view-editor .canvas-director-node-viewport {
            position: absolute;
            inset: 0 0 72px;
            overflow: hidden;
            background: linear-gradient(180deg, #111a20 0%, #101519 55%, #171719 100%);
        }
        #view-editor .canvas-director-node-grid {
            position: absolute;
            left: -12%;
            right: -12%;
            bottom: -45%;
            height: 105%;
            opacity: .55;
            transform: perspective(230px) rotateX(59deg);
            transform-origin: center bottom;
            background-image: linear-gradient(rgba(80,153,194,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(80,153,194,.34) 1px, transparent 1px);
            background-size: 28px 28px;
            -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 100%);
            mask-image: linear-gradient(to top, #000 34%, transparent 100%);
        }
        #view-editor .canvas-director-node-grid::before,
        #view-editor .canvas-director-node-grid::after {
            content: '';
            position: absolute;
            background: rgba(232,203,135,.92);
            box-shadow: 0 0 7px rgba(232,203,135,.35);
        }
        #view-editor .canvas-director-node-grid::before { top: 0; bottom: 0; left: 50%; width: 2px; }
        #view-editor .canvas-director-node-grid::after { top: 50%; left: 0; right: 0; height: 2px; }
        #view-editor .canvas-director-node-focus {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 112px;
            height: 76px;
            border: 1px solid rgba(246,224,166,.68);
            border-radius: 6px;
            transform: translate(-50%, -43%);
            box-shadow: inset 0 0 22px rgba(216,185,110,.055);
        }
        #view-editor .canvas-director-node-focus::before,
        #view-editor .canvas-director-node-focus::after { content: ''; position: absolute; background: rgba(246,224,166,.72); }
        #view-editor .canvas-director-node-focus::before { top: 50%; left: -8px; right: -8px; height: 1px; }
        #view-editor .canvas-director-node-focus::after { top: -8px; bottom: -8px; left: 50%; width: 1px; }
        #view-editor .canvas-director-node-logo {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            display: flex;
            align-items: baseline;
            transform: translate(-50%, -50%);
            font-family: Arial Black, Impact, sans-serif;
            font-size: 42px;
            font-style: italic;
            font-weight: 900;
            letter-spacing: -7px;
            filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
        }
        #view-editor .canvas-director-node-logo .three { color: #57c6e8; }
        #view-editor .canvas-director-node-logo .dee { color: #f2c969; }
        #view-editor .canvas-director-node-footer {
            position: absolute;
            z-index: 4;
            left: 0;
            right: 0;
            bottom: 0;
            height: 72px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 14px 0 17px;
            border-top: 1px solid rgba(255,255,255,.08);
            background: #202224;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
        }
        #view-editor .canvas-director-node-copy { min-width: 0; flex: 1; }
        #view-editor .canvas-director-node-title {
            color: #fffaf0;
            font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 23px;
            letter-spacing: .02em;
        }
        #view-editor .canvas-director-node-subtitle {
            margin-top: 3px;
            color: #c9c9c6;
            font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
            font-size: 13px;
            font-weight: 400;
            line-height: 18px;
            letter-spacing: .01em;
        }
        #view-editor .canvas-director-node-enter {
            flex: 0 0 auto;
            height: 36px;
            padding: 0 17px;
            border: 1px solid rgba(235,207,142,.46);
            border-radius: 18px;
            color: #f7e8bd;
            background: rgba(216,185,110,.13);
            font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: color .18s ease, background .18s ease, transform .18s ease;
        }
        #view-editor .canvas-director-node-enter:hover { color: #282116; background: #e2c57e; transform: translateY(-1px); }
        #view-editor .canvas-director-node .canvas-node-port.input { background: #59c5e6; }
        #view-editor .canvas-director-node .canvas-node-port.output { color: #efcf80; }
        #view-editor .canvas-audio-node {
            width: 560px;
        }
        #view-editor .canvas-audio-node .canvas-generic-node-card {
            min-height: 104px;
            padding: 12px 16px;
            border-radius: 11px !important;
            background: #252627;
        }
        #view-editor .canvas-audio-node .canvas-audio-node-empty {
            min-height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-audio-upload {
            min-height: 32px;
            padding: 0 14px;
            border: 1px solid #58a9cf;
            border-radius: 7px !important;
            background: #2e363b;
            color: #eaf3f8;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }
        #view-editor .canvas-audio-upload:hover {
            border-color: #82c7e8;
            background: #3a454c;
        }
        #view-editor .canvas-audio-node-body {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        #view-editor .canvas-audio-wave-wrap {
            position: relative;
            height: 76px;
            background: #1b1d1f;
            border: 1px solid #343a3f;
            border-radius: 8px;
            overflow: hidden;
        }
        #view-editor .canvas-audio-wave {
            width: 100%;
            height: 100%;
            display: block;
        }
        #view-editor .canvas-audio-progress {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: rgba(88, 169, 207, 0.16);
            pointer-events: none;
        }
        #view-editor .canvas-audio-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 9px;
        }
        #view-editor .canvas-audio-play {
            width: 34px;
            height: 34px;
            padding: 0;
            border: 1px solid #58a9cf;
            border-radius: 50%;
            background: #2e363b;
            color: #eaf3f8;
            font-size: 14px;
            cursor: pointer;
        }
        #view-editor .canvas-audio-play:hover {
            border-color: #82c7e8;
            background: #3a454c;
        }
        #view-editor .canvas-audio-time {
            color: #cdd6db;
            font-size: 12px;
            font-weight: 700;
            min-width: 150px;
        }
        #view-editor .canvas-audio-trim-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #9aa6ad;
            font-size: 11px;
        }
        #view-editor .canvas-audio-trim-label input[type="range"] {
            width: 120px;
            accent-color: #58a9cf;
        }
        #view-editor .canvas-audio-apply {
            min-height: 28px;
            padding: 0 10px;
            border: 1px solid #4a5258;
            border-radius: 7px !important;
            background: #33383c;
            color: #eaf3f8;
            font-size: 11px;
            cursor: pointer;
        }
        #view-editor .canvas-audio-apply:hover {
            border-color: #58a9cf;
            background: #3a454c;
        }
        #view-editor .canvas-audio-node-status {
            min-height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #b7c4ca;
            font-size: 12px;
        }
        #view-editor .canvas-image-node-card {
            position: relative;
            box-sizing: border-box;
            height: 382px;
            min-height: 382px;
            padding: 8px;
            border: 0.5px solid rgba(84, 91, 98, .75);
            box-shadow: 0 14px 30px rgba(0,0,0,.24);
            border-radius: 11px !important;
            background: #252627;
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }
        #view-editor .canvas-generic-node.selected .canvas-image-node-card {
            border: 1px solid #d8b96e;
            box-shadow: 0 0 0 1px rgba(238,214,150,.35), 0 18px 34px rgba(0,0,0,.3);
        }
        #view-editor .canvas-generic-node.selected .canvas-image-node-card,
        #view-editor .canvas-generic-node.selected .canvas-generic-node-card,
        #view-editor .canvas-generic-node.selected .canvas-text-node-composer {
            background: rgba(37, 38, 39, .78);
            -webkit-backdrop-filter: blur(8px) saturate(1.2);
            backdrop-filter: blur(8px) saturate(1.2);
        }
        #view-editor .canvas-generic-node.selected .canvas-image-node-composer {
            background: #292a2b;
        }
        #view-editor .canvas-image-node-card.has-image {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            height: auto;
            min-height: 0;
        }
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output,
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output img {
            background: transparent !important;
        }
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output {
            border-radius: 0 !important;
            overflow: hidden;
            height: auto;
            flex: 0 0 auto;
        }
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output img {
            object-fit: contain;
        }
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output.is-image-loading,
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output.is-image-loading img {
            background: #3a3c3f !important;
        }
        #view-editor .canvas-generic-node.selected .canvas-image-node-card.has-image {
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            border: 1px solid #d8b96e !important;
            box-shadow: 0 0 0 1px rgba(238,214,150,.35), 0 18px 34px rgba(0,0,0,.3) !important;
        }
        #view-editor .canvas-image-node-preview {
            position: relative;
            height: 170px;
            overflow: hidden;
            border: 0;
            border-radius: 7px !important;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1c1f21;
            color: #8f9a9f;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #view-editor .canvas-image-node-progress {
            display: grid;
            justify-items: center;
            gap: 8px;
            color: #9ed0ff;
            font-variant-numeric: tabular-nums;
        }
        #view-editor .canvas-image-node-progress::before {
            content: "";
            width: 25px;
            height: 25px;
            border: 2px solid rgba(103,179,241,.25);
            border-top-color: #79c6ff;
            border-radius: 50% !important;
            animation: canvasImageNodeSpin 1s linear infinite;
        }
        @keyframes canvasImageNodeSpin { to { transform: rotate(1turn); } }
        #view-editor .canvas-image-node-meta {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #bfc8cc;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-composer {
            width: 480px;
            min-height: 138px;
            margin: 15px 0 0 -82px;
            padding: 13px 14px 10px;
            border: 0;
            border-radius: 10px !important;
            background: #292a2b;
            box-shadow: 0 12px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-generic-node.is-dragging .canvas-image-node-composer { visibility: hidden; }
        #view-editor .canvas-image-node-prompt {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 6px 8px;
            resize: none;
            border: 0;
            outline: 0;
            background: transparent;
            color: transparent !important;
            caret-color: #ffffff !important;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 57px;
            line-height: 1.2;
            cursor: text;
            user-select: text;
            overflow-y: auto;
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
        }
        #view-editor .workspace-panel .canvas-image-node-prompt {
            color: transparent !important;
            background: transparent !important;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar {
            display: none;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-track {
            background: transparent;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-thumb {
            background: rgba(180,190,200,.35);
            border-radius: 4px;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-thumb:hover {
            background: rgba(200,210,220,.55);
        }
        #view-editor .canvas-text-node-name:focus,
        #view-editor .canvas-image-node-prompt:focus,
        #view-editor .canvas-text-node-input:focus,
        #view-editor .canvas-text-node-output:focus {
            border-color: transparent !important;
            box-shadow: none !important;
            outline: none !important;
        }
        #view-editor .canvas-image-node-prompt::placeholder { color: #70777c; }
        #view-editor #workspace-canvas input,
        #view-editor #workspace-canvas textarea {
            caret-color: #ffffff;
        }
        #view-editor #canvas-large-text-editor-input,
        #view-editor .canvas-image-edit-text-input,
        #view-editor #canvas-image-edit-text-input {
            caret-color: #ffffff !important;
        }
        #view-editor .canvas-prompt-highlight {
            display: block;
        }
        #view-editor .canvas-prompt-wrap {
            position: relative;
            width: 100%;
            height: auto;
            aspect-ratio: 2132 / 708;
            border: 0;
            border-radius: 24px !important;
            background: #181b1d;
            overflow: hidden;
        }
        #view-editor .canvas-prompt-highlight {
            position: absolute;
            inset: 0;
            z-index: 0;
            box-sizing: border-box;
            padding: 6px 8px;
            overflow: hidden;
            color: #e8edef;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 57px;
            line-height: 1.2;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
            pointer-events: none;
        }
        #view-editor .canvas-prompt-ref-token {
            color: #8fc8ff;
        }
        #view-editor .canvas-image-node-linked-inputs {
            min-height: 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 12px;
        }
        #view-editor .canvas-image-node-link-chip {
            max-width: 285px;
            height: 36px;
            padding: 0 11px;
            border: 1px solid #514933;
            border-radius: 6px !important;
            background: #25231d;
            color: #ddc88e;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            font-size: 15px;
            white-space: nowrap;
        }
        #view-editor .canvas-image-node-link-chip.reference {
            border-color: #36536a;
            background: #1e292f;
            color: #afd5ec;
        }
        #view-editor .canvas-image-node-link-chip img {
            width: 24px;
            height: 24px;
            border-radius: 3px !important;
            object-fit: cover;
        }
        #view-editor .canvas-image-node-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        #view-editor .canvas-image-node-select {
            min-width: 0;
            max-width: 155px;
            height: 28px;
            border: 0;
            outline: 0;
            background: transparent;
            color: #e8edef;
            font-size: 11px;
        }
        #view-editor .canvas-image-node-ratio {
            width: 58px;
            height: 26px;
            border: 0;
            border-radius: 5px !important;
            background: #1f2224;
            color: #dce3e5;
            font-size: 11px;
            outline: none;
        }
        #view-editor .canvas-image-node-generate {
            width: 130px;
            height: 110px;
            border-radius: 18px !important;
            background: #c8a96a;
            color: #24201a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background-color .18s ease, box-shadow .18s ease;
        }
        #view-editor .canvas-image-node-generate svg {
            width: 58px;
            height: 58px;
            display: block;
        }
        #view-editor .canvas-image-node-generate:hover {
            background: #eed49a;
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(240,207,133,.25);
        }
        #view-editor .canvas-image-node-generate:active {
            transform: scale(.88);
            background: #e8cf8f;
            box-shadow: 0 0 0 3px rgba(240,207,133,.38), 0 5px 14px rgba(0,0,0,.28);
        }
        #view-editor .canvas-image-node-generate:disabled { opacity: .42; cursor: wait; }
        #view-editor #workspace-canvas button:not(.canvas-node-port.output) {
            border: 0 !important;
            border-top: 0 !important;
            border-bottom: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
        }
        #view-editor .canvas-image-node-source-toolbar {
            min-height: 24px;
            height: auto;
            margin: 0 0 4px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
        }
        #view-editor .canvas-image-node-source-btn {
            height: 27px;
            padding: 0 9px;
            border: 1px solid #4a5055;
            border-radius: 5px !important;
            background: #303234;
            color: #ffffff;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-source-btn:hover {
            border-color: #7f8a92;
            background: #3a3c3e;
        }
        #view-editor .canvas-image-node-source-tag {
            height: auto;
            padding: 0;
            border: 0;
            border-radius: 4px !important;
            display: inline-flex;
            align-items: center;
            color: #8f979b;
            background: transparent;
            font-size: 13px;
            font-weight: 600;
            margin-left: 4px;
        }
        #view-editor .canvas-image-node { width: 680px; }
        #view-editor .canvas-director-capture-node {
            width: 360px;
            transform-origin: 50% 50%;
            transition: left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1), transform .22s ease;
        }
        #view-editor .canvas-director-capture-node.is-collapsed {
            cursor: grab;
        }
        #view-editor .canvas-director-capture-node.is-collapsed.is-stack-dragging {
            cursor: grabbing;
        }
        #view-editor .canvas-director-capture-node.is-collapsed .canvas-text-node-head {
            opacity: 0;
            pointer-events: none;
        }
        #view-editor .canvas-director-capture-node.is-collapsed.is-stack-leader .canvas-text-node-head {
            opacity: 1;
        }
        #view-editor .canvas-director-capture-card {
            position: relative;
            width: 360px;
            height: 203px;
            padding: 6px;
            overflow: visible;
            border: 1px solid rgba(228, 207, 153, .48);
            border-radius: 14px !important;
            background: #232629;
            box-shadow: 0 13px 30px rgba(0, 0, 0, .42);
        }
        #view-editor .canvas-director-capture-node.is-expanded {
            cursor: default;
        }
        #view-editor .canvas-director-capture-board {
            position: absolute;
            top: 28px;
            left: -24px;
            z-index: -1;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 24px !important;
            background: #3a3d40;
            box-shadow: 0 20px 48px rgba(0, 0, 0, .38);
            pointer-events: none;
        }
        #view-editor .canvas-director-capture-card img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 9px !important;
            background: #151719;
            user-select: none;
            -webkit-user-drag: none;
        }
        #view-editor .canvas-director-capture-card.is-image-loading {
            background: #3a3c3f;
        }
        #view-editor .canvas-director-capture-node.is-collapsed:hover .canvas-director-capture-card {
            border-color: #e4cf99;
            box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(228, 207, 153, .24);
        }
        #view-editor .canvas-director-capture-count {
            position: absolute;
            right: 12px;
            bottom: 12px;
            min-width: 34px;
            height: 28px;
            padding: 0 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px !important;
            color: #272a2c;
            background: #e4cf99;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
        }
        #view-editor .canvas-director-capture-collapse {
            position: absolute;
            top: 24px;
            right: -26px;
            z-index: 40;
            width: 68px;
            height: 68px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 16px !important;
            color: #f3e7c4;
            background: transparent;
            box-shadow: none;
            cursor: pointer;
        }
        #view-editor .canvas-director-capture-collapse:hover {
            color: #e4cf99;
            background: transparent;
            transform: scale(1.08);
        }
        #view-editor .canvas-director-capture-collapse svg {
            width: 36px;
            height: 36px;
        }
        #view-editor .canvas-image-node .canvas-text-node-name.canvas-image-node-static-name {
            font-size: 25px;
            font-weight: 400;
            font-family: "Microsoft YaHei", sans-serif;
            color: #7a8388;
        }
        #view-editor .canvas-vr-node { width: 680px; }
        #view-editor .canvas-image-node-bubble-bar {
            position: absolute;
            top: -19px;
            left: 50%;
            transform: translateX(-50%) scale(.6);
            z-index: 30;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 44px;
            padding: 6px 10px;
            border: 0;
            border-radius: 10px !important;
            background: rgba(30, 33, 36, .45);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease, transform .25s cubic-bezier(.22, .8, .3, 1.15);
        }
        #view-editor .canvas-image-node.selected .canvas-image-node-bubble-bar {
            opacity: 1;
            transform: translateX(-50%) scale(1);
            pointer-events: auto;
        }
        #view-editor .canvas-image-node-bubble-bar.hidden {
            display: none;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        #view-editor .canvas-image-node-bubble-bar button {
            width: 44px;
            height: 32px;
            padding: 0 8px;
            border: 0;
            border-radius: 7px !important;
            background: transparent;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .18s ease, color .18s ease, transform .18s ease;
        }
        #view-editor .canvas-image-node-bubble-bar button svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        #view-editor .canvas-image-node-bubble-bar button:hover {
            background: rgba(255, 255, 255, .1);
            color: #f1d99e;
            transform: translateY(-1px);
        }
        #view-editor .canvas-image-node-edit-host {
            position: absolute;
            left: 8px;
            right: 8px;
            top: 8px;
            bottom: 8px;
            z-index: 25;
            border-radius: 7px;
            overflow: hidden;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-image-node-edit-host.hidden { display: none; }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-stage {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            padding: 0 !important;
        }
        #view-editor .canvas-image-edit-busy {
            position: absolute;
            inset: 0;
            z-index: 60;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .55);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
        }
        #view-editor .canvas-image-node-source-toolbar.canvas-image-edit-locked {
            pointer-events: none;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap {
            position: relative;
            max-width: 100%;
            max-height: 100%;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap .canvas-image-edit-overlay,
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap .canvas-image-edit-text-layer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            max-width: none !important;
            max-height: none !important;
            pointer-events: none;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-overlay {
            will-change: transform;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-tools {
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 1px;
            z-index: 30;
            padding: 4px 8px;
            border-radius: 18px !important;
            background: rgba(30, 32, 34, .95);
            border: 1px solid #3a3f42;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
            white-space: nowrap;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-controls {
            position: absolute;
            top: 58px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 30;
            padding: 4px 10px;
            border-radius: 18px !important;
            background: rgba(30, 32, 34, .95);
            border: 1px solid #3a3f42;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools {
            position: absolute;
            top: -19px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 1px;
            z-index: 30;
            padding: 4px 8px;
            border-radius: 18px !important;
            background: rgba(30, 32, 34, .95);
            border: 1px solid #3a3f42;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
            white-space: nowrap;
        }
        #view-editor .canvas-image-edit-shape-wrap,
        #view-editor .canvas-image-edit-style-wrap {
            position: relative;
            display: inline-flex;
        }
        #view-editor .canvas-image-edit-pop {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 12px !important;
            background: rgba(30, 32, 34, .97);
            border: 1px solid #3a3f42;
            box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
            z-index: 60;
            white-space: nowrap;
        }
        #view-editor .canvas-image-edit-pop.hidden {
            display: none;
        }
        #view-editor .canvas-image-edit-shape-menu {
            flex-direction: column;
            gap: 4px;
            padding: 6px;
        }
        #view-editor .canvas-image-edit-shape-menu button {
            border: 0;
            background: transparent;
            color: #dfe4e6;
            font-size: 12px;
            padding: 5px 16px;
            border-radius: 8px;
            cursor: pointer;
            white-space: nowrap;
        }
        #view-editor .canvas-image-edit-shape-menu button:hover {
            background: rgba(255,255,255,.1);
            color: #fff;
        }
        #view-editor .canvas-image-edit-shape-menu button.active {
            color: #f4d98a;
            background: rgba(244,217,138,.12);
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-color-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            padding: 0;
            border: 0;
            border-radius: 6px !important;
            background: transparent;
            cursor: pointer;
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-color-box input[type="color"] {
            width: 18px;
            height: 18px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-size-wrap {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #aeb6ba;
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-size-icon {
            width: 10px;
            height: 10px;
        }
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-size-wrap input[type="range"] {
            width: 40px;
            height: 14px;
            accent-color: #c8a96a;
        }
        #view-editor .canvas-text-node,
        #view-editor .canvas-generic-node {
            transition: box-shadow .3s cubic-bezier(.22, .8, .3, 1.15), border-color .3s ease;
        }
        #view-editor .canvas-text-node:hover,
        #view-editor .canvas-generic-node:hover {
            z-index: 7;
        }
        #view-editor .canvas-generic-node.canvas-image-editing,
        #view-editor .canvas-generic-node.canvas-image-editing:hover,
        #view-editor .canvas-generic-node.canvas-image-editing.selected,
        #view-editor .canvas-generic-node.canvas-image-editing.selected:hover {
            transform: scale(1);
            transition: none;
        }
        #view-editor .canvas-vr-node .canvas-image-node-card {
            min-height: 430px;
            padding: 22px 22px 20px;
            background: #1b1d1f;
        }
        #view-editor .canvas-vr-node-canvas,
        .canvas-vr-node-canvas {
            display: block;
            width: 100%;
            height: 330px;
            border: 0;
            border-radius: 9px !important;
            background: #0e1012;
            cursor: grab;
            touch-action: none;
            -webkit-user-drag: none;
            user-select: none;
            outline: none;
        }
        #view-editor .canvas-vr-node-canvas.canvas-vr-dragging,
        .canvas-vr-node-canvas.canvas-vr-dragging {
            cursor: grabbing;
        }
        #view-editor .canvas-vr-node-toolbar {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        #view-editor .canvas-vr-node-toolbar .canvas-image-node-source-btn {
            flex: none;
        }
        #view-editor .canvas-vr-node-tool {
            min-height: 30px;
            padding: 0 12px;
            border: 0;
            border-radius: 15px !important;
            background: #33383b;
            color: #dfe7ea;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        #view-editor .canvas-vr-node-tool:hover {
            background: #3d4448;
        }
        #view-editor .canvas-vr-node-tool.active {
            background: #d8b96e;
            color: #1c1f21;
        }
        #view-editor .canvas-vr-node-tool.active:hover {
            background: #eed49a;
        }
        #view-editor .canvas-vr-node-full {
            margin-left: auto;
            min-height: 30px;
            padding: 0 14px;
            border: 0;
            border-radius: 15px !important;
            background: #33383b;
            color: #dfe7ea;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }
        #view-editor .canvas-vr-node-full:hover {
            background: #3d4448;
        }
        #view-editor .canvas-vr-node-tag {
            min-height: 24px;
            padding: 0 10px;
            border: 0;
            border-radius: 12px !important;
            background: #2b2e30;
            color: #aeb9bd;
            font-size: 11px;
            font-weight: 900;
            display: inline-flex;
            align-items: center;
        }
        #view-editor .canvas-vr-fullscreen,
        .canvas-vr-fullscreen {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: #050607;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-vr-fullscreen.hidden,
        .canvas-vr-fullscreen.hidden {
            display: none;
        }
        #view-editor .canvas-vr-fullscreen-canvas,
        .canvas-vr-fullscreen-canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: grab;
            touch-action: none;
            -webkit-user-drag: none;
            user-select: none;
            outline: none;
        }
        #view-editor .canvas-vr-fullscreen-canvas.canvas-vr-dragging,
        .canvas-vr-fullscreen-canvas.canvas-vr-dragging {
            cursor: grabbing;
        }
        #view-editor .canvas-vr-fullscreen-close,
        .canvas-vr-fullscreen-close {
            position: absolute;
            top: 16px;
            right: 18px;
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 19px !important;
            background: rgba(30,32,34,.9);
            color: #e8edef;
            font-size: 16px;
            font-weight: 900;
            cursor: pointer;
            z-index: 2;
        }
        #view-editor .canvas-vr-fullscreen-hint,
        .canvas-vr-fullscreen-hint {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            color: rgba(230,235,237,.55);
            font-size: 12px;
            font-weight: 900;
            pointer-events: none;
            white-space: nowrap;
        }
        #view-editor .canvas-panorama-node-hint {
            color: #8f9a9f;
            font-size: 12px;
            font-weight: 900;
            margin-top: 4px;
        }
        #view-editor .canvas-image-setting-note {
            margin-top: 8px;
            color: #8f9a9f;
            font-size: 11px;
        }
        #view-editor .canvas-image-node-empty {
            height: 300px;
            display: grid;
            align-content: center;
            justify-items: center;
            gap: 26px;
            color: #5d6265;
        }
        #view-editor .canvas-image-node-empty > div {
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 8px;
        }
        #view-editor .canvas-image-node-empty .canvas-image-node-missing-tip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            border: 1px solid rgba(227, 201, 141, .35);
            border-radius: 999px;
            background: rgba(227, 201, 141, .1);
            color: #e3c98d;
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
        }
        #view-editor .canvas-image-node-empty-mark {
            width: 64px;
            height: 48px;
            position: relative;
        }
        #view-editor .canvas-image-node-empty-mark::before {
            content: "";
            position: absolute;
            left: 2px;
            bottom: 0;
            width: 60px;
            height: 38px;
            clip-path: polygon(0 100%, 38% 12%, 63% 60%, 75% 39%, 100% 100%);
            background: #55595b;
        }
        #view-editor .canvas-image-node-empty-mark::after {
            content: "";
            position: absolute;
            top: 0;
            right: 8px;
            width: 11px;
            height: 11px;
            border-radius: 50% !important;
            background: #55595b;
        }
        #view-editor .canvas-video-node-empty-mark {
            width: 64px;
            height: 48px;
            color: #8b9195;
        }
        #view-editor .canvas-video-node-empty-mark svg {
            width: 100%;
            height: 100%;
        }
        #view-editor .canvas-image-node-try {
            color: #aeb6bb;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-mode {
            width: fit-content;
            min-width: 118px;
            height: 34px;
            margin-top: 6px;
            padding: 0 9px;
            border: 1px solid #4a5055;
            border-radius: 6px !important;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #f3f5f6;
            background: #303234;
            font-size: 13px;
            font-weight: 900;
            text-align: left;
        }
        #view-editor .canvas-image-node-mode:hover,
        #view-editor .canvas-image-node-mode.active {
            border-color: #7f8a92;
            background: #3a3c3e;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-text-node-head-icon svg {
            width: 25px;
            height: 25px;
            display: block;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-text-node-head-icon {
            width: 25px;
            height: 25px;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-empty-mark {
            width: 128px;
            height: 96px;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-empty-mark::before {
            left: 4px;
            width: 120px;
            height: 76px;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-empty-mark::after {
            right: 16px;
            width: 22px;
            height: 22px;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-mode {
            min-width: 236px;
            height: 68px;
            padding: 0 18px;
            gap: 16px;
            font-size: 26px;
        }
        #view-editor .canvas-image-node-output {
            position: relative;
            height: auto;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            border: 0;
            border-radius: 7px !important;
            background: #1c1f21;
        }
        #view-editor .canvas-image-node-output img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #151719;
            transition: opacity .14s ease;
        }
        #view-editor .canvas-image-node-thumbs {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            margin-left: 8px;
            overflow: visible;
            max-height: none;
        }
        #view-editor .canvas-image-node-thumb {
            position: relative;
            width: 36px;
            height: 36px;
            display: inline-block;
            padding: 0;
            border: 1.5px solid #58a9cf;
            border-radius: 6px !important;
            overflow: hidden;
            background: #000;
            opacity: .35;
            cursor: pointer;
            transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, width .15s ease, height .15s ease;
        }
        #view-editor .canvas-image-node-thumb:hover {
            opacity: .7;
            transform: scale(1.06);
        }
        #view-editor .canvas-image-node-thumb.active {
            opacity: 1;
            border-color: #e3c98d;
            box-shadow: 0 0 10px rgba(227,201,141,.5);
        }
        #view-editor .canvas-image-node-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        #view-editor .canvas-image-node-thumb-badge {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #f4d98a;
            color: #4a3f2a;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #view-editor .canvas-image-node-thumb-badge svg {
            width: 8px;
            height: 8px;
        }
        #view-editor .canvas-image-node-thumb-delete {
            position: absolute;
            right: 1px;
            top: 1px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(0,0,0,.72);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            display: none;
        }
        #view-editor .canvas-image-node-thumb.active .canvas-image-node-thumb-delete {
            display: flex;
        }
        #view-editor .canvas-image-node-thumb-delete:hover {
            background: #b3403a;
        }
        #image-viewer {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: block;
            background: rgba(0, 0, 0, .92);
        }
        #image-viewer.hidden {
            display: none !important;
        }
        #image-viewer > div {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #image-viewer img {
            display: block;
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
            transform-origin: center center;
            cursor: grab;
            transition: transform .12s ease;
        }
        #image-viewer img:active {
            cursor: grabbing;
        }
        #image-viewer.is-loading::after {
            content: "高清图加载中…";
            position: absolute;
            left: 50%;
            bottom: 24px;
            z-index: 2;
            transform: translateX(-50%);
            padding: 7px 13px;
            border-radius: 8px;
            background: rgba(35, 35, 35, .84);
            color: #f2e8cf;
            font-size: 12px;
            pointer-events: none;
        }
        body.image-viewer-dragging {
            cursor: grabbing;
            user-select: none;
        }
        .canvas-image-node-edit-host .canvas-image-edit-tool,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-tool {
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #dfe4e6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
        }
        .canvas-image-node-edit-host .canvas-image-edit-tool svg,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-tool svg {
            width: 15px;
            height: 15px;
        }
        .canvas-image-node-edit-host .canvas-image-edit-tool:hover,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-tool:hover {
            background: rgba(255,255,255,.1);
            color: #ffffff;
        }
        .canvas-image-node-edit-host .canvas-image-edit-tool.active,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-tool.active {
            background: transparent;
            color: #f4d98a;
            box-shadow: none;
        }
        .canvas-image-node-edit-host .canvas-image-edit-tool.primary,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-tool.primary {
            background: transparent;
            color: #f4d98a;
        }
        .canvas-image-node-edit-host .canvas-image-edit-text-icon,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-text-icon {
            font-size: 16px;
            font-weight: 900;
            line-height: 1;
        }
        .canvas-image-node-edit-host .canvas-image-edit-sep,
        #view-editor [data-canvas-node-id] > .canvas-image-edit-tools .canvas-image-edit-sep {
            width: 1px;
            height: 20px;
            background: #3a3f42;
            margin: 0 4px;
        }
        .canvas-image-node-edit-host .canvas-image-edit-label,
        #view-editor .canvas-image-node-card > .canvas-image-edit-controls .canvas-image-edit-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #aeb6ba;
            font-size: 11px;
            font-weight: 700;
        }
        .canvas-image-node-edit-host .canvas-image-edit-label input[type="color"],
        #view-editor .canvas-image-node-card > .canvas-image-edit-controls .canvas-image-edit-label input[type="color"] {
            width: 26px;
            height: 22px;
            padding: 0;
            border: 0;
            background: transparent;
        }
        .canvas-image-node-edit-host .canvas-image-edit-label input[type="range"],
        #view-editor .canvas-image-node-card > .canvas-image-edit-controls .canvas-image-edit-label input[type="range"] {
            width: 80px;
            accent-color: #c8a96a;
        }
        .canvas-image-node-edit-host .canvas-image-edit-stage {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: auto;
            background: #151719;
            padding: 12px;
        }
        .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap {
            position: relative;
            display: inline-block;
            max-width: 100%;
            max-height: 100%;
            line-height: 0;
        }
        .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap canvas {
            max-width: 100%;
            max-height: 100%;
            display: block;
            background: transparent;
        }
        #view-editor .canvas-image-node-output .canvas-image-node-progress {
            height: 100%;
            display: grid;
            place-content: center;
        }
        #view-editor .canvas-video-node-output {
            position: relative;
            height: 278px;
            overflow: hidden;
            border: 0;
            border-radius: 7px !important;
            background: #1c1f21;
        }
        #view-editor .canvas-video-node .canvas-image-node-card {
            height: 382px;
            min-height: 382px;
            display: flex;
            flex-direction: column;
        }
        #view-editor .canvas-video-node .canvas-video-node-output {
            flex: 1 1 auto;
            min-height: 316px;
            cursor: pointer;
        }
        #view-editor .canvas-local-video-node {
            width: 420px;
        }
        #view-editor .canvas-local-video-node .canvas-image-node-card {
            height: 236px;
            min-height: 236px;
            display: flex;
            flex-direction: column;
        }
        #view-editor .canvas-local-video-node .canvas-video-node-output {
            flex: 1 1 auto;
            min-height: 200px;
            cursor: pointer;
        }
        #view-editor .canvas-video-node-output video,
        #view-editor .canvas-video-node-output img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #151719;
        }
        #view-editor .canvas-video-node-output video:fullscreen {
            object-fit: contain;
            width: 100vw;
            height: 100vh;
            background: #000000;
        }
        #view-editor .canvas-video-node .canvas-image-node-card.has-image,
        #view-editor .canvas-local-video-node .canvas-image-node-card.has-image {
            height: auto;
            min-height: 0;
        }
        #view-editor .canvas-video-node .canvas-image-node-card.has-image .canvas-video-node-output,
        #view-editor .canvas-local-video-node .canvas-image-node-card.has-image .canvas-video-node-output {
            background: transparent !important;
            border-radius: 0 !important;
            overflow: hidden;
            height: auto;
            min-height: 0 !important;
            flex: 0 0 auto;
        }
        #view-editor .canvas-video-node .canvas-image-node-card.has-image .canvas-video-node-output video,
        #view-editor .canvas-local-video-node .canvas-image-node-card.has-image .canvas-video-node-output video {
            background: transparent !important;
        }
        #view-editor .canvas-video-node-output .canvas-video-control-bar {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 12px 8px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 100%);
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 0;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: background 0.18s ease;
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play svg {
            width: 15px;
            height: 15px;
            display: block;
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play .icon-pause {
            display: none;
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play.is-playing .icon-play {
            display: none;
        }
        #view-editor .canvas-video-node-output .canvas-video-bar-play.is-playing .icon-pause {
            display: block;
        }
        #view-editor .canvas-video-node-output .canvas-video-time-text {
            flex: 0 0 auto;
            font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            color: #ffffff;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
            white-space: nowrap;
            pointer-events: none;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress {
            flex: 1 1 auto;
            height: 4px;
            min-width: 24px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.26);
            cursor: pointer;
            position: relative;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress .canvas-video-progress-fill {
            width: 0%;
            height: 6px;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
            position: relative;
            transition: width .12s linear;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress .canvas-video-progress-fill::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
        }
        #view-editor .canvas-video-node-output .canvas-video-capture-btn {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: rgba(255, 255, 255, 0.95);
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }
        #view-editor .canvas-video-node-output .canvas-video-capture-btn:hover {
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
        }
        #view-editor .canvas-video-node-output .canvas-video-capture-btn svg {
            width: 19px;
            height: 19px;
            display: block;
        }
        #view-editor .canvas-video-bubble-bar {
            position: absolute;
            top: -44px;
            left: 50%;
            transform: translateX(-50%) scale(.6);
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 40px;
            padding: 4px 10px;
            border: 0;
            border-radius: 10px !important;
            background: rgba(20, 23, 26, .82);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease, transform .25s cubic-bezier(.22, .8, .3, 1.15);
        }
        #view-editor .canvas-generic-node.selected .canvas-video-bubble-bar {
            opacity: 1;
            transform: translateX(-50%) scale(1);
            pointer-events: auto;
        }
        #view-editor .canvas-video-bubble-bar button {
            width: 44px;
            height: 32px;
            padding: 0 8px;
            border: 0;
            border-radius: 7px !important;
            background: transparent;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .18s ease, color .18s ease, transform .18s ease;
        }
        #view-editor .canvas-video-bubble-bar button svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        #view-editor .canvas-video-bubble-bar button:hover {
            background: rgba(255, 255, 255, .1);
            color: #f1d99e;
            transform: translateY(-1px);
        }
        #director-desk-modal {
            position: fixed;
            inset: 0;
            z-index: 400;
            background: #090909;
        }
        #director-desk-modal.hidden {
            display: none;
        }
        #director-desk-modal iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            background: #090909;
        }
        #director-desk-modal .director-desk-close {
            position: absolute;
            top: 4px;
            right: 8px;
            z-index: 10;
            width: 27px;
            height: 27px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 4px;
            background: rgb(44, 44, 44);
            color: #f4f0e5;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            display: grid;
            place-content: center;
            transition: background .18s ease;
        }
        #director-desk-modal .director-desk-close:hover {
            background: rgb(70, 70, 70);
        }
        .canvas-preview-modal {
            position: fixed;
            inset: 0;
            z-index: 300;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 14, 18, 0.82);
            padding: 18px;
        }
        .canvas-preview-modal.hidden {
            display: none;
        }
        .canvas-preview-dialog {
            width: min(1180px, 100%);
            max-height: 92vh;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            background: #202224;
            border: 1px solid #3a4148;
            border-radius: 10px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }
        .canvas-preview-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 12px 16px;
            border-bottom: 1px solid #313639;
            background: #26292c;
        }
        .canvas-preview-titles {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .canvas-preview-titles strong {
            color: #ffffff;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .canvas-preview-titles span {
            color: #8a9298;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .canvas-preview-close {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            font-size: 20px;
            cursor: pointer;
        }
        .canvas-preview-close:hover {
            background: rgba(255, 255, 255, 0.22);
        }
        .canvas-preview-body {
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
            gap: 12px;
            padding: 14px;
        }
        .canvas-preview-video,
        .canvas-preview-editor {
            min-width: 0;
            min-height: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0b0d0f;
            border: 1px solid #2e3438;
            border-radius: 8px;
            overflow: hidden;
        }
        .canvas-preview-video video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        .canvas-preview-editor canvas {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            display: block;
            cursor: crosshair;
        }
        .canvas-preview-text-input {
            position: absolute;
            min-width: 120px;
            padding: 2px 4px;
            background: rgba(0, 0, 0, 0.45);
            border: 0;
            outline: 0;
            font-weight: 700;
            font-family: "Microsoft YaHei", sans-serif;
            caret-color: #ffffff;
            z-index: 5;
        }
        .canvas-preview-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid #313639;
            background: #2a2d30;
        }
        .canvas-preview-btn {
            min-height: 30px;
            padding: 0 10px;
            border: 1px solid #4a5258;
            border-radius: 7px;
            background: #373b3f;
            color: #dfe5e8;
            font-size: 12px;
            cursor: pointer;
        }
        .canvas-preview-btn:hover {
            border-color: #6d7a82;
            background: #42474c;
        }
        .canvas-preview-btn.active {
            border-color: #58a9cf;
            background: #58a9cf;
            color: #ffffff;
        }
        .canvas-preview-btn.canvas-preview-save {
            margin-left: auto;
            border-color: #c8a96a;
            background: #c8a96a;
            color: #1c1e20;
            font-weight: 700;
        }
        .canvas-preview-btn.canvas-preview-save:hover {
            border-color: #dfc07f;
            background: #dfc07f;
        }
        .canvas-preview-btn.canvas-preview-save.sent {
            border-color: #5bc79a;
            background: #3f9d77;
            color: #ffffff;
        }
        .canvas-preview-option {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #cbd4d8;
            font-size: 12px;
        }
        .canvas-preview-option input[type="color"] {
            width: 34px;
            height: 26px;
            padding: 0;
            border: 1px solid #4a5258;
            border-radius: 6px;
            background: transparent;
        }
        .canvas-preview-option select {
            height: 28px;
            border: 1px solid #4a5258;
            border-radius: 6px;
            background: #202224;
            color: #ffffff;
            padding: 0 6px;
        }
        #view-editor .canvas-video-node-output .canvas-image-node-progress {
            height: 100%;
            display: grid;
            place-content: center;
        }
        #view-editor .canvas-video-node-error {
            height: 100%;
            padding: 24px;
            display: grid;
            align-content: center;
            justify-items: center;
            gap: 10px;
            color: #ffb9b9;
            text-align: center;
        }
        #view-editor .canvas-video-node-error span {
            color: #ffd7d7;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .canvas-video-node-error div {
            max-width: 90%;
            color: #e2a7a7;
            font-size: 11px;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        #view-editor .canvas-video-node-duration {
            width: 64px;
            height: 28px;
            padding: 0 6px;
            border: 0;
            border-radius: 5px !important;
            background: #1f2224;
            color: #dce3e5;
            font-size: 11px;
            outline: none;
        }
        #view-editor .canvas-video-node-duration-label {
            color: #aeb6ba;
            font-size: 34px;
            font-weight: 900;
        }
        #view-editor .canvas-video-duration-slider-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 200px;
            gap: 26px;
            align-items: center;
            margin-bottom: 34px;
        }
        #view-editor .canvas-video-duration-slider-wrap {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
            height: 28px;
        }
        #view-editor .canvas-video-node-duration-slider {
            width: 100%;
            height: 28px;
            margin: 0;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px !important;
            background: #303438;
            box-shadow: inset 0 2px 6px rgba(0,0,0,.38);
            accent-color: #c8a96a;
        }
        #view-editor .canvas-video-duration-ticks {
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: 14px;
            background: repeating-linear-gradient(
                to right,
                rgba(255,255,255,.5) 0 2px,
                transparent 2px calc((100% - 2px) / 29)
            );
        }
        #view-editor .canvas-video-node-duration-value {
            color: #ffffff;
            font-size: 34px;
            font-weight: 900;
            text-align: right;
        }
        #view-editor .canvas-video-node-credit {
            height: 100px;
            padding: 0 28px;
            border: 0;
            border-radius: 6px !important;
            display: inline-flex;
            align-items: center;
            color: #e9cf92;
            background: #20262b;
            font-size: 42px;
            font-weight: 600;
            white-space: nowrap;
        }
        #view-editor .canvas-video-node-credit .canvas-credit-star {
            width: 34px;
            height: 34px;
            margin-right: 12px;
            flex-shrink: 0;
            color: #f4d98a;
        }
        #view-editor .canvas-video-ref-strip {
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 18px;
        }
        #view-editor .canvas-video-ref-item {
            position: relative;
            width: 222px;
            height: 156px;
            border: 0;
            border-radius: 10px !important;
            background: #1c2022;
            overflow: hidden;
            cursor: grab;
            transition: transform .28s cubic-bezier(.22,.8,.3,1), opacity .2s ease, box-shadow .2s ease;
        }
        #view-editor .canvas-video-ref-item.dragging {
            opacity: .45;
        }
        #view-editor .canvas-video-ref-item.drag-over,
        #view-editor .canvas-video-ref-item.drop-target {
            box-shadow: 0 0 0 2px #e3c98d, 0 0 16px rgba(227,201,141,.4);
        }
        #view-editor .canvas-video-ref-item .canvas-video-ref-del {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 0;
            border-radius: 50% !important;
            background: rgba(15, 17, 19, .8);
            color: #ffb4b4;
            font-size: 24px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 4;
        }
        #view-editor .canvas-video-ref-item .canvas-video-ref-del:hover {
            background: #b3403a;
            color: #ffffff;
        }
        #view-editor .canvas-video-node .canvas-video-ref-item .canvas-video-ref-del {
            width: 50px;
            height: 45px;
            font-size: 30px;
        }
        #view-editor .canvas-folder-load-progress {
            position: absolute;
            left: 50%;
            top: 50%;
            padding: 12px 22px;
            border-radius: 999px !important;
            background: rgba(20, 23, 25, .95);
            border: 1px solid rgba(244, 217, 138, .4);
            color: #f4d98a;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 20px;
            font-weight: 700;
            white-space: nowrap;
            z-index: 60;
            pointer-events: none;
            box-shadow: 0 12px 32px rgba(0,0,0,.45);
        }
        #view-editor .canvas-folder-load-toast {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 70;
            padding: 18px 40px;
            border-radius: 14px !important;
            background: rgba(20, 23, 25, .94);
            border: 1px solid rgba(244, 217, 138, .45);
            color: #f4d98a;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 22px;
            font-weight: 800;
            box-shadow: 0 18px 50px rgba(0,0,0,.45);
            pointer-events: none;
            white-space: nowrap;
            animation: canvasFolderToastFade .3s ease;
            transition: opacity .5s ease, transform .5s ease;
        }
        #view-editor .canvas-folder-load-toast.fading {
            opacity: 0;
            transform: translate(-50%, -50%) scale(.94);
        }
        @keyframes canvasFolderToastFade {
            from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        body.canvas-ref-dragging {
            cursor: grabbing;
            user-select: none;
        }
        #view-editor .canvas-video-ref-item img,
        #view-editor .canvas-video-ref-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #view-editor .canvas-video-ref-item .canvas-video-ref-audio {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #202426;
            color: #e3c98d;
            font-size: 20px;
        }
        #view-editor .canvas-video-ref-num {
            position: absolute;
            left: 3px;
            top: 3px;
            min-width: 24px;
            height: 24px;
            padding: 0 5px;
            border-radius: 3px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #000000;
            color: #ffffff;
            font-size: 15px;
            font-weight: 900;
        }
        #view-editor .canvas-video-ref-name {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 2px 5px;
            background: rgba(0,0,0,.62);
            color: #ffffff;
            font-size: 13.5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #view-editor .canvas-video-ref-strip .canvas-video-ref-num {
            left: 6px;
            top: 6px;
            min-width: 48px;
            height: 48px;
            padding: 0 10px;
            border-radius: 6px !important;
            font-size: 30px;
        }
        #view-editor .canvas-video-ref-strip .canvas-video-ref-name {
            padding: 4px 10px;
            font-size: 27px;
        }
        #view-editor .canvas-video-ref-picker {
            position: absolute;
            left: 50%;
            right: auto;
            top: auto;
            bottom: calc(100% + 8px);
            transform: translateX(-50%);
            z-index: 999;
            width: 380px;
            max-height: 1024px;
            overflow: auto;
            border: 0;
            border-radius: 12px !important;
            background: #202426;
            box-shadow: 0 16px 30px rgba(0,0,0,.42);
        }
        #view-editor .canvas-video-ref-picker.hidden { display: none; }
        #view-editor .canvas-video-ref-picker-title {
            height: 36px;
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: #9aa5ac;
            font-size: 14px;
            font-weight: 700;
        }
        #view-editor .canvas-video-ref-picker-empty {
            height: 64px;
            padding: 0 14px;
            display: flex;
            align-items: center;
            color: #7e878c;
            font-size: 13px;
            font-weight: 600;
        }
        #view-editor .canvas-video-ref-picker-item {
            width: 100%;
            height: 64px;
            padding: 6px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid #31373b;
            background: transparent;
            color: #eef2f3;
            font-size: 15px;
            font-weight: 700;
            text-align: left;
            transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, box-shadow .2s ease;
            transform-origin: left center;
        }
        #view-editor .canvas-video-ref-picker-item:hover {
            transform: scale(1.35);
            position: relative;
            z-index: 3;
            background: rgba(200, 169, 106, .32);
            border-radius: 12px !important;
            box-shadow: 0 6px 14px rgba(0,0,0,.28);
        }
        #view-editor .canvas-video-ref-picker-item:active {
            transform: scale(.97);
        }
        #view-editor .canvas-video-ref-picker:has(.canvas-video-ref-picker-item:hover) {
            overflow: visible;
        }
        #view-editor .canvas-video-ref-picker-item .canvas-video-ref-thumb {
            position: relative;
            width: 84px;
            height: 52px;
            border-radius: 7px !important;
            overflow: hidden;
            flex-shrink: 0;
        }
        #view-editor .canvas-video-ref-picker .canvas-video-ref-num {
            left: 2px;
            top: 2px;
            min-width: 22px;
            height: 22px;
            padding: 0 4px;
            border-radius: 5px !important;
            font-size: 13px;
        }
        #view-editor .canvas-video-ref-picker-item img,
        #view-editor .canvas-video-ref-picker-item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #view-editor .canvas-video-ref-picker-item .canvas-video-ref-picker-token {
            color: #e3c98d;
        }
        #view-editor .canvas-video-ref-picker-item .canvas-video-ref-picker-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker {
            left: 0;
            right: 0;
            top: calc(100% + 6px);
            transform: none;
            width: auto;
            max-height: 280px;
            z-index: 30;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker-title {
            height: 34px;
            padding: 0 12px;
            font-size: 12px;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker-item {
            height: 46px;
            padding: 4px 12px;
            gap: 10px;
            font-size: 13px;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker-item .canvas-video-ref-thumb {
            width: 58px;
            height: 36px;
            border-radius: 4px !important;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker .canvas-video-ref-num {
            left: 2px;
            top: 2px;
            min-width: 16px;
            height: 16px;
            padding: 0 3px;
            border-radius: 3px !important;
            font-size: 10px;
        }
        #canvas-find-replace-modal .canvas-video-ref-picker-item .canvas-video-ref-picker-token {
            font-size: 13px;
        }
        #view-editor .canvas-image-node-composer {
            position: relative;
            width: 2160px;
            min-height: 160px;
            margin: 16px 0 0;
            left: 50%;
            zoom: var(--canvas-input-scale, 1);
            transform: translateX(-50%);
            padding: 12px 14px 10px;
            border-radius: 30px !important;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-composer {
            position: absolute;
            top: calc(100% + 8px);
            margin: 0;
            z-index: 20;
        }
        #view-editor .canvas-image-node-composer.collapsed {
            display: none;
        }
        #view-editor .canvas-video-upload-hint {
            color: #7f8b92;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-chip-row {
            height: 36px;
            display: flex;
            align-items: center;
            gap: 11px;
        }
        #view-editor .canvas-image-node-chip {
            height: 35px;
            padding: 0 12px;
            border: 1px solid #454b50;
            border-radius: 999px !important;
            background: #303234;
            color: #aeb6ba;
            font-size: 16.5px;
            font-weight: 900;
        }
        #view-editor .canvas-image-node-expand {
            width: 36px;
            height: 36px;
            margin-left: auto;
            color: #aeb7bc;
            font-size: 22.5px;
        }
        #view-editor .canvas-image-node-prompt {
            height: 100%;
            margin-top: 0;
        }
        #view-editor .canvas-image-node-bottom {
            min-height: 130px;
            display: flex;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            gap: 30px;
        }
        #view-editor .canvas-image-node-select {
            height: 60px;
            max-width: none;
            padding: 0 15px;
            color: #eef2f3;
            font-weight: 900;
            font-size: 30px;
        }
        #view-editor .canvas-image-node-summary {
            height: 110px;
            max-width: none;
            padding: 0 50px;
            border: 1px solid #4a5055;
            border-radius: 9px !important;
            display: inline-flex;
            align-items: center;
            overflow: hidden;
            color: #d9dfe1;
            background: #202326;
            font-size: 42px;
            font-weight: 600;
            white-space: nowrap;
            text-overflow: ellipsis;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        #view-editor .canvas-image-node-summary:hover {
            transform: scale(1.05);
            border-color: #8aa5b8;
            box-shadow: 0 5px 14px rgba(0,0,0,.26);
        }
        #view-editor .canvas-image-node-replace-btn {
            height: 110px;
            max-width: none;
            flex-shrink: 0;
            padding: 0 34px;
            border: 1px solid #4a5055;
            border-radius: 9px !important;
            display: inline-flex;
            align-items: center;
            color: #eef2f3;
            background: #202326;
            font-size: 36px;
            font-weight: 600;
            white-space: nowrap;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        #view-editor .canvas-image-node-replace-btn:hover {
            border-color: #c8a96a;
            background: #2b2a26;
            transform: scale(1.06);
            box-shadow: 0 6px 16px rgba(0,0,0,.28);
        }
        #view-editor .canvas-image-node-model-btn {
            height: 110px;
            width: fit-content;
            max-width: none;
            flex-shrink: 0;
            padding: 0 40px;
            border: 1px solid #4a5055;
            border-radius: 9px !important;
            display: inline-flex;
            align-items: center;
            color: #eef2f3;
            background: #202326;
            font-size: 42px;
            font-weight: 600;
            white-space: nowrap;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        #view-editor .canvas-image-node-model-btn:hover {
            border-color: #7da6bf;
            background: #26313a;
            transform: scale(1.06);
            box-shadow: 0 6px 16px rgba(0,0,0,.28);
        }
        #view-editor .canvas-image-node-model-picker {
            position: absolute;
            z-index: 12;
            left: 0;
            bottom: 120px;
            width: max-content;
            max-width: 720px;
            max-height: 1100px;
            padding: 30px;
            overflow: auto;
            border: 0;
            border-radius: 30px !important;
            background: rgba(38, 40, 43, .78);
            -webkit-backdrop-filter: blur(64px) saturate(1.5);
            backdrop-filter: blur(64px) saturate(1.5);
            box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
        }
        #view-editor .canvas-image-node-model-picker.hidden {
            display: none;
        }
        #view-editor .canvas-image-node-model-picker:not(.hidden) {
            transform-origin: bottom center;
            animation: canvasModelPickerGrowBottom .42s cubic-bezier(.22, 1.3, .36, 1) both;
        }
        #view-editor .canvas-image-node-model-picker.canvas-model-picker-closing {
            display: block;
            animation: canvasModelPickerShrinkTop .16s ease both;
        }
        @keyframes canvasModelPickerGrowBottom {
            0% { opacity: 0; transform: scale(.7, .3); }
            65% { opacity: 1; transform: scale(1.04, 1.02); }
            85% { transform: scale(.99, .99); }
            100% { opacity: 1; transform: scale(1, 1); }
        }
        @keyframes canvasModelPickerShrinkTop {
            0% { opacity: 1; transform: scale(1, 1); }
            100% { opacity: 0; transform: scale(.86, .36); }
        }
        #view-editor .canvas-image-model-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
        }
        #view-editor .canvas-image-model-grid button {
            min-width: 0;
            height: 108px;
            padding: 0 40px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 22px !important;
            overflow: hidden;
            color: #cfd6d9;
            background: rgba(255,255,255,.15);
            font-size: 36px;
            font-weight: 600;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 18px;
            text-align: left;
            transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
        }
        #view-editor .canvas-image-model-grid button svg {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
        }
        #view-editor .canvas-image-model-grid button:hover {
            transform: scale(1.07);
            border-color: rgba(255,255,255,.4);
            background: rgba(255,255,255,.4);
            box-shadow: 0 10px 24px rgba(0,0,0,.24);
        }
        #view-editor .canvas-image-model-grid button.active {
            transform: scale(1.16);
            border-color: rgba(240, 207, 133, .6);
            color: #ffffff;
            background: rgba(200, 169, 106, .6);
            box-shadow: 0 12px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(240, 207, 133, .2);
        }
        #view-editor .canvas-image-node-settings {
            width: 44px;
            height: 44px;
            margin-left: auto;
            color: #d8dfe2;
            font-size: 24px;
            transition: transform .18s ease, background-color .18s ease;
        }
        #view-editor .canvas-image-node-settings:hover {
            transform: scale(1.12);
            background: #3a3d40;
        }
        #view-editor .canvas-image-node-settings-panel {
            position: absolute;
            z-index: 12;
            right: 0;
            bottom: 120px;
            width: 720px;
            padding: 36px;
            border: 0;
            border-radius: 30px !important;
            background: rgba(38, 40, 43, .78);
            -webkit-backdrop-filter: blur(64px) saturate(1.5);
            backdrop-filter: blur(64px) saturate(1.5);
            box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
        }
        #view-editor .canvas-image-node-settings-panel.hidden {
            display: none;
        }
        #view-editor .canvas-image-node-settings-panel:not(.hidden) {
            transform-origin: bottom center;
            animation: canvasModelPickerGrowBottom .42s cubic-bezier(.22, 1.3, .36, 1) both;
        }
        #view-editor .canvas-image-setting-label {
            margin: 0 0 22px;
            color: #cbd2d5;
            font-size: 36px;
            font-weight: 600;
        }
        #view-editor .canvas-image-setting-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            margin-bottom: 34px;
        }
        #view-editor .canvas-image-setting-row button,
        #view-editor .canvas-image-ratio-grid button {
            height: 108px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 22px !important;
            color: #cfd6d9;
            background: rgba(255,255,255,.15);
            font-size: 34px;
            font-weight: 600;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        #view-editor .canvas-image-setting-row button:hover,
        #view-editor .canvas-image-ratio-grid button:hover {
            transform: scale(1.05);
            border-color: rgba(255,255,255,.4);
            background: rgba(255,255,255,.4);
            box-shadow: 0 10px 24px rgba(0,0,0,.24);
        }
        #view-editor .canvas-image-setting-row button.active,
        #view-editor .canvas-image-ratio-grid button.active {
            border-color: rgba(240, 207, 133, .6);
            color: #ffffff;
            background: rgba(200, 169, 106, .6);
            box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(240, 207, 133, .2);
        }
        #view-editor .canvas-video-node .canvas-image-ratio-grid button.active {
            border-color: #f0cf85;
            color: #ffffff;
            background: rgba(200, 169, 106, .6);
            box-shadow: 0 0 0 2px rgba(240,207,133,.32), 0 0 18px rgba(240,207,133,.45);
            transform: scale(1.05);
        }
        #view-editor .canvas-image-ratio-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 22px;
            margin-bottom: 34px;
        }
        #view-editor .canvas-image-ratio-grid button {
            height: 176px;
            padding: 0 12px;
            display: grid;
            place-items: center;
            gap: 4px;
        }
        #view-editor .canvas-image-ratio-icon {
            width: 48px;
            height: 34px;
            border: 3px solid currentColor;
            border-radius: 6px !important;
            opacity: .82;
        }
        #view-editor .canvas-image-ratio-icon.portrait { width: 30px; height: 48px; }
        #view-editor .canvas-image-ratio-icon.square { width: 40px; height: 40px; }
        #canvas-image-asset-picker {
            position: fixed;
            inset: 0;
            z-index: 280;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,.72);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        #canvas-image-asset-picker.hidden { display: none; }
        #canvas-image-asset-picker .canvas-image-asset-picker-panel {
            width: min(760px, 92vw);
            height: min(520px, 82vh);
            display: flex;
            flex-direction: column;
            border: 1px solid #4b545b;
            border-radius: 8px !important;
            background: #232629;
            box-shadow: 0 22px 54px rgba(0,0,0,.56);
            overflow: hidden;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-head {
            height: 46px;
            padding: 0 14px 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #343b40;
            color: #dce3e6;
            font-size: 13px;
            font-weight: 900;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-close {
            width: 28px;
            height: 28px;
            border-radius: 5px !important;
            color: #aeb6ba;
            font-size: 17px;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-close:hover {
            color: #ffffff;
            background: #343a3e;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-tabs {
            display: flex;
            gap: 6px;
            padding: 8px 14px;
            border-bottom: 1px solid #343b40;
            background: #1b1f21;
            overflow-x: auto;
            flex-shrink: 0;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-tab {
            flex: 0 0 auto;
            height: 34px;
            padding: 0 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #3b4348;
            border-radius: 7px !important;
            background: #272c2f;
            color: #9aa4a9;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-tab:hover {
            color: #e3e9eb;
            border-color: #59636a;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-tab.active {
            color: #f0d9a0;
            border-color: #b8975c;
            background: rgba(216,184,114,.12);
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-tab span {
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: rgba(255,255,255,.09);
            color: #c9d2d5;
            font-size: 10px;
        }
        #canvas-image-asset-picker .canvas-image-asset-picker-grid {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 14px;
            display: grid;
            align-content: start;
            gap: 16px;
        }
        #canvas-image-asset-picker .canvas-image-asset-group-title {
            margin-bottom: 9px;
            color: #8f9aa1;
            font-size: 11px;
            font-weight: 900;
        }
        #canvas-image-asset-picker .canvas-image-asset-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
            gap: 10px;
        }
        #canvas-image-asset-picker .canvas-image-asset-card {
            height: 102px;
            padding: 0;
            display: grid;
            grid-template-rows: 84px 18px;
            border: 1px solid #3d454b;
            border-radius: 7px !important;
            background: #1c2022;
            color: #c6cdd0;
            overflow: hidden;
            font-size: 13px;
            font-weight: 600;
            text-align: left;
        }
        #canvas-image-asset-picker .canvas-image-asset-card:hover {
            border-color: #b8975c;
            box-shadow: 0 0 0 1px rgba(216,184,114,.22);
        }
        #canvas-image-asset-picker .canvas-image-asset-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #151719;
        }
        #canvas-image-asset-picker .canvas-image-asset-card span {
            padding: 0 7px;
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #canvas-image-asset-picker .canvas-image-asset-empty {
            align-self: center;
            justify-self: center;
            color: #737d83;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-text-node-result {
            position: relative;
            min-height: 314px;
            padding: 18px 20px;
            border: 0;
            box-shadow: inset 0 0 0 0.5px rgba(43,45,47,.5), 0 14px 30px rgba(0,0,0,.24);
            border-radius: 11px !important;
            background: #252627;
        }
        #view-editor .canvas-text-node-result-head {
            height: 22px;
            margin-bottom: 11px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #cbd2d6;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-text-node-progress {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #84c8ff;
            font-variant-numeric: tabular-nums;
        }
        #view-editor .canvas-text-node-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(57,162,255,.22);
            border-top-color: #42a5ff;
            border-right-color: #83d1ff;
            border-radius: 50% !important;
            animation: canvas-text-spin .8s linear infinite;
            box-shadow: 0 0 10px rgba(55,159,255,.42);
        }
        @keyframes canvas-text-spin { to { transform: rotate(360deg); } }
        #view-editor .canvas-text-node-output {
            width: 100%;
            height: 476px;
            padding: 15px 17px;
            resize: none;
            border: 0;
            border-radius: 8px !important;
            outline: 0;
            background: #353637;
            color: #f0f3f4;
            font-size: 13px;
            line-height: 1.7;
            white-space: pre-wrap;
            cursor: text;
            user-select: text;
        }
        #view-editor .canvas-text-node-output:focus {
            box-shadow: none;
        }
        #view-editor .canvas-text-node-output[readonly] {
            cursor: grab;
            user-select: text;
        }
        #view-editor .canvas-text-node-output:disabled {
            color: #aeb9c0;
            cursor: wait;
        }
        #view-editor .canvas-text-node-result.error .canvas-text-node-output {
            color: #ffb9b9;
        }
        #view-editor .canvas-empty-title {
            color: #e8edf0;
            font-size: 14px;
            font-weight: 900;
        }
        #view-editor .canvas-empty-subtitle {
            color: #7f8990;
            font-size: 12px;
            font-weight: 800;
        }
        #view-editor .canvas-template-rail {
            position: absolute;
            z-index: 4;
            left: 0;
            right: 0;
            bottom: 96px;
            height: 64px;
            display: flex;
            align-items: center;
            gap: 12px;
            overflow: hidden;
            padding: 0 18px;
        }
        #view-editor .canvas-template-card {
            width: 214px;
            min-width: 214px;
            height: 54px;
            border: 1px solid #303840;
            border-radius: 7px !important;
            background:
                linear-gradient(90deg, rgba(32,37,42,.92), rgba(32,37,42,.72)),
                #20252a;
            color: #e8edf0;
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) 18px;
            align-items: center;
            gap: 8px;
            padding: 8px;
            box-shadow: 0 12px 24px rgba(0,0,0,.24);
        }
        #view-editor .canvas-template-card.dimmed {
            opacity: .62;
        }
        #view-editor .canvas-template-thumb {
            width: 34px;
            height: 34px;
            border-radius: 6px !important;
            background: #343b42;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #dbe4e8;
            font-size: 15px;
            font-weight: 900;
        }
        #view-editor .canvas-template-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-template-sub {
            margin-top: 2px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #7f8990;
            font-size: 10px;
            font-weight: 800;
        }
        #view-editor .canvas-empty-list {
            flex: 1;
            min-height: 0;
            padding: 28px 14px;
            color: #7f8990;
            font-size: 12px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.7;
        }
        #view-editor .canvas-flow-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        #view-editor .canvas-flow-svg path {
            fill: none;
            stroke: #4c83b6;
            stroke-width: 2;
            stroke-linecap: round;
            opacity: .82;
            filter: drop-shadow(0 0 5px rgba(76,131,182,.25));
        }
        #view-editor .canvas-node {
            position: absolute;
            padding: 10px;
            box-shadow: 0 16px 28px rgba(0,0,0,.32);
        }
        #view-editor .canvas-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            color: #eef3f5;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-card-sub {
            color: #8f989f;
            font-size: 10px;
            font-weight: 800;
        }
        #view-editor .canvas-node.script-node {
            left: 48px;
            top: 166px;
            width: 214px;
            min-height: 116px;
        }
        #view-editor .canvas-node.asset-node {
            left: 336px;
            top: 94px;
            width: 242px;
            min-height: 160px;
        }
        #view-editor .canvas-node.shot-node {
            left: 650px;
            top: 178px;
            width: 256px;
            min-height: 222px;
            border-color: #5a6e80;
            background: #272d32;
        }
        #view-editor .canvas-node.video-node {
            left: 360px;
            top: 386px;
            width: 260px;
            min-height: 142px;
        }
        #view-editor .canvas-preview {
            height: 76px;
            border: 1px solid #343b42;
            border-radius: 6px !important;
            background: #111417;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #59636b;
            font-size: 22px;
            margin-bottom: 8px;
        }
        #view-editor .canvas-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        #view-editor .canvas-chip {
            height: 22px;
            padding: 0 7px;
            border: 1px solid #3a4249;
            border-radius: 5px !important;
            background: #20262b;
            color: #9aa5ab;
            display: inline-flex;
            align-items: center;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .canvas-prompt-box {
            min-height: 74px;
            border: 1px solid #343b42;
            border-radius: 6px !important;
            background: #191d20;
            color: #b7c0c6;
            padding: 8px;
            font-size: 11px;
            line-height: 1.55;
        }
        #view-editor .canvas-param-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            margin-top: 8px;
        }
        #view-editor .canvas-param {
            height: 25px;
            border: 1px solid #384047;
            border-radius: 5px !important;
            background: #1b2024;
            color: #c8d0d5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .canvas-bottom-tools {
            position: absolute;
            z-index: 5;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            height: 46px;
            gap: 8px;
            padding: 6px 10px;
            border: 1px solid #343c43;
            border-radius: 10px !important;
            background: rgba(31,35,39,.92);
            box-shadow: 0 14px 28px rgba(0,0,0,.35);
        }
        #view-editor .canvas-bottom-tools .canvas-tool-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 7px !important;
        }
        #view-editor .canvas-zoom {
            position: absolute;
            z-index: 5;
            left: 18px;
            bottom: 18px;
            height: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #cbd2d6;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-zoom-indicator {
            position: fixed;
            z-index: 400;
            padding: 5px 14px;
            border-radius: 9px !important;
            background: rgba(16,18,20,.62);
            color: #ffffff;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 1px;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
        }
        #view-editor .canvas-zoom-indicator.hidden { display: none; }
        #view-editor .canvas-assist-head {
            min-height: 54px;
            padding: 12px;
            border-bottom: 1px solid #30353a;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        #view-editor .canvas-assist-title {
            color: #eef3f5;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .canvas-assist-icons {
            gap: 6px;
        }
        #view-editor .canvas-icon-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #3a4249;
            border-radius: 6px !important;
            background: #272c31;
            color: #aeb8be;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-assist-body {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 12px;
            display: grid;
            align-content: start;
            gap: 12px;
        }
        #view-editor .canvas-inspector,
        #view-editor .canvas-skill-box {
            border: 1px solid #323a41;
            border-radius: 7px !important;
            background: #24282c;
            padding: 10px;
        }
        #view-editor .canvas-panel-title {
            justify-content: space-between;
            margin-bottom: 8px;
            color: #eef3f5;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-field-grid {
            display: grid;
            gap: 8px;
        }
        #view-editor .canvas-field {
            min-height: 44px;
            border: 1px solid #363e45;
            border-radius: 6px !important;
            background: #1c2024;
            padding: 7px;
        }
        #view-editor .canvas-field-label {
            color: #7f8990;
            font-size: 10px;
            font-weight: 900;
            margin-bottom: 3px;
        }
        #view-editor .canvas-field-value {
            color: #cbd2d6;
            font-size: 11px;
            line-height: 1.45;
        }
        #view-editor .canvas-skill-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        #view-editor .canvas-skill {
            min-height: 54px;
            border: 1px solid #363e45;
            border-radius: 7px !important;
            background: #1c2024;
            padding: 7px;
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr);
            gap: 7px;
            align-items: center;
        }
        #view-editor .canvas-skill-thumb {
            width: 30px;
            height: 30px;
            border-radius: 6px !important;
            background: #343b42;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #dbe4e8;
            font-size: 12px;
            font-weight: 900;
        }
        #view-editor .canvas-chat {
            min-height: 132px;
            border-top: 1px solid #30353a;
            padding: 10px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: 8px;
        }
        #view-editor .canvas-chat-ref {
            height: 24px;
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            padding: 0 8px;
            border: 1px solid #343c43;
            border-radius: 5px !important;
            background: #252a2f;
            color: #9fa9af;
            font-size: 10px;
            font-weight: 900;
        }
        #view-editor .canvas-chat-input {
            height: var(--solo-input-height, 64px);
            min-height: 52px;
            max-height: 200px;
            resize: none;
            border: 1px solid #2e343c;
            border-radius: 16px !important;
            background: #232527;
            color: #e6e6e6;
            padding: 12px 14px;
            outline: none;
            font-size: 13px;
            line-height: 1.5;
        }
        #view-editor .canvas-send-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        @media (max-width: 1180px) {
            #view-editor .canvas-platform {
                grid-template-columns: minmax(0, 1fr) var(--solo-width, 280px);
            }
            #view-editor .canvas-node.asset-node {
                left: 300px;
            }
            #view-editor .canvas-node.shot-node {
                left: 560px;
            }
        }
        #view-editor .script-info-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            padding: 12px;
            border-bottom: 1px solid #171818;
            background: #2b2c2c;
        }
        #view-editor .script-info-cell {
            min-height: 48px;
            padding: 8px;
            border: 1px solid #444747;
            border-radius: 6px;
            background: #252626;
        }
        #view-editor .episode-manager {
            padding: 10px 12px;
            border-bottom: 1px solid #171818;
            background: #2b2c2c;
        }
        #view-editor .episode-manager-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 8px;
            align-items: end;
        }
        #view-editor .episode-select {
            height: 30px;
            padding: 0 8px;
            border-radius: 6px !important;
            font-size: 12px;
            font-weight: 800;
        }
        #view-editor .episode-mini-btn {
            height: 30px;
            min-width: 48px;
            padding: 0 9px;
            border: 1px solid #4a4d4f;
            border-radius: 6px !important;
            background: #272929;
            color: #c8cccf;
            font-size: 11px;
            font-weight: 900;
        }
        #view-editor .episode-mini-btn:hover {
            background: #343737;
            color: #fff;
            border-color: #626769;
        }
        #view-editor .episode-mini-btn.danger {
            color: #ffb9bd;
            border-color: #7e3a42;
            background: #392427;
        }
        #view-editor .script-output-tabs {
            height: 34px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 8px;
            border-bottom: 1px solid #171818;
            background: #333434;
        }
        #view-editor .script-output-tab {
            height: 22px;
            padding: 0 9px;
            border-radius: 5px;
            border: 1px solid transparent;
            color: #8f979a;
            font-size: 11px;
            font-weight: 800;
        }
        #view-editor .script-output-tab.active {
            color: #ffffff;
            border-color: #2d7899;
            background: #243840;
        }
        #view-editor .asset-card.generating {
            border-color: #6b7072;
            background: #222424;
            cursor: default;
        }
        #view-editor .asset-generating-thumb {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: repeating-linear-gradient(135deg, #252727 0 12px, #2b2d2d 12px 24px);
            color: #b7bfc2;
            font-size: 12px;
            letter-spacing: 0;
        }
        #view-editor .asset-generating-thumb::before {
            content: "";
            width: 18px;
            height: 18px;
            margin-right: 8px;
            border-radius: 50%;
            border: 2px solid #596164;
            border-top-color: #58a9cf;
            animation: asset-spin .9s linear infinite;
        }
        @keyframes asset-spin { to { transform: rotate(360deg); } }
        .asset-create-modal {
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(860px, calc(100vw - 40px));
            height: min(680px, calc(100vh - 40px));
            min-width: 560px;
            min-height: 460px;
            max-width: calc(100vw - 24px);
            max-height: calc(100vh - 24px);
            transform: translate(-50%, -50%);
            background: #303131;
            border: 1px solid #151616;
            border-radius: 8px;
            box-shadow: 0 20px 48px rgba(0,0,0,.42);
            display: grid;
            grid-template-rows: 42px minmax(190px, 1fr) minmax(160px, 30%) minmax(64px, auto);
            overflow: hidden;
            resize: both;
        }
        .asset-create-titlebar {
            cursor: move;
            user-select: none;
        }
        .asset-preview-stage {
            background: #242525;
            border-bottom: 1px solid #151616;
            display: grid;
            grid-template-columns: minmax(260px, 1fr) 260px;
            min-height: 0;
        }
        .asset-preview-box {
            margin: 16px;
            border: 1px solid #4b4e50;
            background: #1f2020;
            border-radius: 6px;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .asset-preview-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .asset-preview-side {
            border-left: 1px solid #151616;
            padding: 16px;
            display: grid;
            align-content: start;
            gap: 12px;
        }
        .asset-prompt-area {
            background: #2b2c2c;
            border-bottom: 1px solid #151616;
            padding: 14px 16px;
            min-height: 0;
            overflow: hidden;
        }
        .asset-prompt-area textarea {
            height: calc(100% - 24px);
            min-height: 112px;
            resize: none;
        }
        .asset-create-footer {
            background: #383939;
            border-top: 1px solid #4b4e50;
            min-height: 64px;
            flex-wrap: wrap;
            row-gap: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        #asset-create-status {
            display: inline-block;
            max-width: min(520px, 38vw);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        @media (max-width: 900px) {
            .asset-preview-stage {
                grid-template-columns: 1fr;
            }
            .asset-preview-side {
                border-left: 0;
                border-top: 1px solid #151616;
                grid-template-columns: 1fr auto;
                align-items: end;
            }
            #asset-create-status {
                max-width: 100%;
            }
        }
        #aix-reloading-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147483000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(18, 20, 24, .35);
            backdrop-filter: blur(18px) saturate(130%);
            -webkit-backdrop-filter: blur(18px) saturate(130%);
        }
        #aix-reloading-overlay.hidden {
            display: none;
        }
        #aix-reloading-overlay .aix-reloading-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0;
            background: transparent;
            border: 0 !important;
            box-shadow: none;
        }
        #aix-reloading-overlay .aix-reloading-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
        }
        #aix-reloading-overlay .aix-reloading-text {
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 1px;
            white-space: nowrap;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        #aix-reloading-overlay .aix-reloading-dots {
            display: inline-block;
            width: 0;
            overflow: hidden;
            vertical-align: bottom;
            white-space: nowrap;
            animation: aix-reloading-dots 1.2s steps(4, end) infinite;
        }
        #aix-reloading-overlay .aix-reloading-dots::after {
            content: '...';
        }
        @keyframes aix-reloading-dots {
            0% { width: 0; }
            100% { width: 1.4em; }
        }
        #aix-reloading-overlay .aix-reloading-eye {
            transform-box: fill-box;
            transform-origin: center;
            animation: aix-reloading-blink 2.6s ease-in-out infinite;
        }
        @keyframes aix-reloading-blink {
            0%, 86%, 100% { transform: scaleY(1); }
            92% { transform: scaleY(.08); }
            96% { transform: scaleY(1); }
        }
        .aix-custom-tooltip {
            position: fixed;
            z-index: 2147483001;
            max-width: 320px;
            padding: 7px 12px;
            border-radius: 8px !important;
            border: 0 !important;
            outline: 0 !important;
            background: #2c2f33;
            color: #ffffff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.45;
            letter-spacing: .5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
            box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
        }
        .aix-custom-tooltip.hidden {
            display: none;
        }

        /* ================== 电子宠物（AIx小精灵） ================== */
        #pet-adopt-modal {
            z-index: 300;
        }
        .pet-adopt-card {
            width: min(920px, calc(100vw - 40px));
            max-height: calc(100vh - 60px);
            background: #1c1d1f;
            border: 1px solid #333638;
            border-radius: 14px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .pet-adopt-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px 12px;
            border-bottom: 1px solid #2a2c2e;
        }
        .pet-adopt-header .pet-icon-big {
            width: 44px;
            height: 44px;
            flex: 0 0 auto;
        }
        .pet-adopt-header h2 {
            color: #ffffff;
            font-size: 18px;
            font-weight: 800;
            margin: 0;
        }
        .pet-adopt-header p {
            color: #8d9396;
            font-size: 12px;
            margin: 2px 0 0;
        }
        .pet-adopt-step-badge {
            margin-left: auto;
            padding: 4px 10px;
            border-radius: 999px;
            background: #232426;
            border: 1px solid #3a3d3f;
            color: #e3c98d;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }
        .pet-adopt-body {
            padding: 16px 20px;
            overflow-y: auto;
            flex: 1;
        }
        .pet-personality-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
            gap: 10px;
        }
        .pet-personality-card {
            background: #232426;
            border: 1px solid #333638;
            border-radius: 10px;
            padding: 12px 14px;
            cursor: pointer;
            text-align: left;
            transition: border-color .15s, background .15s, transform .1s;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        .pet-personality-card:hover {
            border-color: #6b7480;
            background: #282a2c;
        }
        .pet-personality-card.selected {
            border-color: #e3c98d;
            background: #2b2a26;
            box-shadow: 0 0 0 1px rgba(227, 201, 141, .35), 0 10px 26px rgba(0, 0, 0, .35);
        }
        .pet-personality-card .pp-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            border-radius: 999px;
            background: #16181a;
            border: 1px solid #3a3d3f;
            color: #e3c98d;
            font-size: 11px;
            font-weight: 800;
            margin-bottom: 8px;
        }
        .pet-personality-card .pp-name {
            color: #ffffff;
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 4px;
        }
        .pet-personality-card .pp-short {
            color: #aeb3b5;
            font-size: 12px;
            line-height: 1.5;
        }
        .pet-personality-detail {
            margin-top: 16px;
            background: #191a1c;
            border: 1px solid #2f3234;
            border-radius: 10px;
            padding: 14px 16px;
            display: none;
        }
        .pet-personality-detail.show {
            display: block;
        }
        .pet-personality-detail h4 {
            color: #e3c98d;
            font-size: 13px;
            font-weight: 800;
            margin: 0 0 4px;
        }
        .pet-personality-detail p {
            color: #c8ccce;
            font-size: 12px;
            line-height: 1.7;
            margin: 0 0 10px;
        }
        .pet-personality-detail p:last-child {
            margin-bottom: 0;
        }
        .pet-adopt-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            border-top: 1px solid #2a2c2e;
        }
        .pet-adopt-footer button {
            height: 38px;
            padding: 0 20px;
            border-radius: 8px;
            border: 1px solid #3a3d3f;
            background: #232426;
            color: #aeb3b5;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .pet-adopt-footer button.primary {
            background: #e3c98d;
            border-color: #e3c98d;
            color: #1c1d1f;
        }
        .pet-adopt-footer button.primary:hover {
            background: #f0d9a0;
        }
        .pet-adopt-footer button:disabled {
            opacity: .45;
            cursor: not-allowed;
        }
        .pet-adopt-error {
            color: #e2a7a7;
            font-size: 12px;
            min-height: 18px;
            text-align: center;
            margin-top: 8px;
        }

        /* 宠物面板（居中呼出，位于嘟嘟小精灵上方） */
        #pet-panel {
            position: fixed;
            left: 50%;
            bottom: 148px;
            transform: translateX(-50%);
            z-index: 90;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        #pet-panel.hidden-pet {
            display: none;
        }
        .pet-panel-card {
            width: 330px;
            background: rgba(24, 25, 27, .7);
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 16px;
            box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
            overflow: hidden;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .pet-panel-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 14px 10px;
            border-bottom: 1px solid #2a2c2e;
            position: relative;
            cursor: move;
        }
        .pet-mascot-box {
            position: relative;
            width: 84px;
            height: 84px;
            flex: 0 0 auto;
            border-radius: 50%;
            background: #101112;
            border: 1px solid #2f3234;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pet-mascot-box svg {
            width: 72px;
            height: 72px;
        }
        .pet-mascot-box[data-behavior="bounce"] { animation: pet-behavior-bounce .7s ease; }
        .pet-mascot-box[data-behavior="spin"] { animation: pet-behavior-spin .8s ease; }
        .pet-mascot-box[data-behavior="shake"] { animation: pet-behavior-shake .5s ease; }
        .pet-mascot-box[data-behavior="sleep"] svg { animation: pet-behavior-sleep 1.2s ease-in-out infinite; }
        .pet-mascot-box[data-behavior="sparkle"] { animation: pet-behavior-sparkle .9s ease; }
        .pet-mascot-box[data-behavior="heart"] { animation: pet-behavior-heart .9s ease; }
        .pet-panel-title {
            flex: 1;
            min-width: 0;
        }
        .pet-panel-title .pet-name {
            color: #ffffff;
            font-size: 16px;
            font-weight: 800;
        }
        .pet-panel-title .pet-personality-tag {
            color: #e3c98d;
            font-size: 12px;
            font-weight: 700;
            margin-top: 2px;
        }
        .pet-panel-title .pet-level {
            color: #8d9396;
            font-size: 11px;
            margin-top: 4px;
        }
        .pet-panel-close {
            align-self: flex-start;
            border: 0;
            background: transparent;
            color: #8d9396;
            font-size: 12px;
            cursor: pointer;
            padding: 4px;
        }
        .pet-panel-close:hover {
            color: #ffffff;
        }
        @keyframes pet-bubble-in {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .pet-stats {
            padding: 10px 14px;
            display: grid;
            gap: 6px;
        }
        .pet-stat-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
        }
        .pet-stat-row .ps-label {
            width: 34px;
            color: #aeb3b5;
            font-weight: 700;
            flex: 0 0 auto;
            text-align: right;
        }
        .pet-stat-row .ps-bar {
            flex: 1;
            height: 8px;
            border-radius: 999px;
            background: #2a2c2e;
            overflow: hidden;
        }
        .pet-stat-row .ps-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #d9bc7a, #f0d9a0);
            transition: width .5s ease;
        }
        .pet-stat-row .ps-fill.low { background: #e07878; }
        .pet-stat-row .ps-fill.mid { background: #e0b06a; }
        .pet-stat-row .ps-fill.invert { background: linear-gradient(90deg, #e07878, #c84c4c); }
        .pet-stat-row .ps-val {
            width: 40px;
            color: #c8ccce;
            font-weight: 700;
            text-align: right;
            flex: 0 0 auto;
        }
        .pet-actions {
            padding: 10px 14px 14px;
            border-top: 1px solid #2a2c2e;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .pet-action-btn {
            height: 38px;
            border-radius: 9px;
            border: 1px solid #3a3d3f;
            background: #232426;
            color: #e8edf0;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color .12s, background .12s, transform .08s;
        }
        .pet-action-btn:hover {
            border-color: #e3c98d;
            background: #2b2a26;
        }
        .pet-action-btn:active {
            transform: scale(.96);
        }
        .pet-action-btn:disabled {
            opacity: .5;
            cursor: wait;
        }
        .pet-choice-pop {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            padding: 10px 14px 4px;
            border-top: 1px solid #2a2c2e;
        }
        .pet-choice-pop button {
            height: 32px;
            border-radius: 8px;
            border: 1px solid #3a3d3f;
            background: #1c1d1f;
            color: #c8ccce;
            font-size: 12px;
            cursor: pointer;
        }
        .pet-choice-pop button:hover {
            border-color: #e3c98d;
            color: #ffffff;
        }
        .pet-exp-row {
            padding: 0 14px 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .pet-exp-row .ps-label {
            width: 34px;
            color: #8d9396;
            font-size: 11px;
            font-weight: 700;
            text-align: right;
        }
        .pet-exp-row .ps-bar {
            flex: 1;
            height: 6px;
            border-radius: 999px;
            background: #2a2c2e;
            overflow: hidden;
        }
        .pet-exp-row .ps-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #7fb3d5, #58a9cf);
            transition: width .5s ease;
        }
        .pet-exp-row .ps-val {
            color: #8d9396;
            font-size: 10px;
            width: 44px;
            text-align: right;
        }
        .pet-toast {
            position: fixed;
            left: 50%;
            bottom: 110px;
            transform: translateX(-50%);
            z-index: 310;
            max-width: min(520px, calc(100vw - 40px));
            padding: 10px 18px;
            border-radius: 10px;
            background: rgba(44, 47, 51, .96);
            border: 1px solid #4a4d50;
            color: #ffffff;
            font-size: 13px;
            line-height: 1.5;
            box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
            animation: pet-bubble-in .18s ease;
        }
        .site-msg-ticker {
            position: fixed;
            top: 12px;
            left: 230px;
            right: 210px;
            width: auto;
            z-index: 30;
            overflow: hidden;
            pointer-events: none;
            box-sizing: border-box;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
        }
        .site-msg-ticker.visible { opacity: 1; visibility: visible; }
        .site-msg-ticker-track {
            display: inline-block;
            white-space: nowrap;
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .5px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
            will-change: transform;
        }
        @keyframes site-msg-scroll {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
        @keyframes pet-idle-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        @keyframes pet-behavior-bounce {
            0% { transform: translateY(0) scale(1, 1); }
            30% { transform: translateY(-14px) scale(.94, 1.08); }
            60% { transform: translateY(0) scale(1.06, .92); }
            80% { transform: translateY(-4px) scale(.98, 1.02); }
            100% { transform: translateY(0) scale(1, 1); }
        }
        @keyframes pet-behavior-spin {
            0% { transform: rotate(0) scale(1); }
            50% { transform: rotate(180deg) scale(1.08); }
            100% { transform: rotate(360deg) scale(1); }
        }
        @keyframes pet-behavior-shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-5px); }
            40% { transform: translateX(5px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
        }
        @keyframes pet-behavior-sleep {
            0%, 100% { transform: translateY(0) scaleY(1); }
            50% { transform: translateY(3px) scaleY(.96); }
        }
        @keyframes pet-behavior-sparkle {
            0% { transform: scale(1); filter: brightness(1); }
            30% { transform: scale(1.12); filter: brightness(1.35); }
            100% { transform: scale(1); filter: brightness(1); }
        }
        @keyframes pet-behavior-heart {
            0% { transform: scale(1); }
            30% { transform: scale(1.14); }
            55% { transform: scale(.96); }
            80% { transform: scale(1.06); }
            100% { transform: scale(1); }
        }