*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#4caf50,#2196f3);min-height:100vh;padding:20px;line-height:1.6}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 10px 40px #0003;padding:30px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.user-info{display:flex;align-items:center;gap:15px}.user-email{color:#666;font-size:14px}.user-role{background:#4caf50;color:#fff;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase}.logout-btn{background:#f44336;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;transition:background .3s}.logout-btn:hover{background:#d32f2f}h1{color:#333;margin-bottom:10px}.subtitle{color:#666;margin-bottom:30px}.search-box{margin-bottom:30px}input[type=text]{width:100%;padding:12px;font-size:16px;border:2px solid #ddd;border-radius:6px;transition:border-color .3s}input[type=text]:focus{outline:none;border-color:#4caf50}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:8px;text-align:center}.stat-number{font-size:36px;font-weight:700}.stat-label{font-size:14px;opacity:.9;margin-top:5px}.loading{text-align:center;padding:40px;color:#666}.error{background:#ffebee;color:#c62828;padding:20px;border-radius:8px;margin-bottom:20px}.hidden{display:none}@media(max-width:768px){.stats{grid-template-columns:1fr}.header{flex-direction:column;gap:15px}}.person-detail-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;border-radius:8px;margin-bottom:30px}.person-detail-header h2{margin:0 0 10px;font-size:32px}.person-lifespan{font-size:18px;opacity:.9}.detail-section{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:25px;margin-bottom:20px}.detail-section h3{color:#333;margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid #f0f0f0;font-size:20px}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:15px}.info-item{display:flex;flex-direction:column}.info-label{font-weight:600;color:#666;font-size:14px;margin-bottom:5px}.info-value{color:#333;font-size:16px}.timeline-event{padding:15px;border-left:3px solid #667eea;margin-bottom:15px;background:#f8f9fa;border-radius:4px}.timeline-event-type{font-weight:600;color:#667eea;text-transform:capitalize;margin-bottom:5px}.timeline-event-date{color:#666;font-size:14px;margin-bottom:5px}.timeline-event-place{color:#666;font-size:14px;font-style:italic}.timeline-event-description{color:#333;margin-top:8px}.relationship-list{display:flex;flex-direction:column;gap:10px}.relationship-item{display:flex;align-items:center;padding:12px;background:#f8f9fa;border-radius:6px;cursor:pointer;transition:all .2s}.relationship-item:hover{background:#e3f2fd;transform:translate(5px)}.relationship-type{font-weight:600;color:#667eea;min-width:100px}.relationship-name{color:#333;flex:1}.relationship-dates{color:#666;font-size:14px}.no-data{color:#999;font-style:italic;padding:15px;text-align:center}.admin-section{background:#fff3e0;border:1px solid #ffb74d}.admin-section h3{color:#e65100}.edit-btn{background:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;margin-top:15px;font-size:14px}#back-to-list-btn{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;margin-bottom:20px;font-size:14px;display:flex;align-items:center;gap:8px}.family-tree-cards{margin:20px 0 30px;max-width:100%}.family-section-header{font-size:14px;font-weight:700;color:#667eea;text-transform:uppercase;letter-spacing:.5px;margin:25px 0 12px;padding-left:8px;border-left:4px solid #667eea}.family-section-header:first-child{margin-top:0}.family-group{position:relative;padding-left:20px;border-left:2px solid #e5e7eb;margin-left:8px;margin-bottom:20px}.family-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;transition:all .2s;cursor:pointer;position:relative}.family-card:hover{background:#e3f2fd;transform:translate(5px);box-shadow:0 2px 4px #0000001a}.family-card.current{background:linear-gradient(135deg,#667eea15,#764ba215);border:2px solid #667eea;padding:16px 18px;box-shadow:0 2px 8px #667eea26;cursor:default}.family-card.current:hover{transform:none}.family-card.deceased{background:#fafafa;border-color:#d1d5db}.family-card.deceased .family-card-name{color:#6b7280}.family-group .family-card:before{content:"";position:absolute;left:-20px;top:50%;width:12px;height:2px;background:#d1d5db}.family-card-info{flex:1}.family-card-name{font-weight:600;color:#1f2937;font-size:15px;margin-bottom:2px}.family-card-years{color:#6b7280;font-size:13px}.family-badge{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.family-badge-parent{background:#dbeafe;color:#1e40af}.family-badge-spouse{background:#fce7f3;color:#be185d}.family-badge-child{background:#dcfce7;color:#15803d}.family-badge-sibling{background:#fef3c7;color:#a16207}.current-person-section{margin:30px 0;padding:20px;background:#f8f9ff;border-radius:8px;border:2px dashed #667eea}.current-person-label{font-size:12px;font-weight:700;color:#667eea;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.marriage-group{background:#fafbff;border:1px solid #e0e7ff;border-radius:8px;padding:16px;margin-bottom:20px}.marriage-group-header{font-size:12px;font-weight:600;color:#667eea;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.marriage-number{background:#667eea;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:6px}.children-group{margin-top:12px;padding-left:20px;border-left:2px solid #e5e7eb;margin-left:8px}.children-group .family-card{position:relative}.children-group .family-card:before{content:"";position:absolute;left:-20px;top:50%;width:12px;height:2px;background:#d1d5db}.children-label{font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-left:8px}@media(max-width:768px){.person-detail-header h2{font-size:24px}.info-grid{grid-template-columns:1fr}.family-tree-cards{margin:15px 0 20px}.family-card{padding:12px 14px}.marriage-group{padding:12px}}#toast-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:400px;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;border-left:4px solid #3b82f6;opacity:0;transform:translate(400px);transition:all .3s ease;pointer-events:auto;max-width:100%;word-wrap:break-word}.toast-show{opacity:1;transform:translate(0)}.toast-hide{opacity:0;transform:translate(400px)}.toast-success{border-left-color:#10b981;background:#f0fdf4}.toast-success .toast-icon{color:#10b981;background:#dcfce7}.toast-error{border-left-color:#ef4444;background:#fef2f2}.toast-error .toast-icon{color:#ef4444;background:#fee2e2}.toast-warning{border-left-color:#f59e0b;background:#fffbeb}.toast-warning .toast-icon{color:#f59e0b;background:#fef3c7}.toast-info{border-left-color:#3b82f6;background:#eff6ff}.toast-info .toast-icon{color:#3b82f6;background:#dbeafe}.toast-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:16px;flex-shrink:0}.toast-message{flex:1;color:#1f2937;font-size:14px;line-height:1.5;font-weight:500}.toast-close{background:none;border:none;color:#6b7280;font-size:22px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s;flex-shrink:0}.toast-close:hover{background:#0000000d;color:#1f2937}@media(max-width:640px){#toast-container{top:10px;right:10px;left:10px;max-width:none}.toast{transform:translateY(-100px)}.toast-show{transform:translateY(0)}.toast-hide{transform:translateY(-100px)}}.confirm-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10001;opacity:0;transition:opacity .2s ease}.confirm-overlay.confirm-show{opacity:1}.confirm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:420px;width:90%;overflow:hidden;transform:scale(.95);transition:transform .2s ease}.confirm-show .confirm-modal{transform:scale(1)}.confirm-header{padding:20px 24px 16px;border-bottom:1px solid #e5e7eb}.confirm-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2937}.confirm-body{padding:20px 24px}.confirm-body p{margin:0;font-size:15px;line-height:1.6;color:#4b5563}.confirm-footer{padding:16px 24px 20px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #e5e7eb;background:#f9fafb}.confirm-btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.confirm-btn-primary{background:#3b82f6;color:#fff}.confirm-btn-primary:hover{background:#2563eb}.confirm-btn-primary:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.confirm-btn-secondary{background:#fff;color:#374151;border:1px solid #d1d5db}.confirm-btn-secondary:hover{background:#f3f4f6}.confirm-btn-secondary:focus{outline:none;box-shadow:0 0 0 3px #d1d5db4d}.confirm-btn-danger{background:#ef4444;color:#fff}.confirm-btn-danger:hover{background:#dc2626}.confirm-btn-danger:focus{outline:none;box-shadow:0 0 0 3px #ef44444d}@media(max-width:640px){.confirm-modal{max-width:90%}.confirm-header,.confirm-body,.confirm-footer{padding-left:16px;padding-right:16px}.confirm-footer{flex-direction:column-reverse}.confirm-btn{width:100%}}.edit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e5e7eb}.edit-header h2{margin:0;color:#1f2937}.edit-actions{display:flex;gap:10px}.edit-form{max-width:900px}.form-section{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;margin-bottom:24px}.form-section h3{margin:0 0 20px;color:#1f2937;font-size:18px;font-weight:600}.form-section h4{margin:0 0 15px;color:#4b5563;font-size:16px;font-weight:500}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-group{display:flex;flex-direction:column;margin-bottom:16px}.form-group:last-child{margin-bottom:0}.form-group label{font-weight:500;color:#374151;margin-bottom:6px;font-size:14px}.form-group input[type=text],.form-group input[type=number],.form-group select,.form-group textarea{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-group input.error,.form-group select.error,.form-group textarea.error{border-color:#ef4444;background:#fef2f2}.form-group input.error:focus,.form-group select.error:focus,.form-group textarea.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.form-group textarea{resize:vertical;min-height:80px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label span{font-weight:500;color:#374151}.death-fields{margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb;transition:opacity .2s}.death-fields.hidden{display:none}#events-list{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}.event-form{border:1px solid #e5e7eb;border-radius:6px;padding:16px;background:#f9fafb}.event-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.event-form-header h4{margin:0;color:#4b5563;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.btn-primary,.btn-secondary,.btn-delete{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}.btn-primary:disabled{background:#9ca3af;cursor:not-allowed}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb}.btn-delete{background:#fee;color:#dc2626;padding:6px 12px;font-size:13px}.btn-delete:hover{background:#fecaca}@media(max-width:768px){.edit-header{flex-direction:column;align-items:stretch;gap:16px}.edit-actions{flex-direction:column}.form-row{grid-template-columns:1fr}.form-section{padding:16px}}.loading{text-align:center;padding:40px;color:#6b7280}.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:16px;border-radius:6px;margin:20px 0}.person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.person-card{border:1px solid #e0e0e0;border-radius:8px;padding:20px;transition:all .3s;cursor:pointer}.person-card:hover{box-shadow:0 8px 24px #667eea4d;transform:translateY(-5px) scale(1.02)}.person-name{font-size:20px;font-weight:700;color:#333;margin-bottom:10px}.person-details{color:#666;font-size:14px}.person-detail{margin:5px 0;display:flex;align-items:center}.person-detail:before{content:"•";margin-right:8px;color:#4caf50}.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;margin-left:8px}.badge-living{background:#4caf50;color:#fff}.badge-deceased{background:#757575;color:#fff}@media(max-width:768px){.person-grid{grid-template-columns:1fr}}.add-person-container{max-width:800px;margin:0 auto;padding:20px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.page-header h1{margin:0}.person-form{background:#fff;border-radius:8px;padding:30px;box-shadow:0 2px 4px #0000001a}.form-section{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #e0e0e0}.form-section:last-of-type{border-bottom:none}.form-section h2{font-size:18px;margin-bottom:20px;color:#333}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#555}.form-group label.required:after{content:" *";color:#d32f2f}.form-group input[type=text],.form-group input[type=number],.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit}.form-group input[type=text]:focus,.form-group input[type=number]:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.form-group input[type=checkbox]{margin-right:8px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:30px}.typeahead-container{position:relative}.typeahead-results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.typeahead-item{padding:10px 15px;cursor:pointer;border-bottom:1px solid #f0f0f0}.typeahead-item:last-child{border-bottom:none}.typeahead-item:hover{background-color:#f5f5f5}.typeahead-item.no-results{cursor:default;color:#999}.typeahead-item.no-results:hover{background-color:transparent}.selected-person{margin-top:10px}.selected-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:#e3f2fd;border:1px solid #90caf9;border-radius:4px;font-size:14px}.remove-btn{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:#666;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.remove-btn:hover{color:#d32f2f}.btn-primary{background-color:#1976d2;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}.btn-primary:hover{background-color:#1565c0}.btn-secondary{background-color:transparent;color:#1976d2;border:1px solid #1976d2;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}.btn-secondary:hover{background-color:#f5f5f5}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}@media(max-width:768px){.add-person-container{padding:10px}.person-form{padding:20px}.form-row{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:flex-start;gap:15px}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.list-header{flex-direction:column;align-items:stretch;gap:10px}.list-header button{width:100%}}#back-to-list-from-add{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;margin-bottom:20px;font-size:14px;display:flex;align-items:center;gap:8px}#back-to-list-from-add:hover{background:#5568d3}.auth-container{max-width:400px;margin:100px auto;background:#fff;border-radius:8px;box-shadow:0 10px 40px #0003;padding:40px;text-align:center}.auth-container h1{color:#333;margin-bottom:10px}.auth-container p{color:#666;margin-bottom:30px}.auth-form{display:flex;flex-direction:column;gap:15px}.form-group{text-align:left}.form-group label{display:block;color:#333;font-weight:500;margin-bottom:5px;font-size:14px}.form-group input{width:100%;padding:12px;border:2px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.auth-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;transition:transform .2s;margin-top:10px}.auth-btn:hover{transform:translateY(-2px)}.auth-btn:disabled{opacity:.6;cursor:not-allowed}.auth-toggle{margin-top:20px;color:#666;font-size:14px}.auth-toggle button{background:none;border:none;color:#667eea;cursor:pointer;font-weight:700;text-decoration:underline}.error-message{background:#ffebee;color:#c62828;padding:12px;border-radius:6px;margin-bottom:15px;font-size:14px}.success-message{background:#e8f5e9;color:#2e7d32;padding:12px;border-radius:6px;margin-bottom:15px;font-size:14px}