html,body,#root{height:100%;width:100%}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary: #2D5A27;--primary-hover: #1E3D1A;--primary-light: #4A8F42;--accent: #8B5A2B;--bg-primary: #FFFFFF;--bg-secondary: #F5F5F5;--bg-surface: #FAFAFA;--bg-hover: #E8E8E8;--text-primary: #1A1A1A;--text-secondary: #666666;--text-muted: #AAAAAA;--border-color: #D0D0D0;--border-light: #E0E0E0;--border-radius: 4px;--code-bg: #FAFAFA;--code-text: #1A1A1A;--success: #4CAF50;--warning: #FF9800;--danger: #EF5350}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei UI,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.header-left{display:flex;align-items:center;gap:12px}.header-left h1{font-size:20px;font-weight:600;color:var(--primary)}.header-left .subtitle{font-size:14px;color:var(--text-secondary);margin-left:8px}.header-right{display:flex;align-items:center;gap:12px}.char-count{font-size:13px;color:var(--text-secondary);padding:6px 12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius)}.char-count.over-limit{color:var(--danger);border-color:var(--danger)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;background:var(--bg-primary);color:var(--text-primary)}.btn:hover{background:var(--bg-secondary);border-color:var(--primary)}.btn:active{background:var(--bg-hover)}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn-secondary{background:var(--bg-primary);color:var(--text-primary)}.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger:hover{background:#e53935;border-color:#e53935}.btn-small{padding:6px 12px;font-size:13px}.btn-full{width:100%;justify-content:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.btn-icon:hover{background:var(--bg-secondary);border-color:var(--primary);color:var(--text-primary)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-icon-danger:hover{background:#ef53501a;border-color:var(--danger);color:var(--danger)}.main-content{display:flex;flex:1;overflow:hidden}.mode-tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 24px}.mode-tab{padding:12px 24px;font-size:14px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.mode-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.mode-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.content-area{flex:1;display:flex;overflow:hidden;min-height:0}.sidebar{width:320px;background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-shrink:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}.sidebar-scroll{flex:1;overflow-y:auto;padding:16px;min-height:0}.sidebar-scroll::-webkit-scrollbar{width:8px}.sidebar-scroll::-webkit-scrollbar-track{background:var(--bg-primary)}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.sidebar-section{margin-bottom:16px;padding:12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius)}.sidebar-section:last-child{margin-bottom:0}.section-header{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}.label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.sublabel{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:4px}.input,.select{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);font-size:14px;transition:border-color .2s ease}.input:focus,.select:focus{outline:none;border-color:var(--primary)}.input::placeholder{color:var(--text-muted)}.select{cursor:pointer}.form-row{display:flex;gap:8px;margin-bottom:8px}.form-group{flex:1}.form-group.full-width{flex:none;width:100%}.checkbox-group{display:flex;align-items:flex-end;padding-bottom:8px}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}.template-buttons{display:flex;flex-wrap:wrap;gap:8px}.trigger-list{max-height:150px;overflow-y:auto;background:var(--bg-primary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.trigger-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background .2s ease;font-size:13px}.trigger-item:last-child{border-bottom:none}.trigger-item:hover{background:var(--bg-secondary)}.trigger-item.selected{background:#2d5a271a;border-left:3px solid var(--primary)}.statement-panel{width:280px;background:var(--bg-surface);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;min-height:0;overflow:hidden}.statement-panel-header{padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.statement-panel-header h3{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.statement-panel-header .trigger-info{font-size:12px;color:var(--text-secondary)}.statement-panel-content{flex:1;overflow-y:auto;padding:8px;min-height:0}.statement-panel-content::-webkit-scrollbar{width:8px}.statement-panel-content::-webkit-scrollbar-track{background:var(--bg-primary)}.statement-panel-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.statement-panel-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:13px;text-align:center;padding:20px}.statement-list-full{display:flex;flex-direction:column;gap:4px}.statement-item{display:flex;align-items:center;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;gap:8px}.statement-item:hover{background:var(--bg-secondary);border-color:var(--primary)}.statement-item.selected{background:#2d5a271a;border-color:var(--primary)}.statement-index{font-size:12px;font-weight:600;color:var(--text-muted);min-width:20px}.statement-text{font-size:12px;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statement-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s ease}.statement-item:hover .statement-actions{opacity:1}.code-preview{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden;min-height:0}.code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.code-header h3{font-size:14px;font-weight:600;color:var(--text-primary)}.warning-badge{font-size:12px;color:var(--warning);background:#ff98001a;padding:4px 10px;border-radius:12px}.code-content{flex:1;padding:16px;background:var(--code-bg);color:var(--code-text);font-family:Consolas,Microsoft YaHei UI,monospace;font-size:14px;line-height:1.6;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid var(--border-color);border-radius:var(--border-radius);margin:16px;min-height:0}.code-content::-webkit-scrollbar{width:10px;height:10px}.code-content::-webkit-scrollbar-track{background:var(--bg-secondary)}.code-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}.code-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.visual-editor{flex:1;display:flex;flex-direction:column;background:var(--bg-secondary)}.editor-toolbar{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}.editor-toolbar .trigger-select{display:flex;align-items:center;gap:8px}.editor-toolbar select{padding:6px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:13px}.editor-canvas-container{flex:1;position:relative;overflow:hidden;background:var(--bg-primary)}.editor-canvas{width:100%;height:100%;position:relative;background-image:linear-gradient(var(--border-light) 1px,transparent 1px),linear-gradient(90deg,var(--border-light) 1px,transparent 1px);background-size:30px 30px}.node{position:absolute;width:180px;background:var(--bg-surface);border:2px solid var(--border-color);border-radius:8px;cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow .2s ease}.node:hover{box-shadow:0 4px 12px #0000001a}.node.selected{border-color:var(--primary);box-shadow:0 0 0 2px #2d5a2733}.node-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--primary);color:#fff;border-radius:6px 6px 0 0;font-weight:600;font-size:14px}.node-header .delete-btn{background:transparent;border:none;color:#fff;cursor:pointer;padding:2px;opacity:.7;display:flex;align-items:center;justify-content:center}.node-header .delete-btn:hover{opacity:1}.node-body{padding:12px}.node-field{margin-bottom:8px}.node-field:last-child{margin-bottom:0}.node-field label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:2px}.node-field input,.node-field select{width:100%;padding:4px 8px;font-size:12px;border:1px solid var(--border-color);border-radius:3px;background:var(--bg-primary);color:var(--text-primary)}.node-connect-btn{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--success);border:2px solid var(--bg-primary);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;z-index:10}.node-connect-btn:hover{background:#43a047}.node-connect-btn.active{background:var(--warning)}.connection-line{position:absolute;pointer-events:none}.connection-line svg{overflow:visible}.connection-line path{fill:none;stroke:var(--success);stroke-width:3;stroke-linecap:round}.connection-arrow{fill:var(--success)}.connection-label{position:absolute;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;padding:2px 8px;font-size:11px;cursor:pointer;pointer-events:auto;color:var(--text-secondary)}.connection-label:hover{background:var(--bg-secondary);color:var(--text-primary)}.node-panel{width:280px;background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;padding:16px}.node-panel h3{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}@media(max-width:1200px){.statement-panel{width:240px}}@media(max-width:900px){.main-content{flex-direction:column}.sidebar{width:100%;max-height:50vh;border-right:none;border-bottom:1px solid var(--border-color)}.header{flex-wrap:wrap;gap:12px}.header-right{flex-wrap:wrap}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--bg-primary);border-radius:8px;box-shadow:0 8px 32px #0003;max-width:480px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.modal-header h2{font-size:18px;font-weight:600;color:var(--text-primary)}.modal-body{padding:24px;overflow-y:auto}.about-logo{text-align:center;margin-bottom:16px}.about-logo svg{display:inline-block}.modal-body h3{text-align:center;font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.modal-body .version{text-align:center;font-size:13px;color:var(--text-secondary);margin-bottom:4px}.modal-body .author{text-align:center;font-size:13px;color:var(--primary);margin-bottom:20px}.about-section{margin-bottom:20px}.about-section h4{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.about-section p{font-size:13px;color:var(--text-secondary);line-height:1.6}.about-section ul{margin:0;padding-left:20px;font-size:13px;color:var(--text-secondary);line-height:1.8}.about-links{display:flex;justify-content:center;gap:16px;margin-bottom:20px}.about-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);text-decoration:none;font-size:14px;transition:all .2s ease}.about-link:hover{background:var(--bg-hover);border-color:var(--primary)}.copyright{text-align:center;font-size:12px;color:var(--text-muted)}