.component-panel{background:#f8f9fa;display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-header{padding:12px 16px;border-bottom:1px solid #e0e0e0;background:#fff}.panel-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.search-box{padding:8px 12px;position:relative}.search-box input{width:100%;padding:8px 28px 8px 12px;border:1px solid #ddd;border-radius:4px;font-size:13px;outline:none;transition:border-color .2s;box-sizing:border-box}.search-box input:focus{border-color:#2196f3}.search-box input::placeholder{color:#999}.clear-search{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:18px;color:#999;cursor:pointer;padding:0;line-height:1}.clear-search:hover{color:#666}.categories-container{flex:1;overflow-y:auto;padding:8px 0}.category-section{margin-bottom:4px}.category-header{display:flex;align-items:center;padding:8px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s}.category-header:hover{background:#e8e8e8}.category-icon{font-size:14px;margin-right:8px}.category-name{flex:1;font-size:13px;font-weight:500;color:#444}.collapse-icon{font-size:10px;color:#888;transition:transform .2s}.collapse-icon.collapsed{transform:rotate(-90deg)}.category-components{padding:4px 8px}.component-item{display:flex;align-items:center;padding:8px 12px;margin:2px 0;background:#fff;border:1px solid #e8e8e8;border-radius:4px;cursor:grab;transition:all .15s;-webkit-user-select:none;user-select:none}.component-item:hover{border-color:#2196f3;background:#f0f7ff;box-shadow:0 1px 3px #2196f326}.component-item:active{cursor:grabbing}.component-item.dragging{opacity:.5;border-color:#2196f3;background:#e3f2fd}.component-icon{font-size:16px;margin-right:10px}.component-name{font-size:13px;color:#333}.canvas-component{cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow .15s;overflow:hidden}.canvas-component:hover{z-index:10}.canvas-component.hovered:not(.selected){box-shadow:0 0 0 1px #2196f3}.canvas-component.selected{z-index:20}.selection-overlay{position:absolute;inset:-1px;border:2px solid #2196F3;pointer-events:none;box-sizing:content-box}.resize-handle{position:absolute;width:8px;height:8px;background:#fff;border:2px solid #2196F3;border-radius:1px;pointer-events:auto;box-sizing:border-box}.resize-handle.top-left{top:-4px;left:-4px;cursor:nwse-resize}.resize-handle.top{top:-4px;left:50%;transform:translate(-50%);cursor:ns-resize}.resize-handle.top-right{top:-4px;right:-4px;cursor:nesw-resize}.resize-handle.left{top:50%;left:-4px;transform:translateY(-50%);cursor:ew-resize}.resize-handle.right{top:50%;right:-4px;transform:translateY(-50%);cursor:ew-resize}.resize-handle.bottom-left{bottom:-4px;left:-4px;cursor:nesw-resize}.resize-handle.bottom{bottom:-4px;left:50%;transform:translate(-50%);cursor:ns-resize}.resize-handle.bottom-right{bottom:-4px;right:-4px;cursor:nwse-resize}.resize-handle:hover{background:#2196f3}.lvgl-btn{font-size:13px;font-weight:500}.lvgl-label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-component.locked{cursor:default}.canvas-component.locked .resize-handle{display:none}.canvas-component.hidden-component{outline:1px dashed #999}.canvas.dragging-move,.canvas.dragging-move .canvas-component,.canvas.dragging-move .lvgl-tabview-content,.canvas.dragging-move .lvgl-win-content,.canvas.dragging-move .lvgl-obj{overflow:visible!important}.lvgl-tabview-content,.lvgl-win-content{overflow:hidden}.align-badge{position:absolute;top:-10px;right:-10px;width:18px;height:18px;background:#ff9800;color:#fff;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:30;line-height:1;box-shadow:0 1px 3px #0000004d}.context-menu{position:fixed;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 16px #00000026;min-width:180px;padding:4px 0;z-index:10000;animation:contextMenuFadeIn .1s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .1s;gap:10px}.context-menu-item:hover{background:#f0f7ff}.context-menu-item.disabled{opacity:.5;cursor:not-allowed}.context-menu-item.disabled:hover{background:transparent}.context-menu-icon{width:20px;text-align:center;font-size:14px}.context-menu-label{flex:1;font-size:13px;color:#333}.context-menu-shortcut{font-size:11px;color:#999;margin-left:16px}.context-menu-divider{height:1px;background:#e0e0e0;margin:4px 8px}.canvas-container{flex:1;background:#e8e8e8;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.canvas-container.panning-mode{cursor:grab}.canvas-container.panning-mode:active{cursor:grabbing}.canvas-container.drop-target .canvas{box-shadow:0 0 0 3px #2196f3}.canvas-viewport{position:absolute;top:50%;left:50%;margin-top:-160px;margin-left:-240px}.canvas{background:#fff;box-shadow:0 2px 10px #00000026;position:relative;overflow:hidden}.canvas-grid{pointer-events:none}.drop-preview{position:absolute;border:2px dashed #2196F3;background:#2196f31a;pointer-events:none;border-radius:4px}.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;gap:4px;background:#fff;padding:4px;border-radius:4px;box-shadow:0 2px 8px #00000026;z-index:100}.zoom-controls button{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.zoom-controls .zoom-level{padding:0 12px;display:flex;align-items:center;font-size:13px;color:#666;min-width:50px;justify-content:center}.box-selection{position:absolute;border:2px dashed #2196F3;background:#2196f31a;pointer-events:none;z-index:1000}.property-editor{width:100%;background:#f8f9fa;display:flex;flex-direction:column;height:100%;overflow:hidden}.property-editor .panel-header{padding:12px 16px;border-bottom:1px solid #e0e0e0;background:#fff}.property-editor .panel-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.property-sections{flex:1;overflow-y:auto;padding:8px 0}.property-section{padding:8px 16px;border-bottom:1px solid #eee}.property-section:last-child{border-bottom:none}.section-header{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;margin-bottom:12px;letter-spacing:.5px}.property-row{display:flex;align-items:center;margin-bottom:10px}.property-row:last-child{margin-bottom:0}.property-row>label{width:70px;font-size:12px;color:#666;flex-shrink:0}.property-row>input[type=text],.property-row>input[type=number]{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;outline:none;transition:border-color .2s}.property-row>input:focus{border-color:#2196f3}.property-row>input[type=checkbox]{width:16px;height:16px;cursor:pointer}.property-row>input[type=range]{flex:1;margin-right:8px}.property-row .range-value{font-size:11px;color:#666;min-width:36px;text-align:right}.property-row.two-col{display:flex;gap:12px}.property-field{flex:1;display:flex;flex-direction:column;gap:4px}.property-field label{font-size:11px;color:#888}.property-field input[type=text],.property-field input[type=number]{padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.property-field input:focus{border-color:#2196f3}.property-value{flex:1;font-size:12px;color:#333}.property-value.readonly{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#f0f0f0;border-radius:4px;color:#666}.component-type-icon{font-size:14px}.color-input-wrapper{flex:1;display:flex;align-items:center;gap:8px}.color-input-wrapper input[type=color]{width:32px;height:28px;padding:0;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:none}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-input-wrapper input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.color-input-wrapper .color-text{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;font-family:monospace;outline:none;transition:border-color .2s}.color-input-wrapper .color-text:focus{border-color:#2196f3}.style-state-switcher{display:flex;gap:4px;margin-bottom:10px;padding:2px;background:#eee;border-radius:6px}.style-state-btn{flex:1;padding:5px 4px;border:none;background:transparent;border-radius:4px;font-size:11px;color:#666;cursor:pointer;transition:all .15s;position:relative}.style-state-btn:hover{background:#e0e0e0;color:#333}.style-state-btn.active{background:#fff;color:#333;font-weight:600;box-shadow:0 1px 3px #0000001a}.style-state-btn.has-override:after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;background:#2196f3;border-radius:50%}.style-state-info{margin-bottom:10px}.inherit-hint{font-size:11px;color:#999;font-style:italic}.clear-override-btn{width:100%;padding:4px 8px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:11px;color:#e53935;cursor:pointer;transition:all .15s}.clear-override-btn:hover{background:#fbe9e7;border-color:#e53935}.image-src-picker{position:relative;width:100%}.image-src-display{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:#fff;min-height:32px;transition:border-color .2s}.image-src-display:hover{border-color:#2196f3}.image-src-thumb{width:24px;height:24px;object-fit:cover;border-radius:2px;border:1px solid #eee;flex-shrink:0}.image-src-name{flex:1;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-src-placeholder{flex:1;font-size:12px;color:#bbb}.image-src-arrow{font-size:10px;color:#999;flex-shrink:0}.image-src-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:100;max-height:200px;overflow-y:auto;margin-top:2px}.image-src-empty{padding:12px;font-size:11px;color:#999;text-align:center}.image-src-option{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;transition:background .15s}.image-src-option:hover{background:#f0f7ff}.image-src-option.selected{background:#e3f2fd}.image-src-option.clear-option{justify-content:center;font-size:11px;color:#e53935;border-top:1px solid #eee}.image-src-option-thumb{width:32px;height:32px;object-fit:cover;border-radius:3px;border:1px solid #eee;flex-shrink:0}.image-src-option-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}.image-src-option-name{font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-src-option-size{font-size:10px;color:#999}.align-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;width:90px;margin:0 auto 4px}.align-grid-btn{width:28px;height:28px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;color:#666}.align-grid-btn:hover{background:#e3f2fd;border-color:#2196f3;color:#2196f3}.align-grid-btn.active{background:#2196f3;border-color:#1976d2;color:#fff}.size-mode-switcher{display:flex;gap:1px;background:#e0e0e0;border-radius:4px;overflow:hidden;flex:1}.size-mode-btn{flex:1;padding:3px 0;border:none;background:#f0f0f0;font-size:11px;color:#666;cursor:pointer;transition:all .15s;line-height:1.2}.size-mode-btn:hover{background:#e8e8e8;color:#333}.size-mode-btn.active{background:#2196f3;color:#fff;font-weight:600}.flags-group{margin-bottom:8px}.flags-group:last-child{margin-bottom:0}.flags-group-label{font-size:11px;font-weight:600;color:#888;margin-bottom:4px}.flag-row{display:flex;align-items:center;gap:6px;padding:3px 0}.flag-row input[type=checkbox]{width:14px;height:14px;cursor:pointer;flex-shrink:0}.flag-row label{font-size:12px;color:#555;cursor:pointer;-webkit-user-select:none;user-select:none}.collapsible-section{margin-top:10px;border-top:1px solid #eee;padding-top:6px}.collapsible-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 0;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:600;color:#666}.collapsible-header:hover{color:#333}.collapsible-arrow{font-size:9px;transition:transform .15s;display:inline-block}.collapsible-arrow.open{transform:rotate(90deg)}.collapsible-body{padding:6px 0 2px}.grid-template-preview{display:flex;gap:2px;height:22px;border-radius:3px;overflow:hidden;border:1px solid #ddd}.grid-template-bar{display:flex;align-items:center;justify-content:center;background:#e3f2fd;border-right:1px solid #bbdefb;min-width:0;overflow:hidden}.grid-template-bar:last-child{border-right:none}.grid-template-bar-label{font-size:9px;color:#1565c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.table-editor-actions{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.table-editor-actions button{flex:1;min-width:0;padding:4px 6px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:11px;cursor:pointer;color:#555;transition:all .15s;white-space:nowrap}.table-editor-actions button:hover:not(:disabled){background:#e3f2fd;border-color:#2196f3;color:#2196f3}.table-editor-actions button:disabled{opacity:.4;cursor:not-allowed}.table-cell-align-bar{display:flex;align-items:center;gap:4px;margin-bottom:6px}.table-cell-align-label{font-size:11px;color:#888;flex-shrink:0}.table-align-btn{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:3px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;color:#666}.table-align-btn:hover{background:#e3f2fd;border-color:#2196f3}.table-align-btn.active{background:#2196f3;border-color:#1976d2;color:#fff}.table-editor-wrapper{overflow-x:auto;margin-bottom:8px;border:1px solid #ddd;border-radius:4px}.table-editor-table{width:100%;border-collapse:collapse;table-layout:fixed}.table-editor-cell{border:1px solid #e0e0e0;padding:0;position:relative}.table-editor-cell.selected{outline:2px solid #2196F3;outline-offset:-1px;z-index:1}.table-header-row .table-editor-cell{background:#f0f0f0}.table-cell-input{width:100%;border:none;outline:none;padding:4px 5px;font-size:11px;background:transparent;box-sizing:border-box;color:#333}.table-cell-input:focus{background:#fafafa}.win-btn-list{display:flex;flex-direction:column;gap:6px}.win-btn-item{display:flex;align-items:center;gap:4px}.win-btn-icon-select{width:42px;padding:3px 2px;font-size:14px;border:1px solid #ddd;border-radius:3px;text-align:center}.win-btn-id-input{flex:1;padding:3px 6px;font-size:11px;border:1px solid #ddd;border-radius:3px;min-width:0}.win-btn-delete{background:none;border:none;color:#999;cursor:pointer;font-size:11px;padding:2px 4px}.win-btn-delete:hover{color:#e53935}.win-btn-add{background:none;border:1px dashed #ccc;border-radius:4px;padding:4px 8px;font-size:11px;color:#666;cursor:pointer;text-align:center}.win-btn-add:hover{border-color:#2196f3;color:#2196f3}.chart-series-list{margin-top:4px}.chart-series-header{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;color:#666}.chart-series-add-btn{background:none;border:none;color:#2196f3;cursor:pointer;font-size:11px;padding:2px 6px}.chart-series-add-btn:hover{text-decoration:underline}.chart-series-item{border:1px solid #e8e8e8;border-radius:4px;margin-bottom:4px;overflow:hidden}.chart-series-row{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;background:#fafafa;font-size:12px}.chart-series-row:hover{background:#f0f0f0}.chart-series-row.expanded{background:#e8f0fe;border-bottom:1px solid #e0e0e0}.chart-series-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.chart-series-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-series-count{color:#999;font-size:10px;flex-shrink:0}.chart-series-delete{background:none;border:none;color:#999;cursor:pointer;font-size:10px;padding:0 2px;flex-shrink:0}.chart-series-delete:hover{color:#e53935}.chart-series-detail{padding:6px 8px;background:#fff}.chart-series-detail .property-row{margin-bottom:4px}.calendar-date-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;min-height:8px}.calendar-date-tag{display:inline-flex;align-items:center;gap:3px;background:#e3f2fd;color:#1565c0;border-radius:3px;padding:2px 6px;font-size:11px}.calendar-date-tag-remove{background:none;border:none;color:#90caf9;cursor:pointer;font-size:10px;padding:0 1px;line-height:1}.calendar-date-tag-remove:hover{color:#e53935}.calendar-date-input-row{display:flex;gap:4px}.calendar-date-input{flex:1;padding:3px 6px;font-size:11px;border:1px solid #ddd;border-radius:3px;min-width:0}.calendar-date-add-btn{background:#2196f3;color:#fff;border:none;border-radius:3px;padding:3px 8px;font-size:11px;cursor:pointer;flex-shrink:0}.calendar-date-add-btn:hover{background:#1976d2}.calendar-date-error{display:block;color:#e53935;font-size:10px;margin-top:2px}.tab-manager-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.tab-manager-item{display:flex;align-items:center;gap:4px;padding:4px 6px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px}.tab-manager-item:hover{background:#f5f5f5}.tab-manager-item.active{background:#e3f2fd;border-color:#90caf9}.tab-manager-name-input{flex:1;border:none;background:transparent;font-size:12px;padding:2px 4px;min-width:0;outline:none}.tab-manager-name-input:focus{background:#fff;border:1px solid #90caf9;border-radius:2px}.tab-manager-child-count{color:#999;font-size:10px;flex-shrink:0;white-space:nowrap}.tab-manager-actions{display:flex;gap:2px;flex-shrink:0}.tab-manager-move-btn,.tab-manager-delete-btn{background:none;border:none;cursor:pointer;font-size:11px;padding:1px 3px;color:#999;line-height:1}.tab-manager-move-btn:hover{color:#2196f3}.tab-manager-move-btn:disabled{color:#ddd;cursor:default}.tab-manager-delete-btn:hover{color:#e53935}.tab-manager-add-btn{background:none;border:1px dashed #ccc;border-radius:4px;padding:4px 8px;font-size:11px;color:#666;cursor:pointer;text-align:center}.tab-manager-add-btn:hover{border-color:#2196f3;color:#2196f3}.tab-manager-hint,.tile-grid-hint{font-size:10px;color:#999;padding:4px 0;font-style:italic}.tile-grid-visual{display:flex;flex-direction:column;gap:2px;padding:6px 0}.tile-grid-row{display:flex;gap:2px}.tile-grid-cell{flex:1;aspect-ratio:1;min-width:28px;max-width:48px;display:flex;align-items:center;justify-content:center;background:#f0f0f0;border:2px solid #ddd;border-radius:4px;cursor:pointer;transition:all .15s}.tile-grid-cell:hover{background:#e8e8e8;border-color:#bbb}.tile-grid-cell.active{background:#e3f2fd;border-color:#2196f3}.tile-grid-cell-label{font-size:11px;color:#666;font-weight:500}.range-with-value{display:flex;align-items:center;gap:6px;flex:1}.range-with-value input[type=range]{flex:1;min-width:0}.range-number-input{width:52px;padding:3px 4px;border:1px solid #ddd;border-radius:3px;font-size:11px;text-align:center;flex-shrink:0}.font-size-input{display:flex;align-items:center;gap:4px;flex:1}.font-size-select{flex:1;padding:4px 6px;border:1px solid #ddd;border-radius:3px;font-size:12px;min-width:0}.font-size-number{width:48px;padding:4px;border:1px solid #ddd;border-radius:3px;font-size:11px;text-align:center;flex-shrink:0}.line-points-list{display:flex;flex-direction:column;gap:4px}.line-point-row{display:flex;align-items:center;gap:4px}.line-point-index{width:16px;font-size:10px;color:#999;text-align:center;flex-shrink:0}.line-point-fields{display:flex;align-items:center;gap:3px;flex:1}.line-point-fields label{font-size:10px;color:#888;flex-shrink:0}.line-point-input{width:48px;padding:3px 4px;border:1px solid #ddd;border-radius:3px;font-size:11px;text-align:center}.line-point-delete{background:none;border:none;color:#999;cursor:pointer;font-size:10px;padding:2px 3px;flex-shrink:0}.line-point-delete:hover{color:#e53935}.line-point-add{background:none;border:1px dashed #ccc;border-radius:4px;padding:4px 8px;font-size:11px;color:#666;cursor:pointer;text-align:center;margin-top:2px}.line-point-add:hover{border-color:#2196f3;color:#2196f3}.link-toggle-btn{width:28px;height:28px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;margin-left:4px;transition:all .15s}.link-toggle-btn:hover{background:#e3f2fd;border-color:#2196f3}.link-toggle-btn.linked{background:#e3f2fd;border-color:#90caf9}.link-toggle-btn.small{width:22px;height:22px;font-size:11px;margin-left:2px}.four-dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;padding-left:70px}.four-dir-grid .property-field label{font-size:10px}.four-dir-grid .property-field input{padding:4px 6px;border:1px solid #ddd;border-radius:4px;font-size:12px;outline:none;width:100%;box-sizing:border-box;transition:border-color .2s}.four-dir-grid .property-field input:focus{border-color:#2196f3}.border-side-group{display:flex;flex-wrap:wrap;gap:3px}.border-side-btn{padding:3px 7px;border:1px solid #ddd;background:#fff;border-radius:3px;font-size:11px;cursor:pointer;color:#666;transition:all .15s}.border-side-btn:hover{background:#e3f2fd;border-color:#2196f3;color:#2196f3}.border-side-btn.active{background:#2196f3;border-color:#1976d2;color:#fff}.dropdown-options-editor{display:flex;flex-direction:column;gap:4px}.dropdown-option-row{display:flex;align-items:center;gap:4px}.dropdown-option-index{width:18px;font-size:10px;color:#999;text-align:center;flex-shrink:0}.dropdown-option-input{flex:1;padding:4px 6px;border:1px solid #ddd;border-radius:3px;font-size:12px;outline:none;min-width:0;transition:border-color .15s}.dropdown-option-input:focus{border-color:#2196f3}.dropdown-option-btn{width:22px;height:22px;border:1px solid #ddd;background:#fff;border-radius:3px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:#666;flex-shrink:0;transition:all .15s}.dropdown-option-btn:hover:not(:disabled){background:#e3f2fd;border-color:#2196f3;color:#2196f3}.dropdown-option-btn:disabled{opacity:.3;cursor:not-allowed}.dropdown-option-btn.delete:hover:not(:disabled){background:#fbe9e7;border-color:#e53935;color:#e53935}.dropdown-option-add{background:none;border:1px dashed #ccc;border-radius:4px;padding:4px 8px;font-size:11px;color:#666;cursor:pointer;text-align:center;margin-top:2px}.dropdown-option-add:hover{border-color:#2196f3;color:#2196f3}.toggle-switch-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch-label{font-size:12px;color:#555}.toggle-switch{width:36px;height:20px;border-radius:10px;background:#ccc;position:relative;transition:background .2s;flex-shrink:0}.toggle-switch.on{background:#2196f3}.toggle-switch-knob{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 3px #00000040;transition:left .2s}.toggle-switch.on .toggle-switch-knob{left:18px}.code-editor-wrapper{border:1px solid #ddd;border-radius:6px;overflow:hidden;background:#1e1e1e}.code-editor-header{display:flex;align-items:center;padding:8px 12px;background:#2d2d2d;border-bottom:1px solid #3d3d3d}.language-badge{font-size:10px;font-weight:600;color:#888;background:#3d3d3d;padding:2px 8px;border-radius:3px}.code-editor-textarea{width:100%;min-height:200px;padding:12px;border:none;background:#1e1e1e;color:#d4d4d4;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.5;resize:vertical;outline:none;box-sizing:border-box}.code-editor-textarea::placeholder{color:#666}.code-editor-textarea:focus{background:#252526}.code-editor-footer{display:flex;align-items:center;justify-content:flex-end;padding:6px 12px;background:#2d2d2d;border-top:1px solid #3d3d3d}.line-count{font-size:11px;color:#888}.event-dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.event-dialog{background:#fff;border-radius:8px;width:560px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0}.dialog-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.close-btn{width:28px;height:28px;border:none;background:transparent;font-size:20px;color:#999;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-btn:hover{background:#f0f0f0;color:#333}.dialog-content{flex:1;overflow-y:auto;padding:20px}.form-section{margin-bottom:20px}.form-section:last-child{margin-bottom:0}.section-label{display:block;font-size:13px;font-weight:600;color:#333;margin-bottom:8px}.field-hint{font-size:12px;color:#888;margin:6px 0 0}.event-type-select,.action-type-select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;outline:none;background:#fff;cursor:pointer;transition:border-color .2s}.event-type-select:focus,.action-type-select:focus{border-color:#2196f3}.handler-type-tabs{display:flex;gap:8px}.tab-btn{flex:1;padding:10px 16px;border:1px solid #ddd;background:#f8f9fa;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.tab-btn:hover{background:#f0f0f0}.tab-btn.active{background:#2196f3;border-color:#2196f3;color:#fff}.action-config{margin-top:16px;padding:16px;background:#f8f9fa;border-radius:6px}.config-row{margin-bottom:12px}.config-row:last-child{margin-bottom:0}.config-row label{display:block;font-size:12px;color:#666;margin-bottom:6px}.config-row select,.config-row input[type=text],.config-row input[type=number]{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:13px;outline:none;background:#fff;box-sizing:border-box;transition:border-color .2s}.config-row select:focus,.config-row input:focus{border-color:#2196f3}.preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.preview-header .section-label{margin-bottom:0}.toggle-preview-btn{padding:4px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.toggle-preview-btn:hover{background:#f0f0f0}.code-preview{background:#1e1e1e;color:#d4d4d4;padding:16px;border-radius:6px;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;line-height:1.5;overflow-x:auto;margin:0;white-space:pre}.dialog-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid #e0e0e0;background:#f8f9fa;border-radius:0 0 8px 8px}.cancel-btn,.save-btn{padding:10px 24px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.cancel-btn{border:1px solid #ddd;background:#fff;color:#666}.cancel-btn:hover{background:#f0f0f0}.save-btn{border:none;background:#2196f3;color:#fff}.save-btn:hover{background:#1976d2}.event-panel{background:#f8f9fa;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;max-height:300px;min-height:150px}.event-panel .panel-header{padding:10px 16px;border-bottom:1px solid #e0e0e0;background:#fff;display:flex;align-items:center;justify-content:space-between}.event-panel .panel-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.add-event-btn{width:24px;height:24px;border:none;background:#2196f3;color:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;transition:background .2s}.add-event-btn:hover{background:#1976d2}.event-list{flex:1;overflow-y:auto;padding:8px}.no-events{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#999;text-align:center}.no-events p{margin:0 0 12px;font-size:13px}.add-first-event{padding:8px 16px;border:1px dashed #ccc;background:transparent;color:#666;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.add-first-event:hover{border-color:#2196f3;color:#2196f3;background:#e3f2fd}.event-item{display:flex;align-items:center;padding:10px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:8px;transition:all .2s}.event-item:last-child{margin-bottom:0}.event-item:hover{border-color:#2196f3;box-shadow:0 2px 4px #2196f31a}.event-info{flex:1;cursor:pointer;min-width:0}.event-type{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#333;margin-bottom:4px}.event-icon{font-size:12px}.event-handler{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-actions{display:flex;gap:4px;margin-left:8px}.event-edit-btn,.event-delete-btn{width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s}.event-edit-btn:hover{background:#e3f2fd}.event-delete-btn:hover{background:#ffebee}.no-selection{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;padding:20px;text-align:center}.no-selection p{margin:4px 0}.no-selection .hint{font-size:12px;color:#bbb}.animation-panel{background:#f8f9fa;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;max-height:280px;min-height:120px}.animation-panel .panel-header{padding:10px 16px;border-bottom:1px solid #e0e0e0;background:#fff;display:flex;align-items:center;justify-content:space-between}.animation-panel .panel-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.add-anim-btn{width:24px;height:24px;border:none;background:#2196f3;color:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;transition:background .2s}.add-anim-btn:hover{background:#1976d2}.anim-list{flex:1;overflow-y:auto;padding:8px}.no-anims{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#999;text-align:center}.no-anims p{margin:0 0 12px;font-size:13px}.add-first-anim{padding:8px 16px;border:1px dashed #ccc;background:transparent;color:#666;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.add-first-anim:hover{border-color:#2196f3;color:#2196f3;background:#e3f2fd}.anim-item{display:flex;align-items:center;padding:10px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:8px;transition:all .2s}.anim-item:last-child{margin-bottom:0}.anim-item:hover{border-color:#2196f3;box-shadow:0 2px 4px #2196f31a}.anim-info{flex:1;cursor:pointer;min-width:0}.anim-type{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#333;margin-bottom:4px}.anim-icon{font-size:12px}.anim-detail{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.anim-actions{display:flex;gap:4px;margin-left:8px}.anim-edit-btn,.anim-delete-btn{width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s}.anim-edit-btn:hover{background:#e3f2fd}.anim-delete-btn:hover{background:#ffebee}.anim-no-selection{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;padding:20px;text-align:center}.anim-no-selection p{margin:4px 0}.anim-no-selection .hint{font-size:12px;color:#bbb}.anim-dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.anim-dialog{background:#fff;border-radius:8px;width:480px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.anim-dialog .dialog-header{padding:16px 20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between}.anim-dialog .dialog-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.anim-dialog .close-btn{width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:18px;color:#666;display:flex;align-items:center;justify-content:center}.anim-dialog .close-btn:hover{background:#f0f0f0}.anim-dialog .dialog-content{flex:1;overflow-y:auto;padding:20px}.anim-dialog .form-section{margin-bottom:16px}.anim-dialog .section-label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:6px}.anim-dialog select,.anim-dialog input[type=text],.anim-dialog input[type=number]{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;color:#333;background:#fff;box-sizing:border-box}.anim-dialog select:focus,.anim-dialog input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f326}.anim-dialog .field-hint{font-size:11px;color:#999;margin:4px 0 0}.anim-dialog .form-row{display:flex;gap:12px}.anim-dialog .form-row .form-section{flex:1}.anim-dialog .dialog-footer{padding:12px 20px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:8px}.anim-dialog .cancel-btn,.anim-dialog .save-btn{padding:8px 20px;border:none;border-radius:4px;font-size:13px;cursor:pointer;transition:background .2s}.anim-dialog .cancel-btn{background:#f0f0f0;color:#666}.anim-dialog .cancel-btn:hover{background:#e0e0e0}.anim-dialog .save-btn{background:#2196f3;color:#fff}.anim-dialog .save-btn:hover{background:#1976d2}.page-manager{background:#f8f9fa;border-top:1px solid #e0e0e0;display:flex;align-items:center;padding:0 8px;height:40px;gap:8px}.page-tabs{display:flex;align-items:center;gap:4px;flex:1;overflow-x:auto;padding:4px 0}.page-tabs::-webkit-scrollbar{height:4px}.page-tabs::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.page-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px 6px 0 0;cursor:pointer;font-size:12px;color:#666;white-space:nowrap;transition:all .2s;-webkit-user-select:none;user-select:none}.page-tab:hover{background:#f0f0f0}.page-tab.active{background:#fff;border-bottom-color:#fff;color:#333;font-weight:500;position:relative}.page-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#2196f3}.page-icon{font-size:14px}.page-name{max-width:100px;overflow:hidden;text-overflow:ellipsis}.page-name-input{width:80px;padding:2px 6px;border:1px solid #2196F3;border-radius:3px;font-size:12px;outline:none}.add-page-btn{width:28px;height:28px;border:1px dashed #ccc;background:transparent;border-radius:4px;cursor:pointer;font-size:16px;color:#999;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.add-page-btn:hover{border-color:#2196f3;color:#2196f3;background:#e3f2fd}.page-properties{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid #e0e0e0}.page-prop-row{display:flex;align-items:center;gap:6px}.page-prop-row label{font-size:11px;color:#888}.page-prop-row input[type=color]{width:24px;height:24px;padding:0;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:none}.page-prop-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.page-prop-row input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.page-context-menu{position:fixed;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:4px 0;z-index:1000;min-width:100px}.page-context-menu button{display:block;width:100%;padding:8px 16px;border:none;background:transparent;text-align:left;font-size:13px;cursor:pointer;transition:background .2s}.page-context-menu button:hover{background:#f0f0f0}.page-context-menu button.disabled{color:#ccc;cursor:not-allowed}.page-context-menu button.disabled:hover{background:transparent}.status-bar{height:32px;background:#fff;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;color:#666;flex-shrink:0}.status-left,.status-right{display:flex;align-items:center;gap:8px}.status-item{display:flex;align-items:center}.status-text{display:flex;align-items:center;gap:6px}.status-text .component-icon{font-size:14px}.status-text .component-size{color:#999;margin-left:4px}.status-divider{width:1px;height:16px;background:#e0e0e0;margin:0 4px}.status-button{display:flex;align-items:center;gap:4px;padding:4px 8px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:12px;color:#666;transition:all .15s}.status-button:hover{background:#f0f0f0}.status-button.active{background:#e3f2fd;color:#2196f3}.status-button .icon{font-size:14px}.zoom-controls{display:flex;align-items:center;gap:2px}.zoom-controls button{width:28px;height:24px;border:none;background:#f5f5f5;border-radius:4px;cursor:pointer;font-size:14px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .15s}.zoom-controls button:hover{background:#e0e0e0}.zoom-controls .zoom-level{width:auto;min-width:50px;padding:0 8px;font-size:12px}.status-save-time{color:#4caf50}.align-toolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border-bottom:1px solid #e0e0e0}.align-toolbar-group{display:flex;gap:2px}.align-toolbar-divider{width:1px;height:20px;background:#e0e0e0;margin:0 4px}.align-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#666;transition:all .15s}.align-btn:hover:not(:disabled){background:#f0f0f0;color:#333}.align-btn:active:not(:disabled){background:#e0e0e0}.align-btn:disabled{opacity:.4;cursor:not-allowed}.align-btn svg{flex-shrink:0}.help-panel-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10002;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.help-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:600px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.help-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0}.help-panel-header h2{margin:0;font-size:18px;font-weight:600;color:#333}.help-panel-close{width:32px;height:32px;border:none;background:transparent;font-size:24px;color:#999;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s}.help-panel-close:hover{background:#f0f0f0;color:#666}.help-panel-content{flex:1;overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.shortcut-group{background:#f8f9fa;border-radius:8px;padding:12px 16px}.shortcut-group h3{margin:0 0 12px;font-size:14px;font-weight:600;color:#555}.shortcut-list{display:flex;flex-direction:column;gap:8px}.shortcut-item{display:flex;align-items:center;gap:12px}.shortcut-keys{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #ddd;border-radius:4px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:11px;color:#555;white-space:nowrap;min-width:100px}.shortcut-desc{font-size:13px;color:#666}.help-panel-footer{padding:12px 20px;border-top:1px solid #e0e0e0;text-align:center}.help-panel-footer span{font-size:12px;color:#999}@media(max-width:640px){.help-panel-content{grid-template-columns:1fr}}.toast-container{position:fixed;bottom:60px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:10010;pointer-events:none}.toast-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:280px;max-width:400px;pointer-events:auto;animation:toastSlideIn .3s ease-out}.toast-item.toast-exit{animation:toastSlideOut .3s ease-in forwards}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.toast-success .toast-icon{background:#e8f5e9;color:#4caf50}.toast-error .toast-icon{background:#ffebee;color:#f44336}.toast-warning .toast-icon{background:#fff3e0;color:#ff9800}.toast-info .toast-icon{background:#e3f2fd;color:#2196f3}.toast-message{flex:1;font-size:14px;color:#333;line-height:1.4}.toast-close{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:18px;color:#999;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s;flex-shrink:0}.toast-close:hover{background:#f0f0f0;color:#666}.toast-success{border-left:4px solid #4caf50}.toast-error{border-left:4px solid #f44336}.toast-warning{border-left:4px solid #ff9800}.toast-info{border-left:4px solid #2196f3}.modal-global-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10002;animation:modalFadeIn .15s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-dialog{background:#2a2a3e;border:1px solid #3a3a5c;border-radius:10px;min-width:340px;max-width:480px;box-shadow:0 8px 32px #0006;animation:modalSlideIn .15s ease-out}.modal-dialog-body{padding:24px 24px 16px}.modal-dialog-message{margin:0;font-size:14px;line-height:1.6;color:#e0e0e0;word-break:break-word}.modal-dialog-input{width:100%;margin-top:14px;padding:8px 12px;background:#1a1a2e;border:1px solid #3a3a5c;border-radius:6px;color:#e0e0e0;font-size:14px;outline:none;box-sizing:border-box;transition:border-color .15s}.modal-dialog-input:focus{border-color:#5c6bc0}.modal-dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 24px 20px}.modal-dialog-btn{padding:7px 20px;border:none;border-radius:6px;font-size:13px;cursor:pointer;transition:background .15s,opacity .15s}.modal-btn-cancel{background:#3a3a5c;color:#ccc}.modal-btn-cancel:hover{background:#4a4a6c}.modal-btn-confirm{background:#5c6bc0;color:#fff}.modal-btn-confirm:hover{background:#7986cb}.logic-node{background:#2d2d2d;border:2px solid #444;border-radius:8px;min-width:180px;max-width:280px;font-size:12px;box-shadow:0 2px 8px #0000004d;transition:box-shadow .2s,transform .1s;position:relative}.logic-node:hover{box-shadow:0 4px 12px #0006}.logic-node.selected{box-shadow:0 0 0 2px #2196f3,0 4px 12px #2196f34d}.logic-node.debug-current{animation:pulse 1s infinite}.logic-node.debug-path{opacity:1}@keyframes pulse{0%,to{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 20px currentColor}}.breakpoint-indicator{position:absolute;top:-8px;left:-8px;font-size:14px;z-index:10}.logic-node-header{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px 6px 0 0;color:#fff;font-weight:600}.logic-node-icon{font-size:14px}.logic-node-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logic-node-body{padding:8px 0;display:flex;flex-direction:column;gap:4px}.logic-node-inputs,.logic-node-outputs{display:flex;flex-direction:column;gap:4px}.logic-port{display:flex;align-items:center;gap:6px;padding:2px 10px;position:relative;min-height:20px}.input-port{justify-content:flex-start}.output-port{justify-content:flex-end}.port-label{color:#ccc;font-size:11px}.port-value{font-size:10px;color:#4caf50;background:#4caf5033;padding:1px 4px;border-radius:3px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.port-handle{width:12px!important;height:12px!important;border:2px solid #1a1a1a!important;transition:transform .15s,box-shadow .15s}.port-handle:hover{transform:scale(1.3);box-shadow:0 0 6px currentColor}.port-handle.execution-port{border-radius:2px!important;width:14px!important;height:10px!important}.port-handle.data-port{border-radius:50%!important}.logic-node-params{padding:4px 10px;border-top:1px solid #444;margin-top:4px}.param-preview{color:#888;font-size:10px;font-style:italic}.react-flow__edge-path{stroke-width:2}.react-flow__edge.execution{stroke:#fff;stroke-width:3}.react-flow__edge.data{stroke-width:2}.react-flow__edge.animated path{stroke-dasharray:5;animation:dash .5s linear infinite}@keyframes dash{to{stroke-dashoffset:-10}}.node-palette{width:240px;background:#1e1e1e;border-right:1px solid #333;display:flex;flex-direction:column;height:100%;overflow:hidden}.palette-header{padding:12px 16px;border-bottom:1px solid #333}.palette-header h3{margin:0;font-size:14px;color:#fff;font-weight:600}.palette-search{padding:8px 12px;border-bottom:1px solid #333;position:relative}.palette-search input{width:100%;padding:8px 30px 8px 10px;border:1px solid #444;border-radius:4px;background:#2d2d2d;color:#fff;font-size:12px;outline:none;transition:border-color .2s}.palette-search input:focus{border-color:#2196f3}.palette-search input::placeholder{color:#666}.clear-search{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px}.clear-search:hover{color:#fff}.palette-content{flex:1;overflow-y:auto;padding:8px 0}.palette-category{margin-bottom:4px}.category-header{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}.category-header:hover{background:#2a2a2a}.category-icon{font-size:14px}.category-name{flex:1;font-size:13px;font-weight:500;color:#ddd}.category-toggle{font-size:10px;color:#666}.category-nodes{padding:4px 0}.node-item{display:flex;align-items:flex-start;gap:10px;padding:8px 12px 8px 20px;cursor:grab;border-left:3px solid transparent;transition:background .15s,border-color .15s}.node-item:hover{background:#2a2a2a}.node-item:active{cursor:grabbing}.node-icon{font-size:16px;flex-shrink:0;margin-top:2px}.node-info{display:flex;flex-direction:column;gap:2px;min-width:0}.node-label{font-size:12px;color:#ddd;font-weight:500}.node-description{font-size:10px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-results{padding:4px 0}.no-results{padding:20px;text-align:center;color:#666;font-size:12px}.palette-content::-webkit-scrollbar{width:6px}.palette-content::-webkit-scrollbar-track{background:transparent}.palette-content::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.palette-content::-webkit-scrollbar-thumb:hover{background:#555}.variable-panel{width:240px;background:#1e1e1e;border-left:1px solid #333;display:flex;flex-direction:column;height:100%;overflow:hidden}.variable-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #333;background:#1e1e1e}.variable-panel .panel-header h3{margin:0;font-size:14px;color:#fff;font-weight:600}.add-var-btn{width:24px;height:24px;border:none;border-radius:4px;background:#2196f3;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.add-var-btn:hover{background:#1976d2}.add-var-form{padding:12px;border-bottom:1px solid #333;display:flex;flex-direction:column;gap:8px;background:#252525}.add-var-form input,.add-var-form select{padding:8px 10px;border:1px solid #444;border-radius:4px;background:#2d2d2d;color:#fff;font-size:12px;outline:none}.add-var-form input:focus,.add-var-form select:focus{border-color:#2196f3}.form-actions{display:flex;gap:8px;margin-top:4px}.btn-confirm,.btn-cancel{flex:1;padding:6px 12px;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.btn-confirm{background:#4caf50;color:#fff}.btn-confirm:hover{background:#43a047}.variable-list{flex:1;overflow-y:auto;padding:8px 0}.no-variables,.no-graph{padding:20px;text-align:center;color:#666}.no-variables p,.no-graph p{margin:0 0 12px;font-size:12px}.no-variables button{padding:8px 16px;border:1px dashed #444;border-radius:4px;background:transparent;color:#888;font-size:12px;cursor:pointer;transition:all .2s}.no-variables button:hover{border-color:#2196f3;color:#2196f3}.variable-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #2a2a2a;transition:background .15s}.variable-item:hover{background:#252525}.var-icon{font-size:14px;flex-shrink:0}.var-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.var-name{font-size:12px;color:#ddd;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.var-type{font-size:10px;color:#666}.var-value{flex-shrink:0}.value-display{display:inline-block;padding:4px 8px;background:#2d2d2d;border-radius:4px;font-size:11px;color:#4caf50;cursor:pointer;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .15s}.value-display:hover{background:#333}.var-value input,.var-value select{width:70px;padding:4px 6px;border:1px solid #2196f3;border-radius:4px;background:#2d2d2d;color:#fff;font-size:11px;outline:none}.var-actions{flex-shrink:0;opacity:0;transition:opacity .15s}.variable-item:hover .var-actions{opacity:1}.btn-delete{background:none;border:none;cursor:pointer;font-size:12px;padding:4px;opacity:.6;transition:opacity .15s}.btn-delete:hover{opacity:1}.variable-list::-webkit-scrollbar{width:6px}.variable-list::-webkit-scrollbar-track{background:transparent}.variable-list::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.variable-list::-webkit-scrollbar-thumb:hover{background:#555}.node-edit-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.node-edit-dialog{background:#1e1e1e;border-radius:8px;width:420px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080;border:1px solid #333}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #333}.dialog-header h3{margin:0;font-size:16px;color:#fff;font-weight:600}.close-btn{background:none;border:none;color:#888;font-size:18px;cursor:pointer;padding:4px 8px;transition:color .2s}.close-btn:hover{color:#fff}.dialog-body{flex:1;overflow-y:auto;padding:20px}.node-type-info{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:10px;background:#252525;border-radius:6px}.type-badge{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase}.subtype-label{color:#888;font-size:12px;font-family:monospace}.params-section{margin-top:16px}.params-section h4{margin:0 0 12px;font-size:13px;color:#888;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.param-group{margin-bottom:16px}.param-group label{display:block;margin-bottom:6px;font-size:12px;color:#aaa;font-weight:500}.param-group input,.param-group select,.param-group textarea{width:100%;padding:10px 12px;border:1px solid #444;border-radius:6px;background:#2d2d2d;color:#fff;font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s}.param-group input:focus,.param-group select:focus,.param-group textarea:focus{border-color:#2196f3;box-shadow:0 0 0 2px #2196f333}.param-group input::placeholder,.param-group textarea::placeholder{color:#666}.param-group select{cursor:pointer}.param-group textarea{resize:vertical;min-height:60px;font-family:inherit}.param-group textarea.code-textarea{font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.5;min-height:150px}.no-params{padding:20px;text-align:center;color:#666;background:#252525;border-radius:6px}.no-params p{margin:0;font-size:13px}.dialog-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #333}.btn-cancel,.btn-save{padding:10px 20px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.btn-cancel{background:#444;color:#ccc}.btn-cancel:hover{background:#555}.btn-save{background:#2196f3;color:#fff}.btn-save:hover{background:#1976d2}.btn-save:active,.btn-cancel:active{transform:scale(.98)}.dialog-body::-webkit-scrollbar{width:6px}.dialog-body::-webkit-scrollbar-track{background:transparent}.dialog-body::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.dialog-body::-webkit-scrollbar-thumb:hover{background:#555}.logic-editor{display:flex;height:100%;width:100%;background:#1a1a2e;min-height:0}.logic-editor-canvas,.logic-canvas{flex:1;position:relative;height:100%;min-height:0}.no-graph-message{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:#888}.no-graph-message h3{margin:0;font-size:18px;color:#ccc;font-weight:600}.no-graph-message p{margin:0;font-size:13px;color:#666}.no-graph-message button{margin-top:8px;padding:10px 20px;border:1px dashed #555;border-radius:6px;background:transparent;color:#aaa;font-size:13px;cursor:pointer;transition:all .2s}.no-graph-message button:hover{border-color:#2196f3;color:#2196f3}.top-panel{display:flex;align-items:center;gap:8px}.graph-selector{position:relative}.graph-dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #444;border-radius:6px;background:#2d2d2d;color:#ddd;font-size:13px;cursor:pointer;transition:all .2s}.graph-dropdown-btn:hover{background:#383838;border-color:#555}.dropdown-arrow{font-size:10px;color:#888;margin-left:4px}.graph-dropdown{position:absolute;top:100%;left:0;margin-top:4px;min-width:180px;background:#2d2d2d;border:1px solid #444;border-radius:6px;box-shadow:0 4px 16px #0006;z-index:100;overflow:hidden}.graph-item{padding:8px 14px;font-size:13px;color:#ccc;cursor:pointer;transition:background .15s}.graph-item:hover{background:#383838}.graph-item.active{background:#2196f333;color:#6bb3ff}.graph-item.create{border-top:1px solid #444;color:#888}.graph-item.create:hover{color:#2196f3}.delete-graph-btn{padding:6px 10px;border:1px solid #444;border-radius:6px;background:#2d2d2d;cursor:pointer;font-size:14px;transition:all .2s}.delete-graph-btn:hover{background:#422;border-color:#633}.debug-panel{display:flex;align-items:center;gap:8px}.debug-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #444;border-radius:6px;background:#2d2d2d;color:#ddd;font-size:12px;cursor:pointer;transition:all .2s}.debug-btn:hover{background:#383838}.debug-btn:disabled{opacity:.4;cursor:not-allowed}.debug-btn.start{border-color:#4caf50;color:#4caf50}.debug-btn.start:hover{background:#4caf5026}.debug-btn.stop{border-color:#f44336;color:#f44336}.debug-btn.stop:hover{background:#f4433626}.debug-btn.step{border-color:#ff9800;color:#ff9800}.debug-btn.step:hover{background:#ff980026}.debug-status{font-size:12px;color:#aaa;padding:0 8px}.logic-canvas .react-flow__controls{box-shadow:0 2px 8px #0006;border:1px solid #444;border-radius:6px;overflow:hidden}.logic-canvas .react-flow__controls-button{background:#2d2d2d;border-bottom:1px solid #444;fill:#ccc;color:#ccc}.logic-canvas .react-flow__controls-button:hover{background:#383838}.logic-canvas .react-flow__attribution{display:none}.code-preview{display:flex;flex-direction:column;height:100%;width:100%;max-height:none;background:#fff;min-height:0;overflow:hidden}.code-preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f5f5f5;border-bottom:1px solid #e0e0e0;gap:12px;flex-wrap:wrap;flex-shrink:0}.code-preview-tabs{display:flex;gap:4px;flex-wrap:wrap}.code-tab{padding:6px 12px;border:none;background:transparent;font-size:12px;color:#666;cursor:pointer;border-radius:4px;transition:all .15s;font-family:SF Mono,Monaco,Courier New,monospace}.code-tab:hover{background:#e8e8e8;color:#333}.code-tab.active{background:#2196f3;color:#fff}.code-preview-actions{display:flex;gap:8px;align-items:center}.code-version-select{padding:5px 8px;border:1px solid #ddd;background:#fff;font-size:12px;color:#555;border-radius:4px;cursor:pointer;outline:none}.code-version-select:hover{border-color:#ccc}.code-version-select:focus{border-color:#2196f3}.code-action-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid #ddd;background:#fff;font-size:12px;color:#555;cursor:pointer;border-radius:4px;transition:all .15s}.code-action-btn:hover{background:#f5f5f5;border-color:#ccc}.code-action-btn.primary{background:#2196f3;border-color:#2196f3;color:#fff}.code-action-btn.primary:hover{background:#1976d2;border-color:#1976d2}.code-preview-editor{flex:1 1 0;position:relative;overflow:hidden;min-height:0}.code-preview-editor-inner{position:absolute;inset:0}.code-preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fafafa;color:#999;font-size:14px}.code-preview-footer{padding:8px 12px;background:#f5f5f5;border-top:1px solid #e0e0e0;flex-shrink:0}.code-stats{font-size:11px;color:#888;font-family:SF Mono,Monaco,Courier New,monospace}.preview-panel{display:flex;flex-direction:column;height:100%;background:#fff}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.preview-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.preview-controls{display:flex;align-items:center;gap:8px}.preview-controls button{width:28px;height:28px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.preview-controls button:hover{background:#f0f0f0}.preview-controls span{font-size:12px;color:#666;min-width:40px;text-align:center}.preview-content{flex:1;overflow:auto;padding:20px;background:#e8e8e8;display:flex;align-items:flex-start;justify-content:center}.preview-canvas-wrapper{box-shadow:0 4px 16px #00000026}.preview-canvas-wrapper canvas{display:block;background:#fff}.preview-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f5f5f5;border-top:1px solid #e0e0e0;font-size:11px;color:#888;gap:12px}.preview-btn{width:28px;height:28px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.preview-btn:hover:not(:disabled){background:#e3f2fd;border-color:#2196f3}.preview-btn:disabled{opacity:.4;cursor:default}.preview-divider{width:1px;height:20px;background:#ddd;min-width:1px}.preview-pages{display:flex;gap:4px;flex-shrink:0}.preview-page-btn{padding:2px 10px;border:1px solid #ddd;background:#fff;border-radius:3px;font-size:11px;color:#666;cursor:pointer;transition:all .15s}.preview-page-btn:hover{background:#f0f0f0}.preview-page-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.wasm-preview{display:flex;flex-direction:column;height:100%;background:var(--bg-primary, #1e1e1e);color:var(--text-primary, #ccc)}.wasm-preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border-color, #333);background:var(--bg-secondary, #252526);flex-shrink:0}.wasm-preview-status{font-size:13px}.wasm-preview-status--ready{color:#4ec9b0}.wasm-preview-status--loading{color:#dcdcaa}.wasm-preview-status--error{color:#f44747}.wasm-preview-refresh{padding:4px 12px;border:1px solid var(--border-color, #555);border-radius:4px;background:var(--bg-secondary, #333);color:var(--text-primary, #ccc);cursor:pointer;font-size:13px}.wasm-preview-refresh:hover{background:var(--bg-hover, #444)}.wasm-preview-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px}.wasm-preview-iframe-wrapper{position:relative;border:1px solid var(--border-color, #555);box-shadow:0 2px 12px #0006;background:#000;flex-shrink:0}.wasm-preview-iframe{display:block;border:none;width:100%;height:100%}.wasm-preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;color:#dcdcaa;font-size:14px;z-index:1;pointer-events:none}.wasm-preview-overlay--error{color:#f44747;pointer-events:auto;cursor:default}.wasm-preview-footer{padding:6px 16px;font-size:12px;color:var(--text-secondary, #888);border-top:1px solid var(--border-color, #333);text-align:center;flex-shrink:0}.hierarchy-panel{display:flex;flex-direction:column;height:100%;background:#f8f9fa;color:#333;font-size:13px}.hierarchy-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background:#fff}.hierarchy-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.hierarchy-actions{display:flex;gap:4px}.hierarchy-btn{background:transparent;border:none;color:#888;cursor:pointer;padding:2px 6px;font-size:14px;border-radius:3px}.hierarchy-btn:hover{background:#e8e8e8;color:#333}.hierarchy-tree{flex:1;overflow-y:auto;padding:4px 0}.empty-message{padding:20px;text-align:center;color:#999;font-style:italic}.tree-node-wrapper{-webkit-user-select:none;user-select:none}.tree-node{display:flex;align-items:center;padding:4px 8px;cursor:pointer;border-radius:3px;margin:1px 4px;transition:background .1s}.tree-node:hover{background:#e8e8e8}.tree-node.selected{background:#d4e8fc}.tree-node.selected:hover{background:#c0dcf7}.tree-node.dragging{opacity:.5}.expand-btn{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#888;flex-shrink:0}.expand-btn.has-children{cursor:pointer}.expand-btn.has-children:hover{color:#333}.hierarchy-panel .type-icon{margin-right:6px;font-size:14px;flex-shrink:0}.node-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}.rename-input{flex:1;background:#fff;border:1px solid #2196F3;color:#333;padding:2px 4px;font-size:12px;border-radius:2px;outline:none}.status-icons{display:flex;gap:4px;margin-left:8px;opacity:0;transition:opacity .15s}.tree-node:hover .status-icons,.tree-node.selected .status-icons{opacity:1}.status-icon{font-size:12px;cursor:pointer;padding:2px;border-radius:2px;opacity:.6}.status-icon:hover{opacity:1;background:#e0e0e0}.status-icon.visibility.off{opacity:.3}.status-icon.lock.on{opacity:1;color:#e67e00}.tree-node.drag-over{border:1px dashed #2196F3}.hierarchy-tree::-webkit-scrollbar{width:8px}.hierarchy-tree::-webkit-scrollbar-track{background:#f0f0f0}.hierarchy-tree::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.hierarchy-tree::-webkit-scrollbar-thumb:hover{background:#bbb}.theme-selector{display:flex;align-items:center;gap:4px}.theme-selector-icon{font-size:14px}.theme-selector-select{background:var(--bg-secondary, #2a2a2a);color:var(--text-primary, #e0e0e0);border:1px solid var(--border-color, #444);border-radius:4px;padding:2px 6px;font-size:12px;cursor:pointer;outline:none}.theme-selector-select:hover{border-color:var(--accent-color, #4fc3f7)}.theme-selector-select:focus{border-color:var(--accent-color, #4fc3f7);box-shadow:0 0 0 1px var(--accent-color, #4fc3f7)}.image-manager{display:flex;flex-direction:column;height:100%;gap:12px}.resource-toolbar{display:flex;gap:8px;padding:8px;background:#f5f5f5;border-radius:6px}.upload-btn{padding:8px 16px;background:#4a90d9;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px;transition:background .2s}.upload-btn:hover:not(:disabled){background:#357abd}.upload-btn:disabled{background:#ccc;cursor:not-allowed}.image-list{flex:1;overflow-y:auto;padding:8px}.image-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;align-content:start}.image-list.list{display:flex;flex-direction:column;gap:8px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#888;text-align:center}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-hint{font-size:12px;color:#aaa}.image-list.grid .image-item{display:flex;flex-direction:column;background:#fff;border:2px solid #e0e0e0;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative}.image-list.grid .image-item:hover{border-color:#4a90d9;box-shadow:0 2px 8px #0000001a}.image-list.grid .image-item.selected{border-color:#4a90d9;background:#f0f7ff}.image-list.grid .image-preview{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:#f8f8f8;overflow:hidden}.image-list.grid .image-preview img{max-width:100%;max-height:100%;object-fit:contain}.image-list.grid .image-info{padding:8px;display:flex;flex-direction:column;gap:2px}.image-list.grid .image-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-list.grid .image-size{font-size:10px;color:#888}.image-list.list .image-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.image-list.list .image-item:hover{border-color:#4a90d9;background:#fafafa}.image-list.list .image-item.selected{border-color:#4a90d9;background:#f0f7ff}.image-list.list .image-preview{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f8f8f8;border-radius:4px;overflow:hidden}.image-list.list .image-preview img{max-width:100%;max-height:100%;object-fit:contain}.image-list.list .image-info{flex:1;min-width:0}.image-list.list .image-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.image-list.list .image-size{font-size:12px;color:#888}.delete-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;background:#ffffffe6;border:none;border-radius:4px;cursor:pointer;opacity:0;transition:opacity .2s;font-size:12px}.image-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:#f44;color:#fff}.image-list.list .delete-btn{position:static;opacity:1;background:transparent}.image-details{padding:12px;background:#f8f8f8;border-radius:8px;border:1px solid #e0e0e0}.image-details h4{margin:0 0 12px;font-size:14px;color:#333}.detail-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.detail-row label{width:80px;font-size:12px;color:#666;flex-shrink:0}.detail-row input,.detail-row select{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px}.detail-row input:focus,.detail-row select:focus{outline:none;border-color:#4a90d9}.detail-row span{font-size:12px;color:#333}.detail-actions{margin-top:12px;display:flex;gap:8px}.detail-actions button{padding:8px 12px;background:#4a90d9;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s}.detail-actions button:hover{background:#357abd}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 4px 24px #0003;max-width:90vw;max-height:90vh;display:flex;flex-direction:column}.code-modal{width:800px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0}.modal-header h3{margin:0;font-size:16px}.close-btn{width:32px;height:32px;padding:0;background:none;border:none;font-size:24px;cursor:pointer;color:#666;border-radius:4px}.close-btn:hover{background:#f0f0f0}.modal-body{flex:1;overflow:auto;padding:16px 20px}.code-options{display:flex;align-items:center;gap:12px;margin-bottom:12px}.code-options label{font-size:14px;color:#666}.code-options select{padding:6px 10px;border:1px solid #ddd;border-radius:4px}.code-options button{padding:6px 12px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;cursor:pointer}.code-options button:hover{background:#e0e0e0}.code-preview{background:#1e1e1e;color:#d4d4d4;padding:16px;border-radius:8px;font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.5;overflow:auto;max-height:400px;white-space:pre}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid #e0e0e0}.modal-footer button{padding:10px 20px;background:#4a90d9;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background .2s}.modal-footer button:hover{background:#357abd}.font-manager{display:flex;flex-direction:column;height:100%;gap:12px}.font-list{flex:1;overflow-y:auto;padding:8px}.font-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-content:start}.font-list.list{display:flex;flex-direction:column;gap:8px}.font-list.grid .font-item{display:flex;flex-direction:column;background:#fff;border:2px solid #e0e0e0;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative}.font-list.grid .font-item:hover{border-color:#4a90d9;box-shadow:0 2px 8px #0000001a}.font-list.grid .font-item.selected{border-color:#4a90d9;background:#f0f7ff}.font-list.grid .font-preview{width:100%;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f8f8,#e8e8e8)}.font-list.grid .preview-text{font-size:32px;color:#333}.font-list.grid .font-info{padding:8px;display:flex;flex-direction:column;gap:2px}.font-list.grid .font-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-list.grid .font-family{font-size:10px;color:#666}.font-list.grid .font-sizes{font-size:10px;color:#888}.font-list.list .font-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.font-list.list .font-item:hover{border-color:#4a90d9;background:#fafafa}.font-list.list .font-item.selected{border-color:#4a90d9;background:#f0f7ff}.font-list.list .font-preview{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f8f8,#e8e8e8);border-radius:6px}.font-list.list .preview-text{font-size:24px;color:#333}.font-list.list .font-info{flex:1;min-width:0}.font-list.list .font-name{font-size:14px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-list.list .font-family{font-size:12px;color:#666;display:block}.font-list.list .font-sizes{font-size:11px;color:#888;display:block}.font-list.list .delete-btn{position:static;opacity:1;background:transparent}.font-details{padding:12px;background:#f8f8f8;border-radius:8px;border:1px solid #e0e0e0;max-height:500px;overflow-y:auto}.font-details h4{margin:0 0 12px;font-size:14px;color:#333}.font-meta-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;padding:10px;background:#fff;border:1px solid #e8e8e8;border-radius:6px}.meta-item{display:flex;flex-direction:column;gap:2px}.meta-label{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:.5px}.meta-value{font-size:12px;color:#333;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpp-grid{display:flex;gap:6px;margin-bottom:4px}.bpp-hint{font-size:11px;color:#888}.preview-size-tag{display:inline-block;font-size:10px!important;color:#999;min-width:36px;font-family:system-ui,sans-serif!important}.template-copy-row{margin-top:8px;display:flex;justify-content:flex-end}.template-copy-row button{padding:6px 14px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px}.template-copy-row button:hover{background:#e0e0e0}.detail-section{margin-bottom:12px}.detail-section>label{display:block;font-size:12px;color:#666;margin-bottom:6px}.detail-section select{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:13px}.detail-section textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:12px;font-family:monospace;resize:vertical;box-sizing:border-box}.detail-section textarea:focus{outline:none;border-color:#4a90d9}.size-grid{display:flex;flex-wrap:wrap;gap:6px}.size-btn{min-width:36px;padding:6px 8px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s}.size-btn:hover{border-color:#4a90d9;background:#f0f7ff}.size-btn.active{background:#4a90d9;color:#fff;border-color:#4a90d9}.extract-btn{margin-top:6px;padding:6px 12px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px}.extract-btn:hover{background:#e0e0e0}.font-preview-section{margin-top:12px}.font-preview-section>label{display:block;font-size:12px;color:#666;margin-bottom:6px}.preview-box{background:#fff;border:1px solid #ddd;border-radius:6px;padding:12px;min-height:60px}.preview-box p{margin:0 0 8px;line-height:1.4;word-break:break-all}.preview-box p:last-child{margin-bottom:0}.command-modal{width:700px}.command-hint{font-size:13px;color:#666;margin:0 0 12px;line-height:1.6}.command-hint code{display:block;margin-top:8px;padding:8px 12px;background:#f0f0f0;border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:12px}.command-preview{background:#1e1e1e;color:#d4d4d4;padding:16px;border-radius:8px;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.icon-library{display:flex;flex-direction:column;height:100%;gap:12px}.icon-categories{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#f5f5f5;border-radius:6px}.category-btn{padding:6px 12px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px;color:#666;transition:all .2s}.category-btn:hover{border-color:#4a90d9;color:#4a90d9}.category-btn.active{background:#4a90d9;color:#fff;border-color:#4a90d9}.icon-grid{flex:1;overflow-y:auto;padding:8px}.icon-grid.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}.icon-grid.list{display:flex;flex-direction:column;gap:4px}.icon-grid.grid .icon-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;color:#555}.icon-grid.grid .icon-item:hover{border-color:#4a90d9;color:#4a90d9;transform:scale(1.05)}.icon-grid.grid .icon-item.selected{border-color:#4a90d9;background:#f0f7ff;color:#4a90d9}.icon-grid.list .icon-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s;color:#555}.icon-grid.list .icon-item:hover{border-color:#4a90d9;background:#fafafa}.icon-grid.list .icon-item.selected{border-color:#4a90d9;background:#f0f7ff;color:#4a90d9}.icon-grid.list .icon-name{font-size:13px;color:#333}.icon-grid.list .icon-item.selected .icon-name{color:#4a90d9}.icon-details{display:flex;align-items:center;gap:12px;padding:12px;background:#f8f8f8;border-radius:8px;border:1px solid #e0e0e0}.icon-preview-large{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;border:1px solid #ddd;color:#333}.icon-info{flex:1}.icon-info h4{margin:0 0 4px;font-size:14px;color:#333}.icon-category{font-size:12px;color:#888;text-transform:capitalize}.icon-actions{display:flex;flex-direction:column;gap:6px}.icon-actions button{padding:6px 12px;background:#4a90d9;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;transition:background .2s}.icon-actions button:hover{background:#357abd}.icon-grid .empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#888}.icon-grid .empty-icon{font-size:36px;margin-bottom:8px;opacity:.5}.resource-panel{display:flex;flex-direction:column;height:100%;background:#fafafa;border-left:1px solid #e0e0e0}.resource-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0}.resource-header h3{margin:0;font-size:15px;font-weight:600;color:#333}.view-toggle{display:flex;gap:2px;background:#f0f0f0;border-radius:4px;padding:2px}.view-toggle button{width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:3px;cursor:pointer;font-size:14px;color:#666;transition:all .2s}.view-toggle button:hover{background:#e0e0e0}.view-toggle button.active{background:#fff;color:#333;box-shadow:0 1px 2px #0000001a}.resource-tabs{display:flex;background:#fff;border-bottom:1px solid #e0e0e0;padding:0 8px}.tab-btn{display:flex;align-items:center;gap:6px;padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:13px;color:#666;transition:all .2s;margin-bottom:-1px}.tab-btn:hover{color:#333;background:#f5f5f5}.tab-btn.active{color:#4a90d9;border-bottom-color:#4a90d9}.tab-icon{font-size:14px}.tab-label{font-weight:500}.tab-count{background:#e0e0e0;color:#666;font-size:11px;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.tab-btn.active .tab-count{background:#4a90d9;color:#fff}.resource-search{padding:12px;background:#fff;border-bottom:1px solid #e0e0e0;position:relative}.resource-search input{width:100%;padding:8px 32px 8px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;box-sizing:border-box;transition:border-color .2s}.resource-search input:focus{outline:none;border-color:#4a90d9}.resource-search input::placeholder{color:#aaa}.clear-search{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;background:#ddd;border:none;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;color:#666}.clear-search:hover{background:#ccc}.resource-content{flex:1;overflow:hidden;padding:12px}.resource-content .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#888;text-align:center}.resource-content .empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.resource-content .empty-hint{font-size:12px;color:#aaa;margin-top:4px}.project-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#2a2a3e;border:1px solid #3a3a5c;border-radius:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative}.project-card:hover{border-color:#5c6bc0;box-shadow:0 2px 12px #5c6bc033}.project-card:focus-visible{outline:2px solid #5c6bc0;outline-offset:2px}.project-card-icon{font-size:36px;flex-shrink:0}.project-card-info{flex:1;min-width:0}.project-card-name{font-size:15px;font-weight:600;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-card-meta{font-size:12px;color:#888;margin-top:4px}.project-card-delete{position:absolute;top:8px;right:8px;background:none;border:none;font-size:16px;cursor:pointer;opacity:0;transition:opacity .15s;padding:4px;border-radius:4px}.project-card:hover .project-card-delete{opacity:.6}.project-card-delete:hover{opacity:1!important;background:#ff505026}.new-project-dialog{min-width:420px;max-width:520px}.new-project-title{padding:20px 24px 0;font-size:16px;font-weight:600;color:#e0e0e0}.new-project-body{padding:16px 24px;display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto}.npd-label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#aaa}.npd-input{padding:7px 10px;background:#1a1a2e;border:1px solid #3a3a5c;border-radius:6px;color:#e0e0e0;font-size:13px;outline:none;transition:border-color .15s}.npd-input:focus{border-color:#5c6bc0}.npd-select{padding:7px 10px;background:#1a1a2e;border:1px solid #3a3a5c;border-radius:6px;color:#e0e0e0;font-size:13px;outline:none;transition:border-color .15s}.npd-select:focus{border-color:#5c6bc0}.npd-row{display:flex;gap:12px}.npd-half{flex:1}.npd-section-title{font-size:13px;font-weight:600;color:#bbb;margin-top:8px;padding-bottom:4px;border-bottom:1px solid #3a3a5c}.npd-checkbox-label{flex-direction:row!important;align-items:center;gap:8px!important;cursor:pointer}.npd-checkbox-label input[type=checkbox]{accent-color:#5c6bc0;width:16px;height:16px}.project-list-page{height:100%;display:flex;flex-direction:column;background:#1a1a2e;color:#e0e0e0}.plp-header{height:56px;display:flex;align-items:center;padding:0 32px;border-bottom:1px solid #2a2a3e;flex-shrink:0}.plp-logo{display:flex;align-items:center;gap:10px}.plp-logo-icon{font-size:24px}.plp-logo-text{font-size:18px;font-weight:700;color:#fff}.plp-content{flex:1;overflow-y:auto;padding:32px;max-width:960px;width:100%;margin:0 auto}.plp-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:24px}.plp-search{flex:1;padding:9px 14px;background:#2a2a3e;border:1px solid #3a3a5c;border-radius:8px;color:#e0e0e0;font-size:14px;outline:none;transition:border-color .15s}.plp-search:focus{border-color:#5c6bc0}.plp-search::placeholder{color:#666}.plp-actions{display:flex;gap:8px;flex-shrink:0}.plp-btn{padding:9px 18px;border:1px solid #3a3a5c;border-radius:8px;background:#2a2a3e;color:#ccc;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}.plp-btn:hover{background:#3a3a5c;border-color:#5a5a7c}.plp-btn-primary{background:#5c6bc0;border-color:#5c6bc0;color:#fff}.plp-btn-primary:hover{background:#7986cb;border-color:#7986cb}.plp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.plp-empty{text-align:center;padding:80px 20px;color:#666;font-size:15px}.project-settings-dialog{min-width:420px;max-width:520px}.ps-title{padding:20px 24px 0;font-size:16px;font-weight:600;color:#e0e0e0}.ps-body{padding:16px 24px;display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{height:100%;display:flex;flex-direction:column;background:#f5f5f5}.app-header{height:48px;background:#1a1a2e;display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0}.app-logo{display:flex;align-items:center;gap:8px}.back-to-list-btn{background:none;border:none;color:#888;font-size:14px;cursor:pointer;padding:4px 6px;border-radius:4px;transition:color .15s,background .15s}.back-to-list-btn:hover{color:#fff;background:#ffffff1a}.logo-icon{font-size:20px}.logo-text{font-size:16px;font-weight:600;color:#fff}.project-name-display{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-tabs{display:flex;align-items:center;gap:4px;margin-left:16px}.tab-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#999;font-size:13px;font-weight:500;transition:all .15s}.tab-btn:hover{background:#ffffff1a;color:#ccc}.tab-btn.active{background:#2196f333;color:#6bb3ff}.app-toolbar{display:flex;align-items:center;gap:4px;margin-left:auto}.toolbar-button{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:#ccc;font-size:13px;transition:all .15s}.toolbar-button:hover{background:#ffffff1a;color:#fff}.toolbar-button.disabled{opacity:.5;cursor:not-allowed}.toolbar-button.active{background:#4a90d94d;color:#6bb3ff}.toolbar-icon{font-size:16px}.toolbar-label{font-size:13px}.toolbar-divider{width:1px;height:24px;background:#fff3;margin:0 8px}.app-body{flex:1;display:flex;overflow:hidden;min-height:0}.app-body.full-panel{background:#fff;display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.app-body.full-panel>*:only-child{flex:1;width:100%;height:100%;max-height:none;min-height:0}.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.left-panel{width:240px;min-width:200px;display:flex;flex-direction:column;border-right:1px solid #e0e0e0;background:#f8f9fa;overflow:hidden}.left-panel>*:first-child{flex:1;overflow-y:auto;min-height:0}.left-panel>*:last-child{flex:1;overflow-y:auto;min-height:0;border-top:1px solid #e0e0e0}.right-panel{width:280px;min-width:240px;display:flex;flex-direction:column;border-left:1px solid #e0e0e0;background:#f8f9fa;overflow:hidden}.right-panel>*:first-child{flex:1;overflow-y:auto;border-left:none}.resource-panel-container{width:320px;min-width:280px;max-width:400px;display:flex;flex-direction:column;background:#fafafa;overflow:hidden}.drag-overlay-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:2px solid #2196F3;border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:13px;pointer-events:none}.drag-overlay-icon{font-size:16px}.drag-overlay-name{color:#333;font-weight:500}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f0f0f0}::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bbb}::selection{background:#2196f3;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-sub-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color, #333);background:var(--bg-secondary, #252526);flex-shrink:0}.preview-sub-tab{padding:8px 20px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text-secondary, #888);cursor:pointer;font-size:13px;transition:color .15s,border-color .15s}.preview-sub-tab:hover{color:var(--text-primary, #ccc)}.preview-sub-tab.active{color:var(--text-primary, #fff);border-bottom-color:#4fc3f7}.preview-sub-content{flex:1;min-height:0;display:flex;flex-direction:column}.preview-sub-content>*{flex:1;min-height:0}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;color:#333;background:#f5f5f5}.dragging{-webkit-user-select:none;user-select:none}