/* ================= 核心变量与主题 ================= */
        :root { --bg-color: #000; --dot-color: #2a2a2a; --text-main: #eee; --text-sub: #777; --btn-logo:#eee; --accent-jg:#eee; --accent-cocc:#eee; --accent-coyu:#fff; --text-title:#fff; --text-subv:#eee; --text-subva:#aaa; --text-slx: #aaa; --text-xdt:#eee; --text-suba:#eee; --text-cc:#eee; --text-logo:#eee; --panel-bg: #111; --panel-bgaa:#1a1a1a; --panel-bgab:#eee; --panel-border: #333; --input-bg: #2a2a2a; --btn-bg: #2a2a2a; --btn-hover: #222; --accent-color: #4f46e5; --accent-colr: #eee; --accent-hover: #4338ca; --text-km: #eee; --text-kmh: #645ce8; }
        body.light-mode { --bg-color: #f8f8f8; --dot-color: #d0d0d0; --text-main: #333; --text-sub: #666; --btn-logo:#333; --accent-jg:#4f46e5; --accent-cocc:#666; --accent-coyu:#4338ca; --text-title:#333; --text-subv:#666; --text-slx: #999; --text-subva:#777; --text-suba:#666; --text-xdt:#666; --text-cc:#333; --text-logo:#111; --panel-bg: #ffffff; --panel-bgaa:#f8f8f8; --panel-border: #e0e0e0; --input-bg: #f0f0f0; --btn-bg: #f9f9f9; --btn-hover: #ececec; --accent-colr: #4f46e5; --text-km: #645ce8; --text-kmh: #4338ca; }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; user-select: none; }
        body { overflow: hidden; background-color: var(--bg-color); transition: background-color 0.3s; }

        /* ================= 画布视口 ================= */
        #viewport { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; cursor: default; overflow: hidden; }
        /* 【方案二】：大一圈的独立背景图层，由 GPU 直接接管平移 */
        #bgGrid { position: absolute; top: -100px; left: -100px; width: calc(100vw + 200px); height: calc(100vh + 200px); background-image: radial-gradient(var(--dot-color) 1px, transparent 1px); pointer-events: none; will-change: transform; }
        #canvasContent { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 100%; height: 100%; pointer-events: none; }
		
		
		
        /* ================= 顶部导航 ================= */
		header { position: absolute; top: 0; width: 100%; padding: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 3500; pointer-events: none; }
		.header-actions { display: flex; align-items: center; pointer-events: auto; margin-right: 0; margin-top: 0; }
        
		.header-btn { margin: 0 0 0 6px; width: 135px; height: 32px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: url(images/logo.png) center center / 134px 32px no-repeat; pointer-events: auto; cursor: pointer; }
		body.light-mode .header-btn {background: url(images/logo-grey.png) center center / 134px 32px no-repeat;}
		
		/* 默认状态：面板关闭时，两个按钮都是圆框带背景 */
        .icon-btn { pointer-events: auto; background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-main); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.2s ease; }
        .icon-btn:hover { background: var(--btn-hover); border-color: var(--accent-color);} 
        .icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

        /* 默认状态隐藏清除按钮 */
        #clearLinksBtn { display: none; }

        /* 特殊状态：面板展开时，隐藏主题按钮，显示清除按钮，按钮全部变成无边框 */
        body.panel-open #clearLinksBtn, body.panel-open #panelToggleBtn { display: flex; background: transparent; border: none; box-shadow: none; color: var(--text-sub); width: 36px; height: 36px; }
        body.panel-open #clearLinksBtn:hover, body.panel-open #panelToggleBtn:hover { color: var(--text-main); background: transparent; }
        body.panel-open #clearLinksBtn svg, body.panel-open #panelToggleBtn svg { stroke-width: 2; width: 16px; height: 16px; }
		
        
        /* ================= 左侧导航及弹窗 ================= */
        .side-nav { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 30px; padding: 5px 4px; display: flex; flex-direction: column; gap: 8px; z-index: 2500; pointer-events: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
        .side-btn { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: var(--text-cc); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; position: relative; }
        .side-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.15); } body.light-mode .side-btn:hover { background: rgba(0,0,0,0.075); }
        .side-btn.active { background: rgba(255,255,255,0.1); color: var(--text-main); } body.light-mode .side-btn.active { background: rgba(0,0,0,0.1); }
        .side-btn svg { width: 18px; height: 18px; }

        .side-popup { position: fixed; left: 88px; top: 50%; transform: translateY(-50%); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; z-index: 2499; pointer-events: auto; display: none; opacity: 0; transition: opacity 0.2s, top 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 400px; }
        .side-popup.show { display: flex; flex-direction: column; opacity: 1; }
        .side-popup::before, .side-popup::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border-style: solid; pointer-events: none; }
        .side-popup::before { left: -8px; border-width: 8px 8px 8px 0; border-color: transparent var(--panel-border) transparent transparent; }
        .side-popup::after { left: -7px; border-width: 8px 8px 8px 0; border-color: transparent var(--panel-bg) transparent transparent; }

        .popup-tabs { display: flex; border-bottom: 1px solid var(--panel-border); padding: 0 16px; margin-top: 8px; gap: 16px;}
        .popup-tab { padding: 12px 0; font-size: 13px; font-weight: bold; color: var(--text-sub); cursor: pointer; position: relative; transition: color 0.2s;}
        .popup-tab:hover { color: var(--text-main); } .popup-tab.active { color: var(--text-main); }
        .popup-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent-color); border-radius: 2px 2px 0 0; }
        .popup-content { padding: 16px 16px 0 16px; max-height: 480px; overflow-y: auto; margin-bottom: 16px; }
        .history-date { font-size: 11px; color: var(--text-sub); margin-bottom: 12px; margin-top: 20px; font-weight: bold;} .history-date:first-child { margin-top: 0; }
        .history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .history-item { width: 100%; aspect-ratio: 1/1; border-radius: 8px; object-fit: cover; cursor: pointer; transition: transform 0.2s; background: var(--input-bg); border: 1px solid var(--panel-border); }
        .history-item:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10;}
		
		/* 新增：我的组件库网格样式 */
		#savedGroupsPopup.side-popup { width: 440px; } /* 加宽适配一排3个网格 */
		#savedGroupsContent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
		.saved-group-card { position: relative; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s; }
		.saved-group-card:hover { transform: translateY(-4px); }
		.saved-group-cover { width: 100%; aspect-ratio: 3/4; border-radius: 8px; background: var(--input-bg); object-fit: cover; border: 1px solid var(--panel-border); margin-bottom: 8px; }
		.saved-group-title { font-size: 13px; font-weight: bold; color: var(--text-main); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
		
		/* 右上角悬停显示的删除按钮 */
		.saved-group-del-btn { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; background: rgba(0,0,0,0.6); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); }
		.saved-group-card:hover .saved-group-del-btn { opacity: 1; }
		.saved-group-del-btn:hover { background: #ef4444; transform: scale(1.1); }
		.saved-group-del-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }
		
		
		
        #contactPopup.side-popup { width: auto; padding: 12px; background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; }
        #contactPopup.side-popup::before { border-color: transparent rgba(0,0,0,0.1) transparent transparent; }
        #contactPopup.side-popup::after { border-color: transparent #ffffff transparent transparent; }
        #contactPopup img { width: 180px; height: 180px; border-radius: 6px; display: block; border: none; background: transparent; padding: 0; }

        /* ================= 右键菜单 ================= */
        #contextMenu, #historyContextMenu { position: fixed; background: var(--panel-bg); border: 1px solid var(--panel-border); pointer-events: auto; border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: none; z-index: 9999; width: 250px; }
		
		.context-title { font-size: 12px; color: var(--text-sub); font-weight: bold; margin-bottom: 12px; padding-left: 4px; }
        .menu-item { padding: 6px 8px; cursor: pointer; border-radius: 30px; display: flex; align-items: center; gap: 12px; color: var(--text-main); border: 1px solid var(--panel-border); background: transparent; transition: all 0.5s ease; margin-bottom: 12px; }
        .menu-item:last-child { margin-bottom: 0; } .menu-item:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text-sub); } body.light-mode .menu-item:hover { background: rgba(0, 0, 0, 0.05); } 
        .menu-icon { 
			width: 32px; height: 32px; 
			border-radius: 50%; border: 1px solid var(--panel-border); 
			display: flex; align-items: center; justify-content: center; flex-shrink: 0;
		} 
		.menu-icon svg { width: 14px; height: 14px; stroke: var(--text-main); }
        .menu-text { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; line-height: 24px;} .menu-text strong {font-size: 9px; font-family: system-ui, -apple-system, sans-serif;}

        /* ================= 性能优化专用 ================= */
        #canvasContent { will-change: transform; } /* 仅保留总画布的硬件加速 */
        
        /* 彻底删除了 .node 上的 will-change 属性，完美解决数百个节点时的显存图层爆炸问题 */
        /* （已移除会裁剪外部端口的 content-visibility 属性，恢复 + 号的正常显示） */
        
        /* 交互状态下（按住鼠标拖拽/缩放时）临时关闭极其耗费显卡的阴影和过渡动画 */
        body.is-interacting .node { transition: none !important; }
        body.is-interacting .connection-path, body.is-interacting .connection-hit-path { transition: none !important; }
        
        /* 拖动画布时，将画布内部瞬间化为“透明幽灵”，阻止耗性能的鼠标碰撞检测！ */
        body.is-interacting #canvasContent { pointer-events: none !important; }
        
        /* 拖动画布时，瞬间关闭全网所有的高斯模糊重绘地狱，松手自动恢复！ */
        body.is-interacting * { backdrop-filter: none !important; }
		
		
		
		
		
		
		/* ================= 分组底框样式 ================= */
        .node-group { position: absolute; background: rgba(42, 42, 42, 0.5); border: 1px solid #2f2f2f; border-radius: 16px; z-index: 0; display: flex; flex-direction: column; box-sizing: border-box; transition: background 0.2s, border-color 0.2s; 
            pointer-events: auto; /* 【关键修改】：允许鼠标点击整个底板 */
            cursor: grab;         /* 【关键修改】：悬浮在空白处显示小手 */
        }
        .node-group:active { cursor: grabbing; }
        body.light-mode .node-group { background: rgba(200, 200, 200, 0.3); border: 1px solid #ccc;}
        .node-group.active { border-color: var(--accent-color); background: rgba(79, 70, 229, 0.1); }
        .node-group-header { position: absolute; top: -52px; left: 0; padding: 0; display: flex; align-items: center; width: 100%; pointer-events: none; }
        .node-group-title { color: #eee; font-size: 30px; padding:0 0 0 15px; font-weight: bold; outline: none; background: transparent; border: none; pointer-events: auto; cursor: text; width: 100%; }
		body.light-mode .node-group-title { color: #333;}
		
		/* 新增：组右下角调整大小的手柄 */
        .group-resize-handle { position: absolute; bottom: -15px; right:-15px; width: 34px; height: 34px; cursor: nwse-resize; pointer-events: auto; z-index: 10; }
        .group-resize-handle::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-right: 3px solid var(--text-sub); border-bottom: 3px solid var(--text-sub); border-bottom-right-radius: 22px; transition: border-color 0.2s, width 0.2s, height 0.2s; }
        .group-resize-handle:hover::after { border-color: var(--accent-color); width: 24px; height: 24px; }
		
		
		/* ================= 组操作悬浮菜单 ================= */
        #groupToolbar { position: absolute; background: rgba(26, 26, 26, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 40px; padding: 4px 12px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; z-index: 3000; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s; pointer-events: auto; box-shadow: 0 12px 32px rgba(0,0,0,0.5); width: max-content; 
            /* 新增：反向缩放变量与中心点设定 */
            --inv-scale: 1;
            transform-origin: center bottom;
            transform: translate(-50%, 0) scale(var(--inv-scale)); 
        }
        
        /* 【关键防抖】：在交互(缩放画布/拖拽)时，临时关闭菜单的过渡动画，让其死死钉在屏幕上 */
        body.is-interacting #groupToolbar { transition: none !important; }
        
        #groupToolbar.show { 
            opacity: 1; visibility: visible; 
            /* 修正：使用 -100% 将菜单完美顶出组的外部，这样缩放时绝对不会遮挡标题栏 */
            transform: translate(-50%, calc(-100% - 25px)) scale(var(--inv-scale)); 
        }
		
		
		
		body.light-mode #groupToolbar { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        .gt-btn { background: transparent; border: none; color: #bbb; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 30px; transition: all 0.2s ease; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
        .gt-btn svg { width: 14px; height: 14px; flex-shrink: 0; display: block; margin-top:1px; }
        .gt-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
        body.light-mode .gt-btn { color: #666; }
        body.light-mode .gt-btn:hover { background: rgba(0,0,0,0.05); color: #333; }
        .gt-btn.primary { color: #4b6bfb; }
        .gt-btn.primary:hover { background: rgba(75, 107, 251, 0.15); color: #6c88ff; }
		body.light-mode .gt-btn.primary{ color: #4b6bfb;}
		
        .gt-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.15); margin: 0 6px; flex-shrink: 0; }
        body.light-mode .gt-divider { background: rgba(0, 0, 0, 0.15); }
		
		
		
		
		/* ================= 节点样式 ================= */
        .node-title-input {padding-left:8px; position: absolute; top: -28px; left: 0; width: 100%; background: transparent; border: none; color: #eee; font-size: 15px; font-weight: bold; outline: none; pointer-events: auto; cursor: text; z-index: 10; }
        
		body.light-mode .node-title-input { color: #777; }
        .node { position: absolute; pointer-events: auto; display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 384px; height: 384px; cursor: grab; background: var(--panel-bgaa); border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); overflow: visible; }
		
		/* 新增：图片节点的替换按钮 */
        .node-replace-btn {line-height: 20px; text-align: center; width: 42px; height: 21px; position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #eee; border-radius: 12px; font-size: 12px; cursor: pointer; display: none; z-index: 20; backdrop-filter: blur(4px); pointer-events: auto; }
        .node-replace-btn:hover { background: rgba(0,0,0,0.8); }
        .node[data-type="image-ref"]:hover .node-replace-btn { display: block; }

        /* 【新增】：节点专属取消生成按钮 */
        .node-cancel-btn { line-height: 20px; text-align: center; width: 42px; height: 21px; position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 12px; font-size: 12px; cursor: pointer; display: none; z-index: 20; backdrop-filter: blur(4px); pointer-events: auto; }
        .node-cancel-btn:hover { background: rgba(0, 0, 0, 0.8); }
        /* 只有节点在生成状态时，才强制显示取消按钮 */
        .node[data-is-generating="true"] .node-cancel-btn { display: block; }
        /* 当显示取消按钮时，强行隐藏底下的替换按钮防重叠 */
        .node[data-is-generating="true"] .node-replace-btn { display: none !important; }
		
		
		
		
		
		.node:active { cursor: grabbing; } .node.active { z-index: 100; border-color: transparent; }
        .node-body { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--text-subv);}
		
		
        .node-body img, .node-body video { width: 100%; height: 100%; display: none; pointer-events: auto; cursor: pointer; border-radius: 12px; box-sizing: border-box; -webkit-user-drag: none; transition: outline 0.1s;}
        .node-body img{object-fit: cover;}
		.node-status { position: absolute; bottom: 8px; right: 8px; font-size: 10px; line-height: 15px; color: #eeeeee !important; background: rgba(0,0,0,1); padding: 2px 6px; border-radius: 4px; display: none; opacity: 0.6; backdrop-filter: blur(4px); pointer-events: none; z-index: 20; }
       /* 新增：生成过程中的流光渐变动画 */
        @keyframes nodeGeneratingGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .node[data-is-generating="true"] .node-body {
            /* 还原截图的蓝紫灰过渡渐变色 */
            background: linear-gradient(-45deg, #3b82f6, #818cf8, #6366f1, #4facfe);
            background-size: 300% 300%;
            animation: nodeGeneratingGradient 4s ease infinite;
            border-radius: 12px; /* 防止直角溢出边框 */
        }
        
        /* 提升文字在彩色背景上的可见度和高级感 */
        .node[data-is-generating="true"] .empty-text {
            color: #ffffff !important;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            font-weight: 600;
            letter-spacing: 1px;
        }
		
		
        .node-download { position: absolute; bottom: 8px; left: 8px; color: var(--accent-color); background: rgba(0,0,0,0.6); padding: 3px; border-radius: 50%; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); cursor: pointer; z-index: 20; transition: all 0.2s; }
        .node-download:hover { background: rgba(0,0,0,0.8); transform: scale(1.15); } .node-download svg { width: 10px; height: 10px; }
        .node-progress-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.1); display: none; z-index: 10;} .node-progress-bar { height: 100%; background: var(--accent-color); width: 0%; transition: width 0.3s ease; }

        /* 彻底隐藏纯图片节点的下载按钮和状态标签 */
		.node[data-type="image-ref"] .node-download { display: none !important; }
		.node[data-type="image-ref"] .node-status { display: none !important; }
		
		/* ================= 节点连线与接口 ================= */
		.node-port { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--panel-bgaa); border: 2px solid var(--text-subva); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: crosshair; opacity: 0; transition: opacity 0.5s, border-color 0.5s; z-index: 10; pointer-events: auto; color: var(--text-subva); font-size: 14px; font-weight: bold; line-height: 1; }
		.node:hover .node-port { opacity: 1; }
		.node-port:hover { border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-50%) scale(1.2); }
        /* 【新增】：端口被点击选中时的专属发光样式 (左右通用) */
        .node-port.selected { opacity: 1; border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-50%) scale(1.2); box-shadow: 0 0 12px rgba(79, 70, 229, 0.8); }
		
		.node-port.input { left: -55px; }
		.node-port.output { right: -55px; }
		/* 【新增】：纯素材和便签节点不需要接收输入，彻底隐藏左侧接口 */
        .node[data-type="image-ref"] .node-port.input,
        .node[data-type="note-text"] .node-port.input { display: none !important; }
		
		/* ================= 连线剪刀删除按钮与吸附区 ================= */
		.conn-delete-btn { position: absolute; width: 36px; height: 36px; background: var(--accent-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; opacity: 0; transform: translate(-50%, -50%) scale(0.8); transition: opacity 0.2s, transform 0.2s, background 0.2s; pointer-events: none; }
		.conn-delete-btn:hover { background: var(--accent-hover); transform: translate(-50%, -50%) scale(1.1); }
		.connection-path { stroke-width: 3; transition: stroke 0.2s, stroke-width 0.2s; pointer-events: none; /* 让视觉线放弃鼠标判定 */ }
		/* 【新增】：一根极粗但完全透明的线，作为宽广的鼠标感应区 */
		.connection-hit-path { fill: none; stroke: transparent; stroke-width: 30; pointer-events: stroke; cursor: pointer; }
		
		

		#connectionLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
		.connection-path { fill: none; stroke: var(--text-slx); stroke-width: 2; transition: stroke 0.2s, stroke-width 0.2s; pointer-events: none; }
		
		
		
		/* 鼠标悬浮在感应区时：强制变红变粗（准备删除状态），优先级最高 */
		.connection-path.hover-conn { stroke: var(--accent-color) !important; stroke-width: 3 !important; }
        
        /* 选中节点时相关连线高亮变色变粗 */
        .connection-path.active-conn { stroke: #818cf8; stroke-width: 2; }
        body.light-mode .connection-path.active-conn { stroke: var(--accent-color); }
        
		@keyframes dash { to { stroke-dashoffset: -1000; } }
		.connection-path.generating { stroke: var(--accent-color); stroke-width: 4; }
		
		
		
		@keyframes flow { to { stroke-dashoffset: -20; } }
		
		
		
		
		
		/* 默认状态为可随意拖拽，禁止选中文本 */
        .node-text-output { position: absolute; top:0; left:0; width:100%; height:100%; overflow-y:auto;  padding:16px; box-sizing:border-box; font-size:14px; color:var(--text-main); z-index:5; background: var(--panel-bgaa); display:none; border-radius: 12px; cursor: grab; user-select: none !important; -webkit-user-select: none !important;}
		
		.node-text-output * { pointer-events: none; user-select: none !important; -webkit-user-select: none !important;}
        
        /* 双击进入 selectable 状态后，允许划选复制 */
        .node-text-output.selectable { cursor: text; user-select: text !important; -webkit-user-select: text !important; box-shadow: inset 0 0 0 2px var(--accent-color); }
        .node-text-output.selectable * { pointer-events: auto; user-select: text !important; -webkit-user-select: text !important; }
		
		
        .markdown-body { font-family: inherit; }
        .markdown-body h1 { font-size: 1.4em; font-weight: bold; margin-bottom: 0.5em; color: var(--text-main); }
        .markdown-body h2 { font-size: 1.2em; font-weight: bold; margin-top: 1em; margin-bottom: 0.5em; color: var(--text-main); }
        .markdown-body p { margin-bottom: 0.8em; line-height: 1.6; color: var(--text-main); }
        .markdown-body code { background: rgba(128,128,128,0.2); padding: 0.2em 0.4em; border-radius: 4px; color: #ef4444; }
        .markdown-body pre { padding: 1em; border-radius: 8px; overflow-x: auto; margin-bottom: 1em; }
        .markdown-body pre code { background: transparent; color: inherit; padding: 0; }
        .markdown-body ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1em; color: var(--text-main); }
		.markdown-body ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 1em; color: var(--text-main); }
        .markdown-body a { color: var(--accent-color); text-decoration: underline; }
        
		/* 【新增】：Markdown 精美表格样式 */
        .markdown-body table { width: 100%; border-collapse: collapse; margin-bottom: 1em; font-size: 13px; background: transparent; }
        .markdown-body th, .markdown-body td { border: 1px solid var(--panel-border); padding: 8px 12px; text-align: left; line-height: 1.6; }
        .markdown-body th { background: rgba(255, 255, 255, 0.05); font-weight: bold; }
        body.light-mode .markdown-body th { background: rgba(0, 0, 0, 0.05); }

        /* ================= 控制面板 ================= */
		#controlPanel { position: fixed; top: 10px; right: 10px; width: 390px; height: calc(100vh - 20px); background: var(--panel-bg); border: 1px solid var(--panel-border); pointer-events: auto; border-radius: 16px; padding: 16px; display: flex; z-index: 4000; flex-direction: column; gap: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); transform: translateX(420px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
		body.panel-open #controlPanel { transform: translateX(0); }
		
		#imageList { display: contents !important; }
		.cp-top { display: flex; gap: 12px; flex-direction: column; flex: 1; align-items: flex-start; overflow-y: auto; overflow-x: hidden; } 
		.media-row { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; align-items: flex-start; width: 100%; }
		.cp-bottom-wrapper {position: relative; border: none; padding: 0; background: transparent; display: flex; flex-direction: column; gap: 8px;}
        .cp-controls-bar { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--panel-border); border-radius: 20px; padding: 2px 14px; background: transparent; }
        .prompt-container { position: relative; border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; background: transparent; min-height: 120px;}
		.add-image-btn { width: calc((100% - 24px) / 3); height: auto; aspect-ratio: 1; border: 1px dashed var(--text-sub); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; color: var(--text-sub); cursor: pointer; flex-shrink: 0; transition: 0.2s; text-align: center; padding: 4px;} .add-image-btn:hover { background: var(--btn-hover); border-color: var(--text-main); color: var(--text-main);}
		.thumb-wrap {  position: relative; width: calc((100% - 24px) / 3); height: auto; aspect-ratio: 1; border-radius: 8px; overflow: hidden; flex-shrink: 0; cursor: grab;     border: 1px dashed var(--text-sub); transition: border-color 0.2s, transform 0.2s; }

		
		
		
		/* ================= 新增：未生效附件标灰样式 ================= */
        .thumb-wrap.inactive {
            border-color: rgba(255,255,255,0.1);
            background: #111;
        }
        body.light-mode .thumb-wrap.inactive {
            border-color: rgba(0,0,0,0.1);
            background: #f0f0f0;
        }
        .thumb-wrap.inactive img, .thumb-wrap.inactive video, .thumb-wrap.inactive .file-icon {
            filter: grayscale(100%);
            opacity: 0.3;
        }
        .inactive-badge {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8); color: #ccc; font-size: 11px; font-weight: bold;
            padding: 4px 8px; border-radius: 6px; pointer-events: none; z-index: 10;
            white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.1);
        }

		.thumb-wrap:active { cursor: grabbing; transform: scale(0.95); } .thumb-wrap.selected { border-color: var(--accent-color); } .thumb-wrap img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
        
        .thumb-del { line-height: 20px; position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(0,0,0,0.6); color: white; border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: 0.2s;} .thumb-wrap:hover .thumb-del { opacity: 1; } .thumb-del:hover { background: #ef4444; } .thumb-wrap.drag-over { border-color: #10b981; transform: scale(1.05); } .thumb-name { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: white; font-size: 10px; text-align: center; padding: 2px 0; pointer-events: none; }


		.ratio-item.disabled { opacity: 0.2; pointer-events: none; cursor: not-allowed; }




        /* MJ V7 专属图片上传区 */
        .mj-media-row { display: none; gap: 12px; width: 100%; margin-bottom: 4px; }
		.mj-upload-box { flex: 1; height: auto; aspect-ratio: 1; border: 1px dashed var(--text-sub); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--text-sub); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; box-sizing: border-box; }







		.mj-upload-box:active { transform: scale(0.95); }
        .mj-upload-box:hover { border-color: var(--accent-color); color: var(--text-main); background: var(--btn-hover); }
        .mj-upload-box.selected { border: 2px solid var(--accent-color); }
        .mj-upload-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; display: none; pointer-events: none; }
        .mj-upload-box.has-img img { display: block; }
        .mj-upload-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; display: none; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: 0.2s; }
        .mj-upload-del:hover { background: #ef4444; }
        .mj-upload-box.has-img:hover .mj-upload-del { display: flex; }
        .mj-upload-label { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: white; font-size: 10px; text-align: center; padding: 2px 0; pointer-events: none; display: none; z-index: 5; }
        .mj-upload-box.has-img .mj-upload-label { display: block; }

        .prompt-input { flex: 1; width: 100%; min-height: 60px; max-height: 280px; overflow-y: auto; background: transparent; border: none; color: var(--text-main); outline: none; font-size: 14px; padding: 2px 2px 0 2px; margin-bottom: 12px; user-select: text; white-space: pre-wrap; word-break: break-all; cursor: text; }
		.prompt-input[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--text-sub); pointer-events: none; }
		.cp-bottom { display: flex; justify-content: flex-end; align-items: center; padding-top: 0; gap: 8px; margin-top: auto;}
		#genericModelWrapper, #mjStaticLabel { margin-right: auto; }
		#ratioWrapper { margin-left: auto; }
		
		
		
		
        .hover-wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .text-trigger-btn { background: transparent; border: none; color: var(--text-main); font-size: 13px; outline: none; cursor: pointer; padding: 6px 0; display: flex; align-items: center; gap: 6px; } .arrow-icon { width: 14px; height: 14px; color: var(--text-sub); transition: transform 0.2s; margin-top: 1px;} .hover-wrapper:hover .arrow-icon { transform: rotate(180deg);}
        .hover-panel { position: absolute; bottom: calc(100% + 12px); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); z-index: 102; opacity: 0; visibility: hidden; transition: opacity 0.2s; cursor: default; } .hover-panel::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; background: transparent; } .hover-wrapper:hover .hover-panel { opacity: 1; visibility: visible; }
        #ratioPanel { right: 0; left: auto; transform: translateY(5px); width: 300px; } .ratio-grid { display: grid; gap: 8px; margin-bottom: 16px; margin-top: 8px; } .ratio-item { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--text-sub); cursor: pointer; padding: 6px 4px; border-radius: 6px; border: 1px solid transparent;} .ratio-item:hover { background: var(--btn-hover); } .ratio-item.active { background: rgba(79, 70, 229, 0.1); border-color: var(--accent-color); color: var(--text-main); } .ratio-icon { width: 16px; height: 16px; border: 1.5px solid currentColor; margin-bottom: 6px; border-radius: 2px;} .size-group { display: flex; background: var(--input-bg); border-radius: 6px; overflow: hidden; margin-top: 8px; padding: 2px;} .size-btn { flex: 1; text-align: center; padding: 6px 0; font-size: 12px; color: var(--text-sub); cursor: pointer; border: none; background: transparent; border-radius: 4px;} .size-btn.active { background: #4f46e5; color: #eee; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,0.1);} .panel-title { font-size: 12px; color: var(--text-sub); font-weight: bold;}
        #modelPanel { left: -10px; transform: translateY(-2px); width: auto; min-width: 200px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .model-item { padding: 6px 12px; border-radius: 6px; font-size: 12px; color: var(--text-main); cursor: pointer; white-space: nowrap; } .model-item:hover { background: var(--btn-hover); } .model-item.active { background: var(--accent-hover);   color: #fff;}


		/* 新增：视频X 专属时长网格 */
		.duration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; background: var(--input-bg); border-radius: 6px; padding: 4px; }


		/* 新增：图标按钮悬浮变蓝放大 */
		#presetToggleBtn:hover, #materialLibBtn:hover, #mjParamsToggleBtn:hover { color: var(--accent-color) !important; transform: scale(1.05); }




        /* MJ 参数专属样式 */
        .mj-param-group { display: flex; flex-direction: column; gap: 14px; } .mj-param-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-sub); } .mj-param-label { min-width: 90px; color: var(--text-main); } .mj-slider { flex: 1; margin: 0 10px; cursor: pointer; accent-color: var(--accent-color); } .mj-val { width: 30px; text-align: right; } .mj-checkbox-group { display: flex; gap: 16px; margin-top: 4px; } .mj-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); cursor: pointer; }
		
		
		
		/* 新增：外层价格胶囊容器 */
        .generate-capsule { display: flex; align-items: center; background: #1a1a1a; border: 1px solid var(--panel-border); border-radius: 30px; padding: 3px 3px 3px 12px; gap: 10px; cursor: pointer; transition: all 0.2s ease; }
        .generate-capsule:hover { border-color: #555; }
        body.light-mode .generate-capsule { background: #fff; }
        body.light-mode .generate-capsule:hover { border-color: #bbb; }
		.generate-capsule:has(#globalGenerateBtn:disabled) { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
        .gen-price { font-size: 14px; font-weight: 700; color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.5px; }
        /* 调整内部紫圆按钮稍微小一点，适配胶囊 */
		.generate-btn { background: #645ce8 url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" stroke="%23ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>') center no-repeat; background-size: 15px; color: transparent !important; text-indent: -9999px; overflow: hidden; border: none; border-radius: 50%; width: 30px; height: 30px; padding: 0; cursor: pointer; transition: 0.2s; flex-shrink: 0; pointer-events: none; } 
		.generate-btn:hover { background-color: var(--accent-hover); } 
		.generate-btn:disabled { cursor: not-allowed; }
		
		
		
		.generate-capsule:hover .generate-btn{background-color: #4338ca; }



	   /* ================= 其他浮窗与设置 ================= */
        #settingsModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--panel-bg); color: var(--text-main); pointer-events: auto; border: 1px solid var(--panel-border); padding: 24px; border-radius: 12px; width: 400px; display: none; z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } 
		.settings-input { width: 100%; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-main); padding: 10px; border-radius: 6px; margin-top: 5px; margin-bottom: 10px; outline: none;} 

		/* 新增：专门给保存按钮的正常样式 */
		.save-btn { width: 100%; background: #645ce8; color: white; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s; text-align: center; }
		.save-btn:hover { background: var(--accent-hover); }

		.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); display: none; z-index: 1999; pointer-events: auto;}
		
		#lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 4000; cursor: zoom-out; pointer-events: auto; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s; }
		/* 新增：弹窗右上角下载按钮样式 */
        .lightbox-dl-btn { position: absolute; top: 24px; right: 24px; width: 42px; height: 42px; background: rgba(30, 30, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #eee; cursor: pointer; z-index: 4010; transition: all 0.2s ease; backdrop-filter: blur(8px); }
        .lightbox-dl-btn:hover { background: var(--accent-color); border-color: var(--accent-color); transform: scale(1.1); }
		
		/* 新增：弹窗左右切换翻页按钮样式 */
        .lightbox-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 80px; background: rgba(30, 30, 30, 0.5); color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4010; transition: all 0.2s ease; border-radius: 8px; backdrop-filter: blur(4px); }
        .lightbox-nav-btn:hover { background: rgba(30, 30, 30, 0.9); color: #fff; transform: translateY(-50%) scale(1.05); }
        .lightbox-nav-left { left: 30px; }
        .lightbox-nav-right { right: 30px; }
        .lightbox-nav-btn svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
		
		
		.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-bg); color: var(--text-main); padding: 10px 24px; border-radius: 30px; font-size: 14px; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 10020; animation: popIn 0.3s ease forwards; border: 1px solid var(--panel-border); } @keyframes popIn { 0% { opacity: 0; transform: translate(-50%, -20px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
        #selectionMarquee { position: absolute; border: 1px solid var(--accent-color); background: rgba(79, 70, 229, 0.15); pointer-events: none; display: none; z-index: 9999; }
        .node.multi-selected { z-index: 100; box-shadow: 0 0 0 3px var(--accent-color); border-color: transparent; }

		/* 小地图弹窗面板 */
        #minimap { position: fixed; left: 80px; bottom: 24px; width: 240px; height: 160px; background: rgba(30, 30, 30, 0.7); border: 1px solid var(--panel-border); border-radius: 12px; z-index: 1500; overflow: hidden; pointer-events: none; backdrop-filter: blur(8px); cursor: crosshair; opacity: 0; transform: translateX(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        
        /* 新增：隐藏/显示连线按钮样式 */
        #toggleLinesBtn { position: fixed; left: 33px; bottom: 70px; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1501; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.2s ease; }
        #toggleLinesBtn:hover { background: var(--btn-hover); transform: scale(1.05); }
        #toggleLinesBtn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
        
        /* 隐藏连线魔法：只隐藏真实已存的线和剪刀图标，不影响拉线时的临时预览虚线 */
        body.hide-connections .connection-path[id] { opacity: 0 !important; pointer-events: none !important; }
        body.hide-connections .connection-hit-path { opacity: 0 !important; pointer-events: none !important; }
        body.hide-connections .conn-delete-btn { opacity: 0 !important; pointer-events: none !important; }


		#minimap.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
        
        /* 左下角小地图触发按钮 */
        #minimapToggleBtn { position: fixed; left: 33px; bottom: 24px; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1501; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.2s ease; }
        #minimapToggleBtn:hover { background: var(--btn-hover); transform: scale(1.05); }
        #minimapToggleBtn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

		#minimap-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        .mm-node { position: absolute; background: var(--text-xdt); border-radius: 2px; opacity: 0.5; transition: background 0.2s, opacity 0.2s; }
        .mm-node.active { background: var(--accent-color); opacity: 0.9; }
        #minimap-viewport-box { position: absolute; border: 1.5px solid var(--accent-color); box-shadow: 0 0 0 9999px rgba(0,0,0,0.4); pointer-events: none; box-sizing: border-box; border-radius: 4px; }
        body.light-mode #minimap { background: rgba(255, 255, 255, 0.2); border-color: #d0d0d0; } body.light-mode #minimap-viewport-box { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1); }

        #customAlertOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); display: none; z-index: 10010; justify-content: center; align-items: center; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
        #customAlertBox { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; width: 300px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; }
        #customAlertMessage { color: var(--text-main); font-size: 14px; margin-top: 8px; margin-bottom: 12px; line-height: 1.6; }
        .custom-alert-btn { background: var(--accent-color); color: white; border: none; border-radius: 20px; padding: 8px 24px; font-size: 13px; font-weight: bold; cursor: pointer; width: 30%; } .custom-alert-btn:hover { background: var(--accent-hover); }
		/* ================= 自定义滚动条 ================= */
        ::-webkit-scrollbar { width: 4px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.5); }
        
        /* 【新增】：让文本节点和便签的滚动条上下避开圆角区域 */
        .node-text-output::-webkit-scrollbar-track { margin-top: 12px; margin-bottom: 12px; }
		
		
		/* 新增：@引用素材相关弹窗及标签样式 */
        #mentionMenu { position: absolute; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 10000; display: none; flex-direction: column; max-height: 200px; overflow-y: auto; padding: 6px; min-width: 140px; }
        .mention-title { font-size: 11px; color: var(--text-suba); padding: 4px 8px; border-bottom: 1px solid var(--panel-border); margin-bottom: 4px; font-weight: bold;}
        .mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; border-radius: 6px; font-size: 12px; color: var(--text-suba); font-weight: bold;}
        .mention-item:hover { background: var(--btn-hover); }
		
		
        .mention-item img, .mention-item video { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; pointer-events: none; }
        .mention-item .file-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: #3b82f6; border-radius: 4px; font-size: 10px; color: white;}
        .mention-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(16, 185, 129, 0.15); color: #10b981; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: bold; user-select: all; cursor: default; vertical-align: middle; margin: 0 2px;}
        .mention-tag img, .mention-tag video, .mention-tag .file-icon { width: 14px; height: 14px; object-fit: cover; border-radius: 2px; pointer-events: none; }
	
	
		
		
		
		
		
		
		/* 新增：提示词预设标签样式 */
        .preset-header { padding: 6px 16px 0 16px; border-bottom: 1px solid var(--panel-border); margin-bottom: 16px; }
        .import-preset-btn { font-size: 11px; color: var(--text-sub); cursor: pointer; font-weight: normal; transition: color 0.2s; }
        .import-preset-btn:hover { color: var(--accent-color); }
        
        /* 核心修改：改为 2 列布局，完美还原截图 */
        .preset-tags-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px 16px 16px; max-height: 250px; overflow-y: auto;}
        
        /* 核心修改：按钮改为胶囊形状 */
        .preset-tag-btn { background: var(--input-bg); color: var(--text-subv); line-height: 32px; border: 0 solid transparent; padding: 2px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
        .preset-tag-btn:hover { background: var(--accent-hover);  color: #fff;}
        
        
        .preset-inline-tag { display: inline-flex; align-items: center; background: rgba(16, 185, 129, 0.15); color: #10b981; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: bold; user-select: all; cursor: default; margin: 0 4px; vertical-align: middle;}

        /* 新增：点击触发的绝对定位面板样式 */
        .click-preset-panel { position: absolute; bottom: calc(100% + 12px); left: 0; width: 100%; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 0;  z-index: 102; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s; transform: translateY(10px); cursor: default; }
        .click-preset-panel.show { opacity: 1; visibility: visible; transform: translateY(-40px); }
		
		
		
		/* 新增：自定义删除确认弹窗 */
        #customConfirmOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); display: none; z-index: 10010; justify-content: center; align-items: center; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
        #customConfirmBox { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; width: 320px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; }
        .confirm-btn-group { display: flex; gap: 12px; width: 100%; justify-content: center; margin-top: 8px; }
        .confirm-cancel-btn { line-height: 18px; background: transparent; color: var(--text-main); border: 1px solid var(--panel-border); border-radius: 20px; padding: 8px 0; font-size: 13px; font-weight: bold; cursor: pointer; flex: 1; transition: 0.2s; }
        .confirm-cancel-btn:hover { background: var(--btn-hover); }
        .confirm-ok-btn {line-height: 18px; background: var(--accent-color); color: white; border: none; border-radius: 20px; padding: 8px 0; font-size: 13px; font-weight: bold; cursor: pointer; flex: 1; transition: 0.2s; }
        .confirm-ok-btn:hover { background: var(--accent-hover); }
		
		
		
		/* 迷你面板的 Tab 样式 */
        .preset-tabs-header { display: flex; align-items: center; gap: 30px; width: 100%; position: relative; line-height: 35px; }
        .preset-tab-btn { font-size: 13px; font-weight: 700; color: var(--text-sub); cursor: pointer; padding-bottom: 6px; transition: color 0.2s; position: relative; }
        
        .preset-tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent-color); border-radius: 2px 2px 0 0; }
        
        /* 大型提示词模板弹窗样式 */
        #templateModalOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 6000; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
        #templateModalBox { width: 680px; height: 85vh; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 12px; border: 1px solid #333; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.2s; }
        
		.light-mode #templateModalBox{background: #fff; border-color: #e0e0e0;}
		.light-mode .tmpl-header{border-bottom: 1px solid #e0e0e0;}
		.light-mode .tmpl-title{color: #333;}
		
		
		.tmpl-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #222; }
        .tmpl-title { color: #eee; font-size: 15px; font-weight: bold; }
        .tmpl-close { color: #999; font-size: 14px; cursor: pointer; transition: transform 0.3s ease; } .tmpl-close:hover {transform: rotate(90deg); }
		
		
        .tmpl-categories { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px 24px 24px;}
        .tmpl-cat-btn { line-height: 22px; background: #222; color: var(--text-subv); border: none; padding: 3px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: 0.3s; }
        .light-mode .tmpl-cat-btn{background: #f0f0f0;}
		.tmpl-cat-btn:hover { background: #4f46e5; color: #fff; }
        .tmpl-cat-btn.active, .light-mode .tmpl-cat-btn.active { background: #4f46e5; color: #fff; }
		
		
		
        .tmpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; overflow-y: auto; }
        .tmpl-item {line-height: 25px; background: #222; color: var(--text-subv); padding: 4px 10px; border-radius: 30px; font-size: 12px; font-weight: 500; text-align: center; cursor: pointer; transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tmpl-item:hover{ background: #4f46e5;}
		.light-mode .tmpl-item:hover { background: #4f46e5; color: #fff; }
		
		
		
		.light-mode .tmpl-item{background: #f0f0f0;}
		
		
		/* 1. 遮罩层：全屏、压黑、毛玻璃模糊 */
        #materialModalOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 6000; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
        
        /* 2. 弹窗本体：绝对定位居中、暗色主题 */
        #materialModalBox { position: absolute; left: 50%; top: 50%; width: 720px; height: 85vh; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 12px; border: 1px solid #333; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform: translate(-50%, -50%) scale(0.95); transition: transform 0.2s; }
        .light-mode #materialModalBox{background:#fff; border-color: #e0e0e0; }
        /* 3. 网格与图片样式 */
        .mat-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 24px; overflow-y: auto; margin-bottom: 24px;}
        .mat-item { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; cursor: pointer; transition: all 0.2s; }
        .mat-item:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
        .mat-loading { color: #888; text-align: center; font-size: 13px; padding: 40px; grid-column: 1 / -1; }
		
		
		
		
		
		
		
		/* ================= 文本放大阅读弹窗 ================= */
        #textModalOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75); display: none; justify-content: center; align-items: center; z-index: 7000; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.2s; pointer-events: auto; }
        #textModalBox { width: 90%; max-width: 90vw; max-height: 85vh; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 12px 50px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.2s; position: relative; }
        .text-modal-close { position: absolute; top: 16px; right: 20px; color: var(--text-sub); font-size: 16px; font-weight: bold; cursor: pointer; transition: transform 0.3s ease; z-index: 10; padding: 4px; }
        .text-modal-close:hover { transform: rotate(90deg); }
        #textModalContent { margin: 48px 0; padding: 0 48px; overflow-y: auto; color: var(--text-main); font-size: 18px; line-height: 1.8; cursor: text; user-select: text !important; -webkit-user-select: text !important; }
        #textModalContent * { pointer-events: auto; user-select: text !important; -webkit-user-select: text !important; }
		
		
		
		/* ================= 居中背景文字与开屏动画 ================= */
        #bgWatermark {
            position: fixed; top: 47%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; pointer-events: none !important; z-index: 0; user-select: none;
            /* 核心：高级的缓动曲线、模糊滤镜和缩放动画 */
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
            filter: blur(0px);
        }
        .wm-title { font-size: 88px; font-weight: 300; letter-spacing: 4px; color: var(--text-title); text-shadow: 0 0 40px rgba(255,255,255,0.1); }
        .wm-subtitle { font-size: 15px; font-weight: 400; color: var(--text-sub); margin-top: 12px; letter-spacing: 1px; text-transform: uppercase; }
        body.light-mode .wm-title { text-shadow: 0 0 40px rgba(0,0,0,0.1); }

        /* 隐藏状态：微微放大、变模糊、透明度归零 */
        #bgWatermark.hide-watermark {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1.08); 
            filter: blur(12px); 
        }
		
		
		
		
		/* ================= 新增：媒体悬浮操作条 ================= */
        .node-download { display: none !important; } /* 强制隐藏旧版的左下角下载按钮 */

        #mediaToolbar {
            position: absolute;
            background: rgba(30, 30, 30, 0.95);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 30px;
            padding: 4px 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 2px;
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: auto;
            width: max-content;
            --inv-scale: 1;
            transform-origin: center bottom;
            transform: translate(-50%, 0) scale(var(--inv-scale));
        }

        body.is-interacting #mediaToolbar { transition: none !important; }

        #mediaToolbar.show {
            opacity: 1;
            visibility: visible;
            /* 悬浮在节点顶部，避开标题 */
            transform: translate(-50%, calc(-100% - 36px)) scale(var(--inv-scale));
        }

        body.light-mode #mediaToolbar {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .mt-btn {
            background: transparent;
            border: none;
            color: #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 20px;
            transition: all 0.2s ease;
        }

        .mt-btn svg { width: 16px; height: 16px; }
        .mt-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
        body.light-mode .mt-btn { color: #666; }
        body.light-mode .mt-btn:hover { background: rgba(0,0,0,0.05); color: #333; }
		
		
		
		/* ================= 账号登录/注册弹窗 ================= */
		#authOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 10000; pointer-events: auto; }
		.auth-box { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 32px; width: 340px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 16px; transition: transform 0.3s; }
		.auth-title { color: var(--text-main); font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 10px; letter-spacing: 1px; }
		.auth-input { width: 100%; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-main); padding: 14px; border-radius: 8px; outline: none; font-size: 14px; box-sizing: border-box; transition: border-color 0.2s; }
		.auth-input:focus { border-color: var(--accent-color); }
		.auth-btn { width: 100%; background: #645ce8; color: white; border: none; border-radius: 8px; padding: 14px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background 0.2s; margin-top: 8px; }
		.auth-btn:hover { background: var(--accent-hover); }
		.auth-switch { color: var(--text-sub); font-size: 13px; text-align: center; cursor: pointer; transition: color 0.2s; }
		.auth-switch:hover { color: var(--accent-color); text-decoration: underline; }
		

		/* ================= 顶部积分徽章 ================= */
		.header-point-badge {
			background: var(--panel-bg);
			border: 1px solid var(--panel-border);
			color: var(--accent-colr);
			padding: 0 16px;
			height: 32px;
			line-height: 32px; 
			display: flex;
			align-items: center;
			border-radius: 16px;
			font-size: 14px;
			font-weight: bold;
			margin-right: 15px;
			pointer-events: auto;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			transition: all 0.2s ease;
			cursor: default;
		}
		.header-point-badge:hover {
			border-color: var(--accent-color);
			background: var(--btn-hover);
		}

		/* ================= 个人中心与后台面板 ================= */
		#dashboardOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 10000; pointer-events: auto; }
		.dash-box { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; width: 600px; max-width: 90vw; height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 50px rgba(0,0,0,0.5); }
		
		
		/* 强制解锁个人中心里所有文字的选中权限 */
		.dash-content *, #noticeContent { user-select: text !important; -webkit-user-select: text !important; }
		/* 防止顶部的切换标签和按钮被误选，保持它们不可选 */
		.dash-tab, .auth-btn, .page-arrow, .page-num { user-select: none !important; -webkit-user-select: none !important; }
				
				
		.dash-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--panel-border); }
		.dash-tabs { display: flex; gap: 30px; }
		.dash-tab { color: var(--text-sub); font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.2s; }
		.dash-tab.active { color: var(--accent-coyu);}
		.dash-close { color: var(--text-sub); font-size: 18px; cursor: pointer; }
		.dash-close:hover { color: var(--text-main); }
		.dash-content { padding: 24px; flex: 1; overflow-y: auto; color: var(--text-main); user-select: text !important; -webkit-user-select: text !important; }
		.dash-section { display: none; flex-direction: column; gap: 16px; height: 100%; }
		.dash-section.active { display: flex; }
		.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
		.dash-table th, .dash-table td { padding: 10px; border-bottom: 1px solid var(--panel-border); }
		.dash-table th { color: var(--text-sub); font-weight: bold; }
		.flex-row { display: flex; gap: 10px; align-items: center; }
		
		
		/* 新增：分页器与底部按钮排版 */
		.dash-section-title { font-size: 16px; font-weight: bold; margin-bottom: 12px; margin-top: 8px; color: var(--text-main); }
		.pagination-container { display: flex; justify-content: flex-end; align-items: center; margin-top: 16px; gap: 8px; user-select: none; }
		.page-arrow { cursor: pointer; color: var(--text-main); font-size: 14px; padding: 4px 8px; transition: 0.2s; }
		.page-arrow:hover { color: var(--accent-color); }
		.page-num { cursor: pointer; color: var(--text-main); font-size: 13px; font-weight: bold; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: 0.2s; }
		.page-num:hover { background: rgba(255,255,255,0.1); }
		.page-num.active { background: #645ce8; color: white; }
		.page-ellipsis { color: var(--text-sub); font-size: 14px; padding: 0 4px; }
		.logout-btn-wrap { display: flex; justify-content: flex-end; margin-top: 24px; }
		
		
		
		.dash-section-title a{
			font-size: 13px; 
			color: var(--text-km); 
			text-decoration: none; 
			display: flex;
			gap: 4px;
			padding: 0 5px 0 0;
			transition: all 0.2s;
		}
		
		.dash-section-title a:hover{
			color: var(--text-kmh); 
		}