:root{--bg: #1e1e2e;--bg-surface: #252536;--bg-elevated: #2d2d44;--bg-hover: #363652;--border: #3a3a52;--text: #cdd6f4;--text-secondary: #a6adc8;--text-muted: #6c7086;--primary: #89b4fa;--primary-hover: #74c7ec;--danger: #f38ba8;--success: #a6e3a1;--warning: #f9e2af;--radius: 6px;--toolbar-h: 44px;--statusbar-h: 28px;--panel-w: 160px}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;width:100%;height:100%}#toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--toolbar-h);padding:0 12px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}.toolbar-left{display:flex;align-items:center;gap:8px}.toolbar-center{display:flex;align-items:center;gap:4px}.toolbar-right{display:flex;align-items:center}.logo{font-weight:700;font-size:15px;color:var(--primary);letter-spacing:.5px}.badge{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--primary);color:var(--bg);font-weight:600}.separator{width:1px;height:20px;background:var(--border);margin:0 4px}#toolbar button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:var(--radius);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s}#toolbar button:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}#toolbar button:active:not(:disabled){transform:scale(.95)}#toolbar button:disabled{opacity:.35;cursor:not-allowed}#zoom-level{font-size:11px;color:var(--text-muted);min-width:40px;text-align:center;-webkit-user-select:none;user-select:none}.link-playground{color:var(--text-muted);text-decoration:none;font-size:12px;padding:4px 8px;border-radius:var(--radius);transition:all .15s}.link-playground:hover{color:var(--primary);background:var(--bg-hover)}#main{display:flex;flex:1;overflow:hidden}#node-panel{width:var(--panel-w);background:var(--bg-surface);border-right:1px solid var(--border);padding:12px;overflow-y:auto;flex-shrink:0}#node-panel h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:10px}.node-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.node-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--radius);border:1px solid var(--border);cursor:grab;transition:all .15s;-webkit-user-select:none;user-select:none}.node-item:hover{background:var(--bg-hover);border-color:var(--primary)}.node-item:active{cursor:grabbing}.node-item span{font-size:10px;color:var(--text-secondary)}.node-preview{width:32px;height:32px;display:flex;align-items:center;justify-content:center}#canvas-area{flex:1;position:relative;overflow:hidden;background:var(--bg)}#canvas-container{width:100%;height:100%;position:relative}#info-panel{font-size:11px;color:var(--text-secondary);line-height:1.6}#info-panel .hint{color:var(--text-muted);font-style:italic}#info-panel .info-row{display:flex;justify-content:space-between;padding:2px 0}#info-panel .info-label{color:var(--text-muted)}#info-panel .info-value{color:var(--text);font-family:SF Mono,Monaco,Cascadia Code,monospace}#statusbar{display:flex;align-items:center;height:var(--statusbar-h);padding:0 12px;gap:16px;background:var(--bg-surface);border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);flex-shrink:0}#statusbar span:nth-child(-n+3){font-family:SF Mono,Monaco,Cascadia Code,monospace}#status-hint{margin-left:auto;font-style:italic}#canvas-container.drag-over{outline:2px dashed var(--primary);outline-offset:-2px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}