:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-card{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0003;padding:40px;width:100%;max-width:500px;min-height:400px;display:flex;flex-direction:column}.login-header{text-align:center;margin-bottom:30px}.login-header h1{color:#2d3748;margin:0 0 10px;font-size:2rem;font-weight:600}.login-header p{color:#718096;margin:0;font-size:.95rem}.login-form{margin-bottom:30px}.form-group label{display:block;margin-bottom:8px;color:#2d3748;font-weight:500;font-size:.9rem}.form-group input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#667eea}.form-group input:disabled{background-color:#f7fafc;opacity:.6}.password-input{position:relative}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.2rem;padding:4px}.password-toggle:disabled{opacity:.5;cursor:not-allowed}.login-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.login-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.demo-section{border-top:1px solid #e2e8f0;padding-top:25px;margin-bottom:25px}.demo-title{text-align:center;color:#4a5568;font-weight:500;margin:0 0 15px;font-size:.9rem}.demo-buttons{display:flex;gap:12px}.demo-button{flex:1;padding:12px 16px;border:2px solid;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;font-size:.9rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:4px}.demo-button.admin{border-color:#48bb78;color:#48bb78}.demo-button.admin:hover:not(:disabled){background-color:#48bb78;color:#fff}.demo-button.viewer{border-color:#4299e1;color:#4299e1}.demo-button.viewer:hover:not(:disabled){background-color:#4299e1;color:#fff}.demo-button:disabled{opacity:.5;cursor:not-allowed}.demo-subtitle{font-size:.75rem;opacity:.8}.user-selection{margin-bottom:30px}.selection-title{text-align:center;color:#4a5568;font-weight:500;margin:0 0 25px;font-size:1rem}.user-type-buttons{display:flex;flex-direction:column;gap:15px}.user-type-button{display:flex;align-items:center;gap:20px;padding:20px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s;text-align:left}.user-type-button:hover:not(:disabled){border-color:#667eea;background:#f8fafc;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.user-type-button.admin:hover:not(:disabled){border-color:#48bb78}.user-type-button.viewer:hover:not(:disabled){border-color:#4299e1}.user-type-button:disabled{opacity:.5;cursor:not-allowed}.user-type-icon{font-size:2rem;flex-shrink:0}.user-type-info{flex-grow:1}.user-type-info h3{margin:0 0 5px;color:#2d3748;font-size:1.2rem;font-weight:600}.user-type-info p{margin:0;color:#718096;font-size:.9rem;line-height:1.4}.password-form{margin-bottom:30px}.selected-user-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding:15px 20px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.selected-user-badge{display:flex;align-items:center;gap:10px}.selected-user-badge.admin .selected-user-icon{color:#48bb78}.selected-user-badge.viewer .selected-user-icon{color:#4299e1}.selected-user-icon{font-size:1.5rem}.selected-user-text{font-weight:500;color:#2d3748}.back-button{background:none;border:none;color:#667eea;font-size:.9rem;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all .2s}.back-button:hover:not(:disabled){background:#edf2f7;color:#5a67d8}.back-button:disabled{opacity:.5;cursor:not-allowed}.user-type-display{margin-bottom:20px}.user-badge{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;position:relative}.user-badge.admin{border-color:#48bb78;background:#f0fff4}.user-badge.viewer{border-color:#4299e1;background:#f0f9ff}.user-icon{font-size:1.5rem}.user-label{font-weight:500;color:#2d3748;font-size:1rem}.switch-back-btn{background:none;border:none;color:#667eea;font-size:.85rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s;white-space:nowrap}.switch-back-btn:hover:not(:disabled){background:#667eea1a}.switch-back-btn:disabled{opacity:.5;cursor:not-allowed}.admin-option{text-align:center;margin-bottom:25px;padding-top:20px;border-top:1px solid #e2e8f0}.admin-login-btn{background:#f7fafc;color:#48bb78;border:1px solid #48bb78;padding:10px 20px;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;justify-content:center;width:auto;margin:0 auto 8px}.admin-login-btn:hover:not(:disabled){background:#48bb78;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #48bb784d}.admin-login-btn:disabled{opacity:.5;cursor:not-allowed}.session-reset{text-align:center;margin-bottom:20px}.reset-session-btn{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0;padding:8px 16px;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s}.reset-session-btn:hover:not(:disabled){background:#edf2f7;border-color:#cbd5e0}.reset-session-btn:disabled{opacity:.5;cursor:not-allowed}.login-footer{text-align:center;color:#718096;font-size:.8rem;border-top:1px solid #e2e8f0;padding-top:20px}.login-footer p{margin:5px 0}@media(max-width:768px){.login-card{max-width:90vw;min-height:350px;padding:30px 25px}.login-header h1{font-size:1.8rem}.user-type-button{gap:15px;padding:16px}.user-type-icon{font-size:1.8rem}.user-type-info h3{font-size:1.1rem}.user-type-info p{font-size:.85rem}.selected-user-info{flex-direction:column;gap:12px;text-align:center}}@media(max-width:480px){.login-container{padding:40px 10px 10px;align-items:flex-start}.login-card{max-width:95vw;min-height:300px;padding:25px 20px}.login-header h1{font-size:1.6rem}.login-header p{font-size:.9rem}.user-type-button{gap:12px;padding:15px}.user-type-icon{font-size:1.6rem}.user-type-info h3{font-size:1rem}.user-type-info p{font-size:.8rem}.demo-buttons{flex-direction:column}.selected-user-info{padding:12px 16px}.selected-user-icon{font-size:1.3rem}.selected-user-text{font-size:.9rem}}@media(min-width:1200px){.login-card{max-width:550px;padding:50px}.user-type-button{padding:24px;gap:24px}.user-type-icon{font-size:2.5rem}}.family-node{background:#fff;border:2px solid #e2e8f0;border-radius:10px;box-shadow:0 3px 8px #0000001a;padding:15px;margin:8px;width:100%;min-width:240px;max-width:320px;cursor:pointer;transition:all .3s ease;position:relative}.family-node:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000026;border-color:#667eea}.family-node.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.node-content{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.avatar-section{flex-shrink:0}.avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #667eea}.info-section{flex-grow:1;min-width:0}.name{font-size:1.05rem;font-weight:600;color:#2d3748;margin:0 0 3px;word-wrap:break-word}.other-name{font-size:.8rem;color:#718096;font-style:italic;margin:0 0 5px}.occupation{font-size:.75rem;color:#4a5568;font-weight:500;margin:0 0 5px;background:#edf2f7;padding:3px 6px;border-radius:10px;display:inline-block}.contact{font-size:.8rem;color:#718096;margin:3px 0;display:flex;align-items:center;gap:5px}.spouse-section{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.spouse-info{display:flex;align-items:center;gap:8px}.spouse-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #e53e3e}.spouse-details{flex-grow:1}.spouse-name{font-size:.9rem;font-weight:500;color:#2d3748;margin:0 0 2px}.spouse-occupation{font-size:.75rem;color:#718096;margin:0}.comments-section{background:#f7fafc;border-radius:8px;padding:12px;margin:15px -20px}.comments{font-size:.85rem;color:#4a5568;margin:0;line-height:1.4;font-style:italic}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.action-buttons{display:flex;gap:6px}.action-btn{background:#fff;border:1px solid #cbd5e0;border-radius:4px;padding:5px 6px;font-size:.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:auto}.action-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001f}.edit-btn{color:#667eea;border-color:#667eea}.edit-btn:hover{background:#667eea;color:#fff;box-shadow:0 3px 12px #667eea4d}.add-btn{color:#48bb78;border-color:#48bb78}.add-btn:hover{background:#48bb78;color:#fff;box-shadow:0 3px 12px #48bb784d}.delete-btn{color:#e53e3e;border-color:#e53e3e}.delete-btn:hover{background:#e53e3e;color:#fff;box-shadow:0 3px 12px #e53e3e4d}.children-indicator{display:flex;align-items:center}.children-count{font-size:.8rem;color:#718096;background:#edf2f7;padding:4px 8px;border-radius:12px;font-weight:500}.expand-section{margin-left:10px}.expand-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#fff;border:1px solid #cbd5e0;border-radius:20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease;color:#4a5568;min-height:32px}.expand-btn:hover:not(:disabled){background:#f7fafc;border-color:#a0aec0;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.expand-btn:disabled{cursor:not-allowed;opacity:.6}.expand-btn.expanded{background:#edf2f7;border-color:#a0aec0;color:#2d3748}.expand-btn.expanded:hover:not(:disabled){background:#e2e8f0}.loading-spinner{animation:spin 1s linear infinite;display:inline-block}.expand-text{font-size:.75rem;font-weight:500}.nav-btn{position:absolute;left:50%;transform:translate(-50%);background:#fff;border:2px solid #667eea;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;font-weight:700;color:#667eea;transition:all .3s ease;z-index:10;box-shadow:0 2px 8px #0000001a}.nav-btn:hover:not(:disabled){background:#667eea;color:#fff;transform:translate(-50%) scale(1.1);box-shadow:0 4px 12px #667eea4d}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.nav-btn-up{top:-16px;z-index:20}.nav-btn-down{bottom:-16px;z-index:20}@media(max-width:768px){.nav-btn{width:28px;height:28px;font-size:.9rem}.nav-btn-up{top:-14px}.nav-btn-down{bottom:-14px}}@media(max-width:480px){.nav-btn{width:24px;height:24px;font-size:.8rem}.nav-btn-up{top:-12px}.nav-btn-down{bottom:-12px}}.connection-line{position:absolute;bottom:-15px;left:50%;transform:translate(-50%)}.line-vertical{width:2px;height:15px;background:#cbd5e0}.avatar{transition:all .2s ease}.family-node:hover .avatar{transform:scale(1.05)}.spouse-avatar-img{transition:all .2s ease}.family-node:hover .spouse-avatar-img{transform:scale(1.05)}@media(max-width:768px){.family-node{min-width:250px;max-width:300px;padding:15px}.node-content{gap:12px}.avatar{width:50px;height:50px}.name{font-size:1.1rem}.action-buttons{gap:6px}.action-btn{padding:6px 8px;font-size:.9rem}}@media(max-width:480px){.family-node{min-width:200px;max-width:280px}.spouse-info{flex-direction:column;align-items:flex-start;gap:8px}.actions{flex-direction:column;gap:10px;align-items:stretch}.action-buttons,.children-indicator{justify-content:center}}.family-node.drag-mode{cursor:move;border-color:#667eea;background:#edf2f7}.family-node[draggable=true]:hover{transform:translateY(-4px);box-shadow:0 12px 24px #667eea33;border-color:#667eea;background:#f0f8ff}.drag-btn{color:#667eea;border-color:#667eea;background:#f0f8ff}.drag-btn:hover{background:#667eea;color:#fff;box-shadow:0 3px 12px #667eea4d}.drop-indicator{position:absolute!important;width:4px!important;background:linear-gradient(to bottom,#007bff,#0056b3)!important;border-radius:2px!important;z-index:1000!important;pointer-events:none!important;box-shadow:0 0 8px #007bff99!important;animation:pulse-indicator 1s infinite!important}@keyframes pulse-indicator{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(1.5)}}.family-node.drag-mode[draggable=true]{cursor:grab;border:2px dashed #667eea;background:#f0f8ff}.family-node.drag-mode[draggable=true]:active{cursor:grabbing}.family-node:hover.drag-mode[draggable=true]{transform:translateY(-4px);box-shadow:0 12px 24px #667eea33;border-color:#667eea;background:#e6f3ff}.photo-upload-container{margin-bottom:20px}.photo-upload-label{display:block;margin-bottom:8px;font-weight:500;color:#2d3748;font-size:.9rem}.photo-upload-area{position:relative;border:2px dashed #cbd5e0;border-radius:8px;overflow:hidden;transition:all .2s}.photo-upload-area:hover{border-color:#667eea;background:#f8fafc}.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;cursor:pointer;transition:all .2s}.photo-placeholder:hover{background:#f8fafc}.upload-icon{font-size:2rem;margin-bottom:10px;opacity:.6}.photo-placeholder p{margin:0 0 5px;color:#4a5568;font-weight:500}.upload-hint{font-size:.8rem;color:#718096}.photo-preview{position:relative;width:120px;height:120px;margin:15px auto;border-radius:8px;overflow:hidden;border:2px solid #e2e8f0}.preview-image{width:100%;height:100%;object-fit:cover}.photo-overlay{position:absolute;inset:0;background:#000000b3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .2s}.photo-preview:hover .photo-overlay{opacity:1}.change-photo-btn,.remove-photo-btn{background:#fff;color:#2d3748;border:none;padding:6px 12px;border-radius:4px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.change-photo-btn:hover{background:#667eea;color:#fff}.remove-photo-btn:hover{background:#e53e3e;color:#fff}.change-photo-btn:disabled,.remove-photo-btn:disabled{opacity:.5;cursor:not-allowed}.upload-status{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:#f0f9ff;border-radius:6px;margin-top:10px}.upload-spinner{width:16px;height:16px;border:2px solid #bae6fd;border-top:2px solid #0369a1;border-radius:50%;animation:spin 1s linear infinite}.upload-status span{font-size:.85rem;color:#0369a1;font-weight:500}@media(max-width:480px){.photo-placeholder{padding:20px 15px}.photo-preview{width:100px;height:100px}.change-photo-btn,.remove-photo-btn{padding:4px 8px;font-size:.75rem}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0000004d;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:#2d3748}.close-button{background:none;border:none;font-size:1.5rem;color:#718096;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s}.close-button:hover:not(:disabled){background:#e2e8f0;color:#2d3748}.close-button:disabled{opacity:.5;cursor:not-allowed}.node-form{padding:30px}.form-section{margin-bottom:30px}.section-title{font-size:1.1rem;font-weight:600;color:#2d3748;margin:0 0 20px;padding-bottom:8px;border-bottom:2px solid #667eea}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#2d3748;font-size:.9rem}.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .2s;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group input:disabled,.form-group textarea:disabled{background-color:#f7fafc;opacity:.7}.form-group textarea{resize:vertical;min-height:80px}.character-count{text-align:right;font-size:.8rem;color:#718096;margin-top:5px}.error-message{background-color:#fed7d7;color:#c53030;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:.9rem;border:1px solid #feb2b2}.modal-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:20px;border-top:1px solid #e2e8f0}.cancel-button,.save-button{padding:12px 24px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;font-size:1rem;border:none;display:flex;align-items:center;gap:8px}.cancel-button{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0}.cancel-button:hover:not(:disabled){background:#edf2f7;border-color:#cbd5e0}.save-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.save-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.save-button:disabled,.cancel-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.spinner-small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.photo-upload-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:0 0 12px 12px;padding:15px 30px;text-align:center}.photo-upload-info p{margin:0;color:#0369a1;font-size:.85rem}@media(max-width:768px){.modal-content{max-width:95vw;margin:10px}.modal-header{padding:20px}.modal-header h2{font-size:1.3rem}.node-form{padding:20px}.form-row{grid-template-columns:1fr;gap:15px}.modal-actions{flex-direction:column-reverse}.cancel-button,.save-button{width:100%;justify-content:center}}@media(max-width:480px){.modal-overlay{padding:10px}.modal-header,.node-form{padding:15px}.section-title{font-size:1rem}.form-group{margin-bottom:15px}.photo-upload-info{padding:12px 15px}}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-track{background:#f1f5f9}.modal-content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.modal-content::-webkit-scrollbar-thumb:hover{background:#a0aec0}.photo-viewer-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1500;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.photo-viewer-content{background:#fff;border-radius:12px;box-shadow:0 25px 50px #0000004d;width:90vw;max-width:800px;max-height:90vh;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.photo-viewer-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.photo-viewer-title{margin:0;font-size:1.2rem;font-weight:600;color:#2d3748}.photo-viewer-close{background:none;border:none;font-size:1.5rem;color:#718096;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s}.photo-viewer-close:hover{background:#e2e8f0;color:#2d3748}.photo-viewer-image-container{display:flex;align-items:center;justify-content:center;padding:30px;background:#f8fafc;min-height:300px;max-height:70vh}.photo-viewer-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 25px #0003;transition:transform .2s ease}.photo-viewer-image:hover{transform:scale(1.02)}@media(max-width:768px){.photo-viewer-content{width:95vw;margin:20px}.photo-viewer-header{padding:15px 20px}.photo-viewer-title{font-size:1.1rem}.photo-viewer-image-container{padding:20px;min-height:200px;max-height:60vh}}@media(max-width:480px){.photo-viewer-content{width:98vw;margin:10px}.photo-viewer-header{padding:12px 15px}.photo-viewer-image-container{padding:15px;min-height:150px;max-height:50vh}}.photo-viewer-overlay:focus{outline:none}.photo-viewer-close:focus{outline:2px solid #667eea;outline-offset:2px}.detail-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1200;padding:20px;animation:fadeIn .2s ease-out}.detail-modal-content{background:#fff;border-radius:16px;box-shadow:0 25px 50px #00000040;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease-out}.detail-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:16px 16px 0 0}.detail-header h2{margin:0;font-size:1.4rem;font-weight:600;color:#2d3748}.detail-close-button{background:none;border:none;font-size:1.4rem;color:#718096;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s}.detail-close-button:hover{background:#e2e8f0;color:#2d3748}.detail-body{padding:30px}.detail-person-section{display:flex;gap:20px;align-items:flex-start;margin-bottom:30px;padding-bottom:25px;border-bottom:2px solid #e2e8f0}.detail-avatar-section{flex-shrink:0}.detail-avatar{width:120px;height:120px;border-radius:12px;object-fit:cover;border:3px solid #667eea;box-shadow:0 4px 12px #00000026}.detail-info-section{flex-grow:1}.detail-name{font-size:1.6rem;font-weight:600;color:#2d3748;margin:0 0 8px}.detail-other-name{font-size:1.1rem;color:#718096;font-style:italic;margin:0 0 12px}.detail-occupation{font-size:1rem;color:#4a5568;font-weight:500;background:#edf2f7;padding:8px 16px;border-radius:20px;display:inline-block;margin:0}.detail-section{margin-bottom:25px}.detail-section-title{font-size:1.1rem;font-weight:600;color:#2d3748;margin:0 0 15px;padding-bottom:8px;border-bottom:1px solid #e2e8f0}.detail-contact{font-size:1rem;color:#4a5568;margin:8px 0;display:flex;align-items:center;gap:8px}.detail-spouse-info{display:flex;align-items:center;gap:16px}.detail-spouse-avatar-img{width:80px;height:80px;border-radius:8px;object-fit:cover;border:2px solid #e53e3e}.detail-spouse-details{flex-grow:1}.detail-spouse-name{font-size:1.2rem;font-weight:500;color:#2d3748;margin:0 0 6px}.detail-spouse-occupation{font-size:.95rem;color:#718096;margin:0}.detail-family-info{font-size:.95rem;color:#4a5568;margin:6px 0;display:flex;align-items:center;gap:8px}.detail-comments{font-size:.95rem;color:#4a5568;line-height:1.6;margin:0;background:#f7fafc;padding:16px;border-radius:8px;font-style:italic;border-left:4px solid #667eea}.detail-actions{display:flex;gap:12px;padding-top:25px;border-top:1px solid #e2e8f0;flex-wrap:wrap}.detail-action-btn{background:#fff;border:1px solid #cbd5e0;border-radius:8px;padding:12px 20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.detail-action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.detail-edit-btn{color:#667eea;border-color:#667eea}.detail-edit-btn:hover{background:#667eea;color:#fff}.detail-add-btn{color:#48bb78;border-color:#48bb78}.detail-add-btn:hover{background:#48bb78;color:#fff}.detail-delete-btn{color:#e53e3e;border-color:#e53e3e}.detail-delete-btn:hover{background:#e53e3e;color:#fff}.clickable-photo{cursor:pointer;transition:all .2s ease}.clickable-photo:hover{opacity:.9;transform:scale(1.05);box-shadow:0 6px 20px #0003}img[src*="ui-avatars.com"]{cursor:default!important}img[src*="ui-avatars.com"]:hover{transform:none!important;opacity:1!important;box-shadow:inherit!important}@media(max-width:768px){.detail-modal-content{margin:10px;max-width:95vw}.detail-header,.detail-body{padding:20px}.detail-person-section{flex-direction:column;align-items:center;text-align:center;gap:15px}.detail-avatar{width:100px;height:100px}.detail-spouse-info{flex-direction:column;align-items:center;text-align:center;gap:12px}.detail-spouse-avatar-img{width:60px;height:60px}.detail-actions{flex-direction:column}.detail-action-btn{justify-content:center}}@media(max-width:480px){.detail-modal-overlay{padding:10px}.detail-header,.detail-body{padding:15px}.detail-avatar{width:80px;height:80px}.detail-name{font-size:1.3rem}}.family-tree-container{min-height:100vh;width:100%;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column}.tree-header{background:#fff;padding:20px 30px;box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.header-content h1{color:#2d3748;margin:0;font-size:2rem;font-weight:600}.user-section{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.user-info{display:flex;align-items:center;gap:12px;font-size:.9rem;color:#4a5568}.user-actions{display:flex;justify-content:flex-end}.header-logout-btn{background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0;padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.header-logout-btn:hover{background:#edf2f7;border-color:#cbd5e0;transform:translateY(-1px)}.role-badge{padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:500;text-transform:uppercase}.role-badge.admin{background:#48bb78;color:#fff}.role-badge.viewer{background:#4299e1;color:#fff}.controls{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.search-section{flex-grow:1;max-width:500px}.search-bar{display:flex;gap:8px;margin-bottom:8px}.search-bar input{flex-grow:1;padding:10px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .2s}.search-bar input:focus{outline:none;border-color:#667eea}.search-btn,.clear-search-btn{background:#667eea;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s}.search-btn:hover,.clear-search-btn:hover{background:#5a67d8;transform:translateY(-1px)}.search-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.clear-search-btn{background:#e53e3e}.clear-search-btn:hover{background:#c53030}.search-info{font-size:.85rem;color:#718096}.search-info p{margin:0 0 4px}.search-hint{font-size:.8rem;color:#4a5568;font-style:italic;opacity:.8}.navigation-breadcrumbs{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #e2e8f0;margin-bottom:15px;overflow-x:auto;white-space:nowrap}.breadcrumb-item{background:transparent;border:1px solid transparent;padding:6px 12px;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;color:#4a5568;text-decoration:none;display:flex;align-items:center;gap:6px;min-width:fit-content}.breadcrumb-item:hover{background:#f7fafc;border-color:#cbd5e0;color:#2d3748}.breadcrumb-item.root{color:#667eea;font-weight:600}.breadcrumb-item.root:hover{background:#edf2f7;border-color:#667eea}.breadcrumb-item.current{background:#edf2f7;color:#2d3748;border-color:#cbd5e0;font-weight:600}.breadcrumb-separator{color:#a0aec0;font-weight:300;font-size:1rem;margin:0 4px}.level-nav-up{display:flex;justify-content:center;margin-bottom:20px;width:100%}.nav-btn-level-up{background:#fff;border:2px solid #667eea;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;font-weight:700;color:#667eea;transition:all .3s ease;box-shadow:0 4px 12px #00000026;position:relative;z-index:10}.nav-btn-level-up:hover:not(:disabled){background:#667eea;color:#fff;transform:scale(1.1);box-shadow:0 6px 20px #667eea66}.nav-btn-level-up:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.nav-btn-level-up{width:36px;height:36px;font-size:1.1rem}}@media(max-width:480px){.nav-btn-level-up{width:32px;height:32px;font-size:1rem}}.add-root-btn{background:#48bb78;color:#fff;border:none;padding:12px 20px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.add-root-btn:hover{background:#38a169;transform:translateY(-1px);box-shadow:0 4px 12px #48bb7866}.error-banner{background:#fed7d7;color:#c53030;padding:12px 20px;margin:0 30px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;border:1px solid #feb2b2}.dismiss-error{background:none;border:none;color:#c53030;cursor:pointer;font-size:1.2rem;padding:4px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px}.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-state p{color:#718096;font-size:1.1rem}.tree-content{padding:30px;flex:1;width:100%}.empty-state{text-align:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:500px;margin:0 auto}.empty-state h3{color:#2d3748;margin:0 0 15px;font-size:1.5rem}.empty-state p{color:#718096;margin:0 0 25px;line-height:1.5}.empty-add-btn{background:#48bb78;color:#fff;border:none;padding:14px 24px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.empty-add-btn:hover{background:#38a169;transform:translateY(-1px);box-shadow:0 4px 12px #48bb7866}.tree-view{overflow-x:auto;padding-bottom:20px}.tree-level{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:40px;margin-top:25px;padding-top:10px;width:100%;max-width:none}.tree-branch{display:flex;flex-direction:column;align-items:center}.children-container{margin-top:30px;position:relative}.children-container:before{content:"";position:absolute;top:-15px;left:50%;transform:translate(-50%);width:calc(100% - 40px);height:2px;background:#cbd5e0}.search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;justify-items:stretch;width:100%}@media(max-width:1200px){.tree-level{justify-content:center;width:100%}.search-results{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media(min-width:1400px){.search-results{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.tree-level{gap:30px}}@media(max-width:768px){.tree-header{padding:15px 20px}.header-content{flex-direction:column;align-items:flex-start;gap:15px;padding-right:0}.controls{flex-direction:column;width:100%;gap:15px}.search-section{max-width:none}.tree-content{padding:20px 15px}.tree-level{flex-direction:column;align-items:center}.search-results{grid-template-columns:1fr}}@media(max-width:480px){.header-content h1{font-size:1.5rem}.user-info{flex-direction:column;align-items:flex-start;gap:8px}.search-bar{flex-direction:column}.search-bar input{margin-bottom:8px}.error-banner{flex-direction:column;align-items:flex-start;gap:10px}.empty-state{padding:40px 15px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8fafc}.app-container{min-height:100vh;width:100vw;display:flex;flex-direction:column;overflow-x:hidden}.app-header{position:fixed;top:20px;right:20px;z-index:200}.logout-button{background:#fffffff2;color:#4a5568;border:1px solid #e2e8f0;padding:10px 16px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;gap:8px}.logout-button:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 16px #00000026;border-color:#cbd5e0}.app-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-loading p{font-size:1.2rem;font-weight:500}@media(max-width:768px){.app-header{top:10px;right:10px}.logout-button{padding:8px 12px;font-size:.9rem}}@media(max-width:480px){.logout-button{padding:6px 10px;font-size:.8rem}}.text-center{text-align:center}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.p-4{padding:1rem}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #667eea;outline-offset:2px}html{scroll-behavior:smooth}