:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-canvas: #090d16;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #334155;--border-subtle: #1e293b;--accent: #6366f1;--accent-hover: #4f46e5;--accent-light: rgba(99, 102, 241, .15);--success: #10b981;--danger: #ef4444;--danger-light: rgba(239, 68, 68, .12);--warning: #f59e0b;--dot-color: rgba(255, 255, 255, .07);--font-mono: "Fira Code", "Courier New", monospace;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f1f5f9;--bg-tertiary: #e2e8f0;--bg-canvas: #f8fafc;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--border-color: #cbd5e1;--border-subtle: #e2e8f0;--accent: #4f46e5;--accent-hover: #4338ca;--accent-light: rgba(79, 70, 229, .1);--dot-color: rgba(0, 0, 0, .06)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.app-header{height:56px;min-height:56px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;z-index:20}.logo-section{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:var(--text-primary);letter-spacing:-.01em;white-space:nowrap}.logo-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent) 0%,#a855f7 100%);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px #6366f14d}.badge-tag{font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:9999px;background-color:var(--accent-light);color:var(--accent);border:1px solid var(--accent)}.header-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:6px}.select-wrapper{position:relative;display:flex;align-items:center}.select-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);padding:6px 30px 6px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-family:inherit;font-weight:500;cursor:pointer;outline:none;transition:all .15s ease}.select-input:hover{border-color:var(--accent)}.select-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}.select-icon{position:absolute;right:8px;pointer-events:none;color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid transparent;background-color:var(--bg-tertiary);color:var(--text-primary);transition:all .15s ease;white-space:nowrap}.btn:hover{background-color:var(--border-color);color:var(--text-primary)}.btn-icon-only{padding:6px;width:34px;height:34px}.btn-primary{background-color:var(--accent);color:#fff}.btn-primary:hover{background-color:var(--accent-hover)}.btn-danger{color:var(--danger);background-color:var(--danger-light)}.btn-danger:hover{background-color:#ef444433}.workspace-container{display:flex;flex:1;height:calc(100vh - 56px);width:100%;overflow:hidden;position:relative}.pane-wrapper{height:100%;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;position:relative}.editor-pane{display:flex;flex-direction:column;height:100%;width:100%;flex:1;min-width:0;background-color:var(--bg-primary);overflow:hidden;position:relative}.pane-header{height:42px;min-height:42px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.pane-title{display:flex;align-items:center;gap:8px;color:var(--text-primary)}.pane-actions{display:flex;align-items:center;gap:6px}.editor-body{display:flex;flex:1;position:relative;overflow:hidden;background-color:var(--bg-primary)}.line-numbers{width:44px;min-width:44px;padding:14px 6px 14px 0;text-align:right;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;color:var(--text-muted);-webkit-user-select:none;user-select:none;background-color:#00000026;border-right:1px solid var(--border-subtle);overflow:hidden}.line-number-item{height:22.4px}.code-textarea{flex:1;height:100%;padding:14px 16px;border:none;outline:none;resize:none;background:transparent;color:var(--text-primary);font-family:var(--font-mono);font-size:.88rem;line-height:1.6;-moz-tab-size:2;tab-size:2;white-space:pre;overflow:auto;word-break:normal;word-wrap:normal}.code-textarea::placeholder{color:var(--text-muted)}.editor-statusbar{height:32px;min-height:32px;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:.75rem;color:var(--text-secondary)}.status-indicator{display:flex;align-items:center;gap:6px}.status-dot{width:7px;height:7px;border-radius:50%;background-color:var(--success)}.status-dot.error{background-color:var(--danger);box-shadow:0 0 6px var(--danger)}.status-dot.syncing{background-color:var(--warning);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.9)}}.error-banner{background-color:#ef444426;border-top:1px solid var(--danger);color:#fca5a5;padding:10px 14px;font-size:.8rem;max-height:120px;overflow-y:auto;display:flex;align-items:flex-start;gap:8px;line-height:1.4;font-family:var(--font-mono)}.split-resizer{width:7px;background-color:var(--border-color);cursor:col-resize;transition:background-color .15s ease;z-index:10;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.split-resizer:hover,.split-resizer.dragging{background-color:var(--accent)}.split-resizer:after{content:"";width:2px;height:28px;background-color:var(--text-muted);border-radius:1px}.viewer-pane{display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-width:0;background-color:var(--bg-canvas);overflow:hidden;position:relative}.spin-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.viewer-pane.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;width:100vw;height:100vh}.canvas-container{flex:1;width:100%;height:100%;position:relative;overflow:hidden;cursor:grab;background-image:radial-gradient(var(--dot-color) 1.5px,transparent 1.5px);background-size:24px 24px}.canvas-container.grabbing{cursor:grabbing}.diagram-viewport{position:absolute;transform-origin:0 0;will-change:transform;display:flex;align-items:center;justify-content:center;padding:40px;transition:transform .05s linear}.diagram-viewport svg{max-width:none!important;height:auto!important;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,.25))}.canvas-controls-floating{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:4px;background-color:var(--bg-secondary);border:1px solid var(--border-color);padding:4px 6px;border-radius:var(--radius-md);box-shadow:0 4px 20px #0006;z-index:15}.zoom-level-label{font-size:.78rem;font-weight:600;font-family:var(--font-mono);padding:0 8px;color:var(--text-primary);min-width:48px;text-align:center}.controls-divider{width:1px;height:18px;background-color:var(--border-color);margin:0 4px}.canvas-tip{position:absolute;bottom:22px;left:20px;font-size:.76rem;color:var(--text-muted);pointer-events:none;background-color:#0f172abf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);display:flex;align-items:center;gap:6px}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);text-align:center;padding:24px}.empty-state-title{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.svg-raw-box{width:100%;height:100%;padding:20px;overflow:auto;font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);background-color:var(--bg-canvas);white-space:pre-wrap;word-break:break-all}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.workspace-container{flex-direction:column}.split-resizer{display:none}.editor-pane,.viewer-pane{width:100%!important;height:50%!important}}