群头像图标贴顶不居中；成员格子文字区过窄

用户实机反馈的三点，逐项查证后：

1. 图标垂直不居中（真bug，已修）：.group-settings-header span 这条规则把 .group-avatar 一起
   命中了——它本身就是个 span，被改成 flex-direction:column 之后，自己的 place-items:center
   只剩交叉轴（水平）生效，主轴（垂直）退回 flex-start，图标贴着方块顶部。实测头部群头像上边距
   0px、下边距 28.7px，左右各 14.3px，正好对应这个成因。选择器改为
   > span:not(.group-avatar) 精确排除；同时给 .group-avatar 补 align-content/justify-content，
   以后再被外部规则改成 flex 也不会散架。修完三处（头部群头像、成员头像、添加格）实测上下左右
   边距全部对称。

2. 文字区过窄只显示两个字（真问题，已修）：上一版把成员格子宽度收到与头像等宽（3rem），昵称
   被截成"测试..."。按参考图比例重算——那张图里头像约占格子宽七成、相邻头像间隙约头像宽四成，
   且五字昵称完整显示——格子改 4.4rem、头像改 3.6rem、间距 0.5rem。实测"测试昵称A"完整显示
   不再截断。

3. 头像配色：上一版我把兜底头像从饱和蓝底白图标改成了浅蓝底蓝图标，这是自作主张、用户没要求，
   已还原成原来的 #4389df 底 + 白色图标。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/base.css

@@ -8717,7 +8717,11 @@ div.toast.show {
 .people-avatar,
 .group-avatar {
   display: grid;
+  /* place-items 只在 grid 下同时管住两个方向；一旦外层规则把它改成 flex，就只剩交叉轴生效。
+     补上 justify/align-content，让这里在 grid 和 flex 两种情况下都保持居中。 */
   place-items: center;
+  align-content: center;
+  justify-content: center;
   width: 3rem;
   height: 3rem;
   overflow: hidden;
@@ -9554,7 +9558,10 @@ div.toast.show {
   text-transform: none;
 }
 .group-settings-header .group-avatar { width: 3.6rem; height: 3.6rem; }
-.group-settings-header span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+/* 必须排除 .group-avatar：它本身也是个 span，被这条规则改成 flex-direction:column 之后，
+   自己的 place-items:center 就只剩交叉轴（水平）生效，主轴（垂直）退回 flex-start，
+   里面的图标会贴着方块顶部而不是居中。 */
+.group-settings-header > span:not(.group-avatar) { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
 .group-settings-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9299a2; }
 
 .group-list > button {
@@ -9904,10 +9911,15 @@ div.toast.show {
 }
 
 .group-settings section > .group-member-grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(5, 1fr);
+  flex-wrap: wrap;
-  align-items: start;
+  align-items: flex-start;
-  gap: 0.9rem 0.4rem;
+  /* 不用 5 等分栅格：成员少的时候每个格子仍占满 1/5 宽度，头像被各自居中在很宽的格子里，
+     相邻两个头像之间会空出约头像宽度的间隙，看着很散。改成固定格子宽 + 固定间距靠左排。
+     尺寸按 docs/images/群聊设置.png 的比例反推：那张图里头像约占格子宽的 70%、相邻头像间隙
+     约为头像宽的 40%，且五个字的昵称能完整显示不截断——所以格子要比头像明显宽出一截，
+     光把格子缩到和头像等宽会让昵称被截成"测试..."。 */
+  gap: 0.9rem 0.5rem;
   min-height: 0;
   padding: 0.25rem 1rem 1rem;
   border-bottom: 0;
@@ -9920,7 +9932,7 @@ div.toast.show {
   flex-direction: column;
   align-items: center;
   gap: 0.35rem;
-  width: 100%;
+  width: 4.4rem;
   min-width: 0;
   height: auto;
   min-height: 0;
@@ -9943,6 +9955,15 @@ div.toast.show {
   white-space: nowrap;
 }
 
+/* 成员格子里的头像比默认 3rem 略大，才能撑起参考图里"头像占格子七成、间隙约头像四成"的比例；
+   与之配套，"添加"格也用同一尺寸。 */
+.group-member-grid .group-avatar,
+.group-member-tile-action {
+  width: 3.6rem;
+  height: 3.6rem;
+  flex: 0 0 3.6rem;
+}
+
 /* "添加"格：跟成员头像同样尺寸的浅色方块，视觉上与真实成员头像区分开 */
 .group-member-tile-action {
   display: grid;