.navigation{background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:var(--z-sticky)}.navigation-container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;height:var(--nav-height)}.navigation-brand{flex:0 0 auto}.brand-link{text-decoration:none;color:inherit}.brand-link h1{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navigation-links{display:flex;gap:var(--spacing-sm);flex:1;justify-content:center}.nav-link{padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;color:var(--color-text-tertiary);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-base);position:relative}.nav-link:hover,.nav-link.active{color:var(--color-primary);background:var(--color-primary-light)}.nav-link.active:after{content:"";position:absolute;bottom:-1px;left:var(--spacing-md);right:var(--spacing-md);height:2px;background:var(--color-primary);border-radius:var(--radius-md) var(--radius-md) 0 0}.navigation-user{display:flex;align-items:center;gap:var(--spacing-md);flex:0 0 auto}.user-name{color:var(--color-text-tertiary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);color:var(--color-text-tertiary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base)}.logout-button:hover{background:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger-dark)}.logout-button:active{transform:scale(.98)}@media(max-width:768px){.navigation-container{padding:0 var(--spacing-md);height:56px}.brand-link h1{font-size:var(--font-size-xl)}.navigation-links{gap:var(--spacing-xs)}.nav-link{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm)}.user-name{display:none}.logout-button{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-xs)}}.layout{min-height:100vh;display:flex;flex-direction:column}.layout-main{flex:1;padding:0}.layout-footer{background:var(--color-bg-tertiary);border-top:1px solid var(--color-border-light);padding:var(--spacing-lg) 0;margin-top:auto}.footer-content{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-lg);text-align:center}.footer-content p{margin:0;color:var(--color-text-tertiary);font-size:var(--font-size-sm)}@media(max-width:768px){.footer-content{padding:0 var(--spacing-md)}.footer-content p{font-size:var(--font-size-xs)}}.loading-spinner-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl)}.loading-spinner-fullscreen{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;position:fixed;top:0;left:0;background-color:#ffffffe6;z-index:var(--z-modal)}.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.spinner{border:3px solid rgba(102,126,234,.2);border-top:3px solid var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.spinner-small{width:var(--spacing-lg);height:var(--spacing-lg);border-width:2px}.spinner-medium{width:40px;height:40px}.spinner-large{width:60px;height:60px;border-width:4px}.loading-message{margin:0;color:var(--color-text-tertiary);font-size:var(--font-size-sm);text-align:center}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:var(--spacing-xl)}.login-container{background:var(--color-bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--spacing-2xl);width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:var(--spacing-xl)}.login-header h1{font-size:var(--font-size-3xl);color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0;font-weight:var(--font-weight-semibold)}.login-subtitle{color:var(--color-text-tertiary);margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-sm)}.login-note{background:var(--color-warning-light);border:1px solid var(--color-warning);border-radius:var(--radius-md);padding:var(--spacing-md);font-size:var(--font-size-xs);color:var(--color-warning-dark);margin:var(--spacing-md) 0 0 0}.login-note strong{display:block;margin-bottom:var(--spacing-xs)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-xl)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.form-group input{padding:var(--spacing-md);border:1px solid var(--color-border-medium);border-radius:var(--radius-md);font-size:var(--font-size-sm);transition:border-color var(--transition-base)}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.form-hint{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:-4px}.login-error{background:var(--color-danger-light);border:1px solid var(--color-danger);color:var(--color-danger-dark);padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.login-button{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-primary);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color var(--transition-base);margin-top:var(--spacing-sm)}.login-button:hover:not(:disabled){background:var(--color-primary-hover)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:var(--spacing-lg);text-align:center}.login-footer p{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}.login-success{text-align:center;padding:var(--spacing-xl)}.login-success h2{color:var(--color-success);margin:0 0 var(--spacing-md) 0}.login-success p{color:var(--color-text-tertiary);margin:0}.photo-upload{max-width:800px;margin:0 auto;padding:var(--spacing-xl);font-family:var(--font-family-base)}.photo-upload-header{text-align:center;margin-bottom:var(--spacing-xl)}.photo-upload-header h3{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}.photo-upload-header p{margin:var(--spacing-xs) 0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}.upload-info{font-size:var(--font-size-xs)!important;color:var(--color-text-muted)!important}.upload-dropzone{border:2px dashed var(--color-border-medium);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-xl);text-align:center;background-color:var(--color-bg-tertiary);transition:all var(--transition-slow);cursor:pointer;margin-bottom:var(--spacing-xl)}.upload-dropzone:hover{border-color:var(--color-primary);background-color:var(--color-primary-light)}.upload-dropzone.drag-active{border-color:var(--color-primary);background-color:var(--color-primary-light);transform:scale(1.02)}.upload-dropzone.disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-bg-tertiary)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);pointer-events:none}.upload-icon{font-size:48px;opacity:.6}.upload-dropzone p{margin:0;font-size:var(--font-size-base);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.photo-upload-list{background:var(--color-bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}.upload-list-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-light)}.upload-list-header h4{margin:0;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.clear-all-btn{background:var(--color-danger);color:var(--color-text-inverse);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:background-color var(--transition-base);font-weight:var(--font-weight-medium)}.clear-all-btn:hover:not(:disabled){background:var(--color-danger-dark)}.clear-all-btn:disabled{opacity:.5;cursor:not-allowed}.photo-list{max-height:400px;overflow-y:auto}.photo-item{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-xl);border-bottom:1px solid var(--color-border-light);gap:var(--spacing-md)}.photo-item:last-child{border-bottom:none}.photo-upload-preview{flex-shrink:0}.preview-container{position:relative;width:80px;height:80px;border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-bg-tertiary)}.preview-image{width:100%;height:100%;object-fit:cover}.preview-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--color-bg-tertiary);color:var(--color-text-muted)}.placeholder-icon{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-xs)}.placeholder-text{font-size:var(--font-size-xs);text-align:center}.preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#000000b3;color:var(--color-text-inverse)}.preview-overlay.uploading,.preview-overlay.validating{background-color:#667eeacc}.preview-overlay.completed{background-color:#28a745cc}.preview-overlay.error{background-color:#dc3545cc}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkmark,.error-icon{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.preview-info{flex:1;min-width:0}.file-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-type{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-transform:uppercase}.photo-upload-progress{flex:1;min-width:0}.progress-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.status-icon{font-size:var(--font-size-base)}.status-text{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.file-size{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-left:auto}.progress-bar-container{width:100%;height:6px;background-color:var(--color-border-light);border-radius:var(--radius-sm);overflow:hidden}.progress-bar{height:100%;transition:width var(--transition-slow);border-radius:var(--radius-sm)}.photo-upload-validation{flex:1;min-width:0}.validation-message{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-danger-light);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger-dark)}.validation-icon{font-size:var(--font-size-base)}.validation-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.photo-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0}.retry-btn,.remove-btn{padding:var(--spacing-xs) var(--spacing-md);border:none;border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base)}.retry-btn{background-color:var(--color-primary);color:var(--color-text-inverse)}.retry-btn:hover{background-color:var(--color-primary-hover)}.remove-btn{background-color:var(--color-neutral-600);color:var(--color-text-inverse)}.remove-btn:hover:not(:disabled){background-color:var(--color-neutral-700)}.remove-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.photo-upload{padding:var(--spacing-md)}.photo-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.photo-actions{width:100%;justify-content:flex-end}.upload-dropzone{padding:var(--spacing-xl) var(--spacing-md)}.upload-icon{font-size:36px}}.upload-page{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-lg)}.upload-header{margin-bottom:var(--spacing-xl);text-align:center}.upload-header h1{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.upload-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-base)}.upload-container{background:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.upload-error,.upload-loading{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-tertiary)}.upload-loading h2{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.upload-loading p{color:var(--color-text-muted);font-size:var(--font-size-sm)}.gallery-page{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-lg)}.gallery-header{margin-bottom:var(--spacing-xl);text-align:center}.gallery-header h1{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.gallery-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-base)}.gallery-container{background:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-lg);box-shadow:var(--shadow-md)}.gallery-placeholder{text-align:center;padding:var(--spacing-3xl) var(--spacing-lg)}.placeholder-icon{font-size:var(--spacing-3xl);margin-bottom:var(--spacing-lg)}.gallery-placeholder h2{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.gallery-placeholder p{color:var(--color-text-tertiary);font-size:var(--font-size-base);line-height:var(--line-height-base);max-width:500px;margin:0 auto}@media(max-width:768px){.gallery-page{padding:var(--spacing-md)}.gallery-header h1{font-size:var(--font-size-2xl)}.gallery-container{padding:var(--spacing-xl) var(--spacing-md)}.placeholder-icon{font-size:var(--spacing-2xl)}.gallery-placeholder h2{font-size:var(--font-size-xl)}.gallery-placeholder p{font-size:var(--font-size-sm)}}.family-management-page{min-height:100vh;background:var(--color-bg-secondary, #f5f5f5);padding:var(--spacing-xl, 2rem)}.family-management-container{max-width:1400px;margin:0 auto}.family-management-header{margin-bottom:var(--spacing-xl, 2rem);text-align:center}.family-management-header h1{font-size:var(--font-size-3xl, 2rem);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, #333);margin-bottom:var(--spacing-sm, .5rem)}.family-management-header p{color:var(--color-text-secondary, #666);font-size:var(--font-size-base, 1rem)}.family-management-content{display:grid;grid-template-columns:350px 1fr;gap:var(--spacing-xl, 2rem);background:var(--color-bg-primary, #fff);border-radius:var(--radius-xl, 12px);box-shadow:var(--shadow-md, 0 2px 8px rgba(0, 0, 0, .1));overflow:hidden}.families-sidebar{background:var(--color-bg-tertiary, #f9f9f9);border-right:1px solid var(--color-border-light, #e0e0e0);padding:var(--spacing-xl, 2rem);overflow-y:auto;max-height:calc(100vh - 200px)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg, 1.5rem)}.sidebar-header h2{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #333);margin:0}.families-list{display:flex;flex-direction:column;gap:var(--spacing-md, 1rem)}.family-card{background:var(--color-bg-primary, #fff);border:2px solid var(--color-border-light, #e0e0e0);border-radius:var(--radius-lg, 8px);padding:var(--spacing-lg, 1.5rem);cursor:pointer;transition:all .2s ease}.family-card:hover{border-color:var(--color-primary, #007bff);box-shadow:var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.family-card.active{border-color:var(--color-primary, #007bff);background:var(--color-primary-light, #e7f3ff)}.family-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:var(--spacing-sm, .5rem)}.family-card-header h3{font-size:var(--font-size-lg, 1.25rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #333);margin:0;flex:1}.family-description{color:var(--color-text-secondary, #666);font-size:var(--font-size-sm, .875rem);margin:var(--spacing-sm, .5rem) 0;line-height:1.5}.family-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md, 1rem);padding-top:var(--spacing-md, 1rem);border-top:1px solid var(--color-border-light, #e0e0e0);font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #999)}.family-id{font-family:var(--font-family-mono, monospace);font-size:var(--font-size-xs, .75rem)}.family-details-panel{padding:var(--spacing-xl, 2rem);overflow-y:auto;max-height:calc(100vh - 200px)}.panel-header{margin-bottom:var(--spacing-xl, 2rem);padding-bottom:var(--spacing-lg, 1.5rem);border-bottom:2px solid var(--color-border-light, #e0e0e0)}.panel-header h2{font-size:var(--font-size-2xl, 1.75rem);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, #333);margin-bottom:var(--spacing-md, 1rem)}.tabs{display:flex;gap:var(--spacing-md, 1rem)}.tabs button{padding:var(--spacing-sm, .5rem) var(--spacing-lg, 1.5rem);border:none;background:transparent;color:var(--color-text-secondary, #666);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.tabs button:hover{color:var(--color-primary, #007bff)}.tabs button.active{color:var(--color-primary, #007bff);border-bottom-color:var(--color-primary, #007bff)}.members-section,.invitations-section{margin-top:var(--spacing-lg, 1.5rem)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg, 1.5rem)}.section-header h3{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #333);margin:0}.members-list,.invitations-list{display:flex;flex-direction:column;gap:var(--spacing-md, 1rem)}.member-card,.invitation-card{background:var(--color-bg-secondary, #f9f9f9);border:1px solid var(--color-border-light, #e0e0e0);border-radius:var(--radius-lg, 8px);padding:var(--spacing-lg, 1.5rem);display:flex;justify-content:space-between;align-items:center}.member-info,.invitation-info{flex:1}.member-email,.invitation-email{font-size:var(--font-size-lg, 1.25rem);font-weight:var(--font-weight-medium, 500);color:var(--color-text-primary, #333);margin-bottom:var(--spacing-xs, .25rem)}.member-details,.invitation-details{display:flex;gap:var(--spacing-md, 1rem);align-items:center;flex-wrap:wrap}.member-joined,.invitation-sent,.invitation-expires{font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #999)}.member-actions{display:flex;gap:var(--spacing-md, 1rem);align-items:center}.role-select{padding:var(--spacing-sm, .5rem) var(--spacing-md, 1rem);border:1px solid var(--color-border-medium, #ccc);border-radius:var(--radius-md, 6px);font-size:var(--font-size-sm, .875rem);background:var(--color-bg-primary, #fff);color:var(--color-text-primary, #333)}.role-badge{display:inline-block;padding:var(--spacing-xs, .25rem) var(--spacing-sm, .5rem);border-radius:var(--radius-sm, 4px);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);text-transform:uppercase}.role-badge.role-admin{background:var(--color-danger-light, #fee);color:var(--color-danger, #dc3545)}.role-badge.role-editor{background:var(--color-warning-light, #fff3cd);color:var(--color-warning, #ffc107)}.role-badge.role-viewer{background:var(--color-info-light, #d1ecf1);color:var(--color-info, #17a2b8)}.status-badge{display:inline-block;padding:var(--spacing-xs, .25rem) var(--spacing-sm, .5rem);border-radius:var(--radius-sm, 4px);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);text-transform:uppercase}.status-badge.status-pending{background:var(--color-warning-light, #fff3cd);color:var(--color-warning, #ffc107)}.status-badge.status-accepted{background:var(--color-success-light, #d4edda);color:var(--color-success, #28a745)}.btn-primary,.btn-secondary,.btn-danger{padding:var(--spacing-sm, .5rem) var(--spacing-lg, 1.5rem);border:none;border-radius:var(--radius-md, 6px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500);cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--color-primary, #007bff);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark, #0056b3)}.btn-secondary{background:var(--color-bg-tertiary, #f9f9f9);color:var(--color-text-primary, #333);border:1px solid var(--color-border-medium, #ccc)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-secondary, #e9e9e9)}.btn-danger{background:var(--color-danger, #dc3545);color:#fff}.btn-danger:hover:not(:disabled){background:var(--color-danger-dark, #c82333)}.btn-small{padding:var(--spacing-xs, .25rem) var(--spacing-md, 1rem);font-size:var(--font-size-sm, .875rem)}.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled{opacity:.6;cursor:not-allowed}.empty-state,.loading-state,.no-family-selected{text-align:center;padding:var(--spacing-2xl, 3rem);color:var(--color-text-secondary, #666)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--color-bg-primary, #fff);border-radius:var(--radius-xl, 12px);box-shadow:var(--shadow-xl, 0 10px 40px rgba(0, 0, 0, .2));width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl, 2rem);border-bottom:1px solid var(--color-border-light, #e0e0e0)}.modal-header h2{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #333);margin:0}.modal-close{background:none;border:none;font-size:var(--font-size-2xl, 1.75rem);color:var(--color-text-secondary, #666);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm, 4px);transition:all .2s ease}.modal-close:hover{background:var(--color-bg-secondary, #f5f5f5);color:var(--color-text-primary, #333)}.modal-form{padding:var(--spacing-xl, 2rem)}.form-group{margin-bottom:var(--spacing-lg, 1.5rem)}.form-group label{display:block;margin-bottom:var(--spacing-xs, .25rem);font-weight:var(--font-weight-medium, 500);color:var(--color-text-primary, #333)}.form-group input,.form-group textarea,.form-group select{width:100%;padding:var(--spacing-sm, .5rem) var(--spacing-md, 1rem);border:1px solid var(--color-border-medium, #ccc);border-radius:var(--radius-md, 6px);font-size:var(--font-size-base, 1rem);font-family:inherit}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-primary, #007bff);box-shadow:0 0 0 3px #007bff1a}.modal-actions{display:flex;gap:var(--spacing-md, 1rem);justify-content:flex-end;margin-top:var(--spacing-xl, 2rem)}@media(max-width:1024px){.family-management-content{grid-template-columns:1fr}.families-sidebar{border-right:none;border-bottom:1px solid var(--color-border-light, #e0e0e0);max-height:300px}.families-list{flex-direction:row;overflow-x:auto}.family-card{min-width:280px}}.not-found-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg-tertiary) 0%,var(--color-neutral-200) 100%);padding:var(--spacing-xl)}.not-found-container{text-align:center;max-width:600px;width:100%}.not-found-content{background:var(--color-bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-xl);box-shadow:var(--shadow-xl)}.not-found-code{font-size:120px;font-weight:var(--font-weight-bold);margin:0;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:var(--line-height-tight)}.not-found-title{font-size:var(--font-size-3xl);color:var(--color-text-primary);margin:var(--spacing-md) 0;font-weight:var(--font-weight-semibold)}.not-found-message{font-size:var(--font-size-base);color:var(--color-text-tertiary);margin:0 0 var(--spacing-xl) 0;line-height:var(--line-height-base)}.not-found-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.not-found-button{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-primary);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);text-decoration:none;cursor:pointer;transition:all var(--transition-base);display:inline-block}.not-found-button:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.not-found-button.secondary{background:var(--color-bg-tertiary);color:var(--color-text-tertiary);border:1px solid var(--color-border-light)}.not-found-button.secondary:hover{background:var(--color-border-medium);color:var(--color-text-primary);box-shadow:var(--shadow-lg)}@media(max-width:768px){.not-found-content{padding:var(--spacing-xl) var(--spacing-lg)}.not-found-code{font-size:80px}.not-found-title{font-size:var(--font-size-2xl)}.not-found-message{font-size:var(--font-size-sm)}.not-found-actions{flex-direction:column}.not-found-button{width:100%}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}:root{--color-primary: #667eea;--color-primary-hover: #5568d3;--color-primary-light: #e8f0ff;--color-primary-dark: #4c63d2;--color-secondary: #764ba2;--color-secondary-light: #f3e8ff;--color-success: #28a745;--color-success-light: #d4edda;--color-success-dark: #218838;--color-danger: #dc3545;--color-danger-light: #f8d7da;--color-danger-dark: #c82333;--color-warning: #ffc107;--color-warning-light: #fff3cd;--color-warning-dark: #e0a800;--color-info: #17a2b8;--color-info-light: #d1ecf1;--color-info-dark: #138496;--color-neutral-50: #f8f9fa;--color-neutral-100: #f1f3f5;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;--color-text-primary: #212529;--color-text-secondary: #495057;--color-text-tertiary: #6c757d;--color-text-muted: #adb5bd;--color-text-inverse: #ffffff;--color-bg-primary: #ffffff;--color-bg-secondary: #f8f9fa;--color-bg-tertiary: #f1f3f5;--color-bg-overlay: rgba(0, 0, 0, .5);--color-border-light: #e9ecef;--color-border-medium: #dee2e6;--color-border-dark: #ced4da;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1);--shadow-xl: 0 10px 40px rgba(0, 0, 0, .1);--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Courier New", Courier, monospace;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 32px;--font-size-4xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-base: 1.5;--line-height-loose: 1.75;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080;--container-max-width: 1200px;--nav-height: 64px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px}[data-theme=dark]{--color-primary: #818cf8;--color-primary-hover: #6366f1;--color-primary-light: #312e81;--color-primary-dark: #4f46e5;--color-success: #34d399;--color-success-light: #064e3b;--color-success-dark: #10b981;--color-danger: #f87171;--color-danger-light: #7f1d1d;--color-danger-dark: #ef4444;--color-warning: #fbbf24;--color-warning-light: #78350f;--color-warning-dark: #f59e0b;--color-text-primary: #f8f9fa;--color-text-secondary: #e9ecef;--color-text-tertiary: #dee2e6;--color-text-muted: #adb5bd;--color-text-inverse: #212529;--color-bg-primary: #1a1a1a;--color-bg-secondary: #2a2a2a;--color-bg-tertiary: #3a3a3a;--color-border-light: #3a3a3a;--color-border-medium: #4a4a4a;--color-border-dark: #5a5a5a}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-bg-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-base)}h6{font-size:var(--font-size-sm)}p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--color-primary-hover);text-decoration:underline}code,pre{font-family:var(--font-family-mono);font-size:var(--font-size-sm)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;transition:all var(--transition-base)}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}.error-boundary{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:var(--spacing-xl);background-color:var(--color-bg-secondary)}.error-boundary-content{max-width:600px;padding:var(--spacing-xl);background:var(--color-bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center}.error-boundary-content h2{color:var(--color-danger);margin-bottom:var(--spacing-md)}.error-details{margin:var(--spacing-lg) 0;text-align:left}.error-details summary{cursor:pointer;color:var(--color-text-tertiary);margin-bottom:var(--spacing-sm)}.error-message,.error-stack{background-color:var(--color-bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;font-size:var(--font-size-sm);font-family:var(--font-family-mono);margin-top:var(--spacing-sm)}.error-actions{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-lg)}.error-retry-btn,.error-reload-btn{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-weight-medium)}.error-retry-btn{background-color:var(--color-primary);color:var(--color-text-inverse)}.error-retry-btn:hover{background-color:var(--color-primary-hover)}.error-reload-btn{background-color:var(--color-neutral-600);color:var(--color-text-inverse)}.error-reload-btn:hover{background-color:var(--color-neutral-700)}.upload-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.upload-loading h2{margin-bottom:var(--spacing-md);color:var(--color-text-tertiary)}:focus{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}}.m-0{margin:0}.m-auto{margin:0 auto}.mt-0{margin-top:0}.mt-xs{margin-top:var(--spacing-xs)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mt-2xl{margin-top:var(--spacing-2xl)}.mb-0{margin-bottom:0}.mb-xs{margin-bottom:var(--spacing-xs)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.mb-2xl{margin-bottom:var(--spacing-2xl)}.ml-0{margin-left:0}.ml-xs{margin-left:var(--spacing-xs)}.ml-sm{margin-left:var(--spacing-sm)}.ml-md{margin-left:var(--spacing-md)}.ml-lg{margin-left:var(--spacing-lg)}.mr-0{margin-right:0}.mr-xs{margin-right:var(--spacing-xs)}.mr-sm{margin-right:var(--spacing-sm)}.mr-md{margin-right:var(--spacing-md)}.mr-lg{margin-right:var(--spacing-lg)}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-sm{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.my-md{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}.my-lg{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.p-0{padding:0}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.pt-0{padding-top:0}.pt-sm{padding-top:var(--spacing-sm)}.pt-md{padding-top:var(--spacing-md)}.pt-lg{padding-top:var(--spacing-lg)}.pt-xl{padding-top:var(--spacing-xl)}.pb-0{padding-bottom:0}.pb-sm{padding-bottom:var(--spacing-sm)}.pb-md{padding-bottom:var(--spacing-md)}.pb-lg{padding-bottom:var(--spacing-lg)}.pb-xl{padding-bottom:var(--spacing-xl)}.pl-0{padding-left:0}.pl-sm{padding-left:var(--spacing-sm)}.pl-md{padding-left:var(--spacing-md)}.pl-lg{padding-left:var(--spacing-lg)}.pr-0{padding-right:0}.pr-sm{padding-right:var(--spacing-sm)}.pr-md{padding-right:var(--spacing-md)}.pr-lg{padding-right:var(--spacing-lg)}.px-0{padding-left:0;padding-right:0}.px-sm{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.px-md{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.px-lg{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.py-0{padding-top:0;padding-bottom:0}.py-sm{padding-top:var(--spacing-sm);padding-bottom:var(--spacing-sm)}.py-md{padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}.py-lg{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-grid{display:grid}.d-inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-muted{color:var(--color-text-muted)}.text-inverse{color:var(--color-text-inverse)}.text-brand{color:var(--color-primary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.no-underline{text-decoration:none}.underline{text-decoration:underline}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bg-primary{background-color:var(--color-bg-primary)}.bg-secondary{background-color:var(--color-bg-secondary)}.bg-tertiary{background-color:var(--color-bg-tertiary)}.bg-brand{background-color:var(--color-primary)}.bg-success{background-color:var(--color-success-light)}.bg-danger{background-color:var(--color-danger-light)}.bg-warning{background-color:var(--color-warning-light)}.bg-info{background-color:var(--color-info-light)}.border{border:1px solid var(--color-border-light)}.border-0{border:0}.border-top{border-top:1px solid var(--color-border-light)}.border-bottom{border-bottom:1px solid var(--color-border-light)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-none{box-shadow:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.visible{visibility:visible}.invisible{visibility:hidden}@media(max-width:768px){.d-mobile-none{display:none}.d-mobile-block{display:block}.d-mobile-flex{display:flex}.d-desktop-none{display:block}.d-desktop-block,.d-desktop-flex{display:none}}@media(min-width:769px){.d-mobile-none{display:block}.d-mobile-block,.d-mobile-flex,.d-desktop-none{display:none}.d-desktop-block{display:block}.d-desktop-flex{display:flex}}