.mermaid-diagram-page[data-v-4998c9c9]{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f7fa}.header[data-v-4998c9c9]{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);border-bottom:1px solid #ebeef5;position:sticky;top:0;z-index:10}.logo[data-v-4998c9c9]{display:flex;align-items:center;gap:16px}.back-link[data-v-4998c9c9]{font-size:14px;color:#606266;text-decoration:none;display:flex;align-items:center;gap:4px}.back-link[data-v-4998c9c9]:hover{color:#409eff}.title[data-v-4998c9c9]{font-size:20px;font-weight:700;color:#303133;margin:0}.subtitle[data-v-4998c9c9]{font-size:14px;color:#67c23a;margin-left:8px}.main-container[data-v-4998c9c9]{display:flex;flex:1;padding:20px;gap:20px;max-height:calc(100vh - 60px);overflow:hidden}.left-panel[data-v-4998c9c9]{width:40%;display:flex;flex-direction:column;gap:20px;overflow-y:auto;padding-right:10px;max-height:100%;min-height:0}.section-title[data-v-4998c9c9]{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:16px;font-weight:700;color:#303133}.diagram-engine-selector[data-v-4998c9c9]{margin-left:20px}.diagram-engine-selector .el-radio-group[data-v-4998c9c9]{font-size:11px}.diagram-engine-selector .el-radio-button__inner[data-v-4998c9c9]{padding:4px 8px;font-size:11px;height:24px;line-height:16px;border-radius:3px;border:1px solid #dcdfe6;background-color:#fff;color:#606266;transition:all .3s}.diagram-engine-selector .el-radio-button__inner[data-v-4998c9c9]:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.diagram-engine-selector .el-radio-button:first-child .el-radio-button__inner[data-v-4998c9c9]{border-left:1px solid #dcdfe6;border-radius:3px 0 0 3px}.diagram-engine-selector .el-radio-button:last-child .el-radio-button__inner[data-v-4998c9c9]{border-radius:0 3px 3px 0}.diagram-engine-selector .el-radio-button.is-active .el-radio-button__inner[data-v-4998c9c9]{background-color:#409eff;border-color:#409eff;color:#fff;box-shadow:0 1px 2px rgba(64,158,255,.3)}.diagram-engine-selector .el-radio-button.is-active .el-radio-button__inner[data-v-4998c9c9]:hover{background-color:#66b1ff;border-color:#66b1ff}.diagram-type-selector[data-v-4998c9c9]{background-color:#fff;padding:20px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1)}.diagram-type-select[data-v-4998c9c9]{width:100%;margin-top:10px}.ai-generation-section[data-v-4998c9c9]{background-color:#fff;padding:20px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1)}.ai-input[data-v-4998c9c9]{margin-top:10px}.ai-actions[data-v-4998c9c9]{margin-top:10px;display:flex;justify-content:center}.code-editor-section[data-v-4998c9c9]{background-color:#fff;padding:20px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1);flex:1;display:flex;flex-direction:column}.code-actions[data-v-4998c9c9]{display:flex;gap:10px}.code-editor[data-v-4998c9c9]{margin-top:10px;flex:1}.code-editor[data-v-4998c9c9] .el-textarea__inner{font-family:Courier New,monospace;font-size:14px;line-height:1.5}.right-panel[data-v-4998c9c9]{width:60%;background-color:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1);display:flex;flex-direction:column;max-height:100%;overflow:hidden}.preview-header[data-v-4998c9c9]{padding:15px 20px;border-bottom:1px solid #ebeef5;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;color:#303133;background-color:#fff;position:sticky;top:0;z-index:5;flex-shrink:0}.preview-actions[data-v-4998c9c9]{display:flex;gap:10px}.diagram-container[data-v-4998c9c9]{flex:1;overflow:auto;padding:20px;display:flex;justify-content:center;align-items:flex-start;position:relative;min-height:0}.empty-diagram[data-v-4998c9c9]{text-align:center;color:#909399}.empty-diagram i[data-v-4998c9c9]{font-size:48px;margin-bottom:10px}.error-diagram[data-v-4998c9c9]{text-align:center;color:#f56c6c}.error-diagram i[data-v-4998c9c9]{font-size:48px;margin-bottom:10px}.diagram-rendered[data-v-4998c9c9]{width:100%;min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding:10px 0}.diagram-rendered[data-v-4998c9c9] svg,.diagram-rendered img[data-v-4998c9c9]{max-width:100%;height:auto;display:block}.generation-progress[data-v-4998c9c9]{text-align:center;padding:20px 0}.progress-icon[data-v-4998c9c9]{font-size:40px;color:#409eff;margin-bottom:20px}.progress-message[data-v-4998c9c9]{margin-top:15px;color:#606266}.websocket-status[data-v-4998c9c9]{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}.status-indicator[data-v-4998c9c9]{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 12px;border-radius:12px;background:rgba(245,108,108,.1);color:#f56c6c;transition:all .3s}.status-indicator.connected[data-v-4998c9c9]{background:rgba(103,194,58,.1);color:#67c23a}.status-indicator.disconnected[data-v-4998c9c9]{color:#f56c6c}.reconnect-btn[data-v-4998c9c9]{color:#409eff;font-size:12px;padding:2px 6px}.status-tip[data-v-4998c9c9]{font-size:12px;color:#909399;display:flex;align-items:center;gap:4px}.diagram-rendered[data-v-4998c9c9] text{cursor:text;transition:background-color .2s}.diagram-rendered[data-v-4998c9c9] text:hover{fill:#409eff}.diagram-rendered[data-v-4998c9c9] text[contenteditable=true]:focus{outline:none;background-color:rgba(64,158,255,.1)}@media (max-width:992px){.main-container[data-v-4998c9c9]{flex-direction:column}.left-panel[data-v-4998c9c9],.right-panel[data-v-4998c9c9]{width:100%;max-height:none}.left-panel[data-v-4998c9c9]{max-height:none;overflow:visible}.right-panel[data-v-4998c9c9]{height:500px}}@media (max-width:768px){.header[data-v-4998c9c9]{padding:0 15px;height:50px}.title[data-v-4998c9c9]{font-size:18px}.subtitle[data-v-4998c9c9]{font-size:12px}.main-container[data-v-4998c9c9]{padding:10px}.code-actions[data-v-4998c9c9]{flex-wrap:wrap}}.diagram-tags[data-v-4998c9c9]{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.diagram-tag[data-v-4998c9c9]{cursor:pointer;margin-right:5px;margin-bottom:5px;transition:all .3s}.diagram-tag[data-v-4998c9c9]:hover{transform:translateY(-2px)}