style(user): add zibll profile meta surface

assets/css/frontend/medal.css

@@ -8,32 +8,39 @@
  * ============================================================ */
 
 /* ---------- 顶部资料卡入口（zibll user-medal-info parity） ---------- */
-.aksrt-medal-entry {
+.aksrt-medal-entry,
+.uc-header__meta-item {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
   margin: 2px 8px 2px 0;
-  padding: 2px 0;
+  padding: .3em .6em;
-  border: 0;
+  border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
-  background: transparent;
+  border-radius: var(--mini-radius, 4px);
-  color: var(--muted-2-color, var(--color-ink-4));
+  background: var(--surface-2, rgba(136, 136, 136, .1));
+  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08));
+  color: var(--muted-2-color, var(--color-ink-3));
   font: inherit;
   font-size: 12px;
-  line-height: 1.4;
+  line-height: 1.44;
-  cursor: pointer;
   white-space: nowrap;
-  transition: color .15s ease, opacity .15s ease;
+}
+.aksrt-medal-entry {
+  cursor: pointer;
+  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
 }
 .aksrt-medal-entry:hover,
 .aksrt-medal-entry:focus-visible {
+  border-color: var(--focus-color-opacity3, var(--focus-color));
+  background: var(--focus-color-opacity1, rgba(59, 130, 246, .1));
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .1));
   color: var(--focus-color);
   opacity: 1;
 }
 .aksrt-medal-entry:focus-visible {
   outline: 2px solid var(--focus-color);
   outline-offset: 2px;
-  border-radius: var(--mini-radius, 6px);
 }
 .aksrt-medal-entry__icons {
   display: inline-flex;
@@ -63,6 +70,14 @@
 .aksrt-medal-entry__count { margin-left: 2px; }
 .aksrt-medal-entry__arrow { margin-left: 1px; font-size: .9em; }
 
+@media (max-width: 767px) {
+  .aksrt-medal-entry,
+  .uc-header__meta-item {
+    margin-right: 4px;
+    max-width: 100%;
+  }
+}
+
 
 .medal-cat-box {
   position: relative;