/* ========================================
   Tapnow Studio 风格升级包 V2
   完全不影响交互性能的纯视觉优化
   ======================================== */

/* ============================================
   第一部分：字体渲染优化（解决缩放模糊）
   ============================================ */
body,
.process-node,
.ps-toolbar,
.inline-editor-toolbar,
.file-browser-sidebar,
.floating-prompt-box {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   第二部分：画布背景（纯黑 + 棋盘纹理）
   ============================================ */
body {
    background: #09090b !important;
    background-size: initial !important;
    animation: none !important;
}

#infiniteCanvas {
    background: #09090b !important;
}

#canvasGrid {
    background-image: 
        conic-gradient(#18181b 90deg, transparent 90deg), 
        conic-gradient(transparent 90deg, #18181b 90deg) !important;
    background-size: 40px 40px !important;
    background-position: 0 0, 20px 20px !important;
    opacity: 0.3 !important;
}

/* ============================================
   第三部分：节点样式（不覆盖 transition）
   ============================================ */
.process-node {
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    /* 不覆盖 transition，保留原有的拖动流畅性 */
}

 /* 禁用旧样式中的装饰层（避免白色渐变/高亮叠层影响 Tapnow 风格） */
 .process-node::before,
 .process-node::after {
     display: none !important;
 }

 #infiniteCanvas .connection-point[data-type="input"],
 #infiniteCanvas .connection-point.input,
 #canvasContent .connection-point[data-type="input"],
 #canvasContent .connection-point.input {
     border-color: rgba(96, 165, 250, 0.95) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(96,165,250,0.38) !important;
 }

 #infiniteCanvas .connection-point[data-type="prompt"],
 #canvasContent .connection-point[data-type="prompt"] {
     border-color: rgba(52, 211, 153, 0.95) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(52,211,153,0.34) !important;
 }

 #infiniteCanvas .connection-point[data-type="remix"],
 #canvasContent .connection-point[data-type="remix"] {
     border-color: rgba(251, 146, 60, 0.95) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(251,146,60,0.34) !important;
 }

 #infiniteCanvas .connection-point[data-type="character"],
 #canvasContent .connection-point[data-type="character"] {
     border-color: rgba(168, 85, 247, 0.95) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(168,85,247,0.34) !important;
 }

 #infiniteCanvas .connection-point[data-type="compareA"],
 #infiniteCanvas .connection-point[data-type="compareB"],
 #canvasContent .connection-point[data-type="compareA"],
 #canvasContent .connection-point[data-type="compareB"] {
     border-color: rgba(244, 114, 182, 0.95) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(244,114,182,0.34) !important;
 }

.process-node:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.4),
        0 4px 6px -2px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(96, 165, 250, 0.3) !important;
    /* 不使用 transform，避免影响拖动 */
}

.process-node.selected {
    border-color: rgba(96, 165, 250, 0.8) !important;
    box-shadow: 
        0 0 0 2px rgba(96, 165, 250, 0.3),
        0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

 /* 额外提升优先级：压过 main-styles.css 的“红色选中边框 !important” */
 #canvasContent .process-node.selected {
     border-color: rgba(96, 165, 250, 0.85) !important;
     box-shadow:
         0 0 0 2px rgba(96, 165, 250, 0.28),
         0 10px 15px -3px rgba(0, 0, 0, 0.45) !important;
 }

/* ============================================
   第四部分：图片样式（最小干预）
   ============================================ */
.canvas-image {
    border: 2px solid rgba(63, 63, 70, 0.5);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    /* 不覆盖任何可能影响拖动的属性 */
}

.canvas-image:hover {
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 6px 16px rgba(96, 165, 250, 0.4);
}

.canvas-image.selected {
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
}

/* 确保 API 设置按钮不被 Tapnow 左侧栏/面板遮挡 */
.api-key-settings-btn {
    position: fixed !important;
    top: 12px !important;
    left: 64px !important;
    z-index: 2600 !important;
}

/* Tapnow 风格节点右下角缩放句柄 */
.process-node .tn-node-resize-handle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    border-radius: 6px;
    background: rgba(63, 63, 70, 0.35);
    border: 1px solid rgba(63, 63, 70, 0.6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    z-index: 30;
}

.process-node .tn-node-resize-handle::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(228, 228, 231, 0.65);
    border-bottom: 2px solid rgba(228, 228, 231, 0.65);
}

.process-node:hover .tn-node-resize-handle {
    background: rgba(63, 63, 70, 0.55);
    border-color: rgba(96, 165, 250, 0.55);
}

/* ============================================
   第五部分：节点内部元素
   ============================================ */
.process-node-header {
    background: rgba(39, 39, 42, 0.8) !important;
    border-bottom: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 12px !important;
}

.process-node-title {
    color: #e4e4e7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

 .process-node-close {
     width: 28px !important;
     height: 28px !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     border-radius: 8px !important;
     background: rgba(63, 63, 70, 0.35) !important;
     border: 1px solid rgba(63, 63, 70, 0.55) !important;
     color: rgba(228, 228, 231, 0.9) !important;
 }

 .process-node-close:hover {
     background: rgba(239, 68, 68, 0.35) !important;
     border-color: rgba(239, 68, 68, 0.6) !important;
     color: #ffffff !important;
 }

 .process-node-body {
     padding: 12px !important;
     gap: 12px !important;
 }

 .process-node-row {
     gap: 10px !important;
 }

 .process-node-label {
     color: rgba(228, 228, 231, 0.75) !important;
     font-size: 12px !important;
     min-width: 120px !important;
 }

 .process-node-button {
     width: 100% !important;
     border-radius: 10px !important;
 }

/* 输入框和下拉框 */
.process-node input[type="text"],
.process-node input[type="number"],
.process-node textarea,
.process-node select {
    background: rgba(39, 39, 42, 0.6) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 6px !important;
    color: #e4e4e7 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.process-node input:focus,
.process-node textarea:focus,
.process-node select:focus {
    background: rgba(39, 39, 42, 0.9) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* 按钮样式（不覆盖 transition 和 transform） */
.process-node button {
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    color: #d4d4d8 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.process-node button:hover {
    background: rgba(63, 63, 70, 0.9) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* 主要操作按钮 */
.process-node button.primary-btn,
button[id*="generate"]:not(.ps-tool-btn),
button[id*="run"]:not(.ps-tool-btn) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.process-node button.primary-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* ============================================
   第六部分：连接线和连接点
   ============================================ */
 #infiniteCanvas .connection-point,
 #canvasContent .connection-point {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    background: rgba(9, 9, 11, 0.52) !important;
    border: 2px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 18px rgba(96,165,250,0.22) !important;
    opacity: 1 !important;
    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

 #infiniteCanvas .connection-point::before,
 #canvasContent .connection-point::before {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     width: 56px;
     height: 56px;
     transform: translate(-50%, -50%);
     border-radius: 999px;
     background: transparent;
 }

 #infiniteCanvas .canvas-image:hover .connection-point,
 #infiniteCanvas .canvas-video:hover .connection-point,
 #infiniteCanvas .canvas-video-wrapper:hover .connection-point,
 #infiniteCanvas .process-node:hover .connection-point,
 #canvasContent .canvas-image:hover .connection-point,
 #canvasContent .canvas-video:hover .connection-point,
 #canvasContent .canvas-video-wrapper:hover .connection-point,
 #canvasContent .process-node:hover .connection-point {
    opacity: 0.92 !important;
}

 #infiniteCanvas .connection-point::after,
 #canvasContent .connection-point::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.35), 0 0 12px rgba(248, 250, 252, 0.35);
}

 #infiniteCanvas .connection-point:hover,
 #canvasContent .connection-point:hover {
    opacity: 1 !important;
    transform: scale(1.12) !important;
    border-color: rgba(96, 165, 250, 0.85) !important;
    box-shadow: 0 0 0 2px rgba(96,165,250,0.20), 0 14px 36px rgba(96,165,250,0.40), 0 0 18px rgba(96,165,250,0.28) !important;
}

 #infiniteCanvas .connection-point.tn-conn-target,
 #canvasContent .connection-point.tn-conn-target {
     opacity: 1 !important;
     transform: scale(1.18) !important;
     border-color: rgba(96, 165, 250, 0.9) !important;
     box-shadow: 0 0 0 2px rgba(96,165,250,0.28), 0 18px 44px rgba(96,165,250,0.46), 0 0 22px rgba(96,165,250,0.34) !important;
 }

#canvasContent .process-node .connection-point.output {
    right: -10px !important;
}

#canvasContent .process-node .connection-point.input,
#canvasContent .process-node .connection-point[data-type="input"],
#canvasContent .process-node .connection-point[data-type="prompt"],
#canvasContent .process-node .connection-point[data-type="remix"],
#canvasContent .process-node .connection-point[data-type="character"],
#canvasContent .process-node .connection-point[data-type="compareA"],
#canvasContent .process-node .connection-point[data-type="compareB"] {
    left: -10px !important;
}

#canvasContent .connection-point[data-type="prompt"]::after { background: rgba(52, 211, 153, 0.95); }
#canvasContent .connection-point[data-type="input"]::after { background: rgba(96, 165, 250, 0.95); }
#canvasContent .connection-point[data-type="remix"]::after { background: rgba(251, 146, 60, 0.95); }
#canvasContent .connection-point[data-type="character"]::after { background: rgba(168, 85, 247, 0.95); }
#canvasContent .connection-point[data-type="compareA"]::after,
#canvasContent .connection-point[data-type="compareB"]::after { background: rgba(244, 114, 182, 0.95); }

#connectionLayer path {
    stroke: rgba(96, 165, 250, 0.6) !important;
    stroke-width: 2px !important;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.3)) !important;
}

#connectionLayer path:hover {
    stroke: rgba(96, 165, 250, 0.9) !important;
    stroke-width: 3px !important;
}

 #connectionLayer .connection-line {
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 #connectionLayer .connection-line.conn-hover {
     stroke-width: 3px !important;
     filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.45)) !important;
 }

 #connectionLayer .connection-line.conn-selected {
     stroke-width: 4px !important;
     filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.65)) !important;
 }

 #connectionLayer .connection-line.conn-prompt {
     stroke: rgba(52, 211, 153, 0.7) !important;
 }

 #connectionLayer .connection-line.conn-remix {
     stroke: rgba(251, 146, 60, 0.75) !important;
 }

 #connectionLayer .connection-line.conn-character {
     stroke: rgba(168, 85, 247, 0.75) !important;
 }

 #connectionLayer .connection-line.conn-compareA,
 #connectionLayer .connection-line.conn-compareB {
     stroke: rgba(244, 114, 182, 0.75) !important;
 }

 #connectionLayer .connection-delete-circle {
     opacity: 0.35;
 }

 #connectionLayer .connection-delete-circle:hover {
     opacity: 0.95;
 }

 .preview-node .tn-preview-body,
 .compare-node .tn-compare-body {
     padding: 10px 12px !important;
 }

 .tn-preview-box,
 .tn-compare-box {
     border: 1px solid rgba(63, 63, 70, 0.6);
     border-radius: 12px;
     background: rgba(39, 39, 42, 0.45);
     overflow: hidden;
     width: 100%;
     height: 320px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .tn-preview-empty {
     font-size: 12px;
     color: rgba(228, 228, 231, 0.55);
 }

 .tn-preview-img,
 .tn-preview-video {
     width: 100%;
     height: 100%;
     object-fit: contain;
     background: #000;
 }

 .compare-node .tn-compare-controls {
     margin-top: 10px;
 }

 .compare-node .tn-compare-slider {
     width: 100%;
 }

 .tn-compare-stage {
     position: relative;
     width: 100%;
     height: 100%;
     background: #000;
 }

 .tn-compare-img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .tn-compare-overlay {
     position: absolute;
     inset: 0;
     overflow: hidden;
 }

 .tn-compare-divider {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 2px;
     background: rgba(96, 165, 250, 0.9);
     box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
     transform: translateX(-1px);
 }

.connector,
.input-point {
    background: rgba(39, 39, 42, 0.9) !important;
    border: 2px solid rgba(113, 113, 122, 0.8) !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.connector:hover,
.connector.active,
.input-point:hover,
.input-point.active {
    background: rgba(96, 165, 250, 0.9) !important;
    border-color: rgba(147, 197, 253, 1) !important;
    box-shadow: 
        0 0 12px rgba(96, 165, 250, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   第七部分：工具栏
   ============================================ */
.ps-toolbar,
.inline-editor-toolbar {
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.4),
        0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.ps-toolbar-header,
.inline-editor-header {
    background: rgba(39, 39, 42, 0.6) !important;
    border-bottom: 1px solid rgba(63, 63, 70, 0.5) !important;
    border-radius: 12px 12px 0 0 !important;
}

.ps-tool-btn,
.inline-editor-btn {
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    color: #d4d4d8 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.ps-tool-btn:hover,
.inline-editor-btn:hover {
    background: rgba(63, 63, 70, 0.9) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* ============================================
   第八部分：侧边栏和底部面板
   ============================================ */
.file-browser-sidebar {
    background: rgba(24, 24, 27, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 1px solid rgba(63, 63, 70, 0.6) !important;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3) !important;
}

.file-browser-header {
    background: rgba(39, 39, 42, 0.8) !important;
    border-bottom: 1px solid rgba(63, 63, 70, 0.6) !important;
}

.floating-prompt-box {
    background: rgba(24, 24, 27, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   第九部分：滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(24, 24, 27, 0.5) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(63, 63, 70, 0.8) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(82, 82, 91, 0.9) !important;
}

/* ============================================
   第十部分：多角度相机节点
   ============================================ */
.multiangle-camera-node {
    background: rgba(24, 24, 27, 0.98) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.4),
        0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.multiangle-viewport {
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #000000 !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
}

/* ============================================
   第十一部分：通知消息
   ============================================ */
.wukong-notification {
    background: rgba(24, 24, 27, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

.wukong-notification.success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #86efac !important;
}

.wukong-notification.error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}

.wukong-notification.info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
}

/* ============================================
   第十二部分：上下文菜单
   ============================================ */
.context-menu {
    background: rgba(24, 24, 27, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 10px !important;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    padding: 6px !important;
}

.context-menu-item {
    background: transparent !important;
    border-radius: 6px !important;
    color: #d4d4d8 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.context-menu-item:hover {
    background: rgba(63, 63, 70, 0.8) !important;
    color: #ffffff !important;
}

.context-menu-divider {
    background: rgba(63, 63, 70, 0.5) !important;
    height: 1px !important;
    margin: 4px 0 !important;
}

/* ============================================
   第十三部分：其他细节优化
   ============================================ */
.process-node label,
.process-node .hint,
.process-node .meta {
    color: #a1a1aa !important;
    font-size: 12px !important;
}

.process-node-preview,
.canvas-image img {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 组容器样式 */
.canvas-group {
    background: rgba(24, 24, 27, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 2px dashed rgba(96, 165, 250, 0.4) !important;
    border-radius: 16px !important;
}

.canvas-group:hover {
    border-color: rgba(96, 165, 250, 0.6) !important;
    background: rgba(24, 24, 27, 0.7) !important;
}

.canvas-group-header {
    background: rgba(39, 39, 42, 0.9) !important;
    border-bottom: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 14px 14px 0 0 !important;
}

 .canvas-text-node {
     position: absolute;
     background: rgba(24, 24, 27, 0.92);
     border: 1px solid rgba(63, 63, 70, 0.7);
     border-radius: 12px;
     box-shadow:
         0 10px 15px -3px rgba(0, 0, 0, 0.45),
         0 4px 6px -2px rgba(0, 0, 0, 0.3);
     overflow: hidden;
 }

 .canvas-text-node.selected {
     border-color: rgba(96, 165, 250, 0.85) !important;
     box-shadow:
         0 0 0 2px rgba(96, 165, 250, 0.28),
         0 10px 15px -3px rgba(0, 0, 0, 0.45) !important;
 }

 .text-node-header {
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 10px;
     background: rgba(39, 39, 42, 0.75);
     border-bottom: 1px solid rgba(63, 63, 70, 0.5);
     user-select: none;
 }

 .text-node-title {
     font-size: 12px;
     font-weight: 700;
     color: rgba(228, 228, 231, 0.85);
     letter-spacing: 0.3px;
 }

 .text-node-close {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: 1px solid rgba(63, 63, 70, 0.55);
     background: rgba(63, 63, 70, 0.35);
     color: rgba(228, 228, 231, 0.9);
     cursor: pointer;
 }

 .text-node-close:hover {
     background: rgba(239, 68, 68, 0.35);
     border-color: rgba(239, 68, 68, 0.6);
     color: #fff;
 }

 .text-node-body {
     height: calc(100% - 38px);
     padding: 10px;
 }

 .text-node-editor {
     width: 100%;
     height: 100%;
     overflow: auto;
     color: rgba(228, 228, 231, 0.92);
     font-size: 13px;
     line-height: 1.6;
     white-space: pre-wrap;
     outline: none;
 }

 .text-node-editor[contenteditable="true"] {
     border-radius: 10px;
     background: rgba(39, 39, 42, 0.55);
     border: 1px solid rgba(96, 165, 250, 0.35);
     padding: 10px;
 }

 .text-node-resize {
     position: absolute;
     right: 6px;
     bottom: 6px;
     width: 14px;
     height: 14px;
     border-radius: 4px;
     background: rgba(161, 161, 170, 0.35);
     border: 1px solid rgba(63, 63, 70, 0.7);
     cursor: nwse-resize;
 }

 .text-node-resize:hover {
     background: rgba(96, 165, 250, 0.5);
     border-color: rgba(96, 165, 250, 0.8);
 }

 .storyboard-node .tn-story-actions {
     display: flex;
     gap: 6px;
     align-items: center;
 }

 .storyboard-node .tn-story-btn {
     border: 1px solid rgba(63, 63, 70, 0.55);
     background: rgba(63, 63, 70, 0.35);
     color: rgba(228, 228, 231, 0.9);
     border-radius: 8px;
     padding: 6px 10px;
     font-size: 12px;
     cursor: pointer;
 }

 .storyboard-node .tn-story-btn:hover {
     background: rgba(63, 63, 70, 0.6);
     border-color: rgba(96, 165, 250, 0.5);
 }

 .storyboard-node .tn-story-body {
     padding: 10px 12px !important;
 }

 .storyboard-node .tn-story-hint {
     font-size: 11px;
     color: rgba(228, 228, 231, 0.55);
     margin-bottom: 10px;
 }

 .storyboard-node .tn-story-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
 }

 .storyboard-node .tn-story-cell {
     border: 1px solid rgba(63, 63, 70, 0.7);
     background: rgba(39, 39, 42, 0.55);
     border-radius: 10px;
     overflow: hidden;
     aspect-ratio: 1 / 1;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
 }

 .storyboard-node .tn-story-cell:hover {
     border-color: rgba(96, 165, 250, 0.5);
 }

 .storyboard-node .tn-story-cell.active {
     border-color: rgba(96, 165, 250, 0.85);
     box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
 }

 .storyboard-node .tn-story-cell img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .storyboard-node .tn-story-placeholder {
     font-size: 14px;
     font-weight: 700;
     color: rgba(228, 228, 231, 0.35);
 }