fix(header): restore the payvip surface on the top-nav VIP chip

The 开通会员 chip rendered in the .jb-red orange gradient instead of the
legacy metallic .payvip-icon gradient. The markup always carried
payvip-icon, but core/buttons.css restates the legacy .but block and is
bundled into public.css, which loads after main.css. Same specificity,
later in the cascade, so its background / color / border / text-shadow
declarations outrank .payvip-icon and replace the payvip surface with
whatever .jb-* skin happens to be on the element.

The reference theme has no such compatibility layer, so there its
.payvip-icon declarations are the last word and the chip shows the
metallic gradient with #ece0e0 text, no border and no text shadow.

A previous fix restored the surface only for the user-card CTA, scoped to
.aksrt-header-userbox .pay-vip.but.payvip-icon, which left the top-nav
chip (and the guest CTA, and the user-card status bar) on the wrong
gradient. Re-assert the legacy .payvip-icon declarations unscoped in
header-userbox.css, which loads after core/buttons.css, and complete the
property set with border: none and text-shadow: none so the chip no
longer carries the 1px transparent border the .but block adds.

Verified with a cascade resolver that replays the real stylesheet load
order (bootstrap, main, public, header-userbox) against the reference
theme's own order: background, color, --this-color, border, text-shadow,
border-radius, padding, margin, font-size, display, overflow and position
now resolve identically for both the publish and the VIP chip.

assets/css/build/public.css

@@ -2837,11 +2837,19 @@ main.container,
   padding: 6px;
 }
 
-/* The later .but compatibility layer otherwise replaces the legacy payvip surface. */
-.aksrt-header-userbox .pay-vip.but.payvip-icon {
+/* core/buttons.css restates the legacy .but block after main.css, so its
+ * background / color / border / text-shadow declarations outrank .payvip-icon
+ * and replace the payvip surface with whatever .jb-* skin is on the element.
+ * The reference theme has no such compatibility layer, so its .payvip-icon
+ * declarations are the last word in the cascade. Re-assert them here, which
+ * loads after core/buttons.css, so every payvip surface (top-nav chip, user
+ * card status bar and CTA, guest CTA) keeps the legacy metallic gradient. */
+.payvip-icon {
   background: linear-gradient(300deg, #4c4d51, #2a2a31 15%, #85858a 40%, #393a3c 60%, #393838 80%, #5e5f62 100%);
   color: #ece0e0;
   --this-color: #ece0e0;
+  border: none;
+  text-shadow: none;
 }
 
 /* Keep the header check-in action flush with the VIP row's padded inner width. */

assets/css/frontend/header-userbox.css

@@ -130,11 +130,19 @@
   padding: 6px;
 }
 
-/* The later .but compatibility layer otherwise replaces the legacy payvip surface. */
-.aksrt-header-userbox .pay-vip.but.payvip-icon {
+/* core/buttons.css restates the legacy .but block after main.css, so its
+ * background / color / border / text-shadow declarations outrank .payvip-icon
+ * and replace the payvip surface with whatever .jb-* skin is on the element.
+ * The reference theme has no such compatibility layer, so its .payvip-icon
+ * declarations are the last word in the cascade. Re-assert them here, which
+ * loads after core/buttons.css, so every payvip surface (top-nav chip, user
+ * card status bar and CTA, guest CTA) keeps the legacy metallic gradient. */
+.payvip-icon {
   background: linear-gradient(300deg, #4c4d51, #2a2a31 15%, #85858a 40%, #393a3c 60%, #393838 80%, #5e5f62 100%);
   color: #ece0e0;
   --this-color: #ece0e0;
+  border: none;
+  text-shadow: none;
 }
 
 /* Keep the header check-in action flush with the VIP row's padded inner width. */

tests/navigation/legacy-navigation-contract.test.cjs

@@ -217,7 +217,12 @@ test('the account popover rows match the reference user box structure', () => {
   assert.match(header, /radius4 payvip-icon btn-block text-center/);
   assert.match(header, /vip-expdate-tag/);
   assert.match(header, /pay-vip but radius4 payvip-icon btn-block/);
-  assert.match(userboxCss, /\.aksrt-header-userbox \.pay-vip\.but\.payvip-icon\s*\{[\s\S]*?background:\s*linear-gradient\(300deg,[\s\S]*?color:\s*#ece0e0;[\s\S]*?--this-color:\s*#ece0e0;/s);
+  // core/buttons.css restates .but after main.css, which would otherwise replace
+  // the legacy .payvip-icon surface with the .jb-* skin. The restoration must
+  // cover background, color, border and text-shadow, and must not be scoped to
+  // one call site or the top-nav chip keeps the wrong gradient.
+  assert.match(userboxCss, /\.payvip-icon\s*\{[\s\S]*?background:\s*linear-gradient\(300deg,[\s\S]*?color:\s*#ece0e0;[\s\S]*?--this-color:\s*#ece0e0;[\s\S]*?border:\s*none;[\s\S]*?text-shadow:\s*none;/s);
+  assert.doesNotMatch(userboxCss, /\.aksrt-header-userbox \.pay-vip\.but\.payvip-icon/)
   assert.doesNotMatch(header, /vipbg-v2/);
 
   // Check-in entry is an anchor with the reference button classes.

tests/widget-system/page-display-contract.test.cjs

@@ -143,6 +143,9 @@ test('header VIP hover cards match the legacy markup and style contract', () =>
   assert.match(headerMenuButtons, /<span class="hover-show inline-block">/)
   assert.match(headerMenuButtons, /<div class="sub-menu hover-show-con sub-vip-card">/)
   assert.match(headerMenuButtons, /'<a class="' \. esc_attr\(\$cls\) \. ' but jb-red radius payvip-icon ml10" href="javascript:;">'/)
+  // The payvip surface must survive the .but compatibility layer for the top-nav
+  // chip too, not just the user-card CTA.
+  assert.match(headerCss, /\.payvip-icon\s*\{[\s\S]*?background:\s*linear-gradient\(300deg,[\s\S]*?--this-color:\s*#ece0e0;/s)
   assert.match(headerMenuButtons, /<svg class="em12 mr3" aria-hidden="true"><use xlink:href="#icon-vip_1"><\/use><\/svg>'/)
   assert.match(headerMenuButtons, /'<a rel="nofollow" class="newadd-btns ' \. esc_attr\(\$class\) \. ' btn-newadd"/)
   assert.equal((headerMenuButtons.match(/Settings::close_sign\(\)/g) || []).length, 2)