/* ================= 一级界面原有样式 (绝对保持不变) ================= */
        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: flex-end; overflow-x: hidden; overflow-y: auto; isolation: isolate; background: #090d11; padding: 100px clamp(40px,7.8vw,160px) 105px 24px; }
        #view-login.hidden-view { display: none !important; }
        #view-login .login-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
        #view-login .login-art { position: absolute; left: 50%; top: 50%; width: max(100vw,177.68vh); height: max(56.28vw,100vh); transform: translate(-50%,-50%); }
        #view-login .login-bg-still { display: block; width: 100%; height: 100%; object-fit: fill; }
        #view-login::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,transparent 43%,rgba(5,9,13,.08) 60%,rgba(5,9,13,.25)),linear-gradient(0deg,rgba(5,9,13,.45),transparent 22%); }
        #view-login .login-cloud-window { position: absolute; left: 3%; top: 43%; width: 49%; height: 26%; overflow: hidden; mask-image: linear-gradient(0deg,transparent,#000 22%,#000 65%,transparent); -webkit-mask-image: linear-gradient(0deg,transparent,#000 22%,#000 65%,transparent); }
        #view-login .login-cloud { position: absolute; inset: 0 -18%; opacity: .23; filter: blur(13px); background: radial-gradient(ellipse 17% 15% at 18% 62%,rgba(228,232,230,.8),transparent),radial-gradient(ellipse 24% 19% at 46% 46%,rgba(225,230,231,.7),transparent),radial-gradient(ellipse 20% 12% at 72% 59%,rgba(237,226,207,.75),transparent); animation: login-cloud-drift 27s ease-in-out infinite alternate; will-change: transform,opacity; }
        #view-login .login-cloud.second { inset: 8% -26% -4%; opacity: .16; filter: blur(19px); animation: login-cloud-drift-back 35s ease-in-out infinite alternate; background: radial-gradient(ellipse 28% 18% at 30% 58%,#d6e0e2,transparent),radial-gradient(ellipse 20% 17% at 65% 37%,#e9e2d4,transparent); }
        @keyframes login-cloud-drift { from { transform: translateX(-4%); opacity: .2; } to { transform: translateX(7%); opacity: .38; } }
        @keyframes login-cloud-drift-back { from { transform: translateX(7%); opacity: .13; } to { transform: translateX(-5%); opacity: .27; } }
        #view-login .login-top-brand { position: absolute; top: 24px; left: 28px; display: flex; gap: 17px; align-items: center; z-index: 1; }
        #view-login .login-top-brand img { display: block; width: 121px; height: auto; transform: translateY(-3px); }
        #view-login .login-top-brand span { display: flex; align-items: center; min-height: 24px; line-height: 24px; font-size: 12px; color: #fff; letter-spacing: 2px; border-left: 1px solid #ffffff25; padding-left: 17px; transform: translateY(3px); }
        #view-login .login-card { position: relative; z-index: 1; flex-shrink: 0; width: 390px; padding: 41px 37px 29px; border: 0 !important; border-radius: 20px !important; background: linear-gradient(145deg,rgba(27,32,37,.86),rgba(16,21,26,.8)) !important; box-shadow: 0 24px 60px #00000026; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        #view-login:not(.hidden-view) .login-card { animation: login-card-enter .85s cubic-bezier(.2,.75,.25,1) both; }
        @keyframes login-card-enter { from { opacity: 0; } to { opacity: 1; } }
        #view-login .login-brand { text-align: left; margin-bottom: 33px; }
        #view-login .login-eyebrow { font-size: 10px; letter-spacing: 3.5px; color: #b9a68a; margin: 0 0 15px; }
        #view-login .login-welcome { color: #eeeae3; font-size: 28px; line-height: 1.35; letter-spacing: 1px; font-weight: 550; margin: 0 0 9px; }
        #view-login .login-sub { font-size: 12px; color: #93989c; margin: 0; line-height: 1.8; letter-spacing: .4px; }
        #view-login .auth-panel { display: grid; gap: 21px; }
        #view-login .auth-panel.hidden { display: none; }
        #view-login label { display: block; color: #b9bbbc; font-size: 12px; font-weight: 400; letter-spacing: 1px; }
        #view-login input:not([type="checkbox"]) { width: 100%; height: 48px; margin-top: 10px; padding: 0 14px; border: 0 !important; border-radius: 8px !important; background: #ffffff06 !important; color: #f1eee8 !important; outline: none; box-shadow: none; font-size: 14px; transition: background .2s; }
        #view-login input:not([type="checkbox"]):hover { background: #ffffff0a !important; }
        #view-login input:not([type="checkbox"]):focus { background: #ffffff10 !important; }
        #view-login input:focus-visible { outline: 1px solid #b6a78d; outline-offset: 2px; }
        #view-login input::placeholder { color: #6f767b; font-size: 11px; font-weight: 400; opacity: 1; }
        #view-login .auth-password-hint { margin-top: -13px; font-size: 10px; line-height: 1.7; color: #7d858c; }
        #view-login .auth-service-agreement:not([hidden]) { display: flex; justify-content: center; align-items: flex-start; gap: 7px; font-size: 10px; line-height: 1.8; color: #8c9296; }
        #view-login .auth-service-agreement input[type="checkbox"] { width: 14px; height: 14px; margin: 3px 0 0; padding: 0; flex: none; appearance: auto; accent-color: #d8be98; cursor: pointer; }
        #view-login .auth-service-agreement label { display: inline; font-size: inherit; font-weight: 400; letter-spacing: 0; cursor: pointer; }
        #view-login .auth-service-agreement a { color: #bdb09b; text-decoration: none; white-space: nowrap; }
        #view-login .auth-service-agreement a:hover { text-decoration: underline; }
        #view-login button { border: 0 !important; outline: none; box-shadow: none; }
        #view-login button:focus-visible, #view-login a:focus-visible { outline: 2px solid #e5cba4; outline-offset: 5px; }
        #view-login button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
        #view-login .auth-submit:active, #view-login .auth-switch:active { transform: translateY(1px); }
        #view-login .auth-submit { height: 47px; border-radius: 8px !important; background: #d8be98 !important; color: #25231e !important; font-size: 13px; font-weight: 600; letter-spacing: 3px; cursor: pointer; transition: background .2s,transform .2s; margin-top: 4px; }
        #view-login .auth-submit:hover { background: #e4ccaa !important; }
        #view-login .auth-submit:disabled { opacity: .38; cursor: not-allowed; }
        #view-login .auth-switch { background: transparent !important; color: #b9ae9b !important; font-size: 12px; font-weight: 400; cursor: pointer; padding: 7px; letter-spacing: .3px; }
        #view-login .auth-message { min-height: 16px; line-height: 1.6; margin: 13px 0 0; font-size: 11px; color: #b9aa93; text-align: center; }
        #view-login .auth-message.error { color: #e2a7a7; }
        #view-login .auth-message.ok { color: #8fd6b5; }
        #view-login .login-caption { position: absolute; bottom: 65px; left: 48px; z-index: 1; pointer-events: none; }
        #view-login .login-caption p { font-size: 18px; letter-spacing: 4px; font-weight: 350; margin: 0 0 12px; color: #ece7de; }
        #view-login .login-caption small { font-size: 9px; letter-spacing: 3px; color: #9a9d9e; }
        @media (max-width: 900px) {
            #view-login { padding-right: 5vw; }
            #view-login .login-card { width: 350px; padding: 33px 28px 24px; }
            #view-login .login-caption { left: 30px; }
            #view-login .login-top-brand { left: 20px; }
            #view-login .login-caption p { font-size: 15px; }
        }
        @media (max-width: 640px) {
            #view-login { justify-content: center; padding: 110px 20px 120px; }
            #view-login .login-card { width: min(380px,100%); background: #151b21ed !important; }
            #view-login .login-top-brand { top: 18px; left: 16px; }
            #view-login .login-caption { display: none; }
            #view-login::after { background: #060b1138; }
            #view-login .login-art { left: 68%; }
        }
        @media (max-height: 760px) { #view-login { align-items: flex-start; padding-top: 95px; padding-bottom: 35px; } #view-login .login-caption { bottom: 25px; } }
        @media (prefers-reduced-motion: reduce) { #view-login .login-cloud, #view-login:not(.hidden-view) .login-card { animation: none; } }

        #auth-service-agreement-modal { width: min(880px, 92vw); max-height: 84vh; padding: 0; border: 0; border-radius: 14px; background: #222325; color: #d8d8d8; box-shadow: 0 24px 80px #0009; }
        #auth-service-agreement-modal[open] { display: flex; flex-direction: column; }
        #auth-service-agreement-modal::backdrop { background: #000a; }
        #auth-service-agreement-modal .auth-agreement-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #ffffff10; }
        #auth-service-agreement-modal h2 { margin: 0; font-size: 18px; font-weight: 700; }
        #auth-service-agreement-modal button { border: 0; outline: none; box-shadow: none; cursor: pointer; }
        #auth-service-agreement-modal button:focus-visible { outline: 2px solid #8bb8e4; outline-offset: 3px; }
        #auth-service-agreement-modal .auth-agreement-header button { width: 30px; height: 30px; background: transparent; color: #aaa; font-size: 24px; }
        #auth-service-agreement-content { display: block; width: 100%; height: 62vh; min-height: 0; border: 0; background: #222325; }
        #auth-service-agreement-modal .auth-agreement-footer { padding: 14px 24px; text-align: right; border-top: 1px solid #ffffff10; }
        #auth-service-agreement-modal .auth-agreement-footer button { padding: 9px 24px; border-radius: 7px; background: #36383b; color: #ddd; }
        #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: contain;
            display: block;
        }
        .editor-brand-logo {
            width: 164px;
            height: 36px;
            object-fit: contain;
            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:not(.membership-purchase),
        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.management-embed-mode > .editor-titlebar {
            display: none !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;
        }
        #studio-team-dialog { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 20px; background: #202020; color: #eee; border: 0; border-radius: 16px; overflow: auto; }
        #studio-team-dialog::backdrop { background: rgb(0 0 0 / 60%); }
        #studio-team-dialog > form { display: flex; justify-content: flex-end; }
        #studio-team-dialog .team-tab, #studio-team-dialog .team-btn, #studio-team-dialog .studio-team-input { border: 0; border-radius: 6px; background: #303030; color: #eee; padding: 6px 12px; }
        #studio-team-dialog .team-tab.active { background: #444; }
        #studio-team-dialog .studio-team-heading { background: transparent; }
        #studio-team-dialog button { font: inherit; }
        #studio-team-dialog button:disabled { cursor: not-allowed; opacity: .45; }
        #studio-team-dialog .team-dialog-summary { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:4px 0 18px; }
        #studio-team-dialog .team-dialog-summary div { display:flex; flex-direction:column; gap:4px; }
        #studio-team-dialog .team-dialog-summary span, #studio-team-dialog .team-dialog-summary small { color:#929292; font-size:11px; }
        #studio-team-dialog .team-dialog-summary strong { color:#f3f3f3; font-size:20px; }
        #studio-team-dialog .team-invite-projects, #studio-team-dialog .team-members-section { margin:0 0 18px; padding:16px; border-radius:14px; background:#181818; }
        #studio-team-dialog .team-section-heading { display:flex; justify-content:space-between; margin-bottom:12px; }
        #studio-team-dialog .team-section-heading div { display:flex; flex-direction:column; gap:4px; }
        #studio-team-dialog .team-section-heading strong { color:#e9e9e9; font-size:13px; }
        #studio-team-dialog .team-section-heading span { color:#898989; font-size:10px; }
        #studio-team-dialog .team-invite-project-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
        #studio-team-dialog .team-invite-project { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:10px; min-height:76px; padding:9px; border:0; border-radius:10px; background:#292929; color:#d7d7d7; cursor:pointer; text-align:left; }
        #studio-team-dialog .team-invite-project.active { color:#f0cf82; background:#34312a; box-shadow:inset 0 0 0 1px rgba(240,207,130,.75); }
        #studio-team-dialog .team-project-cover { display:flex; align-items:center; justify-content:center; width:58px; height:58px; overflow:hidden; border-radius:8px; background:#202020; color:#777; font-size:18px; }
        #studio-team-dialog .team-project-cover img { width:100%; height:100%; object-fit:cover; }
        #studio-team-dialog .team-project-copy { display:flex; min-width:0; flex-direction:column; gap:5px; }
        #studio-team-dialog .team-project-copy strong { overflow:hidden; color:inherit; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
        #studio-team-dialog .team-project-copy small { color:#858585; font-size:9px; }
        #studio-team-dialog .team-project-check { position:absolute; top:7px; right:9px; color:#efc867; opacity:0; }
        #studio-team-dialog .team-invite-project.active .team-project-check { opacity:1; }
        #studio-team-dialog .team-card-empty { padding:18px; border-radius:10px; background:#252525; color:#888; font-size:11px; }
        #studio-team-dialog .team-invite-card { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px; border-radius:10px; background:#242424; }
        #studio-team-dialog .team-invite-card > div:first-child { display:flex; min-width:0; flex:1; flex-direction:column; gap:4px; }
        #studio-team-dialog .team-invite-card strong { color:#e8e8e8; font-size:12px; }
        #studio-team-dialog .team-invite-project-result { min-height:14px; color:#8f9692; font-size:10px; }
        #studio-team-dialog .team-invite-code { display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:8px; background:#181818; }
        #studio-team-dialog .team-invite-code b { color:#efc867; letter-spacing:2px; }
        #studio-team-dialog .team-primary-btn, #studio-team-dialog .team-save-permissions { background:#d9b75c; color:#191919; font-weight:700; }
        #studio-team-dialog .team-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:7px; background:#303030; color:#aaa; cursor:pointer; }
        #studio-team-dialog .team-member-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:12px; }
        #studio-team-dialog .team-member-card { min-width:0; padding:14px; border-radius:12px; background:#202020; }
        #studio-team-dialog .team-member-card.owner { background:#23221f; }
        #studio-team-dialog .team-member-head { display:grid; grid-template-columns:38px minmax(0,1fr) 26px; align-items:center; gap:10px; margin-bottom:14px; }
        #studio-team-dialog .team-member-avatar { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#353535; color:#efc867; font-size:14px; font-weight:700; }
        #studio-team-dialog .team-member-identity { display:flex; min-width:0; flex-direction:column; gap:3px; }
        #studio-team-dialog .team-member-identity strong { color:#f0f0f0; font-size:13px; }
        #studio-team-dialog .team-member-identity span { overflow:hidden; color:#858585; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
        #studio-team-dialog .team-card-block { margin-top:12px; }
        #studio-team-dialog .team-card-label { display:block; margin-bottom:7px; color:#8c8c8c; font-size:10px; }
        #studio-team-dialog .team-owner-role, #studio-team-dialog .team-member-role-label { display:inline-flex; padding:6px 10px; border-radius:7px; background:#2e2e2e; color:#efc867; font-size:10px; }
        #studio-team-dialog .team-role-options, #studio-team-dialog .team-permission-levels { display:flex; gap:3px; padding:3px; border-radius:8px; background:#181818; }
        #studio-team-dialog .team-role-options button, #studio-team-dialog .team-permission-levels button { flex:1; padding:6px 8px; border:0; border-radius:6px; background:transparent; color:#8f8f8f; cursor:pointer; font-size:9px; }
        #studio-team-dialog .team-role-options button.active, #studio-team-dialog .team-permission-levels button.active { background:#3a3a3a; color:#f1d07e; }
        #studio-team-dialog .team-permission-list { display:flex; flex-direction:column; gap:6px; }
        #studio-team-dialog .team-permission-row { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px; }
        #studio-team-dialog .team-permission-row > span { color:#c9c9c9; font-size:10px; }
        #studio-team-dialog .team-point-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
        #studio-team-dialog .team-point-grid > div { display:flex; flex-direction:column; gap:3px; padding:8px; border-radius:8px; background:#292929; }
        #studio-team-dialog .team-point-grid span { color:#858585; font-size:9px; }
        #studio-team-dialog .team-point-grid strong { color:#e8e8e8; font-size:12px; }
        #studio-team-dialog .team-member-actions { display:grid; grid-template-columns:1fr 1fr auto auto; gap:6px; margin-top:12px; }
        #studio-team-dialog .team-point-action { display:flex; min-width:0; border-radius:7px; overflow:hidden; background:#292929; }
        #studio-team-dialog .team-point-action input { width:48px; min-width:0; padding:6px; border:0; outline:0; background:#292929; color:#eee; font-size:10px; }
        #studio-team-dialog .team-point-action button { flex:1; padding:6px; border:0; background:#353535; color:#ddd; cursor:pointer; font-size:9px; }
        #studio-team-dialog .team-save-permissions, #studio-team-dialog .team-leave-btn { width:100%; margin-top:8px; }
        #studio-team-dialog .team-danger-btn { color:#ff8c8c; }
        #studio-team-dialog .team-card-error { min-height:15px; margin-top:6px; color:#ff8989; font-size:9px; }
        @media (max-width: 760px) {
            #studio-team-dialog { width:calc(100vw - 24px); padding:14px; }
            #studio-team-dialog .team-member-grid { grid-template-columns:1fr; }
            #studio-team-dialog .team-member-actions { grid-template-columns:1fr 1fr; }
            #studio-team-dialog .team-invite-card { align-items:stretch; flex-direction:column; }
        }
        #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-platform:not(.solo-collapsed) {
            background: transparent;
        }
        #view-editor .canvas-platform:not(.solo-collapsed) > .canvas-stage {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        #view-editor .canvas-platform:not(.solo-collapsed) > .canvas-solo {
            grid-column: 2;
            grid-row: 1;
        }
        #view-editor .canvas-solo {
            position: relative;
            z-index: 70;
            min-height: 0;
            margin-top: 68px;
            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: #fff;
            border: 0;
            color: #000;
        }
        #view-editor #solo-send-btn:hover {
            background: #eee;
        }
        #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-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-bottom-center-bar #canvas-select-tool-btn,
        #view-editor .canvas-bottom-center-bar #canvas-select-tool-btn:hover,
        #view-editor .canvas-bottom-center-bar #canvas-select-tool-btn:focus,
        #view-editor .canvas-bottom-center-bar #canvas-select-tool-btn:focus-visible {
            outline: none;
            border: 0;
            box-shadow: none;
            background: transparent;
            color: #fff;
        }
        #view-editor .canvas-bottom-center-bar #canvas-select-tool-btn[aria-pressed="true"] { color: #f1d99e; }
        #view-editor .canvas-bottom-center-bar #canvas-flight-tool-btn,
        #view-editor .canvas-bottom-center-bar #canvas-flight-tool-btn:hover,
        #view-editor .canvas-bottom-center-bar #canvas-flight-tool-btn:focus {
            background: transparent;
            color: #fff;
            outline: none;
            box-shadow: none;
        }
        #view-editor .canvas-bottom-center-bar #canvas-flight-tool-btn[aria-pressed="true"] { color: #f1d99e; }
        #view-editor .canvas-bottom-center-bar #canvas-focus-tool-btn {
            outline: none;
            border: 0;
            box-shadow: none;
        }
        #view-editor .canvas-bottom-center-bar #canvas-focus-tool-btn:focus-visible {
            background: rgba(255,255,255,.1);
            color: #f1d99e;
        }
        #view-editor .canvas-stage.canvas-select-tool-active { cursor: grab; }
        #view-editor .canvas-stage.canvas-select-tool-active.is-panning { cursor: grabbing; }
        #view-editor .canvas-stage.canvas-select-tool-active .canvas-generic-node,
        #view-editor .canvas-stage.canvas-select-tool-active .canvas-text-node,
        #view-editor .canvas-stage.canvas-select-tool-active .canvas-image-node-output img { cursor: default; }
        #view-editor .canvas-navigation-dock [data-dock-label] { position: relative; }
        #view-editor .canvas-navigation-dock [data-dock-label]::after {
            content: attr(data-dock-label);
            position: absolute;
            bottom: calc(100% + 16px);
            left: 50%;
            transform: translate(-50%, 8px);
            padding: 5px 6px;
            border-radius: 6px;
            background: #202020;
            color: #ddd;
            font-size: 11px;
            line-height: 16px;
            font-weight: 400;
            box-sizing: content-box;
            width: max-content;
            max-width: max-content;
            white-space: nowrap;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity .18s ease, transform .18s ease, visibility .18s;
        }
        #view-editor .canvas-navigation-dock .studio-subnav:hover [data-dock-label]::after,
        #view-editor .canvas-navigation-dock .canvas-bottom-center-bar:hover [data-dock-label]::after,
        #view-editor .canvas-navigation-dock .canvas-viewport-tools:hover [data-dock-label]::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
        #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button,
        #view-editor .canvas-navigation-dock .canvas-viewport-tools button {
            transition: color .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
            transform: translateY(0);
        }
        #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button > svg,
        #view-editor .canvas-navigation-dock .canvas-viewport-tools button > svg,
        #view-editor .canvas-navigation-dock .canvas-zoom-icon {
            transition: transform .2s cubic-bezier(.2,.8,.2,1);
            transform-origin: center;
        }
        @media (hover: hover) {
            #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button:hover,
            #view-editor .canvas-navigation-dock .canvas-viewport-tools button:hover { transform: translateY(-3px); }
            #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button:hover > svg,
            #view-editor .canvas-navigation-dock .canvas-viewport-tools button:hover > svg,
            #view-editor .canvas-navigation-dock .canvas-zoom-control:hover > .canvas-zoom-icon { transform: scale(1.12); }
        }
        #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button:active,
        #view-editor .canvas-navigation-dock .canvas-viewport-tools button:active { transform: translateY(0) scale(.95); }
        #view-editor .canvas-navigation-dock .canvas-zoom-control:active > .canvas-zoom-icon { transform: scale(.95); }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-navigation-dock [data-dock-label]::after,
            #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button,
            #view-editor .canvas-navigation-dock .canvas-viewport-tools button,
            #view-editor .canvas-navigation-dock .canvas-bottom-center-bar button > svg,
            #view-editor .canvas-navigation-dock .canvas-viewport-tools button > svg,
            #view-editor .canvas-navigation-dock .canvas-zoom-icon { transition: none; }
        }
        #view-editor .canvas-viewport-tools {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 16px;
            height: 44px;
            padding: 6px 10px;
            border-radius: 10px;
            background: var(--canvas-control-surface, rgba(30,30,30,.60));
            box-shadow: var(--canvas-control-shadow, 0 10px 24px rgba(0,0,0,.3));
            backdrop-filter: var(--canvas-control-blur, blur(12px));
            -webkit-backdrop-filter: var(--canvas-control-blur, blur(12px));
        }
        #view-editor .canvas-bottom-center-bar {
            position: relative;
            z-index: 9;
            display: flex;
            align-items: center;
            gap: 16px;
            height: 44px;
            padding: 6px 10px;
            border: 0;
            border-radius: 10px !important;
            background: var(--canvas-control-surface, rgba(30,30,30,.60));
            box-shadow: var(--canvas-control-shadow, 0 10px 24px rgba(0,0,0,.3));
            backdrop-filter: var(--canvas-control-blur, blur(12px));
            -webkit-backdrop-filter: var(--canvas-control-blur, blur(12px));
        }
        #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-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: #fff;
            color: #000;
            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-grid {
            user-select: none;
            padding-left: 12px;
            padding-right: 12px;
            overscroll-behavior: contain;
        }
        #view-editor .canvas-asset-load-panel .canvas-image-asset-card.asset-load-selected {
            border-color: #e3c98d;
            box-shadow: 0 0 0 2px rgba(227,201,141,.5);
            background: #494331;
            color: #f5dc9d;
        }
        .canvas-asset-load-marquee {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            border: 1px solid #e3c98d;
            background: rgba(227,201,141,.15);
            border-radius: 4px;
        }
        #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-project-navigation{position:fixed;left:52px;top:18px;z-index:610;display:flex;align-items:center;gap:6px;max-width:min(320px,calc(100vw - 76px))}
        #view-editor .canvas-board-toggle::after{content:'⌄';margin-left:10px}
        #view-editor .canvas-board-toggle[aria-expanded="true"]::after{content:'⌃'}
        @media(max-width:560px){#view-editor .canvas-project-navigation{max-width:180px}}
        #view-editor .canvas-board-shortcuts {
            display: none;
            position: absolute;
            top: 36px;
            left: 0;
            right: auto;
            width: 240px;
            max-height: 60vh;
            overflow-y: auto;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding: 8px;
            background: #202020;
            border: 0;
            border-radius: 14px;
            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: 0;
            border-radius: 7px !important;
            background: #202020;
            color: #e8edf0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width:100%;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            font-size: 14px;
            font-weight: 500;
            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;
            height:36px;
            padding:0 12px;
            border:0;
            border-radius:9px !important;
            background:transparent;
            color:#eee;
            font-size:14px;
            font-weight:400;
            transition:background-color .15s ease;
        }
        #view-editor .canvas-board-chip:hover {
            background:#303030;
        }
        #view-editor .canvas-board-chip.active {
            background:#353535;
            color:#fff;
        }
        #view-editor .canvas-board-project-name{padding:8px 12px;color:#eee;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        #view-editor .canvas-board-children{display:flex;flex-direction:column;gap:4px;margin-left:18px;padding-left:8px;border-left:1px solid #444}
        #view-editor .canvas-board-children .canvas-board-chip{position:relative;box-shadow:none}
        #view-editor .canvas-board-children .canvas-board-chip::before{content:'';position:absolute;left:-8px;top:50%;width:8px;height:1px;background:#444}
        #view-editor .canvas-board-check{width:18px;height:18px;margin-left:auto;flex-shrink:0}
        #view-editor .canvas-board-row{display:flex;align-items:center;gap:2px;min-width:0}
        #view-editor .canvas-board-row .canvas-board-chip{flex:1;min-width:0;width:auto}
        #view-editor .canvas-board-more{width:26px;height:30px;flex:0 0 26px;border:0;border-radius:7px;background:transparent;color:#ddd;font-size:22px;opacity:0;cursor:pointer}
        #view-editor .canvas-board-row:hover .canvas-board-more,#view-editor .canvas-board-row:focus-within .canvas-board-more{opacity:1}
        #view-editor .canvas-board-more:hover{background:#353535}
        #view-editor .canvas-board-rename{width:0;min-width:0;flex:1;height:36px;padding:0 10px;border:0;border-radius:9px;background:#353535;color:#fff;font-size:14px;outline:1px solid #e3c98d}
        #view-editor .canvas-board-menu-create{display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;margin-top:4px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#fff;font-size:14px;text-align:left;cursor:pointer}
        #view-editor .canvas-board-menu-create:hover{background:#303030}
        #view-editor .canvas-board-menu-create>span:last-child{font-size:22px;color:#ccc}
        body #canvas-board-context-menu{z-index:620}
        #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-node-context-menu {
            width: 178px;
            min-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);
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        #canvas-node-context-menu button {
            min-height: 34px;
            height: auto;
            padding: 0 4px;
            border-radius: 6px !important;
            color: #eef3f5;
            font-family: inherit;
            font-size: 13px;
            font-weight: 900;
        }
        #canvas-node-context-menu button:hover {
            background: #34383b;
            color: #ffffff;
        }
        #canvas-node-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,.13) 1px, transparent 1px),
                linear-gradient(90deg, rgba(125,145,165,.13) 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,.13) 1.2px, transparent 1.2px);
            background-size: 16px 16px;
        }
        #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;
        }
        #view-editor .canvas-stage.is-transforming .canvas-board { will-change: transform; }
        #view-editor .canvas-overview-toggle {
            flex: 0 0 44px;
            width: 44px;
            height: 32px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #fff;
            cursor: pointer;
        }
        #view-editor .canvas-overview-toggle svg { width: 20px; height: 20px; stroke-width: 1.8; }
        #view-editor .canvas-overview-toggle:hover,
        #view-editor .canvas-zoom-control:hover { background: rgba(255,255,255,.1); color: #f1d99e; }
        #view-editor .canvas-overview-toggle[aria-pressed="true"] { color: #f1d99e; }
        #view-editor .canvas-overview[hidden] { display: none; }
        #view-editor .canvas-overview {
            position: absolute;
            z-index: 4;
            right: 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-zoom-control {
            --zoom-expanded-width: min(350px, calc(100vw - 520px));
            position: relative;
            display: flex;
            align-items: center;
            gap: 0;
            width: 44px;
            min-height: 32px;
            padding: 0 12px;
            box-sizing: border-box;
            border-radius: 7px;
            color: #fff;
            transition: width .22s ease, gap .22s ease;
        }
        #view-editor .canvas-zoom-icon { flex: 0 0 20px; }
        #view-editor .canvas-zoom-control:hover,
        #view-editor .canvas-zoom-control:focus-within {
            width: max(200px, var(--zoom-expanded-width));
            gap: 12px;
        }
        #view-editor .canvas-zoom-track {
            flex: 1;
            min-width: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transition: opacity .15s ease;
        }
        #view-editor .canvas-zoom-control:hover .canvas-zoom-track,
        #view-editor .canvas-zoom-control:focus-within .canvas-zoom-track {
            opacity: 1;
            overflow: visible;
            pointer-events: auto;
        }
        #view-editor .canvas-zoom-control #canvas-zoom-value { display: none; }
        #view-editor .canvas-zoom-control:hover #canvas-zoom-value,
        #view-editor .canvas-zoom-control:focus-within #canvas-zoom-value { display: block; }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-zoom-control,
            #view-editor .canvas-zoom-track { transition: none; }
        }
        #view-editor #canvas-zoom-slider {
            display: block;
            width: 100%;
            height: 18px;
            padding: 0;
            margin: 0;
            accent-color: #e3c98d;
            cursor: pointer;
        }
        #view-editor .canvas-zoom-ticks {
            display: flex;
            justify-content: space-between;
            margin: 3px 7px 0;
            color: #aaa;
            font-size: 9px;
        }
        #view-editor .canvas-zoom-ticks span { width: 0; display: flex; justify-content: center; }
        #view-editor #canvas-zoom-value { min-width: 42px; text-align: right; font-size: 12px; color: #e3c98d; font-variant-numeric: tabular-nums; }
        #view-editor .canvas-keyboard-joystick {
            position: absolute;
            left: 24px;
            bottom: 24px;
            width: 100px;
            height: 100px;
            z-index: 6;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(110,110,110,.16) 0 38%, transparent 39%), rgba(32,32,32,.48);
            pointer-events: none;
            opacity: 0;
            transition: opacity .2s ease;
            color: rgba(255,255,255,.55);
            font-size: 10px;
        }
        #view-editor .canvas-keyboard-joystick.visible { opacity: 1; }
        #view-editor .canvas-keyboard-joystick span { position: absolute; }
        #view-editor .joystick-up { top: 8px; left: 50%; transform: translateX(-50%); }
        #view-editor .joystick-down { bottom: 8px; left: 50%; transform: translateX(-50%); }
        #view-editor .joystick-left { left: 9px; top: 50%; transform: translateY(-50%); }
        #view-editor .joystick-right { right: 9px; top: 50%; transform: translateY(-50%); }
        #view-editor .joystick-axis {
            position: absolute;
            left: 38px;
            top: 38px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(227,201,141,.55);
            transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
            transition: transform .08s ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-keyboard-joystick,
            #view-editor .joystick-axis { transition: none; }
        }
        #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: 50%;
            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: 240px;
            max-width: 60vw;
            height: 76px;
            border-radius: 0 !important;
            border: 0;
            background-color: transparent;
            background-image: url('../icons/aixmov-logo02-blue-x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }
        #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: 3;
            pointer-events: none;
        }
        #view-editor .canvas-multi-selection-frame {
            position: absolute;
            z-index: 2;
            display: none;
            box-sizing: border-box;
            border: 1px solid rgba(178, 184, 190, .72);
            border-radius: 16px;
            background: rgba(105, 110, 116, .2);
            box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 12px 28px rgba(0, 0, 0, .18);
            cursor: move;
            pointer-events: auto;
        }
        #view-editor .canvas-multi-selection-frame.is-visible {
            display: block;
        }
        #view-editor .canvas-multi-selection-frame:active {
            cursor: grabbing;
        }
        #view-editor .canvas-multi-selection-create {
            position: absolute;
            width: max-content;
            flex-direction: row;
            flex-wrap: nowrap;
            white-space: nowrap;
            writing-mode: horizontal-tb;
            z-index: 5;
            display: none;
            align-items: center;
            gap: 21px;
            min-height: 78px;
            padding: 0 32px;
            border: 1px solid rgba(216, 185, 110, .55);
            border-radius: 16px !important;
            color: #f0d99d;
            background: rgba(42, 44, 47, .94);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
            font-size: 39px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            pointer-events: auto;
        }
        #view-editor .canvas-multi-selection-create.is-visible {
            display: inline-flex;
        }
        #view-editor .canvas-multi-selection-create:hover {
            color: #fff2c6;
            border-color: #e8c46a;
            background: rgba(54, 56, 59, .98);
        }
        #view-editor .canvas-multi-selection-create svg {
            flex-shrink: 0;
            width: 51px;
            height: 51px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #view-editor .canvas-toolbar-layer {
            position: absolute;
            inset: 0;
            z-index: 10000;
            overflow: visible;
            pointer-events: none;
        }
        #view-editor #canvas-node-layer [data-canvas-floating-toolbar],
        #view-editor #canvas-box-layer [data-canvas-floating-toolbar] {
            display: none !important;
        }
        #view-editor .canvas-toolbar-overlay-item {
            position: absolute;
            z-index: 1;
            width: max-content;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            pointer-events: auto;
            transform: translate(-50%, -100%) scale(var(--canvas-toolbar-counter-scale, 1));
            transform-origin: 50% 100%;
        }
        #view-editor .canvas-toolbar-overlay-item > .canvas-box-floating-toolbar,
        #view-editor .canvas-toolbar-overlay-item > .canvas-image-node-bubble-bar,
        #view-editor .canvas-toolbar-overlay-item > .canvas-video-bubble-bar,
        #view-editor .canvas-toolbar-overlay-item > .canvas-image-edit-tools {
            position: relative !important;
            inset: auto !important;
            left: auto !important;
            top: auto !important;
            bottom: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: none !important;
            transition: none !important;
        }
        #view-editor .canvas-toolbar-overlay-group {
            width: auto;
        }
        #view-editor .canvas-toolbar-overlay-group > .canvas-box-floating-toolbar {
            width: 66.666%;
            min-width: max-content;
            flex-shrink: 0;
        }
        #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:not(.selected) {
            border-color: transparent !important;
            box-shadow: none;
        }
        #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));
        }
        #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.edge {
            height: 10px;
        }
        #view-editor .canvas-network-box-resize.edge-v {
            width: 10px;
        }
        #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;
            bottom: calc(100% + 8px);
            min-height: 0;
            padding: 0 4px;
            display: flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            border-radius: 0;
            color: #7a8388;
            font-size: 50px;
            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-box-floating-toolbar {
            position: absolute;
            left: 50%;
            bottom: calc(100% + var(--canvas-toolbar-gap, 70px));
            z-index: 30;
            width: 66.666%;
            height: 96px;
            box-sizing: border-box;
            padding: 7px 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 22px !important;
            background: rgba(31, 33, 35, .94);
            -webkit-backdrop-filter: blur(9px) saturate(1.12);
            backdrop-filter: blur(9px) saturate(1.12);
            box-shadow: 0 7px 22px rgba(0, 0, 0, .44);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate(-50%, 5px) scale(var(--canvas-toolbar-counter-scale, 1));
            transform-origin: 50% 100%;
            transition: opacity .16s ease, visibility 0s linear .16s;
        }
        #view-editor .canvas-network-box:hover > .canvas-box-floating-toolbar,
        #view-editor .canvas-network-box.selected > .canvas-box-floating-toolbar,
        #view-editor .canvas-network-box-collapsed:hover > .canvas-box-floating-toolbar,
        #view-editor .canvas-network-box-collapsed.selected > .canvas-box-floating-toolbar {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0) scale(var(--canvas-toolbar-counter-scale, 1));
            transition-delay: 0s;
        }
        #points-log-modal > div { width: 880px; max-width: 94vw; background: #202020; }
        #points-canvas-summary { margin-bottom: 20px; color: #aaa; font-size: 12px; }
        .points-canvas-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #eee; font-size: 14px; font-weight: 600; }
        .points-canvas-heading > span { color: #999; font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .points-canvas-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
        .points-canvas-card { padding: 16px; border-radius: 14px; background: #292929; }
        .points-canvas-card > span { display: flex; align-items: center; gap: 7px; color: #ccc; }
        .points-canvas-card > span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--points-accent); }
        .points-canvas-card strong { display: block; margin-top: 12px; color: var(--points-accent); font-size: 24px; overflow-wrap: anywhere; }
        .points-canvas-card small { margin-left: 6px; color: #999; font-size: 11px; font-weight: 400; }
        .points-canvas-note { margin-top: 10px; color: #888; line-height: 1.6; }
        .points-project-heading{margin-top:20px}
        .points-boards-scroll{max-height:220px;overflow:auto;margin-top:16px;border-radius:12px;background:#202020}
        .points-boards-table{width:100%;border-collapse:collapse;font-size:12px}
        .points-boards-table th{position:sticky;top:0;background:#202020;color:#aaa;font-weight:500}
        .points-boards-table th,.points-boards-table td{padding:10px 12px;text-align:right;white-space:nowrap}
        .points-boards-table th:first-child,.points-boards-table td:first-child{text-align:left;white-space:normal;overflow-wrap:anywhere}
        .points-boards-table .is-current{color:#e3c98d;background:#292929}
        .points-current-canvas { display: block; margin-top: 4px; color: #dfc88b; font-size: 10px; white-space: nowrap; }
        @media (max-width: 600px) { .points-canvas-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        #view-editor .canvas-toolbar-overlay-group > .canvas-capsule-floating-toolbar {
            width: max-content;
            border: 0;
            background: #202020;
        }
        #view-editor .canvas-box-floating-action {
            min-width: max-content;
            height: 82px;
            flex: 1 0 auto;
            padding: 0 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border: 0;
            border-radius: 16px !important;
            background: transparent;
            color: #aeb5b9;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 28px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: color .15s ease, background-color .15s ease;
        }
        #view-editor .canvas-box-floating-action:hover {
            color: #edf1f2;
            background: rgba(255, 255, 255, .07);
        }
        #view-editor .canvas-box-layout-menu { position: relative; flex: 0 0 auto; }
        #view-editor .canvas-box-layout-menu > summary { list-style: none; }
        #view-editor .canvas-box-layout-menu > summary::-webkit-details-marker { display: none; }
        #view-editor .canvas-box-layout-options { position: absolute; top: calc(100% + 12px); right: 0; z-index: 1; min-width: max-content; padding: 10px; border: 0; border-radius: 18px; background: #202020; }
        #view-editor .canvas-box-layout-options > button { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; padding: 14px 24px; border: 0; border-radius: 12px!important; background: transparent; color: #ddd; font-size: 28px; text-align: left; white-space: nowrap; cursor: pointer; }
        #view-editor .canvas-box-layout-options kbd { color: #999; font: inherit; }
        #view-editor .canvas-box-layout-options > button:hover { background: #333; color: #ead39b; }
        #view-editor .canvas-box-floating-action.reference.is-active {
            color: #ead39b;
            background: rgba(234, 211, 155, .12);
        }
        #view-editor .canvas-box-floating-action svg {
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #view-editor .canvas-box-floating-divider {
            width: 1px;
            height: 44px;
            flex: 0 0 1px;
            background: rgba(255, 255, 255, .1);
        }
        #view-editor .canvas-box-floating-color-dot {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border: 2px solid rgba(255, 255, 255, .7);
            border-radius: 50% !important;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .32);
        }
#view-editor .canvas-network-box-collapsed-name {
            max-width: 1200px;
            color: #ffffff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 50px;
            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: 66px;
            height: 66px;
        }
        #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.port-right {
            right: -45px;
        }
        #view-editor .canvas-network-box-collapsed-port.output.port-bottom {
            left: 50%;
            right: auto;
            top: auto;
            bottom: -45px;
            transform: translateX(-50%);
        }
        #view-editor .canvas-network-box-collapsed-port.output {
            pointer-events: auto;
            cursor: crosshair;
        }
        #view-editor .canvas-network-box-output-port {
            position: absolute;
            width: 100px;
            height: 100px;
            padding: 0;
            border: 2px solid #d7bb7a;
            border-radius: 50% !important;
            background: rgba(20,22,24,.35);
            color: #d7bb7a;
            cursor: default;
            z-index: 4;
            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.port-right {
            right: -50px;
            top: 50%;
            transform: translateY(-50%);
        }
        #view-editor .canvas-network-box-output-port.port-bottom {
            left: 50%;
            bottom: -50px;
            transform: translateX(-50%);
        }
        #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-context-menu button.canvas-context-menu-command {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        #canvas-box-context-menu button.canvas-context-menu-command kbd {
            color: #8f979d;
            font: 700 11px/1 "Microsoft YaHei", Arial, sans-serif;
        }
        #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: 0;
            color: #edf1f2;
            font-size: 16px;
            line-height: 1.7;
        }
        #view-editor .canvas-large-prompt-wrap .canvas-prompt-highlight-content {
            padding: 14px;
        }
        #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 {
            z-index: 999;
        }
        #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-flow {
            --meteor-offset: 0px;
            display: none;
            fill: none;
            stroke: #fff4ca;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 1 32;
            vector-effect: non-scaling-stroke;
            pointer-events: none;
        }
        #view-editor .canvas-connection.is-active > .canvas-connection-flow {
            display: block;
            animation: canvas-connection-flow .75s linear infinite;
        }
        #view-editor .canvas-connection-flow.meteor-tail-near {
            --meteor-offset: 10px;
            stroke-dasharray: 10 23;
            stroke-width: 3;
            stroke-opacity: .65;
        }
        #view-editor .canvas-connection-flow.meteor-tail-mid {
            --meteor-offset: 20px;
            stroke-dasharray: 10 23;
            stroke-width: 2;
            stroke-opacity: .35;
        }
        #view-editor .canvas-connection-flow.meteor-tail-end {
            --meteor-offset: 30px;
            stroke-dasharray: 10 23;
            stroke-width: 1;
            stroke-opacity: .12;
        }
        @keyframes canvas-connection-flow {
            from { stroke-dashoffset: var(--meteor-offset); }
            to { stroke-dashoffset: calc(var(--meteor-offset) - 33px); }
        }
        #view-editor .canvas-connection.is-active > .canvas-connection-flow.meteor-spark {
            stroke: #fffef4;
            stroke-width: 5.5;
            animation: canvas-connection-sparks 6s linear infinite;
        }
        @keyframes canvas-connection-sparks {
            from { stroke-dashoffset: var(--meteor-spark-offset); }
            to { stroke-dashoffset: calc(var(--meteor-spark-offset) - 264px); }
        }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-connection.is-active > .canvas-connection-flow,
            #view-editor .canvas-connection.is-active > .canvas-connection-flow.meteor-spark { animation: none; }
        }
        #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.is-active > .canvas-connection-visible {
            stroke-opacity: 0;
        }
        #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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23202020' stroke-width='3'/%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair !important; }
        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: none;
        }
        #view-editor .canvas-selection-marquee {
            position: absolute;
            z-index: 4;
            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-node-layer .is-chain-active:not(.selected) .canvas-text-node-card,
        #view-editor #canvas-node-layer .is-chain-active:not(.selected) .canvas-text-node-result,
        #view-editor #canvas-node-layer .is-chain-active:not(.selected) .canvas-generic-node-card,
        #view-editor #canvas-node-layer .is-chain-active:not(.selected) .canvas-image-node-card,
        #view-editor #canvas-node-layer .is-chain-active:not(.selected) .canvas-director-capture-card,
        #view-editor #canvas-node-layer .is-chain-active:not(.selected) .canvas-merge-node-card {
            outline: 1px solid #d8b96e;
            outline-offset: 1px;
        }
        #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-audio-node .canvas-text-node-name {
            font-weight: 400;
        }
        #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 {
            /* Cancel board zoom so port dimensions stay in screen pixels. */
            left: calc(-17px / var(--canvas-zoom, 1));
            width: calc(8px / var(--canvas-zoom, 1));
            height: calc(10px / var(--canvas-zoom, 1));
            border-radius: calc(3px / var(--canvas-zoom, 1)) !important;
        }
        #view-editor .canvas-node-port.output {
            right: calc(-34px / var(--canvas-zoom, 1));
            width: calc(52px / var(--canvas-zoom, 1));
            height: calc(58px / var(--canvas-zoom, 1));
            border: 0;
            border-radius: 0 !important;
            background: transparent;
            box-shadow: none;
            filter: none;
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23202020' stroke-width='3'/%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair;
        }
        #view-editor .canvas-node-port.output::before {
            content: '';
            position: absolute;
            right: 50%;
            top: 50%;
            width: calc(16px / var(--canvas-zoom, 1));
            height: calc(16px / var(--canvas-zoom, 1));
            border: 0;
            border-radius: 50%;
            background: radial-gradient(circle, transparent 62%, #fff 65%, #fff 95%, transparent 98%);
            transform: translate(50%, -50%);
            opacity: 0;
            pointer-events: none;
        }
        #view-editor .canvas-node-port.output:not(.port-bottom)[data-hotzone-following="1"]::before,
        #view-editor .canvas-node-port.output:not(.port-bottom):hover::before,
        #view-editor .canvas-node-port.output:not(.port-bottom):focus-visible::before,
        #view-editor .canvas-node-port.output:not(.port-bottom).is-connecting::before {
            opacity: 1;
            animation: canvas-output-droplet .48s both;
        }
        @keyframes canvas-output-droplet {
            0% { transform: translate(calc(50% - 40px / var(--canvas-zoom, 1)), -50%) scale(.2, .6); background-color: #fff; }
            40% { transform: translate(65%, -50%) scale(1.6, .65); border-radius: 70% 40% 40% 70%; background-color: #fff; }
            65% { transform: translate(42%, -50%) scale(.8, 1.15); background-color: #fff; }
            100% { transform: translate(50%, -50%) scale(1); background-color: transparent; }
        }
        #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%);
            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%);
            filter: none;
        }
        #view-editor .canvas-node-port.output:hover {
            background: transparent;
            box-shadow: none;
            filter: none;
        }
        /* Inputs stay unobtrusive; output feedback is drawn by the droplet. */
        #view-editor .canvas-node-port {
            background: transparent !important;
            box-shadow: none !important;
        }
        #view-editor .canvas-media-node-frame {
            position: relative;
        }
        #view-editor .canvas-generation-delay-water{position:absolute;inset:0;z-index:24;border-radius:inherit;overflow:hidden;pointer-events:none}
        #view-editor .canvas-generation-delay-cancel{position:absolute;right:24px;bottom:24px;z-index:25;padding:21px 30px;border:0;outline:0;box-shadow:none;border-radius:24px!important;background:#434343;color:#fff;font-size:36px;line-height:1.4;white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s}
        #view-editor .canvas-generation-delay-cancel:hover{background:#555}
        #view-editor .canvas-generation-delay-cancel:active{transform:scale(.97)}
        #view-editor .canvas-generation-delay-cancel:focus-visible{text-decoration:underline;text-underline-offset:8px}

        #view-editor .canvas-connection-routing-lock {
            position: absolute;
            top: 10px;
            left: 10px;
            right: auto;
            z-index: 11;
            width: 36px;
            height: 36px;
            padding: 7px;
            border: 1px solid rgba(215, 187, 122, .38) !important;
            border-radius: 9px !important;
            background: rgba(18, 20, 22, .68) !important;
            color: rgba(255, 255, 255, .78);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
            cursor: pointer;
            opacity: .82;
            transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
        }
        #view-editor .canvas-connection-routing-lock svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        #view-editor .canvas-connection-routing-lock:hover {
            color: #fff3c6;
            border-color: rgba(241, 217, 158, .9) !important;
            opacity: 1;
        }
        #view-editor .canvas-connection-routing-lock.is-locked {
            color: #fff0bd;
            border-color: #d7bb7a !important;
            background: rgba(83, 66, 27, .88) !important;
            box-shadow: 0 0 12px rgba(224, 195, 129, .52), 0 3px 10px rgba(0, 0, 0, .3);
            opacity: 1;
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port {
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .16s ease, visibility 0s linear .16s, transform .2s ease, box-shadow .2s ease, filter .2s ease;
        }
        #view-editor .canvas-image-node:hover .canvas-media-node-frame > .canvas-node-port,
        #view-editor .canvas-audio-node:hover .canvas-media-node-frame > .canvas-node-port,
        body.canvas-connecting #view-editor .canvas-media-node-frame > .canvas-node-port.input,
        #view-editor .canvas-media-node-frame > .canvas-node-port.is-connecting {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition-delay: 0s;
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port.input.port-left {
            left: calc(-17px / var(--canvas-zoom, 1));
            right: auto;
            top: 50%;
            width: calc(8px / var(--canvas-zoom, 1));
            height: calc(10px / var(--canvas-zoom, 1));
            transform: translateY(-50%);
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port.input.port-top {
            left: 50%;
            right: auto;
            top: calc(-17px / var(--canvas-zoom, 1));
            width: calc(10px / var(--canvas-zoom, 1));
            height: calc(8px / var(--canvas-zoom, 1));
            transform: translateX(-50%);
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-right {
            left: auto;
            right: calc(-34px / var(--canvas-zoom, 1));
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-bottom {
            left: 50%;
            right: auto;
            top: auto;
            bottom: calc(-44px / var(--canvas-zoom, 1));
            transform: translateX(-50%);
        }
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-bottom::before {
            left: 50%;
            right: auto;
            transform: translate(-50%, -50%);
        }
        #view-editor .canvas-image-node:hover .canvas-media-node-frame > .canvas-node-port.input.port-left,
        #view-editor .canvas-audio-node:hover .canvas-media-node-frame > .canvas-node-port.input.port-left,
        #view-editor .canvas-media-node-frame > .canvas-node-port.input.port-left:hover {
            transform: translateY(-50%);
        }
        #view-editor .canvas-image-node:hover .canvas-media-node-frame > .canvas-node-port.input.port-top,
        #view-editor .canvas-audio-node:hover .canvas-media-node-frame > .canvas-node-port.input.port-top,
        #view-editor .canvas-media-node-frame > .canvas-node-port.input.port-top:hover {
            transform: translateX(-50%);
        }
        #view-editor .canvas-image-node:hover .canvas-media-node-frame > .canvas-node-port.output.port-right,
        #view-editor .canvas-audio-node:hover .canvas-media-node-frame > .canvas-node-port.output.port-right,
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-right:hover,
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-right.is-connecting {
            transform: translateY(-50%);
        }
        #view-editor .canvas-image-node:hover .canvas-media-node-frame > .canvas-node-port.output.port-bottom,
        #view-editor .canvas-audio-node:hover .canvas-media-node-frame > .canvas-node-port.output.port-bottom,
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-bottom:hover,
        #view-editor .canvas-media-node-frame > .canvas-node-port.output.port-bottom.is-connecting {
            transform: translateX(-50%);
        }
        #view-editor [data-canvas-box-id] > .canvas-node-port.output.port-right {
            right: calc(-34px / var(--canvas-zoom, 1));
            left: auto;
            top: 50%;
            width: calc(52px / var(--canvas-zoom, 1));
            height: calc(58px / var(--canvas-zoom, 1));
            border: 0;
            background: transparent;
            box-shadow: none;
            color: transparent;
            transform: translateY(-50%);
        }
        #view-editor .canvas-node-port.output[data-hotzone-anchor="1"] {
            pointer-events: none !important;
        }
        #view-editor .canvas-node-output-hotzone {
            position: absolute;
            z-index: 2;
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23202020' stroke-width='3'/%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair;
            border-radius: 16px 0 0 16px;
            background: transparent;
            box-shadow: none;
        }
        #view-editor .canvas-node-output-hotzone.hotzone-right {
            top: calc(100% / 6);
            right: -4%;
            width: 12%;
            height: calc(100% * 2 / 3);
        }
        #view-editor .canvas-node-port.output.port-bottom {
            left: 50%;
            right: auto;
            top: auto;
            bottom: calc(-44px / var(--canvas-zoom, 1));
            transform: translateX(-50%);
            /* Keep a measurable routing anchor, without a new-connection hit area. */
            pointer-events: none !important;
        }
        #view-editor .canvas-text-node:hover .canvas-node-port.output.port-bottom,
        #view-editor .canvas-generic-node:hover .canvas-node-port.output.port-bottom {
            transform: translateX(-50%);
        }
        #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: #202020;
            box-shadow: 0 12px 24px rgba(0,0,0,.28);
        }
        #view-editor .canvas-text-node-composer,
        #view-editor .canvas-image-node-composer {
            transform-origin: top center;
            opacity: 1;
            scale: 1;
            transition: scale .28s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, display .28s allow-discrete;
        }
        #view-editor .canvas-text-node-composer.collapsed,
        #view-editor .canvas-image-node-composer.collapsed {
            display: none;
            opacity: 0;
            scale: .85 .25;
            pointer-events: none;
        }
        @starting-style {
            #view-editor .canvas-text-node-composer:not(.collapsed),
            #view-editor .canvas-image-node-composer:not(.collapsed) { opacity: 0; scale: .85 .25; }
        }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-text-node-composer,
            #view-editor .canvas-image-node-composer { transition: none; }
            #view-editor .canvas-node-port.output::before { animation: none !important; }
        }
        #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: #202020;
            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: #fff;
            color: #000;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: 900;
        }
        #view-editor .canvas-text-node-save:hover { background: #eee; }
        #view-editor .canvas-text-node-tools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 72px;
            padding: 0 12px;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        #view-editor .canvas-text-node-tools-label {
            color: #c8a96a;
            font-size: 30px;
            font-weight: 700;
        }
        #view-editor .canvas-text-node-tools-btn {
            height: 60px;
            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: 30px;
            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: 40px;
            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: 20px !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-image-node-composer,
        #view-editor .canvas-text-node-composer,
        #view-editor .canvas-generic-node.selected .canvas-text-node-composer,
        #view-editor .canvas-generic-node.selected .canvas-image-node-composer {
            background: #202020;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
        #view-editor .canvas-image-node-card.has-image {
            background: #2a2c2f !important;
            border: 0 !important;
            box-shadow: none !important;
            height: auto;
            min-height: 0;
        }
        #view-editor .canvas-image-node:not(.canvas-video-node) .canvas-image-node-card.has-image {
            padding: 0;
            border-radius: 20px !important;
            overflow: hidden;
        }
        #view-editor .canvas-image-node-card.has-image .canvas-image-node-output {
            background: #2a2c2f !important;
        }
        #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 {
            display: block;
            object-fit: contain;
            border-radius: 0 !important;
        }
        #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: #2a2c2f !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); } }
        /* Generation-only water treatment; image/video content and controls are untouched. */
        #view-editor .canvas-image-node-card > .is-generating-water {
            position: static;
        }
        #view-editor .canvas-image-node-progress.canvas-generation-water {
            position: absolute;
            inset: 0;
            height: auto;
            overflow: hidden;
            isolation: isolate;
            border-radius: inherit;
            background: #202020;
            color: #f3f0e7;
            pointer-events: none;
            display: grid;
            place-content: center;
        }
        #view-editor .canvas-generation-water::before { display: none; }
        #view-editor .canvas-generation-water > span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            font-size: 64px;
            font-weight: 400;
            line-height: 1;
            text-shadow: none;
        }
        #view-editor .canvas-generation-water > small {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 2;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.4;
            color: #b8b7b1;
        }
        #view-editor .canvas-generation-water-title { top: 12%; }
        #view-editor .canvas-generation-water-caption { top: calc(50% + 44px); }
        #view-editor .canvas-generation-water-fill {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(var(--generation-level, 1%) * 0.9);
            background: rgba(224,194,130,.12);
            transition: height .9s ease;
        }
        #view-editor .canvas-generation-water-fill::after {
            content: '';
            position: absolute;
            inset: 0 -36px -36px;
            /* Broad soft caustic loops, not concentric rings or a bubble texture. */
            background-image: var(--water-caustics);
            background-size: 100% auto;
            filter: blur(2px);
            opacity: .18;
            transform-origin: center top;
            animation: canvasGenerationWaterShimmer 4.5s ease-in-out infinite alternate;
        }
        #view-editor .canvas-generation-water-surface {
            position: absolute;
            top: -30px;
            left: 0;
            right: 0;
            height: 30px;
            overflow: visible;
            transform-origin: center bottom;
            animation: canvasGenerationWaterSwell 3.6s ease-in-out infinite;
        }
        #view-editor .canvas-generation-water-surface svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 30px;
            max-width: none;
            max-height: none;
            animation: canvasGenerationWaterWave 5s linear infinite;
        }
        #view-editor .canvas-generation-water-surface .water-body { fill: rgba(224,194,130,.12); }
        #view-editor .canvas-generation-water-surface .water-highlight {
            fill: none;
            stroke: rgba(232,210,150,.78);
            stroke-width: 1.5px;
            filter: drop-shadow(0 0 4px rgba(232,210,150,.4));
        }
        #view-editor .canvas-generation-water-surface svg + svg {
            top: 4px;
            opacity: .38;
            animation-duration: 7s;
            animation-direction: reverse;
        }
        #view-editor .canvas-generation-water-surface svg + svg .water-body { fill: none; }
        #view-editor .canvas-generation-water-bubbles {
            position: absolute;
            inset: 5px 0 0;
            overflow: hidden;
        }
        #view-editor .canvas-generation-water-bubbles i {
            position: absolute;
            top: 0;
            bottom: 0;
            width: min(calc(var(--bubble-size) * 1px / var(--canvas-zoom, 1)), 1.5%);
            animation: canvasGenerationWaterBubble var(--bubble-duration) linear var(--bubble-delay) infinite;
        }
        #view-editor .canvas-generation-water-bubbles i::after {
            content: '';
            display: block;
            width: 100%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle at 32% 28%, rgba(247,228,182,.5), rgba(215,187,122,.06) 45%, rgba(235,210,153,.25) 75%, transparent 80%);
        }
        @keyframes canvasGenerationWaterWave { to { transform: translateX(-50%); } }
        @keyframes canvasGenerationWaterSwell {
            0%, 100% { transform: scaleY(.8); }
            50% { transform: scaleY(1.35); }
        }
        @keyframes canvasGenerationWaterShimmer {
            0% { opacity: .13; transform: translate(-12px, -6px) skewX(5deg) scale(1.04, .95); }
            50% { opacity: .2; transform: translate(0, -12px) skewX(-2deg) scale(.97, 1.06); }
            100% { opacity: .15; transform: translate(12px, -4px) skewX(-6deg) scale(1.06, .98); }
        }
        @keyframes canvasGenerationWaterBubble {
            0% { transform: translateY(100%); opacity: 0; }
            12% { opacity: .65; }
            85% { opacity: .4; }
            100% { transform: translateY(0); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-generation-water-fill { transition: none; }
            #view-editor .canvas-generation-water-fill::after,
            #view-editor .canvas-generation-water-surface,
            #view-editor .canvas-generation-water-surface svg,
            #view-editor .canvas-generation-water-bubbles i { animation: none; }
            #view-editor .canvas-generation-water-bubbles { display: none; }
        }
        #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: #202020;
            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: 50px;
            line-height: 1.2;
            cursor: text;
            user-select: text;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #727272 transparent;
            scrollbar-gutter: stable;
        }
        #view-editor .workspace-panel .canvas-image-node-prompt {
            color: transparent !important;
            background: transparent !important;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar,
        #view-editor .canvas-text-node-input::-webkit-scrollbar,
        #view-editor .canvas-prompt-wrap:not(.canvas-large-prompt-wrap) > .canvas-prompt-highlight::-webkit-scrollbar {
            width: 12px;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-track,
        #view-editor .canvas-text-node-input::-webkit-scrollbar-track {
            background: transparent;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-thumb,
        #view-editor .canvas-text-node-input::-webkit-scrollbar-thumb {
            background: #727272;
            border-radius: 4px;
        }
        #view-editor .canvas-image-node-prompt::-webkit-scrollbar-thumb:hover,
        #view-editor .canvas-text-node-input::-webkit-scrollbar-thumb:hover {
            background: #999999;
        }
        #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: #202020;
            overflow: hidden;
        }
        #view-editor .canvas-prompt-highlight {
            position: absolute;
            inset: 0;
            z-index: 0;
            box-sizing: border-box;
            padding: 0;
            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-highlight-content {
            position: relative;
            width: 100%;
            min-height: 100%;
            box-sizing: border-box;
            padding: 6px 8px;
            transform: translate3d(0, 0, 0);
            transform-origin: left top;
            will-change: transform;
        }
        #view-editor .canvas-prompt-wrap:not(.canvas-large-prompt-wrap) > .canvas-prompt-highlight {
            scrollbar-width: thin;
            scrollbar-gutter: stable;
        }
        #view-editor .canvas-prompt-ref-token {
            color: #8fc8ff;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        #view-editor .canvas-prompt-wrap > .canvas-prompt-highlight,
        #view-editor .canvas-prompt-wrap > textarea {
            font-style: normal;
            font-weight: 400;
            font-variant-ligatures: none;
            letter-spacing: normal;
            word-spacing: normal;
            text-align: left;
            text-indent: 0;
            text-transform: none;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: break-word;
            tab-size: 4;
        }
        #view-editor .canvas-prompt-wrap:not(.canvas-text-prompt-wrap):not(.canvas-large-prompt-wrap) > .canvas-prompt-highlight,
        #view-editor .canvas-prompt-wrap:not(.canvas-text-prompt-wrap):not(.canvas-large-prompt-wrap) > textarea {
            font-size: 50px;
            letter-spacing: 4px;
        }
        #view-editor .canvas-prompt-wrap:not(.canvas-text-prompt-wrap) .canvas-prompt-caret {
            height: 57px;
        }
        #view-editor #canvas-large-text-editor .canvas-prompt-caret {
            height: 1em;
        }
        #view-editor .canvas-prompt-wrap > textarea,
        #view-editor .canvas-prompt-wrap > #canvas-large-text-editor-input {
            caret-color: transparent !important;
        }
        #view-editor .canvas-text-prompt-wrap .canvas-text-node-input {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
            border-radius: 0 !important;
            background: transparent !important;
            color: transparent !important;
            scrollbar-width: thin;
            scrollbar-color: #727272 transparent;
            scrollbar-gutter: stable;
        }
        #view-editor .canvas-prompt-caret {
            display: inline-block;
            width: 2px;
            height: 1em;
            margin: 0 -1px;
            vertical-align: -0.12em;
            background: #ffffff;
            pointer-events: none;
            animation: canvas-prompt-caret-blink 1s steps(1, end) infinite;
        }
        @keyframes canvas-prompt-caret-blink {
            0%, 52% { opacity: 1; }
            53%, 100% { opacity: 0; }
        }
        #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: 110px;
            height: 110px;
            flex-shrink: 0;
            border-radius: 50% !important;
            background: #fff;
            color: #000;
            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 #workspace-canvas .canvas-image-node-generate svg {
            width: 58px;
            height: 58px;
            display: block;
        }
        #view-editor .canvas-image-node-generate:hover {
            background: #eee;
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0,0,0,.3);
        }
        #view-editor .canvas-image-node-generate:active {
            transform: scale(.88);
            background: #ddd;
            box-shadow: 0 5px 14px rgba(0,0,0,.28);
        }
        #view-editor .canvas-image-node-generate:disabled,
        #view-editor .canvas-text-node-save:disabled,
        #view-editor #solo-send-btn:disabled,
        #dudu-pet .dudu-chat-send:disabled,
        .asset-generate-submit:disabled { background:#444; color:#888; opacity:1; cursor:default; transform:none; box-shadow:none; }
        #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: nowrap;
            gap: 7px;
        }
        #view-editor .canvas-image-node-dot-field {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            align-self: stretch;
            overflow: hidden;
            pointer-events: none;
            border-radius: 6px;
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        }
        #view-editor .canvas-image-node-dot-field::before {
            content: '';
            position: absolute;
            inset: -12px;
            background-image: radial-gradient(circle, rgba(92, 179, 255, .85) 0 1px, rgba(46, 143, 247, .22) 1.5px, transparent 3px);
            background-size: 12px 12px;
            animation: canvas-image-dot-flow 2.4s linear infinite;
        }
        @keyframes canvas-image-dot-flow {
            from { transform: translateX(0); }
            to { transform: translateX(12px); }
        }
        @media (prefers-reduced-motion: reduce) {
            #view-editor .canvas-image-node-dot-field::before { animation: none; }
        }
        #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-three-view-node { width: 230px; }
        #view-editor .canvas-three-view-node > .canvas-generic-node-card {
            background: #202020;
            padding: 9px;
            box-shadow: none;
            cursor: grab;
        }
        #view-editor .canvas-three-view-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
        #view-editor .canvas-three-view-tabs button {
            flex: 1;
            padding: 5px 6px;
            border: 0;
            border-radius: 8px;
            background: #303030;
            color: #ddd;
            font-size: 18px;
            cursor: pointer;
        }
        #view-editor .canvas-three-view-tabs button.active { color: #e3c98d; background: #414141; }
        #view-editor .canvas-three-view-example { display: flex; flex-direction: column; align-items: center; gap: 5px; }
        #view-editor .canvas-three-view-example img { display: block; width: 100%; height: 150px; object-fit: contain; border-radius: 8px; }
        #view-editor .canvas-three-view-example span { color: #aaa; font-size: 14px; }
        #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: -96px;
            left: -24px;
            z-index: -1;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 24px !important;
            background: #202020;
            box-shadow: 0 20px 48px rgba(0, 0, 0, .38);
            pointer-events: auto;
            cursor: grab;
        }
        #view-editor .canvas-director-capture-node.is-stack-dragging .canvas-director-capture-board {
            cursor: grabbing;
        }
        #view-editor .canvas-director-capture-node.is-stack-dragging {
            transition: none;
        }
        #view-editor .canvas-director-capture-node.selected .canvas-director-capture-card,
        #view-editor .canvas-director-capture-node.is-reference-highlighted .canvas-director-capture-card {
            border-color: #d8b96e;
            box-shadow: 0 0 0 1px rgba(238,214,150,.35), 0 0 14px rgba(216,185,110,.3);
        }
        #view-editor .canvas-director-capture-node.is-expanded .canvas-director-capture-card > .canvas-node-port.output {
            right: 0;
            width: calc(12px / var(--canvas-zoom, 1));
        }
        #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: -84px;
            right: -12px;
            z-index: 40;
            width: 84px;
            height: 84px;
            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: 64px;
            height: 64px;
        }
        #view-editor .canvas-image-node .canvas-text-node-name.canvas-image-node-static-name {
            font-size: 40px;
            font-weight: 400;
            font-family: "Microsoft YaHei", sans-serif;
            color: #7a8388;
        }
        #view-editor .canvas-text-node-name,
        #view-editor .canvas-image-node .canvas-text-node-name.canvas-image-node-static-name,
        #view-editor .canvas-generic-node-label,
        #view-editor .canvas-network-box-title,
        #view-editor .canvas-network-box-collapsed-name,
        #view-editor .canvas-capsule-label,
        #view-editor .canvas-encapsulation-name {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        #view-editor .canvas-vr-node { width: 680px; }
        #view-editor .canvas-image-node-bubble-bar {
            position: absolute;
            left: 50%;
            bottom: calc(100% + var(--canvas-image-toolbar-gap, 16px));
            transform: translate(-50%, 5px) scale(var(--canvas-toolbar-counter-scale, 1));
            transform-origin: 50% 100%;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: max-content;
            height: 96px;
            box-sizing: border-box;
            padding: 7px 12px;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 22px !important;
            background: rgba(31, 33, 35, .94);
            -webkit-backdrop-filter: blur(9px) saturate(1.12);
            backdrop-filter: blur(9px) saturate(1.12);
            box-shadow: 0 7px 22px rgba(0, 0, 0, .44);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .16s ease, visibility 0s linear .16s;
        }
        #view-editor .canvas-image-node:hover .canvas-image-node-bubble-bar,
        #view-editor .canvas-image-node.selected .canvas-image-node-bubble-bar {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0) scale(var(--canvas-toolbar-counter-scale, 1));
            pointer-events: auto;
            transition-delay: 0s;
        }
        #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: 82px;
            height: 82px;
            padding: 0;
            border: 0;
            border-radius: 16px !important;
            background: transparent;
            color: #aeb5b9;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color .15s ease, background-color .15s ease;
        }
        #view-editor .canvas-image-node-bubble-bar button svg {
            width: 34px;
            height: 34px;
            display: block;
        }
        #view-editor .canvas-image-node-bubble-bar button:hover {
            color: #edf1f2;
            background: rgba(255, 255, 255, .07);
        }
        #view-editor .canvas-image-node-bubble-bar button.active {
            color: #ead39b;
            background: rgba(234, 211, 155, .12);
        }
        #view-editor .canvas-image-node-output > img {
            transition: filter .18s ease;
        }
        #view-editor .canvas-image-node-output > .canvas-image-edit-preview {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
        }
        #view-editor .canvas-image-node-output > .canvas-image-edit-preview > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: transparent;
        }
        #view-editor .canvas-relight-live,
        #view-editor .canvas-relight-live > span {
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
        }
        #view-editor .canvas-relight-live {
            z-index: 4;
            overflow: hidden;
        }
        #view-editor .canvas-relight-live-light { mix-blend-mode: screen; }
        #view-editor .canvas-relight-live-shade { mix-blend-mode: multiply; }
        #view-editor .canvas-relight-live-rim {
            inset: 2px !important;
            border: 5px solid rgba(255, 244, 211, .72);
            box-shadow: inset 0 0 42px rgba(255, 232, 174, .38), 0 0 20px rgba(255, 232, 174, .2);
            mix-blend-mode: screen;
            transition: opacity .18s ease;
        }
        #view-editor .canvas-relight-panel {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            z-index: 90;
            width: 620px;
            transform: translateX(-50%);
            color: #e8e9ea;
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: 16px;
            background: rgba(34, 36, 38, .98);
            box-shadow: 0 20px 54px rgba(0, 0, 0, .48);
            overflow: hidden;
            cursor: default;
        }
        #view-editor .canvas-relight-panel.is-saving::after {
            content: '正在应用打光…';
            position: absolute;
            inset: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f4dc9a;
            font-size: 17px;
            background: rgba(24, 25, 26, .78);
            backdrop-filter: blur(6px);
        }
        #view-editor .canvas-relight-head {
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px;
            border-bottom: 1px solid rgba(255, 255, 255, .055);
        }
        #view-editor .canvas-relight-head strong { font-size: 17px; font-weight: 650; color: #f5f5f5; }
        #view-editor .canvas-relight-head button {
            width: 32px; height: 32px; border: 0; border-radius: 8px;
            color: #969b9e; background: transparent; font-size: 24px; line-height: 1; cursor: pointer;
        }
        #view-editor .canvas-relight-head button:hover { color: #fff; background: rgba(255,255,255,.07); }
        #view-editor .canvas-relight-body {
            display: grid;
            grid-template-columns: 220px minmax(0, 1fr);
            gap: 20px;
            padding: 18px;
        }
        #view-editor .canvas-relight-orbit {
            position: relative;
            height: 220px;
            border-radius: 14px;
            overflow: hidden;
            cursor: crosshair;
            background: radial-gradient(circle at 50% 45%, rgba(105,110,114,.24), rgba(12,13,14,.72) 70%), #171819;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
        }
        #view-editor .canvas-relight-orbit::before {
            content: '';
            position: absolute;
            inset: 22px;
            border-radius: 50%;
            background: radial-gradient(circle at 37% 30%, rgba(255,255,255,.16), rgba(92,96,98,.11) 40%, rgba(0,0,0,.32) 78%);
            border: 1px solid rgba(255,255,255,.1);
            box-shadow: inset -20px -28px 45px rgba(0,0,0,.25);
        }
        #view-editor .canvas-relight-orbit-ring {
            position: absolute;
            left: 30px; right: 30px; top: 50%; height: 64px;
            margin-top: -32px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 50%;
            transform: rotate(-12deg);
        }
        #view-editor .canvas-relight-orbit-ring.ring-b { transform: rotate(78deg); }
        #view-editor .canvas-relight-orbit-image {
            position: absolute;
            left: 50%; top: 50%; width: 54px; height: 36px;
            transform: translate(-50%,-50%) rotateY(-12deg);
            border: 2px solid rgba(255,255,255,.2);
            background: linear-gradient(145deg, #6b777d, #25333a);
            box-shadow: 0 5px 13px rgba(0,0,0,.5);
        }
        #view-editor .canvas-relight-orbit-light {
            position: absolute;
            width: 14px; height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 50%;
            background: #fff7d8;
            box-shadow: 0 0 0 4px rgba(255,248,220,.12), 0 0 20px 6px rgba(255,238,180,.7);
            transition: left .16s ease, top .16s ease;
        }
        #view-editor .canvas-relight-orbit small {
            position: absolute; left: 0; right: 0; bottom: 9px;
            text-align: center; color: #777e82; font-size: 11px;
        }
        #view-editor .canvas-relight-controls { min-width: 0; }
        #view-editor .canvas-relight-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
        #view-editor .canvas-relight-tabs {
            display: grid; grid-template-columns: 1fr 1fr; width: 174px;
            padding: 3px; border-radius: 10px; background: #292b2d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
        }
        #view-editor .canvas-relight-tabs button,
        #view-editor .canvas-relight-directions button {
            border: 0; border-radius: 8px; color: #949a9e; background: transparent; cursor: pointer;
        }
        #view-editor .canvas-relight-tabs button { height: 34px; }
        #view-editor .canvas-relight-tabs button.active,
        #view-editor .canvas-relight-directions button.active {
            color: #fff; background: #3b3e40; box-shadow: 0 2px 8px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.07);
        }
        #view-editor .canvas-relight-switch-label { display: inline-flex; align-items: center; gap: 8px; color: #bdc1c3; font-size: 13px; white-space: nowrap; }
        #view-editor .canvas-relight-switch-label input { position: absolute; opacity: 0; pointer-events: none; }
        #view-editor .canvas-relight-switch-label i {
            position: relative; width: 34px; height: 20px; border-radius: 10px; background: #55595c; transition: background .18s ease;
        }
        #view-editor .canvas-relight-switch-label i::after {
            content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s ease;
        }
        #view-editor .canvas-relight-switch-label input:checked + i { background: #bc9141; }
        #view-editor .canvas-relight-switch-label input:checked + i::after { transform: translateX(14px); }
        #view-editor .canvas-relight-slider,
        #view-editor .canvas-relight-color {
            display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; gap: 10px; margin-top: 18px; color: #bdc1c3; font-size: 13px;
        }
        #view-editor .canvas-relight-slider input { width: 100%; accent-color: #e6c87d; }
        #view-editor .canvas-relight-slider output { text-align: right; color: #8f9598; }
        #view-editor .canvas-relight-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
        #view-editor .canvas-relight-color b {
            grid-column: 2 / 4; width: 100%; height: 26px; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
        }
        #view-editor .canvas-relight-label { margin: 18px 0 8px; color: #bdc1c3; font-size: 13px; }
        #view-editor .canvas-relight-directions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
        #view-editor .canvas-relight-directions button { height: 34px; background: #292b2d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
        #view-editor .canvas-relight-directions button:hover { color: #fff; background: #35383a; }
        #view-editor .canvas-relight-rim-row { margin-top: 16px; color: #bdc1c3; font-size: 13px; }
        #view-editor .canvas-relight-footer {
            display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.055); background: rgba(24,25,26,.38);
        }
        #view-editor .canvas-relight-footer > span { flex: 1; }
        #view-editor .canvas-relight-footer button {
            height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #c8cbcd; background: #303234; cursor: pointer;
        }
        #view-editor .canvas-relight-footer button:hover { color: #fff; border-color: rgba(255,255,255,.18); }
        #view-editor .canvas-relight-footer button.primary { color: #1c1a14; border-color: #e4c572; background: #e4c572; font-weight: 650; }
        #view-editor .canvas-relight-footer button.canvas-relight-reset { padding-left: 0; color: #92989b; border: 0; background: transparent; }
        #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; }
        /* The floating edit toolbar shares control styles with the editor,
           but must not inherit the canvas host's stretched/clipped layout. */
        #view-editor .canvas-toolbar-overlay-item.canvas-image-node-edit-host {
            inset: auto;
            width: max-content;
            height: auto;
            overflow: visible;
            align-items: flex-end;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-stage {
            width: 100%;
            height: 100%;
            overflow: hidden;
            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;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }
        #view-editor .canvas-image-node-edit-host .canvas-image-edit-canvas-wrap canvas {
            width: 100%;
            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.is-picking-color .canvas-image-edit-canvas {
            cursor: crosshair;
        }
        #view-editor .canvas-image-edit-tools .canvas-image-edit-size-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #bdbdbd;
            font-size: 18px;
        }
        #view-editor .canvas-image-edit-tools .canvas-image-edit-size-wrap input[type="range"] {
            width: 80px;
            accent-color: #c8a96a;
        }
        #view-editor .canvas-image-edit-tools .canvas-image-edit-size-number {
            width: 48px;
            min-width: 0;
            height: 28px;
            padding: 2px 4px;
            border: 0;
            border-radius: 7px;
            background: #202020;
            color: #eee;
            color-scheme: dark;
            font: inherit;
            text-align: center;
        }
        #view-editor .canvas-image-edit-tools .canvas-image-edit-color-box,
        #view-editor .canvas-image-edit-tools .canvas-image-edit-color {
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        #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: 6px;
            width: max-content;
            height: 96px;
            box-sizing: border-box;
            z-index: 30;
            padding: 7px 12px;
            border-radius: 22px !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: 6px;
            width: max-content;
            height: 96px;
            box-sizing: border-box;
            z-index: 30;
            padding: 7px 12px;
            border-radius: 22px !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: 8px;
            padding: 10px;
        }
        #view-editor .canvas-image-edit-shape-menu button {
            min-width: 160px;
            min-height: 64px;
            border: 0;
            background: transparent;
            color: #dfe4e6;
            font-size: 28px;
            line-height: 1.4;
            padding: 10px 24px;
            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,
        #view-editor .canvas-video-node .canvas-image-node-empty .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: 0 1 auto;
            min-width: 0;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            max-width: 100%;
            overflow: visible;
            max-height: none;
        }
        #view-editor .canvas-image-node-thumb {
            position: relative;
            width: 72px;
            height: 72px;
            flex-shrink: 0;
            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 > .image-viewer-stage {
            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: 82px;
            height: 82px;
            padding: 0;
            border: 0;
            border-radius: 16px;
            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: 48px;
            height: 48px;
            flex-shrink: 0;
        }
        .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: rgba(244,217,138,.12);
            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: 48px;
            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;
            border-color: transparent;
        }
        #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-selected-preview-ratio .canvas-image-node-card {
            height: auto;
            min-height: 0;
        }
        #view-editor .canvas-selected-preview-ratio .canvas-image-node-card > .canvas-image-node-output,
        #view-editor .canvas-selected-preview-ratio .canvas-image-node-card > .canvas-video-node-output,
        #view-editor .canvas-selected-preview-ratio .canvas-image-node-card > .canvas-image-node-empty {
            position: relative;
            width: 100%;
            height: auto !important;
            min-height: 0 !important;
            aspect-ratio: var(--canvas-preview-aspect) !important;
            flex: 0 0 auto !important;
            box-sizing: border-box;
        }
        #view-editor .canvas-selected-preview-ratio .canvas-image-node-output > img,
        #view-editor .canvas-selected-preview-ratio .canvas-video-node-output > video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        #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;
            padding: 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: 20px !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 {
            display: block;
            object-fit: cover;
            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: 8px;
            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-transport {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 2px;
        }
        #view-editor .canvas-video-node-output .canvas-video-boundary-btn {
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
            padding: 0;
            border: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: color 0.18s ease;
        }
        #view-editor .canvas-video-node-output .canvas-video-boundary-btn:hover {
            color: #ffffff;
        }
        #view-editor .canvas-video-node-output .canvas-video-boundary-btn svg {
            width: 15px;
            height: 15px;
            display: block;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #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: 24px;
            min-width: 24px;
            cursor: pointer;
            position: relative;
            touch-action: none;
            user-select: none;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.26);
            pointer-events: none;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress.is-scrubbing {
            cursor: grabbing;
        }
        #view-editor .canvas-video-node-output .canvas-video-progress .canvas-video-progress-fill {
            width: 0%;
            height: 4px;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        #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: color 0.18s ease;
        }
        #view-editor .canvas-video-node-output .canvas-video-capture-btn:hover {
            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;
            user-select: text;
            -webkit-user-select: text;
        }
        #view-editor .canvas-video-node-error span {
            color: #ffd7d7;
            font-size: 13px;
            font-weight: 900;
        }
        #view-editor .canvas-video-node-error-message {
            max-width: 90%;
            max-height: 220px;
            overflow: auto;
            color: #e2a7a7;
            font-size: 11px;
            line-height: 1.5;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
            cursor: text;
            user-select: text;
            -webkit-user-select: text;
        }
        #view-editor .canvas-video-node-error-copy {
            min-width: 82px;
            height: 30px;
            padding: 0 12px;
            border: 1px solid rgba(255, 185, 185, .45);
            border-radius: 7px !important;
            background: rgba(76, 36, 36, .72);
            color: #ffd7d7;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        #view-editor .canvas-video-node-error-copy:hover {
            border-color: rgba(255, 215, 215, .9);
            background: rgba(108, 47, 47, .88);
        }
        #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: transparent;
            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: inherit;
        }
        #view-editor .canvas-credit-value{display:inline-flex;align-items:center;color:#f4d98a}
        #view-editor .canvas-credit-value[data-source="team"]{color:#ef4444}
        #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;
            outline: none;
            box-shadow: none;
            border-radius: 50% !important;
            background: #202426;
            color: #ffffff;
            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-video-ref-item .canvas-video-ref-del svg{width:60%;height:60%;display:block;flex-shrink:0;pointer-events:none}
        #view-editor .canvas-video-ref-item .canvas-video-ref-del:focus-visible{background:#555}
        #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: 40px;
        }
        #view-editor .canvas-video-ref-picker-item .canvas-video-ref-audio {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e3c98d;
            font-size: 40px;
            line-height: 1;
        }
        #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: 0;
            right: auto;
            top: 0;
            bottom: auto;
            transform: none;
            z-index: 999;
            width: 380px;
            max-height: 1024px;
            overflow: auto;
            border: 0;
            border-radius: 12px !important;
            background: #202020;
            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 {
            box-sizing: border-box;
            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: none;
            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: auto;
        }
        #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-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-one-click-reference { display:flex; align-items:center; flex-wrap:wrap; gap:24px; padding:16px 0; }
        #view-editor .canvas-one-click-reference button { border:0 !important; outline:none; box-shadow:none !important; border-radius:12px; padding:18px 30px; background:#202326; color:#eef2f3; font:600 38px system-ui; cursor:pointer; transition:background .18s,transform .18s; }
        #view-editor .canvas-one-click-reference button:hover { background:#3b3b3b; }
        #view-editor .canvas-one-click-reference button:active { transform:scale(.97); }
        #view-editor .canvas-one-click-reference button:focus-visible { background:#3b3b3b; text-decoration:underline; text-underline-offset:8px; }
        #view-editor .canvas-one-click-reference button strong { font-family:inherit; font-size:inherit; font-weight:900; }
        #view-editor .canvas-one-click-reference span { color:#929c9f; font-size:30px; }
        #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-one-click-reference.is-compact{padding:0;flex-wrap:nowrap;flex-shrink:0}
        #view-editor .canvas-one-click-reference.is-compact button{height:90px;border-radius:24px!important}
        #view-editor .canvas-video-tools{position:relative;flex-shrink:0}
        #view-editor .canvas-video-tools>summary{display:flex;align-items:center;justify-content:center;width:90px;height:90px;padding:0;border:0;outline:0;box-shadow:none;border-radius:24px;background:#303030;color:#fff;cursor:pointer;list-style:none;transition:background .15s,transform .15s}
        #view-editor .canvas-video-tools>summary::-webkit-details-marker{display:none}
        #view-editor .canvas-video-tools>summary svg{width:38px;height:38px;max-width:none;max-height:none;display:block;flex-shrink:0}
        #view-editor .canvas-video-tools>summary:hover,#view-editor .canvas-video-tools[open]>summary{background:#414141;color:#fff}
        #view-editor .canvas-video-tools>summary:active{transform:scale(.96)}
        #view-editor .canvas-video-tools-menu{position:absolute;left:0;bottom:calc(100% + 18px);z-index:30;min-width:330px;padding:15px;border-radius:30px;background:#292929;box-shadow:0 18px 48px #0005;display:flex;flex-direction:column;gap:6px}
        #view-editor .canvas-video-tools-menu button{height:90px;padding:15px 27px;border:0;outline:0;box-shadow:none;border-radius:24px!important;background:transparent;color:#ddd;font-size:36px;text-align:left;white-space:nowrap}
        #view-editor .canvas-video-tools-menu button:hover{background:#414141;color:#fff}
        #view-editor .canvas-video-tools>summary:focus-visible,#view-editor .canvas-video-tools-menu button:focus-visible{background:#414141;color:#fff;text-decoration:underline;text-underline-offset:9px}
        #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>svg{width:38px;height:38px;flex-shrink:0;margin-right:14px}
        #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 .canvas-video-duration-slider-row{grid-template-columns:minmax(0,1fr) 150px;gap:36px;padding:30px 18px;background:#292929;border-radius:36px}
        #view-editor .canvas-image-node-settings-panel .canvas-video-node-duration-value{color:#eee;font-size:39px;font-weight:400;line-height:60px;font-variant-numeric:tabular-nums}
        #view-editor .canvas-long-duration-line{display:flex;gap:24px;align-items:stretch}
        #view-editor .canvas-long-duration-line .canvas-video-duration-slider-row{flex:1;min-width:0;grid-template-columns:minmax(0,1fr) 210px;gap:24px;margin-bottom:0}
        #view-editor .canvas-long-duration-line .canvas-video-node-duration-value{white-space:nowrap;text-align:right}
        #view-editor .canvas-long-toggle,#view-editor .canvas-long-modes button{border:0;outline:0;box-shadow:none;border-radius:36px!important;background:#343434;color:#bbb;padding:24px;font-size:36px;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
        #view-editor .canvas-long-toggle:hover,#view-editor .canvas-long-modes button:hover{background:#414141;color:#fff}
        #view-editor .canvas-long-toggle.active,#view-editor .canvas-long-modes button.active{background:#ddd;color:#222;border:0;box-shadow:none}
        #view-editor .canvas-long-toggle:active,#view-editor .canvas-long-modes button:active{transform:scale(.97)}
        #view-editor .canvas-long-toggle:focus-visible,#view-editor .canvas-long-modes button:focus-visible{text-decoration:underline;text-underline-offset:12px}
        #view-editor .canvas-long-duration-line>.canvas-long-toggle{height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center}
        #view-editor .canvas-long-modes{display:flex;gap:24px;margin-top:30px}
        #view-editor .canvas-long-modes button{flex:1}
        #view-editor .canvas-long-note{font-size:30px;line-height:1.6;color:#aaa;margin-top:24px}
        #view-editor .canvas-long-modes[hidden],#view-editor .canvas-long-note[hidden]{display:none}
        #view-editor .canvas-image-node-settings-panel .canvas-video-node-duration-slider{accent-color:#e3c98d;background:#363636;border:0;box-shadow:none}
        #view-editor .canvas-image-node-settings-panel {
            position:absolute;z-index:12;right:0;bottom:120px;width:1170px;padding:54px 60px;border:1px solid #ffffff0c;
            border-radius:66px!important;background:#262626;box-shadow:0 36px 108px #0005;
        }
        #view-editor .canvas-image-node-settings-panel.hidden{display:none}
        #view-editor .canvas-image-node-settings-panel:not(.hidden){transform-origin:bottom left;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-node-settings-panel .canvas-image-setting-label{margin:0 0 36px;color:#888;font-size:36px;font-weight:400}
        #view-editor .canvas-image-setting-row,#view-editor .canvas-image-ratio-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:9px;padding:9px;margin-bottom:60px;border-radius:48px;background:#363636}
        #view-editor .canvas-image-setting-row button,#view-editor .canvas-image-ratio-grid button{flex:1 0 108px;min-width:108px;height:126px;padding:24px 15px;border:0;border-radius:36px!important;background:transparent;color:#ddd;font-size:36px;font-weight:400;line-height:60px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color .15s ease,color .15s ease}
        #view-editor .canvas-image-setting-row button:hover,#view-editor .canvas-image-ratio-grid button:hover{background:#3b3b3b;color:#fff;box-shadow:none;transform:none}
        #view-editor .canvas-image-setting-row button.active,#view-editor .canvas-image-ratio-grid button.active,#view-editor .canvas-video-node .canvas-image-ratio-grid button.active{background:#414141;color:#fff;border:0;box-shadow:none;transform:none}
        #view-editor .canvas-image-ratio-grid button{display:grid;grid-template-rows:60px 60px;align-content:center;justify-items:center;align-items:center;gap:30px;height:222px;padding:24px 15px}
        #view-editor .canvas-image-ratio-icon{display:block;width:51px;height:36px;border:4.8px solid currentColor;border-radius:9px!important;opacity:1;box-sizing:border-box}
        #view-editor .canvas-image-ratio-icon.portrait{width:33px;height:51px}
        #view-editor .canvas-image-ratio-icon.square{width:51px;height:51px}
        #view-editor .canvas-image-node-settings-panel>.canvas-image-setting-row:last-child,#view-editor .canvas-image-node-settings-panel>.canvas-video-duration-slider-row:last-child{margin-bottom:0}
        #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;
        }
        .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;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-50%) scale(.96);
            transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
        }
        .canvas-zoom-indicator.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) scale(1);
            transition-delay: 0s;
        }
        #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%;
            }
        }
        /* Asset image generator: single-mode composer inspired by the project canvas. */
        #asset-create-modal .asset-create-modal {
            width: min(920px, calc(100vw - 40px));
            height: min(760px, calc(100vh - 40px));
            grid-template-rows: 42px minmax(0, 1fr);
            background: #090a0c;
            border: 1px solid #2d3033;
            border-radius: 14px;
            box-shadow: 0 24px 70px rgba(0,0,0,.7);
        }
        #asset-create-modal .asset-create-titlebar {
            background: #111315 !important;
            border-bottom-color: rgba(255,255,255,.08) !important;
        }
        #asset-create-modal .asset-create-titlebar>button {
            background: transparent !important;
            border: 0;
        }
        .asset-create-workspace {
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 0;
            padding: 14px;
            overflow: auto;
            background: #08090b;
        }
        .asset-result-panel {
            display: flex;
            flex: 1 1 360px;
            flex-direction: column;
            min-height: 300px;
            padding: 14px;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            background: #0d0f11;
        }
        .asset-result-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
        }
        .asset-name-field {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            color: #a7aaa8;
            font-size: 11px;
        }
        #asset-create-name {
            width: min(320px, 45vw);
            height: 34px;
            box-sizing: border-box;
            padding: 0 11px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 8px;
            outline: 0;
            background: #151719;
            color: #eef0ed;
            font-size: 13px;
        }
        #asset-create-name:focus { border-color: #5f9df7; }
        .asset-result-badge {
            flex-shrink: 0;
            padding: 6px 10px;
            border: 1px solid #3d8cf080;
            border-radius: 999px;
            color: #75afff;
            font-size: 11px;
        }
        #asset-create-modal .asset-preview-box {
            flex: 1 1 0;
            min-height: 210px;
            margin: 0;
            border: 0;
            border-radius: 11px;
            background: #07090a;
        }
        #asset-create-modal .asset-preview-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        #asset-create-empty {
            color: #5f6467;
            font-size: 12px;
        }
        .asset-result-actions {
            display: flex;
            gap: 8px;
            padding-top: 12px;
        }
        .asset-result-actions button {
            height: 32px;
            padding: 0 13px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 8px;
            background: #101214;
            color: #d8dcda;
            font-size: 11px;
            cursor: pointer;
        }
        .asset-result-actions button:hover { background: #1a1d20; color: #fff; }
        .asset-result-actions .asset-save-action { margin-left: auto; border-color: #d6a95766; color: #e8c887; }
        .asset-generator-card {
            flex: 0 0 auto;
            min-height: 230px;
            padding: 13px 14px 12px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 16px;
            background: #151616;
            box-shadow: 0 14px 30px rgba(0,0,0,.28);
        }
        .asset-generator-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 28px;
        }
        .asset-generator-title {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #6ca9ff;
            font-size: 13px;
            font-weight: 700;
        }
        .asset-generator-title svg { width: 18px; height: 18px; }
        #asset-create-status {
            max-width: 60%;
            color: #8f9699;
            font-size: 11px;
            text-align: right;
        }
        #asset-create-prompt {
            display: block;
            width: 100%;
            min-height: 82px;
            margin: 4px 0 8px;
            padding: 9px 4px;
            box-sizing: border-box;
            resize: none;
            border: 0;
            outline: 0;
            background: transparent;
            color: #e6e8e6;
            font: 13px/1.7 "Microsoft YaHei", sans-serif;
        }
        #asset-create-prompt::placeholder { color: #626769; }
        .asset-reference-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            color: #666c6f;
            font-size: 10px;
        }
        .asset-reference-upload {
            display: grid;
            place-items: center;
            width: 54px;
            height: 48px;
            padding: 4px;
            border: 1px dashed #697176;
            border-radius: 9px;
            background: #292c2e;
            color: #b9bec0;
            font-size: 10px;
            cursor: pointer;
        }
        .asset-reference-upload span { display: block; font-size: 18px; line-height: 14px; }
        .asset-reference-upload:hover { border-color: #6ca9ff; color: #fff; }
        .asset-generator-controls {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 14px;
        }
        .asset-generator-selects { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
        .asset-generator-selects label { display: grid; gap: 4px; color: #7f8587; font-size: 9px; }
        .asset-generator-selects select {
            height: 32px;
            max-width: 230px;
            padding: 0 10px;
            border: 1px solid #454a4d;
            border-radius: 8px;
            outline: 0;
            background: #101214;
            color: #e4e7e5;
            font-size: 11px;
        }
        .asset-generator-submit { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
        #asset-create-points { color: #e8c887; font-size: 11px; font-weight: 700; white-space: nowrap; }
        .asset-generate-submit {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #fff;
            color: #000;
            cursor: pointer;
        }
        .asset-generate-submit:hover:not(:disabled) { background: #fff; }
        .asset-generate-submit svg { width: 20px; height: 20px; }
        @media (max-width: 680px) {
            #asset-create-modal .asset-create-modal { min-width: 0; }
            .asset-result-head,.asset-generator-controls { align-items: stretch; flex-direction: column; }
            #asset-create-name { width: 100%; }
            .asset-generator-selects { width: 100%; }
            .asset-generator-selects label:first-child { flex: 1; }
            .asset-generator-selects select { width: 100%; }
            .asset-generator-submit { justify-content: flex-end; }
        }
        #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); }
        }

        #view-editor .canvas-merge-node {
            width: 340px !important;
        }
        #view-editor .canvas-merge-node .canvas-text-node-head {
            min-height: 40px;
            padding-bottom: 4px;
        }
        #view-editor .canvas-image-node.canvas-merge-node .canvas-text-node-head-icon.canvas-merge-node-head-icon {
            width: 34px;
            height: 28px;
            color: #e6cd91;
            font-family: "Segoe UI", Arial, sans-serif;
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -4px;
        }
        #view-editor .canvas-merge-node .canvas-text-node-name {
            font-size: 40px;
            color: #8e979d;
        }
        #view-editor .canvas-merge-node-card {
            position: relative;
            box-sizing: border-box;
            width: 340px;
            height: 255px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 26px 20px;
            border: 1px solid rgba(118, 124, 129, .58);
            border-radius: 28px !important;
            background:
                radial-gradient(circle at 50% 42%, rgba(222, 194, 129, .12), transparent 42%),
                linear-gradient(145deg, #2b2e31 0%, #202326 58%, #191c1e 100%);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .035);
            cursor: grab;
        }
        #view-editor .canvas-merge-node-card:active {
            cursor: grabbing;
        }
        #view-editor .canvas-merge-node.selected .canvas-merge-node-card {
            border-color: #d8b96e;
            box-shadow: 0 0 0 1px rgba(238, 214, 150, .34), 0 0 24px rgba(216, 185, 110, .18), 0 18px 34px rgba(0, 0, 0, .34);
        }
        #view-editor .canvas-merge-node-logo {
            position: relative;
            width: 188px;
            height: 94px;
            display: grid;
            place-items: center;
            color: #ead39b;
            filter: drop-shadow(0 0 12px rgba(225, 194, 124, .22));
        }
        #view-editor .canvas-merge-node-logo::before {
            content: "";
            position: absolute;
            inset: 10px 2px;
            border: 1px solid rgba(232, 208, 151, .12);
            border-radius: 999px;
            transform: skewX(-12deg);
        }
        #view-editor .canvas-merge-node-logo svg {
            position: relative;
            z-index: 1;
            width: 144px;
            height: 72px;
            overflow: visible;
        }
        #view-editor .canvas-merge-node-logo path {
            stroke: currentColor;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #view-editor .canvas-merge-node-summary {
            margin-top: 2px;
            color: #c7cdd1;
            font-size: 16px;
            font-weight: 650;
            letter-spacing: .03em;
        }
        #view-editor .canvas-merge-node-counts {
            margin-top: 14px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        #view-editor .canvas-merge-node-counts span {
            min-width: 58px;
            height: 26px;
            padding: 0 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 13px !important;
            color: #bfc6cb;
            background: rgba(9, 11, 12, .34);
            font-size: 12px;
            font-weight: 700;
        }
        #view-editor .canvas-merge-node-counts .image { color: #e6cf95; }
        #view-editor .canvas-merge-node-counts .video { color: #84d0e4; }
        #view-editor .canvas-merge-node-counts .audio { color: #c8a9e6; }
/* Prevent dynamically inserted button icons from using the browser's 300x150 SVG fallback. */
button > svg:not([width]):not([height]),
[role="button"] > svg:not([width]):not([height]) {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

/* Keep canvas icons stable while the large canvas stylesheet finishes painting. */
#workspace-canvas svg:not([width]):not([height]) {
    width: 1.25em;
    height: 1.25em;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
}
/* Prompt actions share the same asset surface in personal and studio projects. */
.asset-prompt-tile { min-width: 0; background: #202020; border-radius: 14px; overflow: hidden; }
.asset-prompt-tile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 8px; }
.asset-prompt-tile-actions button { border: 0; background: #303030; color: #ddd; border-radius: 8px; padding: 6px 8px; font-size: 11px; transition: background .15s; }
.asset-prompt-tile-actions button:hover { background: #3c3c3c; }

/* Shared canvas dock hover feedback, including selection and flight tools. */
@media (hover: hover) {
    #view-editor .canvas-navigation-dock button[data-dock-label]:hover,
    #view-editor .canvas-navigation-dock #canvas-select-tool-btn[aria-pressed]:hover,
    #view-editor .canvas-navigation-dock #canvas-flight-tool-btn[aria-pressed]:hover,
    #view-editor .canvas-navigation-dock .canvas-zoom-control:hover { color: #f1d99e; }
    #view-editor .canvas-navigation-dock [data-dock-label]:hover::after { color: #f1d99e; }
    #view-editor .canvas-navigation-dock #canvas-dudu-toggle-btn:hover svg circle:first-child { stroke: #f1d99e; }
    #view-editor .canvas-navigation-dock #canvas-dudu-toggle-btn:hover .dudu-btn-eye { stroke: #f1d99e; }
}