fix(kin,movies): 家谱连线重构为单一网格 + 观影设置统一页头

需求三点：
1. 观影模块「⚙ 设置」与「记一场电影」按钮高度不一致 → 统一页头动作区
   四个选择器的 padding/font-size（.btn 与 .btn-sm 混用是根因）；并把设置
   下拉推广到观影全部页面（详情/影院/搜索/统计/报告/表单），落在返回按钮旁。
2. 家谱连线「线乱」→ 根因三条：每代各建一个网格（列宽最小值由内容决定，
   各代不一致，窄屏实测 93.5px vs 164/78/78/78px）；落点用百分比算而 grid
   间距不参与百分比；连线行与卡片行不是同一套列。
   改法：整棵树只留一个网格，辈分行/卡片行/连线行全是它的行，连线元素本身
   也是网格项（靠 justify-self 落位）；列宽固定为一卡之宽（不用 minmax/1fr，
   否则宽屏卡片中心 ≠ 列中心）。
3. 亲属关系接口改白名单（parent/child/spouse）——原先未知 kind 被静默记成
   配偶，夹具传 kind=sibling 让家谱断言长期拿错数据自证。

设置下拉抽成可复用片段 _settings_menu.php（$setCurrent 高亮当前页、
$setCanWrite 控「影院管理」显隐），六七个页头不再各抄一份。

验证：e2e 456/0、桌面几何 268/0、移动端几何 504/0、交互 97/0、
家谱连线诊断 0 失败、静态空跑 exit=0、静态断言证伪 13/13、
反向验证 68/68 全抓住。

assets/css/app.css

@@ -123,7 +123,22 @@ a:hover { text-decoration: underline; }
 .page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
 .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; }
 .page-head .sub { color: var(--muted); font-size: 14px; }
-.page-head .actions { margin-left: auto; display: flex; gap: 8px; }
+.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+/* ---- 页头动作区：所有按钮一律同尺寸 ----
+   ⚠️ 用户明确提过两次：「设置按钮和记一场电影按钮高度要一致，现在不好看」
+      「返回等按钮和记一场电影等按钮的大小高度的统一问题」。
+   根因是页头里混用了 .btn 与 .btn-sm 两档（padding 9px16px vs 5px12px），
+   并排就一高一矮。这里**强制**让页头动作区的按钮回到基础档：
+     · 按钮（.btn / .btn-ghost / .btn-danger，含 <details> 的 summary）统一 padding 与字号；
+     · 表单包裹的按钮（删除那种 <form><button>）也一样 —— 它们才是真正的按钮。
+   为什么用直接子选择器 + 后代 button：页头里只会有这两类交互元素，
+   范围收敛、不会误伤正文里的 .btn-sm（那里小一档是刻意的）。 */
+.page-head .actions > .btn,
+.page-head .actions > .movie-set > summary.btn,
+.page-head .actions > form > .btn,
+.page-head .actions > form > button.btn {
+  padding: 9px 16px; font-size: 14px;
+}
 
 .section { margin-top: 28px; }
 .section-title {
@@ -381,8 +396,14 @@ textarea.input { min-height: 76px; resize: vertical; }
 }
 
 /* ---------------- 家谱（以我为中心） ----------------
-   v11 改版：每代是「夫妻单元」网格 + 父母括号连线。
-   所有代的列网格共用同一份 template（宽度取最宽那一代），连线才能跟人对齐。 */
+   v12 改版：**整棵树只有一个 grid**，「辈分行 / 卡片行 / 连线行」都只是它的行。
+   连线（横杆 .tc-bar / 上引线 .tc-up / 下引线 .tc-down）全是网格项、靠 justify-self 落位，
+   因此「竖线落在哪一列」由浏览器按列算 —— 没有任何 px 或百分比换算，天然对齐。
+
+   ⚠️ v11 是「每代各建一个网格」，那是「线乱」的根因：列宽最小值是 minmax(min-content,1fr)，
+      由各自的内容决定 —— 有夫妻的那一代最小要「两卡 + 短横」、单身那代只要一卡，
+      于是窄屏实测各代列宽 93.5px vs 164/78/78/78px，同一条竖线上下相差 31~62px。
+      v12 用一份 grid-template-columns 贯穿全树，这个偏差从构造上就不存在。 */
 .tree { display: flex; flex-direction: column; align-items: center; gap: 0; }
 .tree-inner {
   width: 100%;
@@ -390,10 +411,17 @@ textarea.input { min-height: 76px; resize: vertical; }
   -webkit-overflow-scrolling: touch;
   padding-bottom: 4px;
 }
-/* ⚠️ 必须是 min-content 而不是 100%：min-content 让「代」按内容自然展开，
-   .tree-inner 才有东西可滚；列的地板由 .tree-row 的 minmax(min-content,1fr) 兜。
-   两处一起才成立 —— 单改一处会在窄屏下把卡片压重叠（v11 实测踩到）。 */
-.tree-gen { min-width: min-content; }
+.tree-grid {
+  --col-w: 96px;                    /* 一列 = 一张卡片宽（窄屏媒体查询里改 78px） */
+  --col-gap: 14px;                  /* 列间距，同时也是夫妻短横的宽度（两处必须一致） */
+  display: grid;
+  gap: var(--col-gap);
+  justify-content: center;          /* 列宽固定，整棵树居中（家里人少时不左靠） */
+  align-items: start;
+  /* ⚠️ min-width 必须是 min-content：让网格按内容自然展开，.tree-inner 才有东西可滚。
+      写成 100% 的话窄屏会把列一路压到 --col-w 以下，同代卡片就会重叠。 */
+  min-width: min-content;
+}
 .tree-gen-label {
   display: flex; align-items: center; gap: 8px;
   margin: 0 0 8px; padding-left: 2px;
@@ -403,17 +431,17 @@ textarea.input { min-height: 76px; resize: vertical; }
   font-size: 11px; color: var(--muted); background: var(--line-2);
   padding: 1px 8px; border-radius: 999px;
 }
-/* 一代 = 若干「户」，每户占网格的一列（列数由 inline grid-template-columns 给） */
-.tree-row {
-  display: grid; gap: 14px;
-  align-items: start;
-}
+/* 一「户」= 网格里的连续若干列（夫妻跨 2 列、单人 1 列；inline 给 grid-column）。
+   ⚠️ width:100% 是必需的：grid 项默认按内容宽（stretch 只在没写 width 时生效），
+      显式撑满它所占的那几列后，「两张卡 + 一根短横」才能正好落进「两列 + 一个间距」。 */
 .tree-unit {
   display: flex; align-items: center; justify-content: center; gap: 0;
-  position: relative; padding: 0 2px;
+  position: relative; width: 100%;
 }
-/* 夫妻之间的短横（儿女亲家那种「连着的两个人」） */
-.tree-bond { width: 14px; flex: 0 0 auto; display: flex; align-items: center; }
+/* 夫妻之间的短横：宽度**必须等于列间距 --col-gap** —— 这样「同一户内的两个卡」
+   与「相邻两户的两个卡」看起来是同一个节奏，且跨两列的户宽度正好等于该跨距。 */
+.tree-bond { width: var(--col-gap); flex: 0 0 auto; display: flex; align-items: center; }
+/* 夫妻之间的短横（那根"连着的两个人"的横线） */
 .tree-bond i {
   display: block; width: 100%; height: 2px; border-radius: 2px;
   background: var(--line); transform: translateY(2px);
@@ -448,24 +476,28 @@ textarea.input { min-height: 76px; resize: vertical; }
   font-size: 10px; color: var(--faint); background: var(--paper);
   border: 1px solid var(--line); border-radius: 999px; padding: 0 6px;
 }
-/* ---- 父母括号连线 ----
-   .tc-bar  = 横杆（占父母列 + 子女各列，居中画一根竖线上去接父母）
-   .tc-down = 每个子女列的一道竖线（接进同一个横杆）*/
-.tree-conn {
-  display: grid; gap: 14px; height: 30px; position: relative;
+/* ---- 父母折线（family elbow）----
+   .tc-bar  = 横杆（跨「父母户 → 它的子女们」那几列）
+   .tc-up   = 上引线（落在**父母那一户**的中心，从横杆往上接到父母）
+   .tc-down = 下引线（落在**子女本人**那一列的中心，从横杆往下接到子女）
+   ⚠️ 三者都是网格项，靠 justify-self 定位，不写任何 left/百分比 —— 这是「线不乱」的关键。 */
+.tc-bar {
+  align-self: end; justify-self: stretch;
+  height: 30px; position: relative; margin-bottom: -2px;
 }
-.tc-bar { position: relative; align-self: end; border-top: 0; }
 .tc-bar::before {
-  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
-  background: var(--line); border-radius: 2px;
+  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
+  height: 2px; background: var(--line); border-radius: 2px;
 }
 .tc-up {
-  position: absolute; bottom: 0; width: 2px; height: 14px;
-  background: var(--line); transform: translateX(-1px);
+  align-self: end; justify-self: center;
+  width: 2px; height: 15px; background: var(--line);
+  margin-bottom: 14px;               /* 横杆在上引线下方 14px 处，两者接得上 */
 }
 .tc-down {
-  align-self: end; justify-self: center;
-  width: 2px; height: 30px; background: var(--line);
+  align-self: start; justify-self: center;
+  width: 2px; height: 15px; background: var(--line);
+  margin-top: -2px;
 }
 .tree-legend { font-size: 12px; color: var(--muted); margin: 14px 2px 0; }
 
@@ -537,10 +569,9 @@ textarea.input { min-height: 76px; resize: vertical; }
   .rel-form { grid-template-columns: 1fr; }
   .tnode { width: 78px; padding: 8px 4px 7px; }
   .tnode .tph { width: 40px; height: 40px; }
-  .tree-row { gap: 8px; }
+  /* 窄屏收窄列宽与列间距：卡宽 78px，与上面 .tnode 的窄版式对齐 */
+  .tree-grid { --col-w: 78px; --col-gap: 8px; }
   .tree-unit { padding: 0; }
-  .tree-bond { width: 8px; }
-  .tree-conn { gap: 8px; }
 }
 
 @media (max-width: 720px) {