名册每人一份 · 分组两层 · 拖动排序 · 表单合一 · 裁剪可缩放

按用户十点反馈逐条落地（v5，Schema::VERSION = 5）：

- 名册改成每人一份：新表 person_roster(owner_id, person_id, group_id,
  sort_order, source)。默认只看「我添加的 + 别人分享给我的」；
  source='seeded' 是升级时从老 persons.group_id 播进来的（先播数据再删列）。
- 排序不再手填：名册页直接拖动卡片（整版提交，一次 applyLayout 落库），
  无 JS 时卡片上的「调整分组」表单照旧可用。
- 分组分两层：管理员在「系统设置」维护公共分组（owner_id=0），
  用户在「个人设置」加自己的分组；显示顺序各人各定、互不影响。
- 名册可共享：把名片分享给别的用户（people/share）；添加成员时若系统里
  已有这个人，可直接复用（people/pick），不必重复录入。
- 「编辑成员」与「改我自己的资料」合并为同一张表（templates/people/form.php），
  两个入口 href 完全相同，h1 按改谁切换文案；个人设置页只留
  资料入口 + 称呼 + 我的分组三块，删除 templates/settings/_profile.php。
- 系统设置收进头像下拉，顶栏只剩 首页/家谱/名册。
- 裁剪器加缩放（滑块 1-4x、Ctrl+滚轮、还原）：缩放只改视图大小，
  落库的归一化矩形保持不变。
- 权限：管理员可以改任何人的权限（含自己），只拦「最后一位管理员」被降级。
- 去掉首页「我的一句话」后的链接、家谱说明段、以及「还没归到任何分组」提示。

迁移安全：数据回填（PersonRoster::seedFromPersons）先于删列执行、且不进
tryStep 容错；失败步骤记入 settings.schema_upgrade_warning 并在系统设置页提示。
线上已验证：schema_upgrade_warning 为空，person_roster/person_groups.owner_id
就位，persons.group_id / sort_order 已删。

验证：php -l 48 文件；本地 e2e 277/0、老库升级 81/0、桌面几何 108/0、
移动端几何 180/0、交互 96/0；反向验证 38 条注入 + 2 条缩放注入全部命中；
部署静态断言 53/0，站点自检 7/7（--resolve 锁本机走 443，探针真的进 PHP）。

assets/css/app.css

@@ -166,7 +166,7 @@ a:hover { text-decoration: underline; }
   grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
 }
 .person {
-  display: block; color: var(--ink);
+  display: block; color: var(--ink); position: relative;
   background: var(--surface); border: 1px solid var(--line);
   border-radius: var(--radius); overflow: hidden;
   box-shadow: var(--shadow);
@@ -596,6 +596,65 @@ textarea.input { min-height: 76px; resize: vertical; }
 .person-move .select { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px; }
 .person-move .btn { flex: 0 0 auto; }
 
+/* ---------------- 名册：拖动排序 / 拖到别栏改分组 ----------------
+   拖动是"锦上添花"：没有它，卡片上的「⋯ → 调整分组」表单照样能改分组，
+   手机上 HTML5 拖放本来也不生效，那套表单就是窄屏的正路。 */
+.roster.is-droppable .person { cursor: grab; }
+.roster.is-droppable .person.is-dragged { opacity: .45; cursor: grabbing; }
+.drag-handle {
+  position: absolute; left: 8px; top: 8px; z-index: 2;
+  width: 22px; height: 22px; line-height: 22px; text-align: center;
+  border-radius: 6px; font-size: 14px;
+  color: var(--muted); background: rgba(255, 255, 255, .82);
+  border: 1px solid var(--line-2);
+  pointer-events: none;   /* 手柄只是个记号，抓取要落在整张卡上 */
+}
+.drag-handle-inline { color: var(--muted); }
+
+/* 空栏平时收起来（七个预置分组可能只用到三个，摊开会显得名册破破烂烂）——
+   但**拖动时必须露出来**，否则"想拖到一个现在没人的分组里"就没地方放。 */
+.group-block.is-empty { display: none; }
+.roster.is-dragging .group-block.is-empty {
+  display: block; opacity: .9;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius); padding: 10px; margin-top: 18px;
+  background: rgba(250, 247, 241, .6);
+}
+.group-drop-hint { display: none; margin-left: auto; font-weight: 400; font-size: 12px; color: var(--brand); }
+.roster.is-dragging .group-block .group-drop-hint { display: inline; }
+/* 拖动时把"有多少人"让出位置给落点提示，两者都挤在右上角会很乱 */
+.roster.is-dragging .group-block .group-n { display: none; }
+.roster.is-dragging .people-grid { min-height: 24px; }
+
+/* 拖完/没拖成的轻提示（2 秒自己消失，不打断操作） */
+.roster-note {
+  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
+  z-index: 200; padding: 8px 16px; border-radius: 999px;
+  background: rgba(44, 35, 29, .88); color: #fff; font-size: 13px;
+  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
+}
+.roster-note.is-show { opacity: 1; transform: translate(-50%, 0); }
+.roster-note.is-err { background: rgba(178, 45, 45, .92); }
+
+/* ---------------- 分享名片（成员详情页） ---------------- */
+.share-wrap { display: inline-block; }
+.share-wrap > summary { list-style: none; cursor: pointer; display: inline-block; }
+.share-wrap > summary::-webkit-details-marker { display: none; }
+.share-wrap .inline-form { margin-top: 10px; }
+
+/* ---------------- 「从家里已有的人里挑」 ---------------- */
+.pick-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
+.pick-row { margin: 0; }
+.pick-item {
+  display: flex; align-items: center; gap: 10px; cursor: pointer;
+  padding: 8px 12px; border-radius: var(--radius-s);
+  background: #FAF7F1; border: 1px solid var(--line-2);
+}
+.pick-item:hover { border-color: var(--brand); }
+.pick-item input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--brand); }
+.pick-ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #F1E7D6; }
+.pick-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+
 /* ---------------- 个人设置：分组顺序 ---------------- */
 .order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
 .order-row {
@@ -651,12 +710,21 @@ textarea.input { min-height: 76px; resize: vertical; }
 }
 .crop-head .crop-shape { font-size: 12px; font-weight: 400; color: var(--muted); }
 .crop-stage {
-  position: relative; margin: 0 auto; overflow: hidden;
+  position: relative; margin: 0 auto; overflow: auto;
   background: #F1E7D6; border-radius: var(--radius-s);
   touch-action: none;   /* 手机上拖框时别把页面一起滚走 */
   user-select: none;
 }
-.crop-img { display: block; width: 100%; height: 100%; }
+/* 图片的宽高由 JS 按倍率写死（放大后比舞台大，靠舞台自身滚动看别处）——
+   所以这里**不能**写 width/height:100%，否则缩放就永远没效果。 */
+.crop-img { display: block; max-width: none; }
+/* 缩放条 —— 用户明确要求"裁剪的时候要能缩放" */
+.crop-zoom-row {
+  display: flex; align-items: center; gap: 10px;
+  margin-top: 12px; font-size: 13px; color: var(--muted);
+}
+.crop-zoom { flex: 1; min-width: 120px; accent-color: var(--brand); }
+.crop-zoom-val { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
 /* 框外的部分压暗 —— 这是"你只留下框里这块"最直观的表达 */
 .crop-box {
   position: absolute; cursor: move;