@import "https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&display=swap";:root{color:#18211d;--ink:#10243a;--muted:#607589;--line:#d5e5f0;--paper:#fbfdff;--soft:#e9f5fc;--green:#1e67a8;--green-dark:#154a7a;--gold:#2f8ccd;--danger:#a33a35;background:#f6f4ee;font-family:Noto Serif,Georgia,Times New Roman,serif;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}body:before{content:"";z-index:-2;background:url(/assets/family/poster.jpg) 50%/cover no-repeat;position:fixed;inset:0}body:after{content:"";z-index:-1;-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#f6f4eedb;transition:-webkit-backdrop-filter .18s,backdrop-filter .18s,background .18s;position:fixed;inset:0}.app-frame.is-locked:after{content:"";z-index:-1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#121c2a73;position:fixed;inset:0}.app-frame.is-open:after{content:"";z-index:-1;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#f6f4ee94;position:fixed;inset:0}a{color:inherit;text-decoration:none}button,.primary-button,.secondary-button,.small-button{cursor:pointer;background:var(--green);color:#fff;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;min-height:42px;padding:0 16px;font-family:inherit;font-weight:700;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex;box-shadow:0 8px 18px #154a7a24}button:hover,.primary-button:hover,.secondary-button:hover,.small-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px #154a7a2e}button:disabled{cursor:not-allowed;opacity:.6;transform:none}.secondary-button,.ghost-button{color:var(--ink);border:1px solid var(--line);box-shadow:none;background:#fff}.danger-button{background:var(--danger)}.small-button{min-height:34px;box-shadow:none;padding:0 12px;font-size:.9rem}.loading,.empty-state{text-align:center;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px}.field-error{color:var(--danger);font-size:.92rem}.form-message{color:var(--green);font-weight:800}.warning-box{background:#edf8ff;border:1px solid #2f8ccd57;border-radius:10px;padding:14px 16px}.app-toast{z-index:80;border:1px solid var(--line);border-left:5px solid var(--green);width:min(420px,100vw - 36px);color:var(--ink);background:#fffdf8;border-radius:12px;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 12px 14px 16px;font-weight:800;display:flex;position:fixed;bottom:74px;left:18px;box-shadow:0 18px 46px #0003}.app-toast.is-warning{border-left-color:var(--gold)}.app-toast.is-error{border-left-color:var(--danger)}.toast-close{width:30px;min-width:30px;height:30px;min-height:30px;color:var(--ink);border:1px solid var(--line);box-shadow:none;background:0 0;border-radius:8px;padding:0;font-size:20px;line-height:1}@media (width<=860px){.app-toast{width:calc(100vw - 20px);bottom:64px;left:10px}}.topbar{border-bottom:1px solid var(--line);z-index:10;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fbfdfff2;align-items:center;gap:18px;min-height:72px;padding:12px clamp(16px,4vw,44px);display:flex;position:sticky;top:0}.brand{color:var(--ink);white-space:nowrap;align-items:center;font-size:1.22rem;font-weight:700;display:inline-flex}.navlinks{flex-wrap:wrap;flex:1;align-items:center;gap:6px;display:flex}.navlinks a,.ghost-button{min-height:38px;color:var(--muted);border-radius:8px;padding:8px 11px}.navlinks a.active{color:var(--green-dark);background:#e6f3fc;font-weight:700}.user-menu{align-items:center;gap:8px;display:flex}.role-badge{color:#1a5b91;background:#eaf6ff;border:1px solid #c8e4f7;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:800}.page-shell{width:min(1160px,100% - 32px);margin:0 auto;padding:28px 0 56px}:is(.page-shell:has(.tree-canvas-page),.page-shell:has(.main-poster-page)){width:100%;padding:0}.auth-shell{align-items:center;width:min(1080px,100% - 32px);min-height:100vh;margin:0 auto;display:grid}.main-poster-page{place-items:center;min-height:calc(100vh - 72px);padding:18px;display:grid}.poster-wrap{background:#ffffff4d;width:min(1180px,100vw - 36px);position:relative}.poster-wrap img{width:100%;height:auto;display:block;box-shadow:0 24px 60px #00000047}.poster-hotspot-layer{width:100%;height:100%;position:absolute;inset:0}.poster-hotspot{fill:#0000;cursor:pointer}.poster-hotspot:hover,.poster-hotspot:focus{fill:#ffffff24;stroke:#ffffffe0;stroke-width:3px}.poster-help{color:#fff;background:#00000061;border-radius:999px;margin:12px 0 0;padding:8px 12px}.home-hero{grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);align-items:center;gap:32px;min-height:calc(100vh - 128px);display:grid}.home-copy,.dashboard-hero,.auth-card,.home-preview,.panel-card,.table-list article,.relation-panel,.detail-grid>div,.duplicate-panel,.admin-log-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 48px #3a2f2314}.home-copy,.dashboard-hero{padding:clamp(24px,4vw,42px)}.home-copy h1,.dashboard-hero h1{color:var(--ink);margin:6px 0 10px;font-size:clamp(2.4rem,7vw,4.8rem);line-height:1.02}.home-copy p,.dashboard-hero p,.panel-card span,.page-heading p{color:var(--muted)}.home-copy p,.dashboard-hero p{max-width:640px;margin:0 0 22px;font-size:1.12rem}.eyebrow{color:var(--gold);letter-spacing:0;font-weight:900}.home-actions,.button-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.home-preview{align-content:center;justify-items:center;gap:14px;min-height:420px;padding:28px;display:grid}.preview-row{gap:18px;display:flex}.preview-node{width:104px;min-height:62px;color:var(--ink);background:#eff8ff;border:1px solid #cfe7f7;border-radius:14px;place-items:center;font-weight:900;display:grid}.preview-node.is-main{background:var(--green);color:#fff;border-color:var(--green)}.preview-line{background:#b9dcf2;width:2px;height:34px}.auth-layout{grid-template-columns:minmax(0,.85fr) minmax(320px,480px);align-items:center;gap:28px;min-height:calc(100vh - 150px);display:grid}.auth-intro{padding:18px 0}.auth-intro h1{margin:6px 0 10px;font-size:clamp(2.1rem,6vw,4rem);line-height:1.05}.auth-intro p,.auth-note{color:var(--muted)}.auth-card h2{margin:0 0 14px;font-size:1.45rem}.auth-note a{color:var(--green);font-weight:900}.page-heading{margin-bottom:18px}.page-heading h1{color:var(--ink);margin:4px 0;font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.12}.split,.dashboard-hero{justify-content:space-between;align-items:center;gap:16px;display:flex}.panel-grid,.action-grid,.people-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.panel-card,.action-grid a{align-content:start;gap:8px;min-height:146px;padding:20px;display:grid}.panel-card strong{font-size:1.2rem}.panel-card:hover{border-color:#1e67a873;transform:translateY(-2px)}.person-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;grid-template-rows:142px 1fr auto;gap:12px;height:326px;padding:12px;display:grid;box-shadow:0 14px 34px #3a2f2312}.person-photo,.profile-photo{width:100%;height:142px;color:var(--green);background:#e9f5fc;border-radius:12px;place-items:center;font-size:2.6rem;font-weight:900;display:grid;overflow:hidden}a.person-photo:hover{outline:3px solid #2f8ccd40}.person-photo img,.profile-photo img{object-fit:cover;width:100%;height:100%}.person-card-body h3{margin:0;font-size:1.08rem}.person-card-body p{color:var(--muted);margin:4px 0}.profile-header{grid-template-columns:220px 1fr;align-items:center;gap:22px;margin-bottom:22px;display:grid}.profile-photo{height:220px}.detail-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px;display:grid}.detail-grid>div,.relation-panel{padding:16px}.table-list{gap:10px;display:grid}.table-list article{grid-template-columns:minmax(180px,1fr) minmax(220px,1.2fr) auto auto;align-items:center;gap:12px;padding:16px;display:grid}.duplicate-list,.admin-log-panel{gap:14px;margin-top:22px;display:grid}.duplicate-panel,.admin-log-panel{padding:18px}.duplicate-meta,.section-title{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.section-title h2{margin:0}.duplicate-people{grid-template-columns:repeat(2,minmax(240px,1fr));gap:14px;margin-bottom:14px;display:grid}.admin-log-panel article{border-top:1px solid var(--line);gap:4px;padding:10px 0;display:grid}.feedback-form{margin-bottom:22px}.feedback-list{gap:14px;display:grid}.feedback-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 14px 34px #3a2f2312}.feedback-card p{margin:0 0 14px;font-size:1.05rem}.feedback-card dl{border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;margin:0;padding-top:12px;display:grid}.feedback-card dt{color:var(--muted);font-size:.88rem;font-weight:700}.feedback-card dd{overflow-wrap:anywhere;margin:2px 0 0}@media (width<=840px){.topbar,.split,.dashboard-hero,.profile-header,.table-list article,.duplicate-meta,.section-title{display:block}.topbar{padding:12px 16px}.navlinks,.user-menu{margin-top:10px}.home-hero,.auth-layout,.duplicate-people{grid-template-columns:1fr}.home-preview{min-height:320px}.profile-photo{margin-bottom:14px}}.auth-card,.form-panel,.filter-grid,.upload-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 14px 36px #3a2f2312}.auth-card{margin:0}form{gap:14px;display:grid}.form-grid,.filter-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.photo-field{border-bottom:1px solid var(--line);grid-template-columns:118px minmax(0,1fr);align-items:center;gap:16px;padding-bottom:14px;display:grid}.photo-preview{aspect-ratio:1;border:1px solid var(--line);width:118px;color:var(--green);background:#e9f5fc;border-radius:12px;place-items:center;font-weight:900;display:grid;overflow:hidden}.photo-preview img{object-fit:cover;width:100%;height:100%}label{color:var(--ink);gap:6px;font-weight:800;display:grid}input,select,textarea{width:100%;min-height:44px;font:inherit;color:var(--ink);background:#fff;border:1px solid #cfc5b6;border-radius:10px;padding:10px 12px}input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:3px solid #2f8ccd38}textarea{resize:vertical}.upload-box{margin-top:18px}@media (width<=640px){.photo-field{grid-template-columns:1fr}}.tree-canvas-page{min-height:calc(100vh - 72px);font-size:calc(1rem * var(--reader-scale,1));background:#d9f0fb url(/assets/family/mongolian-pattern-blue.jpg) 0 0/520px 520px;display:block;position:relative}.tree-main,.tree-full-wrap{width:100%;height:calc(100vh - 142px);min-height:620px}.tree-titlebar{color:#173e73;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ebf9ffc2;border-bottom:1px solid #4d95be47;place-items:center;min-height:70px;padding:12px 20px;display:grid;box-shadow:0 14px 38px #2c679129}.tree-titlebar h1{letter-spacing:.01em;text-shadow:0 1px #ffffffc7;margin:0;font-family:Noto Serif,Georgia,Times New Roman,serif;font-size:clamp(1.55rem,2.6vw,2.55rem);font-weight:600;line-height:1.22}.tree-full-wrap{-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);background:#ffffffb8;place-items:center;display:grid;position:relative;overflow:auto}.custom-tree-canvas{transform-origin:top;transition:transform .16s;position:relative}.custom-tree-lines{pointer-events:none;position:absolute;inset:0;overflow:visible}.custom-tree-lines line{stroke:#222;stroke-width:1.5px;shape-rendering:crispedges}.custom-tree-lines line.is-dotted{stroke-dasharray:2 9;stroke-width:1.3px}.tree-zoom-controls{z-index:30;gap:8px;display:flex;position:fixed;bottom:16px;left:16px}.floating-tree-actions{z-index:30;border:1px solid var(--line);background:#ffffffeb;border-radius:14px;align-items:center;gap:8px;padding:8px;display:flex;position:fixed;bottom:18px;right:18px;box-shadow:0 16px 40px #00000029}.tree-filter-popover{z-index:31;border:1px solid var(--line);background:#fff;border-radius:16px;width:min(360px,100vw - 36px);padding:16px;position:fixed;bottom:82px;right:18px;box-shadow:0 18px 50px #0003}.tree-card{cursor:pointer;color:#111;box-shadow:none;text-align:left;background:#dce6ee;border:1px solid #d8d8d8;border-radius:0;grid-template-rows:76px auto auto;gap:4px;padding:7px;display:grid;position:absolute;overflow:hidden}.tree-card:hover{transform:none;box-shadow:0 0 0 2px #1d5f832e}.tree-card.is-female{background:#f7dcdc}.tree-card.is-male{background:#dde8f0}.tree-card.is-highlighted{outline:3px solid #2f8ccd}.tree-card.is-selected{outline:3px solid #154a7a}.tree-photo{color:#333;background:#eee;place-items:center;width:100%;height:76px;font-weight:800;display:grid;overflow:hidden}.tree-card.level-3,.tree-card.level-4,.tree-card.level-5,.tree-card.level-6{grid-template-rows:48px auto auto;padding:5px}.tree-card.level-3 .tree-photo,.tree-card.level-4 .tree-photo,.tree-card.level-5 .tree-photo,.tree-card.level-6 .tree-photo{height:48px}.tree-card.level-3 strong,.tree-card.level-3 span,.tree-card.level-4 strong,.tree-card.level-4 span,.tree-card.level-5 strong,.tree-card.level-5 span,.tree-card.level-6 strong,.tree-card.level-6 span{font-size:9px}.tree-photo img{object-fit:cover;width:100%;height:100%}.tree-card strong,.tree-card span{white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.2;overflow:hidden}.tree-card strong{font-weight:800}.tree-add-card{color:#78602a;text-align:center;background:#fff8dc;border:1px dashed #c5a959;align-content:center;place-items:center;font-size:42px;display:grid}.tree-add-spouse-tab{color:#7a5b16;cursor:pointer;box-shadow:none;background:#fff8dc;border:1px dashed #d4b765;border-radius:0;place-items:center;padding:0;font-size:28px;font-weight:900;display:grid;position:absolute}.tree-add-spouse-tab:hover{transform:none;box-shadow:0 0 0 2px #d4b76540}.tree-add-card small{font-size:12px;font-weight:800;display:block}.tree-add-card span{font-size:42px;line-height:1}.person-info-panel{z-index:25;background:var(--paper);border:1px solid var(--line);border-radius:18px;width:330px;max-height:calc(100vh - 112px);padding:16px;position:fixed;top:88px;left:16px;overflow:auto;box-shadow:0 18px 48px #0003}.person-info-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-bottom:12px;display:flex}.info-photo{aspect-ratio:1;width:100%;color:var(--green);background:#e9f5fc;border-radius:14px;place-items:center;font-size:3rem;font-weight:900;display:grid;overflow:hidden}.info-photo img{object-fit:cover;width:100%;height:100%}.person-info-panel h2{margin:14px 0;font-size:1.55em}.person-info-panel dl{gap:10px;margin:0;display:grid}.person-info-panel dl div{border-top:1px solid var(--line);padding-top:10px}.person-info-panel dt{color:var(--muted);font-size:.9em;font-weight:800}.person-info-panel dd{margin:2px 0 0;font-weight:700}.tree-page.info-fullscreen .person-info-panel{width:auto;max-height:none;inset:10px}@media (width<=860px){.tree-main,.tree-full-wrap{height:calc(100vh - 120px)}.tree-full-wrap{place-items:start center;padding-top:16px}.person-info-panel{width:auto;max-height:48vh;inset:auto 10px 10px}.tree-page.info-fullscreen .person-info-panel{max-height:none;inset:10px}.floating-tree-actions{bottom:10px;right:10px}.tree-zoom-controls{bottom:10px;left:10px}.tree-filter-popover{bottom:74px;right:10px}}
