:root,[data-theme=dark]{--bg-primary: #0a0a0f;--bg-secondary: #0e0e14;--bg-toolbar: #101018;--bg-status: #0c0c12;--bg-hover: #1a1a25;--bg-active: #252535;--bg-dropdown: #111118;--text-primary: #c8c8d0;--text-secondary: #5a5a6e;--text-error: #ff3b3b;--border-color: #1e1e2a;--border-focus: #39ff14;--shadow: 0 4px 20px rgba(0, 0, 0, .6);--graph-bg: #08080c;--resize-handle: #1a1a28;--resize-handle-hover: #39ff14;--accent: #39ff14;--accent-dim: #2bcc10;--accent-glow: rgba(57, 255, 20, .15);--accent-glow-strong: rgba(57, 255, 20, .3);--panel-selected: #39ff14;--panel-selected-bg: rgba(57, 255, 20, .04)}[data-theme=light]{--bg-primary: #f0f2f0;--bg-secondary: #e4e8e4;--bg-toolbar: #eaeeea;--bg-status: #e0e4e0;--bg-hover: #d4dad4;--bg-active: #c0c8c0;--bg-dropdown: #eef0ee;--text-primary: #1a1e1a;--text-secondary: #5a665a;--text-error: #cc2222;--border-color: #c8d0c8;--border-focus: #1aaa0a;--shadow: 0 4px 16px rgba(0, 0, 0, .12);--graph-bg: #f5f7f5;--resize-handle: #c0cac0;--resize-handle-hover: #1aaa0a;--accent: #1aaa0a;--accent-dim: #158a08;--accent-glow: rgba(26, 170, 10, .1);--accent-glow-strong: rgba(26, 170, 10, .2);--panel-selected: #1aaa0a;--panel-selected-bg: rgba(26, 170, 10, .06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,Consolas,monospace;font-size:13px;color:var(--text-primary);background:var(--bg-primary)}#app{display:flex;flex-direction:column;height:100vh}#toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);gap:6px;flex-shrink:0;z-index:10}.toolbar-brand{display:flex;align-items:center;gap:8px;margin-right:8px;-webkit-user-select:none;user-select:none}.toolbar-brand-icon{font-size:18px;color:var(--accent);text-shadow:0 0 10px var(--accent-glow-strong);line-height:1}.toolbar-brand-name{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);text-shadow:0 0 8px var(--accent-glow)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:4px}.toolbar-separator{width:1px;height:20px;background:var(--border-color);margin:0 6px}#toolbar button{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:transparent;border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:11px;font-family:inherit;white-space:nowrap;transition:all .15s}#toolbar button:hover{background:var(--bg-hover);border-color:var(--accent-dim);color:var(--accent)}#toolbar button:active{background:var(--bg-active)}#toolbar select{padding:4px 8px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:11px;font-family:inherit;cursor:pointer}#toolbar select:focus{border-color:var(--accent-dim);outline:none}.dropdown{position:relative}.dropdown-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;min-width:200px;background:var(--bg-dropdown);border:1px solid var(--border-color);border-radius:6px;box-shadow:var(--shadow),0 0 20px var(--accent-glow);z-index:100;overflow:hidden}.dropdown-menu.open{display:block}.dropdown-item{display:block;width:100%;padding:8px 14px;background:transparent;border:none;color:var(--text-primary);font-size:12px;font-family:inherit;text-align:left;cursor:pointer;transition:all .1s}.dropdown-item:hover{background:var(--accent-glow);color:var(--accent)}#main-content{display:flex;flex:1;overflow:hidden}#editor-panel{display:flex;flex-direction:column;width:400px;min-width:0;background:var(--bg-secondary);border-right:1px solid var(--border-color);transition:width .3s ease,opacity .3s ease;overflow:hidden}#editor-panel.collapsed{width:0!important;border-right:none;opacity:0;pointer-events:none}#editor-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);font-size:11px;font-weight:600;color:var(--accent-dim);text-transform:uppercase;letter-spacing:1px;flex-shrink:0;gap:8px}#editor-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#editor-toggle-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:10px;padding:2px 6px;border-radius:3px;flex-shrink:0;transition:color .15s}#editor-toggle-btn:hover{background:var(--bg-hover);color:var(--accent)}#editor-container{flex:1;overflow:hidden;background:#000}#editor-container .cm-editor{height:100%;background:#000}#editor-container .cm-editor .cm-gutters{background:#000;border-right-color:var(--border-color)}#resize-handle{width:4px;cursor:col-resize;background:var(--resize-handle);transition:background-color .15s,box-shadow .15s;flex-shrink:0}#resize-handle:hover{background:var(--accent);box-shadow:0 0 8px var(--accent-glow-strong)}#resize-handle.hidden{display:none}#graph-grid{flex:1;display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;background:var(--bg-primary)}.graph-panel{display:flex;flex-direction:column;overflow:hidden;background:var(--graph-bg);border:2px solid transparent;position:relative;transition:border-color .2s,box-shadow .2s;cursor:pointer}.graph-panel:not(:last-child){border-right:1px solid var(--border-color)}.graph-panel{border-bottom:1px solid var(--border-color)}.graph-panel.selected{border-color:var(--accent);background:var(--panel-selected-bg);box-shadow:inset 0 0 30px var(--accent-glow);z-index:1}.graph-panel-header{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);flex-shrink:0;min-height:30px}.graph-panel-name{font-size:11px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.graph-panel.selected .graph-panel-name{color:var(--accent)}.graph-panel-engine{padding:2px 4px;border:1px solid var(--border-color);border-radius:3px;background:var(--bg-primary);color:var(--text-primary);font-size:10px;font-family:inherit;cursor:pointer;flex-shrink:0;transition:border-color .15s}.graph-panel-engine:focus{border-color:var(--accent-dim);outline:none}.graph-panel-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}.graph-panel-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:transparent;border:1px solid var(--border-color);border-radius:3px;color:var(--text-secondary);cursor:pointer;transition:all .1s}.graph-panel-btn:hover{background:var(--bg-hover);border-color:var(--accent-dim);color:var(--accent)}.graph-panel-btn:active{background:var(--bg-active)}.graph-panel-close{font-size:16px;font-weight:300;line-height:1;color:var(--text-secondary);flex-shrink:0}.graph-panel-close:hover{color:var(--text-error);background:#ff3b3b1a;border-color:var(--text-error)}.graph-panel-viewport{flex:1;position:relative;overflow:hidden;min-height:0}.graph-panel-viewport svg{display:block}.graph-panel-viewport{background-image:radial-gradient(circle,rgba(57,255,20,.08) 1px,transparent 1px);background-size:24px 24px;background-color:var(--graph-bg)}[data-theme=light] .graph-panel-viewport{background-image:radial-gradient(circle,rgba(26,170,10,.15) 1px,transparent 1px);background-size:24px 24px;background-color:var(--graph-bg)}.graph-panel-error{display:none;position:absolute;bottom:0;left:0;right:0;padding:6px 10px;background:#ff3b3be6;color:#fff;font-size:11px;font-family:inherit;max-height:60px;overflow-y:auto;z-index:5}#status-bar{display:flex;align-items:center;padding:3px 14px;background:var(--bg-status);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);flex-shrink:0}#status-text.error{color:var(--text-error);font-weight:500}#toolbar button:hover svg,.graph-panel-btn:hover svg{filter:drop-shadow(0 0 3px var(--accent-glow-strong))}.graph-panel.selected .graph-panel-header{border-bottom-color:var(--accent);box-shadow:0 1px 6px var(--accent-glow)}@media(max-width:768px){#main-content{flex-direction:column}#editor-panel{width:100%!important;height:200px;border-right:none;border-bottom:1px solid var(--border-color)}#editor-panel.collapsed{height:0}#resize-handle{display:none}#graph-grid{grid-template-columns:1fr!important}.toolbar-left,.toolbar-right{flex-wrap:wrap}.toolbar-brand-name{display:none}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}.metadata-popup{position:absolute;width:360px;max-height:300px;background:var(--bg-dropdown);border:1px solid var(--accent-dim);border-radius:6px;box-shadow:var(--shadow),0 0 20px var(--accent-glow);z-index:50;display:flex;flex-direction:column;overflow:hidden;animation:metadata-fade-in .12s ease-out}@keyframes metadata-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.metadata-popup-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);flex-shrink:0}.metadata-popup-title{font-size:10px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}.metadata-popup-actions{display:flex;align-items:center;gap:4px}.metadata-popup-btn{padding:2px 8px;background:transparent;border:1px solid var(--border-color);border-radius:3px;color:var(--text-secondary);font-size:10px;font-family:inherit;cursor:pointer;transition:all .15s}.metadata-popup-btn:hover{background:var(--bg-hover);border-color:var(--accent-dim);color:var(--accent)}.metadata-popup-close{font-size:16px;line-height:1;padding:0 4px;border:none}.metadata-popup-close:hover{color:var(--text-error);background:#ff3b3b1a}.metadata-popup-content{padding:10px;margin:0;font-family:inherit;font-size:11px;color:var(--text-primary);line-height:1.5;overflow:auto;white-space:pre-wrap;word-break:break-all}.graph-panel-viewport svg g.node,.graph-panel-viewport svg g.edge{cursor:pointer}.graph-panel-viewport svg g.node:hover text,.graph-panel-viewport svg g.edge:hover text{fill:var(--accent)!important}