:root{--color-primary:#8b4513;--color-primary-dark:#6d3410;--color-primary-light:#a65a1f;--color-bg-primary:#fff;--color-bg-secondary:#f9f9f9;--color-bg-tertiary:#f5f5f5;--color-border:#e0e0e0;--color-border-light:#f0f0f0;--color-text-primary:#333;--color-text-secondary:#666;--color-text-tertiary:#888;--color-text-disabled:#999;--color-text-inverse:#fff;--color-success:#4caf50;--color-success-dark:#45a049;--color-danger:#f44336;--color-danger-dark:#da190b;--color-warning:#ff9800;--color-info:#2196f3;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;--font-family-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--line-height-loose:2;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary)}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-4xl);font-weight:var(--font-weight-bold)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin-bottom:var(--spacing-md);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-dark)}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:none;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn-secondary:hover{background-color:var(--color-border)}.btn-success{background-color:var(--color-success);color:var(--color-text-inverse)}.btn-success:hover{background-color:var(--color-success-dark)}.btn-danger{background-color:var(--color-danger);color:var(--color-text-inverse)}.btn-danger:hover{background-color:var(--color-danger-dark)}.btn-sm{padding:var(--spacing-xs)var(--spacing-sm);font-size:var(--font-size-sm)}.btn-lg{padding:var(--spacing-md)var(--spacing-lg);font-size:var(--font-size-lg)}input,textarea,select{font-family:inherit;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-primary);transition:border-color var(--transition-base)}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);outline:none}textarea{resize:vertical;min-height:100px}label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);display:block}.card{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-header{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.card-body{line-height:var(--line-height-relaxed)}.card-footer{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-warning{color:var(--color-warning)}.bg-primary{background-color:var(--color-bg-primary)}.bg-secondary{background-color:var(--color-bg-secondary)}.bg-tertiary{background-color:var(--color-bg-tertiary)}.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)}.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)}.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)}.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)}.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)}.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-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)}@media (max-width:768px){html{font-size:14px}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}}*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#8b4513;--secondary-color:#d4af37;--bg-color:#2c1810d9;--card-bg:#fff8f0f2;--text-color:#2c1810;--text-light:#f5f0e8;--accent-color:#c41e3a;--border-color:#d4af37;--timeline-color:#d4af37;--card-scale:1;--card-width:200px;--card-height:380px;--card-font-size:1rem;--card-gap:25px}.theme-modern{--primary-color:#333;--secondary-color:#666;--bg-color:#1e1e1ee6;--card-bg:#fffffffa;--text-color:#1a1a1a;--text-light:#fff;--accent-color:#06c;--border-color:#e0e0e0;--timeline-color:#666}.theme-warm{--primary-color:sienna;--secondary-color:#deb887;--bg-color:#3e2719d9;--card-bg:#fffaf5f2;--text-color:#3e2723;--text-light:#fff8e7;--accent-color:#e65100;--border-color:#deb887;--timeline-color:#deb887}.theme-elegant{--primary-color:#1a1a2e;--secondary-color:#c9b037;--bg-color:#10101ceb;--card-bg:#f5f5faf5;--text-color:#1a1a2e;--text-light:#e8e8f0;--accent-color:#c9b037;--border-color:#c9b037;--timeline-color:#c9b037}body{min-height:100vh;color:var(--text-color);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;overflow-x:hidden}.background-container{z-index:-1;width:100%;height:100%;position:fixed;top:0;left:0}.background-slide{opacity:0;background-position:50%;background-size:cover;width:100%;height:100%;transition:opacity 2s ease-in-out;position:absolute;top:0;left:0}.background-slide.active{opacity:1}.background-overlay{background:var(--bg-color);width:100%;height:100%;position:absolute;top:0;left:0}.settings-panel{z-index:1000;position:fixed;top:20px;right:20px}.settings-toggle{background:var(--card-bg);border:2px solid var(--border-color);cursor:pointer;color:var(--text-color);border-radius:25px;padding:10px 20px;font-size:14px;transition:all .3s;box-shadow:0 4px 15px #0003}.settings-toggle:hover{transform:scale(1.05);box-shadow:0 6px 20px #0000004d}.settings-content{background:var(--card-bg);border:2px solid var(--border-color);border-radius:15px;width:320px;padding:25px;display:none;position:absolute;top:50px;right:0;box-shadow:0 10px 40px #0000004d}.settings-content.show{animation:.3s slideDown;display:block}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-content h3{color:var(--primary-color);border-bottom:2px solid var(--border-color);margin-bottom:20px;padding-bottom:10px;font-family:Noto Serif SC,serif}.setting-item{margin-bottom:15px}.setting-item label{color:var(--text-color);margin-bottom:5px;font-size:13px;font-weight:500;display:block}.setting-item input,.setting-item select,.setting-item textarea{border:1px solid var(--border-color);background:#fff;border-radius:8px;width:100%;padding:10px;font-size:14px}.setting-buttons{gap:10px;margin-top:20px;display:flex}.setting-buttons button{cursor:pointer;background:var(--primary-color);color:#fff;border:none;border-radius:8px;flex:1;padding:10px;font-size:13px;transition:all .3s}.setting-buttons button:hover{opacity:.9;transform:translateY(-2px)}.main-header{text-align:center;padding:60px 20px 40px;position:relative}.family-title{color:var(--text-light);text-shadow:3px 3px 6px #00000080;border-bottom:3px solid #0000;outline:none;margin-bottom:15px;padding:0 20px;font-family:Noto Serif SC,serif;font-size:3.5rem;display:inline-block}.family-title:focus{border-bottom-color:var(--secondary-color)}.family-subtitle{color:var(--secondary-color);letter-spacing:8px;outline:none;font-size:1.3rem}.family-subtitle:focus{background:#ffffff1a;border-radius:5px}.main-container{gap:20px;max-width:100%;margin:0 auto;padding:20px;display:flex;position:relative;overflow-x:hidden}.timeline{z-index:10;background:0 0;flex-shrink:0;width:60px;padding:20px 0;position:sticky;top:0;left:0}.timeline-line{background:linear-gradient(to bottom,transparent,var(--timeline-color),var(--timeline-color),transparent);border-radius:2px;width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-marker{text-align:center;flex-direction:column;justify-content:center;align-items:center;margin-bottom:0;transition:all .3s;display:flex;position:relative}.timeline-dot{background:var(--timeline-color);border:3px solid var(--card-bg);z-index:2;border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-bottom:8px;position:relative;box-shadow:0 0 10px #d4af3780}.timeline-label{color:var(--text-light);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:2px;white-space:nowrap;cursor:pointer;background:#00000080;border-radius:4px;padding:6px 3px;font-family:Noto Serif SC,serif;font-size:16px;line-height:1.2;transition:all .3s}.timeline-label:hover{background:var(--secondary-color);color:var(--primary-color)}.family-content{flex-direction:column;flex:1;gap:50px;min-width:0;display:flex;overflow-x:auto}.generation-row{gap:calc(var(--card-gap)*var(--card-scale));scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;min-height:280px;padding:20px 40px;display:flex;position:relative;overflow:auto visible}.generation-row:before,.generation-row:after{content:"";flex:1 0 0;min-width:0}.generation-row::-webkit-scrollbar{display:none}.member-card{width:calc(var(--card-width)*var(--card-scale));min-width:calc(var(--card-width)*var(--card-scale));height:calc(var(--card-height)*var(--card-scale));background:var(--card-bg);border-radius:calc(15px*var(--card-scale));cursor:pointer;font-size:calc(var(--card-font-size)*var(--card-scale));border:2px solid #0000;flex-direction:column;flex-shrink:0;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #0003}.member-card:hover{border-color:var(--secondary-color);transform:translateY(-10px)scale(1.02);box-shadow:0 20px 50px #0000004d}.member-photo{aspect-ratio:1;background:linear-gradient(135deg,#e0e0e0,#f5f5f5);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.member-photo img{object-fit:cover;width:100%;height:100%}.member-photo .placeholder{color:#ccc;font-size:60px}.zodiac-badge{top:calc(10px*var(--card-scale));right:calc(10px*var(--card-scale));background:var(--accent-color);color:#fff;width:calc(36px*var(--card-scale));height:calc(36px*var(--card-scale));font-size:calc(18px*var(--card-scale));z-index:10;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 3px 10px #0000004d}.member-info{text-align:center;flex-direction:column;flex:1;justify-content:center;min-height:100px;padding:15px;display:flex}.member-name{color:var(--primary-color);margin-bottom:8px;font-family:Noto Serif SC,serif;font-size:1.3rem;font-weight:700}.member-years{color:#666;min-height:1.4em;margin-bottom:5px;font-size:.9rem}.member-hometown{color:#888;justify-content:center;align-items:center;gap:5px;min-height:1.3em;font-size:.85rem;display:flex}.member-hometown:not(:empty):before{content:"📍";font-size:12px}.gender-badge{top:calc(10px*var(--card-scale));left:calc(10px*var(--card-scale));width:calc(28px*var(--card-scale));height:calc(28px*var(--card-scale));font-size:calc(16px*var(--card-scale));z-index:10;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;box-shadow:0 2px 8px #0003}.gender-badge.male{color:#fff;background:#4a90d9}.gender-badge.female{color:#fff;background:#e91e63}.member-order{color:var(--secondary-color);min-height:1.2em;margin-bottom:5px;font-size:.8rem;font-weight:500}.member-bio{color:#666;text-align:left;cursor:help;-webkit-line-clamp:4;text-overflow:ellipsis;border-top:1px dashed #ddd;-webkit-box-orient:vertical;margin-top:5px;padding-top:5px;font-size:.75rem;line-height:1.4;display:-webkit-box;overflow:hidden}.member-actions{border-top:1px solid #eee;justify-content:center;gap:15px;margin-top:10px;padding-top:8px;display:flex}.action-btn{cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:8px;align-items:center;gap:3px;padding:4px 8px;font-size:18px;transition:all .2s;display:flex}.action-btn:hover{opacity:1;background:#0000000d;transform:scale(1.1)}.action-count{color:var(--primary-color);font-size:11px;font-weight:600}.trace-btn{color:var(--accent-color)}.member-card.dimmed{opacity:.3;filter:grayscale(80%);transition:all .3s}.member-card.dimmed:hover{opacity:.5;filter:grayscale(50%)}.clear-highlight-btn{background:var(--accent-color);cursor:pointer;color:#fff;z-index:1000;border:none;border-radius:25px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;transition:all .3s;display:flex;position:fixed;bottom:70px;right:20px;box-shadow:0 4px 15px #0000004d}.clear-highlight-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #0006}.add-member-btn{width:calc(var(--card-width)*var(--card-scale));min-width:calc(var(--card-width)*var(--card-scale));min-height:calc(250px*var(--card-scale));border-radius:calc(15px*var(--card-scale));cursor:pointer;color:var(--text-light);font-size:calc(var(--card-font-size)*var(--card-scale));background:#ffffff1a;border:3px dashed #ffffff4d;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;transition:all .3s;display:flex}.add-member-btn:hover{border-color:var(--secondary-color);background:#fff3;transform:scale(1.02)}.add-member-btn .icon{font-size:calc(48px*var(--card-scale));margin-bottom:calc(10px*var(--card-scale));opacity:.7}.add-member-btn span{font-size:calc(14px*var(--card-scale));opacity:.8}.add-generation-btn{border:2px solid var(--secondary-color);color:var(--secondary-color);cursor:pointer;background:0 0;border-radius:30px;margin:30px auto 50px;padding:15px 40px;font-size:16px;transition:all .3s;display:block}.add-generation-btn:hover{background:var(--secondary-color);color:var(--primary-color)}.add-ancestor-btn{border:2px dashed var(--secondary-color);color:var(--secondary-color);cursor:pointer;opacity:.7;background:0 0;border-radius:30px;margin:0 auto 20px;padding:12px 30px;font-size:14px;transition:all .3s;display:block}.add-ancestor-btn:hover{background:var(--secondary-color);color:var(--primary-color);opacity:1;border-style:solid}.couple-container{align-items:flex-start;gap:calc(10px*var(--card-scale));padding:calc(8px*var(--card-scale));border-radius:calc(20px*var(--card-scale));background:#ffffff14;border:2px solid #d4af374d;flex-shrink:0;display:flex;position:relative}.couple-container .member-card{width:calc(180px*var(--card-scale));min-width:calc(180px*var(--card-scale));height:calc(var(--card-height)*var(--card-scale)*.95)}.couple-container:before{content:"夫妻";background:var(--secondary-color);color:var(--primary-color);z-index:5;border-radius:10px;padding:2px 12px;font-size:11px;font-weight:600;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.couple-container.single-spouse:before{display:none}.couple-container.multi-spouse:before{content:"一夫多妻"}.spouse-group{align-items:flex-start;display:flex}.couple-connector{flex-direction:column;justify-content:center;align-self:center;align-items:center;width:30px;margin-top:-30px;display:flex;position:relative}.couple-connector:before{content:"";background:var(--secondary-color);border-radius:2px;width:100%;height:3px;position:absolute;top:50%;transform:translateY(-50%)}.couple-connector:after{content:attr(data-label);color:var(--secondary-color);white-space:nowrap;background:#00000080;border-radius:3px;padding:1px 4px;font-size:10px;position:absolute;top:-18px}.couple-connector[data-label=""]:after{display:none}.couple-container .member-photo{aspect-ratio:1}.modal{z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal.show{animation:.3s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--card-bg);border-radius:20px;width:90%;max-width:500px;max-height:90vh;animation:.3s slideUp;position:relative;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-close{cursor:pointer;color:#999;font-size:28px;transition:color .3s;position:absolute;top:15px;right:20px}.modal-close:hover{color:var(--accent-color)}.modal-content h2{color:var(--primary-color);border-bottom:1px solid #eee;padding:25px 30px;font-family:Noto Serif SC,serif}.modal-body{padding:25px 30px}.photo-upload{text-align:center;margin-bottom:25px}.photo-preview{cursor:pointer;border:4px solid var(--border-color);background:#f0f0f0;border-radius:50%;justify-content:center;align-items:center;width:150px;height:150px;margin:0 auto;transition:all .3s;display:flex;overflow:hidden}.photo-preview:hover{border-color:var(--accent-color);transform:scale(1.05)}.photo-preview img{object-fit:cover;width:100%;height:100%}.photo-preview span{color:#999;text-align:center;padding:10px;font-size:13px}.form-group{margin-bottom:20px}.form-group label{color:var(--text-color);margin-bottom:8px;font-weight:500;display:block}.form-group input,.form-group textarea,.form-group select{border:2px solid #e0e0e0;border-radius:10px;width:100%;padding:12px 15px;font-size:15px;transition:border-color .3s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--secondary-color);outline:none}.form-row{gap:15px;display:flex}.form-row .form-group{flex:1}.modal-footer{border-top:1px solid #eee;justify-content:space-between;gap:15px;padding:20px 30px;display:flex}.modal-footer button{cursor:pointer;border:none;border-radius:25px;padding:12px 30px;font-size:15px;transition:all .3s}.btn-save{background:var(--primary-color);color:#fff;flex:1}.btn-save:hover{opacity:.9;transform:translateY(-2px)}.btn-delete{color:#fff;background:#f44}.btn-delete:hover{background:#c00}.connection-lines{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible!important}.connection-line{fill:none;stroke:var(--secondary-color);stroke-width:2px;opacity:.7;transition:opacity .3s,stroke-width .3s}.connection-line:hover{stroke-width:3px;opacity:1}.connection-line.highlighted{stroke-width:4px;opacity:1;stroke:var(--accent-color);filter:drop-shadow(0 0 5px var(--accent-color))}.connection-dot{fill:var(--secondary-color);transition:all .3s}.connection-dot:hover{fill:var(--accent-color)}.connection-toggle{background:var(--card-bg);border:2px solid var(--border-color);cursor:pointer;color:var(--text-color);z-index:1000;border-radius:25px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;transition:all .3s;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 4px 15px #0003}.connection-toggle:hover{transform:scale(1.05);box-shadow:0 6px 20px #0000004d}.connection-toggle.active{background:var(--secondary-color);color:var(--primary-color)}.zoom-control{background:var(--card-bg);border:2px solid var(--border-color);z-index:1000;border-radius:25px;align-items:center;gap:8px;padding:8px 15px;display:flex;position:fixed;bottom:20px;right:200px;box-shadow:0 4px 15px #0003}.zoom-icon{font-size:18px}.zoom-select{color:var(--text-color);cursor:pointer;background:0 0;border:none;outline:none;padding:4px 8px;font-size:14px}.zoom-select:hover{background:#0000000d;border-radius:5px}.main-container{transition:transform .3s}.connection-toggle .icon{font-size:18px}@media (max-width:768px){.main-container{flex-direction:column}.timeline{gap:20px;width:100%;padding:10px;display:flex;overflow-x:auto}.timeline-line{display:none}.timeline-marker{flex-shrink:0}.timeline-label{writing-mode:horizontal-tb}.family-title{font-size:2.5rem}.settings-content{width:280px;right:-10px}.generation-row{gap:15px;padding:15px}.couple-container{flex-direction:column;align-items:center;width:100%}.couple-connector{width:3px;height:30px;margin-top:0}.couple-connector:before{width:3px;height:100%}.couple-container .member-card{width:100%}}.image-cropper-overlay{z-index:3000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.image-cropper-modal{background:var(--card-bg);text-align:center;border-radius:20px;max-width:90%;padding:30px}.image-cropper-modal h3{color:var(--primary-color);margin-bottom:10px;font-family:Noto Serif SC,serif}.cropper-hint{color:#666;margin-bottom:20px;font-size:13px}.cropper-container{cursor:move;border-radius:10px;width:200px;height:200px;margin:0 auto 20px;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000004d}.cropper-canvas{background:#f0f0f0;display:block}.cropper-frame{border:3px solid var(--secondary-color);pointer-events:none;border-radius:10px;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2000px #0000}.cropper-controls{justify-content:center;align-items:center;gap:15px;margin-bottom:25px;display:flex}.scale-slider{appearance:none;background:#ddd;border-radius:3px;outline:none;width:150px;height:6px}.scale-slider::-webkit-slider-thumb{appearance:none;background:var(--secondary-color);cursor:pointer;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 6px #0000004d}.cropper-buttons{justify-content:center;gap:15px;display:flex}.cropper-buttons button{cursor:pointer;border:none;border-radius:25px;padding:12px 30px;font-size:15px;transition:all .3s}.btn-cancel{color:#333;background:#e0e0e0}.btn-cancel:hover{background:#ccc}.btn-confirm{background:var(--primary-color);color:#fff}.btn-confirm:hover{opacity:.9;transform:translateY(-2px)}.btn-adjust-crop{border:1px solid var(--border-color);color:var(--text-color);cursor:pointer;background:0 0;border-radius:15px;margin-top:10px;padding:6px 15px;font-size:12px;transition:all .3s}.btn-adjust-crop:hover{background:var(--secondary-color);color:var(--primary-color)}.loading-text{color:#999;font-size:14px}.member-detail-modal .modal-content.large{max-width:700px;max-height:85vh}.detail-tabs{border-bottom:1px solid #eee;gap:10px;padding:0 30px;display:flex}.tab-btn{cursor:pointer;color:#666;background:0 0;border:none;border-bottom:3px solid #0000;margin-bottom:-1px;padding:12px 20px;font-size:15px;transition:all .3s}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.detail-content{max-height:60vh;padding:20px 30px;overflow-y:auto}.album-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.album-item{aspect-ratio:1;border-radius:8px;position:relative;overflow:hidden}.album-item img{object-fit:cover;width:100%;height:100%}.album-item .delete-btn{color:#fff;cursor:pointer;opacity:0;background:#f00c;border:none;border-radius:50%;width:24px;height:24px;transition:opacity .3s;position:absolute;top:5px;right:5px}.album-item:hover .delete-btn{opacity:1}.album-add{aspect-ratio:1;cursor:pointer;color:#999;border:2px dashed #ccc;border-radius:8px;justify-content:center;align-items:center;font-size:14px;transition:all .3s;display:flex}.album-add:hover{border-color:var(--primary-color);color:var(--primary-color)}.stories-section{flex-direction:column;gap:15px;display:flex}.story-card{border-left:4px solid var(--secondary-color);background:#f9f9f9;border-radius:12px;padding:20px}.story-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.story-header h3{color:var(--primary-color);margin:0;font-size:16px}.story-year{background:var(--secondary-color);color:var(--primary-color);border-radius:10px;padding:2px 10px;font-size:12px}.story-content{color:#555;white-space:pre-wrap;line-height:1.6}.story-photos{gap:8px;margin-top:10px;display:flex;overflow-x:auto}.story-photos img{border-radius:6px;height:80px}.story-actions{border-top:1px solid #eee;gap:10px;margin-top:15px;padding-top:10px;display:flex}.story-actions button{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:15px;padding:5px 15px;font-size:12px}.story-actions button.delete{color:#f44;border-color:#f44}.add-story-btn{cursor:pointer;color:#999;background:0 0;border:2px dashed #ccc;border-radius:12px;padding:15px;font-size:14px;transition:all .3s}.add-story-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.story-editor{background:#f5f5f5;border-radius:12px;padding:20px}.editor-row{gap:10px;margin-bottom:10px;display:flex}.story-title-input{border:1px solid #ddd;border-radius:8px;flex:1;padding:10px;font-size:14px}.story-year-input{border:1px solid #ddd;border-radius:8px;width:120px;padding:10px;font-size:14px}.story-content-input{resize:vertical;border:1px solid #ddd;border-radius:8px;width:100%;padding:10px;font-size:14px}.editor-actions{justify-content:flex-end;gap:10px;margin-top:10px;display:flex}.editor-actions button{cursor:pointer;border:none;border-radius:20px;padding:8px 20px;font-size:14px}.editor-actions button.save{background:var(--primary-color);color:#fff}.btn-detail{background:var(--secondary-color);color:var(--primary-color);cursor:pointer;border:none;border-radius:25px;padding:12px 20px;font-size:14px;transition:all .3s}.btn-detail:hover{opacity:.9;transform:translateY(-2px)}.zoom-25 .member-photo,.zoom-25 .member-order,.zoom-25 .member-hometown,.zoom-25 .member-years,.zoom-25 .member-bio,.zoom-25 .member-actions,.zoom-50 .member-photo,.zoom-50 .member-hometown,.zoom-50 .member-years,.zoom-50 .member-bio,.zoom-50 .member-actions,.zoom-75 .member-photo,.zoom-75 .member-years,.zoom-75 .member-bio{display:none!important}.btn-delete-member{cursor:pointer;color:#fff;background:#f44;border:none;border-radius:8px;padding:10px 20px;font-size:14px;transition:all .3s}.btn-delete-member:hover{background:#c00;transform:translateY(-2px);box-shadow:0 4px 12px #cc00004d}.timeline-delete-btn{color:#fff;cursor:pointer;opacity:0;background:#f44;border:none;border-radius:50%;width:18px;height:18px;font-size:14px;line-height:1;transition:all .3s;position:absolute;top:50%;right:-20px;transform:translateY(-50%)}.timeline-marker:hover .timeline-delete-btn{opacity:1}.timeline-delete-btn:hover{background:#c00;transform:translateY(-50%)scale(1.1)}.timeline-marker{position:relative}