.code-editor{flex:1;display:flex;flex-direction:column;background-color:#1e1e1e;color:#d4d4d4;font-family:Consolas,Monaco,Courier New,monospace;min-height:0;overflow:hidden}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#2d2d30;border-bottom:1px solid #3e3e42}.toolbar-group{display:flex;gap:8px}.toolbar-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;background-color:transparent;color:#ccc;border:1px solid transparent;border-radius:3px;font-size:12px;cursor:pointer;transition:all .2s ease}.toolbar-btn:hover{background-color:#3e3e42;border-color:#464647}.toolbar-btn:active{background-color:#094771}.toolbar-btn svg{opacity:.8}.toolbar-info{font-size:12px;color:#969696}.editor-wrapper{flex:1;display:flex;overflow:hidden;position:relative;background-color:#1e1e1e;min-height:0}.line-numbers{width:50px;padding:12px 0;background-color:#1e1e1e;color:#858585;text-align:right;-webkit-user-select:none;user-select:none;overflow-y:hidden;font-size:14px;line-height:22px}.line-number{padding-right:12px;height:22px}.editor-content{flex:1;position:relative;overflow:hidden;background-color:#1e1e1e;isolation:isolate}.syntax-highlight{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:12px;font-size:14px;line-height:22px;font-family:inherit;pointer-events:none;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;background-color:transparent;z-index:1;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.syntax-highlight::-webkit-scrollbar{display:none}.code-line{min-height:22px;line-height:22px;display:block;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;-webkit-user-select:none;user-select:none}.editor-textarea{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;padding:12px;margin:0;border:none;background-color:transparent;color:transparent;caret-color:#d4d4d4;font-size:14px;line-height:22px;font-family:inherit;resize:none;outline:none;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;z-index:2;-webkit-text-fill-color:transparent}.editor-textarea::selection{background-color:#264f78}.editor-textarea::-webkit-scrollbar,.line-numbers::-webkit-scrollbar{width:12px}.editor-textarea::-webkit-scrollbar-track{background-color:#1e1e1e}.editor-textarea::-webkit-scrollbar-thumb{background-color:#424242;border-radius:6px}.editor-textarea::-webkit-scrollbar-thumb:hover{background-color:#4f4f4f}.code-editor.light .editor-textarea::-webkit-scrollbar-track{background-color:#f6f8fa}.code-editor.light .editor-textarea::-webkit-scrollbar-thumb{background-color:#959da5;border-radius:6px}.code-editor.light .editor-textarea::-webkit-scrollbar-thumb:hover{background-color:#6a737d}.code-editor.light .line-numbers::-webkit-scrollbar-track{background-color:#f6f8fa}.code-editor.light .line-numbers::-webkit-scrollbar-thumb{background-color:#959da5;border-radius:6px}.syntax-highlight .keyword,.code-editor .keyword{color:#569cd6;font-weight:700}.syntax-highlight .function,.code-editor .function{color:#dcdcaa}.syntax-highlight .string,.code-editor .string{color:#ce9178}.syntax-highlight .identifier,.code-editor .identifier{color:#9cdcfe}.syntax-highlight .comment,.code-editor .comment{color:#6a9955;font-style:italic}.editor-textarea:placeholder-shown+.syntax-highlight{display:none}.editor-textarea::placeholder{color:#6e6e6e}.code-editor.light{background-color:#fff;color:#24292e}.code-editor.light .editor-toolbar{background-color:#f6f8fa;border-bottom-color:#e1e4e8}.code-editor.light .toolbar-btn{color:#24292e}.code-editor.light .toolbar-btn:hover{background-color:#f3f4f6;border-color:#d1d5da}.code-editor.light .toolbar-btn:active{background-color:#0366d6;color:#fff}.code-editor.light .toolbar-info{color:#586069}.code-editor.light .line-numbers{background-color:#f6f8fa;color:#959da5;border-right:1px solid #e1e4e8}.code-editor.light .editor-content{background-color:#fff}.code-editor.light .editor-textarea{color:transparent;caret-color:#24292e}.code-editor.light .editor-textarea::selection{background-color:#c8e1ff}.code-editor.light .syntax-highlight .keyword,.code-editor.light .keyword{color:#d73a49;font-weight:600}.code-editor.light .syntax-highlight .function,.code-editor.light .function{color:#6f42c1;font-weight:500}.code-editor.light .syntax-highlight .string,.code-editor.light .string{color:#032f62}.code-editor.light .syntax-highlight .identifier,.code-editor.light .identifier{color:#005cc5}.code-editor.light .syntax-highlight .comment,.code-editor.light .comment{color:#6a737d;font-style:italic}.monaco-editor-wrapper{display:flex;flex-direction:column;height:100%;width:100%}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:#2d2d30;border-bottom:1px solid #3e3e42;min-height:40px;flex-shrink:0}.editor-toolbar.light{background-color:#f8f8f8;border-bottom-color:#e5e5e5}.toolbar-actions{display:flex;gap:8px;align-items:center}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background-color:#3c3c3c;color:#ccc;border:1px solid #464647;border-radius:4px;font-size:13px;cursor:pointer;transition:all .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.light .toolbar-btn{background-color:#fff;color:#333;border-color:#d4d4d4}.toolbar-btn:hover{background-color:#4a4a4d;border-color:#5a5a5d}.light .toolbar-btn:hover{background-color:#f0f0f0;border-color:#b8b8b8}.toolbar-btn:active{transform:translateY(1px)}.toolbar-btn svg{width:16px;height:16px}.toolbar-info{font-size:12px;color:#969696;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.light .toolbar-info{color:#6e6e6e}.copy-status{font-size:12px;color:#4caf50;margin-left:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.monaco-container{flex:1;min-height:0;overflow:hidden}.diagram-viewer-container{flex:1;position:relative;overflow:hidden;background-color:#1e1e1e;transition:background-color .3s ease}.diagram-viewer-container.light{background-color:#fff}.diagram-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.diagram-error{padding:20px;color:#f48771;background-color:#5a1d1d;border:1px solid #914141;border-radius:4px;margin:20px}.diagram-error h3{margin-bottom:10px;font-size:14px;font-weight:600}.diagram-error pre{font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;white-space:pre-wrap;word-wrap:break-word;color:#ccc}.light .diagram-error{color:#d73a49;background-color:#ffeef0;border-color:#f97583}.light .diagram-error pre{color:#24292e}.typing-indicator{position:absolute;top:16px;right:16px;background-color:#007acce6;color:#fff;padding:8px 16px;border-radius:4px;font-size:13px;animation:pulse 1.5s ease-in-out infinite;z-index:10}.light .typing-indicator{background-color:#0066cce6}.diagram-content svg text[textLength]{text-length:auto!important}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}.loading-spinner .spinner{width:40px;height:40px;margin:0 auto 12px;border:3px solid rgba(0,122,204,.2);border-radius:50%;border-top-color:#007acc;animation:spin .8s ease-in-out infinite}.loading-spinner span{color:#969696;font-size:14px}.light .loading-spinner .spinner{border-color:#06c3;border-top-color:#06c}.light .loading-spinner span{color:#666}@keyframes spin{to{transform:rotate(360deg)}}.diagram-viewer-container:not(.light) .edgeLabel text,.diagram-viewer-container:not(.light) .edgeLabel tspan{fill:#ccc!important}.diagram-viewer-container.light .edgeLabel text,.diagram-viewer-container.light .edgeLabel tspan{fill:#333!important}.diagram-viewer-container:not(.light) .edgeLabel rect{fill:#2a2a2a!important;fill-opacity:.9!important}.diagram-viewer-container.light .edgeLabel rect{fill:#fff!important;fill-opacity:.8!important}.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px;background-color:#2d2d30f2;padding:8px 12px;border-radius:6px;box-shadow:0 2px 8px #0000004d;z-index:10}.light .zoom-controls{background-color:#fffffff2;box-shadow:0 2px 8px #0000001a}.zoom-btn{min-width:32px;height:32px;padding:0 8px;display:flex;align-items:center;justify-content:center;background-color:#3c3c3c;color:#ccc;border:1px solid #464647;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;white-space:nowrap}.zoom-btn:hover{background-color:#4a4a4a;transform:translateY(-1px)}.zoom-btn:active{background-color:#094771;transform:translateY(0)}.light .zoom-btn{background-color:#f6f8fa;color:#24292e;border-color:#d1d5da}.light .zoom-btn:hover{background-color:#e9ecef}.light .zoom-btn:active{background-color:#0366d6;color:#fff}.zoom-level{min-width:50px;text-align:center;font-size:13px;color:#969696;font-weight:500}.light .zoom-level{color:#586069}.diagram-content svg{width:100%;height:100%;cursor:grab;touch-action:none}.diagram-content svg.dragging{cursor:grabbing}.c4-element{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c4-element.dragging{opacity:.9}.c4-element-label{font-size:16px;font-weight:700;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c4-element-type{font-size:12px;font-style:italic;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c4-element-tech{font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c4-element-description{font-size:11px;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}.c4-person-shape>rect{fill:inherit;stroke:inherit}.c4-person-shape circle,.c4-person-shape path{fill:#fff;stroke:none}.c4-cylinder-shape ellipse{fill:inherit;stroke:inherit}.c4-cylinder-shape rect{fill:inherit;stroke:none}.c4-cylinder-shape ellipse:last-child{fill:inherit;stroke:inherit}.c4-queue-shape line{stroke:inherit}.c4-relationship{pointer-events:none}.relationship-line{transition:stroke-width .2s ease}.relationship-line:hover{stroke-width:3}.relationship-label-background{fill:#2a2a2a;opacity:.9}.light .relationship-label-background{fill:#fff;opacity:.8}.relationship-label{font-size:12px;fill:#fff;pointer-events:auto;cursor:default}.light .relationship-label{fill:#333}.relationship-technology{font-size:10px;fill:#ccc;font-style:italic}.light .relationship-technology{fill:#666}.c4-boundary-draggable{cursor:default}.c4-boundary-draggable .boundary-body{transition:stroke-width .2s ease,opacity .2s ease}.c4-boundary-draggable .boundary-body:hover{stroke-width:3;opacity:.8}.c4-boundary-draggable.dragging .boundary-body,.c4-boundary-draggable.resizing .boundary-body{opacity:.6;stroke-width:3}.resize-handle{fill:#fff;stroke:#1168bd;stroke-width:2;cursor:pointer;opacity:.8;transition:all .2s ease}.resize-handle:hover{fill:#1168bd;stroke:#0952a5;opacity:1;transform:scale(1.2)}.resize-handle.active{fill:#0952a5;stroke:#073f8c;opacity:1;transform:scale(1.3)}.resize-handle.top-left,.resize-handle.bottom-right{cursor:nwse-resize}.resize-handle.top-right,.resize-handle.bottom-left{cursor:nesw-resize}.resize-handle.top,.resize-handle.bottom{cursor:ns-resize}.resize-handle.left,.resize-handle.right{cursor:ew-resize}.c4-boundary-draggable .boundary-label{font-family:var(--font-family);font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none;pointer-events:none}.dark .c4-boundary-draggable .boundary-label{fill:#ccc}.light .c4-boundary-draggable .boundary-label{fill:#333}.dark .resize-handle{fill:#2d2d30;stroke:#007acc}.dark .resize-handle:hover{fill:#007acc;stroke:#005a9e}.dark .resize-handle.active{fill:#005a9e;stroke:#003d6b}.c4-canvas{width:100%;height:100%;background-color:#1e1e1e;display:block;transition:background-color .3s ease}.light .c4-canvas{background-color:#fff}.canvas-background{cursor:default;fill:url(#grid);opacity:.3}.c4-boundary{pointer-events:none}.boundary-label{font-size:14px;font-weight:600;font-style:italic;fill:#666;pointer-events:none;-webkit-user-select:none;user-select:none}.light .boundary-label{fill:#444}.mode-indicator{font-size:12px;fill:#969696;font-weight:400;opacity:.8}.light .mode-indicator{fill:#586069}.zoom-indicator{font-size:12px;fill:#969696;font-weight:400;opacity:.8}.light .zoom-indicator{fill:#586069}.status-indicators{pointer-events:none}.c4-element.dragging{filter:drop-shadow(8px 8px 16px rgba(0,0,0,.5)) brightness(1.1);transform:scale(1.05);z-index:1000}.overlap-help-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.overlap-help-modal{background-color:#2d2d30;border:1px solid #3e3e42;border-radius:8px;width:90%;max-width:800px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.light .overlap-help-modal{background-color:#fff;border-color:#e1e4e8;box-shadow:0 4px 20px #0000001a}.overlap-help-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #3e3e42;background-color:#1e1e1e}.light .overlap-help-header{background-color:#f8f9fa;border-color:#e1e4e8}.overlap-help-header h2{margin:0;font-size:18px;font-weight:500;color:#ccc}.light .overlap-help-header h2{color:#24292e}.close-button{background:none;border:none;font-size:24px;cursor:pointer;color:#969696;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.close-button:hover{background-color:#3e3e42;color:#ccc}.light .close-button:hover{background-color:#e1e4e8;color:#24292e}.overlap-help-content{flex:1;overflow-y:auto;padding:20px;color:#ccc}.light .overlap-help-content{color:#24292e}.overlap-help-content section{margin-bottom:24px}.overlap-help-content h3{font-size:16px;font-weight:500;margin-bottom:12px;color:#007acc}.light .overlap-help-content h3{color:#0366d6}.overlap-help-content p{line-height:1.6;margin-bottom:12px}.overlap-help-content ul{margin-left:20px;line-height:1.8}.overlap-help-content code{background-color:#3e3e42;padding:2px 6px;border-radius:3px;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;color:#d4d4d4}.light .overlap-help-content code{background-color:#f3f4f6;color:#24292e}.code-example{background-color:#1e1e1e;border:1px solid #3e3e42;border-radius:4px;padding:12px;margin:8px 0;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow-x:auto;color:#d4d4d4}.light .code-example{background-color:#f6f8fa;border-color:#e1e4e8;color:#24292e}.example-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}.example-before,.example-after{flex:1}.example-before h4,.example-after h4{font-size:14px;margin-bottom:8px;color:#969696}.light .example-before h4,.light .example-after h4{color:#586069}.example-after h4{color:#4caf50}.light .example-after h4{color:#28a745}@media (max-width: 600px){.example-comparison{grid-template-columns:1fr}}[id*=mermaidError],.mermaidTooltip,div[style*="position: absolute"][style*=bottom],body>div:last-child[style*="position: absolute"]{display:none!important}div[style*="text-align: center"][style*="color: red"]{display:none!important}.app{display:flex;flex-direction:column;height:100vh;background-color:#1e1e1e;transition:background-color .3s ease}.app.light{background-color:#f3f3f3}.main-content{display:flex;flex:1;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background-color:#2d2d30;border-bottom:1px solid #3e3e42}.app.light .app-header{background-color:#f6f8fa;border-bottom-color:#e1e4e8}.header-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;color:#ccc}.app.light .header-title{color:#24292e}.header-icon{width:28px;height:28px;color:#0098ff}.panel{display:flex;flex-direction:column;background-color:#1e1e1e;border:1px solid #3e3e42;margin:0;overflow:hidden;transition:all .3s ease}.light .panel{background-color:#fff;border-color:#e1e4e8}.editor-pane{min-width:200px;display:flex;flex-direction:column;background-color:#1e1e1e;overflow:hidden;position:relative;flex-shrink:0}.light .editor-pane{background-color:#fff;border-color:#e1e4e8}.diagram-panel{min-width:200px;background-color:#1e1e1e;display:flex;flex-direction:column;border:1px solid #3e3e42;overflow:hidden;flex-shrink:0}.light .diagram-panel{background-color:#fff;border-color:#e1e4e8}.panel-header{display:flex;flex-direction:column;border-bottom:1px solid #3e3e42;background-color:#2d2d30}.header-row-1{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:12px;min-height:40px;overflow-x:auto}.header-row-1 h2{flex-shrink:0;margin-right:12px}.header-row-2{display:flex;justify-content:center;align-items:center;padding:8px 16px;background-color:#252526;border-top:1px solid #3e3e42;min-height:40px}.light .header-row-2{background-color:#f0f0f0;border-top-color:#e1e4e8}.header-row-1 h2{font-size:13px;font-weight:500;color:#ccc;text-transform:uppercase;letter-spacing:.5px;margin:0;white-space:nowrap;flex-shrink:0}.light .header-row-1 h2{color:#586069}.header-controls{display:flex;align-items:center;gap:12px}.editor-panel-header{flex-direction:row!important;justify-content:space-between;align-items:center;padding:10px 16px}.editor-panel-header h2{font-size:13px;font-weight:500;color:#ccc;text-transform:uppercase;letter-spacing:.5px;margin:0}.light .editor-panel-header h2{color:#586069}.auto-save-indicator{font-size:12px;color:#4caf50;opacity:.8;transition:opacity .3s ease}.light .auto-save-indicator{color:#2e7d32}.clear-storage-btn{background:none;border:none;font-size:18px;cursor:pointer;opacity:.6;transition:opacity .2s ease;padding:4px}.clear-storage-btn:hover{opacity:1}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;justify-content:flex-end;overflow:hidden}.mode-btn{padding:8px 12px;border:1px solid #3e3e42;background-color:#2d2d30;color:#ccc;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;min-height:32px;transition:all .2s ease;white-space:nowrap}.light .mode-btn{border-color:#e1e4e8;background-color:#fff;color:#24292e}.mode-btn:hover{background-color:#3e3e42;border-color:#464647}.light .mode-btn:hover{background-color:#f3f4f6;border-color:#d1d5da}.mode-btn.active{background-color:#06c;color:#fff;border-color:#06c}.drag-type-select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer;margin-left:8px}.view-mode-selector,.mode-selector{display:flex;gap:4px;flex-shrink:0}.view-btn{padding:8px 12px;border:1px solid #3e3e42;background-color:#2d2d30;color:#ccc;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;min-height:32px;transition:all .2s ease;white-space:nowrap}.light .view-btn{border-color:#e1e4e8;background-color:#fff;color:#24292e}.view-btn:hover{background-color:#3e3e42;border-color:#464647}.light .view-btn:hover{background-color:#f3f4f6;border-color:#d1d5da}.view-btn.active{background-color:#16825d;color:#fff;border-color:#16825d}.custom-view-container{flex:1;display:flex;flex-direction:column;position:relative;height:100%;min-height:0;overflow:hidden}.parse-error{color:#d32f2f;font-size:16px;padding:20px;text-align:center}.loading{color:#666;font-size:16px;padding:20px;text-align:center}.loading-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}.loading-container p{margin-top:20px;color:#969696;font-size:14px}.light .loading-container p{color:#586069}.help-text{margin:0;padding:8px 16px 16px;background-color:#1e1e1e;border-top:1px solid #3e3e42;font-size:12px;color:#969696;line-height:1.4;flex-shrink:0;min-height:32px;box-sizing:border-box}.help-text strong{color:#ccc}.export-controls{display:flex;gap:8px;flex-shrink:0}.c4-canvas-error{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:16px}.export-btn,.sync-btn{padding:8px 16px;border:1px solid #3e3e42;background-color:#2d2d30;color:#ccc;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;min-height:32px;transition:all .2s ease;white-space:nowrap}.light .export-btn,.light .sync-btn{border-color:#e1e4e8;background-color:#fff;color:#24292e}.export-btn:hover:not(:disabled){background-color:#3e3e42;border-color:#464647}.light .export-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#d1d5da}.export-btn:disabled,.sync-btn:disabled,.auto-layout-btn:disabled{opacity:.5;cursor:not-allowed;background-color:#2d2d30}.sync-btn{background-color:#2d2d30;color:#ccc;border-color:#3e3e42}.sync-btn:hover{background-color:#c27d1a;color:#fff;border-color:#c27d1a}.auto-layout-container{display:flex;align-items:center;gap:10px;flex-shrink:0}.auto-layout-btn{padding:8px 12px;background-color:#16825d;color:#fff;border:1px solid #16825d;border-radius:4px;font-size:13px;line-height:1;min-height:32px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.auto-layout-btn:hover:not(:disabled){background-color:#1ea068;border-color:#1ea068;transform:translateY(-1px);box-shadow:0 2px 4px #0003}.auto-layout-btn.processing{background-color:#4b5563;border-color:#4b5563;cursor:wait;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}.auto-layout-complete{color:#10b981;font-size:13px;font-weight:600;white-space:nowrap;min-width:150px;text-align:left;opacity:0;transition:opacity .3s ease-in-out}.auto-layout-complete.visible{opacity:1;animation:fadeInOut .3s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.diagram-panel.layout-complete{animation:highlightComplete .6s ease-out}@keyframes highlightComplete{0%{box-shadow:none}50%{box-shadow:0 0 20px #10b98180,inset 0 0 20px #10b9811a}to{box-shadow:none}}.light .diagram-panel.layout-complete{animation:highlightCompleteLight .6s ease-out}@keyframes highlightCompleteLight{0%{box-shadow:none}50%{box-shadow:0 0 20px #05966980,inset 0 0 20px #0596691a}to{box-shadow:none}}.light .auto-layout-btn{background-color:#28a745;border-color:#28a745}.light .auto-layout-btn:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.light .auto-layout-btn.processing{background-color:#6b7280;border-color:#6b7280}.light .auto-layout-complete{color:#059669}.mode-btn.conservative{background-color:#059669;color:#fff;border-color:#059669}.light .mode-btn.conservative{background-color:#10b981;color:#fff;border-color:#10b981}.mode-btn.conservative:hover{background-color:#047857;border-color:#047857}.light .mode-btn.conservative:hover{background-color:#059669;border-color:#059669}.example-selector{display:flex;gap:8px;padding:12px 16px;background-color:#2d2d30;border-bottom:1px solid #3e3e42;align-items:center;justify-content:space-between}.toolbar-right{display:flex;gap:8px;align-items:center;margin-left:auto}.light .example-selector{background-color:#f8f9fa;border-color:#e1e4e8}.category-select,.example-select{min-width:150px;max-width:220px;padding:8px 12px;border:1px solid #3e3e42;background-color:#3c3c3c;color:#ccc;border-radius:4px;font-size:13px;line-height:1;min-height:32px;cursor:pointer;transition:all .2s ease}.category-select{min-width:120px;max-width:150px}.light .category-select,.light .example-select{border-color:#d1d5da;background-color:#fff;color:#24292e}.category-select:hover,.example-select:hover{border-color:#007acc}.category-select:focus,.example-select:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px #007acc33}.import-btn{padding:8px 16px;border:1px solid #007ACC;background-color:#007acc;color:#fff;border-radius:4px;font-size:13px;line-height:1;min-height:32px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.import-btn:hover{background-color:#005a9e;border-color:#005a9e}.import-btn:active{transform:scale(.98)}.re-render-btn{padding:8px 16px;background-color:#6c757d;color:#fff;border:1px solid #6c757d;border-radius:4px;cursor:pointer;font-size:13px;line-height:1;min-height:32px;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.re-render-btn:hover{background-color:#5a6268;border-color:#5a6268;transform:translateY(-1px)}.re-render-btn:active{background-color:#495057;border-color:#495057;transform:translateY(0)}.re-render-btn.has-error{background-color:#dc3545;border-color:#dc3545;box-shadow:0 0 0 2px #dc354533;animation:pulse-error 2s infinite}.re-render-btn.has-error:hover{background-color:#c82333;border-color:#bd2130}.re-render-btn.has-error:active{background-color:#bd2130;border-color:#b21f2d}@keyframes pulse-error{0%{box-shadow:0 0 0 2px #dc354533}50%{box-shadow:0 0 0 4px #dc35451a}to{box-shadow:0 0 0 2px #dc354533}}.light .re-render-btn{background-color:#6c757d;border-color:#6c757d;color:#fff}.light .re-render-btn:hover{background-color:#5a6268;border-color:#5a6268}.light .re-render-btn:active{background-color:#495057;border-color:#495057}.light .re-render-btn.has-error{background-color:#dc3545;border-color:#dc3545}.light .re-render-btn.has-error:hover{background-color:#c82333;border-color:#bd2130}.help-btn{padding:8px 16px;border:1px solid #969696;background-color:#3c3c3c;color:#ccc;border-radius:4px;font-size:13px;line-height:1;min-height:32px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.light .help-btn{border-color:#d1d5da;background-color:#fff;color:#24292e}.help-btn:hover{background-color:#4a4a4d;border-color:#007acc}.light .help-btn:hover{background-color:#f3f4f6;border-color:#0366d6}.help-btn:active{transform:scale(.98)}.theme-toggle,.monaco-toggle{padding:8px 16px;background-color:#2d2d30;color:#ccc;border:1px solid #3e3e42;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:13px;line-height:1;min-height:32px;display:inline-flex;align-items:center;justify-content:center;font-weight:400}.theme-toggle.secondary-btn,.monaco-toggle.secondary-btn{background-color:transparent}.app.light .theme-toggle,.app.light .monaco-toggle{background-color:#f6f8fa;color:#24292e;border-color:#e1e4e8}.app.light .theme-toggle:hover,.app.light .monaco-toggle:hover{background-color:#f3f4f6;border-color:#d1d5da}.theme-toggle:hover,.monaco-toggle:hover{background-color:#3e3e42;border-color:#464647}.theme-toggle:active,.monaco-toggle:active{transform:scale(.98)}.splitter{width:4px;background-color:#3e3e42;cursor:col-resize;position:relative;flex-shrink:0;transition:background-color .2s ease}.splitter:hover,.splitter.resizing{background-color:#007acc}.light .splitter{background-color:#e1e4e8}.light .splitter:hover,.light .splitter.resizing{background-color:#0366d6}body.resizing{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:col-resize}.diagram-panel .diagram-viewer-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.light .panel-header{background-color:#f6f8fa;border-bottom-color:#e1e4e8}.light .panel-header h2{color:#24292e}.light .mode-btn,.light .view-btn,.light .export-btn,.light .sync-btn{background-color:#fafbfc;border-color:#d1d5da;color:#24292e}.light .mode-btn:hover,.light .view-btn:hover,.light .export-btn:hover{background-color:#f3f4f6;border-color:#c6cbd1}.light .mode-btn.active{background-color:#0366d6;color:#fff;border-color:#0366d6}.light .view-btn.active{background-color:#28a745;color:#fff;border-color:#28a745}.light .sync-btn:hover{background-color:#fb8500;color:#fff;border-color:#fb8500}.light .help-text{background-color:#f6f8fa;border-top-color:#e1e4e8;color:#586069}.light .help-text strong{color:#24292e}.light .diagram-panel,.light .custom-view-container{background-color:#fff}.theme-toggle{padding:4px 8px;background-color:transparent;border:1px solid #3e3e42;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s ease}.theme-toggle:hover{background-color:#3e3e42}.light .theme-toggle{border-color:#d1d5da}.light .theme-toggle:hover{background-color:#f3f4f6}html,body,#root{box-sizing:border-box;margin:0;padding:0}*,*:before,*:after{box-sizing:border-box}.monaco-editor,.monaco-editor *,.monaco-editor *:before,.monaco-editor *:after,.monaco-code-editor,.monaco-code-editor *,.editor-container,.editor-container *,.monaco-wrapper,.monaco-wrapper *{box-sizing:content-box!important}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;background-color:#1e1e1e;color:#ccc}#root{width:100vw;height:100vh;overflow:hidden}.app.dark ::-webkit-scrollbar{width:12px;height:12px}.app.dark ::-webkit-scrollbar-track{background-color:#1e1e1e}.app.dark ::-webkit-scrollbar-thumb{background-color:#424242;border-radius:6px}.app.dark ::-webkit-scrollbar-thumb:hover{background-color:#4f4f4f}.app.light ::-webkit-scrollbar{width:12px;height:12px}.app.light ::-webkit-scrollbar-track{background-color:#f6f8fa}.app.light ::-webkit-scrollbar-thumb{background-color:#959da5;border-radius:6px}.app.light ::-webkit-scrollbar-thumb:hover{background-color:#6a737d}::selection{background-color:#264f78;color:#fff}