* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    :root {
      /* 新中式 · 清逸 —— 月白宣纸 · 黛青 · 赭金 · 朱印 */
      --paper: #f4f1e9;              /* 宣纸 */
      --paper-2: #ece5d6;
      --card: #fffdf8;
      --ink: #2c2922;                /* 墨 */
      --ink-2: #6c6456;
      --ink-faint: #9a9081;
      --line: #e6dcc6;
      --primary: #2f5d52;            /* 黛青 */
      --primary-2: #417c6c;
      --primary-deep: #1f4239;
      --primary-soft: #e8f1ec;
      --gold: #a98545;               /* 赭金 */
      --bronze: #a98545;             /* 兼容旧引用 */
      --bronze-soft: #f4ead4;
      --gold-soft: #f4ead4;
      --seal: #b23a32;               /* 朱印 */
      --deceased: #bd4636;           /* 朱砂 已故 */
      --living: #2c2922;
      --shadow: rgba(44,41,34,.16);
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --shadow-card: 0 1px 2px rgba(44,41,34,.05), 0 6px 18px rgba(44,41,34,.06);
      --shadow-hover: 0 10px 30px rgba(44,41,34,.12);
      --transition: .28s cubic-bezier(.4,0,.2,1);
      --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun","KaiTi","STKaiti",serif;
      --sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
      --grain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }
    body {
      margin: 0; min-height: 100vh;
      font-family: var(--sans);
      background-color: var(--paper);
      background-image: var(--grain);
      background-size: 180px 180px;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .page-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; gap: 26px; }
    .phone {
      width: 392px; height: 836px; background-color: var(--paper);
      background-image: var(--grain); background-size: 180px 180px; background-blend-mode: multiply;
      border: 1px solid rgba(44,41,34,.12); border-radius: 38px; overflow: hidden;
      box-shadow: 0 28px 78px rgba(44,41,34,.22); position: relative; display: flex; flex-direction: column;
    }
    header { padding: 15px 18px 13px; background: var(--paper); border-bottom: 1px solid rgba(169,133,69,.28); flex: 0 0 auto; position: relative; }
    header:after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(169,133,69,.45), transparent); }
    .header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .title-block { position: relative; }
    .title-block h1 { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.2; letter-spacing: 2px; color: var(--primary-deep); }
    .title-block p { margin: 4px 0 0; color: var(--ink-2); font-size: 11.5px; letter-spacing: .5px; }
    .role-switch { display: flex; background: var(--gold-soft); border: 1px solid rgba(169,133,69,.3); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
    .role-switch button { border: 0; background: transparent; color: #8a7650; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-weight: 600; font-family: var(--serif); letter-spacing: 1px; }
    .role-switch button.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(31,93,82,.25); }
    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(160deg, #356257 0%, #244a40 58%, #1f4239 100%); color: #f3ede0; border-radius: var(--radius-lg); padding: 20px 18px 22px; margin-bottom: 14px; position: relative; overflow: hidden; border: 1px solid rgba(169,133,69,.4); box-shadow: 0 8px 24px rgba(31,66,57,.28); }
    .hero:before { content:""; position:absolute; left:0; right:0; bottom:0; height:96px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cg fill='rgba(255,255,255,0.10)'%3E%3Cpath d='M0 120 L0 70 L60 40 L110 72 L170 30 L230 78 L300 38 L360 74 L400 52 L400 120 Z'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.06)'%3E%3Cpath d='M0 120 L0 92 L70 64 L140 96 L210 60 L280 98 L350 66 L400 96 L400 120 Z'/%3E%3C/g%3E%3C/svg%3E") bottom / 400px 120px no-repeat; }
    .hero:after { content:""; position:absolute; top:0; right:0; width:55%; height:3px; background: linear-gradient(90deg, transparent, var(--gold)); opacity:.7; }
    .hero h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 23px; position: relative; z-index: 1; letter-spacing: 4px; display:inline-flex; align-items:center; gap:10px; }
    .hero h2::after { content:"谱"; width:30px; height:30px; flex:0 0 auto; background: var(--seal); color:#f7efe2; font-family:var(--serif); font-size:15px; font-weight:700; display:grid; place-items:center; border-radius:6px; transform:rotate(-6deg); box-shadow:0 3px 8px rgba(0,0,0,.28); letter-spacing:0; }
    .hero p { margin: 0; line-height: 1.7; font-size: 12.5px; color: rgba(243,237,224,.86); position: relative; z-index: 1; }
    .hero .hero-actions { margin-top: 14px; display: flex; gap: 8px; position: relative; z-index: 1; }
    .hero .hero-actions button { border: 0; background: #f6efe0; color: var(--primary-deep); font-family: var(--serif); font-size: 12.5px; font-weight: 700; letter-spacing:1px; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
    .hero .hero-actions button:active { transform: scale(.95); }
    .hero .hero-actions button.ghost { background: rgba(169,133,69,.92); 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: 18px 0 11px; }
    .section-title h3 { margin: 0; font-size: 16px; font-family: var(--serif); letter-spacing: 1px; position: relative; padding-left: 13px; color: var(--primary-deep); }
    .section-title h3::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:15px; background:linear-gradient(var(--gold),var(--primary)); border-radius:2px; }
    .link-btn { border: 0; background: transparent; color: var(--primary); font-size: 12.5px; cursor: pointer; font-weight: 600; padding: 4px; font-family: var(--serif); }

    .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); position: relative; }
    .feed-card::before, .info-card::before, .lineage-block::before, .panel::before, .activity::before, .progress-card::before { content:""; position:absolute; left:7px; right:7px; top:7px; bottom:7px; border:1px solid rgba(169,133,69,.20); border-radius: calc(var(--radius-lg) - 6px); pointer-events:none; z-index:1; }
    .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; font-family: var(--serif); letter-spacing: .5px; }
    .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(--gold); background: var(--gold-soft); color: var(--primary-deep); border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 12px; font-family: var(--serif); letter-spacing: 1px; }
    .add-btn:active { background: #ecdcbe; }
    /* 放入工具栏时改为紧凑按钮，置于搜索框之前 */
    .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; font-family: var(--serif); letter-spacing: .5px; color: var(--primary-deep); }
    .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 rgba(169,133,69,.3); background: var(--card); color: var(--primary); border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--serif); }
    .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(--gold); margin-right: 4px; vertical-align: middle; display:inline-block; }
    .tree-stage { height: 500px; background: radial-gradient(circle at 30% 20%, #f6f2e9, #ece3d1); border: 1px solid #e0d4ba; 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 #d9cfb5;
      border-radius: 12px; box-shadow: 0 4px 14px rgba(44,41,34,.10); 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; font-family: var(--sans);
    }
    .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.br-source { border-left: 5px solid #8a7bb0; }
    .node.br-qiansong { border-left: 5px solid #b88a45; }
    .node.br-modern { border-left: 5px solid #3f7a6b; }
    .node.br-stub { border-left: 5px solid #b3a98f; opacity: .82; }
    /* 世系缺失「（不详）」占位节点：虚线 + 斜纹底，明显区别于真实族人 */
    .node.placeholder { border-style: dashed; border-color: #c8bfa6; background: repeating-linear-gradient(45deg, #fbf8f0, #fbf8f0 6px, #f5efe3 6px, #f5efe3 12px); opacity: .94; }
    .node.placeholder .name { color: #9a8f78; font-weight: 600; letter-spacing: 0; }
    .node.placeholder .avatar { background: #cdc3a8; }
    .node.placeholder .meta { color: #a89c80; }
    /* 头像在上、资料在下，手机与电脑端均更容易浏览 */
    .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; font-family: var(--serif); letter-spacing: .5px; }
    .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(--gold); background: #fffdf6; }
    .node.spouse .ribbon { position: absolute; top: -9px; left: 8px; background: var(--gold); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .5px; }
    .node.spouse.hit { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,133,69,.5), 0 8px 18px rgba(44,41,34,.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); font-family: var(--serif); letter-spacing: .5px; }
    .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: #f3ede0; background: linear-gradient(90deg, var(--primary-deep), var(--primary)); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: var(--transition); font-family: var(--serif); letter-spacing: 1px; box-shadow: 0 3px 10px rgba(31,66,57,.22); border-left: 3px solid var(--gold); }
    .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; font-family: var(--serif); letter-spacing: 1px; color: var(--primary-deep); }
    .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); font-family: var(--serif); letter-spacing: .5px; }
    .edit-link { border: 1px solid rgba(169,133,69,.4); background: var(--gold-soft); color: var(--primary-deep); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; transition: var(--transition); font-family: var(--serif); }
    .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 rgba(169,133,69,.35); display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: 6px; z-index: 10; backdrop-filter: blur(10px); }
    .tab { border: 0; background: transparent; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-size: 11px; transition: var(--transition); font-family: var(--serif); letter-spacing: 1px; }
    .tab svg { width: 22px; height: 22px; stroke-width: 2; fill: none; stroke: currentColor; transition: var(--transition); }
    .tab.active { color: var(--primary); font-weight: 700; position: relative; }
    .tab.active::after { content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:22px; height:3px; border-radius:2px; background:var(--gold); }
    .tab.active svg { transform: scale(1.08); }
    .tab:active { transform: scale(.92); }
    .profile-hero { background: linear-gradient(135deg,#356257,#1f4239); color:#f3ede0; border-radius:var(--radius-lg); padding:18px; display:flex; align-items:center; gap:13px; margin-bottom:12px; box-shadow: var(--shadow-hover); border:1px solid rgba(169,133,69,.35); }
    .profile-avatar { width:58px; height:58px; border-radius:50%; background:var(--gold); 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); font-family: var(--serif); letter-spacing:.5px; }
    .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; font-family: var(--serif); letter-spacing: 1px; color: var(--primary-deep); }
    .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; font-family: var(--serif); letter-spacing: 1px; }
    .btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(31,66,57,.22); }
    .btn.ghost { background: var(--gold-soft); color: #6b5a36; }

    /* Toast */
    .toast { position: absolute; left: 50%; bottom: 94px; transform: translateX(-50%) translateY(20px); background: rgba(44,41,34,.95); color: #f4efe2; 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; font-family: var(--serif); letter-spacing: .5px; border:1px solid rgba(169,133,69,.4); }
    .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); font-family: var(--serif); letter-spacing: 1px; }
    .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(--gold-soft); color: #8a6a2f; border: 1px solid rgba(169,133,69,.4); border-radius: 999px; padding: 4px 10px; font-size: 12px; margin: 3px 4px 3px 0; font-family: var(--serif); letter-spacing: .5px; }
    .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}

/* ===== 世系图谱双菜单：早起源世系 / 大壮世系（20260821） ===== */
.lineage-tabs{display:flex;gap:8px;padding:10px 12px 2px;flex-wrap:wrap}
.lineage-tabs .lntab{flex:1 1 0;min-width:140px;padding:10px 12px;border:1px solid var(--line,#e7ddc9);background:rgba(255,255,255,.6);border-radius:12px;font:inherit;font-size:13px;font-weight:700;color:var(--ink-soft,#6b6253);cursor:pointer;transition:all .18s ease;text-align:center;line-height:1.25}
.lineage-tabs .lntab:hover{border-color:var(--accent,#8a6d3b);color:var(--accent,#8a6d3b)}
.lineage-tabs .lntab.active{background:linear-gradient(135deg,#5b7c6b,#3f6151);border-color:#3f6151;color:#fff;box-shadow:0 4px 12px rgba(63,97,81,.28)}

/* ===== 第N世 筛选条（顶部，左对齐，仅展示当前世系段落存在的世代；可压缩展开） ===== */
.gen-filter-bar{display:flex;gap:6px;padding:4px 12px 10px;overflow-x:auto;scrollbar-width:none}
.gen-filter-bar::-webkit-scrollbar{display:none}
.gen-filter-bar .gchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line,#e7ddc9);background:rgba(255,255,255,.7);color:#6b6253;border-radius:999px;padding:6px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.gen-filter-bar .gchip:hover{border-color:var(--accent,#8a6d3b);color:var(--accent,#8a6d3b)}
.gen-filter-bar .gchip.all{font-weight:700}
.gen-filter-bar .gchip.active{background:linear-gradient(135deg,#c79a4e,#a87b2f);border-color:#a87b2f;color:#fff;box-shadow:0 3px 9px rgba(168,123,47,.28)}
.gen-filter-bar .gchip .gc-count{font-size:10px;font-weight:700;background:rgba(0,0,0,.07);border-radius:999px;padding:0 5px;line-height:15px}
.gen-filter-bar .gchip.active .gc-count{background:rgba(255,255,255,.25)}
.gen-filter-bar .gchip.more{border-style:dashed;color:var(--accent,#8a6d3b);font-weight:700}

/* ===== 第N世 高亮 / 连线淡化 ===== */
.node.gen-hl{box-shadow:0 0 0 3px rgba(199,154,78,.6),0 8px 18px rgba(42,38,32,.16);border-color:#c79a4e;z-index:2;opacity:1!important}
.tree-lines path.dim-line{opacity:.1}