:root{--bg:#f3f0e8;--bg-soft:#f8f5ee;--surface:#fffcf6db;--surface-strong:#fffdf8;--surface-muted:#f1ede4;--line:#4d605424;--line-strong:#4d60543d;--text:#24352d;--text-soft:#617067;--brand:#3f6a56;--brand-deep:#2d4d3d;--brand-soft:#e4ece7;--accent:#8e6a3f;--danger:#ba5656;--shadow-lg:0 28px 70px #2a322a1f;--shadow-md:0 16px 38px #2a322a14;--radius-2xl:30px;--radius-xl:24px;--radius-lg:18px;--radius-md:14px;--sidebar-width:260px;--topbar-height:74px}*{box-sizing:border-box}html,body,#app{width:100%;height:100dvh;overflow:hidden}html{background:var(--bg)}body{min-height:100dvh;color:var(--text);background:radial-gradient(circle at 100% 0,#8faf911f,#0000 28%),radial-gradient(circle at 0 100%,#c9b39124,#0000 24%),linear-gradient(#f5f1e8 0%,#f2efe7 45%,#eeece4 100%);margin:0;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.app-shell{--shell-padding:14px;--shell-viewport-height:100dvh;--shell-frame-height:calc(var(--shell-viewport-height) - (var(--shell-padding) * 2));height:var(--shell-viewport-height);min-height:var(--shell-viewport-height);padding:var(--shell-padding);overflow:hidden}.workspace-shell{height:var(--shell-frame-height);max-height:var(--shell-frame-height);grid-template-columns:var(--sidebar-width) minmax(0, 1fr);min-height:0;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffcf6b8;border:1px solid #ffffff80;border-radius:32px;align-items:stretch;display:grid;overflow:hidden}.sidebar{border-right:1px solid var(--line);align-self:stretch;height:100%;min-height:0;max-height:100%;padding:20px;overflow:auto}.workspace{flex-direction:column;gap:16px;min-width:0;height:100%;min-height:0;max-height:100%;padding:18px;display:flex;overflow:hidden}.topbar{min-height:var(--topbar-height);background:var(--surface);box-shadow:var(--shadow-md);border:1px solid #ffffff73;border-radius:26px;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;display:flex}.page-body{flex-direction:column;flex:1;min-height:0;padding-right:2px;display:flex;overflow:hidden}.page{flex-direction:column;flex:1;gap:16px;min-height:0;display:flex;overflow:auto}.page--workspace{height:100%;overflow:hidden}.hero-card,.panel-card,.soft-card{border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-md)}.hero-card{padding:24px}.panel-card{padding:18px}.soft-card{background:#fffaf4cc;padding:14px}.page-title{margin:0;font-family:Noto Serif SC,Songti SC,serif;font-size:clamp(30px,3vw,38px);font-weight:700;line-height:1.05}.page-desc{max-width:760px;color:var(--text-soft);margin:10px 0 0;line-height:1.75}.section-title{margin:0;font-size:16px;font-weight:700}.section-desc{color:var(--text-soft);margin:6px 0 0;font-size:13px;line-height:1.7}.kicker{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;background:#3f6a5614;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:inline-flex}.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.metric-card{border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(#ffffffe6,#f8f4ecf2);padding:18px}.metric-label{color:var(--text-soft);font-size:13px}.metric-value{margin-top:10px;font-family:Noto Serif SC,Songti SC,serif;font-size:clamp(28px,2vw,34px)}.metric-help{color:var(--text-soft);margin-top:10px;font-size:12px}.toolbar-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.toolbar-cluster{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.card-list{gap:12px;display:grid}.muted{color:var(--text-soft)}@media (width<=1180px){.metrics-grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=960px){.workspace-shell{grid-template-columns:1fr}.sidebar{display:none}.metrics-grid,.grid-2,.grid-3{grid-template-columns:1fr}.app-shell{padding:0}.workspace-shell{border-radius:0;height:100%}}.sidebar{background:linear-gradient(#f9f6f0fa,#f4f0e8eb)}.nav-item:hover,.nav-item.is-active{background:#fffdf8eb;border-color:#3f6a562e;transform:translateY(-1px)}.admin-shell{background:#f8f9f9bd}.admin-sidebar{height:var(--shell-viewport-height);max-height:var(--shell-viewport-height);min-height:var(--shell-viewport-height);background:linear-gradient(#f3f6f7fa,#edf2f3eb)}.admin-brand{background:linear-gradient(#fcfefff0,#f3f7f8f0)}.admin-topbar{background:#fafcfddb}.sidebar-brand h2{margin:18px 0 8px;font-family:Noto Serif SC,Songti SC,serif;font-size:34px}.sidebar-brand p{color:var(--text-soft);margin:0;line-height:1.7}.sidebar-nav{gap:10px;margin-top:16px;display:grid}.nav-item{background:#ffffff7a;border:1px solid #0000;border-radius:20px;gap:5px;padding:14px 16px;transition:all .18s;display:grid}.nav-item span{color:var(--text-soft);font-size:12px}.admin-nav-item:hover,.admin-nav-item.is-active{background:#fffffff0;border-color:#3558702e;transform:translateY(-1px)}.sidebar-footer{gap:8px;margin-top:16px;display:grid}.tree-root{border-radius:inherit;flex-direction:column;height:100%;min-height:0;padding:0;display:flex;position:relative;overflow:hidden}.tree-toolbar{background:#fffcf6d6;border-bottom:1px solid #6a7d711f;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.tree-viewport{cursor:grab;touch-action:none;background:linear-gradient(#3f6a560d 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#3f6a560d 1px,#0000 1px) 0 0/32px 32px,linear-gradient(#fdfbf6fa,#f3efe6f0) 0 0/cover;flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.tree-scene{transform-origin:0 0;position:absolute}.tree-lines{position:absolute;top:0;left:0;overflow:visible}.tree-line{fill:none;stroke-width:2.5px}.tree-line.is-parent{stroke:#3f6a5673}.tree-line.is-spouse{stroke:#8e6a3fbf;stroke-linecap:round}.tree-group{justify-content:center;align-items:stretch;gap:18px;display:flex;position:absolute}.tree-card{width:156px;height:104px;color:var(--text);text-align:left;background:linear-gradient(#fffffff0,#f6f4edfa);border:1px solid #4d605424;border-radius:24px;align-content:space-between;padding:16px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;box-shadow:0 18px 34px #2a322a14}.tree-card:hover{border-color:#3f6a5638;transform:translateY(-2px);box-shadow:0 22px 38px #2a322a1c}.tree-card.is-selected{border-color:#3f6a566b;box-shadow:0 0 0 3px #3f6a561f,0 22px 38px #2a322a1a}.tree-card-name{font-size:18px;font-weight:700}.tree-card-meta{color:var(--text-soft);font-size:13px}.tree-context-menu{z-index:12;border:1px solid var(--line);min-width:160px;box-shadow:var(--shadow-md);background:#fffcf6fa;border-radius:18px;gap:4px;padding:8px;display:grid;position:fixed}.tree-context-menu button{text-align:left;color:var(--text);background:0 0;border:0;border-radius:12px;padding:10px 12px}.tree-context-menu button:hover{background:var(--brand-soft)}@media (width<=960px){.tree-toolbar{padding:12px}}.auth-page{place-items:center;min-height:100dvh;padding:24px;display:grid}.auth-panel{width:min(1120px,100%);box-shadow:var(--shadow-lg);background:#fffcf6c7;border:1px solid #ffffff80;border-radius:34px;grid-template-columns:1.15fr .85fr;display:grid;overflow:hidden}.auth-hero{background:radial-gradient(circle at 100% 0,#3f6a562e,#0000 28%),linear-gradient(#f8f4ebfa,#f1ede4f5);align-content:center;gap:16px;padding:52px;display:grid}.auth-hero h1{margin:0;font-family:Noto Serif SC,Songti SC,serif;font-size:clamp(44px,5vw,74px);line-height:.98}.auth-hero p{color:var(--text-soft);max-width:440px;margin:0;line-height:1.9}.auth-card{background:#ffffffb3;padding:34px}.auth-actions{justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}.auth-actions.end-only{justify-content:flex-end}@media (width<=960px){.auth-panel{grid-template-columns:1fr}.auth-hero{padding:34px 28px}.auth-card{padding:24px}}.family-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;display:grid}.family-card{border:1px solid var(--line);background:linear-gradient(#ffffffeb,#f7f3ecf5);border-radius:24px;padding:18px;box-shadow:0 12px 28px #2a322a12}.family-card-head{justify-content:space-between;gap:12px;display:flex}.family-card-head h4{margin:0;font-family:Noto Serif SC,Songti SC,serif;font-size:22px}.family-card-head p,.family-card-desc,.family-card-meta{color:var(--text-soft);margin:8px 0 0;line-height:1.7}.family-card-actions{margin-top:14px}@media (width<=1180px){.family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=860px){.family-grid{grid-template-columns:1fr}}.family-detail-page{gap:0}.family-workspace{min-height:0;box-shadow:var(--shadow-lg);background:linear-gradient(#fffcf7f5,#f7f4eef0);border:1px solid #ffffff8c;border-radius:30px;flex:1;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:16px 18px 18px;display:grid;overflow:hidden}.family-header{flex-shrink:0;justify-content:space-between;align-items:center;gap:18px;padding:4px 2px 12px;display:flex}.family-header-main{gap:8px;min-width:0;display:grid}.family-header-title-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.family-title{margin:0;font-family:Noto Serif SC,Songti SC,serif;font-size:clamp(28px,2.8vw,36px);line-height:1.02}.family-meta-line{color:var(--text-soft);margin:0;font-size:13px;line-height:1.6}.family-header-actions{flex-shrink:0;justify-content:flex-end}.family-tab-shell{grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0;display:grid}.family-tab-nav{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px;padding-bottom:2px;display:flex}.family-tab-button{color:var(--text-soft);cursor:pointer;background:#ffffff8a;border:1px solid #4d60541f;border-radius:999px;padding:10px 16px;transition:all .18s}.family-tab-button:hover{color:var(--text);border-color:#3f6a5638;transform:translateY(-1px)}.family-tab-button.is-active{color:var(--brand-deep);background:#3f6a561f;border-color:#3f6a5633;box-shadow:inset 0 1px #ffffffa6}.family-tab-panels{flex-direction:column;min-height:0;display:flex}.family-tab-panel{flex-direction:column;flex:1;height:100%;min-height:0;display:flex;overflow:hidden}.family-tab-panel--tree{overflow:hidden}.tree-pane{flex:1;min-height:0;display:flex;overflow:hidden}.tree-surface{background:linear-gradient(#fffdf8fa,#f4f1eaf5);border:1px solid #6a7d7124;border-radius:26px;flex:1;height:100%;min-height:0;overflow:hidden;box-shadow:inset 0 1px #ffffffbd}.family-tree-canvas{flex:1;height:100%;min-height:0}.tab-scroll-pane{flex:1;min-height:0;padding-right:4px;overflow:auto}.overview-stack{gap:16px;display:grid}.overview-grid{align-items:start}.overview-card{gap:12px;display:grid}.overview-card h3,.share-card h4,.announcement-card h4{margin:8px 0 0;font-family:Noto Serif SC,Songti SC,serif;font-size:24px}.tab-tools{margin-bottom:16px}.table-pane{background:#fffcf6b8;border-radius:20px;overflow:auto}.announcement-card,.share-card,.invite-item{gap:10px;display:grid}.announcement-content{color:var(--text);margin:0;line-height:1.85}.invite-item{border:1px solid var(--line);background:#ffffffc7;border-radius:18px;padding:14px 16px}.preview-stack,.qr-stack{gap:10px;display:grid}.qr-image{width:280px;max-width:100%;margin:0 auto;display:block}@media (width<=960px){.page.page--workspace.family-detail-page{overflow:auto}.family-workspace{flex-direction:column;gap:12px;padding:16px;display:flex;overflow:visible}.family-header{flex-direction:column;align-items:flex-start}.family-header-actions{justify-content:flex-start;width:100%}.family-tab-panels,.family-tab-panel,.tab-scroll-pane{height:auto;overflow:visible}.family-tab-shell{flex-direction:column;display:flex}.tree-pane{min-height:520px}}.notice-item,.reminder-item{gap:10px;display:grid}.notice-item{border:1px solid var(--line);background:#ffffffc2;border-radius:20px;padding:14px 16px}.notice-item.is-unread{background:#fff8eee0;border-color:#8e6a3f3d}.notice-item p{color:var(--text-soft);margin:0;line-height:1.75}.binding-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.admin-auth-page{place-items:center;min-height:100dvh;padding:24px;display:grid}.admin-auth-card{width:min(460px,100%);box-shadow:var(--shadow-lg);background:#fafcfde0;border:1px solid #ffffff8f;border-radius:34px;padding:34px}.admin-auth-card h1{margin:18px 0 8px;font-family:Noto Serif SC,Songti SC,serif;font-size:40px}.admin-auth-card p{color:var(--text-soft);margin:0 0 20px;line-height:1.8}.quick-card{cursor:pointer}.quick-card h3{margin:18px 0 10px;font-family:Noto Serif SC,Songti SC,serif;font-size:24px}.quick-card p{color:var(--text-soft);margin:0;line-height:1.8}.family-admin-card{gap:10px;display:grid}.admin-family-detail-page{gap:0}.admin-family-workspace{min-height:0;box-shadow:var(--shadow-lg);background:linear-gradient(#f9fbfcf5,#f1f5f7f0);border:1px solid #ffffff8c;border-radius:30px;flex:1;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:16px 18px 18px;display:grid;overflow:hidden}.admin-family-header{justify-content:space-between;align-items:center;gap:18px;padding:4px 2px 12px;display:flex}.admin-family-header-main{gap:8px;min-width:0;display:grid}.admin-family-header-title-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.admin-family-title{margin:0;font-family:Noto Serif SC,Songti SC,serif;font-size:clamp(28px,2.7vw,36px);line-height:1.02}.admin-family-meta-line{color:var(--text-soft);margin:0;font-size:13px;line-height:1.65}.admin-family-header-actions{flex-shrink:0;justify-content:flex-end}.admin-family-tab-shell{grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0;display:grid}.admin-family-tab-nav{flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:2px;display:flex}.admin-family-tab-button{color:var(--text-soft);cursor:pointer;background:#fff9;border:1px solid #54677329;border-radius:999px;padding:10px 16px;transition:all .18s}.admin-family-tab-button:hover{color:var(--text);border-color:#35587038;transform:translateY(-1px)}.admin-family-tab-button.is-active{color:#29485a;background:#3558701f;border-color:#35587033;box-shadow:inset 0 1px #ffffffb8}.admin-family-tab-panels{flex-direction:column;min-height:0;display:flex}.admin-family-tab-panel{flex-direction:column;flex:1;height:100%;min-height:0;display:flex;overflow:hidden}.admin-family-tab-panel--tree{overflow:hidden}.admin-tree-pane{flex:1;min-height:0;display:flex;overflow:hidden}.admin-tree-surface{background:linear-gradient(#fcfefffa,#f0f4f6f5);border:1px solid #627a8a24;border-radius:26px;flex:1;height:100%;min-height:0;overflow:hidden;box-shadow:inset 0 1px #ffffffd1}.admin-tab-scroll-pane{flex:1;min-height:0;padding-right:4px;overflow:auto}.admin-overview-grid{align-items:start;margin-top:16px}.admin-overview-card{gap:12px;display:grid}.admin-overview-card h3{margin:8px 0 0;font-family:Noto Serif SC,Songti SC,serif;font-size:24px}.admin-table-pane{background:#ffffffad;border-radius:20px;overflow:auto}.admin-share-card,.membership-row{gap:10px;display:grid}.membership-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.detail-meta-list{color:var(--text-soft);flex-wrap:wrap;gap:8px 12px;display:flex}.detail-meta-list.column{gap:10px;display:grid}@media (width<=960px){.page.page--workspace.admin-family-detail-page{overflow:auto}.admin-family-workspace{flex-direction:column;gap:12px;padding:16px;display:flex;overflow:visible}.admin-family-header{flex-direction:column;align-items:flex-start}.admin-family-header-actions{justify-content:flex-start;width:100%}.admin-family-tab-shell{flex-direction:column;display:flex}.admin-family-tab-panels,.admin-family-tab-panel,.admin-tab-scroll-pane{height:auto;overflow:visible}.admin-tree-pane{min-height:520px}}.settings-stack{gap:14px;display:grid}.setting-row{border:1px solid var(--line);background:#ffffffc2;border-radius:20px;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;display:flex}@media (width<=860px){.setting-row{flex-direction:column;align-items:flex-start}}.share-page{min-height:100dvh;padding:18px}.share-shell{flex-direction:column;gap:16px;display:flex}.share-member-card{gap:8px;display:grid}