/* =========================================================
   族谱 · 独立小程序 H5 预览
   宣纸底 / 墨绿主色 / 朱砂点缀 / 牛皮纸画布
   ========================================================= */
:root {
  --ink: #22332C;
  --ink2: #4A5A52;
  --ink3: #86958E;
  --line: #E6E0D2;
  --paper: #F7F3EA;
  --card: #FFFFFF;
  --green: #1F6B54;
  --green-l: #E8F2EC;
  --red: #C8452F;
  --gold: #B8873B;
  --canvas: #EBC48D;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #EDE7DA; color: var(--ink); font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; outline: none; }

#app {
  position: relative; height: 100%; max-width: 520px; margin: 0 auto;
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(60, 45, 20, .12); overflow: hidden;
}
#view { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 18px; }
body[data-tab="tree"] #view { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
body[data-tab="book"] #view { padding: 0; }
/* 从树谱/册谱点进的子页（编辑、档案、祠堂…）：恢复滚动，否则下半页永远看不到 */
body[data-sub][data-tab="tree"] #view,
body[data-sub][data-tab="book"] #view { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 18px; display: block; }
body[data-sub="edit"][data-tab] #view { padding: 0; }
/* 彩色树是全屏画布页：容器不滚，画布自己拖 */
body[data-sub="colortree"][data-tab] #view { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

/* ---------------- 顶部 ---------------- */
.top { padding: calc(var(--safe-t) + 10px) 14px 8px; background: var(--paper); position: relative; z-index: 3; }
/* 族记树谱页：画布占满全屏，搜索/四切换/管理悬浮其上 */
.tbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 6px) 12px 8px; background: #F9F9F9;
}
.tbar .qbtn { border: 0; background: none; padding: 4px; font-size: 18px; color: #222; cursor: pointer; }
.tbar .mgr { border: 0; background: none; padding: 4px 2px; font-size: 14px; color: #1A1A1A; font-weight: 600; cursor: pointer; }
.tbar .chips {
  flex: 1; display: flex; gap: 0; padding: 3px; border-radius: 18px;
  background: #fff; border: 1.5px solid #2E2E2E;
}
.tbar .chips button { flex: 1; border: 0; background: none; padding: 6px 0; border-radius: 14px; font-size: 13px; color: #3A3A3A; cursor: pointer; }
.tbar .chips button.on { background: #1C1C1C; color: #fff; font-weight: 600; }
.top-row { display: flex; align-items: center; gap: 8px; }
.top-name { flex: 1; min-width: 0; }
.top-name b { display: block; font-size: 16px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-name em { font-style: normal; font-size: 11px; color: var(--ink3); }
.top-btn { border: 0; background: none; padding: 6px; font-size: 17px; color: var(--ink2); cursor: pointer; border-radius: 8px; }
.top-btn:active { background: #EFE9DA; }
/* 子页（发现/族事）顶栏：返回键要跟其他子页一样大，且滚动时钉住，别让人滚下去就找不着路 */
.top.sticky { position: sticky; top: 0; box-shadow: 0 1px 0 rgba(60, 45, 20, .05); }
.top-btn.back { width: 34px; height: 34px; padding: 0; font-size: 24px; line-height: 1; color: var(--ink); }
/* 品牌标：谱源 AI族谱 */
.brand-mini i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0; color: #B4432E; }

/* 四切换胶囊 */
.chips { display: flex; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-top: 8px; }
.chips button {
  flex: 1; border: 0; background: none; padding: 7px 0; border-radius: 8px;
  font-size: 12px; color: var(--ink2); cursor: pointer; transition: .15s;
}
.chips button.on { background: var(--green); color: #fff; font-weight: 700; }

/* ---------------- 首页 ---------------- */
.home { padding-bottom: 10px; overflow-x: clip; }   /* clip 裁掉封面负 margin 出血，页面不再能左右拖 14px */
.hm-cover { position: relative; margin: 0 -14px; padding: calc(var(--safe-t) + 14px) 18px 16px; background: linear-gradient(150deg, #F6EFDE, #EFE3C6 55%, #E6D4AE); color: #4A3A26; overflow: hidden; }
/* 2026-10-25 用户定：首页顶部不再展示祠堂照片，宣传位换成两张固定轮播横幅（.bn-wrap） */
.hm-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 86% 6%, rgba(184, 135, 59, .16), transparent 46%),
              radial-gradient(circle at 4% 96%, rgba(184, 135, 59, .12), transparent 42%),
              repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 7px); }
.hm-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
/* 品牌标（2026-11-01 用户定：谱缘与开化卡卡共用同一 LOGO —— 红K激情/力量 + 蓝K互联网色）
   原「双框印章 + 世系吊线」矢量标退役；LOGO 为透明底 PNG（assets/logo.png，76KB），
   深浅底都可用，米金首屏与深金第 2 张上对比足够。 */
.hm-brand { display: inline-flex; align-items: center; gap: 7px; }
.hm-brand::before {
  content: ''; width: 24px; height: 24px; flex: 0 0 24px;
  background: url("assets/logo.png") center / contain no-repeat;
}
.hm-brand { font-family: 'Songti SC', STSong, SimSun, serif; font-size: 12.5px; letter-spacing: 2px; color: rgba(74, 58, 38, .72); }
.hm-set { border: 0; background: rgba(74, 58, 38, .08); color: #4A3A26; width: 40px; height: 40px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }   /* 2026-10-28 版面评审：触控 30→40px */
.hm-set svg { width: 17px; height: 17px; }
/* 封面上「我的谱 N」：首页显示的就是当前这本谱，多本时点这里直接切 */
.hm-tools { display: flex; align-items: center; gap: 7px; }
.hm-clan { border: 0; background: rgba(74, 58, 38, .08); color: #4A3A26; height: 40px; border-radius: 20px; padding: 0 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hm-clan svg { width: 14px; height: 14px; }
.hm-clan b { font-weight: 800; color: #8C6A2F; }
.hm-name { position: relative; z-index: 1; font-family: 'Songti SC', STSong, SimSun, serif; font-size: 31px; font-weight: 800; letter-spacing: 7px; margin-top: 18px; text-shadow: 0 2px 8px rgba(74, 58, 38, .18); }
.hm-meta { position: relative; z-index: 1; font-size: 11.5px; opacity: .76; margin-top: 7px; letter-spacing: 1px; }
/* 谱名旁的状态徽章（原来占一整个数字格，现在缩成小章） */
.hm-badge { display: inline-block; vertical-align: 7px; margin-left: 9px; font-family: -apple-system, "PingFang SC", sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 4px;
  background: rgba(184, 135, 59, .12); border: 1px solid rgba(140, 106, 47, .38); color: #8C6A2F; }
/* 四个数字格 → 一行小字 */
.hm-line { position: relative; z-index: 1; margin-top: 12px; font-size: 12px; letter-spacing: .8px; color: rgba(74, 58, 38, .62); }
.hm-line b { font-size: 15.5px; font-weight: 800; color: #8C6A2F; }
.hm-cta { position: relative; z-index: 1; display: flex; gap: 9px; margin-top: 14px; }
.hm-cta button { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid rgba(74, 58, 38, .28); border-radius: 9px; padding: 0 8px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .55); color: #4A3A26; cursor: pointer; }   /* 2026-10-28 版面评审：实测 39px，补到 44px 触控下限 */
.hm-cta button.pri { background: #5C4526; color: #F6EFDE; border-color: #5C4526; }
/* 社会证明：第几届编委会 / 几位贤达，点得进去 */
.hm-proof { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 11px; border-top: .5px solid rgba(74, 58, 38, .14); }
.hm-proof button { border: 0; background: none; padding: 0; font-family: inherit; font-size: 11px;
  color: rgba(74, 58, 38, .66); cursor: pointer; letter-spacing: .4px; }
.hm-proof button:active { color: #8C6A2F; }
.hm-proof button b { color: #8C6A2F; font-weight: 700; }
.hm-proof i { font-style: normal; color: rgba(74, 58, 38, .3); }
/* 首页搜索条：一百人以上，「找我爷爷」比逐层点树快得多 */
.hm-search { display: flex; align-items: center; width: 100%; margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid #E7E1D3; background: #fff; border-radius: 11px; font-family: inherit;
  font-size: 13px; color: #6B6355; text-align: left; cursor: pointer; box-shadow: 0 1px 4px rgba(60, 45, 20, .05); }
.hm-search svg { width: 15px; height: 15px; color: #8C6A2F; flex: 0 0 auto; }
.hm-search span { margin-left: 4px; font-size: 11.5px; color: #B4ADA0; }
.hm-search:active { background: #FBF8F0; }

/* 演示谱提示条（2026-10-28）：正在看的是内置示例，不是自己的谱，一键切回 */
.hm-demo { display: flex; align-items: center; gap: 7px; width: 100%; margin: 10px 0 0;
  padding: 9px 13px; border: 1px dashed #C9B585; background: #FBF6E9; border-radius: 11px;
  font-family: inherit; font-size: 12.5px; color: #8C6A2F; text-align: left; cursor: pointer; }
.hm-demo svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hm-demo:active { background: #F6EFDE; }

/* 备份提醒条（2026-10-26）：未登录 + 本机有谱，24h 提醒一次，可关 */
.hm-bakbar { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
  padding: 10px 12px; border: 1px solid #F0DFAE; background: #FDF6E3; border-radius: 11px; }
.hm-bakbar span { flex: 1; font-size: 12px; line-height: 1.65; color: #6B5A32; }
.hm-bakbar b { color: #8C6A2F; cursor: pointer; }
.hm-bakbar button { flex: 0 0 auto; width: 22px; height: 22px; border: none; background: none;
  color: #B4A87E; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }

.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 9px; margin: 14px 0 2px; background: #fff; border-radius: 14px; padding: 18px 8px; box-shadow: 0 1px 6px rgba(60, 45, 20, .05); }
.hm-grid button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: #4A3A26; cursor: pointer; white-space: nowrap; }
.hm-grid i { font-style: normal; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: #F5EFE2; color: #8C6A2F; }
.hm-grid i svg { width: 22px; height: 22px; }
/* 色系统一（用户 2026-10-24 定）：宫格图标底色全部用封面的淡绿，不再分黄/蓝/粉 */

.hm-pg .pg-tx { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 9px; }
.hm-pg .pg-tx b { font-size: 22px; font-weight: 800; color: #8C6A2F; }
.hm-pg .pg-tx em { font-style: normal; font-size: 11px; color: var(--ink3); }
.hm-pg .pg-bar { height: 7px; border-radius: 4px; background: #EFEADC; overflow: hidden; }
.hm-pg .pg-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #A9803B, #C9AC66); }
.hm-pg .pg-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); padding-top: 8px; }
/* 续修进度卡里的常驻邀请行 */
.pg-inv { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 11px; padding: 10px 0 1px;
  border: 0; border-top: .5px solid #EFE8D8; background: none; font-family: inherit;
  font-size: 12px; color: #6B6355; cursor: pointer; }
.pg-inv b { margin-left: auto; font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; color: #8C6A2F; }
.pg-inv i { font-style: normal; color: #C4BCAA; font-size: 13px; }
.pg-inv:active { opacity: .7; }

/* 新谱起步：三步 + 两个动作 */
.hm-start .row { align-items: flex-start; }
.hm-start .ic { background: #F5EFE2; color: #8C6A2F; font-weight: 800; font-size: 12px; }
.hs-btns button { flex: 1; border: 1px solid #E2DAC6; background: #fff; border-radius: 9px; padding: 10px 0; font-size: 13px; font-weight: 600; color: #4A3A26; cursor: pointer; }
.hs-btns button.pri { background: #5C4526; border-color: #5C4526; color: #F6EFDE; }

.hm-foot { text-align: center; font-size: 10.5px; color: #A8A296; padding: 20px 0 4px; letter-spacing: .5px; }
/* 备案号（2026-11-02 备案通过）：挂在首页页脚最底下，小字、可点、不抢眼 */
.pf-icp { text-align: center; padding: 4px 0 18px; font-size: 10.5px; letter-spacing: .3px; }
.pf-icp a { color: #B0A996; text-decoration: none; }

/* ---------------- 谱影集（2026-10-26：额度条 + 九宫格 + 大图） ---------------- */
.al-q { margin: 10px 12px 0; background: #FFFDF7; border: 1px solid #E7DCC2; border-radius: 12px; padding: 13px 14px 12px; }
.al-q-h { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #9B8A68; }
.al-q-h b { font-size: 20px; font-weight: 800; color: #5C4526; letter-spacing: .5px; }
.al-q-h span { margin-left: auto; font-size: 12px; color: #8C6A2F; font-weight: 600; }
.al-q-bar { margin-top: 9px; height: 6px; border-radius: 3px; background: #EFE6D2; overflow: hidden; }
.al-q-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C9A96A, #8C6A2F); transition: width .25s; }
.al-q-bar i.full { background: linear-gradient(90deg, #C9765A, #B0543F); }
.al-q-tip { margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: #9B8A68; }
.al-up { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 24px); margin: 11px 12px 0;
  padding: 12px 0; border-radius: 11px; border: 1px dashed #C9B585; background: #FBF6E9; color: #8C6A2F;
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.al-up svg { width: 17px; height: 17px; }
.al-up:disabled { border-color: #E2DAC6; background: #F3EEE1; color: #B3A47F; cursor: default; }
.al-ro { display: flex; align-items: center; gap: 7px; margin: 11px 12px 0; padding: 10px 12px;
  border-radius: 10px; background: #F5F0E2; border: 1px solid #E7DCC2; color: #9B8A68; font-size: 12px; }
.al-ro svg { width: 15px; height: 15px; flex: 0 0 auto; }
.al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; }
.al2 { position: relative; background: #fff; border-radius: 11px; padding: 7px; box-shadow: 0 1px 6px rgba(60, 45, 20, .06); cursor: pointer; }
.al2 img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; background: #EFE9DA; }
.al2 .al-p { height: auto; aspect-ratio: 1/1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.al2 b { display: block; font-size: 11px; font-weight: 600; margin-top: 6px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al2 em { display: block; font-style: normal; font-size: 10px; color: #A8A296; margin-top: 2px; }
.al-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40, 30, 16, .55); color: #fff; font-size: 11px; font-style: normal;
  display: flex; align-items: center; justify-content: center; }
.al-view { position: fixed; inset: 0; z-index: 90; background: #171310; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px; }
.al-view img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; }
.al-vb { margin-top: 14px; text-align: center; color: #EFE6D2; }
.al-vb b { display: block; font-size: 14px; font-weight: 600; }
.al-vb em { display: block; font-style: normal; font-size: 11.5px; color: #A8A296; margin-top: 4px; }
.al-vb span { display: block; font-size: 11px; color: #7C7264; margin-top: 10px; letter-spacing: 1px; }

/* ---------------- 底部 Tab ---------------- */
#tabs {
  flex: 0 0 auto; display: flex; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line); padding-bottom: var(--safe-b);
  backdrop-filter: blur(12px); z-index: 30;
}
#tabs button {
  flex: 1; border: 0; background: none; padding: 7px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--ink3); cursor: pointer;
}
#tabs button i { font-style: normal; font-size: 19px; line-height: 1.1; display: flex; }
#tabs button i svg { width: 22px; height: 22px; }
#tabs button.on { color: #8C6A2F; font-weight: 700; }
#tabs button.on i svg { stroke-width: 2; }

/* ================= 树谱画布 ================= */
.tree-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.viewport {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  touch-action: none; cursor: grab;
  background: var(--canvas);
}
.viewport.grabbing { cursor: grabbing; }
.viewport.t-ivory { background-color: #F1EADA; }
.viewport.t-bamboo { background-color: #C9DCC1; }
.viewport.t-sakura { background-color: #F3DCE2; }
.viewport.t-ink { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px; }
.viewport.t-ink { background-color: #3F4642; }

/* 不用 will-change：升成合成层后放大会按位图重采样，字就糊了；留空让浏览器每次矢量重绘 */
/* will-change: 拖动/缩放只走合成层，不去重排上千个节点（2026-11-04 手感优化） */
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
/* 树谱 canvas 自绘（2026-11-04）：world 只包一块铺满视口的画布，
   卡和线全在 canvas 里现画，拖动缩放不再搬 DOM */
#world { inset: 0; }
#treeCv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.links path { fill: none; stroke: #FC2D2D; stroke-width: 1.4; }
.t-ivory .links path, .t-bamboo .links path, .t-sakura .links path { stroke: rgba(150, 128, 90, .4); }
.t-ink .links path { stroke: rgba(255, 255, 255, .34); }

.node { position: absolute; display: flex; align-items: flex-start; gap: 3px; }

/* 左右两侧世数标尺：标签顶对齐该层卡片，竖排「第一世」 */
/* 世数标尺（2026-11-04）：从 world 里挪出来固定在屏幕两侧。
   以前放在会缩放的世界层里，谱一大就跟着缩成一条细线；现在按 pan/zoom 换算 top，
   永远贴在屏幕左右，字也不会被缩放糊掉。 */
#grulerWrap { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gruler { position: absolute; top: 0; width: 26px; z-index: 2; pointer-events: none; }
.gruler.l { left: 0; }
.gruler.r { right: 0; }
.gruler .gr {
  position: absolute; left: 0; width: 26px; height: 98px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif;
  font-size: 10px; letter-spacing: 1px; line-height: 1.15;
  color: rgba(0, 0, 0, .42);
}
.t-ivory .gruler .gr, .t-bamboo .gruler .gr, .t-sakura .gruler .gr { color: rgba(0, 0, 0, .42); }
.t-ink .gruler .gr { color: rgba(255, 255, 255, .45); }


/* 族记 1:1（2026-11-04 晚定板，颜色从用户截图逐像素取色，别再凭感觉调）：
   男＝浅蓝底 #CBE7F9 + 亮蓝边 #3478F6 + 蓝剪影 #1296DB；
   女＝浅粉底 #F6CFE6 + 亮粉边 #FF69B4 + 玫红剪影 #D02078；
   男女头像同形（正圆头 + 底平半椭圆身）；名字竖排纯黑；本人绿卡、已故灰卡 */
.card {
  position: relative; height: 98px; border-radius: 3px; cursor: pointer; overflow: visible;
  background: #CBE7F9; border: 1.5px solid #3478F6;
}
.card.f { border-color: #FF69B4; background: #F6CFE6; }
.card.me { border-color: #1AAC19; background: #D2EFD0; }
/* 已故：整卡置灰（族记灰卡） */
.card.dead { border-color: #A9B2BA; background: #EDEFF1; }
.card.me.dead { border-color: #A9B2BA; background: #EDEFF1; }
/* 头像区：实心彩剪影立在卡上半部；照片圆角铺上半区 */
.card .ph {
  position: relative;
  height: 44px; margin: 2px 2px 0; border-radius: 4px;
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.card.f .ph { background: transparent; }
.card.me .ph { background: transparent; }
.card .ph i { position: relative; display: block; width: 30px; height: 30px; }
.card .ph .pp, .mav .pp, .av .pp, .ef-av .pp {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.card.dead .ph { background: transparent; }
/* 剪影：男女同形——正圆头 + 半椭圆身（族记同款），只靠颜色区分 */
.card .ph i::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 15px; height: 15px;
  margin-left: -7.5px; border-radius: 50%; background: #1296DB;
}
.card .ph i::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 28px; height: 15px;
  margin-left: -14px; border-radius: 14px 14px 0 0; background: #1296DB;
}
.card.f .ph i::before { background: #D02078; }
.card.f .ph i::after { background: #D02078; }
.card.me .ph i::before, .card.me .ph i::after { background: #1AAC19; }
.card.dead .ph i::before, .card.dead .ph i::after { background: #AEB6BD; }
/* 名字：族记同款竖排单列纯黑；加 .hz 才是横排（设置里关掉「竖形展示」） */
.card .nm {
  display: block; height: 50px; padding: 1px 0;
  font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif;
  font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 16px;
  color: #000000; margin: 0 auto; text-align: center;
  writing-mode: vertical-lr; text-orientation: upright;
}
.card.f .nm { color: #000000; }
.card.me .nm { color: #000000; }
/* 2026-11-04 用户定：已故只灰头像，名字保持黑字（.dnm 才是设置里主动开启的名字置灰） */
.card.dead .nm { color: #2B2B2B; }
/* 横排（设置里关掉竖形展示） */
.card.hz .nm {
  writing-mode: horizontal-tb; letter-spacing: 0; line-height: 46px; font-size: 13px;
}
.card.sel { outline: 2.5px solid #E8892B; outline-offset: 2px; z-index: 6; }
.card.sel { outline: 2.5px solid #E8892B; outline-offset: 2px; z-index: 6; }
.card.ol { box-shadow: inset 0 0 0 1.5px rgba(70, 55, 30, .35); }
/* 皇冠角标：已认证族人，默认被「不显示皇冠角标」关掉（本谱默认关） */
.card .gen {
  position: absolute; left: 1px; bottom: 1px; font-style: normal; font-size: 8px;
  color: #8A8A82; background: rgba(255, 255, 255, .85); border-radius: 3px; padding: 0 2px;
}
/* 世数：头像正上方，横排、浅蓝、比名字小一号 */
.card .gn { font-style: normal; font-weight: 600; line-height: 1; letter-spacing: 0; color: rgba(255,255,255,.92); white-space: nowrap; }
.card .ph .gn { position: absolute; top: 3px; left: 0; right: 0; text-align: center; }
.card > .gn { display: block; text-align: center; padding-top: 2px; }
.card.ng .nm { padding-top: 12px; height: 48px; }

.card.dead .gn { color: #6C93AE; }
/* 未入谱的配偶在卡下列一行小字 */
.card .sp {
  position: absolute; left: 50%; top: 94px; transform: translateX(-50%);
  font-size: 9px; color: #6B5B3E; white-space: nowrap;
}
/* 卡片右下角那个「圆圈 + 三角」已按用户要求彻底去掉（族记没有这个钮） */

/* 画布浮件 */
.cops { position: absolute; right: 10px; top: 10px; z-index: 6; display: flex; flex-wrap: wrap; width: 72px; justify-content: flex-end; gap: 6px; }
.cops button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(120, 96, 52, .22);
  background: rgba(255, 253, 246, .94); color: #6B5B3E; font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 10, .14);
}
.cstat {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  background: rgba(255, 253, 246, .93); border-radius: 20px; padding: 5px 11px 5px 6px;
  font-size: 11px; color: #5A4E38; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(60, 40, 10, .14);
}
/* 空谱提示（2026-11-04）：账号里有空谱时，别让人以为「人丢了」 */
.tree-empty {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 7; width: min(84%, 300px); text-align: center;
  background: #FFFDF7; border: 1px solid #E7D9B8; border-radius: 14px;
  padding: 20px 18px 16px; box-shadow: 0 8px 26px rgba(92, 69, 38, .16);
}
.tree-empty b { display: block; font-size: 15px; color: #5C4526; }
.tree-empty em {
  display: block; font-style: normal; font-size: 12.5px; color: #8A7A5C;
  line-height: 1.85; margin: 8px 0 14px;
}
.tree-empty .te-btns { display: flex; gap: 10px; }
.tree-empty button {
  flex: 1; height: 38px; border-radius: 19px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; border: 1px solid #D9C79A;
}
.tree-empty button.p { background: #5C4526; border-color: #5C4526; color: #F6EFDE; }
.tree-empty button.g { background: #FFFDF7; color: #5C4526; }
.pie { width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(#43A047 0 66%, #FB8C00 66% 100%); }
.cfabs { position: absolute; right: 12px; bottom: 14px; z-index: 6; display: flex; flex-direction: column; gap: 9px; }
.cfabs button {
  width: 54px; height: 54px; border: 0; border-radius: 50%; font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(60, 40, 10, .3);
}
.cfabs .invite { background: #43A047; }
.cfabs .print { background: #F4511E; }
.zooms button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .07);
  background: rgba(255, 255, 255, .95); font-size: 14px; color: #3D3D38; cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 10, .16);
}

/* 点卡浮动菜单 */
.cmenu {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 20;
  background: rgba(255, 255, 255, .99); border-radius: 16px; overflow: hidden;
  box-shadow: 0 -6px 26px rgba(40, 30, 10, .26);
  animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmenu-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px; border-bottom: 1px solid #F2EEE5; }
.cmenu-h b { font-size: 15px; }
.cmenu-h em { flex: 1; font-style: normal; font-size: 11px; color: var(--ink3); }
.cmenu-h button { border: 0; background: #F1EEE7; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; color: #666; cursor: pointer; }
.cmenu-b { display: grid; grid-template-columns: repeat(6, 1fr); padding: 8px 2px 10px; }
.cmenu-b button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: #4A4A44; padding: 4px 0; cursor: pointer; }
.cmenu-b button i { font-style: normal; font-size: 19px; line-height: 1; }
.cmenu-b button.on span { color: var(--green); font-weight: 700; }

/* ================= 册谱（线装书） ================= */
.book-top { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 12px) 14px 10px; background: var(--paper); }
.book-top .bt { flex: 1; }
.book-top .bt b { display: block; font-size: 16px; font-weight: 800; }
.book-top .bt em { font-style: normal; font-size: 11px; color: var(--ink3); }
.book-top .bp {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px;
  font-size: 12px; color: var(--ink2); cursor: pointer;
}
/* touch-action: pan-y —— 纵向留给页面滚动，横向交给翻页手势（2026-11-04） */
.book-stage { padding: 4px 0 10px; touch-action: pan-y; will-change: transform; }
/* 与纸同宽同高的定位层：框、书口、页眉的百分比都按「纸」算，不被外层留白摊薄 */
.book-sheet { position: relative; margin: 0 14px; }
/* 纸面铁律：册谱每一页都是 A4（210×297），和封面同大；内容超长在纸内滚动，不撑破纸 */
.book-page {
  position: relative; background: #FFFDF6; border-radius: 4px; padding: 22px 18px 40px;
  aspect-ratio: 210 / 297; box-shadow: 0 6px 24px rgba(70, 55, 25, .14);
  border: 1px solid #EDE4CE; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 不占位的滚动条：分页按整幅版心算，滚动条一出现就把版面挤窄（一行少排一个字） */
.book-page { scrollbar-width: none; }
.book-page::-webkit-scrollbar { width: 0; height: 0; }
/* 非封面页留白（族记成品页按比例量取，全部以纸宽为基准）：
   无框页正文两侧对称 13%、顶 27.3%（简约横线在其上方 16.6% 页高处）；
   有框页内容距框线：左 2.3%、右 3.6%、上 4.9%（均按框宽比例折算成纸宽）。 */
.book-page { padding: 27.3% 13% 7% 13%; }
/* 有框页：内框左右对称（左 9.4% 右 9.5% 纸宽），文字距内线 左 2.2% 右 2.9%、上 4.9% 框宽 */
.book-page.framed { padding: 12.8% 12.4% 9% 11.2%; }
.book-page.framed.even { padding: 12.8% 11.2% 9% 12.4%; }
.bp-head b { font-family: 'Songti SC', STSong, serif; font-size: 15px; letter-spacing: 3px; color: #5A4322; }
.bp-head em { display: block; font-style: normal; font-size: 10px; color: #23201B; margin-top: 3px; letter-spacing: 1px; }
.bp-body { font-family: 'Songti SC', STSong, serif; font-size: 13.5px; line-height: 2; color: #3E3425; }
.bp-body p { margin: 0 0 10px; text-indent: 2em; }
.bp-body .sign { text-align: right; text-indent: 0; color: #23201B; font-size: 12px; }
.bp-foot {
  position: sticky; bottom: 0; left: auto; right: auto; text-align: center;
  font-size: 10px; color: #23201B; letter-spacing: 1px;
}
.bp-foot .no { font-family: 'Songti SC', serif; }
/* 页眉五样式（族记五种成品页逐个放大量取，边距按纸宽百分比）：
   none 无；simple 纸面顶部右上小字 + 通栏粗横线；
   c1/c2/c3 页面双线框 + 右侧竖排书口（c1 左、c3 中段黑底白字）。
   书口嵌在框内右缘（族记同款）：左右两道线就是框的内线/外线，
   上下与框顶底线齐平（框线从书口顶部、底部穿过），书口外还有窄白边到纸缘。 */
.book-stage { position: relative; }
.bp-frame {
  position: absolute; left: 8.5%; right: 2.2%; top: 6.4%; bottom: 6.4%;
  border: 2px solid #23201B; pointer-events: none; z-index: 4;
}
/* 框上下对称（用户 2026-10-20 定：世系表填满框后，上下纸边留白必须一致，原 5.6/7.2 下面宽） */
/* 内线：右侧不画（那段由书口条左线提供，把框的右段撑开成书口） */
.bp-frame::after { content: ''; position: absolute; inset: 2px; border: 1px solid #23201B; border-right: none; }
/* 偶数页（左手页）整页镜像：框线与书口同步换边 */
.book-sheet.even .bp-frame { left: 2.2%; right: 8.5%; }
/* 偶数页内线镜像：左段由书口条右线提供，::after 左边不画——
   不镜像的话内线会画进书口条里、紧贴外框成双线（用户 2026-10-20 定：里框不得出现在书口里） */
.book-sheet.even .bp-frame::after { border-right: 1px solid #23201B; border-left: none; }
/* 页面边框色（2026-10-29 用户定：外框保持黑，内框/双线的里道换朱红 #9E3B2C——文武线）。
   偶数页镜像与付印层的选择器都比这条专属类更具体，必须连着覆盖一遍，否则红线里会掺回黑线 */
.bp-frame.f-red::after, .book-sheet.even .bp-frame.f-red::after,
#printroot .pp-sheet .bp-frame.f-red::after, #printroot .pp-sheet.even .bp-frame.f-red::after { border-color: #9E3B2C; }
.bp-hdr-s { position: absolute; left: 13%; right: 13%; top: 16.6%; z-index: 2; pointer-events: none; }
.book-sheet.even .bp-hdr-s span { text-align: left; }
.bp-hdr-s span {
  display: block; text-align: right; font-family: 'Songti SC', STSong, serif;
  font-size: 6px; color: #5A5248; letter-spacing: .5px; padding-bottom: 1px;
}
.book-sheet.even .bp-hdr-s span { text-align: left; }
.bp-hdr-s i { display: block; height: 2px; background: #23201B; }
.bk-gt {
  position: absolute; top: 6.4%; bottom: 6.4%; width: 7.3%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 6px 0; font-family: 'Songti SC', STSong, serif;
  pointer-events: none;
  /* 不透明纸底 + 完整边框：盖住内横线在书口里的段，内横线止于书口内竖线（丁字接头，不出十字叉） */
  background: #FFFDF6; border: 2px solid #23201B; z-index: 5;
}
.bk-gt.R { right: 2.2%; border-left-width: 1px; }
.bk-gt.L { left: 2.2%; border-right-width: 1px; }
/* 书口分三格：每格内文字垂直居中（族记同款）——上格 27、中格 46、下格 26 按成品页比例 */
.bk-gt .gt-seg {
  flex: 1 1 auto; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.bk-gt .gt-seg:nth-of-type(1) { flex-grow: 27; }
.bk-gt .gt-seg:nth-of-type(2) { flex-grow: 46; }
.bk-gt .gt-seg:nth-of-type(3) { flex-grow: 26; }
/* 下格：堂号在上、页码在下（族记同款），两行一起在格内居中 */
.bk-gt .gt-seg-end { flex-direction: column; gap: 5px; }
/* 页码「（1）」：套全角括号，书口窄，字号跟堂号一致，靠收紧字距贴住条宽；
   不加粗（用户 2026-10-20 定：页眉里除页码外都加粗）；下移 0.5cm（屏上 10px≈5mm） */
.bk-gt .gt.pg {
  writing-mode: horizontal-tb; font-size: 9.5px; font-weight: 500;
  letter-spacing: 0; line-height: 1; color: #23201B; white-space: nowrap;
  position: relative; top: 10px;
}
/* 两位数起逐级收字号：书口条只有 7.3% 纸宽，不收就会顶到框线外 */
.bk-gt .gt.pg2 { font-size: 8.2px; }
.bk-gt .gt.pg3 { font-size: 7.2px; }
.bk-gt .gt.pg4 { font-size: 6.2px; }
.bk-gt .gt {
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1.5px;
  font-size: 9.5px; color: #23201B; line-height: 1; font-weight: 700;
  max-height: 100%; white-space: nowrap;
}
/* 三段文字同一字号（谱名/支系/堂号加粗、大小一致；页码除外——用户 2026-10-20 定） */
.bk-gt .gt.mid, .bk-gt .gt.sm { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; }
/* 齿块装饰：接近方形（高≈书口内宽），c1 斜切，c2 横条挂三角（第二道倒置） */
.bk-gt i.tooth { flex: 0 0 auto; width: 100%; aspect-ratio: 1 / .95; height: auto; background: #23201B; }
.bk-gt.c1 i.tooth { clip-path: polygon(0 0, 100% 0, 100% 46%, 0 100%); }
.bk-gt.c2 i.tooth { clip-path: polygon(0 0, 100% 0, 100% 42%, 50% 100%, 0 42%); }
.bk-gt i.tooth.flip { transform: rotate(180deg); }
/* c3：书口黑底，谱名与堂号两段白底黑字，中段白字 */
.bk-gt.c3 { background: #23201B; }
.bk-gt.c3 .gt.mid { color: #FFFDF6; }
.bk-gt.c3 .gt.ttl, .bk-gt.c3 .gt.sm { background: #FFFDF6; color: #23201B; width: 100%; text-align: center; }
.bk-gt.c3 i.tooth { position: relative; background: #23201B; }
.bk-gt.c3 i.tooth::after {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #FFFDF6;
}
/* —— 书口图案三款（用户 2026-10-20 定：齿块不好看，参照族记鱼尾标加图案选）—— */
.bk-gt i.orn { flex: 0 0 auto; width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; }
/* c4 鱼尾式（族记同款）：对顶双圭角——上枚尖朝下、下枚尖朝上，中留一线 */
.bk-gt.c4 i.orn { gap: 5%; }
.bk-gt.c4 i.orn b {
  display: block; width: 100%; aspect-ratio: 1 / .62; background: #23201B;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 50% 100%, 0 38%);
}
.bk-gt.c4 i.orn.flip b { transform: rotate(180deg); }
/* c5 圆珠式：两枚实心圆珠，细巧不打眼 */
.bk-gt.c5 i.orn { gap: 16%; padding: 4% 0; }
.bk-gt.c5 i.orn b {
  display: block; width: 52%; aspect-ratio: 1 / 1; border-radius: 50%; background: #23201B;
}
/* c6 如意纹：三瓣云头（内嵌 SVG） */
.bk-gt.c6 i.orn { padding: 6% 0; }
.bk-gt.c6 i.orn svg { display: block; width: 100%; height: auto; }
.bk-gt.c6 i.orn.flip b { transform: rotate(180deg); }
/* 吊线图「圆圈显示性别」：垂珠圆点，男墨女赤 */
.sdot.f { background: #B0524F; }
.ou-r .sdot { margin-right: 4px; vertical-align: 1px; }
/* 目录「排版方向 · 竖向」：整页右起竖排，行内点线顺势竖走 */
.toc-wrap.v { writing-mode: vertical-rl; height: 100%; }
.toc-wrap.v .toc-row { padding: 0 0 9px; }
.toc-wrap.v .toc-row .td { border-bottom: 0; border-right: 1px dotted #D8CAA6; transform: none; }
/* 封面 */
/* —— 族记同款布面精装封面 —— */
.bp-cover {
  position: relative; height: 100%; min-height: 470px; border-radius: 3px; overflow: hidden;
  color: #F3EFE6; font-family: 'Songti SC', STSong, SimSun, serif;
  box-shadow: 0 8px 26px rgba(30, 25, 12, .35), inset 0 0 60px rgba(0, 0, 0, .18);
}
/* 布面纹理（2026-10-29 彩色册谱，族记书衣 1:1）：细密十字织纹叠在书衣色上，
   淡到不影响烫印文字，付印走 print-color-adjust:exact 一起进 PDF。
   ::before 在最底层，bc-title 等绝对定位子元素自然压在上面 */
.bp-cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
/* 封面左侧的缝线装订条已去（用户 2026-10-28 定：那一排像楼梯的格子不要了，封面留干净布面） */
/* 竖排书名：透底细双线框 + 烫印大字（用户 2026-10-21 定：去掉大白底，布色透出来） */
.bp-cover .bc-title {
  position: absolute; top: 4.6%; right: 6.4%; width: 30.5%; height: 67.5%;
  background: transparent; border: 1px solid rgba(238,228,203,.62); border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
}
.bp-cover .bc-title::before {
  content: ''; position: absolute; inset: 5px; border: 1px solid rgba(238,228,203,.42); pointer-events: none;
}
.bp-cover.rtl .bc-title { right: auto; left: 6.4%; }
.bp-cover .bc-title span {
  writing-mode: vertical-rl; font-size: 46px; font-weight: 700; color: #EFE7CE;
  letter-spacing: 10px; line-height: 1.15; font-family: 'Kaiti SC', KaiTi, 'Songti SC', STSong, serif;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);   /* 烫印在布面上的微立体感 */
}
/* 堂号：竖排白字 */
.bp-cover .bc-hall {
  position: absolute; top: 55.5%; right: 41.5%; writing-mode: vertical-rl;
  font-size: 20px; letter-spacing: 9px; color: #F0EDE3; font-family: 'Kaiti SC', KaiTi, 'Songti SC', serif;
}
.bp-cover.rtl .bc-hall { right: auto; left: 41.5%; }
/* 主编 / 日期：透底细线框、米白竖字（不再用白底块） */
.bp-cover .bc-box {
  position: absolute; left: 11.5%; top: 34.6%; width: 20.5%; height: 49.12%;
  background: transparent; border: 1px solid rgba(238,228,203,.5); border-radius: 1px; display: flex;
}
.bp-cover.rtl .bc-box { left: auto; right: 11.5%; }
.bp-cover .bc-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 9px 0 10px; min-width: 0;
}
.bp-cover .bc-col + .bc-col { border-left: 1px solid rgba(238,228,203,.35); }
.bp-cover .bc-col span {
  writing-mode: vertical-rl; text-orientation: upright; font-size: 13.5px; letter-spacing: 5px; color: rgba(240,233,212,.9); line-height: 1; height: 44px;
}
.bp-cover .bc-col i { width: 1px; flex: 0 0 1px; background: rgba(238,228,203,.35); margin: 7px 0; }
.bp-cover .bc-col b {
  writing-mode: vertical-rl; text-orientation: upright; font-size: 13.5px; letter-spacing: 3px; color: #EFE7CE;
  font-weight: 600; flex: 1; display: flex; align-items: flex-start; line-height: 1.4;
}
.bp-cover .bc-region {
  position: absolute; bottom: 7.28%; left: 0; right: 0; text-align: center;
  font-size: 14px; letter-spacing: 5px; color: #EFECE2;
}
/* —— 旧封面样式（已被布面精装版替换，暂留占位注释） —— */
/* 目录 */
.toc-row { display: flex; align-items: baseline; gap: 6px; padding: 9px 0; border-bottom: 1px dashed #E9DFC6; font-family: 'Songti SC', serif; }
.toc-row .tn { font-size: 13px; color: #3E3425; }
.toc-row .td { flex: 1; border-bottom: 1px dotted #D8CAA6; transform: translateY(-3px); }
.toc-row .tp { font-size: 11px; color: #23201B; }
/* 世系表 */
.gen-table .gt-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.gen-table .gt-h b { font-size: 13px; color: #6B4A22; letter-spacing: 2px; }
.gen-table .gt-h i { flex: 1; height: 1px; background: #E9DFC6; }
.gen-table .gt-h em { font-style: normal; font-size: 10px; color: #23201B; }
.gt-row .gk { color: #6B4A22; font-weight: 700; min-width: 56px; }
.gt-row .gv { color: #5A5140; }
/* 行传 */
.zhuan { margin-bottom: 16px; font-family: 'Songti SC', serif; }
.zhuan .zh { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.zhuan .zh b { font-size: 14px; color: #2E2517; letter-spacing: 1px; }
.zhuan .zh em { font-style: normal; font-size: 10px; color: #23201B; }
.zhuan p { font-size: 12.5px; line-height: 1.95; color: #23201B; margin: 0; text-indent: 2em; }
/* 翻页 */
.book-nav { display: flex; align-items: center; gap: 10px; padding: 6px 14px calc(10px + var(--safe-b)); }
.book-nav button {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 9px 14px; font-size: 13px; color: var(--ink2); cursor: pointer;
}
.book-nav button:disabled { opacity: .35; }
.book-nav .bv { flex: 1; text-align: center; font-size: 11px; color: var(--ink3); }
.book-nav .bv b { color: var(--ink); font-size: 13px; }

/* ---- 册谱版式切换条 ---- */
.bk-modes button {
  flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 7px 4px; cursor: pointer; text-align: center;
}
.bk-modes button b { display: block; font-size: 13px; color: var(--ink2); font-weight: 700; }
.bk-modes button em { font-style: normal; font-size: 9.5px; color: var(--ink3); }
.bk-modes button.on { border-color: var(--green); background: #F2F8F3; }
.bk-modes button.on b { color: var(--green); }

/* ---- 苏式：垂珠体竖排（族记 56/57 页截图，用户 2026-10-20 定）----
   世与世之间横线；世数牌黑底白字竖排；人组之间竖线；
   名字竖排大字黑、内容竖排小字黑（比名字小一号，绝不用灰、不用红）；
   内容顺序：出生年月日 → 配偶 → 简介 → 子女（用户 2026-10-20 定）。
   一页 3 世：列高由 --suh 控制（JS 按版心高 ÷ 3 算），内容长了自动换列，绝不滚动。 */
.su-wrap { display: flex; flex-direction: column; }
.su-sec { display: flex; align-items: stretch; gap: 8px; padding: 8px 0; flex: 1 0 auto; }
.su-sec + .su-sec:not(.su-cont) { border-top: 1px solid #23201B; }   /* 世与世之间横线（同世续块不画） */
.su-gh {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright;
  font: 600 12px/1 'Songti SC', STSong, serif; letter-spacing: 2px;
  color: #FFFDF6; background: #23201B; border-radius: 5px; padding: 8px 5px;
  align-self: flex-start;
}
.su-gh i { font-style: normal; color: #FFFDF6; }
/* 人组流：从右往左（长兄在右，族记同款），一排装不下换到下一排——绝不滚动。
   人组内（视觉右→左）：父名+排行标注 → 名讳+性别圈 → 生卒 → 配某氏（族记 56/57 页 1:1） */
.su-body { flex: 1; min-width: 0; display: flex; flex-direction: row-reverse; justify-content: flex-start;
  flex-wrap: wrap; align-items: stretch; gap: 6px 0; }
.su-p { flex: 0 0 auto; display: flex; gap: 3px; padding: 0 9px; }
.su-p .rk {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 10.5px; letter-spacing: 1px; color: #23201B;
  padding-top: 2px;
}
.su-p .vn {
  writing-mode: vertical-rl; text-orientation: upright; position: relative;
  font-family: 'Songti SC', STSong, serif; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; color: #23201B;
}
/* 名顶垂线：从世带线垂到名顶（承上一带，族记同款） */
.su-p .vn::before { content: ''; position: absolute; top: -8px; left: 50%; width: 1px; height: 8px; background: #23201B; }
/* 性别圈：圆圈里一个字（男/女），全黑 */
.su-p .sx {
  font-style: normal; font-weight: 400; font-size: 8px; display: inline-block;
  border: 1px solid #23201B; border-radius: 50%; width: 13px; height: 13px;
  line-height: 12px; text-align: center; margin-bottom: 2px; letter-spacing: 0;
}
.su-p .vm {
  writing-mode: vertical-rl; text-orientation: upright; max-height: var(--suh, 120px);
  font-family: 'Songti SC', STSong, serif; font-size: 12.5px; line-height: 1.6; color: #23201B;
}
/* 生卒 / 配偶各起一列（竖排里 block 从右往左堆，族记同款） */
.su-p .vm span { display: block; margin-block-start: 2px; }
.su-p .vm span:first-child { margin-block-start: 0; }
.su-p .vm .sp { font-size: 13.5px; }

/* ---- 苏式横栏式·五世一抬（2026-10-27 二轮纠偏定板，实拍 02/04/05 为据）----
   一页 5 道横栏、**一栏 = 一个世**（同页不重世），五世一段段首另起一页；
   栏内兄弟并排（长兄在右、弟往左），每人一组：排行小字→名讳（与注文同大只加粗）→注文竖排向左；
   栏首最右世次双线框；装不下的兄弟组另起一页续排，空栏照印横线（老谱预刻栏线）。 */
.su-row { flex: 1 1 0; min-height: 0; overflow: hidden;   /* 溢出裁掉，绝不压到下一栏 */
  direction: rtl;   /* 右起排用 direction 不用 row-reverse：row-reverse+wrap 折行堆叠方向会反转 */
  display: flex; flex-flow: row nowrap; align-items: stretch; gap: 6px; padding: 5px 2px; }
.su-row + .su-row { border-top: 1px solid #23201B; }   /* 栏间横线（空栏也照印） */
.su-row .su-p {   /* 一人一组：组内右→左 排行→名讳→注文 */
  flex: 0 0 auto; min-width: 0; overflow: hidden; padding: 0;
  direction: rtl; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 4px;
}
.su-row .su-nt {
  /* 注文限宽 = 3 列（2026-10-28 整改「注文裁字」，用户选方案 1：收紧行距 + 放宽列数）。
     竖排的两个量必须分开看：**line-height 决定列宽**、字号+字距决定**每列字数**。
     旧值 line-height:1.9 + max-width:28px 算下来只容得下 1 列（23.75px），
     35 字注文要 6 列 143px，于是 29 字被 overflow 硬裁、连省略号都没有（实测 sw143/cw28）。
     现值：行距 1.5（列宽 17.25px）× 3 列 = 53px，字号 11.5（注文比名讳小一号，老谱同例），
     屏幕栏高 79px 时 6 字/列 × 3 列 = 18 字可见（旧版只有 6 字）。
     不能无上限：不限宽时 flex 会把长注文摊成十几列，一人块涨到 200px+、一栏只装 1 人。 */
  flex: 0 1 auto; min-width: 0; max-width: 53px; overflow: hidden;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 11.5px; line-height: 1.5; letter-spacing: .3px;
  color: #23201B;
}
.su-row .su-vn {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  color: #23201B; padding-top: 2px;
}
.su-row .su-rk {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 11px; letter-spacing: 1px; color: #23201B;
  padding-top: 3px;
}
.su-row .su-gb {
  flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-style: normal; font-size: 13px; letter-spacing: 2px;
  color: #23201B; border: 3px double #23201B; padding: 6px 4px; margin-left: 2px;
}
.su-row .su-gap {   /* 支系分界：房支之间的竖双线（同父兄弟连块，块间垫界） */
  flex: 0 0 auto; width: 10px; margin: 6px 0; border-left: 3px double #23201B;
}
.su-row .su-gh {    /* 支头衔接牌：承○○公——新段标明这支是上一段谁的儿子 */
  flex: 0 0 auto; align-self: stretch; writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 11px; letter-spacing: 1px; line-height: 1.6;
  color: #23201B; border: 1px solid #23201B; border-left: 3px double #23201B;
  padding: 5px 2px; margin: 4px 0; background: rgba(35,32,27,.04);
}

/* ---- 欧式：五世一抬竖排带表（族记 52 页 1:1，用户 2026-10-21 定）---- */
.ou-wrap { display: flex; align-items: stretch; box-sizing: border-box; }
.ou-title {
  flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright;
  font: 700 15px/1 'Songti SC', STSong, serif; letter-spacing: 5px; color: #23201B;
  padding: 2px 1px 0 0;
}
.ou-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ou-band { display: flex; align-items: stretch; padding: 7px 0; flex: 1 0 auto; }
.ou-band + .ou-band { border-top: 1px solid #23201B; }
/* 世数黑块：带左缘固定一列，垂直居中（跨排带时随带高居中，族记同款） */
.ou-gen {
  flex: 0 0 auto; align-self: center; writing-mode: vertical-rl; text-orientation: upright;
  font: 600 12px/1 'Songti SC', STSong, serif; letter-spacing: 2px;
  color: #FFFDF6; background: #23201B; border-radius: 5px; padding: 8px 5px; margin-right: 7px;
}
.ou-gen i { font-style: normal; color: #FFFDF6; }
.ou-row { flex: 1; min-width: 0; display: flex; flex-direction: row-reverse; justify-content: flex-start;
  flex-wrap: wrap; align-items: stretch; gap: 5px 0; }
.ou-p { flex: 0 0 auto; display: flex; flex-direction: row-reverse; gap: 3px; padding: 0 8px; }
.ou-p .rk {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: 'Songti SC', STSong, serif; font-size: 10px; letter-spacing: 1px; color: #23201B;
}
.ou-p .vn {
  writing-mode: vertical-rl; text-orientation: upright; max-height: var(--ouh, 120px);
  font-family: 'Songti SC', STSong, serif; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; color: #23201B;
}
.ou-p .sp {
  writing-mode: vertical-rl; text-orientation: upright; max-height: var(--ouh, 120px);
  font-family: 'Songti SC', STSong, serif; font-size: 12.5px; color: #23201B;
}
/* 正文流列（配氏+子嗣+葬地+简介，用户 2026-10-21 定）：竖排限列高，inline 文本超列高自动换列。
   2026-10-28 复审实测：只限列高不限列数会无限换列——单组宽 308/327px 超过整行 270px，
   一世祖与二世三兄弟被挤出行外裁 38~57px。限 5 列（7.75em = 5 × line-height 1.55），
   与 app.js 的 ouOwCap() 同一个口径；em 单位让打印样式（3.4mm 字号）自动跟随。 */
.ou-p .ow {
  writing-mode: vertical-rl; text-orientation: upright; max-height: var(--ouh, 120px);
  max-width: 7.75em; overflow: hidden;
  font-family: 'Songti SC', STSong, serif; font-size: 12.5px; line-height: 1.55; color: #23201B;
  text-combine-upright: digits 2;
}
/* 竖排里的阿拉伯数字两人一组并排（2026-10-28 复审「排版-1」）。
   生卒年月已由 cnYear() 转汉字，所以册谱里残留的数字主要来自用户自由填的简介
   （如「1958 年办茶场」）——upright 下每位数字各占一个字位，「1958」要吃掉 4 个字位、
   像被拉长。加这一条后两位并排，占 2 个字位；不认识该属性的浏览器忽略，无副作用。 */
.su-nt, .su-vn, .su-rk, .su-gh, .su-gb, .su-p .vm,
.ou-title, .ou-gen, .ou-p .vn, .ou-p .rk, .ou-p .sp {
  text-combine-upright: digits 2;
}

/* ---- 简约：卡片 ---- */
.jy-h em { font-style: normal; font-size: 9.5px; color: #23201B; letter-spacing: 0; }
.jy-h i { flex: 1; height: 1px; background: #E9DFC6; }
.jy-av.f { background: #F7E3EE; color: #A8467A; }
.jy-c b { display: block; font-family: 'Songti SC', STSong, serif; font-size: 13px; color: #2E2517; }
.jy-c em { display: block; font-style: normal; font-size: 9.5px; color: #9A8558; margin-top: 2px; }
.jy-c span { display: block; font-size: 9.5px; color: #23201B; margin-top: 1px; }
.jy-c i { display: block; font-style: normal; font-size: 9.5px; color: #23201B; margin-top: 1px; }

/* ---- 目录 / 行传补充 ---- */
/* 目录页（族记成品页 1:1）：不再自画双线框——框由「经典」页眉的页面边框统一给，
   否则会出现双重框；标题居中、点线行平铺，行距照成品页（原图 83px／1080 纸宽） */
.toc-title {
  margin: 0 0 4.4%; text-align: center; font-size: 17px; font-weight: 600;
  letter-spacing: 10px; text-indent: 10px; color: #23201B;
}
.toc-row { border-bottom: 0; padding: 2.2% 2px; }
.toc-row { cursor: pointer; }
.zhuan .zz { font-family: 'Songti SC', STSong, serif; font-size: 11.5px; color: #23201B; line-height: 1.9; }
.bp-body .rl { font-family: 'Songti SC', STSong, serif; margin-right: 6px; }

/* ---- 检索表（族记 1:1）：左书口竖排谱名/始祖/堂号，右面四栏按世排人 ----
   栏宽栏高由 idxGeo() 按同一套比例算（主区 padding 3.4%/4%、栏距 2.6%；左侧书口已删），
   改这里的百分比要同步 app.js 的 idxGeo，两边错了一栏就装错行 */
.bp-idx {
  height: 100%; box-sizing: border-box; border: 2px solid #2A2620; display: flex;
  font-family: 'Songti SC', STSong, serif; font-size: 12px; color: #2A2620; min-height: 0;
}
.bp-idx-main { flex: 1; min-width: 0; min-height: 0; padding: 3.4% 3.2%; display: flex; flex-direction: column; }
.bp-idx-cols { flex: 1; min-height: 0; display: flex; gap: 2.6%; }
.bp-idx-col { flex: 1; min-width: 0; overflow: hidden; }
.idx-cat {
  background: #211E19; color: #FFFDF6; text-align: center; width: 76%;
  margin: 0 auto 7px; padding: 2px 0; font-size: 1em; line-height: 1.6;
}
.idx-cat.wide { width: 88%; }
.idx-row { display: flex; align-items: baseline; line-height: 1.9; padding: 0 2px 0 0; cursor: default; }
.idx-row[data-act] { cursor: pointer; }
.idx-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-row b { flex: 0 0 auto; min-width: 1.6em; font-weight: 400; text-align: left; font-family: Georgia, serif; }

/* ---- 现代版式（族记 1:1，用户 2026-10-20 定改）----
   无页框（红框已去），表格格线全黑；
   照片格已去；本人/配偶名讳在左、生卒小格在右；本人简介一行横排。
   一页 3~4 人（表格每页人数设置），装不下自动开新页。 */
/* 红框已去（用户 2026-10-20 定：不要红框），整页只有黑色表格线；
   纵向 flex 让一页 3~4 张表平均铺满整页；
   左右自带 1px 边线并负外边距推到 .bp-frame 的两条竖线上——
   外侧压住框的内线（51.3px@415 纸）、书口侧压住书口条内线（389.6px），
   两条线 1px 共线：既不缺口也不「旁边多一条竖线」（用户 2026-10-20 定：线要到位）。
   换算：(留白-框线±线宽)/版心宽315px → 左 -3.24%、右 -4.47%（margin % 基准=版心宽）。
   高度收 1% 并上提 1.72%：表格在上下对称的框内垂直居中（用户 2026-10-20 定） */
.md-wrap { padding: 0; height: calc(100% - 1%); box-sizing: border-box;
  display: flex; flex-direction: column;
  border-left: 1px solid #2A2620; border-right: 1px solid #2A2620;
  margin-top: -1.72%;   /* 表格在框内垂直居中：框已上下对称，再均分框内上下空隙（用户 2026-10-20 定） */
  margin-left: -3.24%; margin-right: -4.47%; }
.book-page.even .md-wrap { margin-left: -4.47%; margin-right: -3.24%; }
.md-p {
  border-bottom: 0; font-family: 'Songti SC', STSong, serif;
  font-size: 12px; color: #2A2620; background: transparent; break-inside: avoid;
  flex: 1 1 auto; min-height: 0;   /* 可收缩：三张表必须全收进页框（用户 2026-10-21 定：一页 3 人不溢出） */
  display: flex; flex-direction: column;   /* 简介行吃掉余高：竖线才能接到人格底线（用户 2026-10-20 定） */
}
/* 2026-10-28 用户定：一页 3 人的表格，人与人之间要一眼能分开——
   原来是 1px 细线，三个人糊成一片；改成双线（老谱分栏的双边规矩），
   双线总粗 4px = 两条 1px 线 + 2px 间隙，比单人段内的行线明显重一档。
   单人段内部的行线（表头下、简介上）仍是 1px，层级不乱。 */
.md-p + .md-p { border-top: 4px double #2A2620; }
.md-p:last-child { border-bottom: 0; }
.md-p:first-child { border-top: 1px solid #2A2620; }   /* 顶横线：原来顶端开边，上下要封口 */
/* 现代世系表 × 有框页：表格精确落进框内线（用户 2026-10-20 定：同书口规矩，丁字接头不出十字叉）
   上下边 = 框的内横线（表格不再自画顶线，消双线）；左右竖线与书口内线/框内竖线共线，
   竖线上下正好顶到内横线。无框页（页眉 none/simple）仍走上面的流式布局 */
/* 坐标补偿：框的定位基准是 .book-sheet，表格的定位基准是 .book-page（含 1px 边框），
   两套基准差 1px——偏移按 8.5%*2px=.17 / 9.5%*2px=.19 / 6.4%*2px=.128 精确折算，
   否则右缘框内线和表格边线差 0.8px 成双线（用户 2026-10-20 定：只许一条线） */
.book-page.framed .md-wrap {
  position: absolute; margin: 0; height: auto;
  top: calc(6.4% + 2.13px); bottom: calc(6.4% + 2.13px);
  left: calc(8.5% + 1.17px); right: calc(9.5% - 1.81px);
}
.book-page.framed.even .md-wrap { left: calc(9.5% - 1.81px); right: calc(8.5% + 1.17px); }
.book-page.framed .md-p:first-child { border-top: 0; }
.md-h { display: flex; border-bottom: 1px solid #2A2620; flex: 0 0 auto; }
.md-h span { flex: 0 0 19%; text-align: center; padding: 2.5px 0; font-weight: 600; border-left: 1px solid #2A2620; }
.md-h span:nth-child(1) { border-left: 0; flex: 0 0 9%; }   /* 世系列收窄：兄妹/排行已独立成表（用户 2026-10-20 定） */
.md-h span:nth-child(4) { flex: 0 0 16%; }
.md-h span:nth-child(5) { flex: 1; }
.md-b { display: grid; grid-template-columns: 9% 19% 19% 16% 1fr;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto; flex: 1 1 auto; min-height: 0; }
.md-c { border-left: 1px solid #2A2620; padding: 2px 5px; min-width: 0; min-height: 0; }   /* 上下内衬 2px：给四行块腾高度（用户 2026-10-21 定） */
/* 按用户 2026-10-21 手绘图：本人/配偶列分三段（姓名行/生日卒日块/兄妹排行块），世系+父母+子女贯穿三段 */
.md-c1 { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 4px 3px;
  border-left: 0; }   /* 左边线由 .md-wrap 自带，c1 再画就成 2px 双线（用户 2026-10-20 定：去掉多的一条）；只放世数 */
.md-r1c2 { grid-column: 2; grid-row: 1; }
.md-r1c3 { grid-column: 3; grid-row: 1; }
.md-r23c2 { grid-column: 2; grid-row: 2 / 4; display: flex; }
.md-r23c3 { grid-column: 3; grid-row: 2 / 4; display: flex; }
/* 生日/卒日/兄妹/排行四行在同一容器 space-evenly：四行间距严格一致（用户 2026-10-21 定） */
.md-ds4 { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly;
  margin: 0 -5px; padding: 1px 2px; min-width: 0; }   /* 负边距抵消 .md-c 内衬：日期 10 字符才有宽度放全；上下内衬再收（用户 2026-10-21 定） */
/* 父母栏（2026-10-28 用户定）：父母名不再贴着表头上边，往下让一口气；
   父名与母名之间也拉开一段——原来两行紧挨着挤在格子顶上，看着憋屈 */
.md-c4 { grid-column: 4; grid-row: 1 / 4; padding-top: 8px; }
.md-c4 .md-pr + .md-pr { margin-top: 7px; }
.md-c5 { grid-column: 5; grid-row: 1 / 4; }   /* 子女栏同上；余高全给上层，多子女排得下 */
.md-gen { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.35; margin: 1px 0 2px; }
/* 兄妹/排行：纯文字两行，不画框（列窄字多，框只会挤爆）；格内垂直居中 */
.md-x { display: flex; justify-content: space-between; align-items: center; font-size: 9px; white-space: nowrap; }
.md-x span { color: #23201B; }   /* 标签字全黑，不上彩色灰（用户 2026-10-21 再申明） */
.md-x em { font-style: normal; }
/* 姓名/生卒分两段（用户 2026-10-21 手绘图）：名字行矮、生日卒日块吃余高居中 */
.md-nm { display: block; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.4;   /* 定死行高：空名占位与实名格子等高，分隔线齐平 */
  margin: 0 -5px; padding: 2px 4px;   /* 负边距抵消 .md-c 的 5px 内衬，横隔线接到左右竖线；内衬 4px 给名字+页码留够宽 */
  border-bottom: 1px solid #2A2620; }   /* 名字不锁 nowrap：多配偶长名换行，不窜到隔壁栏（用户 2026-10-20 定） */
.md-nm i { font-style: normal; font-size: 10px; color: #23201B; margin-left: 2px; font-family: Georgia, serif; }
.md-ds4 .md-d { font-size: 8px; }
.md-ds4 .md-d span { text-align: left; flex-basis: 2.2em; }   /* 标签靠左：给日期腾宽度不超格（用户 2026-10-21 定） */
/* 配偶列只有生日/卒日两行（2026-10-28 用户定）：不再跟本人四行平铺，
   整组垂直居中摆在格子中间——原来顶在表头下面，格子下半截空着，重心偏上 */
.md-ds4.md-ds2 { justify-content: center; }
.md-ds4.md-ds2 .md-d + .md-d { margin-top: 8px; }
/* 生日/卒日：纯文字两行，不画框（用户 2026-10-20 定：小格框全去） */
.md-d { display: flex; font-size: 8px; }
.md-d span { flex: 0 0 2.4em; text-align: center; color: #23201B; }
.md-d em { flex: 1; font-style: normal; min-width: 0; white-space: nowrap; overflow: hidden; }
/* 父母/子女名：小一号字，子女多了名字自动排两行（用户 2026-10-20 定） */
.md-pr { padding: 1px 0; line-height: 1.4; font-size: 10.5px; }
.md-pr i { font-style: normal; font-size: 8px; color: #23201B; margin-left: 3px; font-family: Georgia, serif; }   /* 页码数字比名字小一号 */
/* 简介行（用户 2026-10-21 手绘图）：最底一行整行收底——标签在世系列下、正文跨本人→子女全部列宽 */
.md-bio { grid-column: 1 / 6; grid-row: 4; border-top: 1px solid #2A2620; display: flex; min-height: 0; }
.md-bio span { flex: 0 0 calc(9% + 1px); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2px 1px; font-weight: 600; line-height: 1.3; border-right: 1px solid #2A2620; }
  /* +1px：标签 border-right 画在盒内右缘，比上层「本人」格的 border-left（画在 9% 边界右侧）
     左错 1px——简介格看起来窄一截（用户 2026-10-21 定）。加宽 1px 让两条线逐像素重合 */
.md-bio p { flex: 1; margin: 0; padding: 2px 8px; line-height: 1.5; text-align: justify; font-size: 10.5px;   /* 与子女成员名字同字号（用户 2026-10-21 定） */
  height: calc(4.5em + 4px); overflow: hidden; align-self: center; }   /* 定高恰好三行：简介永远有 3 行空间，四行块被压缩（用户 2026-10-21 定） */

/* ---- 吊线图（苏式垂珠体卷首，族记 1:1）：黑块世数牌 + 红吊线 ---- */
/* 吊线图页：顶部标题 + 图（用户 2026-10-20 定，每页都印「吊线图」）。
   图不再顶到页顶——标题占掉的高度由 .bp-dia 的 flex 分给 svg，图按剩下的高度等比缩放
   2026-10-29 彩色册谱定：吊线朱红 #9E3B2C（族记样张同款），表格类线条仍全黑 */
.bp-dia { height: 100%; box-sizing: border-box; padding: 1.6% 1.2%; display: flex; flex-direction: column; }
.bp-dia .bp-dia-ttl { flex: 0 0 auto; margin-bottom: 2.6%; }
.bp-dia svg { flex: 1; min-height: 0; width: 100%; display: block; font-family: 'Songti SC', STSong, serif; }
.bp-dia .dl { fill: none; stroke: #9E3B2C; stroke-width: .26; }

/* ---- 付印 PDF：每页一张 A4（210×297mm），一张纸一页，只留书页 ---- */
#printroot { display: none; }
/* 真 PDF 导出进度遮罩（app.js showPdfMask 动态插入） */
#pdfmask { position: fixed; inset: 0; background: rgba(30,25,18,.55); display: none; align-items: center; justify-content: center; z-index: 9999; }
#pdfmask .pm-box { background: #FFFDF6; border-radius: 14px; padding: 22px 26px; width: 72%; max-width: 300px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#pdfmask .pm-box b { display: block; font-size: 15px; color: #3E3425; margin-bottom: 14px; }
#pdfmask .pm-bar { height: 8px; background: #EDE4D2; border-radius: 4px; overflow: hidden; }
#pdfmask .pm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#B03A2E,#D4813C); border-radius: 4px; transition: width .25s; }
#pdfmask .pm-box span { display: block; margin-top: 8px; font-size: 12px; color: #8A7A58; }
#printroot .pp-sheet {
  position: relative; width: 210mm; height: 297mm; overflow: hidden; background: #FFFDF6;
  page-break-after: always; break-after: page;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
#printroot .pp-sheet:last-child { page-break-after: auto; break-after: auto; }
#printroot .pp-in {
  position: relative; height: 100%; padding: 18mm 16mm 20mm; box-sizing: border-box;
  font-family: 'Songti SC', STSong, serif; color: #3E3425;
}
#printroot .pp-sheet.is-cover .pp-in { padding: 0; }
#printroot .bp-cover { height: 297mm; border-radius: 0; box-shadow: none; }
#printroot .pp-foot {
  position: absolute; left: 0; right: 0; bottom: 10mm; text-align: center;
  font-size: 9pt; color: #8A7A58; letter-spacing: 1px;
}
/* 打印层页眉五样式：与屏上同一套结构，尺寸换 mm（按族记成品页比例）。
   书口嵌在框内：框右段双线被书口撑开，书口上下与框同高，外侧留窄白边 4.6mm */
#printroot .bp-frame {
  left: 17.9mm; right: 4.6mm; top: 19mm; bottom: 19mm;   /* 上下对称，与屏上 6.4% 同步 */
  border-width: .8mm;
}
#printroot .bp-frame::after { inset: .8mm; border-width: .35mm; border-right: none; }
/* 偶数页（左手页）镜像：框线与书口换到左边；内线镜像（左段由书口右线提供） */
#printroot .pp-sheet.even .bp-frame { left: 4.6mm; right: 17.9mm; }
#printroot .pp-sheet.even .bp-frame::after { border-right: .35mm solid #23201B; border-left: none; }
#printroot .pp-sheet.framed .pp-in { padding: 26.9mm 26mm 18.9mm 23.5mm; }
#printroot .pp-sheet.framed.even .pp-in { padding: 26.9mm 23.5mm 18.9mm 26mm; }
#printroot .pp-sheet .pp-in { padding: 57.3mm 27.3mm 14.7mm 27.3mm; }
#printroot .bk-gt { width: 15.3mm; top: 19mm; bottom: 19mm; right: 4.6mm; padding: 5mm 0; background: #FFFDF6; border: .8mm solid #23201B; }
#printroot .bk-gt.R { border-left-width: .35mm; }
#printroot .bk-gt.L { border-right-width: .35mm; }
#printroot .pp-sheet.even .bk-gt { right: auto; left: 4.6mm; }
#printroot .bk-gt .gt { font-size: 4.8mm; letter-spacing: 1mm; }
#printroot .bk-gt .gt.mid, #printroot .bk-gt .gt.sm { font-size: 4.8mm; letter-spacing: 1mm; }
#printroot .bk-gt .gt.pg { top: 5mm; }   /* 屏上是 10px，纸上按 0.5cm 精确 */
#printroot .bk-gt .gt.pg { font-size: 4.8mm; letter-spacing: .3mm; }
#printroot .bk-gt .gt.pg2 { font-size: 4.4mm; letter-spacing: 0; }
#printroot .bk-gt .gt.pg3 { font-size: 4.1mm; letter-spacing: 0; }
#printroot .bk-gt .gt.pg4 { font-size: 3.4mm; letter-spacing: 0; }
#printroot .bk-gt i.tooth { height: auto; }
#printroot .bk-gt.c3 i.tooth::after { border-left-width: 2.8mm; border-right-width: 2.8mm; border-top-width: 3.4mm; }
#printroot .bp-hdr-s { left: 27.3mm; right: 27.3mm; top: 49.3mm; }
#printroot .bp-hdr-s span { font-size: 2.6mm; }
#printroot .bp-hdr-s i { height: .8mm; }
/* 榜页在纸上按 A4 实际高度摊开：一页 40 人，行距按纸面均分（屏上是手机预览，行距自然紧） */
#printroot .bp-pt-row { padding: 3.8mm 0; }
#printroot .bp-pt-row .rn { font-size: 2.6mm; }
#printroot .bp-pt-row .nm { font-size: 3.5mm; }
#printroot .bp-pt-row .am { font-size: 3.2mm; }
/* 检索表：纸上按 A4 重排（字号换 mm，栏宽比例与屏上同一套，idxGeo 按模式各自量高） */
#printroot .bp-idx { border-width: .7mm; font-size: 3.1mm; color: #2A2620; }
#printroot .bp-idx-ttl { font-size: 6mm; letter-spacing: 4mm; text-indent: 4mm; }
#printroot .idx-cat { padding: .6mm 0; margin-bottom: 1.8mm; }
#printroot .idx-row b { flex-basis: 6.5mm; }
/* 检索表在经典页眉（framed）下不再自带外框：页眉框就是页框，别画两层 */
.book-page.framed .bp-idx, #printroot .book-page.framed .bp-idx { border: 0; }
/* 吊线图纸上尺寸 */
#printroot .bp-dia { padding: 3mm 2mm; }
#printroot .bp-dia .bp-dia-ttl { margin-bottom: 3mm; }
#printroot .bp-dia .dl { stroke-width: .5; }
/* 现代版式纸上尺寸：整页红框、内里黑线，字换 mm */
#printroot .md-wrap { padding: 0; height: calc(100% - 1%);
  border-left: 1px solid #2A2620; border-right: 1px solid #2A2620;
  margin-left: -3.24%; margin-right: -4.47%; }
#printroot .book-page.even .md-wrap { margin-left: -4.47%; margin-right: -3.24%; }
#printroot .md-p { border-bottom-width: 0; font-size: 3.2mm; }
/* 纸上的人段分隔同样改双线（用户 2026-10-28 定）：1.1mm double = 两条 .35mm + .4mm 隙，
   与外框 .8mm、内线 .35mm 形成三级粗细，三人一眼分开 */
#printroot .md-p + .md-p { border-top: 1.1mm double #2A2620; }
/* 内线粗细统一（用户 2026-10-20 定：外框粗 .8mm、内线一律 .35mm，表格线不许混 1px/.25mm） */
#printroot .md-wrap { border-left-width: .35mm; border-right-width: .35mm; }
#printroot .md-h { border-bottom-width: .35mm; }
#printroot .md-h span { border-left-width: .35mm; }
#printroot .md-c { border-left-width: .35mm; }
#printroot .md-nm { border-bottom-width: .35mm; }
#printroot .md-bio { border-top-width: .35mm; }
#printroot .md-bio span { border-right-width: .35mm; flex-basis: calc(9% + .35mm); }   /* 同屏上：+线宽让标签边线压在列线上 */
#printroot .md-bio span { padding: 1.2mm 1mm; }
/* 纸上同规矩：有框页表格嵌进框内线。
   坐标教训（2026-10-29 用户放大样张抓出来）：::after 内衬线的 inset 是从**内边距盒**起算的，
   而内边距盒已经先让掉了 .8mm 外框——所以内线在外框盒内侧 1.6mm 处，不是 1.15mm。
   旧值差了半格：表格竖线两端各出头约 0.4mm 穿过内横线成十字叉（300dpi 下一眼可见）；
   左竖线还贴到外框上把外框衬成 1.1mm 粗线。现四边精确压线：丁字接头不出叉 */
#printroot .pp-sheet.framed .md-wrap {
  position: absolute; margin: 0; height: auto;
  top: calc(19mm + 1.6mm); bottom: calc(19mm + 1.6mm);
  left: calc(17.9mm + 1.6mm); right: calc(19.9mm - .35mm); }   /* right 压书口条左边线（border 画在盒内侧，减线宽正好共线） */
#printroot .pp-sheet.framed.even .md-wrap { left: calc(19.9mm - .35mm); right: calc(17.9mm + 1.6mm); }
#printroot .pp-sheet.framed .md-p:first-child { border-top: 0; }
#printroot .md-h span { padding: 1.3mm 0; }
#printroot .md-c { padding: 1.2mm 1.8mm; }   /* 上下内衬收窄：给四行块腾高度（用户 2026-10-21 定） */
/* 苏式打印层（屏上 0.276mm/px 同比）：红横线分世、黑块世数牌、红竖线分人组，全黑字 */
#printroot .su-sec { gap: 2.2mm; padding: 2.2mm 0; }
#printroot .su-sec + .su-sec:not(.su-cont) { border-top: .25mm solid #23201B; }
#printroot .su-gh { font-size: 3.3mm; border-radius: 1.4mm; padding: 2.2mm 1.4mm; }
#printroot .su-body { gap: 1.6mm 0; }
#printroot .su-p { padding: 0 2.5mm; gap: .8mm; }
#printroot .su-p .rk { font-size: 2.9mm; }
#printroot .su-p .vn { font-size: 4.1mm; }
#printroot .su-p .vn::before { top: -2.2mm; height: 2.2mm; width: .25mm; }
#printroot .su-p .sx { font-size: 2.2mm; width: 3.6mm; height: 3.6mm; line-height: 3.4mm; border-width: .2mm; margin-bottom: .6mm; }
/* 苏式横栏式打印层（2026-10-27 按同治老谱定板，屏上 0.276mm/px 同比折 mm） */
#printroot .su-row { gap: 1.4mm; padding: 1.6mm 0; }
#printroot .su-row .su-p { gap: .9mm; }
#printroot .su-row + .su-row { border-top: .28mm solid #23201B; }
/* 注文：行距 1.5（列宽 5.25mm）× 3 列 = 16mm，与屏幕层同口径（2026-10-28 整改裁字） */
#printroot .su-row .su-nt { font-size: 3.5mm; line-height: 1.5; letter-spacing: .1mm; max-width: 16mm; }
#printroot .su-row .su-vn { font-size: 3.5mm; letter-spacing: .2mm; }
#printroot .su-row .su-rk { font-size: 3mm; }
#printroot .su-row .su-gb { font-size: 3.6mm; border-width: .85mm; padding: 1.6mm 1mm; }
#printroot .su-row .su-gap { width: 2.6mm; margin: 1.6mm 0; border-left-width: .8mm; }
#printroot .su-row .su-gh { font-size: 3mm; padding: 1.2mm .5mm; margin: 1mm 0; border-left-width: .8mm; }
#printroot .su-p .vm { font-size: 3.4mm; }
#printroot .su-p .vm .sp { font-size: 3.7mm; }
/* 打印层欧式（族记 52 页 1:1） */
#printroot .ou-title { font-size: 4.1mm; letter-spacing: 1.4mm; left: 4mm; top: 6mm; }
#printroot .ou-band { padding: 1.9mm 0; margin-left: 8mm; }
#printroot .ou-band + .ou-band { border-top: .3mm solid #23201B; }
#printroot .ou-row { gap: 1.4mm 0; }
#printroot .ou-p { padding: 0 2.2mm; gap: .8mm; }
#printroot .ou-p .rk { font-size: 2.7mm; }
#printroot .ou-p .vn { font-size: 4.1mm; }
#printroot .ou-p .sp { font-size: 3.4mm; }
#printroot .ou-p .ow { font-size: 3.4mm; }
#printroot .ou-gen { font-size: 3.3mm; border-radius: 1.4mm; padding: 2.2mm 1.4mm; margin-right: 2mm; }
#printroot .md-c1 { padding: 1.8mm 1.2mm; }
#printroot .md-gen { font-size: 4.2mm; margin: .8mm 0 1.6mm; }
#printroot .md-x { font-size: 2.7mm; }
#printroot .md-nm { font-size: 3.7mm; margin: 1mm -1.8mm 1.6mm; padding-left: 2.2mm; padding-right: 2.2mm; }
#printroot .md-nm i { font-size: 2.5mm; }
#printroot .md-d { font-size: 2.6mm; }
#printroot .md-d em { white-space: nowrap; }
#printroot .md-d span { flex-basis: 6.8mm; padding: .6mm 0; }   /* 「生日/卒日」两字标签 */
#printroot .md-d em { padding: .6mm 1.4mm; }
#printroot .md-pr { padding: .5mm 0; font-size: 2.9mm; }   /* 父母/子女名小一号，可排两行 */
#printroot .md-pr i { font-size: 2.2mm; }
/* 父母名下沉 + 父母之间拉开（屏上 8px/7px 折成 mm，用户 2026-10-28 定） */
#printroot .md-c4 { padding-top: 2.1mm; }
#printroot .md-c4 .md-pr + .md-pr { margin-top: 1.9mm; }
#printroot .md-ds4.md-ds2 .md-d + .md-d { margin-top: 2.1mm; }
#printroot .md-bio span { padding: 1.2mm 1mm; }
#printroot .md-bio p { padding: 1.2mm 2.6mm; line-height: 1.8; font-size: 2.9mm; height: 18mm; overflow: hidden; }   /* 定高三行：3×5.22mm+2.4mm 内衬（用户 2026-10-21 定） */
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > * { display: none !important; }
  body > #printroot { display: block !important; }
  @page { size: A4 portrait; margin: 0; }
}

/* ================= 通用卡片 / 列表 ================= */
.sec { margin-top: 16px; }
.sec-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sec-h b { font-size: 14px; font-weight: 800; }
.sec-h em { font-style: normal; font-size: 11px; color: var(--ink3); }
.sec-h .more { margin-left: auto; font-size: 12px; color: var(--green); background: none; border: 0; cursor: pointer; }
.card-w { background: var(--card); border-radius: 12px; box-shadow: 0 1px 6px rgba(60, 45, 20, .06); overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #F2EEE4; }
.row:last-child { border-bottom: 0; }
.row .ic { width: 34px; height: 34px; border-radius: 9px; background: #F4F0E4; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.row .tx { flex: 1; min-width: 0; }
.row .tx b { display: block; font-size: 13.5px; font-weight: 600; }
.row .tx em { display: block; font-style: normal; font-size: 11px; color: var(--ink3); margin-top: 2px; line-height: 1.5; }
.row .rt { font-size: 12px; color: var(--ink3); flex: 0 0 auto; }
.row .go { color: #C9C2B2; font-size: 15px; }
.pill { font-size: 10px; border-radius: 5px; padding: 1px 5px; font-weight: 700; }
.pill.warn { background: #FDF0E4; color: #C4692A; }
.pill.ok { background: var(--green-l); color: var(--green); }
.pill.gray { background: #F1EFE9; color: #8A887E; }

/* 字辈 */
.zibei { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
.zibei span {
  width: 40px; height: 40px; border-radius: 8px; background: #FFFDF6; border: 1px solid #E6DCC2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Songti SC', serif; font-size: 17px; color: #4A3A1E; position: relative;
}
.zibei span em { position: absolute; bottom: 1px; font-style: normal; font-size: 8px; color: #23201B; }
.zibei span.used { background: #EAF3EC; border-color: #B9D8C4; color: var(--green); }

/* 开关 */
.sw { width: 44px; height: 26px; border-radius: 13px; background: #DDD8CB; position: relative; transition: .18s; border: 0; cursor: pointer; flex: 0 0 auto; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.sw.on { background: #2E9E6B; }
.sw.on::after { left: 21px; }

/* 色卡 */
.themes button { flex: 1; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.themes i { width: 100%; height: 34px; border-radius: 8px; border: 2px solid transparent; display: block; }
.themes button.on i { border-color: var(--green); }
.themes span { font-size: 10px; color: var(--ink3); }

/* 我的谱 */
.claim-tip { margin: 0 12px 12px; padding: 10px 12px; border-radius: 10px; background: #FDF6E7; border: 1px solid #EFDFBE; font-size: 12px; line-height: 1.7; color: #7A6A4F; text-align: center; }
.claim-tip b { color: #B03A2E; }
.claim-tip .btn-ghost { display: block; width: 100%; margin-top: 8px; }
.pos-q { width: 100%; box-sizing: border-box; border: 1px solid #E6E0D2; background: #FFFDF8; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 0 0 8px; outline: none; }
.pos-q:focus { border-color: #B03A2E; }
.pl-gen { font-size: 11.5px; color: #8A8A8A; padding: 10px 2px 4px; }
.clan-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #F2EEE4; }
.clan-card:last-child { border-bottom: 0; }
.clan-card .ce { width: 40px; height: 40px; border-radius: 11px; background: #F1EEE2; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.clan-card .cn { flex: 1; min-width: 0; }
.clan-card .cn b { display: block; font-size: 14px; }
.clan-card .cn em { font-style: normal; font-size: 11px; color: var(--ink3); }
.clan-card .cb { border: 1px solid var(--green); color: var(--green); background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.clan-card.cur .cb { background: var(--green); color: #fff; }

/* 表单 */
.form { padding: 4px 0 20px; }
.fg { padding: 11px 14px; border-bottom: 1px solid #F2EEE4; display: flex; align-items: center; gap: 10px; }
.fg label { width: 68px; flex: 0 0 auto; font-size: 13px; color: var(--ink2); }
.fg input, .fg textarea, .fg select {
  flex: 1; border: 0; background: none; font-size: 13.5px; color: var(--ink); padding: 0;
  min-width: 0;
}
.fg textarea { min-height: 54px; resize: none; line-height: 1.6; }
.fg input::placeholder, .fg textarea::placeholder { color: #BDB6A5; }
.btn-main {
  display: block; width: calc(100% - 28px); margin: 16px auto 0; border: 0; border-radius: 11px;
  background: var(--green); color: #fff; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-main:active { opacity: .88; }
.btn-ghost {
  display: block; width: calc(100% - 28px); margin: 10px auto 0; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; color: var(--ink2); padding: 12px; font-size: 14px; cursor: pointer;
}

/* 页面内返回条 */
.pbar { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 10px) 14px 8px; position: sticky; top: 0; background: var(--paper); z-index: 5; }
.pbar button { border: 0; background: none; font-size: 18px; color: var(--ink2); padding: 4px 8px 4px 0; cursor: pointer; }
.pbar b { font-size: 15px; }
.pbar em { font-style: normal; font-size: 11px; color: var(--ink3); margin-left: auto; }

/* 档案页 */
.prof-hero { display: flex; gap: 14px; align-items: center; padding: 18px 14px; background: linear-gradient(160deg, #F3EFE1, #FAF8F1); }
.prof-hero .av { width: 62px; height: 62px; border-radius: 14px; background: #C9B48A; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }   /* 2026-10-28 版面评审：亮蓝是全页唯一冷色，换米棕 */
.prof-hero.f .av { background: #CFA0A0; }
.prof-hero .av i { position: relative; display: block; width: 34px; height: 40px; }
.prof-hero .av i::before { content: ''; position: absolute; left: 50%; top: 2px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: rgba(255, 255, 255, .93); }
.prof-hero .av i::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 34px; height: 24px; margin-left: -17px; border-radius: 18px 18px 0 0; background: rgba(255, 255, 255, .93); }
.prof-hero .pi b { font-family: 'Songti SC', serif; font-size: 21px; letter-spacing: 2px; }
.prof-hero .pi em { display: block; font-style: normal; font-size: 12px; color: var(--ink2); margin-top: 3px; }
.prof-hero .pi .tags { margin-top: 6px; display: flex; gap: 5px; }
.prof-hero .pi .tags span { font-size: 10px; background: rgba(255, 255, 255, .8); border: 1px solid #E6DCC2; border-radius: 5px; padding: 1px 6px; color: #6B5B3E; }

/* 空状态 */
.empty { text-align: center; padding: 50px 20px; color: var(--ink3); }
.empty .e { font-size: 38px; display: block; margin-bottom: 10px; opacity: .5; }
.empty b { display: block; font-size: 14px; color: var(--ink2); margin-bottom: 4px; }
.empty p { font-size: 12px; margin: 0; line-height: 1.7; }

/* toast / sheet */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px);
  background: rgba(38, 34, 26, .93); color: #fff; font-size: 13px; padding: 9px 16px;
  border-radius: 10px; opacity: 0; pointer-events: none; transition: .22s; z-index: 200; max-width: 80%;
  text-align: center;
}
#toast.on { opacity: 1; transform: translateX(-50%); }
#sheet { position: fixed; inset: 0; z-index: 150; display: none; }
#sheet.on { display: block; }
#sheet .mask { position: absolute; inset: 0; background: rgba(20, 18, 12, .42); }
#sheet .panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  background: var(--paper); border-radius: 18px 18px 0 0; padding: 8px 0 calc(10px + var(--safe-b));
  animation: up .2s ease-out; max-height: 82%; overflow-y: auto;
}
#sheet .sh { display: flex; align-items: center; padding: 10px 16px 6px; }
#sheet .sh b { flex: 1; font-size: 15px; }
#sheet .sh button { border: 0; background: none; font-size: 15px; color: var(--ink3); cursor: pointer; }
#sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: #DAD3C2; margin: 6px auto 0; }

/* ================= 族记 iOS 页体系（树谱管理/背景/权限/详情/统计/日志/样式/辈份/字体） ================= */
.io { background: var(--paper); min-height: 100%; padding-bottom: 30px; }   /* 2026-10-28 版面评审：子页灰底 #EDEDED 与宣纸底"两张皮"，跟回宣纸 */
.io-bar { display: flex; align-items: center; height: 46px; padding: calc(var(--safe-t) + 4px) 4px 0; background: #FBF8F0; position: sticky; top: 0; z-index: 8; border-bottom: .5px solid #E8E1D0; }
.io-bar .bk { width: 42px; height: 42px; border: 0; background: none; font-size: 24px; color: #111; cursor: pointer; line-height: 1; }
.io-bar .tt { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: #111; }
.io-bar .rt { min-width: 42px; text-align: right; padding-right: 10px; font-size: 15px; color: #111; border: 0; background: none; cursor: pointer; }
.io-bar .rt.green { background: #34C759; color: #fff; border-radius: 6px; padding: 6px 13px; font-weight: 600; font-size: 14px; margin-right: 8px; }
.io-sec { margin-top: 14px; }
.io-h { font-size: 13px; color: #8A8A8A; padding: 12px 16px 7px; }
.io-group { background: #fff; border-radius: 10px; margin: 0 12px; overflow: hidden; }
.io-note { font-size: 12.5px; line-height: 1.55; color: #9A9A9A; padding: 8px 16px 12px; border-top: .5px solid #F5F5F5; background: #fff; }
.io-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-bottom: .5px solid #F0F0F0; cursor: pointer; }
.io-row:last-child { border-bottom: 0; }
.io-row .lt { flex: 1; font-size: 16.5px; color: #111; display: flex; align-items: center; gap: 6px; }
.io-row .rt2 { font-size: 15px; color: #8A8A8A; }
.io-arrow { color: #C7C7CC; font-size: 18px; }
.vip { background: #C9A063; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; font-weight: 600; font-style: normal; }
.req { color: #E22C2C; font-style: normal; font-size: 15px; }
.lnk { color: #576B95; font-size: 14px; border: 0; background: none; cursor: pointer; padding: 4px 0; }
.sw { width: 50px; height: 30px; border-radius: 15px; background: #E4E4E6; position: relative; transition: .18s; border: 0; cursor: pointer; flex: 0 0 auto; }
.sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.sw.on { background: #34C759; }
.sw.on::after { left: 22px; }

/* ---- 树谱管理 ---- */
.mg-card { display: flex; gap: 14px; background: #fff; margin: 12px 12px 0; padding: 14px; align-items: center; border-radius: 10px; cursor: pointer; }
.mg-book { width: 90px; height: 120px; border-radius: 3px; background: linear-gradient(150deg, #33436B, #202B4A); position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.2); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.mg-book::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); }
.mg-book::after { content: ''; position: absolute; left: 13px; top: 8px; right: 8px; bottom: 8px; border: 1px solid rgba(255,255,255,.45); border-radius: 2px; }
.mg-book span { position: relative; writing-mode: vertical-rl; color: #F1E3C0; font-family: 'Songti SC', serif; font-size: 15px; letter-spacing: 4px; }
.mg-info { flex: 1; min-width: 0; }
.mg-info b { display: block; font-size: 19px; color: #111; }
.mg-info em { display: block; font-style: normal; font-size: 13px; color: #8A8A8A; margin-top: 5px; }
.cap-bar { display: flex; align-items: center; background: #fff; margin: 0 12px; padding: 4px 14px 12px; border-radius: 0 0 10px 10px; }
.cap-bar .track { flex: 1; height: 5px; border-radius: 3px; background: #F0F0F0; overflow: hidden; }
.cap-bar .fill { height: 100%; background: #E22C2C; border-radius: 3px; }
.cap-txt { display: flex; align-items: center; gap: 8px; background: #fff; margin: 0 12px; padding: 0 14px 13px; border-radius: 0 0 10px 10px; font-size: 12.5px; color: #4A4A4A; }
.cap-txt .vip-t { color: #B8873B; }
.cap-txt .lnk { margin-left: auto; }
.avs { display: flex; }
.avs i { width: 26px; height: 26px; border-radius: 50%; background: #7FB5E8; color: #fff; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -6px; }
.avs i:first-child { margin-left: 0; }
.avs i.f { background: #F09CC4; }
.mini-bg { width: 30px; height: 30px; border-radius: 4px; border: 1px solid #E4E4E4; }

/* ---- 树谱背景网格 ---- */
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.bg-cell { border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.bg-cell .pv { height: 168px; }
.bg-cell .cap { background: rgba(0,0,0,.38); color: #fff; display: flex; align-items: center; justify-content: center; height: 36px; font-size: 14px; position: relative; }
.bg-cell .ck { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.42); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bg-cell.on .ck { background: #34C759; }
/* 画布背景（与 .viewport 同级 specificity，靠后定义覆盖） */
.t-bg0 { background: #FFFFFF !important; }
.t-bg1 { background: #FBFBF9 !important; background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 1px, transparent 1px 26px), repeating-linear-gradient(25deg, rgba(0,0,0,.045) 0 1px, transparent 1px 34px) !important; }
.t-bg2 { background: #F2F2F0 !important; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px) !important; }
.t-bg3 { background: #EBC48D !important; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px) !important; background-size: 5px 5px; }
.t-bg4 { background: #B7ABA7 !important; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px) !important; }
.t-bg5 { background: #EFE2CE !important; background-image: radial-gradient(rgba(180,140,90,.26) 1.4px, transparent 1.6px) !important; background-size: 14px 14px; }
.t-bg6 { background: #E8C84D !important; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) !important; background-size: 22px 22px; }
.t-bg7 { background: #DFF3F0 !important; background-image: linear-gradient(rgba(120,190,180,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(120,190,180,.5) 1px, transparent 1px) !important; background-size: 20px 20px; }
.t-bg8 { background: #3F4642 !important; }
.t-bg8 .links path { stroke: rgba(255,255,255,.34); }

/* ---- 权限列表 ---- */
.perm-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 8px; font-size: 15px; color: #4A4A4A; }
.perm-h .n { color: #111; font-weight: 600; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: .5px solid #F0F0F0; }
.perm-row .av2 { width: 52px; height: 52px; border-radius: 3px; background: #BFE0F5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: 0 0 auto; position: relative; }
.perm-row .av2 i { display: block; width: 34px; height: 40px; position: relative; }
.perm-row .av2 i::before { content: ''; position: absolute; left: 50%; top: 5px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: #4DA6E8; }
.perm-row .av2 i::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 34px; height: 24px; margin-left: -17px; border-radius: 17px 17px 0 0; background: #4DA6E8; }
.perm-row .av2.f { background: #FBD3E7; }
.perm-row .av2.f i::before, .perm-row .av2.f i::after { background: #F06EB7; }
.perm-row .in { flex: 1; min-width: 0; }
.perm-row .in b { font-size: 16.5px; color: #111; }
.perm-row .in em { display: block; font-style: normal; font-size: 12.5px; color: #9A9A9A; margin-top: 3px; }
.perm-row .id { font-size: 11px; color: #C0C0C0; align-self: flex-end; flex: 0 0 auto; }
.perm-row .ops2 { display: flex; gap: 8px; flex: 0 0 auto; }
.perm-row .b1 { background: #34C759; color: #fff; border: 0; border-radius: 4px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.perm-row .b2 { background: #FA5151; color: #fff; border: 0; border-radius: 4px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.perm-inv { display: block; width: calc(100% - 28px); margin: 24px auto 0; background: #34C759; color: #fff; border: 0; border-radius: 8px; padding: 15px; font-size: 16px; font-weight: 600; cursor: pointer; }
.perm-empty { padding: 40px 20px; text-align: center; font-size: 14px; color: #9A9A9A; }
.perm-mine { margin: 10px 14px 0; padding: 10px 12px; border-radius: 10px; background: #EAF3EC; color: #1F6B54; font-size: 12.5px; line-height: 1.6; }

/* ---- 族记「分配权限」居中卡片（refs 截图：双列八档单选 + 取消绿/确认红） ---- */
#sheet[data-sheet="role"] .panel {
  left: 7%; right: 7%; bottom: auto; top: 50%; transform: translateY(-50%);
  background: #fff; border-radius: 14px; padding: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  max-height: 84%; animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-50%) scale(.94) } to { opacity: 1; transform: translateY(-50%) scale(1) } }
.role-tt { text-align: center; font-size: 17px; font-weight: 700; color: #111; padding: 20px 10px 14px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; padding: 0 10px 12px; }
.role-opt { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 12px 6px; font-size: 15px; color: #111; text-align: left; cursor: pointer; }
.role-opt .rd { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #BFBFBF; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; }
.role-opt.on .rd { border-color: #34C759; background: #34C759; }
.role-opt.on span { color: #34C759; }
.role-foot { display: flex; border-top: .5px solid #E6E6E6; }
.role-foot button { flex: 1; background: none; border: 0; padding: 15px 0; font-size: 18px; cursor: pointer; }
.role-foot .rs-cancel { color: #34C759; border-right: .5px solid #E6E6E6; }
.role-foot .rs-ok { color: #FA5151; }

/* ---- 成员统计 ---- */
.st-wrap { text-align: center; padding: 4px 16px 30px; }
.st-cap { display: inline-block; background: #FBF4E4; color: #111; font-size: 15px; padding: 7px 24px; border-radius: 18px; margin: 18px 0 16px; }
.st-av { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: #fff; }
.st-av.m { background: #D9EDFB; width: 60px; height: 60px; font-size: 26px; margin-bottom: 6px; }
.st-av.g { background: #F3F3F1; width: 60px; height: 60px; font-size: 26px; margin-bottom: 6px; }
.st-av.w { background: #FBD9EC; width: 60px; height: 60px; font-size: 26px; margin-bottom: 6px; }
.st-big { font-size: 14px; color: #8A8A8A; }
.st-num { font-size: 26px; font-weight: 800; color: #111; margin-top: 4px; }
.st-num small { font-size: 14px; font-weight: 400; color: #8A8A8A; margin-left: 3px; }
.st-3 { display: flex; justify-content: space-around; margin-top: 14px; }
.st-3 .lb { font-size: 14px; color: #8A8A8A; }
.st-3 .n2 { font-size: 17px; color: #111; margin-top: 6px; font-weight: 600; }

/* ---- 日志 ---- */
.log-top { text-align: center; font-size: 13px; color: #8A8A8A; padding: 12px 0 4px; }
.log-top b { color: #34C759; font-weight: 700; }
.log-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border-bottom: .5px solid #F1F1F1; }
.log-row .ic2 { width: 22px; text-align: center; font-size: 16px; color: #34C759; font-weight: 700; flex: 0 0 auto; }
.log-row .tx2 { flex: 1; font-size: 14.5px; color: #111; min-width: 0; }
.log-row .tx2 .g { color: #34C759; }
.log-row .tm { font-size: 12px; color: #B0B0B0; flex: 0 0 auto; }

/* ---- 家谱详情 / 补充资料 / 辈份 ---- */
.ci-emoji { background: #fff; margin: 0 12px; border-radius: 10px; padding: 18px; display: flex; justify-content: center; }
.ci-emoji .c { width: 116px; height: 116px; border-radius: 50%; border: 1px solid #F0F0F0; display: flex; align-items: center; justify-content: center; font-size: 60px; }
.ci-row { display: flex; align-items: center; min-height: 52px; padding: 0 16px; background: #fff; border-bottom: .5px solid #F0F0F0; gap: 8px; }
.ci-row .k { width: 96px; font-size: 16px; color: #111; flex: 0 0 auto; }
.ci-row .k2 { width: 110px; font-size: 15.5px; color: #8A8A8A; flex: 0 0 auto; }
.ci-row input { flex: 1; border: 0; outline: 0; font-size: 16px; background: none; min-width: 0; color: #111; }
/* 年月日三段：三格 + 年/月/日 后缀 */
.ci-row.ymd-row { gap: 3px; }
.ci-row.ymd-row input.ymd { flex: 0 0 44px; width: 44px; text-align: center; font-size: 15.5px; }
.ci-row.ymd-row #f_birth_y, .ci-row.ymd-row #f_death_y { flex: 0 0 56px; width: 56px; }
.ci-row.ymd-row .u { font-style: normal; font-size: 12.5px; color: #7A7268; flex: 0 0 auto; margin-right: 4px; }
.ci-row.ymd-row input.ymd::placeholder { color: #C4C0B8; font-size: 13px; }
.ci-row textarea { width: 100%; border: 0; outline: 0; font-size: 16px; background: none; resize: vertical; }
.ci-row.half .div { width: 1px; height: 22px; background: #E8E8E8; flex: 0 0 auto; }
.ci-row .rdo, .io-group .rdo { display: flex; align-items: center; gap: 6px; margin-right: 20px; font-size: 15.5px; color: #111; cursor: pointer; }
.rdo i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C7C7CC; display: block; position: relative; flex: 0 0 auto; }
.rdo.on i { border-color: #34C759; }
.rdo.on i::after { content: ''; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: #34C759; }
.ci-area { background: #fff; margin: 0 12px; border-radius: 10px; padding: 14px 16px; }
.gen-tip { font-size: 13px; color: #333; line-height: 1.9; padding: 4px 16px 10px; }
.me-mini { flex: 1; font-size: 16px; color: #111; }
.rt3 { font-size: 15.5px; color: #4A4A4A; }
.io-bar .rt.save { background: #C9C9C9; color: #fff; border-radius: 6px; padding: 6px 13px; font-weight: 600; font-size: 14px; margin-right: 8px; }
/* 「存了再录」：次要按钮，浅金描边，跟绿色的「完成」分开（2026-10-26 晚） */
.io-bar .rt + .rt.green { margin-right: 8px; }
.io-bar .rt:not(.green):not(.save) {
  color: #8C6A2F; font-size: 13.5px; font-weight: 600; padding: 6px 8px; min-width: 0;
  border: .5px solid #D9C39A; border-radius: 6px; background: #FBF6E9; margin-right: 6px;
}
/* 录入页顶部引导条：只讲一件事——只有姓名必填，其余后补（撤掉导入后补的） */
.ef-lead { margin: 10px 14px 0; padding: 11px 13px; border-radius: 10px; background: #FBF6E9; border: .5px solid #E7D9BB; }
.ef-lead b { display: block; font-size: 13.5px; color: #4A3A26; font-weight: 700; }
.ef-lead em { display: block; margin-top: 4px; font-size: 12px; line-height: 1.7; color: #6B5D48; font-style: normal; }
.ef-lead .ef-parent { display: block; margin-top: 7px; padding-top: 7px; border-top: .5px dashed #E1D2B4; font-size: 12px; color: #8C6A2F; }
.ef-lead .ef-parent b { display: inline; font-size: 12.5px; color: #5C4526; }
.ef-head { display: flex; align-items: center; gap: 14px; padding: 14px; }
.ef-av { width: 84px; height: 84px; border-radius: 50%; background: #BFE0F5; position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ef-av.f { background: #FBD3E7; }
.ef-av > i:first-child { display: block; width: 46px; height: 54px; position: relative; }
.ef-av > i:first-child::before { content: ''; position: absolute; left: 50%; top: 6px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #4DA6E8; }
.ef-av > i:first-child::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 46px; height: 34px; margin-left: -23px; border-radius: 23px 23px 0 0; background: #4DA6E8; }
.ef-av.f > i:first-child::before, .ef-av.f > i:first-child::after { background: #F06EB7; }
.ef-av .plus { position: absolute; right: 6px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: #34C759; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; font-style: normal; z-index: 2; }
/* 编辑页头像：点头像传照片（相机角标 + 照片铺满圆框） */
.ef-av { cursor: pointer; }
.ef-av.has-photo { background: #E4E4E4; }
.ef-av .cam {
  position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .96); font-size: 12px; font-style: normal;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}
.photo-tip { padding: 7px 2px 0; font-size: 11px; color: #A08A5E; }
.photo-tip .lnk { margin-left: 6px; }
.ef-name { flex: 1; }
.ef-name .k2 { width: 44px; color: #111; font-size: 17px; }

/* ---- 点卡弹出菜单（族记） ---- */
.mwrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(20,16,8,.62); z-index: 20; }
.mcard { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 252px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.mcard .mh { display: flex; gap: 10px; padding: 14px 12px 10px; }
.mcard .mav { width: 56px; height: 64px; border-radius: 3px; background: #BFE0F5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: 0 0 auto; position: relative; }
.mcard .mav i { display: block; width: 36px; height: 42px; position: relative; }
.mcard .mav i::before { content: ''; position: absolute; left: 50%; top: 5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #4DA6E8; }
.mcard .mav i::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 36px; height: 26px; margin-left: -18px; border-radius: 18px 18px 0 0; background: #4DA6E8; }
.mcard .mav.f { background: #FBD3E7; }
.mcard .mav.f i::before, .mcard .mav.f i::after { background: #F06EB7; }
.mcard .minfo { flex: 1; min-width: 0; }
.mcard .mline { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: #111; padding: 3px 0; }
.mcard .mline b { font-size: 16.5px; }
.mcard .mgreen { background: #34C759; color: #fff; border: 0; border-radius: 13px; padding: 3px 14px; font-size: 13px; cursor: pointer; }
.mcard .mrow { border-top: 1px dashed #E8E8E8; padding: 10px 14px 0; font-size: 14.5px; color: #111; min-height: 18px; }
.mcard .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; background: #F7F7F7; border-top: 1px solid #EFEFEF; }
.mcard .mgrid button { border: 0; background: none; padding: 12px 0; font-size: 14.5px; color: #111; cursor: pointer; border-right: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF; }
.mcard .mgrid button:nth-child(4n) { border-right: 0; }
.mcard .mgrid button.w2 { grid-column: span 2; }
.mcard .mgrid button:nth-last-child(-n+2) { border-bottom: 0; }
/* 四周添加钮 */
.addf { position: absolute; width: 58px; text-align: center; cursor: pointer; z-index: 21; }
.addf .phm { display: block; width: 54px; height: 66px; margin: 0 auto; border-radius: 3px; background: #BFE0F5; position: relative; }
.addf.g .phm { background: #FBD3E7; }
.addf .phm .fig { display: block; width: 30px; height: 36px; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); }
.addf .phm .fig::before { content: ''; position: absolute; left: 50%; top: 0; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #4DA6E8; }
.addf .phm .fig::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 30px; height: 22px; margin-left: -15px; border-radius: 15px 15px 0 0; background: #4DA6E8; }
.addf.g .phm .fig::before, .addf.g .phm .fig::after { background: #F06EB7; }
.addf .phm .plus { position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: #34C759; color: #fff; font-size: 13px; font-style: normal; display: flex; align-items: center; justify-content: center; z-index: 2; }
.addf em { display: block; font-style: normal; font-size: 12.5px; color: #fff; margin-top: 5px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.addf.al { left: 3%; top: 40%; }
.addf.tr { right: 4%; top: 30%; }
.addf.br { right: 4%; top: 45%; }
.addf.b1 { left: 30%; top: 62%; }
.addf.b2 { left: 55%; top: 62%; }
/* 底部更多胶囊 */
.mmore { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; }
.mmore .t { display: flex; align-items: center; justify-content: center; gap: 12px; color: #E8E2D2; font-size: 13px; margin-bottom: 12px; }
.mmore .t i { display: block; width: 56px; height: 1px; background: rgba(255,255,255,.4); }
.mmore .caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 20px; }
.mmore .caps button { background: rgba(250,250,250,.92); color: #333; border: 0; border-radius: 17px; padding: 8px 16px; font-size: 13.5px; cursor: pointer; }

/* ---- 树谱卡新元素 ---- */
.card.hz { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; }
.card.hz .ph { height: 30px; }
.card.hz .nm { writing-mode: horizontal-tb; height: auto; line-height: 1.25; }
.card .mk { position: absolute; left: 2px; top: 2px; font-style: normal; font-size: 9px; color: rgba(0,0,0,.5); background: rgba(255,255,255,.65); border-radius: 3px; padding: 0 2px; z-index: 2; }
.card .zb { position: absolute; right: 2px; bottom: 2px; font-style: normal; font-size: 10px; color: rgba(0,0,0,.55); background: rgba(255,255,255,.65); border-radius: 3px; padding: 0 3px; }
/* 已故：剪影整片转灰（男女都覆盖），照片去掉彩度 */
.card .ph.dg i::before, .card .ph.dg i::after { background: #8E8E8E; }
.card.f .ph.dg i::before {
  box-shadow: -5px 9px 0 -2px #8E8E8E, 5px 9px 0 -2px #8E8E8E;
}
.card .ph.dg .pp { filter: grayscale(1) opacity(.9); }
.card.dnm .nm { color: #8A8A8A; }
.card .nm { font-size: 12.5px; }
.lcline { width: 26px; height: 14px; border-radius: 7px; border: 1px solid #E4E4E4; display: inline-block; }
.wheel { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(red, #ff0, #0f0, cyan, blue, magenta, red); border: 2px solid #fff; box-shadow: 0 0 0 1px #E4E4E4; }

/* ---- 族徽浮岛菜单 ---- */

/* ---- 生日榜 ---- */
.bd-me { display: flex; align-items: center; gap: 12px; background: #fff; margin: 12px; padding: 12px; border-radius: 8px; border: 1px solid #EEE; cursor: pointer; }
.bd-me .in, .bd-row .in { flex: 1; min-width: 0; }
.bd-me b, .bd-row b { font-size: 16.5px; color: #111; }
.bd-me em, .bd-row em { display: block; font-style: normal; font-size: 13px; color: #9A9A9A; margin-top: 4px; }
.bd-h { font-size: 13px; color: #8A8A8A; padding: 16px 16px 8px; }
.bd-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: .5px solid #F1F1F1; cursor: pointer; }
.bd-row .rt-bd { text-align: right; flex: 0 0 auto; }
.bd-row .rt-bd em { font-style: normal; color: #666; font-size: 17px; font-weight: 700; display: block; }
.bd-row .rt-bd em.hot { color: #E22C2C; }
.bd-row .rt-bd span { font-size: 11px; color: #B0B0B0; }
.bd-empty { padding: 14px 16px; font-size: 13px; color: #B0B0B0; background: #fff; }
.av2 { width: 46px; height: 46px; border-radius: 50%; background: #BFE0F5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.av2 i { display: block; width: 30px; height: 36px; position: relative; }
.av2 i::before { content: ''; position: absolute; left: 50%; top: 4px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #4DA6E8; }
.av2 i::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 30px; height: 22px; margin-left: -15px; border-radius: 15px 15px 0 0; background: #4DA6E8; }
.av2.f { background: #FBD3E7; }
.av2.f i::before, .av2.f i::after { background: #F06EB7; }

/* ---- 彩色树 ---- */
.ct-tabs { flex: 1; display: flex; justify-content: center; gap: 0; background: #F2F2F2; border-radius: 9px; padding: 3px; margin: 0 8px; }
.ct-tabs button { flex: 1; max-width: 84px; border: 0; background: none; padding: 7px 0; font-size: 13.5px; color: #333; border-radius: 7px; cursor: pointer; }
.ct-tabs button.on { background: #fff; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ct-show { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #111; padding: 12px 14px 0; }
.ct-show .sw { width: 34px; height: 20px; border-radius: 10px; }
.ct-show .sw::after { width: 16px; height: 16px; }
.ct-show .sw.on::after { left: 16px; }
/* 彩色树：全谱一人一点，可缩放拖动 */
.ct-page { background: #FAF9F5; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ct-page .io-bar { background: #FAF9F5; }
.ct-show .ct-total { margin-left: auto; font-size: 11.5px; color: #8A847C; white-space: nowrap; }
.ct-vp { position: relative; flex: 1 1 auto; min-height: 260px; min-height: 0; margin: 10px 8px 0; border-radius: 10px; background: #FFFDF8; box-shadow: inset 0 0 0 1px #EDE7DA; overflow: hidden; touch-action: none; cursor: grab; }
.ct-vp.grabbing { cursor: grabbing; }
.ct-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.ct-world .ct-links { position: absolute; left: 0; top: 0; pointer-events: none; }
.ct-world .ct-links path { fill: none; stroke-width: 3; stroke-linecap: round; }
.ct-p { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.22), inset 0 0 0 1.5px rgba(255,255,255,.55); cursor: pointer; }
.ct-p.m { box-shadow: 0 1px 3px rgba(0,0,0,.22), inset 0 0 0 1.5px rgba(255,255,255,.85); }
.ct-p b { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); font-size: 10px; font-weight: 500; color: #3A342C; white-space: nowrap; letter-spacing: -.2px; }
.ct-p.m b { color: #8A847C; font-size: 9px; }
.ct-zooms { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 5px; }
.ct-zooms button { width: 32px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.94); color: #3A342C; font-size: 14px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.16); cursor: pointer; }
.ct-zooms button:last-child { font-size: 11px; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
.ct-lg { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #4A443C; }
.ct-lg i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ct-lg em { font-style: normal; color: #9A948A; font-size: 10.5px; }


/* ---- 家族祠堂（对照 refs/zuji-shrine.png：金盘龙 + 黑字对联 + 石碑牌位 + SVG 门楼全景） ---- */
.shrine { background: #FDFCF8; min-height: 100%; padding-bottom: 10px; }
.sh-bar { display: flex; align-items: center; height: 46px; padding: calc(var(--safe-t) + 4px) 8px 0; background: #C97C2D; color: #fff; }
.sh-bar .bk { border: 0; background: none; color: #fff; font-size: 22px; width: 38px; cursor: pointer; }
.sh-bar .tt { flex: 1; text-align: center; font-size: 17px; font-weight: 700; }
.sh-bar .rt { border: 0; background: none; color: #fff; font-size: 17px; cursor: pointer; }
.sh-bar .sh-ic { font-style: normal; font-size: 20px; margin: 0 8px; }

/* 顶部双金龙：一条原样一条镜像，压在浅金底上 */
.sh-dragons { display: flex; align-items: center; padding: 8px 0 0; background: linear-gradient(180deg, #FBF7EC, #FDFCF8); }
/* 两张图同画布 340×280，各占一半、龙贴右凤贴左 —— 中间无缝对接成一副纹样 */
.sh-dragons .art { width: 50%; height: auto; display: block; }
/* 龙首原本朝左、凤首朝左：把龙镜像一下，两张图的头都朝中间（龙凤相向） */
.sh-dragons .art:first-child { transform: scaleX(-1); }


/* 对联 + 始祖牌：龙下一行，黑楷对联居两侧 */
.sh-top { display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 4px 6px 0; }
.sh-top .couple { flex: 1; font-family: 'Kaiti SC', 'STKaiti', KaiTi, 'Songti SC', STSong, SimSun, serif; font-size: 15.5px; font-weight: 700; color: #191510; letter-spacing: 1px; white-space: nowrap; text-align: center; padding-top: 14px; }
.sh-mid { display: flex; gap: 10px; align-items: flex-start; }
.pai-wrap { text-align: center; }
.pai-lab { display: block; font-style: normal; font-size: 10px; color: #6E675C; margin-bottom: 3px; font-family: 'Kaiti SC', KaiTi, serif; }

/* 牌位=祠堂石碑的线条造型（2026-10-26 用户定：就用封面的碑做牌位，碑文位置刻每个人名字）
   碑帽双龙简线 + 顶珠 + 碑身内框 + 双层碑座；名字竖排 HTML 文字叠在碑身上 */
.pai { position: relative; width: 36px; border: none; border-radius: 0;
  padding: 26px 2px 26px; text-align: center; cursor: pointer; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 132'%3E%3Cpath d='M3 26C3 10 11 4 20 4s17 6 17 22' fill='%23FFFDF6' stroke='%234A4136' stroke-width='2'/%3E%3Cpath d='M9 18c2-4 5-4 7-1 2-3 5-4 7-1 2-3 5-3 7 0' fill='none' stroke='%234A4136' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='8' r='2.2' fill='%234A4136'/%3E%3Crect x='3' y='24' width='34' height='86' rx='3' fill='%23FFFDF6' stroke='%234A4136' stroke-width='2'/%3E%3Crect x='7.5' y='30' width='25' height='74' rx='2' fill='none' stroke='%23B8A87F' stroke-width='1.4'/%3E%3Crect x='1' y='112' width='38' height='6' rx='2' fill='%23F5EFE2' stroke='%234A4136' stroke-width='1.8'/%3E%3Crect x='5' y='119.5' width='30' height='4.5' rx='1.5' fill='%23F5EFE2' stroke='%234A4136' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pai::after { content: none; }
.pai span { display: block; writing-mode: vertical-rl; margin: 0 auto; font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif; font-weight: 700; font-size: 11px; color: #241E14; letter-spacing: 2px; min-height: 36px; text-shadow: none; }
.pai.big { width: 44px; padding: 32px 3px 34px; }
.pai.big span { font-size: 13.5px; min-height: 56px; letter-spacing: 3px; }

.pai-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 5px; padding: 22px 10px 8px; }
.pai-cell { text-align: center; }
.pai-cell .pai { margin: 0 auto; }
.pai-cell em { display: block; font-style: normal; font-size: 10px; color: #55504A; margin-top: 9px; font-family: Georgia, serif; }

/* 门楼全景：整幅 SVG（牌坊 + 红墙月亮门 + 金狮 + 绿树） */
.sh-temple { position: relative; margin: 24px 8px 0; border-radius: 6px; overflow: hidden; background: linear-gradient(#F6F0E0, #EFE6CE); box-shadow: 0 1px 4px rgba(60, 40, 10, .15); }
.sh-temple .temple-photo { display: block; width: 100%; height: 188px; object-fit: cover; object-position: center 60%; }
/* 换封面 / 还原：浮在实景右上、左上 */
.sh-cov { position: absolute; top: 8px; right: 8px; border: 0; border-radius: 13px; background: rgba(28, 22, 12, .5); color: #FFF6E2; font-size: 11.5px; padding: 4px 10px; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sh-cov.rt { right: auto; left: 8px; }
.sh-foot { text-align: center; padding: 8px 0 2px; }
.sh-foot em { font-style: normal; font-size: 11px; color: #8A847C; }

/* ---- 五服关系图 ---- */
.wf-tip { font-size: 12px; color: #9A9A9A; padding: 10px 14px 2px; }
.wf-row { display: flex; justify-content: center; gap: 5px; padding: 6px 4px 0; }
.wf-card { width: 64px; background: #DDF0FB; border-radius: 4px; text-align: center; padding: 5px 2px 6px; cursor: pointer; }
.wf-card em { display: block; font-style: normal; font-size: 10px; color: #4A7A96; }
.wf-card b { display: block; font-size: 14px; color: #111; margin: 3px 0 4px; }
.wf-card i { display: block; font-style: normal; font-size: 10.5px; color: #7B3FB8; }
.wf-card u { display: block; text-decoration: none; font-size: 9.5px; color: #8A9AA6; margin-top: 2px; }
.wf-card.f1 { background: #FBF4E4; }

/* ---- AB 路径 ---- */
.ab-card { background: #fff; margin: 14px; border-radius: 12px; padding: 18px 14px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.ab-tip { text-align: center; font-size: 13.5px; color: #333; margin-bottom: 16px; }
.ab-two { display: flex; align-items: center; justify-content: space-around; }
.ab-c { width: 86px; height: 86px; border-radius: 50%; border: 2px solid #F0A08A; color: #F0A08A; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; background: #fff; }
.ab-c.f { border-color: #F06EB7; color: #F06EB7; }
.ab-arrow { flex: 1; height: 2px; border-top: 2px dashed #CCC; margin: 0 10px; position: relative; }
.ab-arrow::after { content: ''; position: absolute; right: -1px; top: -5px; border-left: 8px solid #CCC; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ab-lb { display: flex; justify-content: space-around; margin-top: 12px; }
.ab-lb b { font-size: 16px; }
.ab-res { background: #fff; margin: 0 14px 20px; border-radius: 12px; padding: 16px; }
.ab-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; padding: 8px 0; }
.ab-line i { color: #C7C7CC; font-style: normal; }
.ab-n { background: #4DA6E8; color: #fff; border-radius: 14px; padding: 4px 10px; font-size: 12.5px; }
.ab-n.f { background: #F06EB7; }
.ab-lca { text-align: center; font-size: 12.5px; color: #B8873B; padding: 6px; }
.ab-rel { text-align: center; font-size: 14.5px; color: #111; padding-top: 6px; }
.ab-rel b { color: #E4572E; }

/* ================= 族事（论坛） ================= */
.ev-me { margin: 10px 14px 2px; background: #fff; border-radius: 11px; padding: 12px 14px; box-shadow: 0 1px 6px rgba(60,45,20,.05); }
.ev-me b { display: block; font-size: 13px; color: var(--green); font-weight: 700; }
.ev-me em { font-style: normal; display: block; font-size: 11.5px; color: var(--ink3); line-height: 1.75; margin-top: 4px; }

.ev-chips { display: flex; gap: 7px; overflow-x: auto; padding: 12px 14px 2px; }
.ev-chips button { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--ink2); border-radius: 15px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.ev-chips button.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

.ev-card { background: #fff; margin: 9px 14px 0; border-radius: 12px; padding: 12px 14px 11px; box-shadow: 0 1px 6px rgba(60,45,20,.06); cursor: pointer; }
.ev-h { display: flex; align-items: center; gap: 6px; }
.ev-h em { font-style: normal; margin-left: auto; font-size: 10.5px; color: #A9A292; }
.ev-k { display: inline-block; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 5px; font-weight: 700; }
.ev-k.notice { background: #FBEAE7; color: #B03A2E; }
.ev-k.event { background: #FBF0DD; color: #A8791F; }
.ev-k.progress { background: #EAF3EC; color: #1F6B54; }
.ev-k.activity { background: #E7F0F8; color: #2A6A9E; }
.ev-k.seek { background: #EFE9F6; color: #6B4E8E; }
.ev-k.talk { background: #F3EEDF; color: #6B5B3E; }
.ev-top { font-size: 9.5px; color: #fff; background: #C4692A; border-radius: 4px; padding: 2px 5px; font-weight: 700; }
.ev-t { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 8px 0 0; color: var(--ink); }
.ev-b { font-size: 12.5px; color: #6B6355; line-height: 1.75; margin: 6px 0 0; }
.ev-f { display: flex; justify-content: space-between; font-size: 11px; color: #A9A292; margin-top: 9px; padding-top: 8px; border-top: .5px solid #F0EBDD; }
.ev-empty { margin: 16px 14px; padding: 30px 18px; background: #fff; border-radius: 12px; text-align: center; font-size: 12.5px; color: var(--ink3); line-height: 2; }

/* 帖子详情 */
.ev-detail { background: #fff; margin: 10px 14px 0; border-radius: 12px; padding: 16px 15px; box-shadow: 0 1px 6px rgba(60,45,20,.06); }
.ev-dt { display: block; font-size: 17px; font-weight: 800; line-height: 1.5; }
.ev-dw { font-size: 11.5px; color: var(--ink3); margin-top: 9px; }
.ev-db { font-size: 14px; color: #3D382D; line-height: 2; margin: 14px 0 0; white-space: pre-wrap; }
.ev-da { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: .5px solid #F0EBDD; }
.ev-da button { border: 1px solid var(--line); background: #fff; border-radius: 15px; padding: 6px 14px; font-size: 12.5px; color: var(--ink2); cursor: pointer; }
.ev-da button.del { margin-left: auto; color: var(--red); border-color: #F3D8D2; }

.ev-rh { font-size: 12px; color: var(--ink3); padding: 16px 18px 4px; }
.ev-r { background: #fff; margin: 8px 14px 0; border-radius: 10px; padding: 11px 13px; }
.ev-rw { display: flex; align-items: center; gap: 6px; }
.ev-rw b { font-size: 12.5px; }
.ev-rw em { font-style: normal; font-size: 10.5px; color: #A9A292; margin-left: auto; }
.ev-r p { font-size: 13px; color: #3D382D; line-height: 1.85; margin: 7px 0 0; }
.ev-rnone { margin: 8px 14px 0; font-size: 12px; color: var(--ink3); }
.ev-ri { display: flex; gap: 8px; padding: 14px 14px 22px; }
.ev-ri input { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; background: #fff; outline: none; }
.ev-ri button { border: 0; background: var(--green); color: #fff; border-radius: 9px; padding: 0 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* 发布弹层 */
.np { padding: 4px 16px 20px; }
.np-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-k { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 4px; font-size: 12.5px; color: var(--ink2); cursor: pointer; }
.np-k.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.np-k.lock { color: #B7B2A4; background: #F7F5EF; }
.np-hint { font-size: 11.5px; color: var(--ink3); line-height: 1.8; margin: 10px 2px 12px; }
.np-in { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; font-size: 14.5px; background: #fff; outline: none; font-family: inherit; }
.np-ta { width: 100%; min-height: 112px; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; font-size: 14px; line-height: 1.8; background: #fff; outline: none; margin-top: 9px; font-family: inherit; resize: none; }
.np-btns { display: flex; gap: 10px; margin-top: 14px; }
.np-btns button { flex: 1; border-radius: 10px; padding: 12px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2); }
.np-btns button.s { background: var(--green); border-color: var(--green); color: #fff; }

/* ================= 客服（首页最后一格） ================= */
/* 别的子页是 iOS 白灰系统风；客服是工作室门面，走回谱的米色纸感 */
.io.sv { background: #F7F4EC; margin: 0 -14px; }
.io.sv .io-bar { background: #FBF8F1; border-bottom-color: #E8E0CE; }

.sv-hero { padding: 18px 18px 4px; }
.sv-shop { display: flex; align-items: center; gap: 8px; }
.sv-shop b { font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.sv-badge { font-size: 9.5px; line-height: 1; color: #fff; background: var(--green); border-radius: 4px; padding: 4px 6px; font-weight: 700; }
.sv-hero > em { display: block; font-style: normal; font-size: 12px; color: var(--ink3); margin-top: 7px; line-height: 1.7; }

.sv-qr { margin: 12px 14px 0; background: #fff; border-radius: 14px; padding: 18px 16px 15px; text-align: center; box-shadow: 0 1px 8px rgba(60, 45, 20, .07); }
.sv-img { display: block; width: 168px; height: 168px; margin: 0 auto 11px; border-radius: 8px; background: #fff; }
.sv-qr > b { display: block; font-size: 14.5px; font-weight: 700; }
.sv-wx { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; background: #F6F3E9; border-radius: 9px; padding: 8px 12px; font-size: 13px; color: var(--ink); }
.sv-wx button { border: 0; background: var(--green); color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sv-qr > em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3); margin-top: 9px; }
.sv-cov { display: block; margin: 10px 14px 0; width: calc(100% - 28px); border: 1px dashed #D9D1BD; background: #fff; color: var(--ink2); border-radius: 10px; padding: 9px 0; font-size: 12.5px; cursor: pointer; }
.sv-cov.rt { width: auto; margin: 9px auto 0; padding: 5px 15px; border-style: solid; border-color: var(--line); font-size: 11.5px; color: var(--ink3); }

.sv-tut .row { align-items: flex-start; }
.sv-tut .row .tx b { font-size: 13.5px; }
.sv-tut .row .tx em { line-height: 1.7; }
.sv-go { flex: 0 0 auto; border: 1px solid var(--green); color: var(--green); background: #fff; border-radius: 14px; padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 2px; }

.sv-more { margin: 12px 14px 0; background: #fff; border-radius: 12px; padding: 2px 14px; box-shadow: 0 1px 6px rgba(60, 45, 20, .05); }
.sv-note { text-align: center; font-size: 11.5px; color: #A9A292; padding: 18px 24px 28px; line-height: 1.8; }

/* ================= 编委会 ================= */
.io.cm { background: #F7F4EC; margin: 0 -14px; }
.io.cm .io-bar { background: #FBF8F1; border-bottom-color: #E8E0CE; }
.io.cm .io-bar .tt { font-size: 16px; }
.cm-hero { margin: 12px 14px 0; background: linear-gradient(142deg, #1F6B54, #2E8B6D); color: #fff; border-radius: 14px; padding: 16px 16px 14px; box-shadow: 0 6px 18px rgba(31, 107, 84, .2); }
.cm-term { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-term b { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.cm-term em { font-style: normal; font-size: 12px; opacity: .8; }
.cm-line { font-size: 12px; line-height: 1.8; opacity: .93; margin-top: 7px; }
.cm-stat { margin-top: 11px; padding-top: 9px; border-top: .5px solid rgba(255, 255, 255, .22); font-size: 11.5px; line-height: 1.7; opacity: .9; }

.cm-card { margin: 10px 14px 0; background: #fff; border-radius: 12px; padding: 13px 14px 11px; box-shadow: 0 1px 6px rgba(60, 45, 20, .06); }
.cm-top { display: flex; align-items: center; gap: 9px; }
.cm-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, #E9DCC2, #D8C6A4); color: #6B5B3E; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cm-id { flex: 1; min-width: 0; }
.cm-id b { display: block; font-size: 15px; font-weight: 700; }
.cm-id em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-duty { flex: 0 0 auto; font-size: 10px; color: #1F6B54; background: #EAF3EC; border-radius: 5px; padding: 4px 6px; font-weight: 700; }
.cm-area { font-size: 12px; color: #6B6355; line-height: 1.7; margin-top: 9px; }
.cm-act { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: .5px solid #F0EBDD; flex-wrap: wrap; }
.cm-b { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; color: var(--ink2); border-radius: 13px; padding: 5px 11px; font-size: 12px; text-decoration: none; cursor: pointer; font-family: inherit; }
.cm-b:active { background: #F4F0E4; }
.cm-edit { margin-left: auto; border: 0; background: none; color: var(--green); font-size: 12px; cursor: pointer; padding: 4px 2px; }
.cm-foot { padding: 16px 22px 30px; font-size: 11px; color: #A9A292; line-height: 1.9; text-align: center; }
.cm-tip { margin: 12px 16px 0; font-size: 11.5px; color: var(--ink3); line-height: 1.8; }
.cm-del { display: block; margin: 18px 16px 40px; width: calc(100% - 32px); border: 1px solid #F3D8D2; background: #fff; color: #B03A2E; border-radius: 10px; padding: 11px 0; font-size: 13.5px; cursor: pointer; }

/* 编委会头卡右上「编辑届次」：届次/任期/目标随时可改 */
.cm-hero { position: relative; }
.cm-hero-edit { position: absolute; top: 12px; right: 12px; border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .14); color: #fff; border-radius: 13px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.cm-hero-edit:active { background: rgba(255, 255, 255, .26); }

/* ================= 助谱贤达（功德榜） ================= */
.pt-hero { background: linear-gradient(142deg, #8C6A24, #B98B33); box-shadow: 0 6px 18px rgba(140, 106, 36, .22); }
.pt-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin-top: 11px; overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #F6DFA6, #F2C14E); }
.pt-rank { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #8C6A24; background: #F3EDDD; }
.pt-rank.g1 { background: linear-gradient(140deg, #F6D06B, #D79A21); color: #fff; }
.pt-rank.g2 { background: linear-gradient(140deg, #DCE0E6, #A9B2BE); color: #fff; }
.pt-rank.g3 { background: linear-gradient(140deg, #E7C4A2, #C08A5C); color: #fff; }
.pt-amt { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #23201B; letter-spacing: .2px; }
/* 功德榜名录：一本谱常几十上百人，行距压紧、卡片贴拢，一屏能看更多人 */
.pt-card { margin: 5px 14px 0; padding: 8px 12px 7px; border-radius: 10px; }
.pt-card .cm-top { gap: 8px; }
.pt-card .pt-rank { width: 21px; height: 21px; font-size: 11px; }
.pt-card .cm-id b { font-size: 14px; line-height: 1.3; }
.pt-card .cm-id em { margin-top: 1px; font-size: 10px; line-height: 1.3; }
.pt-card .pt-amt { font-size: 14px; }
.pt-card .cm-area { margin-top: 3px; font-size: 11.5px; line-height: 1.5; }
.pt-card .cm-act { margin-top: 5px; padding-top: 5px; }
.pt-list-end { height: 4px; }

/* ================= 平台运营（全平台族谱总表） ================= */
.io.ops { background: #F7F4EC; margin: 0 -14px; }
.io.ops .io-bar { background: #FBF8F1; border-bottom-color: #E8E0CE; }
.io.ops .io-bar .tt { font-size: 16px; }
.ops-hero { margin: 12px 14px 0; padding: 15px 15px 13px; border-radius: 14px; color: #F3EADA;
  background: linear-gradient(142deg, #1E3B33, #2A5748 62%, #1B4637); box-shadow: 0 6px 18px rgba(27, 70, 55, .2); }
.ops-op { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.ops-op em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 1px; opacity: .85;
  border: 1px solid rgba(240, 223, 174, .4); border-radius: 4px; padding: 1px 5px; color: #F0DFAE; }
.ops-sub { margin-top: 5px; font-size: 11.5px; opacity: .72; }
.ops-kpi { display: flex; gap: 6px; margin-top: 13px; }
.ops-kpi div { flex: 1; text-align: center; padding: 7px 2px 6px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.ops-kpi b { display: block; font-size: 15px; font-weight: 800; color: #F0DFAE; line-height: 1.25; }
.ops-kpi em { font-style: normal; font-size: 9px; opacity: .72; }
.ops-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 9px 12px;
  background: #fff; border: 1px solid #E7E1D3; border-radius: 10px; font-size: 13px; color: #A9A292; }
.ops-search input { flex: 1; min-width: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; color: #3A4A42; outline: none; }
.ops-search input::placeholder { color: #B4ADA0; }
.ops-chips { display: flex; gap: 7px; padding: 11px 14px 3px; overflow-x: auto; }
.ops-chips button { flex: 0 0 auto; border: 1px solid #E7E1D3; background: #fff; color: #6B6355;
  border-radius: 14px; padding: 5px 11px; font-size: 12px; font-family: inherit; cursor: pointer; }
.ops-chips button b { font-weight: 700; color: #A8791F; margin-left: 2px; }
.ops-chips button.on { background: #1F6B54; border-color: #1F6B54; color: #fff; }
.ops-chips button.on b { color: #F0DFAE; }
.ops-list { padding: 8px 14px 0; }
.ops-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 11px;
  padding: 10px 12px; margin-bottom: 6px; box-shadow: 0 1px 5px rgba(60, 45, 20, .05); cursor: pointer; }
.ops-row:active { background: #FBF8F0; }
.ops-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-family: 'Songti SC', STSong, SimSun, serif; font-size: 16px; font-weight: 700; color: #17493B;
  background: linear-gradient(140deg, #E9EFE6, #D6E4D5); }
.ops-main { flex: 1; min-width: 0; }
.ops-main b { display: block; font-size: 13.5px; font-weight: 700; }
.ops-main em { display: block; font-style: normal; font-size: 10.5px; color: #8B938C; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-own { font-style: normal; font-size: 9px; color: #1F6B54; background: #EAF3EC; border-radius: 3px;
  padding: 1px 4px; margin-left: 5px; vertical-align: 1px; }
.ops-rt { flex: 0 0 auto; text-align: right; }
.ops-pill { display: inline-block; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.ops-pill.green { color: #1F6B54; background: #EAF3EC; }
.ops-pill.blue { color: #2A5A86; background: #E8F0F8; }
.ops-pill.orange { color: #A9601F; background: #FBF0DD; }
.ops-rt em { display: block; font-style: normal; font-size: 9.5px; color: #B4ADA0; margin-top: 3px; }
.ops-note { padding: 16px 22px 30px; font-size: 10.5px; color: #A9A292; line-height: 1.9; text-align: center; }
.ops-card { margin: 12px 14px 0; background: #fff; border-radius: 12px; padding: 4px 14px; box-shadow: 0 1px 6px rgba(60, 45, 20, .06); }
.ops-kv { display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
  border-bottom: .5px solid #F1ECDE; font-size: 12.5px; }
.ops-kv:last-child { border-bottom: 0; }
.ops-kv span { color: #8B938C; }
.ops-kv b { font-weight: 600; color: #3A4A42; }
.ops-enter { display: block; width: calc(100% - 28px); margin: 14px 14px 0; border: 0; border-radius: 10px;
  background: #1F6B54; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 0; cursor: pointer; }
.ops-lock { margin: 14px 14px 0; padding: 12px; border: 1px dashed #DCD2BB; border-radius: 10px;
  background: #FBF8F1; color: #A08A5E; font-size: 11.5px; text-align: center; line-height: 1.7; }

/* ================= 回首页 / 回上级（统一出口） =================
   树谱、册谱是底部 tab 页，画布铺满时容易看不到出路；
   搜索态和子页同理，每个顶栏都给一个明确的「⌂ 首页」。 */
.tbar .hbtn {
  flex: 0 0 auto; border: 0; background: none; padding: 4px 1px; font-size: 19px;
  line-height: 1; color: #222; cursor: pointer;
}
.book-top .bh {
  flex: 0 0 auto; border: 0; background: none; padding: 2px 2px 2px 0; font-size: 19px;
  line-height: 1; color: var(--ink2); cursor: pointer;
}
.book-top .bh:active, .tbar .hbtn:active { opacity: .5; }
.pbar .hb { padding: 4px 0 4px 6px; font-size: 18px; }

/* ================= 待我处理 ================= */
.td-h { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 8px; }
.td-h b { font-size: 14px; color: var(--ink); }
.td-h em { font-style: normal; font-size: 11.5px; color: var(--ink3); }
.td-do { flex: 0 0 auto; border: 1px solid var(--green); color: var(--green); background: #fff;
  border-radius: 7px; padding: 6px 12px; font-size: 12.5px; font-family: inherit; font-weight: 600; cursor: pointer; }
.td-do:active { background: var(--green-l); }
.td-tip { margin: 18px 22px 0; font-size: 11.5px; color: var(--ink3); line-height: 1.9; text-align: center; }
.io .row .pill { margin-left: 6px; }

/* ================= 我的家谱 ================= */
.ml-hero { margin: 14px 12px 4px; padding: 15px 16px; border-radius: 12px; color: #F3EADA;
  background: linear-gradient(142deg, #1E3B33, #2A5748 62%, #1B4637); }
.ml-hero b { display: block; font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.ml-hero em { display: block; font-style: normal; font-size: 11.5px; opacity: .72; margin-top: 4px; }
.ml-g { padding: 14px 18px 7px; font-size: 11.5px; color: var(--ink3); letter-spacing: 1.5px; }
.ml-p { display: flex; align-items: center; gap: 11px; background: #fff; margin: 0 12px 6px;
  padding: 10px 13px; border-radius: 11px; cursor: pointer; }
.ml-p:active { background: #FBFBF9; }
.ml-p.me { background: #F3F8F4; box-shadow: inset 0 0 0 1px #CFE3D6; }
.ml-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Songti SC', STSong, SimSun, serif; font-size: 16px; font-weight: 700; color: #17493B;
  background: linear-gradient(140deg, #E9EFE6, #D6E4D5); }
.ml-av.f { color: #8A4B57; background: linear-gradient(140deg, #F7E9EB, #EFD8DC); }
.ml-tx { flex: 1; min-width: 0; }
.ml-tx b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.ml-tx em { display: block; font-style: normal; font-size: 11px; color: var(--ink3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-edit { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 5px 10px; font-size: 11.5px; color: var(--ink2); font-family: inherit; cursor: pointer; }

/* ================= 族规家训 ================= */
.rl-hero { margin: 14px 12px 0; padding: 16px; border-radius: 12px; text-align: center;
  background: #FBF8F1; border: 1px solid #EADFC8; }
.rl-hero b { display: block; font-family: 'Songti SC', STSong, SimSun, serif; font-size: 17px;
  font-weight: 700; color: #7A5A22; letter-spacing: 2px; }
.rl-hero em { display: block; font-style: normal; font-size: 11px; color: #A08A5E; margin-top: 6px; letter-spacing: 1px; }
.rl-list { margin: 12px 12px 0; background: #fff; border-radius: 11px; overflow: hidden; }
.rl-item { display: flex; gap: 12px; padding: 14px 15px; border-bottom: .5px solid #F2EEE4; }
.rl-item:last-child { border-bottom: 0; }
.rl-no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #F5EFDF; color: #A08A5E; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.rl-item b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 5px; }
.rl-item p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--ink2); }

/* 宫格角标：待我处理有几件 */
.hm-grid i { position: relative; }

/* ================= 册谱：目录分组 + 页码跳转 ================= */
.toc-g:first-child { padding-top: 2px; }
.book-nav .bv-jump { border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 12px; font-family: inherit; font-size: 11px; color: var(--ink3); cursor: pointer; }
.book-nav .bv-jump:active { background: #FBF8F0; }
.jp-wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  padding: 8px 16px 6px; max-height: 54vh; overflow-y: auto; }
.jp-c { border: 1px solid var(--line); background: #fff; border-radius: 9px;
  padding: 9px 0 6px; font-family: inherit; cursor: pointer; }
.jp-c b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.jp-c em { display: block; font-style: normal; font-size: 9.5px; color: var(--ink3); margin-top: 1px; }
.jp-c.on { background: var(--green); border-color: var(--green); }
.jp-c.on b, .jp-c.on em { color: #fff; }
.jp-tip { text-align: center; font-size: 11px; color: var(--ink3); padding: 2px 0 16px; margin: 0; }

/* ================= 册谱附页：凡例 / 字辈 / 祠堂 / 编委 / 贤达 ================= */
.bp-fanli .rl { color: #23201B; }

/* 字辈排行 */
.zb-h b { display: block; font-size: 17px; font-weight: 700; letter-spacing: 6px; color: #2E2517; }
.zb-h em { display: block; font-style: normal; font-size: 10px; color: #A08A5E; letter-spacing: 2px; margin-top: 4px; }
.zb-c b { display: block; font-size: 21px; font-weight: 700; color: #23201B; line-height: 1.25; }
.zb-c em { display: block; font-style: normal; font-size: 9px; color: #A08A5E; margin-top: 1px; }

/* 祠堂图 · 坟图 */
.bp-shrine { font-family: 'Songti SC', STSong, SimSun, serif; }
.bs-img { border: 1px solid #E5D9BE; padding: 6px; background: #FFFEF8; }
.bs-img img { display: block; width: 100%; height: 148px; object-fit: cover;
  filter: sepia(.34) contrast(.94) saturate(.78); }
.bs-cap { text-align: center; font-size: 10.5px; color: #A08A5E; letter-spacing: 2px; padding: 7px 0 10px; }
.bs-row { padding: 7px 0; border-top: 1px dashed #E9DFC6; }
.bs-row b { font-size: 12.5px; color: #3E3425; letter-spacing: .5px; }
.bs-row em { display: block; font-style: normal; font-size: 11px; color: #7A6743; line-height: 1.85; margin-top: 2px; }
.bs-note { font-size: 10.5px; line-height: 1.9; color: #8A7550; margin: 12px 0 0; }

/* 编委会名录：只排「职务：____」六行，不加届次/目标/说明这些灰字（族谱成品页不印） */
.bp-cm { font-family: 'Songti SC', STSong, SimSun, serif; }
.bp-cm-ttl { margin-bottom: 0; }
/* 职务行：职务名 + 一条留白的虚线（有名单就用名字填上，没有就空着手写） */
.bp-cm-rows { margin-top: 22px; }
.bp-cm-line { display: flex; align-items: flex-start; gap: 2px; padding: 9px 0 7px; }
.bp-cm-line .k {
  flex: 0 0 auto; min-width: 56px; font-size: 11.5px; font-weight: 700;
  color: #2E2517; letter-spacing: 1px; white-space: nowrap; line-height: 1.9;
}
.bp-cm-line .k:not(:empty)::after { content: '：'; }
.bp-cm-line .v {
  flex: 1; min-width: 0; padding: 0 2px 3px; border-bottom: 1px dashed #D8C9A8;
  font-size: 12.5px; color: #2E2517; letter-spacing: 1.5px; line-height: 1.9;
  word-break: break-all;
}
.bp-cm-line .v:empty { min-height: 1.9em; }
/* 右上角那支笔：编委会填名字、序言写文章。落在框内、书口条左边，不压谱名 */
.bp-pen, .cm-pen {
  position: absolute; top: 6.1%; right: 10.7%; z-index: 12;
  width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46, 37, 23, .72); color: #FFF9EC;
  box-shadow: 0 2px 8px rgba(60, 45, 20, .28); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bp-pen svg, .cm-pen svg { display: block; }
.bp-pen:active, .cm-pen:active { transform: scale(.93); background: rgba(46, 37, 23, .88); }
/* 只有标题、正文自写的几章（序言/姓氏来源/家规家训/大宗行第）：标题下留白，段落首行缩进 */
.bp-ch-ttl { margin-bottom: 7%; }
.bp-ch-body p, .bp-pref-body p { text-indent: 2em; }
/* 上页纸底断下来的续行：不再缩进（老谱排法，一眼看出是接着上一页的同一段） */
.bp-ch-body p.cont, .ptp-bio p.cont { text-indent: 0; }
/* 纸底那一段的段后距不算：算进去纸面会多出 10px，页页都要滚一小截 */
.bp-ch-body p:last-child, .ptp-bio p:last-child { margin-bottom: 0; }
.pf-edit { margin: 12px 14px 0; background: #fff; border-radius: 12px; padding: 12px 14px; }
.pf-edit textarea {
  display: block; width: 100%; min-height: 380px; box-sizing: border-box;
  border: 0; background: none; outline: none; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.95; color: var(--ink);
}

/* 助谱贤达榜：名 + 金，两列排，序号连排；一页 40 人，人多自动续页 */
.bp-pt { font-family: 'Songti SC', STSong, SimSun, serif; }
.bp-pt-ttl { margin-bottom: 5.2%; }
.bp-pt-cols { column-count: 2; column-gap: 8%; }
.bp-pt-row {
  display: flex; align-items: baseline; gap: 4px; padding: 2.5px 0;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
.bp-pt-row .rn { flex: 0 0 14px; font-size: 9px; color: #23201B; text-align: right; }
.bp-pt-row .nm {
  flex: 0 0 auto; max-width: 52%; font-size: 11.5px; font-weight: 700; color: #2E2517;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-pt-row .dt { flex: 1; min-width: 6px; border-bottom: 1px dotted #D8CAA6; position: relative; top: -2px; }
.bp-pt-row .am {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #23201B;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* 姓氏来源：源流三段 + 祠墓图 */
.bp-body .bp-fl { font-size: 12.5px; line-height: 1.85; margin: 4px 0; text-indent: 0; color: #3E3425; }
.bp-fl b { font-weight: 600; margin-right: 3px; color: #23201B; }
.bp-src-img img { display: block; width: 100%; border-radius: 3px; filter: sepia(.12); }
/* 家族贤达：一人一页 —— 标准照片（竖版 3:4）在上，详细简历在下 */
.bp-ptp { font-family: 'Songti SC', STSong, SimSun, serif; text-align: center; }
.bp-ptp .bp-ch-ttl { margin-bottom: 5%; }
.ptp-port {
  width: 46%; margin: 0 auto; aspect-ratio: 3 / 4; overflow: hidden;
  background: #FBF7EC; border: 1px solid #DCCFB2; border-radius: 2px;
  box-shadow: 0 0 0 3px #FFFDF6, 0 0 0 4px #E7DBC0;
  display: flex; align-items: flex-end; justify-content: center;
}
.ptp-port img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.05); }
.ptp-port.is-empty { color: #DCD2BC; }
.ptp-port.is-empty svg { width: 74%; height: auto; display: block; }
.ptp-nm { margin-top: 11px; font-size: 19px; font-weight: 700; letter-spacing: 5px; color: #2E2517; text-indent: 5px; }
.ptp-nm.sm { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-indent: 3px; }
.ptp-meta { margin-top: 4px; font-size: 10.5px; letter-spacing: 1.5px; color: #23201B; }
.ptp-dn { margin-top: 3px; font-size: 10px; letter-spacing: 1px; color: #23201B; }
.ptp-rule { display: block; width: 22%; height: 1px; background: #D8C9A8; margin: 10px auto 9px; }
.ptp-bio { text-align: justify; }
.ptp-bio p { text-indent: 2em; font-size: 11.5px; line-height: 2.05; color: #2E2517; margin: 0 0 2px; }

/* 贤达页右上角的「＋」：屏幕专用，纸上不印。小圆钮，和笔并排，不压标题 */
.bp-add {
  position: absolute; top: 6.1%; right: calc(10.7% + 36px); z-index: 12;
  width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46, 37, 23, .72); color: #FFF9EC;
  font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 45, 20, .28); -webkit-tap-highlight-color: transparent;
}
.bp-add:active { transform: scale(.93); background: rgba(46, 37, 23, .88); }
/* 删除贤达钮：与 ＋ 同款圆形，往左再排一颗，红底示意危险（用户 2026-10-21 定） */
.bp-add.is-del { right: calc(10.7% + 72px); background: rgba(128, 42, 30, .8); }
.bp-add.is-del:active { background: rgba(128, 42, 30, .95); }

/* 贤达页填写：左边照片框，右边按钮与说明 */
.ptb-phrow { display: flex; gap: 13px; margin: 0 12px; padding: 13px 14px; background: #fff; border-radius: 10px; }
.ptb-phbox {
  flex: 0 0 84px; width: 84px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px;
  background: #F6F0E1; border: 1px solid #E4D8BC; display: flex; align-items: flex-end; justify-content: center;
}
.ptb-phbox.is-empty { color: #D8CDB4; }
.ptb-phbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptb-phbox svg { width: 74%; height: auto; display: block; }
.ptb-phbtn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ptb-phbtn .lnk { color: #576B95; font-size: 13.5px; border: 0; background: none; padding: 2px 0; cursor: pointer; }
.ptb-phbtn em { font-style: normal; font-size: 11px; color: #9A8E76; line-height: 1.65; }
.pt-on { flex: 0 0 auto; font-size: 10.5px; color: #B4A275; border: 1px solid #E4D8BC; border-radius: 9px; padding: 1px 7px; }
.pt-on.on { color: #7A6743; border-color: #C9B78C; background: #FBF4E2; }

/* ================= 册谱顶栏（族记同款：⌂ / ⌕ / 父系母系 / 管理） ================= */
.book-top { gap: 6px; }
.book-top .bi {
  flex: 0 0 auto; border: 0; background: none; padding: 4px 2px; font-size: 21px;
  line-height: 1; color: #1E242B; cursor: pointer; font-family: serif;
}
.book-top .bk-line {
  flex: 1; display: flex; justify-content: center; gap: 0;
  border: 1px solid #1E242B; border-radius: 8px; overflow: hidden; max-width: 220px; margin: 0 auto;
}
.book-top .bk-line button {
  flex: 1; border: 0; background: #fff; padding: 6.5px 0; font-size: 13px; font-weight: 600;
  color: #1E242B; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.book-top .bk-line button + button { border-left: 1px solid #1E242B; }
.book-top .bk-line button.on { background: #1E242B; color: #fff; }
.book-top .bp-mg {
  flex: 0 0 auto; border: 0; background: none; padding: 4px 1px; font-size: 13.5px;
  font-weight: 600; color: #1E242B; cursor: pointer;
}
.book-tools { display: flex; align-items: center; gap: 16px; padding: 2px 18px 8px; background: var(--paper); }
.book-tools button {
  border: 0; background: none; padding: 2px 4px; font-size: 19px; line-height: 1;
  color: #1E242B; cursor: pointer; font-family: serif;
}
.book-tools .sp { flex: 1; }
/* 翻页滑杆 */
.bk-slider {
  display: block; width: calc(100% - 60px); margin: 2px auto 0; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: #D9D2C0; outline: none;
}
.bk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(40, 30, 10, .35); cursor: pointer; border: 0;
}
.book-nav.rtl button:first-child { order: 3; }
.book-nav.rtl .bv { order: 1; }
.book-nav.rtl button:last-child { order: 2; }

/* ================= 册谱设置（族记「管理」页） ================= */
.bs-io .io-bar .tr { border: 0; background: none; color: #1F6B54; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.bs-top { margin: 12px 12px 0; background: #fff; border-radius: 11px; box-shadow: 0 1px 6px rgba(60, 45, 20, .05); }
.bs-group { margin: 10px 12px 0; background: #fff; border-radius: 11px; box-shadow: 0 1px 6px rgba(60, 45, 20, .05); }
.bs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: .5px solid #F2EEE4; font-size: 14px; cursor: pointer;
}
.bs-row:last-child { border-bottom: 0; }
.bs-row > span { color: #24312A; display: flex; align-items: center; }
.bs-row > em { font-style: normal; font-size: 13px; color: #A9A292; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bs-row .vip {
  font-style: normal; font-size: 9px; font-weight: 700; color: #7A5A22; background: #F3E4BE;
  border-radius: 3px; padding: 1px 4px; margin-left: 6px; letter-spacing: 1px;
}
.bs-row .sw2 { display: inline-block; width: 17px; height: 24px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
.bs-row .sw2.light { border-color: #E2DCCB; }
/* 封面背景：小书缩略（色底 + 白色书名框），族记同款 */
.bs-row .sw2.bk2 { position: relative; }
.bs-row .sw2.bk2::after {
  content: ''; position: absolute; top: 3px; left: 4px; width: 7px; height: 15px;
  background: #FDFCF8; border: 1px solid rgba(0, 0, 0, .55); border-radius: 1px;
}
.bs-tabs { display: flex; gap: 4px; padding: 16px 12px 0; overflow-x: auto; }
.bs-tabs button {
  flex: 0 0 auto; border: 0; background: #E9E6DD; color: #6B6B63; border-radius: 7px 7px 0 0;
  padding: 8px 13px; font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.bs-tabs button.on { background: #fff; color: #1E242B; font-weight: 700; }
.bs-body { margin: 0 12px; background: #fff; border-radius: 0 11px 11px 11px; box-shadow: 0 1px 6px rgba(60, 45, 20, .05); overflow: hidden; }
.bs-rr { flex-wrap: wrap; }
.bs-rr .bs-opts { display: flex; gap: 16px; }
.bs-rr label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #4A544D; cursor: pointer; }
.bs-rr label i {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C9C4B6; position: relative;
}
.bs-rr label.on i { border-color: #1FA34A; }
.bs-rr label.on i::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: #1FA34A;
}
.bs-empty { padding: 34px 20px; font-size: 12.5px; color: #A9A292; text-align: center; line-height: 2; }
.bs-note { margin: 14px 22px calc(16px + var(--safe-b)); font-size: 10.5px; color: #A9A292; text-align: center; line-height: 1.8; }
/* 拼接详情项：绿色勾选块（族记行传设置同款） */
.bs-cks { display: flex; gap: 12px; flex-wrap: wrap; }
.bs-ck { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #24312A; cursor: pointer; }
.bs-ck i {
  width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid #1FA34A; position: relative; background: #fff;
}
.bs-ck.on i::after {
  content: '✓'; position: absolute; top: -3px; left: 1px; font-size: 12px; color: #1FA34A; font-weight: 700;
}
.bs-ck.on i { background: #EAF7EE; }

/* —— 内容设置（族记「✎」1:1：灰底 + 白行 + 右侧铅笔） —— */
.binfo-list { margin: 12px 0 0; background: #fff; border-bottom: .5px solid #E2E2E2; }
.binfo-row {
  display: flex; align-items: center; gap: 8px; padding: 16px 15px;
  border-bottom: .5px solid #F0F0F0; cursor: pointer;
}
.binfo-row:last-child { border-bottom: 0; }
.binfo-row .bl { flex: 0 0 auto; width: 5.5em; font-size: 14px; color: #333; letter-spacing: 1px; }
.binfo-row .bv { flex: 1; font-style: normal; font-size: 15px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binfo-row .bp { flex: 0 0 auto; font-style: normal; font-size: 16px; color: #3C3C3C; }
.binfo-note { margin: 14px 18px; font-size: 11px; color: #A5A5AB; line-height: 1.9; }
.binfo-edit { margin: 14px 12px 0; background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, .05); }
.binfo-edit input {
  width: 100%; border: 0; outline: none; background: none;
  padding: 14px 15px; font-size: 16px; color: #222; font-family: inherit; box-sizing: border-box;
}
.binfo-edit input::placeholder { color: #C4C4C8; }

/* —— 版式选择（族记 1:1：两列卡片 + 仿古纸样 + 选中绿圈） —— */
.btpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 12px 0; }
.btpl-card { background: #fff; border-radius: 10px; padding: 9px 9px 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); cursor: pointer; }
.btpl-prev {
  height: 152px; border-radius: 4px; overflow: hidden; padding: 0; box-sizing: border-box;
  background: linear-gradient(160deg, #EBDEBC, #E1CFA0); border: 1px solid #D8C791;
}
/* 真实版式页面截图（shot-tpl.js 生成）：铺满预览框，一眼看出版式差别 */
.btpl-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.btpl-fake { height: 100%; padding: 9px; box-sizing: border-box; }
/* 现代表格式：表格 + 照片块 */
.tp-mod { height: 100%; border: 1.5px solid #6B4A22; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.tp-mod .tpm-r { flex: 1; display: flex; gap: 3px; border: 1px solid rgba(107, 74, 34, .45); padding: 2px; }
.tp-mod .tpm-r i { flex: 1.15; background: #4A3A26; border-radius: 1px; }
.tp-mod .tpm-r span { flex: 1; background: rgba(107, 74, 34, .15); }
/* 苏式：黑块垂珠 + 红吊线 */
.tp-su { height: 100%; padding: 8px 6px 0; display: flex; flex-direction: column; }
/* 横栏式预览（同治老谱定板）：一行 = 世次框 + 名 + 注，行间横线 */
.tp-su .tr { flex: 1; display: flex; align-items: center; gap: 3px; border-top: 1px solid rgba(51, 41, 26, .55); }
.tp-su .tr:first-child { border-top: 0; }
.tp-su .tr i { width: 7px; height: 60%; border: 1.5px double #33291A; }
.tp-su .tr b { width: 4px; height: 55%; background: #33291A; }
.tp-su .tr span { flex: 1; height: 3px; background: rgba(51, 41, 26, .28); }
/* 欧式：竖栏分格 */
.tp-ou { height: 100%; display: flex; border: 1.5px solid #6B4A22; }
.tp-ou .to-c { flex: 1; border-left: 1px solid rgba(107, 74, 34, .45); padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; }
.tp-ou .to-c:first-child { border-left: 0; }
.tp-ou .to-c b { height: 12px; background: #33291A; border-radius: 1px; }
.tp-ou .to-c span { flex: 1; background: rgba(107, 74, 34, .13); }
.btpl-name { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.btpl-name b { font-size: 15.5px; color: #1E1E1E; }
.btpl-ring { margin-left: auto; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #C9C9C9; flex: 0 0 auto; }
.btpl-card.on .btpl-ring { border: 0; background: #2EBD59; color: #fff; text-align: center; line-height: 19px; font-size: 12px; font-style: normal; }
.btpl-desc { font-size: 11px; color: #9A9A9A; margin: 5px 0 0; line-height: 1.55; }
.btpl-note { margin: 12px 18px calc(14px + var(--safe-b)); font-size: 11px; color: #A5A5AB; text-align: center; line-height: 1.8; }

/* ---- 目录管理（族记 1:1）：灰底 + 白行 + 右侧三道拖拽条 + 底部绿色「增加目录项」 ---- */
.tm-io { background: #F4F4F4; padding-bottom: 0; }
.tm-io .io-bar { background: #fff; border-bottom: .5px solid #E6E6E6; }
.tm-io .io-bar .tt { font-size: 17px; }
.tm-io .io-bar .tm-done {
  color: #fff; background: #12C15B; border: 0; border-radius: 6px;
  font-size: 15px; font-weight: 500; padding: 5px 13px; margin-right: 10px;
}
.tm-tip { margin: 0; padding: 11px 15px 9px; font-size: 12.5px; color: #9C9CA1; line-height: 1.5; }
.tm-list { background: #fff; }
.tm-row {
  display: flex; align-items: center; height: 55px; padding: 0 15px;
  border-bottom: .5px solid #EDEDED; background: #fff;
  transition: box-shadow .12s;
}
.tm-row.tm-on { background: #FBFBFB; box-shadow: 0 3px 12px rgba(0, 0, 0, .1); position: relative; z-index: 2; }
.tm-n { flex: 1; font-size: 16px; color: #1A1A1A; line-height: 1.3; }
.tm-hd {
  width: 36px; height: 44px; flex: 0 0 36px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: grab; touch-action: none;
}
.tm-hd b { display: block; width: 18px; height: 2px; background: #C3C3C7; border-radius: 2px; }
/* 显示 / 隐藏（栏目固定，用户 2026-10-20 定：只能调序 + 显隐，不能增删改名） */
.tm-eye {
  flex: 0 0 auto; margin-right: 4px; padding: 4px 9px; border: .5px solid #D6D6D6; border-radius: 5px;
  background: #fff; color: #12C15B; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.tm-row.off .tm-n { color: #B0B0B0; text-decoration: line-through; }
.tm-row.off .tm-eye { color: #9C9CA1; border-color: #E6E6E6; }
/* 显示 / 隐藏（栏目固定 + 只能加文本/相册目录项，用户 2026-10-20 定） */
.tm-eye {
  flex: 0 0 auto; margin-right: 4px; padding: 4px 9px; border: .5px solid #D6D6D6; border-radius: 5px;
  background: #fff; color: #12C15B; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.tm-row.off .tm-n { color: #B0B0B0; text-decoration: line-through; }
.tm-row.off .tm-eye { color: #9C9CA1; border-color: #E6E6E6; }
.tm-add { display: block; width: 100%; height: 55px; border: 0; background: #fff; color: #12C15B; font-size: 16px; cursor: pointer; }
/* 加出来的章节可删（固定栏目没有删除钮） */
.tm-x {
  flex: 0 0 auto; margin-right: 6px; padding: 4px 9px; border: .5px solid #E8C6C0; border-radius: 5px;
  background: #fff; color: #D45B4A; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
/* 增加目录弹层（族记 1:1）：底部两选 + 取消 */
.tmadd-list { padding: 6px 14px calc(16px + var(--safe-b)); }
.tmadd-opt {
  display: block; width: 100%; padding: 15px 0; border: 0; border-bottom: .5px solid #EDEDED;
  background: #fff; color: #1A1A1A; font-family: inherit; font-size: 17px; cursor: pointer;
}
.tmadd-cancel {
  display: block; width: 100%; margin-top: 8px; padding: 14px 0; border: 0; border-radius: 10px;
  background: #F4F4F4; color: #333; font-family: inherit; font-size: 16px; cursor: pointer;
}
/* 输入目录项弹窗（族记 1:1）：标题 + 相册项多一行页数 */
.tmadd-dlg { padding: 20px 20px calc(20px + var(--safe-b)); }
.tmadd-tt { text-align: center; font-size: 17px; font-weight: 600; color: #1A1A1A; }
.tmadd-note { margin: 8px 0 14px; text-align: center; font-size: 12.5px; color: #9C9CA1; }
.tmadd-in {
  border: 1px solid #E4E4E4; border-radius: 8px; padding: 0 12px; margin-bottom: 12px; background: #FAFAFA;
}
.tmadd-in input {
  width: 100%; height: 44px; border: 0; background: transparent; font-family: inherit;
  font-size: 16px; color: #1A1A1A; outline: none;
}
.tmadd-foot { display: flex; border-top: .5px solid #EDEDED; margin: 4px -20px calc(-20px - var(--safe-b)); }
.tmadd-foot button {
  flex: 1; padding: 14px 0; border: 0; background: #fff; color: #1673E6; font-family: inherit;
  font-size: 16px; cursor: pointer;
}
.tmadd-foot button + button { border-left: .5px solid #EDEDED; font-weight: 600; }
/* 相册目录项纸面：标题 + 居中照片 + 说明 */
.bp-pic { font-family: 'Songti SC', STSong, SimSun, serif; display: flex; flex-direction: column; height: 100%; }
.bp-pic-img {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid #E5D9BE; background: #FFFEF8; overflow: hidden;
}
.bp-pic-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bp-pic-img.is-empty span { font-size: 13px; color: #23201B; letter-spacing: 4px; }
.bp-pic-cap { text-align: center; font-size: 11.5px; color: #23201B; letter-spacing: 2px; padding: 8px 0 2px; }

/* ---- 页眉样式选择（族记 1:1）：左缩略图 + 名称/会员 + 右选择圈 ---- */
.hpk-list { background: #fff; }
.hpk-row {
  display: flex; align-items: center; gap: 14px; padding: 15px 15px;
  border-bottom: .5px solid #EDEDED; cursor: pointer;
}
.hpk-row:last-child { border-bottom: 0; }
.hpk-n { flex: 1; font-size: 16px; color: #1A1A1A; display: flex; align-items: center; gap: 7px; }
.hpk-n .vip { flex: 0 0 auto; }
.hpk-ring {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #2EBD59; color: transparent; text-align: center;
  line-height: 22px; font-size: 13px; font-style: normal;
}
.hpk-ring.on { background: #2EBD59; border-color: #2EBD59; color: #fff; }
/* 迷你页缩略图：纯 CSS 画五种页眉的真实位置 */
.hpk-thumb {
  flex: 0 0 84px; width: 84px; height: 118px; background: #fff;
  border: 1px solid #D9D9DE; border-radius: 1px; position: relative; overflow: hidden;
  display: block; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.hpk-thumb .t-in { position: absolute; inset: 6px 9px; display: flex; flex-direction: column; gap: 4px; }
.hpk-thumb .t-ln { display: block; height: 2px; background: #C9C9CE; }
.hpk-thumb .t-title { display: block; width: 40%; height: 3px; background: #8A8A90; margin: 2px auto 3px; }
.hpk-thumb .t-hdr { display: block; height: 2.5px; background: #23201B; margin-top: 8px; }
.hpk-thumb .t-gt {
  position: absolute; top: 6px; bottom: 6px; right: 3px; width: 7px;
  border-left: 1px solid #4A463E; padding-left: 1px;
}
.hpk-thumb .t-gt.l { right: auto; left: 3px; border-left: 0; border-right: 1px solid #4A463E; padding-left: 0; padding-right: 1px; }
.hpk-thumb .t-gt::before {
  content: ''; display: block; width: 3px; height: 34px; background: #23201B; margin: 6px auto 4px;
}
.hpk-thumb .t-gt::after {
  content: ''; display: block; width: 3px; height: 30px; background: #6B665C; margin: 0 auto;
}
.hpk-thumb .t-gt.d { background: #23201B; border-color: #23201B; }
.hpk-thumb .t-gt.d::before { background: #F5F2E8; height: 40px; }
.hpk-thumb .t-gt.d::after { background: #B9B4A6; }



/* 封面页全幅：族记封面顶到纸边，不露出书口金条 */
/* 封面按 A4 纸张比例（210:297），宽随容器、高按比例 */
.book-page.is-cover { padding: 0; min-height: 0; aspect-ratio: 210 / 297; }
.book-page.is-cover::before { display: none; }
.bp-cover { height: 100%; }

/* ---------------- 云端账号（我的页账号卡 + 登录页） ---------------- */
.cl-acc { padding: 14px 14px 13px; }
.cl-acc-h { display: flex; align-items: center; gap: 11px; }
.cl-av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #EFEAD9; color: #8C8574; font-size: 18px; font-weight: 600;
}
.cl-av.on { background: #1F6B54; color: #FFFDF6; font-size: 17px; }
.cl-acc-h .tx { flex: 1 1 auto; min-width: 0; }
.cl-acc-h .tx b { display: block; font-size: 15px; color: #23201B; letter-spacing: .2px; }
.cl-acc-h .tx em {
  display: block; margin-top: 3px; font-size: 11.5px; color: #8C8574;
  font-style: normal; line-height: 1.5;
}
.cl-btns { display: flex; gap: 8px; margin-top: 12px; }
.cl-b {
  flex: 1 1 0; height: 40px; border-radius: 9px; border: 1px solid #D9D2BE;
  background: #FFFDF6; color: #4A463E; font-size: 13.5px; font-weight: 600;
  font-family: inherit; letter-spacing: .3px;
}
.cl-b.main { background: #5C4526; border-color: #5C4526; color: #FFFDF6; }   /* 2026-10-28 版面评审：主色收敛，棕金系全站唯一（绿只留给成功/在线状态） */
.cl-b.tiny {
  flex: 0 0 auto; height: 28px; padding: 0 12px; font-size: 12px; font-weight: 500;
  border-radius: 14px; color: #8C8574;
}
.cl-b.wide { width: 100%; flex: none; margin-top: 4px; }
.cl-b:active { opacity: .78; }
.cl-note {
  margin-top: 10px; font-size: 11px; color: #B0A996; line-height: 1.6; text-align: center;
}

/* 登录页表单 */
.lg-f { margin-bottom: 13px; }
.lg-f label { display: block; font-size: 12px; color: #8C8574; margin-bottom: 6px; letter-spacing: .3px; }
.lg-f input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
  border: 1px solid #D9D2BE; border-radius: 9px; background: #FFFDF6;
  font-size: 15px; color: #23201B; font-family: inherit; letter-spacing: .6px;
}
.lg-f input:focus { outline: none; border-color: #1F6B54; }
.lg-row { display: flex; gap: 8px; }
.lg-row input { flex: 1 1 auto; min-width: 0; }
.lg-code {
  flex: 0 0 auto; height: 44px; padding: 0 13px; border-radius: 9px;
  border: 1px solid #1F6B54; background: #FFFDF6; color: #1F6B54;
  font-size: 12.5px; font-weight: 600; font-family: inherit; white-space: nowrap;
}
.lg-code:active { opacity: .7; }
.lg-tip { font-size: 12px; color: #C4692A; margin: -4px 0 12px; line-height: 1.6; }
.lg-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.lg-or i { flex: 1 1 auto; height: 1px; background: #E6DFCC; }
.lg-or span { font-size: 11px; color: #B0A996; }

/* —— 会员（照族记 2026-10-23 截图 1:1：金渐变等级卡/四档类型卡/双列绿勾权益/底部联系管理员） —— */
.mb-user { display:flex; align-items:center; gap:10px; padding:14px 16px 8px; }
.mb-user .av { width:44px; height:44px; }
.mb-user b { font-size:16px; color:#3B3226; }
.mb-hero { margin:6px 14px; padding:18px 18px; border-radius:12px 12px 4px 4px;
  background:linear-gradient(135deg,#D3AC72,#BC9355 60%,#C9A468); color:#FFF;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 6px 16px rgba(180,140,80,.28); }
.mb-hero span { font-size:19px; font-weight:700; letter-spacing:1px; }
.mb-hero em { font-style:normal; font-size:12px; opacity:.92; }
.mb-sec { padding:16px 16px 8px; }
.mb-sh { font-size:15px; font-weight:700; color:#3B3226; }
/* 四档类型卡（2026-10-29 用户定：一排放得下 4 个，不要拉滚条）：改 4 列等宽网格，
   档位与容量分两行，83px 窄卡也不挤 */
.mb-types { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:4px 16px 14px; }
/* 四档卡（2026-10-29 用户定：颜色要突出、像首页按钮一样加边框）
   照首页 .hs-btns 那套——白底 + 米色实边 + 圆角，档名用宫格的金色加粗 */
.mb-type { position:relative; min-width:0; text-align:center;
  padding:13px 3px 11px; border-radius:10px; background:#FFF; border:1px solid #E2DAC6;
  box-shadow:0 1px 3px rgba(60,45,20,.04); }
.mb-type b { display:block; font-size:13.5px; font-weight:700; color:#8C6A2F; margin-bottom:5px; letter-spacing:.5px; }
.mb-type em { display:block; font-style:normal; font-size:11px; line-height:1.5; color:#8A8274; }
.mb-type.cur { background:#FBF4E6; border-color:#B8925A; box-shadow:0 0 0 1px #B8925A, 0 2px 6px rgba(140,106,47,.12); }
.mb-type.cur b { color:#6B4E1E; }
.mb-ck { position:absolute; top:-1px; right:-1px; width:20px; height:20px;
  border-radius:0 10px 0 10px; background:#C9A063; color:#FFF; font-size:12px;
  font-style:normal; line-height:20px; text-align:center; }
.mb-bt { display:flex; align-items:center; gap:12px; margin:14px 24px 12px;
  color:#B8925A; font-size:15px; font-weight:700; }
.mb-bt::before, .mb-bt::after { content:''; flex:1; height:1px; background:#E2D6BC; }
.mb-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; padding:2px 22px 18px; }
.mb-li { display:flex; align-items:center; gap:7px; font-size:13px; color:#4A4234; }
.mb-li i { font-style:normal; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:1.5px solid #3C9E5F; color:#3C9E5F; font-size:11px; line-height:16px; text-align:center; }
/* 权益脚注：把升档理由收窄到容量（2026-10-29） */
.mb-note { margin:0 22px 16px; padding:9px 11px; border-radius:8px; background:#FBF6EA;
  border:1px solid #EDE1C8; font-size:12px; line-height:1.65; color:#8A8071; }
/* 本档专属（统谱）：一条一行，标题加粗 + 说明，长文案允许折行 */
.mb-footbar { position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom)); background:#F7F3EA;
  border-top:1px solid #EAE2D2; }
.mb-btn { flex:1; border:none; border-radius:8px; padding:12px 16px; font-size:15px;
  font-weight:700; color:#FFF; background:#E8934A; }
.mb-btn.wide { width:auto; }
/* 我的页会员入口卡 */
.mb-entry { display:flex; align-items:center; gap:12px; padding:13px 14px; }
.mb-tag { flex:0 0 auto; font-size:11px; font-weight:700; color:#8A6B33;
  background:linear-gradient(135deg,#EED9AE,#D9BC82); padding:3px 8px; border-radius:4px; }
.mb-ei { flex:1; min-width:0; }
.mb-ei b { display:block; font-size:14px; color:#3B3226; }
.mb-ei em { font-style:normal; font-size:12px; color:#9B9284; }
.mb-go { font-style:normal; color:#C8BEA9; font-size:20px; }
/* 管理员分配面板 */
.mb-assign { margin:6px 14px 14px; padding:14px; border-radius:10px;
  background:#FFF; border:1px dashed #C9A063; }
.mb-assign .mb-sh { font-size:13px; color:#8A6B33; margin-bottom:10px; }
.mb-ar { display:flex; gap:8px; margin-bottom:8px; }
.mb-ar input, .mb-ar select { flex:1; min-width:0; padding:9px 10px; border:1px solid #DDD3C0;
  border-radius:8px; font-size:13px; background:#FFFDF8; color:#3B3226; }
.mb-assign .mb-btn { padding:10px; font-size:14px; }
.mb-dbid { font-size:11px; color:#9B9284; line-height:1.8; margin-top:6px; }

/* —— 谱缘功能横幅（首页·续修进度下方，零图片 CSS 渐变范式） —— */
.gd-btx b { display:block; font-size:16px; letter-spacing:.5px; }
.gd-btx em { font-style:normal; font-size:11.5px; opacity:.92; line-height:1.6; }
.gd-bgo b { font-size:13.5px; }
.gd-bgo span { font-size:11.5px; opacity:.88; }

/* —— 使用功能说明页（图文模式） —— */
.gd-hero { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px 16px;
  background:linear-gradient(160deg,#8C6A2F,#C09A55); color:#FFF; text-align:center; }
.gd-hero span { font-size:34px; }
.gd-hero span svg { width:34px; height:34px; stroke-width:1.4; }
.gd-hero b { font-size:18px; letter-spacing:1px; }
.gd-hero em { font-style:normal; font-size:12px; opacity:.9; }
.gd-sec { margin:12px 14px 0; border-radius:10px; background:#FFF; border:1px solid #EAE2D2; overflow:hidden; }
.gd-sh { display:flex; align-items:center; gap:9px; padding:12px 14px;
  background:#F7F1E4; border-bottom:1px solid #EFE7D6; }
.gd-sh span { font-size:20px; width:26px; height:26px; flex:0 0 26px; border-radius:7px;
  background:#FFF; border:1px solid #E9DDC4; color:#8C6A2F;
  display:flex; align-items:center; justify-content:center; }
.gd-sh span svg { width:16px; height:16px; }
.gd-sh b { font-size:15px; color:#3B3226; }
.gd-row { display:flex; gap:10px; padding:11px 14px; border-bottom:1px dashed #F0EADA; }
.gd-row:last-child { border-bottom:none; }
.gd-row i { flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:#F5EFE2;
  font-style:normal; font-size:15px; font-weight:700; color:#8A5A2B;
  display:flex; align-items:center; justify-content:center; }
.gd-tx b { display:block; font-size:13.5px; color:#3B3226; }
.gd-tx em { font-style:normal; font-size:12px; color:#8D8371; line-height:1.65; }
.gd-foot { text-align:center; padding:16px 14px 22px; font-size:13px; color:#8D8371; }
.gd-foot button { border:none; background:none; color:#8C6A2F; font-weight:700; font-size:13px; padding:0 2px; }

/* —— 推广合作（代理制度阶段0：招募页 + 客服页底部低调入口；页面无佣金/返利类字样） —— */
.ag-entry { display:flex; align-items:center; gap:8px; width:calc(100% - 28px); margin:6px 14px 16px;
  padding:12px 14px; border:1px dashed #C9A063; border-radius:10px; background:#FBF7EC;
  font-size:13px; color:#8D8371; text-align:left; }
.ag-entry b { color:#8C6A2F; font-size:13.5px; }
.ag-hero { display:flex; flex-direction:column; align-items:center; gap:4px; padding:24px 16px 18px;
  background:linear-gradient(160deg,#5C6E3C,#7E9354); color:#FFF; text-align:center; }
.ag-hero span { font-size:36px; }
.ag-hero b { font-size:19px; letter-spacing:1px; }
.ag-hero em { font-style:normal; font-size:12px; opacity:.92; }
.ag-sec { margin:12px 14px 0; border-radius:10px; background:#FFF; border:1px solid #EAE2D2;
  padding:12px 14px; }
.ag-sh { font-size:14.5px; font-weight:700; color:#3B3226; margin-bottom:10px; }
.ag-row { display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed #F0EADA; }
.ag-row:last-child { border-bottom:none; padding-bottom:2px; }
.ag-row i { flex:0 0 auto; width:36px; height:36px; border-radius:9px; background:#EFF3E6;
  font-style:normal; font-size:17px; display:flex; align-items:center; justify-content:center; }
.ag-tx b { display:block; font-size:13.5px; color:#3B3226; }
.ag-tx em { font-style:normal; font-size:12px; color:#8D8371; line-height:1.65; }
.ag-give { display:grid; grid-template-columns:1fr 1fr; gap:9px 8px; }
.ag-give span { display:flex; align-items:center; gap:6px; font-size:12.5px; color:#4A4234; }
.ag-give i { flex:0 0 auto; font-style:normal; width:16px; height:16px; border-radius:50%;
  background:#5C6E3C; color:#FFF; font-size:10px; line-height:16px; text-align:center; }
.ag-ways { margin:14px 14px 0; padding:13px 15px; border-radius:10px; background:#F5F1E6; }
.ag-ways b { display:block; font-size:13.5px; color:#3B3226; }
.ag-ways em { font-style:normal; font-size:12px; color:#8D8371; line-height:1.7; }
.ag-foot { padding:16px 14px 22px; }
.ag-foot button { width:100%; border:none; border-radius:9px; padding:13px; font-size:15px;
  font-weight:700; color:#FFF; background:#E8934A; }

/* —— 身份徽章（我的页/会员页头像区：会员等级 + 平台运营，2026-10-24） —— */
.it-mem { flex:0 0 auto; display:inline-block; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px; color:#8D8371; background:#EFEAE0; }
.it-mem.on { color:#6B4E1E; background:linear-gradient(135deg,#F2DFB2,#DFC185); }
.it-op { flex:0 0 auto; display:inline-block; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px; color:#FFF; background:#5C6E3C; }
.mb-user .it-mem, .mb-user .it-op { margin-left:2px; }

/* —— 推广代理（2026-10-24）：申请表单 / 后台审批 / 专属链接 / 代理徽章 —— */
.it-ag { flex:0 0 auto; display:inline-block; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px; color:#FFF; background:linear-gradient(135deg,#E8934A,#D97B2E); }
.ag-oktip { display:block; font-style:normal; font-size:12px; color:#8D8371; line-height:1.7; margin-bottom:8px; }
.ag-oktip b { color:#8C6A2F; }
.ag-form { display:flex; flex-direction:column; gap:8px; }
.ag-form input { padding:10px 12px; border:1px solid #DDD3C0; border-radius:8px;
  font-size:13px; background:#FFFDF8; color:#3B3226; }
.ag-form button { border:none; border-radius:8px; padding:11px; font-size:14px;
  font-weight:700; color:#FFF; background:#5C6E3C; }
.ag-ok { background:#FBF7EC; border-color:#C9A063; }
.ag-link { display:flex; align-items:center; gap:8px; }
.ag-link span { flex:1; min-width:0; font-size:11.5px; color:#6B4E1E; background:#F5EFE2;
  border-radius:6px; padding:8px 10px; word-break:break-all; }
.ag-link button { flex:0 0 auto; border:none; border-radius:7px; padding:9px 12px;
  font-size:12.5px; font-weight:700; color:#FFF; background:#E8934A; }
.ag-admin { border-style:dashed; border-color:#5C6E3C; }
.ag-admin .ag-sh { color:#5C6E3C; }
.ag-ar { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed #F0EADA; }
.ag-ar:last-child { border-bottom:none; }
.ag-ar .tx { flex:1; min-width:0; }
.ag-ar .tx b { display:block; font-size:13px; color:#3B3226; }
.ag-ar .tx em { font-style:normal; font-size:11.5px; color:#8D8371; }
.ag-ar .td-do { border:none; border-radius:7px; padding:7px 12px; font-size:12.5px;
  font-weight:700; color:#FFF; background:#5C6E3C; }

/* ================= 建谱 tab：树谱/册谱/首页 胶囊（2026-10-25） ================= */
.jn-seg { flex: 0 0 auto; display: flex; gap: 6px; margin: 10px 14px 0; padding: 4px;
  background: #F1EBDC; border-radius: 12px; z-index: 5; }
.jn-seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 0;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #6B5F49; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px; }
.jn-seg button svg { width: 15px; height: 15px; }
.jn-seg button.on { background: #5C4526; color: #F6EFDE; }
/* 到期 / 已暂停提示条（2026-11-04 后台可设）：只提示，不动数据 */
.clan-alert { margin: 10px 14px 0; padding: 10px 12px; border-radius: 10px;
  background: #FBF0E4; border: 1px solid #E8CDA8; color: #8A5A2B; font-size: 12.5px;
  line-height: 1.7; }

/* ================= 总平台首页（2026-10-25） ================= */
/* 2026-10-30：封面底加圆角，与下方卡片区脱开（原来是 148px 处一刀切，卡片像贴纸） */
.pf-cover { background: linear-gradient(150deg, #F6EFDE, #EFE3C6 55%, #E6D4AE); min-height: 148px;
  border-radius: 0 0 22px 22px; }
.pf-name { position: relative; z-index: 1; margin-top: 10px; text-align: center; padding-left: 5px;
  font-family: 'Songti SC', STSong, SimSun, serif; font-size: 24px; font-weight: 800;
  letter-spacing: 5px; color: #4A3A26; text-shadow: 0 2px 8px rgba(74, 58, 38, .18); }
.pf-slogan { position: relative; z-index: 1; margin-top: 6px; text-align: center;
  font-size: 12.5px; letter-spacing: 1.5px; color: rgba(74, 58, 38, .72); }
.pf-continue { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px auto 0; min-width: 197px; min-height: 44px; border: 1px solid #5C4526; background: #5C4526;
  border-radius: 12px; padding: 10px 20px; font-family: inherit; font-size: 14px; font-weight: 700;
  color: #F6EFDE; cursor: pointer; box-shadow: 0 3px 10px rgba(74, 58, 38, .22); }
.pf-continue svg { width: 14px; height: 14px; color: #F6EFDE; }
.pf-biz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 16px 0; }
.pf-card { position: relative; border: 1px solid #E7E1D3; background: #fff; border-radius: 13px;
  padding: 11px 11px 9px; text-align: left; font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 6px rgba(60, 45, 20, .05); }
.pf-card .pf-ic { display: flex; width: 30px; height: 30px; border-radius: 9px;
  background: #F5EFE2; color: #8C6A2F; align-items: center; justify-content: center; }
.pf-card .pf-ic svg { width: 16px; height: 16px; }
.pf-card b { display: block; margin-top: 6px; font-size: 14px; color: #4A3A26; }
.pf-card em { display: block; margin-top: 4px; font-style: normal; font-size: 12px;
  line-height: 1.55; color: #7A6F5C; }   /* 2026-10-28 版面评审：10.5px/#8D8371 对比度不足且 3.8em 硬截；放开由内容撑，grid 行内等高 */
/* 2026-10-30：六卡右上「›」撤掉（六处重复、#C9C0AE 对比度 1.8:1 不达标，点击反馈交给 :active） */
/* 2026-10-28 用户定：图标与卡名同一行（原为上下两行，白占 26px 卡高）。
   纯 grid 实现，不动 HTML 结构；描述整宽排第二行（只占第 2 列会让文字变窄、行数反增） */
.pf-card { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; }
.pf-card .pf-ic { grid-row: 1; grid-column: 1; }
.pf-card b { grid-row: 1; grid-column: 2; margin-top: 0; }
.pf-card em { grid-row: 2; grid-column: 1 / -1; margin-top: 7px; }
.pf-sec { margin: 18px 14px 8px; display: flex; align-items: baseline; gap: 8px; }
.pf-sec b { font-size: 14.5px; color: #4A3A26; }
.pf-sec em { font-style: normal; font-size: 11px; color: #B0A996; }
.pf-list { margin: 0 14px; }
.pf-list .ic svg { width: 17px; height: 17px; color: #8C6A2F; }
/* 页脚三句（2026-10-30）：细线 + 三段，11.5px #7A7060（原单行 12px #8C8272 对比度 3.6:1 不达 4.5:1） */
.pf-foot { text-align: center; margin: 26px 16px 0; padding-top: 14px;
  border-top: 1px solid #EDE5D4; font-size: 11.5px; color: #7A7060; letter-spacing: .3px;
  line-height: 1.9; }

/* ================= 老谱数字化：服务页 + 工作台（2026-10-25） ================= */
.io.dg { padding-bottom: 26px; }
.dg-hero { margin: 12px 14px 0; border-radius: 14px; padding: 22px 18px;
  background: linear-gradient(150deg, #F6EFDE, #E6D4AE); }
.dg-hero b { display: block; font-family: 'Songti SC', STSong, SimSun, serif;
  font-size: 21px; font-weight: 800; letter-spacing: 2px; color: #4A3A26; }
.dg-hero em { display: block; margin-top: 8px; font-style: normal; font-size: 12px;
  line-height: 1.7; color: rgba(74, 58, 38, .72); }
.dg-sec { margin: 18px 14px 8px; display: flex; align-items: baseline; gap: 8px; }
.dg-sec b { font-size: 14.5px; color: #4A3A26; }
.dg-sec em { font-style: normal; font-size: 11px; color: #B0A996; }
/* 服务页说明（2026-10-28 精简版：页面只留一句半说明 + 客服入口） */
.dg-mini { margin: 14px 14px 0; font-size: 12.5px; line-height: 1.85; color: #6B5F49; }
.dg-tip { margin: 16px 14px 0; padding: 11px 13px; border-radius: 10px; background: #F5EFE2;
  font-size: 11.5px; line-height: 1.7; color: #6B5F49; }
.dg-cta { display: flex; gap: 9px; margin: 16px 14px 0; }
.dg-cta button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(74, 58, 38, .28); background: rgba(255, 255, 255, .6); border-radius: 10px;
  padding: 11px 0; font-family: inherit; font-size: 13px; font-weight: 600; color: #4A3A26; cursor: pointer; }
.dg-cta button svg { width: 14px; height: 14px; }
.dg-cta button.pri { background: #5C4526; border-color: #5C4526; color: #F6EFDE; }
.dg-wx { margin: 10px 0 0; text-align: center; font-size: 12px; color: #8D8371; }
.dg-wx b { color: #8C6A2F; font-weight: 700; }
/* 修谱页内容扩充（2026-10-29 用户定）：服务四卡 / 七步流程 / 个性化电子版 / 交付清单 */
.dg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 14px; }
.dg-card { padding: 13px 12px; border-radius: 12px; background: #FFFDF6; border: 1px solid #EFE9DA; }
.dg-card b { display: block; font-size: 13px; color: #4A3A26; letter-spacing: .3px; }
.dg-card em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; line-height: 1.7; color: #8D8371; }
.dg-steps { margin: 0 14px; padding: 0; list-style: none; counter-reset: dgs; }
.dg-steps li { position: relative; padding: 0 0 13px 30px; counter-increment: dgs; }
.dg-steps li:last-child { padding-bottom: 0; }
.dg-steps li::before { content: counter(dgs); position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
  border-radius: 50%; background: #F5EFE2; color: #8C6A2F; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.dg-steps li::after { content: ''; position: absolute; left: 9px; top: 22px; bottom: 3px; width: 1px; background: #E8DFC9; }
.dg-steps li:last-child::after { display: none; }
.dg-steps b { display: block; font-size: 13px; color: #3B3226; }
.dg-steps em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.75; color: #8D8371; }
.dg-panel { margin: 0 14px; padding: 13px 14px 3px; border-radius: 12px; background: #FFFDF6; border: 1px solid #EFE9DA; }
.dg-panel dl { margin: 0; }
.dg-panel dt { font-size: 12.5px; font-weight: 600; color: #4A3A26; }
.dg-panel dd { margin: 3px 0 10px; font-size: 11.5px; line-height: 1.75; color: #8D8371; }
.dg-list { margin: 0 14px; padding: 0 0 0 2px; list-style: none; }
.dg-list li { position: relative; padding: 0 0 7px 15px; font-size: 12.5px; line-height: 1.75; color: #6B5F49; }
.dg-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #C9B583; }
/* ================= AI 问谱（2026-10-26）：专家对话页 ================= */
.io.aiqa { display: flex; flex-direction: column; min-height: calc(100vh - 56px); padding-bottom: 12px; }
.aqa-list { flex: 1; padding: 14px 14px 4px; overflow-y: auto; }
.aqa-empty { margin: 26px auto 0; max-width: 300px; text-align: center; }
.aqa-empty b { display: block; font-size: 15px; color: #4A3A26; }
.aqa-empty em { display: block; margin-top: 9px; font-style: normal; font-size: 12px; line-height: 1.8; color: #8D8371; }
.aqa-m { display: flex; gap: 8px; margin-bottom: 11px; align-items: flex-start; }
.aqa-m i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #F5EFE2; color: #8C6A2F;
  font-style: normal; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aqa-m .tx { max-width: 78%; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word; }
.aqa-m.ai .tx { background: #FFFDF6; border: 1px solid #EFE9DA; color: #3B3226; border-top-left-radius: 4px; }
.aqa-m.me { flex-direction: row-reverse; }
.aqa-m.me i { background: #5C4526; color: #F6EFDE; }
.aqa-m.me .tx { background: #5C4526; color: #F6EFDE; border-top-right-radius: 4px; }
.aqa-typing { color: #B0A996; }
.aqa-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 0; }
.aqa-quick button { border: 1px solid rgba(140, 106, 47, .35); background: rgba(255, 253, 246, .9);
  border-radius: 15px; padding: 6px 12px; font-family: inherit; font-size: 12px; color: #8C6A2F; cursor: pointer; }
.aqa-bar { display: flex; gap: 8px; margin: 10px 14px 0; }
.aqa-bar input { flex: 1; border: 1px solid #E4DCC8; border-radius: 11px; background: #FFFDF6;
  padding: 11px 13px; font-family: inherit; font-size: 13.5px; color: #3B3226; outline: none; }
.aqa-bar input:focus { border-color: #8C6A2F; }
.aqa-bar button { flex: 0 0 auto; border: 0; border-radius: 11px; background: #5C4526; color: #F6EFDE;
  padding: 0 18px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.aqa-bar button:disabled { opacity: .55; }
.aqa-note { margin: 8px 0 0; text-align: center; font-size: 10.5px; color: #B0A996; }
.aqa-tools { padding: 8px 14px 0; display: flex; gap: 8px; }
.aqa-tools button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; justify-content: center;
  border: 1px dashed rgba(140, 106, 47, .45); background: rgba(246, 239, 222, .55); border-radius: 11px;
  padding: 9px 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #8C6A2F; cursor: pointer; }
.aqa-tools button svg { width: 14px; height: 14px; }
/* 纪年换算页（挂在 AI 问谱下） */
.era-row { display: flex; gap: 8px; margin: 4px 14px 6px; }
.era-row select, .era-row input { flex: 1; min-width: 0; border: 1px solid #E4DCC8; border-radius: 10px;
  background: #FFFDF6; padding: 10px 11px; font-family: inherit; font-size: 13.5px; color: #3B3226; outline: none; }
.era-row input:focus, .era-row select:focus { border-color: #8C6A2F; }
.era-row button { flex: 0 0 auto; border: 0; border-radius: 10px; background: #5C4526; color: #F6EFDE;
  padding: 0 15px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.era-res { margin: 0 14px 4px; padding: 10px 12px; border-radius: 10px; background: #F5EFE2;
  font-size: 13px; line-height: 1.8; color: #6B5F49; }
.era-res b { color: #8C6A2F; }
/* AI 写小传页（2026-10-26，挂在 AI 问谱下） */
.bio .era-row { flex-wrap: wrap; }
.era-row textarea { flex: 1 1 100%; border: 1px solid #E4DCC8; border-radius: 10px; background: #FFFDF6;
  padding: 10px 11px; font-family: inherit; font-size: 13.5px; color: #3B3226; outline: none; resize: vertical; line-height: 1.6; }
.era-row textarea:focus { border-color: #8C6A2F; }
.bio-len { flex: 1; border: 1px solid #E4DCC8; background: #F5EFE2; border-radius: 10px; padding: 10px 6px;
  font-family: inherit; font-size: 12px; color: #8C6A2F; cursor: pointer; }
.bio-len.on { background: #8C6A2F; color: #fff; border-color: #8C6A2F; }
.bio .era-row button.pri { flex: 0 0 auto; background: #5C4526; color: #F6EFDE; }
.bio .era-row button.pri[disabled] { opacity: .6; }
.bio .era-row [data-act="bio-copy"], .bio .era-row [data-act="bio-reset"] { flex: 1; background: #F5EFE2; color: #6B5F49; }
.bio-out { margin: 0 14px 8px; border: 1px dashed #C9B98F; background: #FFFDF6; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.9; color: #3B3226; white-space: pre-wrap; }
.dg-stats { display: flex; gap: 6px; margin: 12px 14px 10px; flex-wrap: wrap; }
.dg-chip { padding: 5px 11px; border-radius: 13px; background: #F5EFE2; font-size: 11px; color: #6B5F49; }
.dg-chip b { color: #8C6A2F; font-weight: 700; }
.dg-ic svg { width: 16px; height: 16px; }
.dg-kv { display: flex; justify-content: space-between; gap: 10px; margin: 0 14px; padding: 9px 2px;
  border-bottom: .5px solid #EFE9DA; font-size: 12.5px; }
.dg-kv span { color: #8D8371; }
.dg-kv b { color: #3B3226; font-weight: 600; }
.dg-flow { display: flex; align-items: center; gap: 5px; margin: 14px 14px 0; }
.dg-flow i { font-style: normal; font-size: 11px; padding: 4px 9px; border-radius: 12px;
  background: #F1EBDC; color: #9A9078; }
.dg-flow i.on { background: #8C6A2F; color: #FFF; }
.dg-flow em { font-style: normal; color: #D3CBB6; font-size: 11px; }
.dg-next { display: block; width: calc(100% - 28px); margin: 12px 14px 0; border: 0; border-radius: 10px;
  padding: 11px 0; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #FFF;
  background: #5C4526; cursor: pointer; }
.dg-done { margin: 12px 14px 0; text-align: center; padding: 10px 0; border-radius: 10px;
  background: #F5EFE2; color: #8C6A2F; font-size: 13px; font-weight: 700; }
.dg-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 6px; }
.dg-thumb { position: relative; flex: 0 0 96px; height: 128px; border-radius: 9px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: #EFE9DA; }
.dg-thumb.on { border-color: #8C6A2F; }
.dg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-x { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #FFF; font-style: normal; font-size: 10px;
  display: flex; align-items: center; justify-content: center; }
.dg-add { flex: 0 0 96px; height: 128px; border: 1.5px dashed #C9BC9E; border-radius: 9px;
  background: none; color: #8C6A2F; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; font-family: inherit; cursor: pointer; }
.dg-add svg { width: 20px; height: 20px; }
.dg-add em { font-style: normal; font-size: 11.5px; }
.dg-ai { display: block; width: calc(100% - 28px); margin: 2px 14px 0; border: 1px solid rgba(140, 106, 47, .38);
  background: #F5EFE2; border-radius: 10px; padding: 10px 0; font-family: inherit; font-size: 13px;
  font-weight: 600; color: #8C6A2F; cursor: pointer; }
.dg-ta { display: block; width: calc(100% - 28px); margin: 10px 14px 0; height: 150px; resize: vertical;
  border: 1px solid #E7E1D3; border-radius: 10px; padding: 11px 12px; font-family: inherit;
  font-size: 13px; line-height: 1.8; color: #3B3226; background: #fff; }
.dg-btns { display: flex; gap: 8px; margin: 10px 14px 0; }
.dg-btns button { flex: 1; border: 1px solid rgba(74, 58, 38, .28); background: rgba(255, 255, 255, .6);
  border-radius: 9px; padding: 9px 0; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #4A3A26; cursor: pointer; }
.dg-btns button.pri { background: #5C4526; border-color: #5C4526; color: #F6EFDE; }
.dg-simp { margin: 12px 14px 0; padding: 12px 13px; border-radius: 10px; background: #F5EFE2;
  font-size: 12.5px; line-height: 1.8; color: #3B3226; white-space: pre-wrap; }
.pf-notice { display: flex; align-items: center; gap: 7px; width: calc(100% - 28px); margin: 10px 14px 0;
  border: 1px dashed #C9B585; border-radius: 10px; padding: 8px 12px; background: #FBF6E9;
  color: #8C6A2F; font-size: 12.5px; text-align: left; }
.pf-notice svg { width: 14px; height: 14px; flex: none; }

.dg-simp b { display: block; margin-bottom: 5px; font-size: 11px; color: #8C6A2F; }

/* ================= 总平台首页封面大图闪切（2026-10-25 用户定，仅总平台首页）
   第 1 张 = 品牌封面（米金常显层），第 2 张 = 修谱服务（.bn-ov 8s 轮现）。
   2026-10-28 用户定：「两张内容/底色可以不同，但文字排列必须一致」——
   原第 2 张是居中排版、字距 4px，且不透明底色把「谱缘」「齿轮」「底部深色按钮」整片盖掉，
   切换时骨架跳变。现改为：.hm-top 与第 2 张的文案/按钮全部对齐第 1 张同一基线，
   谱缘+齿轮浮到轮播层之上（z9），两张图都看得见；文字块左对齐 18px、标题字距 5px、
   按钮同尺寸同位（197×44 深棕实底）。
   替换走后台：下发 D.banners（[{img:'图片网址'}]）即整图闪切，页面无用户编辑入口 ================= */
.bn-ov { position: absolute; inset: 0; z-index: 6; text-align: center; cursor: pointer;
  padding: calc(var(--safe-t) + 14px) 18px 16px;
  animation: bnOv 8s infinite; }
@keyframes bnOv { 0%, 44% { opacity: 0; visibility: hidden; } 50%, 94% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.bn-gold { background: linear-gradient(150deg, #F3EAD2, #E9D9B2 55%, #DBC28C); color: #4A3A26; }
/* 标题基线 = 第 1 张 .pf-name（safe-t + 14 + 40 hm-top + 10 margin）；字距与 .pf-name 统一 5px */
.bn-tx { position: absolute; left: 18px; right: 18px; top: calc(var(--safe-t) + 64px); z-index: 1; min-width: 0; }
.bn-tx b { display: block; font-family: 'Songti SC', STSong, SimSun, serif;
  font-size: 24px; font-weight: 800; letter-spacing: 5px; line-height: 27px;
  text-shadow: 0 2px 8px rgba(74, 58, 38, .14); }
.bn-tx em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px;
  letter-spacing: 1.5px; line-height: 16px; color: rgba(74, 58, 38, .72); }
/* 按钮与第 1 张 .pf-continue 同规格同位：197×44 深棕实底，水平居中。
   注意定位父级是 .bn-tx（也是 absolute，top=64px），故 61px = 第 1 张按钮的 125px − 64px */
.bn-cta { position: absolute; left: 50%; transform: translateX(-50%); top: 61px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 197px; min-height: 44px; padding: 0 20px;
  border: 1px solid #5C4526; background: #5C4526; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #F6EFDE; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(74, 58, 38, .22); }
.bn-cta svg { width: 14px; height: 14px; color: #F6EFDE; }
.bn-art { position: absolute; right: 4px; bottom: 4px; opacity: .08; pointer-events: none; }
/* 谱缘 + 齿轮浮到轮播层之上：两张图都保留这两处固定骨架 */
.pf-cover .hm-top { z-index: 9; }
.bn-art svg { width: 104px; height: 104px; }
.bn-ov.bn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ================= 我的页重排（2026-10-25 参照族记「我的」页）
   三组：常用功能四宫格 / 族谱服务 / 帮助与设置；图标全 SVG 线条，金棕 on 米色砖 ================= */
.mf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 14px 6px; }
.mf-it { display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 4px 2px; font-family: inherit; cursor: pointer; min-width: 0; }
.mf-ic { width: 44px; height: 44px; border-radius: 13px; background: #F5EFE2; color: #8C6A2F;
  display: flex; align-items: center; justify-content: center; }
.mf-ic svg { width: 22px; height: 22px; }
.mf-it b { font-size: 12px; font-weight: 600; color: #3B3226; }
.mf-it em { font-style: normal; font-size: 10px; color: #B0A996; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .ic svg { width: 18px; height: 18px; color: #8C6A2F; }

/* ================= 谱缘号 chip（2026-10-25 用户定）：我的页名字后面，点一下复制 ================= */
.py-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
  vertical-align: 2px; border: 0; background: #F5EFE2; border-radius: 10px;
  padding: 2.5px 8px; font-family: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; color: #8C6A2F; cursor: pointer; }
.py-chip svg { width: 11px; height: 11px; }

/* ===== 寻根地图（2026-10-26）===== */
.pm #pmap_v { height: 340px; border-radius: 14px; margin: 10px 12px 0; overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 58, 38, .12); background: #F5EFE2; }
.pm-tip { font-size: 12px; color: #8C6A2F; margin: 8px 16px 4px; }
.pm-row { display: flex; align-items: center; gap: 10px; background: #FFFDF6;
  border: 1px solid #EDE3CC; border-radius: 12px; padding: 10px 14px; margin: 8px 12px; }
.pm-row .tx b { display: block; font-size: 15px; color: #4A3A26; }
.pm-row .tx b em { font-weight: 400; font-size: 11px; color: #8C6A2F; margin-left: 6px; }
.pm-row .tx i { font-style: normal; font-size: 12px; color: #9A8A6E; display: block; margin-top: 2px; }
.pm-row .n { margin-left: auto; font-size: 20px; font-weight: 700; color: #8C6A2F; white-space: nowrap; }
.pm-row .n u { text-decoration: none; font-size: 11px; font-weight: 400; margin-left: 2px; }
.pm-err { line-height: 340px; text-align: center; color: #9A8A6E; font-size: 13px; }

/* ===== 竞品 Top3（2026-10-26）：批量导入 / 族谱体检 / 农历生日 ===== */
/* 2026-10-28 晚 用户定：宫格 12 格，每行 4 个（4 列×3 排）——原来这里是 5 列，覆盖了上面的 base 4 列。
   12 格比 15 格少一排的宽度压力，4 列下每格 11.5px 标签也不挤。 */
.hm-grid { grid-template-columns: repeat(4, 1fr); }
.im-row { background: #FFFDF6; border: 1px solid #EDE3CC; border-radius: 12px;
  padding: 10px 14px; margin: 8px 12px; }
.im-row b { font-size: 15px; color: #4A3A26; margin-right: 8px; }
.im-row span { font-size: 12px; color: #6B5B40; }
.im-row i { font-style: normal; display: block; margin-top: 4px; font-size: 11.5px; color: #B0432C; }
.im-row i.ok { color: #8C6A2F; }
.im-row.bad { border-color: #E4B7A8; background: #FDF6F2; }
.pm-btn { display: block; width: calc(100% - 24px); margin: 14px 12px 6px; padding: 12px 0;
  border: 0; border-radius: 12px; background: #5C4526; color: #FFFDF6; font-size: 15px; font-weight: 700; }
.pm-btn.ghost { background: none; color: #8C6A2F; border: 1px solid #D8C9A6; font-weight: 400; }
.pm-btn[disabled] { opacity: .45; }

/* ================= 祠堂首页 + 子页（2026-10-26） =================
   色系跟着全站走宣纸米色：底 #FBF8F0，字 #4A3A26，点缀金棕 #8C6A2F，主按钮深棕 #5C4526。
   祠堂是「族谱的门面」，所以首页给一张大封面，菜单做成两列大卡（长辈点得准）。 */
.sh-hm { background: #FBF8F0; min-height: 100%; padding-bottom: 18px; }
.sh-hm .sh-bar { background: #F6EFDE; color: #4A3A26; border-bottom: 1px solid #E8DEC5; }
.sh-hm .sh-bar .bk, .sh-hm .sh-bar .rt { color: #4A3A26; }
.sh-hm .sh-bar .sh-ic { display: flex; align-items: center; margin: 0 10px; color: #8C6A2F; }
.sh-hm .sh-bar .sh-ic svg { width: 19px; height: 19px; }

/* 封面：一张大图 + 底部压一层米金渐变放堂号 */
.sh-cover { position: relative; margin: 0; overflow: hidden; background: linear-gradient(#F6EFDE, #E6D4AE); }
.sh-cover .temple-photo { display: block; width: 100%; height: 210px; object-fit: cover; object-position: center 60%; }
.sh-cover svg { display: block; width: 100%; height: 210px; }
.sh-cover-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 13px;
  background: linear-gradient(rgba(246, 239, 222, 0), rgba(246, 239, 222, .93) 46%, #F6EFDE);
  text-align: center; }
.sh-cover-tx b { display: block; font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif;
  font-size: 21px; font-weight: 700; color: #4A3A26; letter-spacing: 3px; }
.sh-cover-tx em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: #8C6A2F; letter-spacing: .5px; }

/* 四个数字：一句话概览，不做看板 */
.sh-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 12px 12px 0;
  background: #E8DEC5; border-radius: 12px; overflow: hidden; }
.sh-nums > div { background: #FFFDF6; padding: 11px 4px 9px; text-align: center; }
.sh-nums b { display: block; font-size: 19px; font-weight: 700; color: #4A3A26; font-family: Georgia, serif; line-height: 1.15; }
.sh-nums em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: #8C6A2F; }

/* 菜单：两列大卡，图标金棕底、名字 16px、说明一行两行就折 */
.sh-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px 12px 0; }
.sh-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid #EBE2CC; border-radius: 14px; background: #FFFDF6; padding: 13px 13px 12px;
  cursor: pointer; box-shadow: 0 1px 5px rgba(90, 68, 32, .05); }
.sh-card:active { background: #F8F2E3; }
.sh-card .ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: #F5EFE2; color: #8C6A2F; margin-bottom: 6px; }
.sh-card .ic svg { width: 20px; height: 20px; }
.sh-card b { font-size: 15.5px; font-weight: 700; color: #4A3A26; letter-spacing: .5px; }
.sh-card em { font-style: normal; font-size: 11.5px; line-height: 1.45; color: #97897A; }

/* ---------- VR ---------- */
.sh-vr-hero { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 12px 12px 0;
  padding: 22px 16px 20px; border-radius: 16px; cursor: pointer; text-align: center;
  background: linear-gradient(150deg, #5C4526, #8C6A2F 70%, #A8813E); color: #FFF6E2;
  box-shadow: 0 4px 16px rgba(92, 69, 38, .24); }
.sh-vr-hero i { display: flex; }
.sh-vr-hero i svg { width: 34px; height: 34px; }
.sh-vr-hero b { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.sh-vr-hero em { font-style: normal; font-size: 12px; opacity: .82; }
.sh-vr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px;
  padding: 30px 20px; border-radius: 16px; text-align: center;
  background: #F6EFDE; border: 1px dashed #DCCBA4; }
.sh-vr-empty i { display: flex; color: #B9A378; }
.sh-vr-empty i svg { width: 34px; height: 34px; }
.sh-vr-empty b { font-size: 15px; color: #4A3A26; }
.sh-vr-empty em { font-style: normal; font-size: 12px; line-height: 1.6; color: #97897A; }

.sh-vlist { margin: 12px 12px 0; background: #FFFDF6; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(90, 68, 32, .06); }
.sh-vrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #F0E9D8; }
.sh-vrow:last-child { border-bottom: 0; }
.sh-vrow .n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #F5EFE2; color: #8C6A2F;
  font-style: normal; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sh-vrow .tx { flex: 1; min-width: 0; }
.sh-vrow .tx b { display: block; font-size: 14px; color: #4A3A26; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-vrow .tx em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: #A2968A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 小按钮：看 / 删 */
.btn-mini { flex: 0 0 auto; border: 1px solid #D8C9A6; border-radius: 9px; background: #FFFDF6;
  color: #8C6A2F; font-size: 12px; padding: 5px 10px; cursor: pointer; }
.btn-mini.warn { border-color: #E4C9B8; color: #A9603C; }

/* 表单块：外链/本地视频、祠产、修缮、祠规共用 */
.sh-vadd { margin: 12px; padding: 12px 12px 13px; background: #FFFDF6; border-radius: 12px;
  border: 1px solid #EBE2CC; }
.sh-vadd input, .sh-vadd textarea { display: block; width: 100%; box-sizing: border-box; margin-bottom: 8px;
  border: 1px solid #E4DAC2; border-radius: 9px; background: #FDFBF4; padding: 9px 10px;
  font-size: 13.5px; color: #4A3A26; font-family: inherit; }
.sh-vadd input::placeholder, .sh-vadd textarea::placeholder { color: #B6A98F; }
.sh-vadd textarea { resize: vertical; line-height: 1.6; }
.sh-vbtns { display: flex; gap: 8px; }
.sh-vbtns button { flex: 1; border: 1px solid #D8C9A6; border-radius: 10px; background: #FFFDF6;
  color: #8C6A2F; font-size: 13.5px; padding: 10px 0; cursor: pointer; }
.sh-vbtns button.pri { border-color: #5C4526; background: #5C4526; color: #FFFDF6; font-weight: 700; }

/* 播放页 */
.sh-vrplay { background: #1C1710; min-height: 100%; }
.sh-vrplay .sh-bar { background: #241D14; color: #F2E7CE; }
.sh-vrplay .sh-bar .bk { color: #F2E7CE; }
.sh-vframe { display: block; width: 100%; height: calc(100vh - 120px); border: 0; background: #000; }
.sh-vvideo { display: block; width: 100%; max-height: calc(100vh - 150px); background: #000; }
.sh-vrplay .pm-tip { color: #B8A98C; }

/* ---------- 记事类行（祠产 / 修缮 / 祠规 / 沿革 共用） ---------- */
.sh-erow { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-bottom: 1px solid #F0E9D8; }
.sh-erow:last-child { border-bottom: 0; }
.sh-erow .tx { flex: 1; min-width: 0; }
.sh-erow .tx b { display: block; font-size: 14px; font-weight: 700; color: #4A3A26; line-height: 1.5; }
.sh-erow .tx b i { font-style: normal; font-weight: 400; font-size: 12px; color: #A2721F; }
.sh-erow .tx em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; line-height: 1.6;
  color: #6E655C; white-space: pre-wrap; }
.sh-erow .tx span { display: block; margin-top: 4px; font-size: 12px; color: #97897A; }

/* ---------- 文化历史模板（空态给四段，点一下填进输入框） ---------- */
.sh-tpl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px; }
.sh-tpl button { text-align: left; border: 1px dashed #DCCBA4; border-radius: 11px; background: #F8F3E5;
  padding: 10px 11px; cursor: pointer; }
.sh-tpl button b { display: block; font-size: 13.5px; color: #5C4526; }
.sh-tpl button em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; line-height: 1.45; color: #97897A; }

/* ---------- 功德榜 ---------- */
.sh-mero { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px;
  padding: 18px 16px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, #FBF3DF, #F0E2C0); border: 1px solid #E8D6AC; }
.sh-mero svg { width: 30px; height: 30px; color: #B08A34; }
.sh-mero b { font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif; font-size: 18px;
  color: #5C4526; letter-spacing: 3px; }
.sh-mero em { font-style: normal; font-size: 11.5px; color: #97897A; }
.sh-melist { margin: 0 12px; background: #FFFDF6; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(90, 68, 32, .06); }
.sh-merow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #F0E9D8; }
.sh-merow:last-child { border-bottom: 0; }
.sh-merow .g { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #F5EFE2;
  color: #8C6A2F; font-family: Georgia, serif; font-size: 11.5px; display: flex; align-items: center; justify-content: center; }
.sh-merow .tx { flex: 1; min-width: 0; }
.sh-merow .tx b { display: block; font-size: 14px; color: #4A3A26; font-weight: 700; }
.sh-merow .tx em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: #A2968A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-merow .t { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #8C6A2F;
  border: 1px solid #E4D6B4; border-radius: 7px; padding: 2px 7px; }

/* ================= 关于谱缘（2026-10-26：功能简介落进 App） =================
   米金宣纸风，跟祠堂/首页一套色；一屏能看懂「平台是干啥的」。 */
.abp { background: #FBF8F0; }
.abp-hero { position: relative; padding: 30px 22px 26px; text-align: center;
  background: linear-gradient(165deg, #F6EFDE, #E9D9B6 65%, #DFC99B); }
.abp-seal { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 11px; border: 1.5px solid #8C6A2F; border-radius: 8px;
  color: #8C6A2F; font-family: 'Songti SC', serif; font-size: 21px; font-weight: 700;
  background: rgba(255, 253, 246, .55); }
.abp-hero b { display: block; font-family: 'Songti SC', 'Noto Serif SC', STSong, SimSun, serif;
  font-size: 22px; font-weight: 700; color: #4A3A26; letter-spacing: 3px; }
.abp-hero em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: #8C6A2F; letter-spacing: 2px; }
.abp-rule { width: 36px; height: 1px; margin: 15px auto 13px; background: #C9A961; }
/* 封面这句话的排法（2026-10-26 用户定）：三行分别锁定，加粗那句整段不折行。
   窄屏靠 clamp 缩字号，绝不让「谱」被挤成单独一行。 */
.abp-lead { margin: 0; font-size: 14px; line-height: 1.85; color: #6B5D48; }
.abp-lead span { display: block; white-space: nowrap; }
.abp-lead .l1 { font-size: clamp(12.5px, 3.5vw, 14px); }
.abp-lead .l2 { margin-top: 7px; line-height: 1.6; }
.abp-lead .l2 b { display: block; color: #4A3A26; font-weight: 700; letter-spacing: .3px;
  font-size: clamp(15px, 4.6vw, 17.5px); white-space: nowrap; }
.abp-lead .l3 { margin-top: 2px; font-size: clamp(12.5px, 3.5vw, 14px); color: #6B5D48; }

.abp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -16px 12px 0; position: relative; }
.abp-three > div { background: #FFFDF6; border: 1px solid #E8DEC5; border-radius: 13px;
  padding: 14px 10px 12px; text-align: center; box-shadow: 0 5px 18px rgba(92, 69, 38, .08); }
.abp-three i { display: block; font-style: normal; font-family: Georgia, serif; font-size: 10.5px;
  color: #C9A961; letter-spacing: 1.5px; margin-bottom: 4px; }
.abp-three b { display: block; font-family: 'Songti SC', serif; font-size: 17px; color: #5C4526;
  letter-spacing: 2px; margin-bottom: 5px; }
.abp-three em { display: block; font-style: normal; font-size: 11px; line-height: 1.55; color: #9A8D7C; }

.abp-tag { margin: 18px 20px 0; text-align: center; font-size: 12.5px; line-height: 1.8; color: #6B5D48; }

.abp-sec { margin-top: 26px; padding: 0 12px; }
.abp-sh { display: flex; align-items: baseline; gap: 9px; padding: 0 2px 9px; margin-bottom: 10px;
  border-bottom: 1px solid #E8DEC5; }
.abp-sh i { font-style: normal; font-family: Georgia, serif; font-size: 11.5px; color: #C9A961; letter-spacing: 1px; }
.abp-sh b { font-family: 'Songti SC', serif; font-size: 16.5px; color: #5C4526; letter-spacing: 1.5px; }
.abp-sh em { margin-left: auto; font-style: normal; font-size: 11px; color: #9A8D7C; }

.abp-biz { display: flex; gap: 11px; padding: 12px; background: #FFFDF6; border: 1px solid #EDE4D0;
  border-radius: 12px; margin-bottom: 8px; }
.abp-biz .ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: #F5EFE2; color: #8C6A2F; }
.abp-biz .ic svg { width: 18px; height: 18px; }
.abp-biz .tx { flex: 1; min-width: 0; }
.abp-biz .tx b { display: block; font-size: 14.5px; color: #4A3A26; letter-spacing: .5px; margin-bottom: 3px; }
.abp-biz .tx em { display: block; font-style: normal; font-size: 12px; line-height: 1.68; color: #6B5D48; }

.abp-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; padding: 12px 14px;
  background: #FFFDF6; border: 1px solid #EDE4D0; border-radius: 12px; }
.abp-feat > div { position: relative; padding-left: 13px; }
.abp-feat > div::before { content: ''; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px;
  border-radius: 50%; background: #C9A961; }
.abp-feat b { display: block; font-size: 12.5px; color: #4A3A26; font-weight: 600; }
.abp-feat em { display: block; font-style: normal; font-size: 11px; line-height: 1.55; color: #9A8D7C; }

.abp-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.abp-flow > div { background: #FFFDF6; border: 1px solid #EDE4D0; border-radius: 10px;
  padding: 10px 5px 9px; text-align: center; }
.abp-flow i { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 50%; background: #5C4526; color: #FFF6E2; font-style: normal;
  font-family: Georgia, serif; font-size: 10px; margin-bottom: 5px; }
.abp-flow b { display: block; font-size: 12px; color: #5C4526; margin-bottom: 2px; }
.abp-flow em { display: block; font-style: normal; font-size: 10px; line-height: 1.45; color: #9A8D7C; }

.abp-warn { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: #FDF6F2;
  border: 1px solid #EFD9CB; font-size: 11.5px; line-height: 1.7; color: #8A5B42; }

.abp-line { padding: 12px 13px; margin-bottom: 8px; border-radius: 12px;
  background: linear-gradient(160deg, #FBF3DF, #F2E5C8); border: 1px solid #E8D6AC; }
.abp-line b { display: block; font-family: 'Songti SC', serif; font-size: 14.5px; color: #5C4526;
  letter-spacing: 1.5px; margin-bottom: 4px; }
.abp-line em { display: block; font-style: normal; font-size: 12px; line-height: 1.72; color: #6B5D48; }

.abp-foot { margin: 26px 12px 0; padding: 22px 16px 20px; text-align: center;
  background: linear-gradient(150deg, #5C4526, #8C6A2F 72%, #A8813E); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(92, 69, 38, .2); }
.abp-foot b { display: block; font-family: 'Songti SC', serif; font-size: 16px; color: #FFF6E2; letter-spacing: 2px; }
.abp-foot em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; color: #E8D6AC; }
.abp-btns { display: flex; gap: 8px; margin-top: 14px; }
.abp-btns button { flex: 1; border: 1px solid rgba(255, 246, 226, .5); border-radius: 10px;
  background: rgba(255, 246, 226, .12); color: #FFF6E2; font-size: 13px; padding: 10px 0; cursor: pointer; }
.abp-btns button.pri { background: #FFF6E2; border-color: #FFF6E2; color: #5C4526; font-weight: 700; }
.abp-motto { display: block; margin-top: 14px; font-size: 11px; color: #D8C39A; letter-spacing: 2px; }
.abp { padding-bottom: 22px; }

/* ===== 最近删除（2026-10-28 软删回收站） ===== */
.io-tip { margin: 0 12px 10px; padding: 10px 12px; background: #FFF9EC; border: 1px solid #F0E3C2;
  border-radius: 10px; font-size: 12.5px; line-height: 1.7; color: #7A6537; }
.io-row .lt .tr-sub { display: block; font-style: normal; font-size: 11.5px; color: #8A8A8A; margin-top: 2px; }
.io-row .lnk { background: none; border: 0; padding: 4px 6px; font-size: 13px; color: #2F6B4F; cursor: pointer; }
.io-row .lnk.tr-del { color: #A8443A; }

/* ===== 隐私政策 / 用户协议 / 首次同意（2026-10-28 合规） ===== */
.pv-body { padding: 4px 16px 30px; }
.pv-sec { margin-top: 16px; }
.pv-sec b { display: block; font-size: 15px; color: #23201B; margin-bottom: 6px; letter-spacing: .5px; }
.pv-sec p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.85; color: #5A5348; }
.pv-foot { margin-top: 22px; padding-top: 14px; border-top: .5px solid #EDE7DA;
  font-size: 12px; color: #9A9184; text-align: center; }
.pv-foot span { color: #8C6A2F; }
.pv-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999;
  background: rgba(32, 28, 22, .5); display: flex; align-items: flex-end; justify-content: center; }
.pv-card { width: 100%; max-width: 520px; background: #FDFBF5; border-radius: 18px 18px 0 0;
  padding: 20px 18px 22px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); }
.pv-h { display: block; font-size: 16.5px; color: #23201B; letter-spacing: .5px; margin-bottom: 12px; }
.pv-li { font-size: 13px; line-height: 1.75; color: #5A5348; margin-bottom: 6px; }
.pv-lk { margin-top: 10px; font-size: 13px; color: #8A7E6A; }
.pv-lk span { color: #8C6A2F; text-decoration: underline; }
.pv-btns { display: flex; gap: 10px; margin-top: 16px; }
.pv-b { flex: 1; border: 1px solid #D9D0BE; background: #fff; color: #6B6355;
  font-size: 14px; padding: 12px 0; border-radius: 11px; cursor: pointer; }
.pv-b.main { flex: 1.2; background: #8C6A2F; border-color: #8C6A2F; color: #FFF7E6; font-weight: 700; }
.pv-tip { margin-top: 12px; font-size: 11.5px; color: #A79C88; text-align: center; }
/* 2026-11-01：先逛逛（群里新访客先看谱，不在弹层上死磕表态） */
.pv-look { margin-top: 13px; text-align: center; font-size: 13px; color: #8C6A2F; }
.pv-look span { text-decoration: underline; letter-spacing: .5px; }
/* 同意层在时（body.pv-on）把底部 tab 抬到遮罩之上：
   遮罩是全屏铺开的，压在 tab 上会让新访客点「我的」「建谱」完全没反应。
   遮罩同时上收 51px，卡片不会被 tab 盖住。 */
body.pv-on #tabs { position: relative; z-index: 1000; }
body.pv-on #pv-mask { bottom: calc(51px + var(--safe-b)); }

/* ===== 桌面端体面化（2026-10-28 版面评审：≥1024px 两侧不再空荡） ===== */
@media (min-width: 1024px) {
  body { background: #EDE5D2; }
  #app { box-shadow: 0 0 46px rgba(74, 58, 38, .16); }
}

/* ===== 矮屏首页一屏适配（2026-10-28 复审回归修复）
   六卡描述高度放开后（4 条以上的文案变 3 行），平台首页内容高 703px；
   375×667 可视 615px 超 88px、360×640 可视 588px 超 115px，末排卡被底栏切掉。
   这里不动 2×3 版式、不动一句文案、不动字号档位，只收紧间距与行高，
   把内容压到 599px → 667/640 屏六卡全部可见（只剩页脚合规小字可能要滚一点）。
   ≥731px 的屏（iPhone 12 起 792px）完全不受影响，定稿版式原样保留。 ===== */
@media (max-height: 730px) {
  .hm-cover { padding-bottom: 8px; }
  .pf-cover { min-height: 128px; }
  .pf-name { margin-top: 6px; font-size: 22px; letter-spacing: 4px; }
  .pf-slogan { margin-top: 4px; font-size: 12px; letter-spacing: 1px; }
  .pf-continue { margin-top: 8px; min-height: 40px; padding: 8px 16px; }
  /* ⚠ 第 2 张轮播层必须与上面这一档同步缩，否则会逐级错位并被封面底裁掉。
     2026-10-28 实测（375×667，不同步时）：标题 +4px、小字 +8px、按钮 +12px，
     按钮 bottom 169 > 封面底 161 → 底部缺一条；卷轴装饰右出 6px、下出 12px。
     下面每个数值都对着上面第 1 张的实测值写：标题 y60 / 小字 y89 / 按钮 y113 高 40。
     以后再动这一档的 .pf-name/.pf-slogan/.pf-continue，必须同步改这里。 */
  .bn-tx { top: calc(var(--safe-t) + 60px); }
  .bn-tx b { font-size: 22px; letter-spacing: 4px; line-height: 25px; }
  .bn-tx em { margin-top: 4px; font-size: 12px; letter-spacing: 1px; }
  .bn-cta { top: 53px; min-height: 40px; padding: 0 16px; }   /* 53 = 113 − 60（相对 .bn-tx） */
  .bn-art { right: 4px; bottom: 4px; }
  .pf-biz { gap: 8px; margin: 6px 14px 0; }
  .pf-card { padding: 9px 10px 7px; border-radius: 12px; }
  .pf-card .pf-ic { width: 26px; height: 26px; border-radius: 8px; }
  .pf-card .pf-ic svg { width: 15px; height: 15px; }
  .pf-card b { margin-top: 4px; font-size: 13.5px; }
  .pf-card em { margin-top: 3px; line-height: 1.38; }
  .pf-foot { margin-top: 14px; padding-top: 10px; font-size: 11px; }
  /* 建谱首页宫格（12 格 4×3，10-28）：只收内边距和行距，不动格数/图标/字号。
     实测 375×667 内容 630 > 可视 615，收 padding 18→12（省12px）+ 行距 16→12（省8px）→ 装下。 */
  .hm-grid { padding: 12px 8px; gap: 12px 9px; }
}