.toolbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;background:var(--color-primary);color:#fff;z-index:100;flex-shrink:0;box-shadow:0 2px 8px #00000026}.toolbar-brand{display:flex;align-items:center;gap:12px}.toolbar-brand img{height:32px}.toolbar-brand h1{font-size:16px;font-weight:600;letter-spacing:.3px}.toolbar-actions{display:flex;align-items:center;gap:8px}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-weight:500;font-size:13px;transition:all .2s ease}.toolbar-btn.primary{background:var(--color-var3);color:#fff}.toolbar-btn.primary:hover{background:var(--color-var2);color:var(--color-primary)}.toolbar-btn.secondary{background:#ffffff1f;color:#fff}.toolbar-btn.secondary:hover{background:#ffffff40}.toolbar-divider{width:1px;height:28px;background:#fff3;margin:0 4px}.toolbar-btn svg{width:16px;height:16px;flex-shrink:0}.zoom-controls{display:flex;align-items:center;gap:4px}.zoom-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#ffffff1f;color:#fff}.zoom-btn:hover{background:#ffffff40}.zoom-btn svg{width:16px;height:16px}.import-input{display:none}.org-node{position:absolute;width:160px;background:var(--color-card);border-radius:14px;padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;transition:box-shadow .25s ease,transform .25s ease;box-shadow:0 2px 12px #00000012;border:2px solid transparent;z-index:1;-webkit-user-select:none;user-select:none}.org-node:hover{box-shadow:0 6px 24px #00000021;transform:translateY(-2px);border-color:var(--color-secondary)}.org-node .photo-wrapper{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid var(--color-primary);margin-bottom:10px;flex-shrink:0;background:#f0f0f0}.org-node .photo-wrapper img{width:100%;height:100%;object-fit:cover;display:block}.org-node .node-name{font-size:13px;font-weight:700;color:var(--color-primary);text-align:center;line-height:1.2;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.org-node .node-role{font-size:11px;color:var(--color-text-light);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-actions{position:absolute;top:4px;right:4px;display:flex;gap:2px;opacity:0;transition:opacity .2s ease}.org-node:hover .node-actions{opacity:1}.node-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#0000000f;color:var(--color-text-light);font-size:14px;padding:0}.node-action-btn:hover{background:var(--color-secondary);color:#fff}.node-action-btn.delete:hover{background:#d64545;color:#fff}.add-child-btn{position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:28px;height:28px;border-radius:50%;background:var(--color-var3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;box-shadow:0 2px 8px #34a36e4d;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:2;padding:0;line-height:1}.org-node:hover .add-child-btn{opacity:1}.add-child-btn:hover{background:var(--color-var2);color:var(--color-primary);transform:translate(-50%) scale(1.15)}.collapse-indicator{position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:28px;height:28px;border-radius:50%;background:var(--color-secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 8px #8870bc4d;cursor:pointer;z-index:2;padding:0;line-height:1}.collapse-indicator:hover{background:var(--color-primary);transform:translate(-50%) scale(1.1)}.org-node.collapsed-node{opacity:.85;border-color:var(--color-secondary);border-style:dashed}.canvas{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;cursor:grab;background-color:var(--color-bg);background-image:radial-gradient(circle,#d0d0d0 1px,transparent 1px);background-size:24px 24px}.canvas.panning{cursor:grabbing}.canvas-content{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.connections-svg{position:absolute;top:0;left:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:0}.connections-svg path{transition:d .3s ease}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:16px;padding:32px;width:420px;max-width:90vw;box-shadow:0 20px 60px #0003;animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal h2{font-size:18px;font-weight:700;color:var(--color-primary);margin-bottom:24px}.modal .parent-info{font-size:13px;color:var(--color-secondary);font-weight:500;margin-top:-16px;margin-bottom:20px}.form-group{margin-bottom:18px}.form-group label{display:block;font-size:13px;font-weight:600;color:var(--color-text);margin-bottom:6px}.form-group input[type=text]{width:100%;padding:10px 14px;border:2px solid var(--color-border);border-radius:8px;font-size:14px;transition:border-color .2s ease;outline:none}.form-group input[type=text]:focus{border-color:var(--color-secondary)}.photo-upload-area{display:flex;align-items:center;gap:16px}.photo-preview-circle{width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid var(--color-border);background:#f5f5f5;flex-shrink:0;display:flex;align-items:center;justify-content:center}.photo-preview-circle img{width:100%;height:100%;object-fit:cover}.photo-preview-circle svg{width:28px;height:28px;color:#ccc}.photo-upload-btn{position:relative;overflow:hidden}.photo-upload-btn input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.photo-upload-btn span{display:inline-block;padding:8px 16px;background:var(--color-bg);border:2px dashed var(--color-border);border-radius:8px;font-size:13px;color:var(--color-text-light);cursor:pointer;transition:all .2s ease}.photo-upload-btn:hover span{border-color:var(--color-secondary);color:var(--color-secondary)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}.form-actions button{padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px}.btn-cancel{background:var(--color-bg);color:var(--color-text-light)}.btn-cancel:hover{background:#e0e0e0}.btn-save{background:var(--color-primary);color:#fff}.btn-save:hover{background:var(--color-var3)}.btn-save:disabled{opacity:.5;cursor:not-allowed}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.main-area{flex:1;position:relative;overflow:hidden}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--color-text-light);-webkit-user-select:none;user-select:none;pointer-events:none}.empty-state img{width:160px;opacity:.5}.empty-state p{font-size:18px;opacity:.6}.empty-state .hint{font-size:14px;opacity:.4}:root{--color-primary: #103e2f;--color-secondary: #8870bc;--color-var1: #8870bc;--color-var2: #a9c667;--color-var3: #34a36e;--color-bg: #f0f2f5;--color-card: #ffffff;--color-text: #1a1a1a;--color-text-light: #666666;--color-border: #e0e0e0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);overflow:hidden;height:100vh;width:100vw}#root{height:100vh;width:100vw;display:flex;flex-direction:column}button{cursor:pointer;border:none;font-family:inherit;font-size:14px;transition:all .2s ease}input{font-family:inherit;font-size:14px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-secondary);border-radius:4px}