.canvas-page{--canvas-bg:rgb(10,10,10);--canvas-gold:#FFD700;--canvas-gold-rgb:255,215,0;--canvas-border:rgba(255,255,255,0.15);--canvas-border-hover:rgba(255,215,0,0.3);--canvas-border-active:rgba(255,215,0,0.5);--canvas-text:rgba(255,255,255,0.9);--canvas-text-dim:rgba(255,255,255,0.7);--canvas-text-gold:rgba(255,215,0,0.95);--canvas-btn-bg:rgba(255,255,255,0.04);--canvas-btn-bg-hover:rgba(255,255,255,0.08);--canvas-btn-bg-active:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,215,0,0.25));--canvas-shadow-gold:0 2px 8px rgba(255,215,0,0.2);--canvas-panel-bg:rgba(10,10,10,0.98);width:100%;height:100vh;display:flex;flex-direction:column}.canvas-container,.canvas-page{background:var(--canvas-bg);overflow:hidden}.canvas-container{flex:1;position:relative}.canvas-container.cursor-default{cursor:default}.canvas-container.cursor-grab{cursor:grab}.canvas-container.cursor-grabbing{cursor:grabbing}.canvas-container.cursor-crosshair{cursor:crosshair}.canvas-svg{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.canvas-toolbar{position:absolute;top:0;left:0;right:0;height:60px;background:rgba(10,10,10,.95);border-bottom:1px solid rgba(var(--canvas-gold-rgb),.2);display:flex;align-items:center;justify-content:center;padding:0 20px;gap:8px;z-index:100;backdrop-filter:blur(10px)}.canvas-toolbar.mobile{height:50px;justify-content:flex-start;padding:0 8px;gap:4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.canvas-toolbar.mobile::-webkit-scrollbar{display:none}.toolbar-divider{width:1px;height:30px;background:rgba(255,255,255,.1);flex-shrink:0}.toolbar-divider.mobile{height:24px}.canvas-btn{padding:10px 14px;background:var(--canvas-btn-bg);border:1px solid var(--canvas-border);border-radius:8px;color:var(--canvas-text-dim);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:500;gap:8px;white-space:nowrap}.canvas-btn.mobile{padding:8px 10px;font-size:12px;gap:4px}.canvas-btn:hover{background:var(--canvas-btn-bg-hover);border-color:var(--canvas-border-hover);color:var(--canvas-text-gold)}.canvas-btn.active{background:var(--canvas-btn-bg-active);border-color:var(--canvas-border-active);color:var(--canvas-text-gold);box-shadow:var(--canvas-shadow-gold)}.canvas-btn-primary{padding:10px 16px;font-weight:600}.canvas-btn-primary.mobile{padding:8px 12px}.zoom-display{padding:8px 14px;background:rgba(var(--canvas-gold-rgb),.08);border:1px solid rgba(var(--canvas-gold-rgb),.25);border-radius:8px;color:var(--canvas-text-gold);font-size:13px;font-weight:600;min-width:70px;text-align:center;font-family:monospace;letter-spacing:.5px;flex-shrink:0}.zoom-display.mobile{padding:6px 10px;font-size:11px;min-width:50px}.canvas-dropdown{position:relative;flex-shrink:0}.canvas-dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--canvas-panel-bg);border:1px solid rgba(var(--canvas-gold-rgb),.3);border-radius:8px;padding:8px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:101}.canvas-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:4px;color:var(--canvas-text);font-size:14px;cursor:pointer;transition:all .2s;text-align:left}.canvas-dropdown-item:hover{background:rgba(var(--canvas-gold-rgb),.1);color:var(--canvas-text-gold)}.canvas-dropdown-item-icon{font-size:20px}.canvas-manager{position:absolute;top:70px;right:20px;z-index:100}.canvas-manager-wrapper{display:flex;align-items:center;gap:12px}.canvas-selector{position:relative}.canvas-selector-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(var(--canvas-gold-rgb),.08);border:1px solid rgba(var(--canvas-gold-rgb),.25);border-radius:8px;color:var(--canvas-text-gold);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;min-width:180px}.canvas-selector-btn:hover{background:rgba(var(--canvas-gold-rgb),.15);border-color:rgba(var(--canvas-gold-rgb),.4)}.canvas-selector-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--canvas-panel-bg);border:1px solid rgba(var(--canvas-gold-rgb),.3);border-radius:8px;padding:8px;max-height:300px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:101}.canvas-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:4px;cursor:pointer;transition:all .2s}.canvas-list-item:hover{background:rgba(var(--canvas-gold-rgb),.1)}.canvas-list-item.active{background:rgba(var(--canvas-gold-rgb),.15)}.canvas-list-item-name{color:var(--canvas-text);font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-list-item.active .canvas-list-item-name{color:var(--canvas-text-gold)}.canvas-list-item-date{color:var(--canvas-text-dim);font-size:11px}.canvas-save-btn{padding:10px 16px;background:rgba(var(--canvas-gold-rgb),.1);border:1px solid rgba(var(--canvas-gold-rgb),.3);border-radius:8px;color:var(--canvas-text-gold);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.canvas-save-btn:hover{background:rgba(var(--canvas-gold-rgb),.2);border-color:rgba(var(--canvas-gold-rgb),.5)}.canvas-save-btn.saving{opacity:.7;cursor:wait}.canvas-save-btn.unsaved{background:rgba(var(--canvas-gold-rgb),.2);animation:pulse-gold 2s ease-in-out infinite}.canvas-side-panel{position:absolute;top:70px;right:0;width:380px;max-width:100%;height:calc(100% - 70px);background:var(--canvas-panel-bg);border-left:1px solid rgba(var(--canvas-gold-rgb),.2);transform:translateX(100%);transition:transform .3s ease;z-index:99;display:flex;flex-direction:column;overflow:hidden}.canvas-side-panel.open{transform:translateX(0)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--canvas-gold-rgb),.15);flex-shrink:0}.panel-title{color:var(--canvas-text-gold);font-size:16px;font-weight:600;margin:0}.panel-close-btn{width:32px;height:32px;background:transparent;border:1px solid var(--canvas-border);border-radius:6px;color:var(--canvas-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.panel-close-btn:hover{background:var(--canvas-btn-bg-hover);border-color:var(--canvas-border-hover);color:var(--canvas-text-gold)}.panel-content{flex:1;overflow-y:auto;padding:20px}.panel-section{margin-bottom:24px}.panel-section-title{color:var(--canvas-text-gold);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.panel-input{width:100%;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--canvas-border);border-radius:6px;color:var(--canvas-text);font-size:14px;transition:all .2s}.panel-input:focus{outline:none;border-color:var(--canvas-border-active);background:rgba(255,255,255,.06)}.panel-input::-moz-placeholder{color:rgba(255,255,255,.4)}.panel-input::placeholder{color:rgba(255,255,255,.4)}.panel-textarea{width:100%;min-height:120px;padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--canvas-border);border-radius:6px;color:var(--canvas-text);font-size:14px;line-height:1.6;resize:vertical;transition:all .2s}.panel-textarea:focus{outline:none;border-color:var(--canvas-border-active);background:rgba(255,255,255,.06)}.panel-select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--canvas-border);border-radius:6px;color:var(--canvas-text);font-size:14px;cursor:pointer;transition:all .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding:10px 36px 10px 12px}.panel-select:focus{outline:none;border-color:var(--canvas-border-active)}.panel-select option{background:var(--canvas-bg);color:var(--canvas-text)}.panel-tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;background:rgba(255,255,255,.02);border-radius:8px}.panel-tab{flex:1;padding:8px 12px;background:transparent;border:none;border-radius:6px;color:var(--canvas-text-dim);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.panel-tab:hover{color:var(--canvas-text);background:rgba(255,255,255,.04)}.panel-tab.active{background:rgba(var(--canvas-gold-rgb),.15);color:var(--canvas-text-gold)}.canvas-node{cursor:move;transition:filter .2s}.canvas-node.selected{filter:drop-shadow(0 0 8px rgba(var(--canvas-gold-rgb),.5))}.canvas-node.locked{cursor:not-allowed}.node-content{width:100%;height:100%;background:linear-gradient(145deg,rgba(30,30,35,.95),rgba(20,20,25,.98));border:1px solid var(--canvas-border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.node-content.selected{border-color:var(--canvas-border-active);box-shadow:0 0 0 1px rgba(var(--canvas-gold-rgb),.3)}.node-header{padding:10px 12px;background:rgba(var(--canvas-gold-rgb),.08);border-bottom:1px solid rgba(var(--canvas-gold-rgb),.15);display:flex;align-items:center;gap:8px}.node-icon{font-size:18px}.node-label{flex:1;color:var(--canvas-text-gold);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-body{flex:1;padding:12px;overflow:hidden}.connection-port{fill:rgba(var(--canvas-gold-rgb),.3);stroke:var(--canvas-gold);stroke-width:1;cursor:crosshair;transition:all .2s}.connection-port:hover{fill:var(--canvas-gold);r:8}.resize-handle{fill:rgba(var(--canvas-gold-rgb),.4);stroke:var(--canvas-gold);stroke-width:1;cursor:nwse-resize;opacity:0;transition:opacity .2s}.canvas-node.selected .resize-handle,.canvas-node:hover .resize-handle{opacity:1}.resize-handle:hover{fill:var(--canvas-gold)}.text-node .node-content{background:linear-gradient(145deg,rgba(25,25,30,.95),rgba(15,15,20,.98))}.text-node-content{width:100%;height:100%;padding:16px;background:transparent;border:none;color:var(--canvas-text);font-size:14px;line-height:1.6;resize:none;outline:none}.text-node-content::-moz-placeholder{color:rgba(255,255,255,.3)}.text-node-content::placeholder{color:rgba(255,255,255,.3)}.person-node .node-header{background:rgba(var(--canvas-gold-rgb),.1)}.person-node-avatar{width:40px;height:40px;border-radius:50%;background:rgba(var(--canvas-gold-rgb),.2);border:2px solid rgba(var(--canvas-gold-rgb),.4);display:flex;align-items:center;justify-content:center;font-size:20px}.person-node-info{flex:1}.person-node-name{color:var(--canvas-text-gold);font-size:14px;font-weight:600}.person-node-birth{color:var(--canvas-text-dim);font-size:12px}.person-node-apex{padding:12px;display:flex;flex-wrap:wrap;gap:6px}.apex-badge{padding:4px 8px;background:rgba(var(--canvas-gold-rgb),.1);border:1px solid rgba(var(--canvas-gold-rgb),.25);border-radius:4px;color:var(--canvas-text-gold);font-size:11px;font-weight:500}.group-node .node-content{background:rgba(147,51,234,.05);border:2px dashed rgba(147,51,234,.4);border-radius:12px}.group-node .node-header{background:rgba(147,51,234,.15);border-bottom-color:rgba(147,51,234,.3)}.group-node .node-label{color:rgba(147,51,234,.95)}.codex-node .node-header{background:rgba(139,92,246,.1);border-bottom-color:rgba(139,92,246,.2)}.codex-node .node-label{color:rgba(139,92,246,.95)}.codex-node-icon{width:24px;height:24px;color:rgba(139,92,246,.8)}.event-node .node-header{background:rgba(245,158,11,.1);border-bottom-color:rgba(245,158,11,.2)}.event-node .node-label{color:rgba(245,158,11,.95)}.connection-line{fill:none;stroke-width:2;cursor:pointer;transition:stroke-width .2s}.connection-line:hover{stroke-width:4}.connection-line.selected{stroke-width:3;filter:drop-shadow(0 0 4px currentColor)}.connection-arrow{transition:transform .2s}.connection-family{stroke:#10B981;fill:#10B981}.connection-romantic{stroke:#EC4899;fill:#EC4899}.connection-ex{stroke:#6B7280;fill:#6B7280}.connection-rival{stroke:#EF4444;fill:#EF4444}.connection-business{stroke:#3B82F6;fill:#3B82F6}.connection-mentor{stroke:#8B5CF6;fill:#8B5CF6}.connection-teammate{stroke:#F59E0B;fill:#F59E0B}.connection-custom,.connection-event{stroke:#FFD700;fill:#FFD700}.diagnostic-bbox{fill:none;stroke:#00ffff;stroke-width:2;stroke-dasharray:4,2;opacity:.8;pointer-events:none}.diagnostic-bbox.group{stroke:#9333ea}.connection-draft{pointer-events:none}.connection-draft-line{fill:none;stroke:var(--canvas-gold);stroke-width:3;opacity:.7}.connection-draft-line.snapped{stroke-width:4;opacity:.9}.connection-draft-arrow{fill:var(--canvas-gold);opacity:.7}.connection-draft-arrow.snapped{opacity:.9}.snap-indicator{fill:none;stroke:var(--canvas-gold);stroke-width:2;opacity:.8;animation:pulse 1s ease-in-out infinite}@keyframes dash{to{stroke-dashoffset:-1000}}@keyframes pulse{0%,to{r:15;opacity:.8}50%{r:20;opacity:.4}}@keyframes pulse-gold{0%,to{box-shadow:0 0 0 0 rgba(var(--canvas-gold-rgb),.4)}50%{box-shadow:0 0 0 4px rgba(var(--canvas-gold-rgb),0)}}@keyframes spin{to{transform:rotate(1turn)}}.spinner{animation:spin 1s linear infinite}@media (max-width:768px){.canvas-side-panel{width:100%;top:50px;height:calc(100% - 50px)}.canvas-manager{top:55px;right:8px}.canvas-selector-btn{min-width:140px;padding:8px 12px;font-size:13px}}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}.panel-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}.canvas-selector-dropdown::-webkit-scrollbar{width:6px}.canvas-selector-dropdown::-webkit-scrollbar-track{background:transparent}.canvas-selector-dropdown::-webkit-scrollbar-thumb{background:rgba(var(--canvas-gold-rgb),.2);border-radius:3px}.canvas-selector-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(var(--canvas-gold-rgb),.3)}