.user-guide-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(33,150,243,.8),rgba(25,118,210,.9));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;padding:20px;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.user-guide-container{background-color:#fff;border-radius:16px;width:90%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 50px #00000040,0 0 0 1px #ffffff1a;overflow:hidden;animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.user-guide-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;background:linear-gradient(135deg,#2196F3,#1976D2);color:#fff;position:relative;overflow:hidden}.user-guide-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.1) 25%,transparent 25%);background-size:20px 20px;opacity:.3;pointer-events:none}.user-guide-header h2{margin:0;font-size:1.5rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.2);letter-spacing:.5px;position:relative;z-index:1}.close-button{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:8px;margin-left:15px;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative;z-index:1}.close-button:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}.user-guide-content{display:flex;flex-direction:row;overflow:hidden;flex:1}.user-guide-navigation{width:220px;background:linear-gradient(180deg,#f8f9fa 0%,#f1f3f4 100%);padding:20px 0;display:flex;flex-direction:column;border-right:1px solid #e1e5e9;overflow-y:auto;position:relative}.user-guide-navigation:before{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(33,150,243,.1) 0%,rgba(33,150,243,.05) 50%,rgba(33,150,243,.1) 100%)}.user-guide-navigation button{background:transparent;border:none;text-align:left;padding:14px 20px;cursor:pointer;font-size:.95rem;font-weight:500;border-left:4px solid transparent;transition:all .3s ease;position:relative;color:#555;margin:2px 0}.user-guide-navigation button:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;background-color:#2196f3;border-radius:50%;transform:translateY(-50%) scale(0);transition:all .3s ease;margin-left:8px}.user-guide-navigation button:hover{background:linear-gradient(90deg,rgba(33,150,243,.08) 0%,rgba(33,150,243,.03) 100%);color:#2196f3;transform:translate(2px)}.user-guide-navigation button.active{background:linear-gradient(90deg,rgba(33,150,243,.15) 0%,rgba(33,150,243,.05) 100%);color:#1976d2;border-left-color:#2196f3;font-weight:600;transform:translate(4px);box-shadow:0 2px 8px #2196f333}.user-guide-navigation button.active:before{transform:translateY(-50%) scale(1)}.user-guide-section{flex:1;padding:30px;overflow-y:auto;background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);position:relative}.user-guide-section:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2196F3,#64B5F6,#2196F3);opacity:.3}.user-guide-section h3{margin-top:0;margin-bottom:25px;color:#1976d2;font-size:1.6rem;font-weight:700;position:relative;padding-bottom:12px}.user-guide-section h3:after{content:"";position:absolute;bottom:0;left:0;width:50px;height:3px;background:linear-gradient(90deg,#2196F3,#64B5F6);border-radius:2px}.user-guide-section h4{margin-top:25px;margin-bottom:12px;font-size:1.15rem;color:#1565c0;font-weight:600;position:relative;padding-left:20px}.user-guide-section h4:before{content:"▶";position:absolute;left:0;color:#2196f3;font-size:.8rem;top:50%;transform:translateY(-50%)}.user-guide-section p{margin-bottom:18px;line-height:1.7;color:#444;font-size:.95rem}.user-guide-section p strong{color:#1976d2;font-weight:600}.user-guide-section ul,.user-guide-section ol{margin-bottom:20px;padding-left:0;list-style:none}.user-guide-section li{margin-bottom:12px;line-height:1.6;color:#555;position:relative;padding-left:25px;font-size:.95rem}.user-guide-section ul li:before{content:"•";color:#2196f3;font-size:1.2rem;position:absolute;left:8px;top:-2px}.user-guide-section ol{counter-reset:step-counter}.user-guide-section ol li{counter-increment:step-counter}.user-guide-section ol li:before{content:counter(step-counter);background:linear-gradient(135deg,#2196F3,#1976D2);color:#fff;font-size:.8rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:2px}@media (max-width: 768px){.user-guide-overlay{padding:10px}.user-guide-container{width:95%;height:95vh;max-height:95vh;border-radius:12px}.user-guide-header{padding:16px 20px}.user-guide-header h2{font-size:1.3rem}.user-guide-content{flex-direction:column}.user-guide-navigation{width:100%;border-right:none;border-bottom:2px solid #e1e5e9;padding:12px;flex-shrink:0;overflow-x:auto;display:flex;flex-direction:row;background:linear-gradient(90deg,#f8f9fa 0%,#f1f3f4 100%)}.user-guide-navigation:before{display:none}.user-guide-navigation button{padding:10px 16px;margin:0 4px;border-left:none;border-bottom:3px solid transparent;white-space:nowrap;border-radius:8px;font-size:.9rem;min-width:auto}.user-guide-navigation button:before{display:none}.user-guide-navigation button:hover{transform:none;background:rgba(33,150,243,.1)}.user-guide-navigation button.active{border-left-color:transparent;border-bottom-color:#2196f3;transform:none;box-shadow:0 2px 8px #2196f34d;background:linear-gradient(180deg,rgba(33,150,243,.15) 0%,rgba(33,150,243,.08) 100%)}.user-guide-section{padding:20px}.user-guide-section h3{font-size:1.4rem;margin-bottom:20px}.user-guide-section h4{font-size:1.1rem;margin-top:20px}}body{margin:0;font-family:Arial,sans-serif;overflow:hidden}input,select,textarea{font-size:16px!important;-webkit-text-size-adjust:100%;-webkit-appearance:none;border-radius:6px}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{line-height:normal!important;min-height:44px}@media screen and (-webkit-min-device-pixel-ratio:0){select,textarea,input{font-size:16px!important}}.app{display:flex;flex-direction:column;align-items:center;padding:1rem}.desktop-menu{display:flex;gap:10px}.mobile-menu-button{display:none}@media (max-width: 768px){.desktop-menu{display:none!important}.mobile-menu-button{display:block!important}}nav{position:fixed;top:0;left:0;right:0;z-index:1010!important;height:46px}nav button{transition:background-color .2s ease}nav button:hover{background-color:#fff3!important}.mobile-menu{max-height:calc(100vh - 46px);overflow-y:auto;z-index:1009!important}.mobile-menu button:active{background-color:#f0f0f0}.main-content{padding-top:46px!important;margin-top:0!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important;z-index:1!important}@media (max-width: 768px){.main-content{padding-top:46px!important}.edit-button{transform:scale(1.2)}}.treeview button{padding:.5rem 1rem;margin-bottom:1rem}.treeview ul{list-style:none;padding:0}.treeview li{margin:.25rem 0}.auth{max-width:400px;margin:2rem auto;padding:2rem;border-radius:8px;background:#f9f9f9;box-shadow:0 2px 8px #0000001a}.auth h2{margin-bottom:1rem;text-align:center}.auth form{display:flex;flex-direction:column}.auth label{margin:.5rem 0 .25rem;font-weight:700}.auth input{padding:.5rem;border:1px solid #ccc;border-radius:4px}.auth button{margin-top:1rem;padding:.75rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.auth button:hover{background-color:#0056b3}.auth .error{margin-top:.5rem;color:#d9534f;font-size:.9rem;text-align:center}.treeview{padding:2rem;background-color:#f0f2f5;min-height:calc(100vh - 2rem)}.person-node-container{display:inline-block;margin:.75rem;text-align:center}.person-node{background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:.75rem 1rem;position:relative}.person-name{font-weight:700;color:#333}.person-node .actions{display:flex;justify-content:center;margin-top:.5rem}.person-node .actions button{background:transparent;border:none;cursor:pointer;margin:0 .25rem;font-size:1rem;color:#555}.person-node .actions button:hover{color:#007bff}.person-node .toggle{position:absolute;top:4px;right:8px;background:transparent;border:none;cursor:pointer;font-size:.75rem;color:#888}.children-container{display:flex;justify-content:center;margin-top:.5rem}.tree,.tree ul{padding:0;margin:0;list-style:none;position:relative}.tree li{display:inline-block;vertical-align:top;text-align:center;position:relative;padding:.5rem 1rem}.tree li:before,.tree li:after{content:"";position:absolute;top:0;right:50%;border-top:2px solid #ccc;width:50%;height:1rem}.tree li:after{right:auto;left:50%;border-left:2px solid #ccc}.tree li:only-child:before,.tree li:only-child:after{display:none}.tree li:first-child:before{border:none}.tree li:last-child:after{border:none}.tree ul{margin-top:1rem}.tree ul:before{content:"";position:absolute;top:0;left:50%;border-left:2px solid #ccc;width:0;height:1rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;padding:1.5rem;width:300px;box-shadow:0 2px 8px #0003}.modal-content h2{margin-top:0;margin-bottom:1rem;text-align:center}.modal-content form{display:flex;flex-direction:column}.modal-content input{padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:4px}.modal-content .modal-actions{display:flex;justify-content:flex-end}.modal-content .modal-actions button{padding:.5rem .75rem;border:none;border-radius:4px;cursor:pointer}.modal-content .modal-actions button:first-child{background:transparent;color:#555}.modal-content .modal-actions button:last-child{background:#007bff;color:#fff;margin-left:.5rem}@media (max-width: 768px){.relationship-mode-button{display:none!important}.modal-content{padding:15px!important;width:100%!important;max-width:95%!important;border-radius:10px!important}.modal-content input,.modal-content select,.modal-content button{min-height:44px}}svg{touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.node{cursor:pointer;touch-action:none}button{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}