* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    :root {
      /* 宣纸 · 墨青 · 朱砂 · 铜金 —— 传统族谱美学 */
      --paper: #f6f1e6;
      --paper-2: #efe7d6;
      --card: #fffdf8;
      --ink: #2a2620;
      --ink-2: #6f6557;
      --line: #e6dcc7;
      --primary: #1f5c4d;     /* 墨青绿 */
      --primary-2: #2f7d6a;
      --primary-soft: #e8f1ec;
      --bronze: #a9823c;      /* 铜金 */
      --bronze-soft: #f6ecd6;
      --deceased: #c0392b;    /* 朱砂红 已故 */
      --living: #2a2620;
      --shadow: rgba(42,38,32,.14);
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --shadow-card: 0 2px 8px rgba(42,38,32,.06), 0 1px 2px rgba(42,38,32,.04);
      --shadow-hover: 0 8px 24px rgba(42,38,32,.12);
      --transition: .25s cubic-bezier(.4,0,.2,1);
    }
    body {
      margin: 0; min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #e4ddd0; color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }
    .page-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; gap: 26px; }
    .phone {
      width: 392px; height: 836px; background: var(--paper);
      border: 1px solid rgba(42,38,32,.12); border-radius: 38px; overflow: hidden;
      box-shadow: 0 28px 78px rgba(42,38,32,.26); position: relative; display: flex; flex-direction: column;
    }
    header { padding: 14px 18px 12px; background: var(--paper); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
    .header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .title-block h1 { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: .5px; }
    .title-block p { margin: 4px 0 0; color: var(--ink-2); font-size: 11.5px; }
    .role-switch { display: flex; background: #ece3d2; border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
    .role-switch button { border: 0; background: transparent; color: #7a6f5d; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-weight: 600; }
    .role-switch button.active { background: var(--primary); color: #fff; }
    main { flex: 1; min-height: 0; overflow: auto; padding: 15px 15px 94px; scroll-behavior: smooth; }
    .screen { display: none; animation: fade .2s ease; }
    .screen.active { display: block; }
    @keyframes fade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

    /* Hero */
    .hero { background: linear-gradient(135deg, #1f5c4d 0%, #15463a 70%, #123a30 100%); color: #fff; border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; border: 1px solid rgba(169,130,60,.35); box-shadow: 0 6px 20px rgba(31,92,77,.2); }
    .hero:before { content:""; position:absolute; inset:0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='100'%3E%3Cg fill='rgba(255,255,255,.08)'%3E%3Cpath d='M0 86 L46 44 L86 86 Z'/%3E%3Cpath d='M62 86 L108 30 L154 86 Z'/%3E%3Crect x='172' y='56' width='38' height='30' rx='3'/%3E%3Crect x='178' y='42' width='26' height='16' rx='2'/%3E%3Ccircle cx='34' cy='22' r='13'/%3E%3C/g%3E%3C/svg%3E") right bottom / 220px no-repeat; }
    .hero:after { content:""; position:absolute; top:0; right:0; width:60%; height:4px; background: linear-gradient(90deg, transparent, var(--bronze)); opacity:.6; }
    .hero h2 { margin: 0 0 8px; font-size: 22px; position: relative; z-index: 1; letter-spacing: 2px; }
    .hero p { margin: 0; line-height: 1.65; font-size: 12.5px; color: rgba(255,255,255,.9); position: relative; z-index: 1; }
    .hero .hero-actions { margin-top: 13px; display: flex; gap: 8px; position: relative; z-index: 1; }
    .hero .hero-actions button { border: 0; background: rgba(255,255,255,.94); color: var(--primary); font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
    .hero .hero-actions button:active { transform: scale(.95); }
    .hero .hero-actions button.ghost { background: rgba(169,130,60,.9); color: #fff; }

    .quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0 6px; }
    .quick-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px; text-align: center; transition: var(--transition); box-shadow: var(--shadow-card); }
    .quick-item:active { transform: scale(.96); }
    .quick-item strong { display: block; font-size: 22px; color: var(--primary); font-weight: 800; }
    .quick-item span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-2); }

    /* === 首页家族看板 === */
    .dash-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 12px 0; }
    .dash-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 10px; }
    .dash-stat .ds-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
    .dash-stat .ds-icon.gen { background: var(--primary-soft); color: var(--primary); }
    .dash-stat .ds-icon.live { background: #e8f5e9; color: #2e7d32; }
    .dash-stat .ds-icon.gone { background: #fbe9e7; color: var(--deceased); }
    .dash-stat .ds-icon.wed { background: var(--bronze-soft); color: var(--bronze); }
    .dash-stat .ds-val { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.1; }
    .dash-stat .ds-lbl { font-size: 11px; color: var(--ink-2); margin-top: 1px; }
    /* 世代分布柱状图 */
    .gen-chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; box-shadow: var(--shadow-card); }
    .gen-chart .gc-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: flex; justify-content: space-between; }
    .gen-chart .gc-title span { font-size: 11px; color: var(--ink-2); font-weight: 600; }
    .gen-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
    .gen-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
    .gen-bar { width: 100%; max-width: 38px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--primary-2), var(--primary)); min-height: 4px; transition: height .5s ease; position: relative; cursor: pointer; }
    .gen-bar:hover { filter: brightness(1.15); }
    .gen-bar .gen-bar-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--primary); }
    .gen-bar-label { font-size: 9px; color: var(--ink-2); white-space: nowrap; }
    /* 性别比例条 */
    .gender-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 6px 0; }
    .gender-bar .gb-m { background: var(--primary); }
    .gender-bar .gb-f { background: var(--bronze); }
    .gender-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); }
    .gender-legend b { color: var(--ink); }

    .section-title { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; }
    .section-title h3 { margin: 0; font-size: 16px; }
    .link-btn { border: 0; background: transparent; color: var(--primary); font-size: 12.5px; cursor: pointer; font-weight: 600; padding: 4px; }

    .feed-card, .info-card, .lineage-block, .panel, .activity, .progress-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow-card); }
    .feed-img { height: 158px; cursor: pointer; position: relative; background-size: cover; background-position: center; }
    .feed-img .stamp { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(2px); z-index: 2; }
    .feed-img .feed-tag { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,.92); color: var(--primary); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; z-index: 2; }
    .feed-body { padding: 13px; }
    .feed-date { color: var(--bronze); font-size: 12px; margin-bottom: 6px; font-weight: 600; }
    .feed-body h4 { margin: 0 0 7px; font-size: 15px; }
    .feed-body p { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 13px; }

    .admin-only { display: none; }
    body.admin .admin-only { display: block; }
    .admin-only.flex { display: none; }
    body.admin .admin-only.flex { display: flex; }
    .villager-only { display: block; }
    body.admin .villager-only { display: none; }

    .add-btn { width: 100%; border: 1.5px dashed var(--bronze); background: var(--bronze-soft); color: var(--primary); border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 12px; }
    .add-btn:active { background: #efe0c2; }
    /* 放入工具栏时改为紧凑按钮，置于搜索框之前 */
    .toolbar .add-btn { width: auto; flex: 0 0 auto; margin-bottom: 0; height: 38px; padding: 0 12px; border-radius: 10px; white-space: nowrap; }

    .panel { padding: 15px; }
    .panel h3 { margin: 0 0 10px; font-size: 15.5px; }
    .opt-item { display: flex; gap: 9px; margin: 11px 0; align-items: flex-start; }
    .opt-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; margin-top: 1px; }
    .opt-item strong { display: block; font-size: 13px; margin-bottom: 3px; }
    .opt-item p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }

    /* 最近动态 */
    .activity { padding: 14px; }
    .act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .act-head h3 { margin: 0; font-size: 15.5px; }
    .live-tag { font-size: 10.5px; color: var(--primary); background: var(--primary-soft); border: 1px solid #cfe2da; padding: 3px 9px; border-radius: 999px; font-weight: 700; }
    .act-item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #f1ebdd; align-items: center; }
    .act-item:first-child { border-top: 0; }
    .act-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
    .act-body { flex: 1; min-width: 0; }
    .act-text { font-size: 12.5px; color: #3a352c; line-height: 1.4; }
    .act-time { font-size: 10.5px; color: #a99c85; margin-top: 2px; }

    /* 进度条 */
    .progress-card { padding: 14px; }
    .pc-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #3a352c; margin-bottom: 9px; }
    .pc-head span:last-child { color: var(--primary); }
    .prog-bar { height: 9px; background: #efe7d8; border-radius: 999px; overflow: hidden; }
    .prog-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 999px; transition: width .5s ease; }
    .pc-sub { margin: 8px 0 0; font-size: 11px; color: #a99c85; line-height: 1.5; }

    /* Tree */
    .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .search-box { flex: 1; height: 38px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 0 12px; outline: none; color: var(--ink); font-size: 13px; }
    .search-box:focus { border-color: var(--primary); }
    .icon-btn { height: 38px; padding: 0 12px; border: 1px solid var(--line); background: var(--card); color: var(--primary); border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .chip-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; }
    .chip-row::-webkit-scrollbar { display: none; }
    /* 筛选面板：可展开/收起，默认收起不占屏 */
    .filter-panel { overflow: hidden; max-height: 260px; transition: max-height .3s ease, opacity .25s ease, margin .25s ease; opacity: 1; }
    .filter-panel.collapsed { max-height: 0; opacity: 0; margin: 0; }
    .ft-caret { display: inline-block; transition: transform .25s; font-size: 10px; }
    .icon-btn.open .ft-caret { transform: rotate(180deg); }
    .chip { border: 1px solid var(--line); background: var(--card); color: #6b6050; border-radius: 999px; padding: 7px 12px; font-size: 12px; cursor: pointer; flex: 0 0 auto; }
    .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-2); margin: 2px 2px 8px; flex-wrap: wrap; }
    .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
    .legend .ln-i { width: 12px; height: 0; border-top: 2px solid var(--bronze); margin-right: 4px; vertical-align: middle; display:inline-block; }
    .tree-stage { height: 500px; background: radial-gradient(circle at 30% 20%, #f3eee2, #eae1cf); border: 1px solid #ddceb4; border-radius: 14px; overflow: hidden; position: relative; touch-action: none; cursor: grab; }
    .tree-stage:active { cursor: grabbing; }
    .tree-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
    .tree-lines { position: absolute; inset: 0; pointer-events: none; }
    .tree-axis { position: absolute; left: 0; top: 0; width: 52px; height: 100%; pointer-events: none; z-index: 3; }
    .axis-label { position: absolute; left: 0; width: 50px; text-align: center; font-size: 10px; color: var(--primary); font-weight: 700; transform: translateY(-50%); background: rgba(255,253,248,.82); border-radius: 5px; padding: 2px 0; border: 1px solid #e1d6bf; }
    .node {
      position: absolute; width: 138px; min-height: 128px; background: var(--card); border: 1.5px solid #c9bd9f;
      border-radius: 12px; box-shadow: 0 4px 12px rgba(42,38,32,.08); display: flex; flex-direction: column;
      align-items: center; justify-content: flex-start; gap: 5px; cursor: pointer; padding: 10px 8px 8px; text-align: center;
      transition: opacity .2s, box-shadow .2s, transform .15s, border-color .2s;
    }
    .node:active { transform: scale(.97); }
    .node.dim { opacity: .22; }
    .node.hit { box-shadow: 0 0 0 3px rgba(31,92,77,.55), 0 8px 18px rgba(42,38,32,.15); border-color: var(--primary); z-index: 2; }
    .node.deceased { border-color: #e3a9a9; }
    /* 头像在上、资料在下，手机与电脑端均更容易浏览 */
    .node .avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 700; background-size: cover; background-position: center; box-shadow: 0 3px 8px rgba(42,38,32,.12), inset 0 0 0 1.5px rgba(0,0,0,.06); }
    .node .node-info { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items:center; gap: 2px; }
    .node .name { font-size: 13px; font-weight: 700; color: var(--living); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .node.deceased .name { color: var(--deceased); }
    .node .meta { font-size: 9px; color: #8a7f6a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .node .marital { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; align-self: center; }
    .node .marital.married { color: var(--primary); background: var(--primary-soft); }
    .node .marital.single { color: #9a8f78; background: #f0e9da; }
    .spouse-summary { font-size:9px; color:var(--bronze); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding: 2px 6px; background: var(--bronze-soft); border-radius: 999px; }
    .spouse-history { display:flex; flex-direction:column; gap:8px; }
    .spouse-history-item { background:#f6efe1; border:1px solid #e3d5ba; border-radius:10px; padding:10px; }
    .spouse-history-item strong { color:var(--bronze); font-size:13px; }
    .spouse-history-item p { margin:4px 0 0; font-size:12px; color:var(--ink-2); line-height:1.55; }
    .spouse-history-main { display:flex; align-items:center; gap:10px; }
    .spouse-history-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; background-size:cover; background-position:center; flex:0 0 auto; }
    .spouse-photo-editor { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .spouse-photo-editor .photo-prev { margin:0; min-width:52px; }
    .node-badge { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1px solid #c9bd9f; display: grid; place-items: center; font-size: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.1); }
    /* 节点底部「＋」：管理员模式下直接为本家添加子女 */
    .add-child-btn { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--primary); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; z-index: 6; box-shadow: 0 3px 10px rgba(31,92,77,.5); display: none; align-items: center; justify-content: center; padding: 0; }
    body.admin .add-child-btn { display: flex; }
    body.admin .add-child-btn::after { content: "加子女"; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 700; color: var(--primary); white-space: nowrap; background: rgba(255,253,248,.9); padding: 0 4px; border-radius: 4px; }
    .add-child-btn:active { transform: translateX(-50%) scale(.9); background: var(--primary-2); }
    /* 配偶节点：样式与本人一致，仅铜色虚线边 + “配偶”标 */
    .node.spouse { border-style: dashed; border-color: var(--bronze); background: #fffdf6; }
    .node.spouse .ribbon { position: absolute; top: -9px; left: 8px; background: var(--bronze); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .5px; }
    .node.spouse.hit { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(169,130,60,.5), 0 8px 18px rgba(42,38,32,.15); }
    .tree-help { position: absolute; left: 10px; bottom: 10px; right: 10px; background: rgba(255,253,248,.92); color: #6b6050; border: 1px solid #e1d6bf; border-radius: 10px; padding: 8px 10px; font-size: 11px; pointer-events: none; z-index: 4; line-height: 1.5; }
    /* 画布之上的悬浮控制条：全屏 / 复位 / 放大 / 缩小（独立于画布 DOM，悬浮于画布上方） */
    .tree-wrap { position: relative; }
    .tree-float-ctl { position: absolute; top: 12px; right: 12px; z-index: 8; display: flex; gap: 8px; }
    .tree-float-ctl button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e1d6bf; background: rgba(255,253,248,.95); color: var(--primary); font-size: 17px; cursor: pointer; box-shadow: 0 4px 12px rgba(42,38,32,.14); display: grid; place-items: center; padding: 0; }
    .tree-float-ctl button:active { background: #efe7d6; }
    .tree-float-ctl button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    /* 全屏时悬浮控制条下移到「✕ 退出」按钮之下，避免遮挡 */
    .phone.fs .tree-float-ctl { top: 58px; }
    .focus-clear { position: absolute; left: 12px; top: 12px; display: none; align-items: center; gap: 5px; background: rgba(42,38,32,.85); color: #fff; border: 0; border-radius: 999px; padding: 6px 12px; font-size: 11.5px; cursor: pointer; z-index: 5; font-weight: 600; }

    /* 世代折叠 + 节点收起本支 */
    .gen-collapse-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; margin: 2px 0 4px; }
    .gen-collapse-row::-webkit-scrollbar { display: none; }
    .gen-chip { border: 1px solid var(--line); background: var(--card); color: #6b6050; border-radius: 999px; padding: 7px 11px; font-size: 12px; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
    .gen-chip .caret { font-weight: 800; color: var(--primary); }
    .gen-chip.collapsed { background: var(--primary); color: #fff; border-color: var(--primary); }
    .gen-chip.collapsed .caret { color: #fff; }
    .gen-chip.ghost { opacity: .38; cursor: default; }
    .collapse-btn { position: absolute; top: -11px; left: -11px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--bronze); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; z-index: 7; display: grid; place-items: center; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
    .collapse-btn:active { transform: scale(.9); background: var(--primary); }
    .collapse-count { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; z-index: 7; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
    .node.collapsed { border-style: dashed; border-color: var(--primary); }

    /* Lineage text */
    .lineage-block { padding: 15px; }
    .lineage-title { margin: 0 0 4px; font-size: 15.5px; color: var(--primary); }
    .lineage-sub { margin: 0 0 6px; font-size: 12px; color: var(--ink-2); }
    .lineage-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); margin: 0 0 10px; }
    .lineage-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
    .lineage-list { margin: 0; padding: 0; list-style: none; }
    .gen-head { margin: 12px 0 6px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, var(--primary), var(--primary-2)); padding: 7px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: var(--transition); }
    .gen-head:hover { filter: brightness(1.08); }
    .gen-head:first-child { margin-top: 2px; }
    .gen-head .gh-count { font-size: 11px; opacity: .8; font-weight: 600; }
    .gen-head .gh-right { display: flex; align-items: center; gap: 8px; }
    .gen-head .gh-caret { font-size: 10px; transition: transform .2s; }
    .gen-head.collapsed .gh-caret { transform: rotate(-90deg); }
    .gen-items { overflow: hidden; transition: max-height .3s ease, opacity .2s ease; }
    .gen-items.collapsed { max-height: 0 !important; opacity: 0; }
    .lin-item { border-left: 2px solid #d8cbac; padding: 6px 0 6px 12px; font-size: 13px; line-height: 1.65; color: #443d31; transition: background .2s; border-radius: 0 6px 6px 0; }
    .lin-item:hover { background: #f3eee1; }
    .lin-item b { color: var(--ink); }
    .lin-item .dead { color: var(--deceased); font-weight: 700; }
    .lin-item .sp { color: var(--bronze); }
    .lin-item.highlight { background: #fff3cd; }
    .lineage-search { margin: 0 0 10px; }
    .lineage-search input { width: 100%; height: 38px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 0 12px; outline: none; color: var(--ink); font-size: 13px; }
    .lineage-search input:focus { border-color: var(--primary); }
    .lineage-search input::placeholder { color: #b5a98f; }

    /* Detail sheet */
    .sheet-mask { position: absolute; inset: 0; background: rgba(30,26,20,.46); z-index: 20; display: none; align-items: flex-end; }
    .sheet-mask.active { display: flex; }
    .sheet { width: 100%; max-height: 92%; background: var(--paper); border-radius: 22px 22px 0 0; overflow: auto; padding: 14px 16px 26px; animation: rise .24s ease; }
    @keyframes rise { from{transform:translateY(46px)} to{transform:translateY(0)} }
    .sheet-handle { width: 44px; height: 4px; background: #d8cdb4; border-radius: 99px; margin: 0 auto 14px; }
    .detail-head { display: flex; align-items: center; gap: 13px; margin: -14px -16px 14px; padding: 16px 16px 12px; position: sticky; top: 0; z-index: 12; background: var(--paper); border-bottom: 1px solid var(--line); }
    .detail-avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; font-weight: 800; flex: 0 0 auto; background-size: cover; background-position: center; }
    .detail-head h2 { margin: 0 0 4px; font-size: 21px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .detail-head h2 .badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
    .badge.live { background: var(--primary-soft); color: var(--primary); }
    .badge.gone { background: #f9e3e0; color: var(--deceased); }
    .badge.spouse-tag { background: var(--bronze-soft); color: var(--bronze); }
    .detail-head p { margin: 0; color: var(--ink-2); font-size: 12px; }
    .sheet-close { margin-left: auto; border: 0; background: #fff; color: #4a4338; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
    .info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
    .info-card .ic-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .info-card h3 { margin: 0; font-size: 14px; color: var(--primary); }
    .edit-link { border: 1px solid #c9d9cf; background: var(--primary-soft); color: var(--primary); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; transition: var(--transition); }
    .edit-link:active { transform: scale(.95); }
    .field-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
    .field { background: #f6f0e2; border-radius: var(--radius-sm); padding: 10px; min-height: 52px; transition: var(--transition); }
    .field:hover { background: #f1e9d6; }
    .field label { display: block; color: #847a66; font-size: 11px; margin-bottom: 4px; }
    .field span { display: block; font-size: 13.5px; color: #2f2a22; line-height: 1.35; font-weight: 600; }
    .field.full { grid-column: 1/-1; }
    .couple { display: flex; align-items: center; gap: 10px; background: #f1ebdd; border-radius: 9px; padding: 12px; }
    .couple .c-node { flex: 1; text-align: center; cursor: pointer; }
    .couple .c-avatar { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; color: #fff; font-weight: 700; background-size: cover; background-position: center; }
    .couple .c-node .cn { font-size: 13px; font-weight: 700; }
    .couple .c-node .cl { font-size: 11px; color: var(--ink-2); }
    .couple .heart { color: var(--bronze); font-size: 18px; }
    .bio { color: #4a4438; font-size: 13.5px; line-height: 1.85; margin: 0; white-space: pre-wrap; }
    .media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .media-thumb { height: 82px; border-radius: 10px; position: relative; cursor: pointer; overflow: hidden; background-size: cover; background-position: center; }
    .media-thumb span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 4px; text-align: center; }
    .empty-hint { grid-column: 1/-1; background: #f1ebdd; border-radius: 9px; padding: 12px; color: #847a66; font-size: 12.5px; text-align: center; }

    .path-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; }
    .path-node { color: var(--primary); font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
    .path-node:hover { background: var(--primary-soft); }
    .path-node.dead { color: var(--deceased); }
    .path-sep { color: #bcae93; }
    .desc-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .desc-chip { display: flex; align-items: center; gap: 6px; background: #f1ebdd; border-radius: 999px; padding: 5px 11px 5px 5px; cursor: pointer; }
    .desc-chip:hover { background: #e8dfca; }
    .desc-chip .d-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; background-size: cover; background-position: center; }
    .desc-chip .d-n { font-size: 12.5px; font-weight: 600; color: #3a352c; }
    .desc-chip.dead .d-n { color: var(--deceased); }
    .timeline { position: relative; padding-left: 18px; margin: 0; }
    .timeline:before { content:""; position:absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: #d8cbac; }
    .tl-item { position: relative; padding: 0 0 14px; }
    .tl-item:last-child { padding-bottom: 0; }
    .tl-item:before { content:""; position:absolute; left: -17px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 1px #c9d9cf; }
    .tl-item.gone:before { background: var(--deceased); }
    .tl-item.marry:before { background: var(--bronze); }
    .tl-t { font-size: 13px; font-weight: 700; color: #3a352c; }
    .tl-d { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
    .timeline-editor { display:flex; flex-direction:column; gap:8px; }
    .timeline-row { border:1px solid var(--line); background:#fffaf0; border-radius:10px; padding:9px; }
    .timeline-row .form-2 { margin-bottom:7px; }
    .timeline-row .btn { padding:8px; font-size:12px; }
    .timeline-add { width:100%; margin-top:8px; }

    /* Tabbar */
    .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: rgba(255,253,248,.97); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: 6px; z-index: 10; backdrop-filter: blur(10px); }
    .tab { border: 0; background: transparent; color: #6b6050; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-size: 11px; transition: var(--transition); }
    .tab svg { width: 22px; height: 22px; stroke-width: 2; fill: none; stroke: currentColor; transition: var(--transition); }
    .tab.active { color: var(--primary); font-weight: 700; }
    .tab.active svg { transform: scale(1.08); }
    .tab:active { transform: scale(.92); }
    .profile-hero { background: linear-gradient(135deg,#1f5c4d,#164437); color:#fff; border-radius:var(--radius-lg); padding:18px; display:flex; align-items:center; gap:13px; margin-bottom:12px; box-shadow: var(--shadow-hover); }
    .profile-avatar { width:58px; height:58px; border-radius:50%; background:#a9823c; display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:800; background-size:cover; background-position:center; flex:0 0 auto; border:2px solid rgba(255,255,255,.7); }
    .profile-hero h2 { margin:0 0 4px; font-size:18px; }
    .profile-hero p { margin:0; opacity:.78; font-size:12px; }
    .profile-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; margin-bottom:12px; box-shadow: var(--shadow-card); }
    .profile-card h3 { margin:0 0 10px; font-size:14px; color:var(--primary); }
    .profile-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .profile-actions button { border:1px solid var(--line); background:#fffaf0; border-radius:10px; padding:11px 7px; color:#514839; cursor:pointer; font-weight:700; }
    .feedback-item { border-top:1px solid #eee4d4; padding:10px 0; }
    .feedback-item:first-child { border-top:0; padding-top:0; }
    .feedback-head { display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; }
    .feedback-status { color:var(--bronze); white-space:nowrap; }
    .feedback-text { margin:5px 0 0; color:var(--ink-2); font-size:12px; line-height:1.55; }

    /* Image viewer（fixed：电脑端有滚动时也始终覆盖可视区，修复"点击没反应"） */
    .viewer { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 240; display: none; align-items: center; justify-content: center; padding: 22px; flex-direction: column; }
    .viewer.active { display: flex; }
    .viewer .v-img { width: 100%; max-height: min(78vh, 640px); border-radius: 10px; background-size: contain; background-position: center; background-repeat: no-repeat; }
    .viewer .v-img img { display: block; max-width: 100%; max-height: min(78vh, 640px); width: auto; height: auto; margin: 0 auto; border-radius: 10px; object-fit: contain; }
    .viewer p { color: #fff; text-align: center; font-size: 13px; margin: 14px 0 0; }
    .viewer .v-close { position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 20px; }
    .viewer .v-hint { color: rgba(255,255,255,.55); font-size: 11px; margin: 6px 0 0; }

    /* Form modal */
    .modal-mask { position: absolute; inset: 0; background: rgba(30,26,20,.48); z-index: 50; display: none; align-items: center; justify-content: center; padding: 18px; }
    .modal-mask.active { display: flex; }
    .modal { position:relative; width: 100%; background: var(--paper); border-radius: 18px; padding: 0; max-height: 90%; display: flex; flex-direction: column; overflow: hidden; animation: rise .2s ease; }
    .modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 18px 18px; }
    .modal-close-fixed { position:absolute; top:8px; right:8px; margin:0; width:34px; height:34px; border:0; border-radius:50%; background:#fff; color:#544b3d; box-shadow:0 3px 12px rgba(42,38,32,.16); font-size:21px; line-height:1; cursor:pointer; z-index:5; }
    .modal-close-fixed:hover { background:#f2eadb; color:var(--deceased); }
    .modal h3 { margin: 0 0 4px; font-size: 17px; }
    .modal .m-sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-2); }
    .form-row { margin-bottom: 11px; }
    .form-row label { display: block; font-size: 12px; color: #5e5444; margin-bottom: 5px; font-weight: 600; }
    .form-row input, .form-row select, .form-row textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px; font-size: 13px; color: var(--ink); outline: none; font-family: inherit; }
    .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); }
    .form-row textarea { min-height: 72px; resize: vertical; }
    .form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .form-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .radio-row { display: flex; gap: 8px; }
    .radio-row label { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 9px; text-align: center; font-size: 13px; cursor: pointer; margin: 0; }
    .radio-row input { display: none; }
    .radio-row input:checked + span { color: var(--primary); font-weight: 700; }
    .radio-row label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
    .sub-box { border: 1px dashed var(--bronze); border-radius: 12px; padding: 11px; margin-bottom: 11px; background: #fdf9ef; }
    .sub-box .sub-title { font-size: 12px; font-weight: 800; color: var(--bronze); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
    .fake-upload { border: 1.5px dashed var(--bronze); background: var(--bronze-soft); border-radius: 10px; padding: 16px; text-align: center; color: var(--primary); font-size: 12.5px; cursor: pointer; display: block; }
    .fake-upload input { display: none; }
    .photo-prev { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
    .photo-prev img { height: 64px; width: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
    .modal-actions { display: flex; gap: 10px; margin-top: 6px; }
    .btn { flex: 1; border: 0; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
    .btn.primary { background: var(--primary); color: #fff; }
    .btn.ghost { background: #ece3d2; color: #5e5444; }

    /* Toast */
    .toast { position: absolute; left: 50%; bottom: 94px; transform: translateX(-50%) translateY(20px); background: rgba(42,38,32,.95); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px; z-index: 60; opacity: 0; transition: .28s; pointer-events: none; max-width: 82%; text-align: center; }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* side note (desktop only) */
    .side-note { width: 348px; background: #fff; border: 1px solid #e1d6bf; border-radius: 16px; padding: 20px; box-shadow: 0 16px 44px rgba(42,38,32,.14); align-self: stretch; max-height: 836px; overflow: auto; }
    .side-note h2 { margin: 0 0 6px; font-size: 19px; color: var(--primary); }
    .side-note .sn-lead { margin: 0 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
    .side-note h4 { margin: 16px 0 8px; font-size: 13.5px; color: var(--primary); }
    .side-note ul { margin: 0; padding-left: 18px; color: #4a4438; font-size: 12.5px; line-height: 1.7; }
    .side-note li { margin-bottom: 6px; }
    .tag { display: inline-block; background: var(--primary-soft); color: var(--primary); border: 1px solid #cfe2da; border-radius: 999px; padding: 4px 10px; font-size: 12px; margin: 3px 4px 3px 0; }
    .tip-box { background: var(--bronze-soft); border: 1px solid #e6d3ac; border-radius: 12px; padding: 12px; margin-top: 8px; }
    .tip-box strong { color: var(--bronze); font-size: 13px; }
    .tip-box p { margin: 6px 0 0; font-size: 12px; color: #7a6a45; line-height: 1.6; }
    @media (max-width: 820px) {
      .page-shell { padding: 0; display: block; }
      .phone { width: 100vw; height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
      .side-note { display: none; }
    }

    /* 全屏放大 */
    .phone.fs { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; z-index: 9999 !important; }
    /* 管理员专属兜底：body.admin .phone 比 .phone.fs 更具体，必须显式 !important 覆盖 */
    body.admin .phone.fs { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; }
    .phone.fs .tree-stage { height: calc(100vh - 220px) !important; }
    .phone.fs .node { min-height: 88px; }
    .phone.fs .node .name { font-size: 14px; }
    .phone.fs .node .meta { font-size: 10px; }
    .icon-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    /* 全屏时的悬浮退出按钮 */
    .fs-exit { position: fixed; top: 14px; right: 14px; z-index: 10000; display: none; gap: 8px; }
    body.fs-active .fs-exit { display: flex; }
    .fs-exit button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(42,38,32,.92); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); display: flex; align-items: center; gap: 6px; }
    .fs-exit button:active { background: rgba(42,38,32,1); }

/* ===== 需求改造：三段日期选择（20260816e） ===== */
.form-row .date-3{display:flex;gap:6px}
.form-row .date-3 select{flex:1;min-width:0;padding:10px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}