fix(user-center): match the reference meta pills on the profile header card

The username and e-mail entries under the profile header rendered as plain
grey text on a solid icon. The reference makes each one a bordered pill that
copies its own value on click, drawn with the outline glyphs.

Both entries now carry `.but` plus `data-clipboard-tag` / `data-clipboard-text`
so the existing frontend clipboard runtime (assets/js/runtime/libs/clipboard.js)
picks them up and toasts "用户名已复制". Icons move from `fas` to `far`, which
is the FA5 equivalent of the reference's `fa-user-o` / `fa-envelope-o`.

Geometry follows `.author-header .user-identity > .but/.badg` exactly:
padding 2px 6px, margin 5px 6px 0 0, 12px type, 1.4 line height, and the meta
row gets the reference's 520px max width. medal.css already carried its own
approximation of this pill (2px 8px 2px 0, .3em .6em, 1.44) for the medal
entry; it now uses the same numbers so the two entries line up. The base rule
lives in layout.css rather than medal.css because the medal module is only
enqueued when badges are enabled, and the header must keep its shape either
way.

Verification: rendered the real header through a PHP stub and measured the
computed styles in the browser — padding 2px 6px, margin 5px 6px 0 0, 12px /
16.8px, 23px tall, both entries carrying the right clipboard payload. Added
user-center-header-meta-contract.test.cjs to pin the markup and geometry;
864 widget/navigation tests pass.

assets/css/frontend/medal.css

@@ -11,8 +11,9 @@
   align-items: center;
   gap: 4px;
   min-width: 0;
-  margin: 2px 8px 2px 0;
-  padding: .3em .6em;
+  /* 参考主题 .author-header .user-identity > .but/.badg：5px 6px 0 0 + 1.4 行高 */
+  margin: 5px 6px 0 0;
+  padding: 2px 6px;
   border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
   border-radius: var(--mini-radius, 4px);
   background: var(--surface-2, rgba(136, 136, 136, .1));
@@ -20,7 +21,7 @@
   color: var(--muted-2-color, var(--color-ink-3));
   font: inherit;
   font-size: 12px;
-  line-height: 1.44;
+  line-height: 1.4;
   white-space: nowrap;
 }
 .jio-medal-entry {

assets/css/routes/profile/layout.css

@@ -269,24 +269,43 @@
 .uc-header__meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  align-items: center;
+  gap: 0;
+  max-width: 520px;
   font-size: 13px;
   color: var(--color-ink-3);
 }
 
-.uc-header__meta .jio-ip-geo-badge {
-  margin: 2px 0;
-}
-
+/* Reference geometry: every meta entry is a pill — 12px type, 2px/6px padding,
+ * 5px 6px 0 0 spacing, 1.4 line height (same numbers as .author-header
+ * .user-identity > .but/.badg). Declared here so the header keeps its shape even
+ * when the medal module is not enqueued. */
 .uc-header__meta-item {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 4px;
+  min-width: 0;
+  margin: 5px 6px 0 0;
+  padding: 2px 6px;
+  border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
+  border-radius: var(--mini-radius, 4px);
+  background: var(--surface-2, rgba(136, 136, 136, .1));
+  color: var(--color-ink-3);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
 }
 
 .uc-header__meta-item i {
   font-size: 12px;
-  opacity: 0.65;
+  opacity: 0.8;
+}
+
+.uc-header__meta .jio-ip-geo-badge {
+  font-size: 12px;
+  padding: 2px 6px;
+  margin: 5px 6px 0 0;
+  line-height: 1.4;
 }
 
 /* 治理状态提示：与相邻元信息同排版；链接默认色会让箭头/图标偏离行内墨色 */