/* ==========================================================================
   家谱管理平台 · 样式表
   设计基调：宣纸底 + 赭石主色 + 宋体标题，中式谱牒的克制感
   ========================================================================== */

:root {
  /* 配色全部按源站截图逐点采样，不再用原来的「宣纸米黄 + 赭石」：
     body 底 rgb(247,248,250)、卡片纯白、主色 rgb(248,110,4)、
     主文字 #1b2230、次文字 #5c6577、弱文字 #9aa3b2、分隔线 #e8eaef */
  --paper: #f7f8fa;
  --paper-2: #f1f4f8;
  --card: #ffffff;
  --ink: #1b2230;
  --ink-2: #5c6577;
  --ink-3: #9aa3b2;
  --line: #e8eaef;
  --line-2: #dde1e8;
  --brand: #f86e04;
  --brand-dark: #d95a00;
  --brand-soft: #fff3e8;
  --red: #e0413a;
  --male: #3f5b6b;
  --female: #e0413a;
  --ok: #2e9e5b;
  --warn: #e8a33d;
  --danger: #e0413a;
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --r: 8px;
  --shadow-1: 0 1px 2px rgba(24, 32, 48, .04), 0 2px 8px rgba(24, 32, 48, .05);
  --shadow-2: 0 6px 24px rgba(24, 32, 48, .12);
  --sidebar-w: 258px;
  /* 壳尺寸：rail 改为 176px 的「图标+文字」宽侧栏，保证全部一级功能都显示全面
     （旧 74px×88px 竖条共 12 项 + 底栏 ≈1230px，超出屏幕高度会把底部项切掉） */
  --rail-w: 176px;       /* 左侧宽侧栏：图标 + 文字，全部功能可见 */
  --rail-gap: 6px;       /* rail 与二级栏之间的浅灰分隔 */
  --rail-bg: #131c2e;    /* rail 底色 rgb(19,28,46) */
  --rail-ink: #8b98ad;   /* 未选中图标/文字 */
  --rail-on: #ffffff;
  --rail-accent: #f86e04;/* 选中竖条与角标橙 */
  --subnav-w: 200px;     /* 二级栏默认宽；谱书/卷轴/管理用 265 */
  --topbar-h: 60px;      /* 源站 55 页一致 */
  --page-bg: #f7f8fa;    /* 主区底色 rgb(247,248,250) */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .02em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8cbb6; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c2b29a; background-clip: content-box; }

/* ---------------- 布局骨架 ---------------- */
.app-shell {
  display: grid;
  grid-template-columns: calc(var(--rail-w) + var(--rail-gap)) auto minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--page-bg);
}
/* 谱文这类自带工具条的页：整条顶栏收起，把 60px 让给编辑器 */
.app-shell.no-top { grid-template-rows: 0 minmax(0, 1fr); }
.app-shell.no-top > .topbar { display: none; }
/* 第一级：74px 窄图标竖条。用 box-shadow 画右侧 6px 浅灰分隔，
   不用 border/padding —— 两者都会被 box-sizing 算进宽度，74 就不是 74 了。 */
.sidebar {
  grid-row: 1 / -1;   /* 竖向贯穿顶栏 + 内容两行，谱文页顶栏收起时也不会被压成 0 高 */
  width: var(--rail-w);
  background: var(--rail-bg);
  box-shadow: var(--rail-gap) 0 0 #edeff3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 40;
  overflow: hidden;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(211, 196, 172, .7);
}
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--serif); font-size: 21px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(110,60,30,.25);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-family: var(--serif); font-size: 15px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 11px; color: var(--ink-3); letter-spacing: .12em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   第一级 rail（176px 深色「图标+文字」宽侧栏）
   旧版 74px×88px 竖条共 12 项 + 底栏 ≈1230px，超出屏幕高度会把底部项切掉、
   且无可见滚动条提示。改为宽侧栏 + 横排紧凑项，全部一级功能一行一个完整可见；
   窄屏仍可作为抽屉使用（见底部 @media）。
   ========================================================================== */
.rail-brand {
  height: 58px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rail-brand .brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--rail-accent); color: #fff;
  font-family: var(--serif); font-size: 19px; line-height: 1;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.rail-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
/* 宽侧栏里品牌名直接显示（不再裁成 1px 隐藏）；applySettings() 会写站点名进来 */
.rail-brand #brandName {
  font-family: var(--serif); font-size: 15px; line-height: 1.1; color: #fff;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-brand #brandSlogan {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.rail-nav {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 8px 8px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.rail-nav::-webkit-scrollbar { width: 6px; }
.rail-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.rail-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

.rail-item {
  flex: none;
  height: 46px;                    /* 横排紧凑项：12 项 + 底栏总高 < 760px，全部可见 */
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 12px;
  padding: 0 14px;
  margin: 2px 0;
  border-radius: 9px;
  color: #c5c7cc;                  /* 实测未选中文字笔画色 */
  text-decoration: none;
  position: relative;
  cursor: pointer;
  background: none; border: 0; width: 100%;
  font-family: inherit;
  transition: color .15s, background .15s;
}
.rail-item .ico {
  width: 22px; height: 22px;
  display: block; flex: none;
  color: #c0c4cc;                  /* 图标比文字略暖一点，实测 #beb09f 偏米 */
}
.rail-item .ico svg { width: 22px; height: 22px; display: block; }
.rail-item .lbl { font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .03em; white-space: nowrap; color: #d7dbe2; }
.rail-item:hover { color: #eef1f5; background: rgba(255,255,255,.06); text-decoration: none; }
.rail-item:hover .ico { color: #eef1f5; }
/* 选中：整块 #44536a 铺底 + 左侧橙色竖条（原整块反白，加左条更醒目） */
.rail-item.active { color: #fff; background: #44536a; box-shadow: inset 3px 0 0 var(--rail-accent); }
.rail-item.active .ico { color: #fff; }
.rail-item .dot {
  position: absolute; top: 14px; right: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rail-accent);
}
/* 一级项里的「展开指示」：本组有二级栏且已展开时，右侧出现小三角 */
.rail-item .caret {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 8px; color: rgba(255,255,255,.35);
}

.rail-foot {
  flex: none;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 4px 0 6px;
}
/* 底部按钮与导航项同款横排，确保「总台 / 退出 / 登录」也完整可见 */
.rail-foot .rail-item { height: 46px; gap: 12px; padding: 0 14px; flex-direction: row; justify-content: flex-start; border-radius: 9px; margin: 2px 0; }
.rail-foot .rail-item .ico { font-size: 18px; }
.rail-foot .site-footer { display: none; }

/* ==========================================================================
   第二级 subnav（白色子菜单栏）
   实测：谱系/谱文/切换家族 200px，谱书/卷轴 265px；管理页无二级栏
   ========================================================================== */
.subnav {
  grid-column: 2;
  grid-row: 2;
  width: var(--subnav-w);
  flex: none;
  background: #fff;
  border-right: 1px solid #e8eaef;
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 30;
}
.subnav[hidden] { display: none; }
.subnav-head {
  flex: none;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #eef0f4;
}
.subnav-head .sh-title {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: #1b2230;
  letter-spacing: .04em; display: flex; align-items: center; gap: 6px;
}
.subnav-head .sh-sub {
  margin-top: 4px; font-size: 11px; color: #9aa3b2; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subnav-head .sh-add {
  margin-left: auto; flex: none;
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid #dde1e8; background: #fff; color: #6b7688;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.subnav-head .sh-add:hover { border-color: var(--rail-accent); color: var(--rail-accent); }

.subnav-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 8px 14px;
  scrollbar-width: thin;
}
.subnav-body::-webkit-scrollbar { width: 6px; }
.subnav-body::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 3px; }

/* 二级项：与源站一致的「图标 + 文字 + 右侧计数」一行 */
.sv-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #414b5c; font-size: 13.5px;
  text-decoration: none;
  margin-bottom: 2px;
  cursor: pointer;
}
.sv-item:hover { background: #f4f6f9; color: #1b2230; text-decoration: none; }
.sv-item.active { background: #fff3e8; color: #d95a00; font-weight: 600; }
.sv-item .sv-ico {
  flex: none; width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  background: #f1f4f8; color: #6b7688;
  font-family: var(--serif); font-size: 12px;
}
.sv-item.active .sv-ico { background: var(--rail-accent); color: #fff; }
.sv-item .sv-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-item .sv-num { flex: none; font-size: 11px; color: #a8b0bf; }

.sv-group { margin: 4px 0 10px; }
.sv-group > .sv-gname {
  padding: 8px 10px 6px;
  font-size: 11px; color: #9aa3b2; letter-spacing: .1em;
}
.sv-empty { padding: 20px 12px; font-size: 12.5px; color: #9aa3b2; line-height: 1.9; text-align: center; }

/* 平台署名：二级栏底部定高一行，左侧竖条 + 小字，不参与滚动 */
.subnav-foot {
  flex: none;
  border-top: 1px solid #eef0f4;
  padding: 9px 12px;
  font-size: 10.5px; color: #b3bac6; line-height: 1.5;
  letter-spacing: .02em;
  max-height: 54px; overflow: hidden;
}
.subnav-foot:empty { display: none; }

/* ---------- 侧栏：一排折叠菜单（家族 + 各功能分组同一竖排） ---------- */
.side-nav {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 8px 12px;
  scrollbar-width: thin;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(140, 120, 90, .25); border-radius: 3px; }
.sn-group { margin-bottom: 3px; border: 1px solid transparent; border-radius: 9px; }
/* 展开的那一组整体成一张卡片：组头 + 子项视觉上是一块，不是"白条下面挂一串" */
.sn-group.open {
  background: var(--card);
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}
.sn-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 9px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink-2);
  font-size: 13.5px; line-height: 1.35; text-align: left;
  cursor: pointer; user-select: none;
  transition: background .14s, color .14s, border-color .14s;
}
.sn-head:hover { background: rgba(255, 253, 248, .82); color: var(--ink); }
.sn-group.open > .sn-head {
  background: transparent; border-color: transparent; box-shadow: none;
  border-radius: 9px 9px 0 0;
  color: var(--brand-dark); font-weight: 600;
}
/* 当前模块所在的组：收起状态下也要一眼看得出来 */
.sn-group.here > .sn-head { color: var(--brand-dark); font-weight: 600; }
.sn-mark {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: grid; place-items: center; border-radius: 5px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(211, 196, 172, .9);
  font-family: var(--serif); font-size: 12px; color: var(--ink-3);
}
.sn-group.open > .sn-head .sn-mark,
.sn-group.here > .sn-head .sn-mark { background: var(--brand-soft); color: var(--brand); border-color: #e8eaef; }
.sn-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-caret { flex: none; font-size: 9px; color: var(--ink-3); transition: transform .2s; }
.sn-group.open .sn-caret { transform: rotate(90deg); }
.sn-add {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center; border-radius: 5px;
  font-size: 13px; line-height: 1; color: var(--ink-3);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line-2);
  cursor: pointer; transition: background .14s, color .14s;
}
.sn-add:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.sn-items { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.sn-inner { padding: 0 0 7px; }
.sn-item {
  display: flex; align-items: center; gap: 8px;
  margin-left: 11px; padding: 7px 9px 7px 11px;
  border-left: 2px solid transparent; border-radius: 0 7px 7px 0;
  color: var(--ink-2); font-size: 13px; line-height: 1.3;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.sn-item:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.sn-item.active {
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 600; border-left-color: var(--brand);
}
.sn-icon {
  width: 19px; height: 19px; flex: 0 0 19px;
  display: grid; place-items: center; border-radius: 4px;
  background: var(--paper-2); color: var(--ink-3);
  font-family: var(--serif); font-size: 11px;
}
.sn-item.active .sn-icon { background: var(--brand); color: #fff; }
.sn-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-inner .fam-item { margin-left: 11px; padding: 7px 9px 7px 11px; }

.fam-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: var(--ink-2); border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.fam-item:hover { background: rgba(255,253,248,.8); color: var(--ink); }
.fam-item.active { background: var(--card); color: var(--brand); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.fam-item .fam-seal {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  display: grid; place-items: center; font-family: var(--serif); font-size: 14px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #e8eaef;
}
.fam-item .fam-meta { min-width: 0; flex: 1; }
.fam-item .fam-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-item .fam-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.side-footer { padding: 10px; border-top: 1px solid rgba(211,196,172,.7); font-size: 12px; color: var(--ink-3); }
.side-footer .who { display: flex; align-items: center; gap: 8px; }

/* 平台方专用入口（侧栏账号区上方）：必须一眼可见，不能被当成普通链接 */
.side-platform {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 9px; padding: 9px 10px;
  border: 1px dashed rgba(140,74,47,.45); border-radius: 9px;
  background: rgba(140,74,47,.055); color: var(--ink); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.side-platform:hover { background: rgba(140,74,47,.11); border-color: var(--brand); }
.side-platform .sp-ico { font-size: 15px; line-height: 1; color: var(--brand); flex: none; }
.side-platform .sp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-platform .sp-txt b { font-size: 12.5px; font-weight: 600; }
.side-platform .sp-txt i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
body.narrow .side-platform { margin-bottom: 8px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-family: var(--serif); font-size: 13px;
  border: 1px solid #e8eaef;
}

/* grid-column 必须写死到第 3 列：二级栏隐藏时网格自动排布会把 .main 塞进第 2 列 auto，
   第 3 列 1fr 空着 → 主区只剩一半宽（管理页曾因此只有 539px）。 */
.main { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--page-bg); }
/* 顶栏：源站实测 60px、纯白、1px 浅灰底线，横跨「二级栏 + 主区」两列 */
.topbar {
  grid-column: 2 / -1; grid-row: 1;
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e8eaef;
  position: relative; z-index: 30;
}
.search-wrap { position: relative; flex: 1; max-width: 420px; }
.search-wrap input {
  width: 100%; height: 34px; padding: 0 12px 0 34px;
  border: 1px solid #e2e6ed; border-radius: 7px;
  background: #f7f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b98ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px 50%;
  outline: none; transition: border-color .15s, background .15s;
}
.search-wrap input:focus { border-color: var(--rail-accent); background-color: #fff; }
.search-result {
  position: absolute; top: 42px; left: 0; right: 0; max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: var(--shadow-2); padding: 6px; z-index: 60;
}
.sr-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.sr-item:hover { background: var(--brand-soft); }
.sr-item .sr-name { font-family: var(--serif); font-size: 14px; }
.sr-item .sr-sub { font-size: 11.5px; color: var(--ink-3); }
.sr-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* 当前登录身份标签：三层后台不串号，窄屏由 JS 换成两字简称，避免顶栏横向溢出 */
.tb-level { flex: none; white-space: nowrap; font-size: 12px; color: var(--ink-3); padding: 0 4px; }
@media (max-width: 760px) { .tb-level { font-size: 11px; padding: 0 2px; } }
.menu-btn { display: none !important; }

.view { flex: 1; min-height: 0; overflow: auto; position: relative; }

/* ---------------- 通用控件 ---------------- */
.icon-btn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink-2); font-size: 15px; line-height: 1;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font-size: 13px; white-space: nowrap; transition: all .15s;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-danger { color: var(--danger); border-color: #e0c3bb; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > label { font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
.field input, .field select, .field textarea {
  height: 36px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field textarea { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(140,74,47,.09);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { font-size: 11.5px; color: var(--ink-3); }

/* 表单分组（族人档案 55 个字段分 7 组，默认只展开「基本信息」） */
.fgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: rgba(255,255,255,.5); }
.fgroup > summary {
  cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: 7px; user-select: none;
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::before { content: '▸'; font-size: 10px; color: var(--brand); transition: transform .15s; }
.fgroup[open] > summary::before { transform: rotate(90deg); }
.fgroup > summary:hover { background: rgba(140,74,47,.045); border-radius: 10px; }
.fg-body { padding: 12px 12px 2px; border-top: 1px solid var(--line); }
.chk-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 0 10px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chk input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
/* 弹窗变高时内部滚动，底部按钮始终可点 */
#modalBody { max-height: min(66vh, 620px); overflow-y: auto; }
@media (max-width: 640px) {
  #modalBody { max-height: 58vh; }
}

/* 日期点选器 */
.date-pick { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 6px; }
.date-pick select {
  height: 36px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; outline: none; min-width: 0;
}
.date-pick select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(140,74,47,.09); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px; border-radius: 5px;
  font-size: 11px; background: var(--brand-soft); color: var(--brand); border: 1px solid #e8d3c3;
}
.tag.grey { background: #efece5; color: var(--ink-2); border-color: var(--line); }
.tag.ok { background: #e8f2ea; color: var(--ok); border-color: #cfe3d4; }
.tag.warn { background: #fbf2d9; color: var(--warn); border-color: #ecdcae; }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 70px 20px; color: var(--ink-3); text-align: center;
}
.empty .empty-mark { font-family: var(--serif); font-size: 40px; color: var(--line-2); }

/* ---------------- 页面头部 ---------------- */
.page { padding: 20px 22px 40px; }
.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 22px; line-height: 1.3; }
.page-head .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; letter-spacing: .06em; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: rgba(140,120,90,.25); border-radius: 2px; }
.tab {
  padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

/* ---------------- 族谱树 ---------------- */
/* 工具条：一排小胶囊（对齐百家有谱），只承载 放大 / 缩小 / 适应屏幕 */
.tree-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 10px; background: transparent; flex-wrap: wrap;
}
.tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 15px;
  border: 1px solid var(--line-2); border-radius: 15px;
  background: #fff; color: var(--ink-2);
  font-size: 12.5px; letter-spacing: .04em; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.tbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tbtn.on { border-color: var(--brand); color: #fff; background: var(--brand); }
.tbtn:active { transform: translateY(1px); }

/* 竖排世系图的容器：撑满工作区剩余高度，内部自己滚 */
.tree-list-wrap { min-height: 320px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #ffffff; }

/* 高度由 JS 实测后写入 style（标题换行 / 按钮折行都算得准），CSS 只给兜底 */
.tree-stage {
  position: relative; width: 100%; height: calc(100dvh - var(--topbar-h) - 200px); min-height: 320px;
  overflow: hidden; cursor: grab;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(180,150,110,.05), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(180,150,110,.05), transparent 45%);
  touch-action: none;
}
.tree-stage.dragging { cursor: grabbing; }
.tree-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.tree-svg { display: block; overflow: visible; }

.p-node { cursor: pointer; }
.p-node rect.card {
  fill: var(--card); stroke: var(--line-2); stroke-width: 1.2;
  rx: 8; ry: 8; transition: stroke .12s, filter .12s;
}
.p-node:hover rect.card { stroke: var(--brand); filter: drop-shadow(0 3px 8px rgba(110,70,40,.18)); }
.p-node.selected rect.card { stroke: var(--brand); stroke-width: 2.2; filter: drop-shadow(0 4px 12px rgba(110,70,40,.22)); }

/* 节点折叠圆点：对齐源站「每个节点前一个圆点，点一下收/放整支」 */
.fold-btn circle { fill: #ffffff; stroke: #c9bda8; stroke-width: 1.2; transition: all .16s; }
.fold-btn:hover circle { stroke: var(--brand); fill: #fdf3ea; }
.fold-txt { font-size: 9px; fill: #8a7f6a; font-weight: 600; pointer-events: none; }
.fold-btn:hover .fold-txt { fill: var(--brand); }
.p-node rect.bar { rx: 3; ry: 3; }
.p-node text { font-family: var(--sans); pointer-events: none; }
.p-node .nm { font-family: var(--serif); font-size: 14.5px; fill: var(--ink); }
.p-node .dt { font-size: 10.5px; fill: var(--ink-3); }
.p-node .gen { font-size: 9.5px; fill: var(--brand); letter-spacing: .06em; }
.p-node .mask { font-size: 10px; fill: var(--ink-3); }
.link { fill: none; stroke: #c8b69b; stroke-width: 1.3; }
.link.spouse { stroke: #d9b6a6; stroke-width: 1.6; stroke-dasharray: none; }
.gen-label { font-family: var(--serif); font-size: 11px; fill: #b9a88f; letter-spacing: .18em; }
.tree-hint {
  position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; color: var(--ink-3);
  background: rgba(255,253,248,.85); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line);
}

/* ---------------- 列表视图 ---------------- */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.m-card {
  display: flex; gap: 11px; padding: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.m-card:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.m-photo {
  width: 44px; height: 44px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--brand-soft); display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px; color: var(--brand);
  border: 1px solid #e8d3c3;
}
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-body { min-width: 0; flex: 1; }
.m-name { font-family: var(--serif); font-size: 15px; display: flex; align-items: center; gap: 6px; }
.m-line { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0; font-size: 12.5px; color: var(--ink-2); }

/* ---------------- 统计 ---------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px;
}
.stat .k { font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.stat .v { font-family: var(--serif); font-size: 24px; margin-top: 4px; color: var(--brand); }
.stat .v small { font-size: 12px; color: var(--ink-3); font-family: var(--sans); margin-left: 3px; }

/* ---------------- 抽屉 / 弹窗 ---------------- */
.drawer-mask, .modal-mask { position: fixed; inset: 0; background: rgba(43,36,29,.32); z-index: 90; }
.drawer-mask[hidden], .modal-mask[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  background: var(--paper); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-2); z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.drawer[hidden] { display: none; }
.drawer.open { transform: translateX(0); }
.drawer-head, .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-head h3, .modal-head h3 { font-size: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.modal-mask { display: grid; place-items: center; padding: 20px; }
.modal {
  width: min(560px, 100%); max-height: 86dvh; background: var(--paper);
  border-radius: 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column;
  border: 1px solid var(--line-2);
}
.modal-body { padding: 16px; overflow-y: auto; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* 详情区块 */
.detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.detail-head .m-photo { width: 60px; height: 60px; font-size: 24px; }
.detail-name { font-family: var(--serif); font-size: 21px; }
.detail-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.detail-section { margin-bottom: 18px; }
.detail-section h4 {
  font-size: 12px; color: var(--ink-3); letter-spacing: .16em; margin-bottom: 8px;
  padding-bottom: 5px; border-bottom: 1px dashed var(--line-2);
}
.kv { display: grid; grid-template-columns: 74px 1fr; gap: 6px 10px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-size: 12.5px; }
.kv dd { margin: 0; word-break: break-word; }
.rel-list { display: flex; flex-direction: column; gap: 5px; }
.rel-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-size: 13px;
}
.rel-item:hover { border-color: var(--brand); }
.rel-role { font-size: 11px; color: var(--ink-3); width: 34px; flex: none; }
.bio-text { font-size: 13px; line-height: 1.85; color: var(--ink); white-space: pre-wrap; }

/* ---------------- 表格 ---------------- */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .08em; padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--paper-2); white-space: nowrap; position: sticky; top: 0;
}
table.table td { padding: 10px 12px; border-bottom: 1px solid #f0e9dc; vertical-align: top; }
table.table tr:last-child td { border-bottom: none; }
table.table tr:hover td { background: #ffffff; }

/* ---------------- 提示 ---------------- */
.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  padding: 9px 16px; border-radius: 8px; background: #2b241d; color: #fff; font-size: 13px;
  box-shadow: var(--shadow-2); animation: toastIn .22s ease-out;
}
.toast.ok { background: #3d7a52; }
.toast.err { background: #e0413a; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------------- 登录页 ---------------- */
.auth-page {
  min-height: 100dvh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgba(200,170,130,.18), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(200,170,130,.18), transparent 40%),
    var(--paper);
}
.auth-card {
  width: min(400px, 100%); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 28px 26px; box-shadow: var(--shadow-2);
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .brand-mark { width: 52px; height: 52px; font-size: 28px; margin: 0 auto 12px; border-radius: 10px; }
.auth-brand h1 { font-size: 20px; }
.auth-brand p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); letter-spacing: .18em; }
.auth-switch { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }
.auth-switch a { cursor: pointer; }

/* ---------------- 设置页 ---------------- */
.setting-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.setting-group h4 { font-size: 13px; margin-bottom: 12px; color: var(--brand); }
.setting-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #efe6d7; }
.setting-row:last-child { border-bottom: none; }
.setting-row .lbl { font-size: 13px; }
.setting-row .lbl small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; cursor: pointer; background: #d9cfbf;
  border-radius: 20px; transition: background .2s;
}
.switch span::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(18px); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 640px) {
  /* 手机端标签全部露出：8 个标签横排必然藏掉一半，改成自动换行，
     用户不用"猜到还能往右滑"才能找到「谱书排版」「识谱点校」 */
  .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .tab { flex: 0 0 auto; padding: 8px 11px; font-size: 12.5px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  /* 桌面顶栏写死 grid-column: 2 / -1（横跨二级栏 + 主区）。窄屏只剩一列时，
     这个写法会逼浏览器造出一条被顶栏内容撑到 800+px 的隐式列，
     而 .main 落到 0 宽的第 1 列 —— 表现就是「手机端顶栏在、主区整片空白」。
     所以顶栏和主区必须一起钉回第 1 列，并用 minmax(0,1fr) 防止内容把列撑破。 */
  .topbar { grid-column: 1 / -1; min-width: 0; }
  .main { grid-column: 1 / -1; min-width: 0; }
  /* 手机：rail 74px 在 390 宽上占 19%，太挤。改成「☰ 一次性划出 rail + 二级栏」，
     划出总宽 74+230=304px，仍在屏幕内；主区永远是满宽。 */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 160px;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 111;
    box-shadow: 6px 0 0 #edeff3;
  }
  .sidebar.open { transform: translateX(0); }
  .subnav {
    position: fixed; top: 0; bottom: 0; left: 160px;
    width: min(180px, 52vw);
    transform: translateX(calc(-100% - 160px));
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 110;
    box-shadow: var(--shadow-2);
  }
  /* 顶栏插在 sidebar 与 subnav 之间了，必须用通用兄弟选择器（~），+ 已经匹配不到 */
  .sidebar.open ~ .subnav { transform: translateX(0); }
  .menu-btn { display: grid !important; }
  .page { padding: 14px 14px 40px; }
  .page-head h1 { font-size: 19px; }
  .page-head .actions { width: 100%; margin-left: 0; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .member-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .setting-row { grid-template-columns: 1fr; gap: 6px; }
  /* 族谱高度由 renderTree 实测写入，这里不再写死 calc（否则标题折行时会算错） */
  .topbar { padding: 0 10px; gap: 6px; }
  .search-wrap input { font-size: 16px; } /* 防 iOS 缩放 */
  .drawer { width: 100vw; }
  .kv { grid-template-columns: 68px 1fr; }
  table.table { font-size: 12.5px; }
  table.table th, table.table td { padding: 8px 9px; }
}

/* ---------------- 打印（谱书） ---------------- */
@media print {
  .sidebar, .topbar, .tree-toolbar, .tree-hint, .btn, .icon-btn, .tabs { display: none !important; }
  .app-shell { display: block; height: auto; }
  .view { overflow: visible; }
  body { background: #fff; }
  .page { padding: 0; }
  .m-card, .stat { break-inside: avoid; border-color: #bbb; }
}

/* ---- 原谱墨字：透明底剪影经 CSS mask 以 currentColor 渲染——与正文字同色同高，印刷/暗色协调 ---- */
i.gch {
  display: inline-block;
  height: 1.12em;
  width: 1.12em;
  vertical-align: -0.18em;
  margin: 0 1px;
  background: currentColor;
  -webkit-mask: var(--gimg) center / contain no-repeat;
  mask: var(--gimg) center / contain no-repeat;
  cursor: zoom-in;
}
/* 兼容回退：不支持 mask 的环境直接显示透明底 PNG（浅底上仍为墨字） */
img.gch {
  height: 1.12em;
  width: auto;
  max-width: 3.2em;
  object-fit: contain;
  vertical-align: -0.18em;
  margin: 0 1px;
  cursor: zoom-in;
}
.detail-name i.gch, .detail-name img.gch { height: 1.06em; }
.m-name i.gch, .m-name img.gch { height: 1.14em; }

/* ==========================================================================
   v3.1 家族工作台：左侧分组导航 + 右侧内容区（对齐百家有谱的信息架构）
   ========================================================================== */
.workbench {
  display: block;
  /* 源站内容区从 (90,70) 起：顶栏 60 + 10 间距，左边距 rail 右边 10 */
  padding: 10px 14px 16px;
}

/* ---------- 主区（导航已并入左侧一竖排折叠菜单，这里不再占一列） ---------- */
.wb-main { min-width: 0; }
.wb-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.wb-top h1 { font-family: var(--serif); font-size: 17.5px; line-height: 1.35; margin: 0; letter-spacing: .05em; }
.wb-top .sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; letter-spacing: .05em; }
.wb-top .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wb-acts-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-more { display: none; padding: 0 10px; font-size: 15px; line-height: 1; }
.wb-content { min-width: 0; }

/* ---------- 模块通用头部 ---------- */
.mod-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mod-head-l { min-width: 0; flex: 1 1 320px; }
.mod-head-r { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.mod-head h2 {
  font-family: var(--serif);
  font-size: 17px;
  margin: 0 0 4px;
  letter-spacing: .05em;
}
.mod-head .hint { margin: 0; line-height: 1.7; }
.mod-sum { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 8px; letter-spacing: .04em; }
.mini-search input {
  height: 32px;
  width: 170px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--card);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
}
.mini-search input:focus { outline: none; border-color: var(--brand); }

/* ---------- 数据表 ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding: 10px 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-2);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(243, 230, 220, .45); }
.data-table .cell-main { color: var(--ink); font-weight: 500; }
.data-table .cell-dim { color: var(--ink-3); font-size: 12.5px; }
.data-table .cell-ops { text-align: right; white-space: nowrap; }
.data-table .cell-ops .btn { margin-left: 4px; }

/* ---------- 关联选择器 ---------- */
.picker { position: relative; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.picker-chips:empty { margin-bottom: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12.5px;
}
.chip-x { cursor: pointer; font-weight: 400; opacity: .65; }
.chip-x:hover { opacity: 1; }
.picker-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--card);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
}
.picker-input:focus { outline: none; border-color: var(--brand); }
.picker-drop {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.picker-item { padding: 8px 11px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.picker-item:hover { background: var(--brand-soft); color: var(--brand-dark); }
.picker-empty { padding: 12px 11px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- 统计与分布 ---------- */
.gen-bars { display: grid; gap: 7px; margin-top: 10px; }
.gen-bar { display: grid; grid-template-columns: 58px 1fr 46px; align-items: center; gap: 10px; }
.gen-bar .gen-name { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.gen-bar i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--brand), #c07a55);
  min-width: 3px;
}
.gen-bar b { font-size: 12.5px; color: var(--ink-2); font-weight: 500; text-align: right; }

/* ---------- 账号空间 ---------- */
.box-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.box-row { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.box-row b { font-size: 19px; color: var(--ink); font-family: var(--serif); }
.box-card .bar {
  height: 10px;
  border-radius: 6px;
  background: var(--paper-2);
  margin: 12px 0 18px;
  overflow: hidden;
}
.box-card .bar i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.box-stat { background: var(--paper); border-radius: 8px; padding: 12px; text-align: center; }
.box-stat-v { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.box-stat-l { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------- 表单栅格 ---------- */
.form-grid { display: grid; gap: 12px; }
.form-grid .field { margin: 0; }
.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline label { margin: 0; }

/* ---------- 窄屏：左导航改为顶部横向滚动 ---------- */
@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 40px; }
  .wb-nav {
    position: static;
    max-height: none;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 10px;
    scrollbar-width: none;
  }
  .wb-nav::-webkit-scrollbar { display: none; }
  .wb-fam { display: none; }
  .wb-grp { display: none; }
  .wb-item {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .wb-item.active { border-color: var(--brand); }
  .wb-icon { display: none; }
  .mini-search input { width: 120px; }
  .data-table { font-size: 12.5px; }
  .data-table thead th, .data-table tbody td { padding: 8px 9px; }
}

/* ---------- v3.1 细节修订 ---------- */
/* 顶部家族名是这一页的主角（世系图页没有模块标题），用深色常规字号；
   模块页里模块名 19px 仍然更大，层级不冲突。 */
.wb-top h1 { font-size: 17px; font-weight: 600; color: var(--ink); }
.wb-top .sub { margin-top: 3px; }
.mod-head h2 { font-size: 19px; font-weight: 600; }

/* 统计分布放进卡片里，避免悬空 */
.gen-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.gen-card-t {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-2);
  margin-bottom: 10px;
}

/* ---------- 窄屏：数据表换成卡片式（铁律：宽表在手机上必须换形态） ---------- */
@media (max-width: 900px) {
  .table-wrap { overflow: visible; }
  .data-table {
    border: 0;
    background: transparent;
    display: block;
  }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 4px 0;
    box-shadow: var(--shadow-1);
  }
  .data-table tbody td {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 0;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.55;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 68px;
    color: var(--ink-3);
    font-size: 12px;
    padding-top: 1px;
    white-space: nowrap;
  }
  .data-table tbody td.cell-main { font-weight: 600; }
  .data-table tbody td.cell-ops {
    justify-content: flex-end;
    padding: 8px 12px 6px;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
  }
  .data-table tbody td.cell-ops::before { content: none; }
  .data-table tbody td.cell-ops .btn { margin-left: 6px; }
  .mod-head { gap: 8px; }
  .mod-head-r { width: 100%; margin-left: 0; }
  .mod-head-r .mini-search { flex: 1; }
  .mini-search input { width: 100%; }
}

/* ==========================================================================
   手机端 · 家族页版式（对齐百家有谱：标题 → 三个小按钮 → 族谱占满屏）
   必须放在文件最后：媒体查询不提升优先级，写在前面会被后面的桌面规则覆盖。
   ========================================================================== */
@media (max-width: 640px) {
  .workbench { padding: 12px 12px 12px; }
  /* 标题和「⋯」必须同一行：让标题可收缩、不让「⋯」被挤到下一行独占 40px 高。
     注意不能留 margin-left:auto —— 在 nowrap 下它会把剩余宽度全吸走，把标题压成竖排。 */
  .wb-top { margin-bottom: 10px; gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
  .wb-top-l { flex: 1 1 auto; min-width: 0; }
  .wb-top h1 { font-size: 16px; }

  /* 四个操作按钮收进「⋯」浮层：不再各占一行把族谱挤成一条。
     width:auto 必须显式写——旧的窄屏规则会把 .actions 撑成 100%，把标题挤成竖排。 */
  .wb-acts { position: relative; flex: none; margin-left: 0; width: auto; }
  .wb-acts-row { display: none; }
  .wb-more { display: inline-flex; }
  .wb-acts.open .wb-acts-row {
    display: flex; flex-direction: column; gap: 6px;
    position: absolute; right: 0; top: 36px; z-index: 40;
    min-width: 136px; padding: 8px;
    background: var(--card); border: 1px solid var(--line-2);
    border-radius: 10px; box-shadow: var(--shadow-2);
  }
  .wb-acts.open .wb-acts-row .btn { width: 100%; height: 32px; }

  /* 顶栏「添加族人」在手机上和「⋯」里的重复，让出宽度给搜索框 */
  .tb-add { display: none; }

  .tree-toolbar { gap: 6px; padding-bottom: 8px; }
  .tbtn { height: 28px; padding: 0 13px; font-size: 12px; }
  .tree-hint { display: none; }   /* 手机上这行提示只是噪音，手势本身就是常识 */
}

/* ============ 竖排世系图（tree-list.js） ============
   此前这个视图一条样式都没有，靠浏览器默认的 ul/li 撑着：
   默认项目符号看起来像折叠圆点，而 .collapsed 没有隐藏规则，
   于是 3929 人一路铺到 20 世。以下补齐完整样式。 */
.tl { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.tl-top {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 6px; border-bottom: 1px solid var(--line);
  background: var(--paper); flex: none;
}
.tl-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: thin; }
.tl-tabs::-webkit-scrollbar { height: 4px; }
.tl-tab {
  flex: none; padding: 4px 11px; font-size: 12.5px; color: var(--ink-3);
  border-radius: 6px; cursor: pointer; white-space: nowrap; user-select: none;
}
.tl-tab:hover { background: var(--brand-soft); color: var(--brand); }
.tl-tab.on { background: var(--brand); color: #fff; font-weight: 600; }
.tl-tab.main { font-weight: 600; }

.tbtn {
  flex: none; padding: 4px 10px; font-size: 12px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.tbtn:hover { border-color: var(--brand); color: var(--brand); }

.tl-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 16px 60px 12px; }

/* 树本体：去掉浏览器默认项目符号，改用左侧竖线 + 缩进 */
.tl-tree, .tl-tree ul { list-style: none; margin: 0; padding: 0; }
.tl-tree ul {
  margin-left: 11px; padding-left: 14px;
  border-left: 1px solid var(--line);
}
.tl-tree li { position: relative; padding: 1px 0; }
/* 每个子节点向左连回竖线 */
.tl-tree ul > li::before {
  content: ''; position: absolute; left: -14px; top: 17px;
  width: 12px; height: 1px; background: var(--line);
}
/* 折叠时不渲染子树 —— 这是此前缺失的关键一条 */
.tl-tree li.collapsed > ul { display: none; }

.tl-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 2px; border-radius: 6px; cursor: pointer;
  line-height: 1.6; max-width: 100%;
}
.tl-node:hover { background: var(--brand-soft); }
.tl-node.sel { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }

.tl-tg {
  flex: none; width: 17px; height: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; padding: 0;
}
.tl-tg:hover { border-color: var(--brand); color: var(--brand); background: #fdf3ea; }
.tl-tg.leaf { border: none; background: none; color: var(--ink-3); cursor: default; font-size: 14px; }

.tl-gen {
  flex: none; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tl-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.tl-name.f { color: #e0413a; }
.tl-rank {
  flex: none; font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
  background: #ffffff;
}
.tl-sp {
  flex: none; font-size: 12px; color: #8a5a3a;
  background: #fbf1e8; border-radius: 4px; padding: 0 5px;
}
/* 选中且还没配偶的人，节点上挂一颗「＋添加配偶」——源站就是这样，
   不用先去右栏找「配偶」那颗图标键。 */
.tl-addsp {
  flex: none; margin-left: 4px; font-size: 11.5px; line-height: 1;
  padding: 3px 7px; border-radius: 999px; cursor: pointer;
  border: 1px dashed #f8c39a; background: #ffffff; color: #d95a00;
  font-family: inherit;
}
.tl-addsp:hover { background: #fff3e8; border-style: solid; color: #d95a00; }
.tl-empty { padding: 40px; text-align: center; color: var(--ink-3); }

/* ============================================================================
   客户端首页（对齐百家有谱）· 家族书封卡片 / 配额条 / 分组筛选
   源站形态：顶部一条「分组 + 搜索 + 配额」，下面按区块陈列书封卡片，
   书封是「书脊 + 封面 + 竖排书名 + 高级角标」，不是普通圆角卡片。
   ============================================================================ */

.hm { padding: 0 0 48px; }

/* 顶部工具条：与源站同构 —— 左侧筛选，右侧配额 */
.hm-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 22px; border-bottom: 1px solid var(--line);
  background: var(--card); position: sticky; top: 0; z-index: 6;
}
.hm-bar .hm-sel {
  height: 30px; min-width: 112px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--card); color: var(--ink); font-size: 12.5px; font-family: inherit;
}
.hm-bar .hm-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  padding: 4px 6px; border-radius: 6px; background: none; border: 0; font-family: inherit;
}
.hm-bar .hm-link:hover { color: var(--brand); background: var(--brand-soft); }
.hm-bar .sp { flex: 1; }

/* 配额条：源站是「管理家族 ▬▬▬▬ 1/1 [扩容] 协管:0 协作:0」 */
.hm-qp { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.hm-qp .qp-name { color: var(--ink-2); }
.hm-qp .qp-track {
  width: 84px; height: 7px; border-radius: 4px; overflow: hidden;
  background: #eee6d8; position: relative;
}
.hm-qp .qp-track i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #f86e04, #d3702a);
  transition: width .3s;
}
.hm-qp .qp-track.full i { background: linear-gradient(90deg, #d4553a, #b33f2a); }
.hm-qp .qp-num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hm-qp .qp-num b { color: var(--brand); font-weight: 600; }
.hm-qp .qp-btn {
  height: 24px; padding: 0 9px; font-size: 12px; font-family: inherit;
  color: var(--brand); background: #fff; border: 1px solid var(--brand);
  border-radius: 4px; cursor: pointer;
}
.hm-qp .qp-btn:hover { background: var(--brand); color: #fff; }
.hm-qp .qp-side { color: var(--ink-3); font-size: 11.5px; }
.hm-qp .qp-side b { color: var(--ink-2); font-weight: 600; }

/* 区块：左边一条竖杠 + 标题（源站就是这个样式） */
.hm-sec { padding: 22px 22px 0; }
.hm-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hm-sec-head h2 {
  position: relative; margin: 0; padding-left: 11px;
  font-size: 16px; font-weight: 600; color: var(--ink); font-family: var(--serif);
  letter-spacing: .04em;
}
.hm-sec-head h2::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: #f86e04;
}
.hm-sec-head .hm-link { font-size: 12.5px; }
.hm-sec-head .sp { flex: 1; }

/* 书封网格 */
.fb-grid { display: flex; flex-wrap: wrap; gap: 26px 34px; align-items: flex-start; }

/* 单本书：书封 + 书名 + 两个操作 */
.fbook { width: 132px; cursor: pointer; }
.fbook-cover {
  position: relative; width: 132px; height: 176px;
  display: flex; overflow: hidden;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 6px 18px rgba(60, 44, 30, .18), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: transform .18s, box-shadow .18s;
  background: var(--cb, #6b6f9e);
}
.fbook:hover .fbook-cover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(60, 44, 30, .24); }

/* 书脊：略深，四道竖排装饰线（源站书脊上有 4~5 道横线） */
.fb-spine {
  position: relative; flex: none; width: 21px;
  background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.05));
}
.fb-spine i {
  position: absolute; left: 5px; right: 5px; height: 1px;
  background: rgba(255,255,255,.42);
}
.fb-spine i:nth-child(1) { top: 16px; }
.fb-spine i:nth-child(2) { top: 30px; }
.fb-spine i:nth-child(3) { top: 44px; }
.fb-spine i:nth-child(4) { top: 58px; }
.fb-spine i:nth-child(5) { top: 72px; }

.fb-face {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 8px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
/* 竖排书名：白底细框 + 竖排 + 拉开字距，与源站一致 */
.fb-title {
  writing-mode: vertical-rl; text-orientation: upright;
  width: 30px; box-sizing: content-box;   /* 锁死一列，长书名不再折列撑破书封 */
  padding: 9px 6px; max-height: 144px;
  background: #fdfaf0; border: 1px solid rgba(0,0,0,.16);
  font-family: var(--serif); font-size: 15px; letter-spacing: .34em;
  color: #2b241d; line-height: 1.15; text-align: center;
  overflow: hidden; text-overflow: ellipsis;
}
/* 等级标：我方为圆角贴片 + 描边，不做斜角带（避免与他方标识形态雷同） */
.fb-badge {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  padding: 1px 6px; font-size: 10px; letter-spacing: .06em;
  color: #7a3d24; background: rgba(253, 246, 236, .94);
  border: 1px solid rgba(140, 74, 47, .38); border-radius: 999px;
}
.fb-badge.plain { color: #4a5a68; background: rgba(246, 248, 250, .94); border-color: rgba(74, 90, 104, .32); }

.fbook-name {
  margin-top: 9px; font-size: 13.5px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fbook-acts { display: flex; gap: 12px; margin-top: 3px; }
.fbook-acts a { font-size: 12px; color: var(--ink-3); text-decoration: none; }
.fbook-acts a:hover { color: var(--brand); text-decoration: underline; }

/* 「＋ 创建家族/家谱」虚线卡：与书封同高，虚线框内一个大加号 */
.fb-new {
  width: 132px; height: 176px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--line-2); border-radius: 3px; background: transparent;
  color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 12.5px;
}
.fb-new:hover { border-color: var(--brand); color: var(--brand); background: #ffffff; }
.fb-new .plus { font-size: 30px; line-height: 1; color: inherit; font-weight: 300; }

.fb-empty { padding: 26px; color: var(--ink-3); font-size: 13px; }

/* 手机端：一行两本 */
@media (max-width: 700px) {
  .hm-bar { padding: 8px 12px; }
  .hm-qp .qp-side { display: none; }
  .hm-sec { padding: 16px 12px 0; }
  .fb-grid { gap: 18px 16px; }
  .fbook, .fbook-cover, .fb-new { width: 104px; }
  .fbook-cover, .fb-new { height: 140px; }
  .fb-title { font-size: 13px; }
}

/* ---- 首页弹窗内的表单控件（.inp / .fld-l）---- */
.fld-l {
  display: block; font-size: 12px; color: var(--ink-2);
  letter-spacing: .04em; margin-bottom: 5px;
}
.inp {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--card); color: var(--ink);
  font-size: 13px; font-family: inherit;
}
.inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ---- 家族排序 / 分组管理 ---- */
.sort-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.sort-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card);
}
.sort-idx {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--ink-3); background: var(--paper-2);
  font-variant-numeric: tabular-nums;
}
.sort-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-row .inp { max-width: 200px; height: 30px; }

/* ---- 套餐与用量 ---- */
.qtable { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.qrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.qname { flex: none; width: 62px; color: var(--ink-2); }
.qbar { flex: 1; height: 8px; border-radius: 4px; background: #eee6d8; overflow: hidden; }
.qbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f86e04, #d3702a); }
.qnum { flex: none; width: 108px; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.plan-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: var(--card);
  display: flex; flex-direction: column; gap: 8px;
}
.plan-card.cur { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.plan-name { font-size: 14px; font-weight: 600; color: var(--ink); font-family: var(--serif); display: flex; align-items: center; gap: 6px; }
.plan-cur { font-size: 10px; font-weight: 400; color: #fff; background: var(--brand); border-radius: 3px; padding: 1px 5px; }
.plan-price { color: var(--brand); font-size: 12px; }
.plan-price b { font-size: 19px; font-family: var(--serif); }
.plan-price i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.plan-dims { display: flex; flex-direction: column; gap: 3px; }
.plan-dim { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.plan-dim b { color: var(--ink); font-weight: 500; }
.plan-foot { margin-top: auto; font-size: 11.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 7px; }
.plan-card.cur .plan-foot { color: var(--brand); }

@media (max-width: 700px) {
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .qnum { width: 88px; }
}

/* ============================================================================
   谱系 · 三栏工作台（左分支与统计 / 中世系 / 右竖排操作与人物面板）
   功能同构、视觉自绘：底色走宣纸系，分隔用细线，不用他方的灰底卡片语言。
   ============================================================================ */
.tree3 {
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr) 54px 306px;
  height: calc(100vh - 218px);
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}

/* ---------- 左栏 ---------- */
.tree3-left {
  border-right: 1px solid var(--line);
  padding: 10px 10px 16px;
  overflow: auto;
  background: #ffffff;
}
.t3-l-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em;
  padding: 4px 2px 8px;
}
.t3-ico {
  width: 20px; height: 20px; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--ink-3); font-size: 13px; line-height: 1;
  display: grid; place-items: center;
}
.t3-ico:hover { background: var(--brand-soft); color: var(--brand); }
/* 「更新 / 收起」写成字，不写图标：图标要靠 hover 猜，字不用 */
.t3-txtbtn {
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  background: #fff; color: var(--ink-2); font-size: 11.5px; line-height: 1;
  padding: 3px 7px; font-family: inherit;
}
.t3-txtbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.t3-txtbtn:disabled { opacity: .5; cursor: default; }
.t3-branch {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer; background: #fff;
}
.t3-branch.on { border-color: #f8b682; box-shadow: 0 0 0 2px rgba(232,145,63,.14); background: #ffffff; }
.t3-branch-ico {
  width: 20px; height: 20px; flex: none; border-radius: 4px;
  display: grid; place-items: center; font-size: 11px;
  background: var(--brand); color: #fff; font-family: var(--serif);
}
.t3-branch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3-newbranch {
  width: 100%; margin-top: 8px; padding: 9px 0;
  border: 1px dashed var(--line-2); border-radius: 8px;
  background: transparent; color: var(--ink-3); font-size: 12.5px;
  font-family: inherit; cursor: pointer;
}
.t3-newbranch:hover { border-color: var(--brand); color: var(--brand); background: #ffffff; }
.t3-l-sep { height: 1px; background: var(--line); margin: 14px 0 10px; }

.t3-stats { display: flex; flex-direction: column; gap: 7px; }
.t3-stat { display: grid; grid-template-columns: 46px 44px 1fr; align-items: center; gap: 6px; font-size: 12px; }
.t3-stat-n { color: var(--ink-2); }
.t3-stat-v { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.t3-stat-bar { height: 6px; border-radius: 3px; background: #efe6d6; overflow: hidden; }
.t3-stat-bar i { display: block; height: 100%; border-radius: 3px; background: #f86e04; }
.t3-stat-hint { font-size: 11.5px; color: var(--ink-3); padding-top: 2px; }

/* ---------- 中栏 ---------- */
.tree3-mid { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.t3-bar {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card);
}
.t3-bar-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1; }
.t3-bar-r { display: flex; align-items: center; gap: 6px; }
.t3-search {
  width: 168px; height: 28px; padding: 0 9px;
  border: 1px solid var(--line-2); border-radius: 6px; font-size: 12.5px;
  font-family: inherit; color: var(--ink); background: #fff;
}
.t3-search:focus { outline: none; border-color: var(--brand); }
.t3-btn {
  height: 28px; padding: 0 9px; font-size: 12.5px; font-family: inherit;
  color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.t3-btn:hover { border-color: var(--brand); color: var(--brand); }
.t3-div { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }
.t3-tip { font-size: 12px; color: var(--danger); }
.t3-menu-wrap { position: relative; display: inline-block; }
.t3-menu {
  position: absolute; top: 32px; left: 0; z-index: 20;
  min-width: 168px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 1px;
}
/* hidden 在本文件里被 display:flex 覆盖过，菜单会一直展开 —— 必须显式关掉 */
.t3-menu[hidden] { display: none; }
.t3-menu button {
  text-align: left; padding: 7px 9px; font-size: 12.5px; font-family: inherit;
  color: var(--ink-2); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.t3-menu button:hover { background: var(--brand-soft); color: var(--brand); }
.tree-mode { display: inline-flex; gap: 2px; margin-left: 4px; }
.tree-mode .tbtn { height: 26px; padding: 0 8px; }

/* 续录提示条：一条细带，不抢世系的地方，但一眼能看见 */
.t3-resume {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 6px 12px; border-bottom: 1px solid var(--line);
  background: #fbf3e2; font-size: 12.5px; color: var(--ink-2);
}
.t3-resume[hidden] { display: none; }
.t3-resume-t { white-space: nowrap; }
.t3-resume-a {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  color: var(--brand); font-size: 12.5px; text-decoration: underline;
}
.t3-resume-a:hover { color: var(--brand-dark); }

/* 世次标签条 */
.t3-tabs {
  flex: none; display: flex; align-items: center; gap: 3px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: #ffffff; overflow-x: auto; scrollbar-width: thin;
}
.t3-tabs::-webkit-scrollbar { height: 4px; }
.t3-tabs .tl-tab { border: 1px solid transparent; border-radius: 5px; }
.t3-tabs .tl-tab.on { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.t3-tree { flex: 1; min-height: 0; display: flex; }
.t3-tree > .tl { flex: 1; min-height: 0; }
.t3-tree.no-spouse .tl-sp { display: none; }
.t3-tree.big-font .tl-name { font-size: 17px; }

/* ---------- 竖排操作条 ---------- */
.tree3-rail {
  border-left: 1px solid var(--line); background: #ffffff;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 0; overflow-y: auto;
}
.t3-rail-btn {
  width: 44px; padding: 4px 0; border: 0; border-radius: 7px; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--ink-3); cursor: pointer; font-family: inherit;
}
.t3-rail-btn:hover { background: var(--brand-soft); color: var(--brand); }
.t3-rail-btn:disabled { opacity: .38; cursor: not-allowed; }
.t3-rail-ico { font-size: 14px; line-height: 1.1; font-family: var(--serif); }
.t3-rail-txt { font-size: 10.5px; letter-spacing: .02em; }

/* ---------- 右栏：人物面板 ---------- */
.tree3-right { border-left: 1px solid var(--line); overflow: auto; background: #ffffff; }
.tree3.pn-hidden { grid-template-columns: 198px minmax(0, 1fr) 54px 0; }
.tree3.pn-hidden .tree3-right { display: none; }
.pn-head {
  display: flex; gap: 10px; padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line); background: #ffffff;
}
/* 面板头部下面两颗动作键：添加孩子 / 添加兄妹 —— 常驻可见，不藏在图标里 */
.pn-acts {
  display: flex; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-2); background: #fff;
}
.pn-act {
  padding: 6px 8px; border-radius: 7px; cursor: pointer; font-family: inherit;
  border: 1px solid #f8c39a; background: #ffffff; color: #d95a00;
  font-size: 12px; line-height: 1.1; white-space: nowrap;
}
.pn-act:hover { background: #fff3e8; border-color: var(--brand); color: #d95a00; }
.pn-act:disabled { opacity: .45; cursor: not-allowed; }
.pn-photo {
  position: relative; flex: none; width: 62px; height: 62px; border-radius: 8px;
  display: grid; place-items: center; font-size: 10.5px; color: var(--ink-3);
  background: #f2e9d9; border: 1px solid var(--line-2); overflow: hidden; cursor: pointer;
}
.pn-photo img { width: 100%; height: 100%; object-fit: cover; }
.pn-photo .pn-dot {
  position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid #fff;
}
.pn-dot.live { background: #4f8a52; }
.pn-dot.dead { background: #9a9184; }
.pn-head-r { flex: 1; min-width: 0; }
.pn-title-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pn-title-line b { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.pn-chip { font-size: 10.5px; color: var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 0 5px; }
.pn-chip.grey { color: var(--ink-3); background: var(--paper-2); }
.pn-head-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.6; }
.pn-fold {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 5px;
  background: #fff; color: var(--ink-3); cursor: pointer; font-size: 12px; line-height: 1;
}
.pn-fold:hover { border-color: var(--brand); color: var(--brand); }

/* 折叠后常驻的「展开」入口：贴布局容器右缘，纵向文字，避免和面板一起被藏 */
.pn-reopen {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  z-index: 40; writing-mode: vertical-rl; letter-spacing: .12em;
  height: 120px; padding: 8px 4px; border: 1px solid var(--brand); border-radius: 6px;
  background: var(--brand-soft, #eef4ff); color: var(--brand); cursor: pointer;
  font-size: 12px; font-family: inherit;
}
.pn-reopen:hover { background: var(--brand); color: #fff; }
.pn-more { font-weight: 600; }
.pn-more:disabled { opacity: .5; cursor: not-allowed; }

/* 关系出处（双向互链，所有角色可见） */
.pn-rel-links { display: flex; flex-direction: column; gap: 4px; }
.pn-rel-link { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pn-rel-tag {
  flex: none; padding: 1px 6px; border-radius: 4px;
  background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line);
}
.pn-rel-name { color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pn-rel-name:hover { color: var(--brand-dark, #1a4fb0); }

.pn-notes { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.pn-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pn-body { padding: 10px 12px 22px; }
.pn-sec {
  font-size: 12px; color: var(--ink-3); letter-spacing: .06em;
  margin: 10px 0 7px; display: flex; align-items: center; justify-content: space-between;
}
.pn-sec-kids { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pn-row { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 6px; margin-bottom: 7px; }
.pn-row.wide { align-items: start; }
.pn-l { font-size: 12px; color: var(--ink-3); }
.pn-inp {
  width: 100%; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); font-size: 12.5px; font-family: inherit;
}
.pn-inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pn-inp[readonly] { background: #f7f8fa; color: var(--ink-3); }
.pn-date { display: flex; gap: 3px; }
.pn-date select { flex: 1; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; font-family: inherit; color: var(--ink); }
.pn-parents { display: grid; grid-template-columns: 1fr 1fr 54px; gap: 4px; }
.pn-bind {
  width: 100%; height: 28px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 6px;
}
.pn-bind.on { color: var(--ink-2); border-color: var(--line-2); background: #f7f8fa; }
.pn-bind:hover { background: var(--brand-soft); }

.pn-kids { display: flex; flex-direction: column; gap: 3px; }
.pn-kid {
  display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 6px;
  font-size: 12.5px;
}
.pn-kid:hover { background: var(--paper-2); }
.pn-kid-rank { flex: none; width: 34px; color: var(--ink-3); font-size: 11.5px; }
.pn-kid-name { flex: 1; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-kid-name:hover { color: var(--brand); text-decoration: underline; }
.pn-kid-order { display: flex; gap: 1px; }
.pn-mini {
  width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink-3); font-size: 10px; line-height: 1; cursor: pointer;
}
.pn-mini:hover { border-color: var(--brand); color: var(--brand); }
.pn-mini:disabled { opacity: .35; cursor: not-allowed; }
.pn-kid-empty { font-size: 12px; color: var(--ink-3); padding: 4px 2px; }
.pn-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px; line-height: 1.9; }
.pn-empty-ico {
  width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-2);
  font-family: var(--serif); font-size: 18px; color: var(--ink-3);
}

/* 弹窗内小控件 */
.t3-ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 2; }
.t3-chks { display: flex; flex-direction: column; gap: 9px; }
.t3-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.t3-glyph-prev {
  margin-top: 10px; min-height: 84px; border: 1px dashed var(--line-2); border-radius: 8px;
  display: grid; place-items: center; color: var(--ink-3); font-size: 12px; overflow: hidden;
}
.t3-glyph-prev img { max-width: 100%; max-height: 160px; }

/* 窄屏：先收左栏，再收右栏（手机上点族人改用抽屉，见 renderTreeList） */
@media (max-width: 1320px) {
  .tree3 { grid-template-columns: minmax(0, 1fr) 54px 288px; }
  .tree3-left { display: none; }
}
@media (max-width: 1000px) {
  .tree3 { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 190px); }
  .tree3-rail, .tree3-right { display: none; }
  .pn-fold { display: none; }
}

/* ============ 管理总览（六组入口网格，照源站形态） ============
   源站实测：分组是独立白卡（圆角 6、无边框、内边距 16），
   标题 13.5px + 左侧 3×14 橙色竖条；格子是浅灰底（#f4f6f9）无边框，
   左 26px 彩色圆角方块图标 + 右侧 13px 文字，高 44。 */
/* 源站管理页是 2 行 3 列的分组网格（协作修谱 / 家族管理 / 族员管理 第一行），
   不是单列竖排；分组卡等宽约 260px，主区右侧留白 */
/* 源站实测：三列各 360px、列距 20px、内容区从 x=90 起铺满（不设最大宽度） */
.mg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 20px; width: 100%; }
@media (max-width: 1180px) { .mg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mg { grid-template-columns: 1fr; } }
.mg-quota { font-size: 12px; color: var(--ink-3); background: var(--paper-2); border-radius: 999px; padding: 3px 10px; }
/* 源站实测：分组卡 360×226 固定高、内边距 14、标题行 44（标题下沿 y=58 起是入口网格） */
.mg-sec { background: var(--card); border: 0; border-radius: 8px; padding: 14px; min-height: 226px; box-sizing: border-box; }
.mg-sec-h {
  position: relative;
  display: flex; align-items: center;
  font-size: 13.5px; color: var(--ink); font-weight: 600; letter-spacing: .02em;
  height: 44px; margin: 0; padding: 0 0 0 11px; border-bottom: 0;
}
.mg-sec-h::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--brand);
}
.mg-sec-ico { display: none; }
/* 源站实测：一行两格、每格 159×68、列距 14、行距 16（格子起点 x=104/277，y=128/212） */
.mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.mg-cell {
  display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; height: 68px; box-sizing: border-box;
  border: 0; border-radius: 6px;
  background: #f4f6f9; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.mg-cell:hover { background: #eaeff6; }
/* ---------- 待处理数字角标：有几条显示几条，0 条完全不画 ----------
   数字来自 /api/families/:id/manage-badges 的真实计数，界面不猜、不编。 */
.mg-cell { position: relative; }
.mg-cell.has-badge { background: #fdf3f1; }
.mg-cell.has-badge:hover { background: #fbe8e3; }
.mg-cell.has-badge .mg-cell-t { padding-right: 22px; }
.mg-badge {
  position: absolute; top: 4px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: #d8452f; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(180,50,35,.28); pointer-events: none;
}
.mg-sec-h { gap: 8px; }
.mg-sec-badge {
  margin-left: auto; flex: none;
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 6px; background: #fbe8e3; color: #b23b28;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
@media (max-width: 760px) {
  .mg-badge { top: 3px; right: 4px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
  .mg-cell.has-badge .mg-cell-t { padding-right: 18px; }
}
.mg-cell-ic {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  color: #fff; font-family: var(--serif); font-size: 12.5px; line-height: 1;
}
/* 图标底色按源站的六组配色分配 */
.mg-cell-ic.tone-blue { background: #5f83af; }
.mg-cell-ic.tone-amber { background: #d9a13c; }
.mg-cell-ic.tone-green { background: #57ab7c; }
.mg-cell-ic.tone-purple { background: #9a5fb5; }
.mg-cell-ic.tone-slate { background: #6b7c93; }
.mg-cell-t { font-size: 13px; color: var(--ink); font-weight: 400; }
.mg-cell-d { display: none; }

/* 族员绑定列表 */
.bind-list { display: flex; flex-direction: column; gap: 4px; }
.bind-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.bind-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bind-gen { flex: none; font-size: 11.5px; color: var(--ink-3); width: 42px; }
@media (max-width: 700px) { .mg-grid { grid-template-columns: 1fr 1fr; } }

/* ============ 谱书工作台（四步出谱） ============ */
.bk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; }
.bk-step {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 12px; color: var(--ink-3);
}
.bk-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--brand-soft); color: var(--brand); font-family: var(--serif);
}
.bk-step b { display: block; font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.bk-step span:last-child { line-height: 1.5; }

.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.bk-card {
  display: flex; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.bk-spine {
  flex: none; width: 74px; height: 104px; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(160deg, #6b5344, #4a3a2f);
  display: grid; place-items: center; padding: 8px;
  box-shadow: inset -6px 0 10px rgba(0,0,0,.22);
}
.bk-spine.on { background: linear-gradient(160deg, #f86e04, #5e3120); }
.bk-spine span {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--serif); font-size: 12px; letter-spacing: .22em; color: #fdfaf0;
  max-height: 88px; overflow: hidden;
}
.bk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-name { font-size: 14.5px; color: var(--ink); font-weight: 600; font-family: var(--serif); }
.bk-meta { font-size: 12px; color: var(--ink-3); }
.bk-nums { font-size: 12.5px; color: var(--ink-2); }
.bk-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.bk-acts .btn { height: 28px; padding: 0 11px; font-size: 12.5px; }

/* 四步向导 */
.bw-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bw-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); padding: 4px 9px; border-radius: 999px;
  background: var(--paper-2);
}
.bw-step i {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 10px; background: #fff; color: var(--ink-3);
}
.bw-step.on { background: var(--brand); color: #fff; }
.bw-step.on i { background: rgba(255,255,255,.28); color: #fff; }
.bw-step.done { background: var(--brand-soft); color: var(--brand); }
.bw-step.done i { background: var(--brand); color: #fff; }
.bw-pane { min-height: 140px; }
.bw-chaps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bw-sum { display: flex; flex-direction: column; gap: 8px; }
.bw-sum > div { display: flex; gap: 10px; font-size: 13px; }
.bw-sum span { flex: none; width: 58px; color: var(--ink-3); }
.bw-sum b { flex: 1; color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .bk-steps { grid-template-columns: 1fr 1fr; }
  .bk-grid { grid-template-columns: 1fr; }
  .bw-chaps { grid-template-columns: 1fr; }
}

/* ============ 卷轴工作台（三步出幅） ============
   与谱书共用 .bk-steps / .bw-steps / .bw-sum，只补卷轴独有的形态预览：
   卷轴是长条、挂图是竖幅，缩略图按真实比例画，一眼能分出两张产物。 */
.sc-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 18px; }
.sc-kind {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--card); font-family: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.sc-kind:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(140, 74, 47, .08); }
.sc-kind-i {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--serif); font-size: 18px;
  background: var(--brand-soft); color: var(--brand);
}
.sc-kind > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-kind b { font-size: 14px; font-weight: 600; }
.sc-kind span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.sc-kind-go { flex: none; font-size: 12px; color: var(--brand); }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sc-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--card);
}
/* 纸色 + 上下卷边，模拟真正的卷面；不描边太像卡片，描重了又脏 */
.sc-thumb {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; width: 100%;
  background: linear-gradient(180deg, #ffffff, #f7f1e4);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 6px 0 -3px rgba(140, 74, 47, .5), inset 0 -6px 0 -3px rgba(140, 74, 47, .5);
}
.sc-thumb-t {
  font-family: var(--serif); font-size: 15px; letter-spacing: .28em;
  color: #4a2f1d; text-align: center; padding: 0 10px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-thumb-s { font-size: 10.5px; color: #8a7a66; letter-spacing: .04em; }
.sc-thumb.poster .sc-thumb-t { writing-mode: vertical-rl; letter-spacing: .3em; font-size: 16px; }
.sc-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sc-meta { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* 向导里的选项：一行一个，勾选区大一点，手机上不至于点空 */
.sc-opt {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 2px; cursor: pointer;
}
.sc-opt input { margin-top: 3px; }
.sc-opt > div { display: flex; flex-direction: column; gap: 2px; }
.sc-opt b { font-size: 13px; font-weight: 500; }
.sc-opt span { font-size: 11.5px; color: var(--ink-3); }
.sc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-pick-i {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff; font-family: inherit; color: var(--ink);
}
.sc-pick-i b { font-size: 13px; }
.sc-pick-i span { font-size: 11.5px; color: var(--ink-3); }
.sc-pick-i.on { border-color: var(--brand); background: var(--brand-soft); }
.sc-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-size {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: #fff; font-family: inherit; color: var(--ink);
}
.sc-size b { font-size: 12px; }
.sc-size span { font-size: 11px; color: var(--ink-3); }
.sc-size.on { border-color: var(--brand); background: var(--brand-soft); }

@media (max-width: 760px) {
  .sc-kinds, .sc-pick, .sc-sizes { grid-template-columns: 1fr; }
  .sc-grid { grid-template-columns: 1fr; }
}

/* ============ 谱文在线排版编辑器 ============
   结构对齐源站（左目录 / 中工具栏+画布 / 右缩略图+属性），
   配色与控件全部自绘，不用对方任何图标与样式。 */
.pw { display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 560px; margin: -4px 0 0; }

/* 顶栏 */
.pw-head {
  display: flex; align-items: center; gap: 10px; padding: 6px 2px 8px;
  border-bottom: 1px solid var(--line);
}
.pw-head-l { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pw-back {
  width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--card); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.pw-back:hover { border-color: var(--brand); color: var(--brand); }
.pw-title {
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  font-family: var(--serif); font-size: 17px; color: var(--ink); padding: 4px 8px;
  letter-spacing: .04em; width: 240px; min-width: 120px;
}
.pw-title:hover { border-color: var(--line); }
.pw-title:focus { outline: none; border-color: var(--brand); background: #fff; }
.pw-crumb { font-size: 12px; color: var(--ink-3); }
.pw-head-r { display: flex; align-items: center; gap: 12px; }
.pw-pageinfo { font-size: 12px; color: var(--ink-3); }
.pw-save { font-size: 11.5px; color: var(--ok); }
.pw-save.dirty { color: var(--warn); }
.pw-save.err { color: var(--danger); }

/* 工具栏 */
.pw-tools { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.pw-tr { display: flex; align-items: center; gap: 3px; padding: 5px 6px; flex-wrap: wrap; }
.pw-tr + .pw-tr { border-top: 1px solid var(--line); }
.pw-tr-sp { flex: 1; }
.pw-sel {
  height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  font-size: 12.5px; font-family: inherit; color: var(--ink); padding: 0 4px;
}
.pw-sel-s { width: 72px; }
.pw-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 5px; }
.pw-i {
  min-width: 26px; height: 26px; padding: 0 5px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: 14px; line-height: 1;
  font-family: var(--serif);
}
.pw-i:hover { background: #fff; border-color: var(--line-2); color: var(--brand); }
.pw-i-c { border-bottom: 3px solid var(--brand); }
.pw-txtbtn {
  height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 6px;
  background: #fff; color: var(--ink-2); cursor: pointer; font-size: 12px; font-family: inherit;
  white-space: nowrap;
}
.pw-txtbtn:hover { border-color: var(--brand); color: var(--brand); }
.pw-zoom { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.pw-zoom input { width: 88px; }

/* 三栏 */
.pw-body { flex: 1; display: grid; grid-template-columns: 196px minmax(0, 1fr) 208px; min-height: 0; }
.pw-left { border-right: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.pw-left-h {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.pw-mini {
  border: 1px solid var(--line-2); border-radius: 5px; background: #fff;
  font-size: 11px; color: var(--ink-2); padding: 1px 5px; cursor: pointer; font-family: inherit;
}
.pw-mini:hover { border-color: var(--brand); color: var(--brand); }
.pw-tree { flex: 1; overflow-y: auto; padding: 6px 6px 10px; }
.pw-n1 {
  display: flex; align-items: center; gap: 5px; padding: 6px 6px; border-radius: 6px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.pw-n1:hover { background: var(--paper-2); }
.pw-caret { font-style: normal; font-size: 9px; color: var(--ink-3); width: 9px; }
.pw-n1t { flex: 1; }
.pw-n1c { font-size: 11px; color: var(--ink-3); }
.pw-n2 {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 20px; border-radius: 6px; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer;
}
.pw-n2:hover { background: var(--paper-2); }
.pw-n2.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.pw-n2t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-n2p { font-size: 10.5px; color: var(--ink-3); }
.pw-nadd {
  padding: 4px 6px 4px 20px; font-size: 11.5px; color: var(--ink-3); cursor: pointer;
}
.pw-nadd:hover { color: var(--brand); }
.pw-quota { padding: 8px 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
.pw-quota-bar { height: 4px; border-radius: 3px; background: var(--line); margin-top: 5px; overflow: hidden; }
.pw-quota-bar i { display: block; height: 100%; background: var(--brand); }

/* 画布 */
.pw-mid { background: #eceff3; overflow: auto; padding: 16px 0 40px; }
.pw-stage { display: flex; justify-content: center; }
.pw-canvas-wrap { position: relative; }
.pw-paper {
  position: relative; background: #fff; box-shadow: 0 2px 16px rgba(30, 30, 40, .16);
  transform-origin: top center;
}
/* 书耳：竖排在装订边外侧，四段——谱名 / 支派·世代 / 本册页次 / 堂号。
   坑：容器自己是 writing-mode:vertical-rl 时，flex 的主轴跟着转 90°，
   column 变成"从左往右排"，四段会并排而不是上下摞。所以容器保持横排，
   只让每一段自己竖排。 */
.pw-edge {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--serif); color: #4a4038;
  pointer-events: none; user-select: none;
}
.pw-edge > div { writing-mode: vertical-rl; text-orientation: upright; }
.pw-edge .e-name { font-size: 12.5px; letter-spacing: .2em; font-weight: 600; }
.pw-edge .e-branch { font-size: 10px; letter-spacing: .14em; color: #6b6058; margin-top: 7px; }
.pw-edge .e-page { font-size: 10px; letter-spacing: .05em; color: #6b6058; margin-top: auto; }
.pw-edge .e-tang { font-size: 11.5px; letter-spacing: .18em; margin-top: 7px; color: #4a4038; }

/* ============================================================
   版框（古籍版心四周那圈框线）
   数值全部来自印刷成品 PDF + 1050px 样张实测，不是拍的：
     样张(1050px) 粗 6 / 隙 2 / 细 2  →  本文档(712px 纸) ×0.678
     外粗 4.07px  间隙 1.36px  内细 1.36px
   旧实现是 border:3px + inset 1px —— 粗细线紧贴、没有缝，
   这是"一眼就不像"的根子。
   ============================================================ */
.pw-frame { position: absolute; pointer-events: none; box-sizing: border-box; }
.pw-frame-none { display: none; }
.pw-frame-dan { border: 1.36px solid var(--fc, #1a1a1a); }
/* 双边：两道同粗细线，中间一线之隔 */
.pw-frame-shuang {
  border: 1.36px solid var(--fc, #1a1a1a);
}
.pw-frame-shuang::after {
  content: ''; position: absolute; inset: 1.36px; border: 1.36px solid var(--fc, #1a1a1a);
}
/* 文武边：古籍里最多见——外粗内细，两线之间留一线空隙（实测结构） */
.pw-frame-wenwu { border: 4.07px solid var(--fc, #1a1a1a); }
.pw-frame-wenwu::after {
  content: ''; position: absolute; inset: 1.36px; border: 1.36px solid var(--fc, #1a1a1a);
}
/* 竹节栏：栏线断续如竹节 */
.pw-frame-zhujie { border: 1.36px dashed var(--fc, #1a1a1a); }

/* ============================================================
   世代牌（「十六世」那种小牌子）
   实测（牒记式样张 @1050px）：牌 61×163，内框 45×145
     外框线 2 → 联珠带 6 → 内框线 2      （单边合计 8，与实拍一致）
   带里是一圈双线半圆环，环径约 11（比带宽大，所以被裁成大半圆），
   四边各一组，左右两边的环转 90°。
   1050px 样张 → 712px 纸 ×0.678：
     牌 41×110 ｜ 外线 1.36 ｜ 带宽 4.07 ｜ 环径 7.45
   四条边各用两组 radial-gradient（内弧+外弧），左右用 repeat-y 转 90°。
   ============================================================ */
.pw-genplate {
  --gp-b: 4.07px;              /* 带宽 */
  --gp-d: 9.2px;               /* 环径 */
  --gp-c: var(--fc, #111);
  --gp-h: 4.6px;               /* 半环径 */
  position: absolute; box-sizing: border-box; background-color: #fff;
  background-image:
    /* 上边：双线半圆环，圆心在带的上沿，凸向下 */
    radial-gradient(circle at var(--gp-h) 0, transparent 0 3.45px, var(--gp-c) 3.45px 4.58px, transparent 4.58px),
    radial-gradient(circle at var(--gp-h) 0, transparent 0 2.05px, var(--gp-c) 2.05px 2.85px, transparent 2.85px),
    /* 下边：同一个环，翻到下沿 */
    radial-gradient(circle at var(--gp-h) var(--gp-b), transparent 0 3.45px, var(--gp-c) 3.45px 4.58px, transparent 4.58px),
    radial-gradient(circle at var(--gp-h) var(--gp-b), transparent 0 2.05px, var(--gp-c) 2.05px 2.85px, transparent 2.85px),
    /* 左边：圆心在左沿，凸向右 */
    radial-gradient(circle at 0 var(--gp-h), transparent 0 3.45px, var(--gp-c) 3.45px 4.58px, transparent 4.58px),
    radial-gradient(circle at 0 var(--gp-h), transparent 0 2.05px, var(--gp-c) 2.05px 2.85px, transparent 2.85px),
    /* 右边：圆心在右沿，凸向左 */
    radial-gradient(circle at var(--gp-b) var(--gp-h), transparent 0 3.45px, var(--gp-c) 3.45px 4.58px, transparent 4.58px),
    radial-gradient(circle at var(--gp-b) var(--gp-h), transparent 0 2.05px, var(--gp-c) 2.05px 2.85px, transparent 2.85px);
  background-size:
    var(--gp-d) var(--gp-b), var(--gp-d) var(--gp-b),
    var(--gp-d) var(--gp-b), var(--gp-d) var(--gp-b),
    var(--gp-b) var(--gp-d), var(--gp-b) var(--gp-d),
    var(--gp-b) var(--gp-d), var(--gp-b) var(--gp-d);
  background-position:
    left top, left top,
    left bottom, left bottom,
    left top, left top,
    right top, right top;
  background-repeat:
    repeat-x, repeat-x,
    repeat-x, repeat-x,
    repeat-y, repeat-y,
    repeat-y, repeat-y;
  border: 1.36px solid var(--gp-c);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: #111;
  /* 字号按样张比例：字宽约占牌宽 62%（样张 38/61）。牌宽 41 → 字 25px。
     不设的话会继承正文小字号，牌子中间空一大块，一眼就不像牌匾。 */
  font-size: 23px;
  writing-mode: vertical-rl; text-orientation: upright;
  letter-spacing: .04em; line-height: 1;
  user-select: none;
}
.pw-genplate::after {
  content: ''; position: absolute; inset: var(--gp-b);   /* 带留出来，剩下的是内框线 */
  border: 1.36px solid var(--gp-c);
  background: #fff;
  pointer-events: none;
}
.pw-genplate > span { position: relative; z-index: 1; }
/* 横排的世代牌（现代版样张里 128×34 → 87×23） */
.pw-genplate.h {
  writing-mode: horizontal-tb; letter-spacing: .18em;
}
/* 版心虚线：只有编辑时看得见，提示"字别跑出框" */
.pw-safe {
  position: absolute; pointer-events: none; box-sizing: border-box;
  border: 1px dashed rgba(47, 110, 168, .28);
}
/* 页码画在下白边里，字号小、字距松，像印出来的样子 */
.pw-pageno {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 11px; letter-spacing: .22em;
  color: #9a8b74; pointer-events: none; user-select: none;
}
/* 拖出纸外的元素：红虚线加右下角提示，别等到印出来才发现被裁 */
.pw-it.over { outline: 1px dashed #d9534f !important; }
.pw-it.over::before {
  content: '超出纸面'; position: absolute; right: 0; top: -16px;
  background: #d9534f; color: #fff; font-size: 10px; line-height: 1;
  padding: 2px 5px; border-radius: 3px; font-family: var(--sans, sans-serif);
  white-space: nowrap;
}
.pw-mm { font-size: 11.5px; color: var(--ink-3); margin: -2px 0 8px; letter-spacing: .02em; }
.pw-color { width: 34px; height: 22px; padding: 1px; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; }
.pw-edge b { font-size: 13px; letter-spacing: .18em; font-weight: 600; }
.pw-edge i { font-style: normal; font-size: 11px; letter-spacing: .14em; color: #a1907a; }
.pw-it { position: absolute; user-select: none; }
.pw-it.on { outline: 1px solid #2f6ea8; outline-offset: 0; }
/* 缩放手柄：八个方向，平时藏着，选中才显形（切选中不重建 DOM，所以手柄必须常驻） */
.pw-hd {
  position: absolute; display: none; z-index: 5;
  width: 10px; height: 10px; background: #2f6ea8; border: 1.5px solid #fff;
  border-radius: 2px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(47,110,168,.55);
}
.pw-it.on .pw-hd { display: block; }
.pw-hd-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.pw-hd-n  { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.pw-hd-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.pw-hd-e  { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.pw-hd-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pw-hd-s  { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.pw-hd-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pw-hd-w  { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.pw-txt { width: 100%; height: 100%; overflow: hidden; outline: none; }
/* 空文本框要自己喊一声「双击输入」，否则就是一个空白方框，没人知道能写字 */
.pw-txt:empty:not([contenteditable="true"])::before {
  content: '双击这里输入文字'; color: #c3b6a2; font-size: 12px; font-family: var(--sans, sans-serif);
  letter-spacing: .04em;
}
.pw-txt[contenteditable="true"] { outline: 1px dashed #2f6ea8; background: rgba(47,110,168,.03); cursor: text; }
.pw-yl, .pw-unk {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 12px; color: #b7a892; border: 1px dashed #e0d5c4;
}
.pw-empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 13px; }

/* 右栏 */
.pw-right { border-left: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.pw-right-h { padding: 8px 10px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.pw-thumbs { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 46%; }
.pw-thumb { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.pw-thumb-paper {
  border: 1px solid var(--line-2); background: #fff; padding: 2px; border-radius: 2px;
}
.pw-thumb.on .pw-thumb-paper { border-color: #2f6ea8; box-shadow: 0 0 0 2px rgba(47,110,168,.18); }
.pw-mini { position: relative; width: 88px; background: #fff; overflow: hidden; }
.pw-mini-i { position: absolute; background: #f0e9dd; }
.pw-mini-i.img { background: #cdd6df; }
.pw-thumb-n { font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.pw-props { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); padding: 10px; }
.pw-props-h { font-size: 12px; color: var(--ink-3); margin: 4px 0 8px; letter-spacing: .06em; }
.pw-kv { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); padding: 3px 0; }
.pw-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; margin-top: 8px; }
.pw-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pw-pg label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-3); }
.pw-pg input, .pw-row input, .pw-row select, .pw-form input {
  height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  font-size: 12px; font-family: inherit; color: var(--ink); padding: 0 6px; width: 100%;
}
.pw-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.pw-row > span { width: 62px; flex: none; }
.pw-props-act { display: flex; gap: 6px; margin-top: 12px; }
.pw-props-act .btn { flex: 1; height: 28px; font-size: 12px; }
.pw-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pw-color { height: 34px; border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer; }
.pw-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-2); }

@media (max-width: 1100px) {
  .pw-body { grid-template-columns: 150px minmax(0, 1fr); }
  .pw-right { display: none; }
}
@media (max-width: 760px) {
  .pw-body { grid-template-columns: 1fr; }
  .pw-left { display: none; }
  .pw { height: auto; }
  .pw-mid { padding: 10px 0 30px; }
}

/* ============ 卷轴「设置版式」 ============
   三栏：左方案 / 中表单 / 右实时示例。字段与源站功能一一对应，控件自绘。 */
.ss { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 0; min-height: 0; }
.ss-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; }
.ss-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ss-crumb i { font-style: normal; color: var(--ink-3); }
.ss-crumb b { color: var(--ink); font-weight: 600; }

.ss-left { border: 1px solid var(--line); border-radius: 10px 0 0 10px; background: var(--card); display: flex; flex-direction: column; overflow: hidden; }
.ss-plan {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; margin: 4px 6px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.ss-plan:hover { background: var(--paper-2); }
.ss-plan.on { border-color: var(--brand); background: var(--brand-soft); }
.ss-plan b { font-size: 13px; color: var(--ink); font-weight: 600; }
.ss-plan span { font-size: 11px; color: var(--ink-3); }
.ss-new {
  margin: 6px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 8px;
  font-size: 12.5px; color: var(--ink-3); cursor: pointer; text-align: center;
}
.ss-new:hover { border-color: var(--brand); color: var(--brand); }

.ss-mid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); overflow-y: auto; padding: 14px 18px 20px; }
.ss-title { font-family: var(--serif); font-size: 15px; letter-spacing: .06em; color: var(--ink); margin-bottom: 10px; }
.ss-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ss-tab {
  border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0;
  background: transparent; padding: 6px 14px; font-size: 13px; color: var(--ink-2);
  cursor: pointer; font-family: inherit; margin-bottom: -1px;
}
.ss-tab.on { background: var(--card); border-color: var(--line); border-bottom-color: var(--card); color: var(--brand); font-weight: 600; }

.ss-group-h {
  font-size: 12px; color: var(--ink-3); letter-spacing: .1em;
  border-left: 3px solid var(--brand); padding-left: 8px; margin: 18px 0 10px;
}
.ss-sec { font-size: 13px; color: var(--ink); margin: 12px 0 6px; font-weight: 600; }
.ss-note { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 8px; }
.ss-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 5px 0; }
.ss-line-wrap { gap: 18px; }
.ss-lbl { font-size: 12.5px; color: var(--ink-2); }
.ss-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.ss-radio.on { color: var(--brand-dark); font-weight: 600; }
.ss-radio input { accent-color: var(--brand); }
.ss-inp { display: inline-flex; align-items: center; gap: 6px; }
.ss-inp input {
  width: 82px; height: 28px; border: 1px solid var(--line-2); border-radius: 6px;
  padding: 0 8px; font-size: 12.5px; font-family: inherit; color: var(--ink); background: #fff;
}
.ss-inp input:disabled { background: var(--paper-2); color: var(--ink-3); }
.ss-inp i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ss-inp-t {
  flex: 1; min-width: 160px; max-width: 340px; height: 28px; border: 1px solid var(--line-2);
  border-radius: 6px; padding: 0 9px; font-size: 12.5px; font-family: inherit; color: var(--ink); background: #fff;
}
.ss-sel {
  height: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  font-size: 12.5px; font-family: inherit; color: var(--ink); padding: 0 6px;
}
.ss-custom {
  display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 12px;
  border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-3);
}
.ss-custom a { color: var(--brand); cursor: pointer; }
.ss-foot { display: flex; gap: 8px; margin-top: 16px; }
.ss-foot .btn { height: 32px; }

.ss-right { border: 1px solid var(--line); border-left: none; border-radius: 0 10px 10px 0; background: var(--paper-2); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.ss-right-h { font-size: 12px; color: var(--ink-3); }
.ss-sample {
  border: 3px solid #a8452f; border-radius: 3px; background: #ffffff;
  box-shadow: 0 2px 10px rgba(120, 80, 50, .18); overflow: hidden; width: 100%;
}
.ss-paper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 6px; position: relative; }
.ss-p-title { font-family: var(--serif); font-size: 15px; letter-spacing: .22em; color: #6b3a22; }
.ss-p-sub { font-size: 8px; color: #8a7a66; letter-spacing: .06em; }
.ss-p-body { display: flex; align-items: stretch; gap: 6px; flex: 1; width: 100%; min-height: 0; padding: 4px 2px; }
.ss-p-couplet {
  writing-mode: vertical-rl; font-family: var(--serif); font-size: 9px; color: #f86e04;
  letter-spacing: .12em; display: flex; align-items: center;
}
.ss-p-tree { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ss-p-line { display: flex; gap: 4px; justify-content: center; }
.ss-p-line i { width: 9px; height: 5px; background: #d9c9b2; border-radius: 1px; }
.ss-p-seal {
  position: absolute; right: 8px; bottom: 18px; width: 26px; height: 26px;
  border: 1.5px solid #a8452f; border-radius: 3px; color: #a8452f;
  font-family: var(--serif); font-size: 7px; display: grid; place-items: center;
  line-height: 1.1; text-align: center; padding: 2px;
}
.ss-p-foot { font-size: 7.5px; color: #a1907a; padding-bottom: 2px; }
.ss-sample.hang { max-height: 420px; margin: 0 auto; width: auto; }
.ss-right-note { font-size: 11px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 1200px) {
  .ss { grid-template-columns: 168px minmax(0, 1fr); }
  .ss-right { display: none; }
}
@media (max-width: 760px) {
  .ss { grid-template-columns: 1fr; }
  .ss-left { border-radius: 10px 10px 0 0; border-bottom: none; }
  .ss-mid { border-radius: 0 0 10px 10px; padding: 12px; }
  .ss-line { gap: 10px; }
}

/* 卷面示例的内层：按真实比例算尺寸，外层只负责给个够看的高度 */
.ss-p-inner { position: relative; max-width: 100%; max-height: 100%; }
.ss-p-inner > .ss-paper { position: absolute; inset: 0; }

/* 铺满外框（不看真实比例），内层绝对撑满，四边留白由 .ss-paper 自己管 */
.ss-p-inner { position: absolute; inset: 0; }
.ss-sample { position: relative; }

/* ==========================================================================
   谱书详情页（对标百家有谱 print-detail）
   左栏谱书列表 + 主区四步流程 / 谱书信息卡 / 体例明细
   主色取源站的橙，只在本页生效（--pd-accent），不影响全站赭石基调
   ========================================================================== */
.pd { --pd-accent: #f86e04; --pd-accent-d: #d9711f;
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; overflow: hidden; min-height: 620px; }
/* 列表搬进二级栏后主区只剩一栏，不再留 208px 空位 */
.pd.pd-solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- 左栏 ---------- */
.pd-left { display: flex; flex-direction: column; border-right: 1px solid var(--line);
  background: #fdfbf6; padding: 10px 10px 0; min-height: 0; }
.pd-search-row { display: flex; gap: 6px; margin-bottom: 10px; }
.pd-search { flex: 1; min-width: 0; height: 30px; padding: 0 8px; font-size: 12.5px;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink); }
.pd-search:focus { outline: none; border-color: var(--pd-accent); }
.pd-search-btn { flex: none; height: 30px; padding: 0 12px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--pd-accent); border-radius: 4px; background: var(--pd-accent); color: #fff; }
.pd-search-btn:hover { background: var(--pd-accent-d); }

.pd-books { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.pd-books-empty { padding: 18px 6px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.pd-book { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; }
.pd-book:hover { border-color: var(--pd-accent); }
.pd-book.on { border-color: var(--pd-accent); box-shadow: 0 0 0 1px var(--pd-accent) inset; }
.pd-book-n { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-book-edit { position: absolute; right: 4px; top: 2px; border: none; background: none;
  color: var(--pd-accent); font-size: 13px; cursor: pointer; line-height: 1; padding: 2px; }

/* 书封缩略：竖向书名，纯 CSS */
.pd-spine { flex: none; width: 46px; height: 60px; border-radius: 2px;
  background: linear-gradient(160deg, #f2e7d3, #e6d6ba);
  border: 1px solid #d9c6a4; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 3px 0 0 rgba(140, 74, 47, .25); position: relative; overflow: hidden; }
.pd-spine.on { background: linear-gradient(160deg, #f6e2c8, #edcfa6); border-color: var(--pd-accent); }
.pd-spine.small { width: 38px; height: 50px; }
.pd-spine-t { writing-mode: vertical-rl; font-family: var(--serif); font-size: 11px; line-height: 1.15;
  color: #6b3a1f; letter-spacing: 1px; max-height: 52px; overflow: hidden; }
.pd-spine.small .pd-spine-t { font-size: 10px; max-height: 44px; }

.pd-add { flex: none; margin: 10px 0 8px; height: 32px; width: 100%; cursor: pointer;
  border: 1px dashed var(--pd-accent); border-radius: 4px; background: #fff8f1;
  color: var(--pd-accent); font-size: 12.5px; }
.pd-add:hover { background: #fdeedd; }
.pd-quota { flex: none; border-top: 1px solid var(--line); padding: 9px 2px; font-size: 12.5px;
  color: var(--ink-2); }
.pd-quota b { color: var(--pd-accent); font-weight: 600; }

/* ---------- 主区 ---------- */
.pd-main { padding: 14px 18px 22px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-head h2 { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.pd-head-r { display: flex; gap: 8px; }
.pd-switch-view { height: 28px; padding: 0 11px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink-2); }

.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 18px; align-items: start; }

/* 四步流程 */
.pd-steps { min-width: 0; }
.pd-covers { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pd-cover { flex: none; width: 70px; height: 86px; border-radius: 2px; background: #fff;
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-cover .pd-spine { width: 54px; height: 72px; box-shadow: inset 4px 0 0 rgba(140, 74, 47, .3); }
.pd-cover .pd-spine-t { font-size: 12px; max-height: 64px; }
.pd-cover-page { width: 100%; height: 100%; padding: 6px 4px; display: grid; gap: 4px; align-content: start; }
.pd-cover-page i { display: block; height: 3px; background: #e2d8c6; border-radius: 1px; }
.pd-cover-page.dense { gap: 3px; }
.pd-cover-page.dense i { height: 2px; }
.pd-cover-pdf { font-size: 15px; font-weight: 700; color: #c9bda8; letter-spacing: 1px; }
.pd-arrow { flex: 1; min-width: 8px; height: 1px; margin: 0 4px; border-top: 1px dashed #e0c9a9; position: relative; }
.pd-arrow::after { content: '▶'; position: absolute; right: -1px; top: -7px; font-size: 8px; color: #e0c9a9; }

.pd-stepnames { display: flex; justify-content: space-between; margin-top: 7px; }
.pd-stepname { flex: 1; text-align: center; font-size: 11.5px; color: #d95a00; }
.pd-stepacts { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; }
.pd-stepbtn { flex: 1; height: 28px; font-size: 12px; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.pd-stepbtn:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.pd-stepbtn.primary { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.pd-stepbtn.primary:hover { background: var(--pd-accent-d); }

/* 谱书信息卡 */
.pd-info { background: #eef2f7; border: 1px solid #e5d5b0; border-radius: 3px; padding: 10px 12px; }
.pd-info-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
  font-family: var(--serif); font-size: 13.5px; color: #8a5a1e; font-weight: 600; }
.pd-info-edit { border: none; background: none; color: #b07c26; cursor: pointer; font-size: 13px; padding: 0 2px; }
.pd-info-row { display: flex; gap: 4px; font-size: 12.5px; line-height: 1.95; }
.pd-info-k { flex: none; width: 66px; color: #7d8798; text-align: right; }
.pd-info-v { flex: 1; min-width: 0; color: #4a3a20; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 体例明细 */
.pd-eds-h { display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: var(--ink); font-weight: 600; margin: 2px 0 9px; }
.pd-eds-add { height: 26px; padding: 0 10px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--pd-accent); border-radius: 3px; background: #fff; color: var(--pd-accent); }
.pd-eds-add:hover { background: #fff3e6; }

.pd-ed { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 10px 12px; margin-bottom: 9px;
  border: 1px solid #e9dcc6; border-radius: 3px; background: #fff; }
.pd-ed.on { border-color: var(--pd-accent); box-shadow: 0 0 0 1px var(--pd-accent) inset; }
.pd-ed-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pd-ed-set { border: none; background: none; font-size: 10.5px; color: var(--ink-3); cursor: pointer; padding: 0; }
.pd-ed-set:hover { color: var(--pd-accent); }

.pd-ed-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-ed-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-ed-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pd-ed-set2 { border: 1px solid var(--line-2); border-radius: 2px; background: #f7f8fa;
  font-size: 10.5px; color: var(--ink-2); cursor: pointer; padding: 1px 5px; }
.pd-ed-set2:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.pd-ed-del { border: none; background: none; font-size: 10.5px; color: var(--ink-3); cursor: pointer; padding: 0 2px; }
.pd-ed-del:hover { color: var(--danger); text-decoration: underline; }
.pd-ed-line { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.pd-ed-line b { color: var(--ink); font-weight: 500; }
.pd-ed-gap { margin-left: 10px; }
.pd-ed-time { color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-ed-live { font-size: 10.5px; color: #7d8798; background: #eef2f7; border-radius: 2px; padding: 0 5px; }
.pd-ed-size { font-size: 10.5px; color: var(--ink-3); }

.pd-ed-acts { display: grid; grid-template-columns: 96px 96px auto; gap: 6px 8px; justify-items: stretch; align-items: center; }
.pd-btn { height: 26px; padding: 0 10px; font-size: 12px; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pd-btn.primary { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.pd-btn.primary:hover { background: var(--pd-accent-d); }
.pd-btn.ghost { grid-column: 1 / 2; border-style: dashed; color: #4a7fa5; border-color: #b9d2e4; background: #fbfdff; }
.pd-btn.ghost:hover { border-color: #4a7fa5; }
.pd-btn.danger { grid-column: 1 / 2; color: var(--danger); border-color: #e6c3bb; background: #fffafa; }
.pd-btn-ico { font-size: 12px; }
.pd-ed-pub { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* 拨钮（发布谱书） */
.pd-switch { width: 34px; height: 18px; border-radius: 9px; border: none; cursor: pointer; padding: 0;
  background: #d8cfc0; position: relative; transition: background .16s; flex: none; }
.pd-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .16s; }
.pd-switch.on { background: var(--pd-accent); }
.pd-switch.on i { left: 18px; }
.pd-switch[disabled] { opacity: .5; cursor: not-allowed; }

/* 弹窗表单 */
.pd-form { display: flex; flex-direction: column; gap: 9px; }
.pd-fld { display: flex; align-items: center; gap: 10px; }
.pd-fld > span { flex: none; width: 74px; font-size: 12.5px; color: var(--ink-2); text-align: right; }
.pd-fld > .inp { flex: 1; min-width: 0; height: 30px; font-size: 13px; }

/* 窄屏：左栏折成横向条，主区单列 */
@media (max-width: 1080px) {
  .pd { grid-template-columns: 1fr; }
  .pd-left { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .pd-books { flex-direction: row; overflow-x: auto; }
  .pd-book { flex: none; width: 176px; }
  .pd-add { width: auto; align-self: flex-start; padding: 0 14px; }
  .pd-top { grid-template-columns: 1fr; }
  .pd-ed { grid-template-columns: 60px minmax(0, 1fr); }
  .pd-ed-acts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .pd-btn.ghost, .pd-btn.danger { grid-column: auto; }
  .pd-ed-pub { grid-column: 1 / -1; }
}

/* ==========================================================================
   用户中心（对标百家有谱 user 页）
   左栏账号卡 + 会员 + 谱币 + 六项菜单；右栏随菜单切换
   ========================================================================== */
.uc { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---------- 左栏 ---------- */
.uc-left { display: flex; flex-direction: column; gap: 10px; }
.uc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.uc-avatar-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uc-avatar { border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); background: var(--paper-2); }
.uc-avatar-txt { display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: var(--brand); font-weight: 600; }
.uc-avatar-btn { border: none; background: none; color: var(--brand); font-size: 11.5px; cursor: pointer; padding: 0; }
.uc-avatar-btn:hover { text-decoration: underline; }
.uc-name { font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.uc-sub { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.5; word-break: break-all; }
.uc-puno { color: var(--ink-3); }
.uc-quit { margin-top: 4px; height: 26px; padding: 0 14px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink-2); }
.uc-quit:hover { border-color: var(--danger); color: var(--danger); }

.uc-vip { background: linear-gradient(180deg, #f1f4f8, #f8e9cf); border: 1px solid #e8d3ae;
  border-radius: var(--r); padding: 10px 12px; }
.uc-vip-t { font-size: 13px; color: #8a5a1e; font-weight: 600; }
.uc-vip-tag { color: #b07c26; font-weight: 500; margin-left: 2px; }
.uc-vip-d { font-size: 11.5px; color: #7d8798; margin: 2px 0 8px; }
.uc-vip-btn { width: 100%; height: 28px; font-size: 12.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid #d9a75b; background: #fff; color: #a8701f; }
.uc-vip-btn:hover { background: #f1f4f8; }

.uc-coin { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
.uc-coin b { color: var(--brand); font-weight: 600; }
.uc-coin-btn { height: 26px; padding: 0 12px; font-size: 12px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.uc-coin-btn:hover { background: var(--brand-dark); }

.uc-menu { display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.uc-menu-item { padding: 10px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid var(--line); }
.uc-menu-item:last-child { border-bottom: none; }
.uc-menu-item:hover { background: var(--paper-2); color: var(--ink); }
.uc-menu-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand); }

/* ---------- 右栏 ---------- */
.uc-main { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px 22px; min-height: 460px; min-width: 0; }
.uc-h { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 600;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.uc-h-btn { height: 28px; padding: 0 12px; font-size: 12.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff; font-family: var(--sans); font-weight: 400; }
.uc-h-btn:hover { background: var(--brand-dark); }

.uc-panel { display: flex; flex-direction: column; }
.uc-row { display: flex; align-items: baseline; gap: 4px; padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 13px; }
.uc-row:last-child { border-bottom: none; }
.uc-k { flex: none; width: 84px; color: var(--ink-3); text-align: right; }
.uc-k i { font-style: normal; }
.uc-v { flex: 1; min-width: 0; color: var(--ink); word-break: break-all; }
.uc-acts { margin-top: 16px; }

.uc-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.uc-fld { display: flex; align-items: center; gap: 10px; }
.uc-fld > span { flex: none; width: 76px; font-size: 12.5px; color: var(--ink-2); text-align: right; }
.uc-fld > .inp, .uc-fld > .date-pick { flex: 1; min-width: 0; }

/* 地址 */
.uc-addrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.uc-addr { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; }
.uc-addr.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.uc-addr-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.uc-addr-h b { font-weight: 600; }
.uc-addr-h span { font-size: 12px; color: var(--ink-2); }
.uc-addr-tag { font-size: 10.5px; color: var(--brand); background: var(--brand-soft);
  border-radius: 2px; padding: 0 5px; }
.uc-addr-d { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 8px; line-height: 1.6; }
.uc-addr-acts { display: flex; gap: 12px; }
.uc-addr-acts button { border: none; background: none; font-size: 12px; color: var(--brand);
  cursor: pointer; padding: 0; }
.uc-addr-acts button.danger { color: var(--danger); }
.uc-addr-acts button:hover { text-decoration: underline; }

/* 表格（套餐 / 订单） */
.uc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.uc-table th { text-align: left; font-weight: 500; color: var(--ink-3); background: var(--paper-2);
  padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.uc-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.uc-table tr:last-child td { border-bottom: none; }
.uc-table td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); }
.uc-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--paper-2); color: var(--ink-2); }
.uc-badge.active, .uc-badge.paid, .uc-badge.done { background: #e8f2ea; color: var(--ok); }
.uc-badge.pending { background: #f1f4f8; color: var(--warn); }
.uc-badge.expired, .uc-badge.cancelled, .uc-badge.refunded { background: #f3eae7; color: var(--danger); }
.uc-pageinfo { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.uc-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.uc-pager button { height: 26px; padding: 0 10px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink-2); }
.uc-pager button[disabled] { opacity: .45; cursor: not-allowed; }

/* 服务协议 */
.uc-terms { gap: 4px; font-size: 13px; color: var(--ink-2); line-height: 1.9; max-width: 720px; }
.uc-terms h4 { margin: 14px 0 2px; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.uc-terms h4:first-child { margin-top: 0; }
.uc-terms p { margin: 0; }

@media (max-width: 980px) {
  .uc { grid-template-columns: 1fr; }
  .uc-menu { flex-direction: row; overflow-x: auto; }
  .uc-menu-item { border-bottom: none; border-right: 1px solid var(--line); white-space: nowrap; }
  .uc-menu-item.on { box-shadow: inset 0 -2px 0 var(--brand); }
  .uc-table { display: block; overflow-x: auto; white-space: nowrap; }
  .uc-fld { flex-direction: column; align-items: stretch; gap: 4px; }
  .uc-fld > span { width: auto; text-align: left; }
}

/* ==========================================================================
   商城（对标百家有谱 /mall 五页）
   商品图用 CSS 生成的色块封面，后台传了真图再覆盖
   ========================================================================== */
.sn-account { display: flex; flex-direction: column; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

.mall { display: flex; flex-direction: column; gap: 14px; }
.mall-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.mall-head h2 { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); font-weight: 600; }
.mall-head-r { display: flex; gap: 8px; }
.mall-nav { height: 28px; padding: 0 12px; font-size: 12.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-nav:hover { border-color: var(--brand); color: var(--brand); }
.mall-nav.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.mall-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 分类与排序 */
.mall-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mall-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.mall-cat { height: 26px; padding: 0 11px; font-size: 12.5px; cursor: pointer; border-radius: 13px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-cat:hover { border-color: var(--brand); color: var(--brand); }
.mall-cat.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.mall-sorts { display: flex; gap: 4px; }
.mall-sort { height: 26px; padding: 0 9px; font-size: 12px; cursor: pointer; border-radius: 3px;
  border: 1px solid transparent; background: none; color: var(--ink-3); }
.mall-sort.on { color: var(--brand); border-color: var(--line-2); background: #fff; }

/* 商品卡片 */
.mall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.mall-grid.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mall-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.mall-card:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.mall-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mall-cover-gen { display: flex; align-items: center; justify-content: center; }
.mall-cover-gen span { font-family: var(--serif); font-size: 34px; color: rgba(255, 255, 255, .82); }
.mall-cover.big { aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid var(--line); }
.mall-cover.tiny { width: 48px; height: 48px; aspect-ratio: auto; border-radius: 4px; flex: none; }
.mall-cover.tiny.mall-cover-gen span { font-size: 18px; }
.mall-card-b { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mall-name { font-size: 13px; color: var(--ink); line-height: 1.5; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mall-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mall-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.mall-price { font-size: 15px; color: var(--danger); font-weight: 600; }
.mall-price.big { font-size: 24px; }
.mall-market { font-size: 11.5px; color: var(--ink-3); text-decoration: line-through; }
.mall-sold { font-size: 11px; color: var(--ink-3); }
/* 购买数 + 购买按钮同一行：源站商品卡右下角就是这个「购买」，不点进详情也能直接买 */
.mall-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mall-buy { flex: none; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--pd-accent, #f86e04);
  background: var(--pd-accent, #f86e04); color: #fff; font-size: 12px; line-height: 1.6; cursor: pointer; }
.mall-buy:hover { filter: brightness(1.06); }

/* 详情 */
.mall-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
.mall-detail-l { }
.mall-detail-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mall-badge-row { display: flex; gap: 8px; }
.mall-tag { font-size: 11px; color: #fff; background: var(--brand); border-radius: 2px; padding: 1px 7px; }
.mall-tag.plain { background: var(--paper-2); color: var(--ink-2); }
.mall-dname { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 600; line-height: 1.4; }
.mall-dsub { font-size: 12.5px; color: var(--ink-3); }
.mall-dprice { display: flex; align-items: baseline; gap: 8px; background: var(--paper-2);
  border-radius: 6px; padding: 8px 12px; }
.mall-dline { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.mall-k { flex: none; width: 60px; color: var(--ink-3); }
.mall-colors, .mall-pays { display: flex; gap: 8px; flex-wrap: wrap; }
.mall-color, .mall-pay { height: 28px; padding: 0 12px; font-size: 12.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-color.on, .mall-pay.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.mall-qty { width: 72px; height: 28px; padding: 0 8px; font-size: 12.5px; text-align: center;
  border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--ink); }
.mall-dacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mall-btn { height: 34px; padding: 0 18px; font-size: 13px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-btn:hover { border-color: var(--brand); color: var(--brand); }
.mall-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mall-btn.primary:hover { background: var(--brand-dark); }
.mall-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.mall-fav { height: 34px; padding: 0 16px; font-size: 13px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-fav.on { border-color: var(--danger); color: var(--danger); background: #fdf3f1; }
.mall-ship { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3);
  border-top: 1px dashed var(--line); padding-top: 9px; }
.mall-ship b { color: var(--ink-2); font-weight: 500; }

.mall-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.mall-tab { height: 34px; padding: 0 16px; font-size: 13px; cursor: pointer; border: none;
  background: none; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mall-tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.mall-pane { padding: 14px 2px; min-height: 80px; }
.mall-detail-text { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 2; }
.mall-rel-h { font-size: 13.5px; color: var(--ink); font-weight: 600; margin-top: 6px; }

/* 表格（购物车 / 确认订单） */
.mall-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mall-table th { text-align: left; font-weight: 500; color: var(--ink-3); background: var(--paper-2);
  padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mall-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.mall-table th.ck, .mall-table td.ck { width: 84px; }
.mall-table td.mall-sub2 { color: var(--danger); font-weight: 600; }
.mall-cart-goods { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mall-link { border: none; background: none; font-size: 12px; color: var(--brand); cursor: pointer;
  padding: 0 6px 0 0; }
.mall-link:hover { text-decoration: underline; }
.mall-link.danger { color: var(--danger); }

.mall-settle { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; flex-wrap: wrap; }
.mall-sum { font-size: 12.5px; color: var(--ink-2); }
.mall-sum b { color: var(--ink); font-weight: 600; }
.mall-total { color: var(--danger) !important; font-size: 17px; }
.mall-settle-acts { display: flex; gap: 8px; }
.mall-batch { display: flex; gap: 10px; }
.mall-batch button { height: 28px; padding: 0 12px; font-size: 12.5px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }
.mall-batch button:hover { border-color: var(--brand); color: var(--brand); }
.mall-empty-act { display: flex; gap: 10px; justify-content: center; }

/* 结算面板 */
.mall-panel { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.mall-panel-h { display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mall-addrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mall-addr { border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; cursor: pointer; background: #fff; }
.mall-addr:hover { border-color: var(--brand); }
.mall-addr.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; background: #ffffff; }
.mall-addr-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.mall-addr-h span { color: var(--ink-2); font-size: 12px; }
.mall-addr-tag { font-size: 10.5px; color: var(--brand); background: var(--brand-soft); border-radius: 2px; padding: 0 5px; }
.mall-addr-d { font-size: 12px; color: var(--ink-2); margin-top: 5px; line-height: 1.6; }
.mall-noaddr { font-size: 12.5px; color: var(--danger); }

@media (max-width: 1080px) {
  .mall-detail { grid-template-columns: 1fr; }
  .mall-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mall-table { display: block; overflow-x: auto; white-space: nowrap; }
  .mall-settle { flex-direction: column; align-items: stretch; }
}
.mall-order-title { font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* 结算四步条：1 提交订单 → 2 支付成功 → 3 确认收货 → 4 评价。
   只有第 1 步高亮，后面三步是"还没到"的灰，不做假进度。 */
.mall-steps { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--paper-2, #f7f8fa); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.mall-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.mall-step-n { width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  background: var(--line); color: var(--ink-3); }
.mall-step.on { color: var(--ink); font-weight: 600; }
.mall-step.on .mall-step-n { background: var(--pd-accent, #f86e04); color: #fff; }
.mall-step-line { flex: 1; height: 1px; background: var(--line); min-width: 16px; }
.mall-count-strip { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px 10px; }
.mall-reviews { display: flex; gap: 8px; margin-bottom: 12px; }
/* 操作列两个文字按钮贴太紧，给点间距 */
.mall-table td .mall-link + .mall-link { margin-left: 8px; }
.mall-table td .mall-link { padding-right: 0; }
.mall-none { color: var(--ink-3); font-size: 12.5px; padding: 18px 0; text-align: center; }

/* 商品详情：咨询行与专属修谱师卡 */
.mall-consult { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--paper-2, #f7f8fa); border-radius: 6px; font-size: 12.5px; }
.mall-master { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px dashed var(--line); border-radius: 8px; margin-top: 12px; }
.mall-master-h { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.mall-master-d { font-size: 12.5px; color: var(--ink-3); }
.mall-master .mall-btn { margin-left: auto; }

/* ================= 卷轴页（对齐源站 printmap）=================
   与谱书页共用 .pd-* 骨架，这里只补「卷轴」特有的三样：
   横卷缩略、类型小标签、三步封面里的稿纸/格子。 */
.sc-thumb2 { position: relative; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 34px; flex: none; background: linear-gradient(180deg, #fdf8ec, #f3e7cd);
  border-top: 1px solid #dde1e8; border-bottom: 1px solid #dde1e8; }
.sc-thumb2.poster { width: 28px; height: 34px; border-left: 1px solid #dde1e8; border-right: 1px solid #dde1e8;
  border-top: none; border-bottom: none; }
.sc-thumb2 .sc-rod { width: 5px; height: 100%; background: linear-gradient(180deg, #f86e04, #b9834a);
  border-radius: 2px; flex: none; }
.sc-thumb2.poster .sc-rod { width: 100%; height: 4px; }
.sc-thumb2.poster { flex-direction: column; }
.sc-thumb2-t { position: absolute; font-family: var(--serif); font-size: 10px; color: #f86e04;
  letter-spacing: 1px; writing-mode: vertical-rl; line-height: 1; }
.sc-thumb2.poster .sc-thumb2-t { writing-mode: vertical-rl; }
.sc-thumb2.on { box-shadow: 0 0 0 1px var(--pd-accent); }
.sc-thumb2.small { width: 56px; height: 40px; }
.sc-thumb2.big { width: 62px; height: 46px; }

.sc-book .pd-book-n { display: flex; flex-direction: column; gap: 2px; }
.sc-tag { font-size: 10px; color: #d95a00; border: 1px solid #e6c39a; border-radius: 2px;
  padding: 0 3px; line-height: 15px; align-self: flex-start; font-style: normal; }
.sc-tag.big { font-size: 10.5px; }

.sc-cover-doc { width: 100%; height: 100%; padding: 8px 6px; display: grid; gap: 4px; align-content: start; }
.sc-cover-doc i { display: block; height: 3px; background: #e2d8c6; border-radius: 1px; }
.sc-cover-doc i:nth-child(2) { width: 70%; }
.sc-cover-doc i:nth-child(4) { width: 85%; }
.sc-cover-grid { width: 100%; height: 100%; padding: 5px 4px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 3px; align-content: start; }
.sc-cover-grid i { display: block; height: 7px; background: #eadfc9; border-radius: 1px; }

.sc-ed-acts { grid-template-columns: auto auto !important; gap: 8px; }
.sc-dl { border: none; background: none; font-size: 12px; color: #4a7fa5; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; padding: 0; white-space: nowrap; }
.sc-dl:hover { text-decoration: underline; }
.sc-ed-thumb { width: 66px; }

/* ================= 管理列表页（宗祠 / 协管 / 协作 / 内容管理）================= */
.mp-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.mp-bar-r { margin-left: auto; display: flex; gap: 8px; }
.mp-limit { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.mp-limit b { color: var(--pd-accent, #f86e04); font-weight: 600; }
.mp-thumb { width: 34px; height: 26px; border-radius: 2px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f6ead2, #e6d3ae); color: #f86e04;
  font-family: var(--serif); font-size: 13px; }
.mp-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #efe3cc; color: #f86e04; font-size: 12px; }
.mp-tag { font-size: 11px; color: #4a7fa5; background: #eef5fb; border: 1px solid #cfe0ee;
  border-radius: 2px; padding: 0 5px; line-height: 17px; }
.mp-status { font-size: 11px; border-radius: 2px; padding: 0 6px; line-height: 18px; display: inline-block; }
.mp-status.on { color: #2f7a4a; background: #eaf5ee; border: 1px solid #c8e5d3; }
.mp-status.off { color: #8a6a2f; background: #eef2f7; border: 1px solid #e6d6ae; }
.mp-status.wait { color: #8a6a2f; background: #eef2f7; border: 1px solid #e6d6ae; }
.mp-status.bad { color: #a33; background: #fbeeee; border: 1px solid #eed3d3; }
.mp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-a { border: none; background: none; font-size: 12px; color: #4a7fa5; cursor: pointer; padding: 0; white-space: nowrap; }
.mp-a:hover { text-decoration: underline; }
.mp-a.danger { color: var(--danger); }
.mp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 10px 0 12px; flex-wrap: wrap; }
.mp-tab { border: none; background: none; font-size: 13px; color: var(--ink-2); cursor: pointer;
  padding: 7px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mp-tab:hover { color: var(--pd-accent, #f86e04); }
.mp-tab.on { color: var(--pd-accent, #f86e04); border-bottom-color: var(--pd-accent, #f86e04); font-weight: 600; }
.mp-pin { font-size: 10.5px; color: #d95a00; border: 1px solid #e6c39a; border-radius: 2px;
  padding: 0 4px; margin-right: 5px; }
.mp-none { text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 26px 0; }
.mp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-find { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0;
  padding: 9px 12px; background: #fbf7ef; border: 1px solid var(--line); border-radius: 4px; }
.mp-find-k { font-size: 12.5px; color: var(--ink-2); }
.mp-find-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mp-tr { display: flex; flex-direction: column; gap: 10px; }
.mp-tr-body { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 10px; }
.mp-tr-l, .mp-tr-r { border: 1px solid var(--line); border-radius: 4px; padding: 8px; min-height: 210px;
  max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.mp-tr-l .mp-bar { margin: 0 0 6px; }
.mp-tr-t { font-size: 12px; color: var(--ink-3); }
.mp-tr-i { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 6px;
  border-radius: 3px; cursor: pointer; }
.mp-tr-i:hover { background: #f6efe1; }
.mp-tr-tip { font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
.mp-tr-none { font-size: 12.5px; color: var(--ink-3); padding: 18px 6px; text-align: center; }
.mp-tr-mid { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.mp-tr-f { margin-top: auto; }
.mp-recs { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.mp-rec { display: grid; grid-template-columns: 130px 110px 1fr; gap: 8px; font-size: 12.5px;
  padding: 6px 4px; border-bottom: 1px dashed var(--line); }
.mp-pager { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.mp-pager-k { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }
.mp-pg { border: 1px solid var(--line-2); background: #fff; border-radius: 3px; cursor: pointer;
  font-size: 12px; padding: 3px 9px; color: var(--ink-2); }
.mp-pg:hover:not(:disabled) { border-color: var(--pd-accent, #f86e04); color: var(--pd-accent, #f86e04); }
.mp-pg.on { background: var(--pd-accent, #f86e04); border-color: var(--pd-accent, #f86e04); color: #fff; }
.mp-pg:disabled { opacity: .45; cursor: default; }
.mp-sub { font-family: var(--serif); font-size: 14px; color: var(--ink); font-weight: 600;
  margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }

/* ============================================================================
   生平（对齐源站 manage/sacrifice/lifetime）· 逝者页头 + 三页签 + 图片字段
   ============================================================================ */
.lf-hero {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fff); margin-bottom: 12px;
}
.lf-photo {
  flex: none; width: 68px; height: 68px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: #f2e9d9; border: 1px solid var(--line-2);
  font-family: var(--serif); font-size: 24px; color: #9a8264;
}
.lf-photo img { width: 100%; height: 100%; object-fit: cover; }
.lf-hero-r { flex: 1; min-width: 0; }
.lf-hero-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-hero-t b { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.lf-hero-sub { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

.lf-sec {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: #fff; margin-bottom: 14px;
}
.lf-sec-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 13.5px; color: var(--ink); margin-bottom: 8px;
}
.lf-intro {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; line-height: 1.7; color: var(--ink); background: #ffffff;
}
.lf-intro:focus { outline: none; border-color: #f8b682; box-shadow: 0 0 0 3px rgba(232,145,63,.12); }
.lf-tabs { margin-bottom: 4px; }

/* 列表里的图片格：缩略图固定尺寸，不随图片原始尺寸把行撑变形 */
.mp-thumb-img {
  width: 46px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; display: block;
}
.mp-thumb-none { color: var(--ink-3); }

/* 表单里的图片字段：预览 + 上传按钮 */
.up-img { display: flex; align-items: center; gap: 10px; }
.up-img-prev {
  width: 84px; height: 60px; border-radius: 8px; border: 1px dashed var(--line-2);
  background: #ffffff; display: grid; place-items: center; overflow: hidden;
  font-size: 11.5px; color: var(--ink-3);
}
.up-img-prev img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   捐款列表的状态筛选条 + 审核/追加弹窗里的「标签 : 数值」行
   ============================================================================ */
.mp-bar-k { font-size: 12.5px; color: var(--ink-3); }
.mp-sel {
  height: 30px; min-width: 132px; padding: 0 26px 0 10px;
  border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%239a8264' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.mp-sel:focus { outline: none; border-color: #f8b682; box-shadow: 0 0 0 3px rgba(232,145,63,.12); }
.dl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; margin-bottom: 6px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; color: var(--ink-3);
}
.dl-row b { font-weight: 600; color: var(--ink); }

/* ============================================================================
   宗祠牌位墙（对齐源站 /manage/hall/tablet/:id）
   一面墙分左右中三堂、每堂分页、每页十二格；有人的格子是木牌，空的是虚线格。
   ============================================================================ */
.tt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tt-head-t { display: flex; align-items: baseline; gap: 6px; }
.tt-head-t b { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.tt-head-r { margin-left: auto; display: flex; gap: 8px; }
.tt-k { font-size: 12.5px; color: var(--ink-3); }

.tt-pos { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tt-pos-b {
  height: 32px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2, #6b5a45);
  font-family: var(--serif); font-size: 13.5px; letter-spacing: 1px;
}
.tt-pos-b:hover { border-color: #f8b682; }
.tt-pos-b.on {
  background: linear-gradient(180deg, #f86e04, #d95a00); border-color: #d95a00; color: #fff5e4;
}

/* 墙：12 格 4 列，窄屏自动降列 */
.tt-wall {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: 22px; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,247,232,.9), rgba(246,232,207,.9)),
    repeating-linear-gradient(90deg, #efe0c6 0 2px, transparent 2px 40px);
  border: 1px solid #e3d2b4;
  box-shadow: inset 0 2px 10px rgba(140,100,50,.10);
}
.tt-tablet {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  min-height: 96px; padding: 12px 8px 10px; border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, #7b4a20, #5f3616);
  border: 1px solid #4d2b11;
  box-shadow: 0 3px 0 #3f220d, 0 6px 12px rgba(60,35,10,.22);
  color: #ffeccd; text-align: center;
}
.tt-tablet-n {
  font-family: var(--serif); font-size: 15px; letter-spacing: 2px; line-height: 1.3;
  writing-mode: horizontal-tb; word-break: break-all;
}
.tt-tablet-s { font-family: var(--serif); font-size: 12px; letter-spacing: 3px; color: #e6c99a; }
.tt-tablet-g { font-size: 10.5px; color: #c9a877; letter-spacing: 1px; }
.tt-del {
  position: absolute; top: 3px; right: 4px; width: 20px; height: 20px;
  border: none; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(255,255,255,.16); color: #ffe3bc; font-size: 14px;
  opacity: 0; transition: opacity .15s;
}
.tt-tablet:hover .tt-del { opacity: 1; }
.tt-del:hover { background: #c0392b; color: #fff; }

.tt-slot {
  display: grid; place-items: center; min-height: 96px; border-radius: 6px;
  border: 1px dashed #cbb58e; background: rgba(255,255,255,.42);
  color: #b09a76; font-size: 12.5px; letter-spacing: 1px;
}
.tt-slot.can { cursor: pointer; border-color: #f8b682; color: #d95a00; }
.tt-slot.can:hover { background: #fff3e8; border-style: solid; }

.tt-foot {
  display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.tt-foot b { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.tt-foot-r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 选人弹窗 */
.tt-pick-bar { display: flex; }
.tt-pick-bar .inp { width: 100%; }
.tt-pick { max-height: 52vh; overflow: auto; margin-top: 8px; }
.tt-tbl { font-size: 12.5px; }

@media (max-width: 900px) {
  .tt-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
}
@media (max-width: 640px) {
  .tt-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-foot-r { margin-left: 0; width: 100%; }
}

/* ============================================================================
   我的订单：行内动作 + 订单详情（对齐源站 /user/order/details/:type/:id）
   ============================================================================ */
.uc-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-a {
  padding: 3px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 5px; background: #fff; color: var(--ink-2);
  font-family: inherit;
}
.uc-a:hover { border-color: #f8b682; color: #d95a00; }
.uc-a.primary { background: var(--brand, #f86e04); border-color: var(--brand, #f86e04); color: #fff3e8; }
.uc-a.primary:hover { filter: brightness(1.08); color: #fff3e8; }
.uc-a.danger { color: #b03a2e; border-color: #e6bcb5; }
.uc-a.danger:hover { background: #fdf1ef; border-color: #d98b7f; }

.od-h {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink);
}
.uc-back {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 12.5px; color: var(--ink-3); font-family: inherit;
}
.uc-back:hover { color: var(--brand, #f86e04); }

.od-head { display: flex; flex-direction: column; gap: 2px; }
.od-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.od-row:last-child { border-bottom: none; }
.od-k { color: var(--ink-3); min-width: 76px; }
.od-row b { color: var(--ink); font-weight: 600; }
.od-items td:first-child { color: var(--ink); }
.od-total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  margin-top: 10px; font-size: 13px; color: var(--ink-3);
}
.od-total b { font-size: 19px; color: #c0392b; font-family: var(--serif); }
.od-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  /* 窄屏：只有订单列表转卡片式（它真的有 data-label），
     地址/套餐那两张表不加 data-label，套上去会多出一段空白标签，所以不碰它们。 */
  .uc-table.od-list thead { display: none; }
  .uc-table.od-list tr { display: block; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; padding: 8px; }
  /* 单元格里放的是裸文本节点，flex 不会让它换行，"商品"那种长标题会顶出卡片右边缘。
     flex-wrap + word-break 让长文本自己折到下一行。 */
  .uc-table.od-list td { display: flex; flex-wrap: wrap; gap: 4px 10px; border: none; padding: 4px 2px; word-break: break-word; white-space: normal; }
  .uc-table.od-list td::before { flex: none; }
  .uc-table.od-list td::before { content: attr(data-label); color: var(--ink-3); min-width: 68px; }
  .od-row { flex-wrap: wrap; }
}

/* 订单列表：编号/状态/时间不许换行，窄了宁可整表横向滚动也不要断成两行 */
.uc-table.od-list td:nth-child(1),
.uc-table.od-list td:nth-child(2),
.uc-table.od-list td:nth-child(4),
.uc-table.od-list td:nth-child(6),
.uc-table.od-list td:nth-child(7) { white-space: nowrap; }
.uc-table.od-list td:nth-child(5) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 订单详情：未付款提醒条 + 分区（收件人信息 / 订单信息 / 商品明细 / 订单金额） */
.od-alert {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 10px;
  background: #fff3e8; border: 1px solid #f0d3ac;
}
.od-alert-l { flex: 1; min-width: 260px; }
.od-alert-t { font-size: 13.5px; color: #a05b16; font-weight: 600; }
.od-alert-s { font-size: 12.5px; color: #8a6a45; margin-top: 5px; }
.od-alert-s b { color: #c0392b; }
.od-alert-warn {
  margin-top: 7px; padding: 7px 9px; border-radius: 7px;
  background: #ffffff; border: 1px dashed #e6cba4;
  font-size: 11.5px; line-height: 1.65; color: #8a7455;
}
.od-alert-warn b { color: #b06a1e; }
.od-alert-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.od-sec { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.od-sec-h {
  font-family: var(--serif); font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 700px) { .od-grid { grid-template-columns: 1fr; } }

/* 牌位墙的面包屑：管理 / 宗祠管理 / 牌位 */
.tt-crumb { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.tt-crumb i { font-style: normal; color: #cdbca0; }
.tt-crumb .on { color: var(--brand, #f86e04); }

/* ==========================================================================
   v4.1 谱文二级栏（照源站实测：家族名条 52 / 工具区 80 / 搜索 32 / 类目行 40）
   源站这一栏是「目录树」，不是菜单——所以宽度 200px、字号 16px、行高 40px。
   ========================================================================== */
.pwsv-head { padding: 0 !important; flex: none; }
.pwsv-body { padding: 0 !important; display: flex; flex-direction: column; min-height: 0; }

.pwsv-fam {
  position: relative;
  height: 52px; display: flex; align-items: center;
  padding: 0 14px 0 20px;
  overflow: hidden;
}
.pwsv-famname {
  font-family: var(--serif);
  font-size: 22px; line-height: 1.15;
  color: #974d00;
  letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 左上角橙色小标：源站是一枚贴边书签，只露一角 */
.pwsv-tag {
  position: absolute; left: 0; top: 0;
  background: var(--rail-accent, #f86e04); color: #fff;
  font-size: 10.5px; line-height: 1; padding: 3px 5px 4px;
  border-radius: 0 0 6px 0;
  letter-spacing: .06em;
}

.pwsv-tools {
  flex: none; height: 80px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 8px 0 15px;
}
.pwsv-add {
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink, #1b2230);
}
.pwsv-add-ic { width: 28px; height: 28px; display: block; color: #4a5566; }
.pwsv-add-ic svg { width: 28px; height: 28px; display: block; }
.pwsv-add-t { font-size: 12.5px; line-height: 1; white-space: nowrap; }
.pwsv-add:hover .pwsv-add-ic { color: var(--rail-accent, #f86e04); }
.pwsv-add:hover .pwsv-add-t { color: var(--rail-accent, #f86e04); }

.pwsv-icons { display: grid; grid-template-columns: repeat(3, 38px); grid-auto-rows: 30px; }
.pwsv-icon {
  width: 38px; height: 30px; border: 0; background: none; cursor: pointer;
  font-size: 12px; color: #8b96a6; font-family: inherit;
}
.pwsv-icon:hover { color: var(--rail-accent, #f86e04); }

.pwsv-search { flex: none; position: relative; margin: 0 2px; }
.pwsv-search-ic {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #c0c4cc; pointer-events: none;
}
.pwsv-search-ic svg { width: 16px; height: 16px; display: block; }
.pwsv-search-in {
  width: 100%; height: 32px; box-sizing: border-box;
  padding: 0 26px 0 28px;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  font-size: 13px; font-family: inherit; color: var(--ink, #1b2230);
}
.pwsv-search-in:focus { outline: none; border-color: var(--rail-accent, #f86e04); }

.pwsv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 8px; }
.pwsv-list::-webkit-scrollbar { width: 6px; }
.pwsv-list::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 3px; }

.pwsv-item {
  height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; cursor: pointer;
  font-size: 15.5px; color: var(--ink, #1b2230);
}
.pwsv-item:hover { background: #f7f8fa; }
.pwsv-item.open { color: var(--rail-accent, #f86e04); }
.pwsv-ic { width: 18px; height: 18px; flex: none; }
.pwsv-ic svg { width: 18px; height: 18px; display: block; }
.pwsv-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pwsv-sub {
  height: 40px; margin: 0 10px; padding: 0 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink, #1b2230); cursor: pointer;
  border-radius: 2px;
}
.pwsv-sub:hover { background: #f7f8fa; }
.pwsv-sub.on { background: #f5f5f5; color: var(--rail-accent, #f86e04); }
.pwsv-sub-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.pwsv-sub-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pwsv-addcell { margin: 0 10px; padding: 8px 0 12px; background: #f5f5f5; border-radius: 2px; }
.pwsv-addbtn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; height: 27px; padding: 0 10px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: #ff7926;
}
.pwsv-addbtn:hover { color: var(--rail-accent, #f86e04); }
.pwsv-addbtn-ic { width: 16px; height: 16px; flex: none; }
.pwsv-addbtn-ic svg { width: 16px; height: 16px; display: block; }

.pwsv-empty { padding: 14px 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }

.pwsv-foot {
  flex: none; border-top: 1px solid #eef0f4; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.pwsv-footbtn {
  display: flex; align-items: center; gap: 5px; height: 30px;
  border: 1px dashed #e2e6ed; border-radius: 4px; background: #fff;
  color: var(--rail-accent, #f86e04); font-size: 13px; font-family: inherit; cursor: pointer;
  justify-content: center;
}
.pwsv-footbtn:hover { border-color: var(--rail-accent, #f86e04); }
.pwsv-bin {
  display: flex; align-items: center; gap: 6px; height: 22px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--rail-accent, #f86e04);
}
.pwsv-bin-ic { font-size: 13px; }
.pwsv-bin-ar { margin-left: auto; color: #c0c4cc; }

/* 谱文整页模式：源站没有 60px 顶栏，工具栏从 y=0 起，页面吃满可用高度 */
.pw-full { height: 100%; min-height: 0; margin: 0; }
.pw-full .pw-head { padding: 4px 8px 6px; }

@media (max-width: 980px) {
  /* 窄屏：二级栏是抽屉，谱文主区照旧满宽 */
  .pw-full { height: calc(100dvh - var(--topbar-h)); }
}

/* 谱文整页宿主：不套 .workbench 的页边距，直接吃满 #view */
.pw-host { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.pw-host > .pw { flex: 1; }

/* 谱文整页模式：标题等元信息搬进右栏顶部（源站那条 40px 标题行在这里不存在） */
.pw-r-title {
  flex: none; padding: 10px 10px 8px; border-bottom: 1px solid var(--line, #e8eaef);
  background: #fff;
}
.pw-r-title .pw-title { width: 100%; font-size: 14px; padding: 3px 5px; }
.pw-r-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 11px; }
.pw-r-sub .pw-pageinfo, .pw-r-sub .pw-crumb { font-size: 11px; }
/* 谱文二级栏页脚要放「新建类目 + 谱文回收站」两行，不能被通用的 54px 限高裁掉 */
.subnav-foot:has(.pwsv-foot) { max-height: none; padding: 0; }

/* ==========================================================================
   v4.2 谱系二级栏（照源站实测：工具区 87 / 标题栏 50 / 分支行 60 / 统计区）
   源站这一栏是「谱系分支 + 录入统计」，不是功能菜单。
   ========================================================================== */
.tree3.no-left { grid-template-columns: minmax(0, 1fr) 54px 306px; }
.tree3.no-left.pn-hidden { grid-template-columns: minmax(0, 1fr) 54px 0; }
@media (max-width: 1320px) {
  .tree3.no-left { grid-template-columns: minmax(0, 1fr) 54px 288px; }
}
@media (max-width: 1000px) {
  .tree3.no-left { grid-template-columns: minmax(0, 1fr); }
}

.tree3-left.psv {
  border-right: 0; padding: 0; overflow: auto; background: #fff;
  display: flex; flex-direction: column; height: 100%;
}

/* 工具区：20px 图标、两排、列距 50px（源站 x=94/144/194/244，y=85/121） */
.psv-tools {
  flex: none; display: grid;
  grid-template-columns: repeat(4, 20px);
  grid-auto-rows: 21px;
  gap: 15px 30px;
  padding: 15px 0 15px 14px;
  height: 87px; box-sizing: border-box;
}
.psv-tool {
  width: 20px; height: 21px; padding: 0; border: 0; background: none;
  color: #606266; cursor: pointer;
}
.psv-tool svg { width: 20px; height: 20px; display: block; }
.psv-tool:hover { color: var(--rail-accent, #f86e04); }

/* 标题栏：4×16 橙色竖条 + 18px 标题 + （1/1） */
.psv-titlebar {
  flex: none; height: 50px; display: flex; align-items: center; gap: 6px;
  padding: 0 0 0 10px;
}
.psv-title-bar { width: 4px; height: 16px; background: #f76d02; border-radius: 1px; flex: none; }
.psv-title-t { font-size: 17px; color: #33271f; letter-spacing: .02em; }
.psv-title-c { font-size: 15px; color: #666; }
.psv-title-c b { color: var(--rail-accent, #f86e04); font-weight: 400; }

/* 分支行：180×60，24×24 棕色方块图标 */
.psv-menu { flex: none; padding: 0 10px; }
.t3-branch {
  height: 60px; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: none !important;
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  font-size: 14px; cursor: pointer;
}
.t3-branch-ico {
  width: 24px; height: 24px; border-radius: 4px; flex: none;
  background: #c7a27c; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-family: var(--serif);
}
.t3-branch-name { color: var(--ink, #1b2230); font-size: 14px; }
.t3-branch.on .t3-branch-name { color: #ff7926; }
.t3-branch.on .t3-branch-ico { background: #ff7926; }
.psv-newbranch {
  width: 100%; height: 60px; border: 0; background: none; cursor: pointer;
  text-align: left; padding: 0 10px; font-family: inherit;
  font-size: 14px; color: var(--rail-accent, #f86e04);
}
.psv-newbranch:hover { background: #f7f8fa; }

/* 统计区：底 #f9f5f1、标题 #974d00、7 条 6px 进度条 */
.psv-stat { flex: 1; min-height: 0; overflow: auto; background: #f9f5f1; padding: 0 0 14px; }
.psv-stat-h {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
}
.psv-stat-t { font-size: 15px; color: #974d00; letter-spacing: .02em; }
.psv-stat-up, .psv-stat-fold {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: #666; padding: 0 2px; height: 20px;
}
.psv-stat-up { margin-left: auto; }
.psv-stat-fold::after { content: '›'; margin-left: 3px; color: var(--rail-accent, #f86e04); }
.psv-stat-fold.folded::after { content: '⌄'; }
.psv-stat-up:hover, .psv-stat-fold:hover { color: var(--rail-accent, #f86e04); }
.psv-stat .t3-stats { padding: 0 10px; gap: 0; }
.psv-stat .t3-stat {
  display: block; font-size: 14px; padding: 7px 0 0;
}
.psv-stat .t3-stat-n { display: inline; font-size: 14px; color: #1b2230; }
.psv-stat .t3-stat-n::after { content: '：'; }
.psv-stat .t3-stat-v { display: inline; font-size: 14px; color: #1b2230; }
.psv-stat .t3-stat-bar {
  display: block; height: 6px; border-radius: 0; background: #ebeef5; margin-top: 5px;
}
.psv-stat .t3-stat-bar i { border-radius: 0; }
.psv-foot { flex: none; border-top: 1px solid #eef0f4; padding: 8px 10px; }
.psv-footlink {
  display: block; font-size: 13px; color: var(--rail-accent, #f86e04);
  text-decoration: none; padding: 3px 0;
}
.psv-footlink:hover { text-decoration: underline; }

/* ==========================================================================
   v4.3 顶栏「家族名 + 竖线 + 面包屑」形态（源站实测）
   名字 24px #974d00、左距 20；竖线 1×22；面包屑 16px #606266
   ========================================================================== */
#topbar { gap: 0; }
.tb-fam {
  display: flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 12px 0 6px; flex: none; position: relative;
  min-width: 0; max-width: 340px;
}
.tb-tag {
  flex: none; background: var(--rail-accent, #f86e04); color: #fff;
  font-size: 10.5px; line-height: 1; padding: 3px 5px 4px; border-radius: 3px;
  letter-spacing: .06em;
}
.tb-famname {
  font-family: var(--serif); font-size: 22px; line-height: 1.2;
  color: #974d00; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-eye {
  flex: none; width: 22px; height: 22px; border: 0; background: none;
  color: #974d00; cursor: pointer; font-size: 13px; line-height: 1;
  display: grid; place-items: center; opacity: .8;
}
.tb-eye:hover { opacity: 1; }
.tb-div { width: 1px; height: 22px; background: #e3e7ee; flex: none; margin: 0 10px 0 0; }
.tb-crumb { display: flex; align-items: center; flex: none; padding: 0 4px 0 10px; }
.tb-crumb-t { font-size: 15.5px; color: #606266; letter-spacing: .02em; }
#topbar .search-wrap { margin-left: 14px; max-width: 260px; }
#topbar .search-wrap input { height: 32px; }

@media (max-width: 980px) {
  .tb-fam { max-width: 40vw; padding-left: 0; }
  .tb-famname { font-size: 18px; }
  .tb-div, .tb-crumb { display: none; }
  #topbar .search-wrap { display: none; }
  .topbar-right { overflow-x: auto; flex-wrap: nowrap; }
  .topbar-right::-webkit-scrollbar { display: none; }
}
.mg-topbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }

/* ==========================================================================
   谱书页 v5 —— 照百家有谱 print-detail 的 DOM 实测重排（类名统一 .pb-*，旧 .pd-* 原样保留）
   实测来源：snap/m04-谱书-制作谱书/dom.json
     主区 1075x820 从 (355,70) 起，内边距 30/20
     .top-box 1000x238 → 四步 600（每格 108x238、间距 56）+ 信息卡 320
     步骤图 108x142、步骤名 42x20、按钮 88x34
     .title-bar「体例明细」高 86、字号 18
     .table 上下 1px #e5e5e5，行高 160（内层 120），列 480/120/148/148/120
   ========================================================================== */
.pb-main {
  padding: 30px 20px 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 100%;
}

/* ---------- 上区：四步 + 谱书信息 ---------- */
.pb-top { display: flex; height: 238px; flex: none; }

.pb-steps { display: flex; flex: none; }
.pb-step {
  width: 108px; flex: none; display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.pb-step + .pb-step { margin-left: 56px; }

/* 步骤之间的虚线箭头（源站是 103x10 的图片，这里用 CSS 画，不引外链） */
.pb-step:not(:last-child)::after {
  content: ''; position: absolute; top: 145px; left: 108px; width: 56px; height: 10px;
  background:
    repeating-linear-gradient(90deg, #c8ccd4 0 5px, transparent 5px 10px) left center / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 45%, #c8ccd4 45% 55%, transparent 55%) right 3px / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 45%, #c8ccd4 45% 55%, transparent 55%) right 1px / 6px 6px no-repeat;
}

.pb-pic { width: 108px; height: 142px; flex: none; overflow: hidden; }
/* 牌内字号用 cqw 太超前，用容器查询兜底：给 .pb-pic 定 container */
.pb-pic { --plate-fs: 12px; --sub-fs: 4px; }
.pb-pic2 { --plate-fs: 10px; --sub-fs: 3.5px; width: 82px; height: 105px; flex: none; overflow: hidden; }
.pb-stepname {
  height: 20px; line-height: 20px; margin-top: 10px;
  font-size: 14px; color: #909399; font-weight: 500;
}
.pb-stepbtn {
  width: 88px; height: 34px; margin-top: 10px; padding: 0;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  color: #606266; font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer;
}
.pb-stepbtn:hover { color: var(--rail-accent, #f86e04); border-color: #f8b682; background: #fff8f2; }
.pb-stepbtn.primary {
  background: var(--rail-accent, #f86e04); border-color: var(--rail-accent, #f86e04); color: #fff;
}
.pb-stepbtn.primary:hover { background: #e06300; border-color: #e06300; color: #fff; }

/* 第一步的封面：深蓝布 + 金框 + 米黄竖牌 + 竖排字（比例照源站封面实测） */
.pb-cover {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, #1b3a75 0%, #16336e 42%, #12295a 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
/* 书脊：源站封面左侧 8% 是压印书脊线 */
.pb-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9%;
  border-right: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
}
.pb-cover-line {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 8.6%, rgba(255,255,255,.22) 8.6% 8.9%, transparent 8.9%),
    linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px) 0 0 / 100% 100%;
}
/* 金竖牌：宽 21.8%、高 68.7%、距左 65.8%、距顶 6.3%（源站实测） */
.pb-plate {
  position: absolute; left: 65.76%; top: 6.3%; width: 21.82%; height: 68.7%;
  background: linear-gradient(180deg, #fff6c9 0%, #fff0b7 50%, #f6e39c 100%);
  box-shadow: 0 0 0 0.6px rgba(120, 90, 20, .55), 0 0 0 2.2px rgba(214, 186, 122, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.pb-plate-l {
  font-family: var(--serif); color: #2a2118;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
/* 字号按牌高百分比给，82px 与 108px 两种缩略下都不糊 */
/* 字号按两种缩略尺寸分别给（不改 cqw，容器查询在部分内核下不生效） */
.pb-plate-l span { display: block; font-size: var(--plate-fs, 12px); line-height: 2.0; }
/* 牌内小字（副标题/卷号/堂号/编修日期）：源站是牌左侧一条窄竖排（实测 10 宽，紧贴书名左沿），
   不是压在书名上，所以这里绝对定位到牌内左侧，主字仍居中 */
.pb-plate-sub {
  position: absolute; left: 6%; top: 7%; width: 18%;
  font-family: var(--serif); color: #4a3a22;
  font-size: var(--sub-fs, 5px); line-height: 1.5;
  display: flex; flex-direction: column; align-items: center;
}

/* 第 2/3/4 步的示意页 */
.pb-sheet {
  width: 108px; height: 142px; background: #fff; border: 1px solid #e4e6eb;
  padding: 7px 5px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.pb-sheet .pb-sheet-h { height: 6px; background: #b9c0cc; border-radius: 1px; flex: none; }
.pb-sheet i { display: block; height: 3px; background: #e6e8ee; border-radius: 1px; }
.pb-sheet i.short { width: 62%; }
.pb-sheet-cols { display: flex; gap: 3px; flex: 1; min-height: 0; }
.pb-sheet-cols i { flex: 1; height: 100%; background: #eef0f5; border-radius: 1px; }

.pb-pdf { width: 108px; height: 142px; display: grid; place-items: center; background: #fff; border: 1px solid #e4e6eb; }
.pb-pdf span { font-size: 30px; font-weight: 700; color: #c8ccd4; letter-spacing: 1px; font-family: Arial, sans-serif; }

/* ---------- 谱书信息卡（源站是 320x238 的米黄纹理图，这里用渐变复刻，不引外链） ---------- */
.pb-info {
  width: 320px; height: 238px; flex: none; margin-left: auto;
  background:
    repeating-linear-gradient(0deg, rgba(160, 120, 60, .045) 0 1px, transparent 1px 4px),
    linear-gradient(128deg, #fbf4e2 0%, #f6ecd3 38%, #f1e3c4 72%, #ecdcb8 100%);
  box-shadow: inset 0 0 0 1px rgba(196, 168, 116, .35), 0 1px 2px rgba(120, 90, 40, .06);
  color: #974d00; overflow: hidden;
}
.pb-info-h {
  height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--serif); font-size: 20px; color: #974d00; position: relative;
}
.pb-info-edit {
  border: 0; background: none; cursor: pointer; padding: 0; width: 16px; height: 16px;
  color: #974d00; opacity: .8; display: grid; place-items: center;
}
.pb-info-edit:hover { opacity: 1; }
.pb-info-edit svg { width: 16px; height: 16px; display: block; }
.pb-info-b { padding: 0 20px; }
.pb-info-row { height: 28px; display: flex; align-items: center; font-size: 14px; }
.pb-info-k { width: 70px; flex: none; color: #974d00; }
.pb-info-v { flex: 1; min-width: 0; color: #974d00; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 体例明细 ---------- */
.pb-eds-h {
  height: 86px; flex: none; display: flex; align-items: flex-end;
  justify-content: space-between; padding-bottom: 14px;
}
.pb-eds-t { font-size: 18px; color: #333; letter-spacing: .01em; }
.pb-eds-add {
  height: 34px; padding: 0 14px; border: 1px solid var(--rail-accent, #f86e04);
  border-radius: 2px; background: #fff; color: var(--rail-accent, #f86e04);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.pb-eds-add:hover { background: #fff4ea; }

.pb-table { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.pb-tr { border-radius: 2px; }
.pb-tr.on {
  box-shadow: 0 0 0 1px rgba(248, 110, 4, .55), 0 2px 8px rgba(248, 110, 4, .10);
  background: #fff;
}
.pb-tr-inner { height: 120px; margin: 20px 0; display: flex; align-items: stretch; }

.pb-td-info { width: 480px; flex: none; display: flex; }
.pb-pic {
  width: 82px; height: 105px; flex: none; margin-right: 10px; overflow: hidden;
  border: 0;
}
.pb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pb-t { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 14px; }
.pb-bind {
  display: inline-block; height: 21px; line-height: 19px; padding: 0 5px;
  font-size: 12px; color: #0053b5; background: #fff;
  border: 1px solid #0053b5; border-radius: 2px;
  vertical-align: middle;
}
/* 体例名不占满整行：「[查看设置]」要紧跟在名字后面（源站就是紧贴），
   名字过长时自己省略，不把后面的链接推到天边去 */
.pb-name {
  font-size: 18px; color: #333; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-cfg {
  flex: none; margin-left: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: #999; font-family: inherit; white-space: nowrap;
}
.pb-cfg:hover { color: var(--rail-accent, #f86e04); }
.pb-row { height: 20px; font-size: 14px; color: #666; display: flex; align-items: center; }
.pb-row + .pb-row { margin-top: 2px; }
.pb-row .pb-gap { margin-left: 30px; }
.pb-row .pb-gap2 { margin-left: 20px; }
.pb-time { height: 20px; font-size: 14px; color: #666; margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.pb-state { color: #909399; }
.pb-state.live { color: #f56c6c; }

.pb-td-prev { width: 120px; flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.pb-link {
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; color: #606266; display: flex; align-items: center; gap: 6px;
  height: 20px; line-height: 20px;
}
.pb-link:hover { color: var(--rail-accent, #f86e04); }
.pb-link svg { width: 16px; height: 16px; flex: none; }
.pb-link.pv svg { color: var(--rail-accent, #f86e04); }
.pb-link.dl svg { color: #409eff; }
.pb-link.dl { height: 40px; align-items: flex-start; padding-top: 4px; }

.pb-td-buy { width: 148px; flex: none; display: flex; align-items: center; justify-content: center; }
.pb-buy {
  height: 36px; width: 107px; border-radius: 20px; border: 1px solid var(--rail-accent, #f86e04);
  background: var(--rail-accent, #f86e04); color: #fff; font-size: 14px; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pb-buy:hover { background: #e06300; border-color: #e06300; }
.pb-buy svg { width: 16px; height: 16px; }

.pb-td-pub { width: 148px; flex: none; display: flex; align-items: center; justify-content: center; }
.pb-pub { display: flex; align-items: center; gap: 16px; font-size: 14px; color: #666; }
.pb-sw { width: 40px; height: 20px; border-radius: 10px; border: 1px solid #dcdfe6; background: #dcdfe6;
  position: relative; cursor: pointer; padding: 0; flex: none; transition: background .15s, border-color .15s; }
.pb-sw i { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; display: block; }
.pb-sw.on { background: var(--rail-accent, #f86e04); border-color: var(--rail-accent, #f86e04); }
.pb-sw.on i { left: 21px; }
.pb-sw:disabled { opacity: .55; cursor: not-allowed; }

.pb-td-del { width: 120px; flex: none; display: flex; align-items: center; justify-content: center; }
.pb-del {
  border: 0; background: none; cursor: pointer; padding: 0; width: 21px; height: 21px;
  color: #b91212; display: grid; place-items: center;
}
.pb-del:hover { color: #e01b1b; }
.pb-del svg { width: 21px; height: 21px; display: block; }

.pb-empty { padding: 40px 0; }

@media (max-width: 1200px) {
  .pb-top { height: auto; flex-direction: column; gap: 16px; }
  .pb-info { margin-left: 0; width: 100%; max-width: 320px; }
  .pb-tr-inner { height: auto; flex-wrap: wrap; }
  .pb-td-info { width: 100%; }
  .pb-td-prev, .pb-td-buy, .pb-td-pub, .pb-td-del { width: auto; flex: 1 1 120px; justify-content: flex-start; padding: 8px 0; }
}

/* 谱书主页：源站主区是纯白、无边框、无圆角，四步条直接贴顶 */
.pd.pd-flat { border: 0; border-radius: 0; min-height: 0; background: #fff; }

/* 谱书二级栏：大缩略图卡（源站 265 宽的栏里是「左书封 + 右书名 + 类型标签 + 编辑笔」） */
.pd-book-lg { padding: 12px; gap: 12px; min-height: 128px; align-items: flex-start; }
.pd-book-thumb { width: 76px; height: 100px; flex: none; overflow: hidden; }
.pd-book-info { flex: 1; min-width: 0; padding-top: 2px; }
.pd-book-lg .pd-book-n {
  font-size: 15px; font-family: var(--serif); line-height: 1.35;
  -webkit-line-clamp: 2;
}
.pd-book-tag {
  display: inline-block; margin-top: 6px; height: 18px; line-height: 16px; padding: 0 5px;
  font-size: 11px; color: var(--pd-accent, #f86e04);
  border: 1px solid var(--pd-accent, #f86e04); border-radius: 2px;
}
.pd-book-lg .pd-book-edit { right: 6px; top: 6px; }
.pd-book-lg .pd-book-edit svg { width: 14px; height: 14px; display: block; }

/* ==========================================================================
   谱书第一步「封面、封底、扉页选择」——照源站 m04-谱书-选择封面 实测
     左列 211（页签 42 / 表单 190 / 按钮 60x34）
     中列 216（标题 19px + 下拉 85x28 + 封面卡 120x196）
     右列 588（380x540 大样）
   ========================================================================== */
.pb-main.bc-host { padding: 20px; }

.bc { display: flex; align-items: flex-start; gap: 0; }

/* ---------- 左列 ---------- */
.bc-left { width: 211px; flex: none; border-right: 1px solid #eee; padding-right: 21px; }
.bc-tabs { display: flex; align-items: flex-end; height: 42px; }
.bc-tab {
  position: relative; height: 40px; line-height: 40px; padding: 0 10px;
  font-size: 14px; font-weight: 500; color: #303133; cursor: pointer;
}
.bc-tab.on { font-size: 19px; color: var(--rail-accent, #f86e04); }
.bc-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rail-accent, #f86e04);
}

.bc-form { padding-top: 14px; }
.bc-row { height: 34px; display: flex; align-items: center; justify-content: space-between; }
.bc-row-t { font-size: 16px; color: #333; }
.bc-field { margin-bottom: 4px; }
.bc-label {
  height: 34px; display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; color: #333;
}
.bc-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #606266; cursor: pointer; }
.bc-inp {
  width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  font-size: 13px; font-family: inherit; color: #606266;
}
.bc-inp:focus { outline: none; border-color: var(--rail-accent, #f86e04); }

/* 方勾：14×14、圆角 2、选中橙色实心 + 白勾 */
.bc-chk {
  width: 14px; height: 14px; flex: none; box-sizing: border-box;
  border: 1px solid #d7d7d7; border-radius: 2px; background: #d7d7d7;
  display: inline-grid; place-items: center; cursor: pointer;
}
.bc-chk.on { background: var(--rail-accent, #f86e04); border-color: var(--rail-accent, #f86e04); }
.bc-chk.on::after { content: '✓'; color: #fff; font-size: 10px; line-height: 1; }

.bc-btns { display: flex; gap: 30px; padding: 14px 0 0 20px; }
.bc-btn {
  width: 60px; height: 34px; border: 1px solid #dcdfe6; border-radius: 2px;
  background: #fff; color: #606266; font-size: 14px; font-family: inherit; cursor: pointer;
}
.bc-btn:hover { color: var(--rail-accent, #f86e04); border-color: #f8b682; }
.bc-btn.primary { background: var(--rail-accent, #f86e04); border-color: var(--rail-accent, #f86e04); color: #fff; }
.bc-btn.primary:hover { background: #e06300; border-color: #e06300; color: #fff; }
.bc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 中列 ---------- */
.bc-mid { width: 216px; flex: none; border-right: 1px solid #eee; padding: 0 20px 0 20px; }
.bc-mid-h { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 6px; }
.bc-mid-t { font-size: 19px; color: #000; white-space: nowrap; }
.bc-sel {
  width: 85px; height: 28px; flex: none; padding: 0 4px;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  font-size: 12px; color: #606266; font-family: inherit;
}
.bc-list { display: flex; flex-direction: column; gap: 15px; padding-top: 8px; }
.bc-item { width: 120px; cursor: pointer; }
.bc-item-img { width: 120px; height: 170px; overflow: hidden; position: relative; --plate-fs: 13px; --sub-fs: 4.5px; }
.bc-item.on .bc-item-img { outline: 2px solid #52c41a; }
.bc-item-info { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.bc-type {
  font-size: 12px; line-height: 14px; padding: 0 3px;
  color: #0053b5; background: #fff; border: 1px solid #0053b5; border-radius: 2px;
  white-space: nowrap;
}
.bc-name { font-size: 15px; color: #33271f; white-space: nowrap; }

/* ---------- 右列 ---------- */
.bc-right { flex: 1; min-width: 0; padding-left: 20px; overflow: auto; }
.bc-prevs { display: flex; flex-direction: column; gap: 22px; }
.bc-big {
  position: relative; width: 380px; height: 540px; overflow: hidden;
  --plate-fs: 40px; --sub-fs: 11px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, #1b3a75 0%, #16336e 42%, #12295a 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.bc-big::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9%;
  border-right: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.12);
  background-image: repeating-linear-gradient(180deg,
    transparent 0 11%, rgba(255,255,255,.5) 11% 11.6%, transparent 11.6% 22%);
}
.bc-big.hard {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #8d2020 0%, #6e1414 60%, #5a1010 100%);
}
/* 封底不印字，也不画书脊压线 */
.bc-big.back::before { display: none; }
.bc-big .pb-plate-l span { line-height: 2.3; }
.bc-sub-gap { display: block; height: 6px; }
.bc-cap { font-size: 18px; color: #333; margin-top: 8px; }

@media (max-width: 1100px) {
  .bc { flex-wrap: wrap; gap: 16px; }
  .bc-left, .bc-mid { border-right: 0; padding-right: 0; }
  .bc-right { padding-left: 0; width: 100%; }
  .bc-big { width: 100%; max-width: 380px; height: auto; aspect-ratio: 380 / 540; }
}

/* ==========================================================================
   谱书第三步「设置版式」——照源站 m04-谱书-设置版式 实测
     左列 210（右边 1px #e5e5e5）：版式类型下拉 + 160×36 版式条目
     主区 865×739：版式范例（双页）+ 说明
     底栏 61（上边 1px #e5e5e5）：左 3 个按钮、右 4 个按钮
   ========================================================================== */
.bl { display: flex; flex-direction: column; min-height: 100%; }
.bl-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }

.bl-left { width: 210px; flex: none; border-right: 1px solid #e5e5e5; padding: 10px 0 0; }
.bl-left-h { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 10px; margin-bottom: 6px; }
.bl-left-t { font-size: 14px; color: #333; white-space: nowrap; }
.bl-sel {
  flex: 1; min-width: 0; height: 32px; padding: 0 6px;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  font-size: 12px; color: #606266; font-family: inherit;
}
.bl-menu { max-height: 621px; overflow-y: auto; padding: 0 10px 10px; }
.bl-menu::-webkit-scrollbar { width: 6px; }
.bl-menu::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 3px; }

.bl-item {
  position: relative; width: 160px; height: 36px; margin-bottom: 16px;
  display: flex; align-items: center; padding-left: 26px; box-sizing: border-box;
  background: #f5f5f5; cursor: pointer; overflow: hidden;
}
.bl-item.on { background: #feefe4; }
.bl-item.on .bl-txt { color: var(--rail-accent, #f86e04); }
.bl-txt { font-size: 14px; color: #333; white-space: nowrap; }
/* 左上角的斜纹小标签：通用灰、定制褐（源站是一枚旋转 45° 的角标） */
.bl-tag {
  position: absolute; left: 0; top: 0; width: 22px; height: 36px;
  display: grid; place-items: center;
  font-size: 9px; color: #666; background: #e2e2e2;
  writing-mode: vertical-rl; letter-spacing: .02em;
}
.bl-tag.cust { color: #974d00; background: #dfae72; }
.bl-empty { padding: 20px 4px; font-size: 12.5px; color: var(--ink-3); }

.bl-right { flex: 1; min-width: 0; padding: 10px 20px 0; display: flex; flex-direction: column; }
.bl-right-h { height: 30px; line-height: 30px; font-size: 15px; color: #333; }
.bl-preview { flex: none; }
.bl-sample {
  display: flex; gap: 6px; padding: 12px; background: #fff;
  border: 1px solid #e8eaef; max-width: 860px;
}
.bl-page {
  flex: 1; min-width: 0; height: 420px; position: relative;
  display: flex; gap: 0; background: #fff;
  border: 1px solid #333;
}
/* 竖栏：每栏一条竖线，栏内是世次标签 + 若干姓名块 */
.bl-col {
  flex: 1; min-width: 0; position: relative;
  border-right: 1px solid #d9d9d9;
  padding: 6px 3px 0; display: flex; flex-direction: column; gap: 6px;
}
.bl-col:last-of-type { border-right: 0; }
.bl-gen {
  align-self: center; font-size: 9px; color: #333;
  writing-mode: vertical-rl; background: #f3f3f3; padding: 2px 0;
}
.bl-name { display: block; height: 16px; background: #ececec; border-radius: 1px; }
.bl-line { display: block; height: 3px; background: #f0f0f0; }
.bl-side {
  position: absolute; right: 2px; top: 10px;
  font-family: var(--serif); font-size: 11px; color: #666;
  writing-mode: vertical-rl; letter-spacing: .1em;
  display: flex; flex-direction: column; align-items: center;
}
.bl-side span { display: block; }
.bl-cap { margin-top: 12px; font-size: 13px; color: #666; line-height: 1.8; max-width: 860px; }

.bl-foot {
  flex: none; height: 61px; margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #e5e5e5; padding: 0 4px;
}
.bl-foot-l, .bl-foot-r { display: flex; align-items: center; gap: 14px; }
.bc-btn.wide { width: auto; min-width: 72px; padding: 0 14px; }

@media (max-width: 1100px) {
  .bl-body { flex-direction: column; }
  .bl-left { width: 100%; border-right: 0; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; }
  .bl-menu { display: flex; flex-wrap: wrap; gap: 10px; max-height: none; }
  .bl-item { margin-bottom: 0; }
  .bl-sample { flex-direction: column; }
  .bl-page { height: 260px; }
  .bl-foot { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 10px; }
}

/* ==========================================================================
   谱书第二步「编辑内容」——照源站 m04-谱书-编辑内容 实测
     列表区 flex（可折叠两组 + 每行「谱文标题 / 引用谱文」）
     竖排工具条 48（圆形图标 + 竖排 2 字）
     右侧「谱系分支」面板 210
   ========================================================================== */
.bk { display: flex; align-items: stretch; min-height: 640px; }
.bk-list { flex: 1; min-width: 0; padding-right: 10px; }

.bk-group { margin-bottom: 18px; }
.bk-group-h {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 10px; border-radius: 2px;
  background: #f2f3f5; color: #606266; font-size: 14px;
}
.bk-group:first-child .bk-group-h { background: #f2f3f5; }
/* 源站第二组是浅橙底（正文目录） */
.bk-group + .bk-group .bk-group-h { background: #fdf1e8; color: #b3541e; }
.bk-group-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-fold {
  flex: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: #909399; padding: 0 2px;
}
.bk-fold:hover { color: var(--rail-accent, #f86e04); }

.bk-rows { padding: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.bk-row {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid #e8eaef; border-radius: 2px; padding: 10px 10px 10px 8px;
  background: #fff; position: relative;
}
.bk-row:hover { border-color: #f8b682; }
.bk-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 4px;
  background: radial-gradient(circle, #fff 0 3px, var(--rail-accent, #f86e04) 3.5px 100%);
  opacity: .9;
}
.bk-row-b { flex: 1; min-width: 0; }
.bk-line1 { display: flex; align-items: center; gap: 4px; height: 24px; }
.bk-line2 { display: flex; align-items: center; gap: 4px; height: 24px; }
.bk-k { font-size: 13.5px; color: #606266; flex: none; }
.bk-v { font-size: 13.5px; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pen {
  border: 0; background: none; cursor: pointer; color: #909399;
  font-size: 13px; padding: 0 2px;
}
.bk-pen:hover { color: var(--rail-accent, #f86e04); }
.bk-row-del {
  flex: none; border: 0; background: none; cursor: pointer; padding: 2px;
  font-size: 13px; color: #c8ccd4; line-height: 1;
}
.bk-row-del:hover { color: #f56c6c; }
.bk-empty { padding: 14px 10px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- 竖排工具条 ---------- */
.bk-rail {
  width: 48px; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding-top: 6px;
}
.bk-tool {
  width: 44px; padding: 8px 0 6px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: inherit; color: #606266;
}
.bk-tool-ic { width: 17px; height: 17px; display: block; }
.bk-tool-ic svg { width: 17px; height: 17px; display: block; }
.bk-tool-t { font-size: 11px; line-height: 1.2; letter-spacing: .02em; }
.bk-tool:hover { color: var(--rail-accent, #f86e04); }
/* 「保存」是实心橙圆（源站唯一一个高亮动作） */
.bk-tool.hot .bk-tool-ic {
  background: var(--rail-accent, #f86e04); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center;
}
.bk-tool.hot .bk-tool-ic svg { width: 15px; height: 15px; }
.bk-tool.hot { color: var(--rail-accent, #f86e04); }

/* ---------- 右侧分支面板 ---------- */
.bk-side {
  width: 210px; flex: none; border-left: 1px solid #eef0f4; padding: 0 0 0 14px;
}
.bk-side-h {
  height: 50px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #333;
}
.bk-side-row { display: flex; align-items: center; gap: 6px; height: 34px; }
.bk-side-k { font-size: 12.5px; color: #909399; flex: none; }
.bk-side-v {
  flex: 1; min-width: 0; height: 28px; line-height: 26px; padding: 0 6px;
  border: 1px solid #dcdfe6; border-radius: 2px; font-size: 12.5px; color: #303133;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;
}
.bk-side-sels { display: flex; gap: 6px; margin: 8px 0 6px; }
.bk-side-sel {
  flex: 1; min-width: 0; height: 28px; padding: 0 4px;
  border: 1px solid #dcdfe6; border-radius: 2px; background: #fff;
  font-size: 12px; color: #606266; font-family: inherit;
}
.bk-tree { padding-top: 6px; }
.bk-node { display: flex; align-items: center; gap: 5px; height: 26px; font-size: 12.5px; color: #303133; }
.bk-node.child { padding-left: 14px; }
.bk-node.child.off { opacity: .6; }
.bk-node-ic { color: var(--rail-accent, #f86e04); font-size: 12px; flex: none; }
.bk-node-g { color: #f56c6c; font-size: 11.5px; flex: none; }
.bk-tree-tip { padding: 6px 2px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }

@media (max-width: 1100px) {
  .bk { flex-direction: column; min-height: 0; }
  .bk-rail {
    width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding: 10px 0; border-top: 1px solid #eef0f4;
  }
  .bk-side { width: 100%; border-left: 0; border-top: 1px solid #eef0f4; padding: 10px 0 0; }
  .bk-side-h { justify-content: flex-start; height: 34px; }
}

/* 卷轴页：源站三步条与谱书页同构，但只有三步、没有右侧信息卡 */
.sc-top { height: 238px; }
.pb-pic-in { width: 108px; height: 142px; display: grid; place-items: center; }
.pb-pic-in > * { width: 100% !important; height: 100% !important; }

/* 第一步的内容稿示意：竖排的稿纸 */
.sc-draft { justify-content: flex-start; }
.sc-draft i { height: 2px; background: #dfe2e8; }
.sc-draft i:nth-child(n+6) { width: 76%; }

/* 卷轴体例行：只有「信息 / 下载 / 印刷」三列，印刷靠右（源站也是贴右边） */
.sc-tr { justify-content: flex-start; }
.sc-tr .pb-td-info { width: 520px; }
.sc-tr .pb-td-buy { margin-left: auto; margin-right: 20px; }
.sc-tr .pb-td-prev { align-items: flex-start; }

.sc-bind { color: #b3541e !important; border-color: #b3541e !important; }
.sc-pic2 { width: 82px; height: 105px; }

/* ===== 触屏 / 窄屏：按钮可点区域 ≥44px =====
   .btn 原高 34px、.btn-sm 28px，鼠标点没问题，手指点十次漏三次。
   44px 是 Apple HIG 与 Material 的同一口径，也是 visual-check 的判据。
   只管窄屏与粗指针设备，桌面布局一个像素都不动。 */
@media (max-width: 760px), (pointer: coarse) {
  .btn { height: auto; min-height: 44px; padding: 0 16px; }
  .btn-sm { height: auto; min-height: 40px; padding: 0 12px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  /* 输入类控件同理：手机上 36px 高的输入框总是点不准 */
  .field input, .field select, .field textarea { min-height: 44px; }
}

/* ================= 新增板块：帮助 / 综合 / 寻根 / 谱库（对齐百家有谱，且更全面） ================= */
.help-wrap { max-width: 920px; }
.help-sec { margin: 18px 0 6px; }
.help-sec > h3 { font-size: 16px; color: var(--ink); margin: 0 0 8px; font-family: var(--serif); }
.help-q { border: 1px solid var(--line, #e5ddd0); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--card, #fff); }
.help-q-t { font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.help-q-a { color: var(--ink-2, #6b6256); line-height: 1.7; font-size: 13.5px; }

.ov-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 14px 0; }
.ov-stat { background: var(--card, #fff); border: 1px solid var(--line, #e5ddd0); border-radius: 12px; padding: 16px; text-align: center; }
.ov-stat-v { font-size: 26px; font-weight: 700; color: var(--rail-accent, #f86e04); font-family: var(--serif); }
.ov-stat-k { font-size: 12.5px; color: var(--ink-2, #6b6256); margin-top: 4px; }
.ov-sec { margin: 18px 0 6px; }
.ov-sec > h3 { font-size: 15px; color: var(--ink); margin: 0 0 10px; font-family: var(--serif); }
.ov-tl { list-style: none; margin: 0; padding: 0; }
.ov-tl li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line, #ece4d6); font-size: 13.5px; }
.ov-tl-t { color: var(--ink-2, #6b6256); flex: none; width: 86px; }
.ov-tl-c { color: var(--ink); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.ov-cell { display: flex; align-items: center; justify-content: center; height: 52px; border: 1px solid var(--line, #e5ddd0); border-radius: 10px; background: var(--card, #fff); color: var(--ink); text-decoration: none; font-size: 14px; }
.ov-cell:hover { border-color: var(--rail-accent, #f86e04); color: var(--rail-accent, #f86e04); }

.seek-box { max-width: 880px; }
.seek-res { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.seek-row { border: 1px solid var(--line, #e5ddd0); border-radius: 10px; padding: 10px 14px; background: var(--card, #fff); }
.seek-name { font-weight: 600; color: var(--ink); }
.seek-meta { font-size: 12px; color: var(--ink-2, #6b6256); margin: 2px 0 6px; }
.seek-chain { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; }
.seek-node { color: var(--ink-2, #6b6256); text-decoration: none; }
.seek-node:hover { color: var(--rail-accent, #f86e04); text-decoration: underline; }
.seek-node.me { color: var(--rail-accent, #f86e04); font-weight: 700; }
.seek-arrow { color: #b9ad99; }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 14px; }
.lib-card { position: relative; border: 1px solid var(--line, #e5ddd0); border-radius: 12px; overflow: hidden; background: var(--card, #fff); padding: 0 0 12px; }
.lib-spine { position: absolute; top: 0; left: 0; bottom: 0; width: 10px; background: var(--cb, #f86e04); }
.lib-face { padding: 16px 16px 12px 22px; min-height: 92px; }
.lib-title { font-family: var(--serif); font-size: 17px; color: var(--ink); line-height: 1.3; }
.lib-sub { font-size: 12.5px; color: var(--ink-2, #6b6256); margin-top: 4px; }
.lib-meta { font-size: 12px; color: #9a8f7d; margin-top: 8px; }
.lib-card .btn { margin: 0 16px; }

.mg-gate { max-width: 520px; margin: 40px auto; text-align: center; border: 1px dashed var(--line-2, #d9cdb8); border-radius: 14px; padding: 28px 24px; background: var(--card, #fff); }
.mg-gate-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--rail-accent, #f86e04); color: #fff; font-size: 24px; font-family: var(--serif); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.mg-gate h3 { margin: 0 0 10px; color: var(--ink); font-family: var(--serif); }
.mg-gate p { color: var(--ink-2, #6b6256); line-height: 1.7; font-size: 13.5px; }


/* ===================== 谱书·编辑内容 编排器（v2：真实内容块清单） ===================== */
.bk-composer { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 30px; min-height: 640px; }
.bk-top { display: flex; align-items: center; justify-content: space-between; }
.bk-top-t { font-size: 18px; font-weight: 700; font-family: var(--serif); color: var(--ink); }
.bk-top-acts { display: flex; gap: 8px; }
.bk-btn { height: 32px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--rail-accent, #f86e04); background: var(--rail-accent, #f86e04); color: #fff; font-size: 13px; cursor: pointer; }
.bk-btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2, #d9cdb8); }
.bk-blocks { display: flex; flex-direction: column; gap: 8px; }
.bk-grp { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 10px 2px 2px; padding: 4px 0; border-bottom: 2px solid var(--rail-accent, #f86e04); font-family: var(--serif); letter-spacing: .04em; }
.bk-block { border: 1px solid var(--line-2, #e4dccb); border-radius: 10px; background: var(--card, #fff); padding: 10px 12px; }
.bk-block-h { display: flex; align-items: center; gap: 10px; }
.bk-block-tag { font-size: 11px; background: var(--rail-accent, #f86e04); color: #fff; padding: 2px 8px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.bk-block-title { font-size: 15px; color: var(--ink); font-weight: 600; font-family: var(--serif); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-block-acts { display: flex; gap: 4px; }
.bk-ico { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line-2, #d9cdb8); background: #fff; color: var(--ink-2); cursor: pointer; font-size: 14px; line-height: 1; }
.bk-ico:disabled { opacity: .35; cursor: not-allowed; }
.bk-ico.del:hover { background: #fde8e8; color: #c0392b; border-color: #e6b0b0; }
.bk-block-ref { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.bk-link { margin-left: 8px; color: var(--rail-accent, #f86e04); background: none; border: none; cursor: pointer; font-size: 12.5px; text-decoration: underline; }
.bk-block-sum { font-size: 12px; color: #8a7c64; margin-top: 6px; background: #faf6ee; border-radius: 6px; padding: 5px 8px; }
.bk-cfg { margin-top: 10px; border-top: 1px dashed var(--line-2, #e4dccb); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bk-cfg-row { display: flex; align-items: center; gap: 10px; }
.bk-cfg-k { font-size: 12.5px; color: var(--ink-2); width: 72px; flex: 0 0 auto; }
.bk-cfg-num, .bk-cfg-sel { height: 30px; border: 1px solid var(--line-2, #d9cdb8); border-radius: 6px; padding: 0 8px; font-size: 13px; }
.bk-cfg-chk { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bk-cfg-tip { font-size: 11.5px; color: #9a8e78; }
.bk-pick { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.bk-pick-in { height: 30px; border: 1px solid var(--line-2, #d9cdb8); border-radius: 6px; padding: 0 8px; font-size: 13px; }
.bk-pick-list { max-height: 180px; overflow: auto; border: 1px solid var(--line-2, #efeeea); border-radius: 6px; background: #fdfcfa; }
.bk-pick-it { padding: 6px 10px; font-size: 13px; color: var(--ink); cursor: pointer; border-bottom: 1px solid #f1eee8; }
.bk-pick-it:hover { background: #fff3e6; }
.bk-pick-empty { padding: 10px; color: #aaa; font-size: 12.5px; text-align: center; }
.bk-pick-done { font-size: 13px; color: var(--rail-accent, #f86e04); font-weight: 600; }
.bk-empty.big { text-align: center; color: var(--ink-3); padding: 40px 16px; border: 1px dashed var(--line-2, #e4dccb); border-radius: 12px; line-height: 1.8; }
.bk-addbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px dashed var(--line-2, #d9cdb8); border-radius: 10px; background: #faf7f0; margin-top: 6px; }
.bk-addbar-t { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.bk-add { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--rail-accent, #f86e04); background: #fff; color: var(--rail-accent, #f86e04); font-size: 13px; cursor: pointer; font-weight: 600; }
.bk-add:hover { background: var(--rail-accent, #f86e04); color: #fff; }
.bk-add:disabled { opacity: .4; cursor: not-allowed; }
.bk-pwpick { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.bk-pwpick-cat { font-size: 13px; font-weight: 700; color: var(--ink); font-family: var(--serif); margin: 8px 0 2px; }
.bk-pwpick-it { padding: 7px 12px; font-size: 13.5px; color: var(--ink); border-radius: 6px; cursor: pointer; background: #fdfcfa; border: 1px solid #f0ede7; }
.bk-pwpick-it:hover { background: #fff3e6; border-color: var(--rail-accent, #f86e04); }
.bk-chapter-h { text-align: center; font-size: 17px; letter-spacing: .5em; color: var(--ink); padding: 8mm 0 4mm; }

/* ===== 待审单「预览档案」+「添加子女」世代只读（2026-11-12） =====
   按钮必须一眼可点：实底 + 可见描边 + 手型，不用透明 ghost。 */
.btn.rev-preview { min-height:34px; background:#fffaf3; border:1px solid var(--brand,#8c4a2f); color:var(--brand,#8c4a2f); font-weight:600; box-shadow:0 1px 0 rgba(90,70,45,.10); cursor:pointer; }
.btn.rev-preview:hover { background:var(--brand-soft,#f6ead9); }
.rev-place { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-2px 0 10px; padding:7px 10px; border:1px solid #eadcc9; background:#fffaf3; border-radius:7px; font-size:12.5px; color:var(--ink,#3b3229); }
.rev-place-k { color:var(--ink3,#8b7e70); font-weight:600; }
.rev-preview-note { padding:9px 11px; border-radius:7px; background:#fff7ea; border:1px solid #f0dfc4; color:#7a5237; font-size:13px; line-height:1.7; margin-bottom:10px; }
.rev-preview-place { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 11px; border-radius:7px; background:#f5f8f4; border:1px solid #d9e5d6; margin-bottom:12px; font-size:13.5px; }
.rev-preview-k { color:var(--ink3,#8b7e70); font-size:12px; }
.gen-auto { display:flex; flex-direction:column; gap:2px; padding:7px 9px; min-height:38px; border:1px solid #e2d8c9; background:#faf7f1; border-radius:7px; justify-content:center; }
.gen-auto strong { font-size:14px; color:var(--brand,#8c4a2f); }
.gen-auto .hint { font-size:11.5px; line-height:1.5; }
@media (max-width:600px) { .rev-place,.rev-preview-place { font-size:12.5px; } }