feat(fe): Step4 门面品牌色带（方案A）+ nav-bar tone

- nav-bar 加 tone="brand"：透明底 + 深棕字，压在色带上；默认分支不动
- 首页/记录页顶部加 252rpx 品牌橘色带（下沿大圆角，z-index:-1 垫背后），
  盖住 nav + 切换条，门面卡在色带下方
- 切换条压在色带上：chip 半透明白 + 深棕字，选中实白
- page 加 position:relative 供色带绝对定位锚定
- 新增 --band-a/--band-b/--band-ink token（取自 preview-v3 定稿）

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

pets-fe/app.wxss

@@ -21,6 +21,10 @@ page{
   --primary-soft:#FFF4E4;   /* 唯一的浅橙底（收编了 9 种近似值） */
   --primary-line:#FFD6A1;   /* 浅橙块的描边 */
   --primary-ink:#A96500;    /* 浅橙底上的文字 */
+  /* 门面品牌色带（首页/记录页顶部，方案 A）*/
+  --band-a:#FFC768;
+  --band-b:#F5A947;
+  --band-ink:#7A4A08;       /* 色带上的深棕文字 */
 
   /* ── 语义色：soft 底 / base 主体 / ink 文字，三件套配齐 ── */
   --green:#73BE9D;   --green-soft:#EAF7F1;   --green-ink:#2E7D5B;
@@ -92,6 +96,7 @@ page{
   overflow:hidden;
   display:flex;
   flex-direction:column;
+  position:relative;   /* 门面色带 .brand-band 绝对定位锚在页面上 */
 }
 view,text{box-sizing:border-box}
 
@@ -373,6 +378,21 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 .top-bar .pet-switch{padding-bottom:var(--sp-2)}
 .top-bar .st-pill{padding-bottom:var(--sp-2)}
 
+/* 门面品牌色带（方案 A）：绝对定位在页面最上层背后，盖住 nav + 切换条，
+   下沿大圆角。放在 .page-scroll 外面，所以不跟着滚。z-index 低于 nav(100) */
+.brand-band{
+  /* z-index:-1 垫在所有内容背后、页面背景之上。用 0 的话定位元素会盖住切换条 */
+  position:absolute;left:0;right:0;top:0;height:252rpx;z-index:-1;
+  background:linear-gradient(160deg,var(--band-a),var(--band-b));
+  border-radius:0 0 40rpx 40rpx;
+}
+/* 切换条压在色带上：chip 改成半透明白 + 深棕字，选中的实白 */
+.top-bar.on-band .pet-chip{
+  background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink);
+}
+.top-bar.on-band .pet-chip.active{background:#fff;color:var(--text);border-color:transparent}
+.top-bar.on-band .pet-chip-add{color:rgba(122,74,8,.75)}
+
 /* 帖子卡。社区和用户主页都要用，页面级 wxss 不跨页生效，所以放全局 */
 .post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)}
 .post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}