From 4d412f0e60c61e3eb3207d2b109675b51d33e227 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Sun, 4 Oct 2026 08:53:54 +0000
Subject: [PATCH] =?UTF-8?q?feat(=E6=98=9F=E5=BA=A7=E5=AE=9D=E5=AE=9D):=201?=
 =?UTF-8?q?2=20=E4=B8=AA=E8=87=AA=E7=BB=98=E6=98=9F=E5=BA=A7=E7=AC=A6?=
 =?UTF-8?q?=E5=8F=B7=EF=BC=9B=E5=BC=B9=E7=AA=97=E6=8C=89=E7=81=AB=E5=9C=9F?=
 =?UTF-8?q?=E9=A3=8E=E6=B0=B4=E5=9B=9B=E8=B1=A1=E9=87=8D=E5=81=9A=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E5=A4=B4=E5=B8=A6=E9=85=8D=E8=89=B2=E3=80=81=E6=98=9F?=
 =?UTF-8?q?=E5=9B=BE=E3=80=81=E5=85=83=E7=B4=A0=E7=BA=B9=E6=A0=B7=20(v2610?=
 =?UTF-8?q?0426)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.html       | 25 ++++++++++++-------
 js/app.js        | 18 ++++++++++++--
 js/hero-fx.js    |  4 ++--
 js/zodiac-art.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++
 mama-box.css     | 56 +++++++++++++++++++++++++++----------------
 5 files changed, 131 insertions(+), 34 deletions(-)
 create mode 100644 js/zodiac-art.js

diff --git a/index.html b/index.html
index 2ebd756..a024d14 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26100425 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100426 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -1771,18 +1771,24 @@
   <!-- 星座宝宝（2026-10-04）：点头图孕囊旁的「xx宝宝」小牌打开（js/hero-fx.js 派发 mb-zodiac → app.js 填内容 + openModal）。
        幸运色 → 性格 → 适合的职业；预产期落在星座交界时顶部给两个可切换的小标签。内容是星座小趣味，底部写明。 -->
   <section class="modal zd-modal" id="modalZodiac" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="zdName">
-    <div class="zd-glow" id="zdGlow" aria-hidden="true"></div>
-    <button class="modal-x" data-modal="close" aria-label="关闭">
-      <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
-    </button>
-    <div class="zd-head">
-      <span class="zd-star" aria-hidden="true"><svg viewBox="0 0 12 12" width="14" height="14"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></span>
+    <!-- 2026-10-04 二版（用户：「弹出的页面重新设计，要有针对星座的设计感，背景色按火象、水象这些」）：
+         顶部一条按四象配色的头带（火 / 土 / 风 / 水），右上角淡淡画出这个星座的星图（星星会闪），
+         正中玻璃圆里是星座符号；头带底边是元素纹样（火焰 / 山脊 / 云 / 水波），最下一层用正文底色填，头带「长」进正文。
+         素材在 js/zodiac-art.js。 -->
+    <div class="zd-band" id="zdBand">
+      <svg class="zd-sky" id="zdSky" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
+      <button class="modal-x" data-modal="close" aria-label="关闭">
+        <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
+      </button>
+      <span class="zd-glyph" id="zdGlyph" aria-hidden="true"></span>
       <h3 id="zdName"></h3>
-      <p class="zd-range" id="zdRange"></p>
+      <p class="zd-range"><span class="zd-el" id="zdEl"></span><span id="zdRange"></span></p>
       <div class="zd-switch" id="zdSwitch" hidden></div>
+      <svg class="zd-motif" id="zdMotif" viewBox="0 0 375 56" preserveAspectRatio="none" aria-hidden="true"></svg>
     </div>
+    <p class="zd-words" id="zdWords"></p>
     <div class="zd-sec zd-color">
-      <i class="zd-sw" id="zdSw" aria-hidden="true"></i>
+      <i class="zd-sw" aria-hidden="true"></i>
       <div><span class="zd-label">宝宝幸运色</span><b id="zdColor"></b><p id="zdColorTip"></p></div>
     </div>
     <div class="zd-sec">
@@ -2028,6 +2034,7 @@
      加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示，
      不影响应用其余功能。 -->
 
+<script src="js/zodiac-art.js"></script>
 <script src="js/app.js"></script>
 <!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
 <script src="js/bump.js"></script>
diff --git a/js/app.js b/js/app.js
index b3d4107..59f8454 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100425';
+  var VER = '26100426';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -885,20 +885,34 @@
     const M = $('#modalZodiac'); if (!M) return;
     function fill(n) {
       const z = ZODIAC[n]; if (!z) return;
+      const el_ = (window.ZODIAC_ELEMENT || {})[n] || 'fire', th = (window.ZODIAC_THEME || {})[el_] || {};
+      M.className = M.className.replace(/\bel-\w+/g, '').trim() + ' el-' + el_;
       M.style.setProperty('--zc', z[2]);
+      if (th.band) { M.style.setProperty('--zb', th.band); M.style.setProperty('--zbody', th.body); M.style.setProperty('--zi', th.ink); }
+      $('#zdGlyph').innerHTML = window.zodiacIcon ? window.zodiacIcon(n, 30, 1.7) : '';
       $('#zdName').textContent = n + '宝宝';
+      $('#zdEl').textContent = th.name || '';
       $('#zdRange').textContent = z[0] + ' · 按预产期推算';
+      $('#zdWords').textContent = th.words || '';
+      // 星图
+      const st = (window.ZODIAC_STARS || {})[n], sky = $('#zdSky');
+      sky.innerHTML = st ? st[1].map(([a, b]) => '<line x1="' + st[0][a][0] * 100 + '" y1="' + st[0][a][1] * 100 + '" x2="' + st[0][b][0] * 100 + '" y2="' + st[0][b][1] * 100 + '"/>').join('') +
+        st[0].map((p, i) => '<circle cx="' + p[0] * 100 + '" cy="' + p[1] * 100 + '" r="' + (1 + p[2] * 1.6).toFixed(2) + '" style="animation-delay:' + (i * .45 % 3).toFixed(2) + 's"/>').join('') : '';
+      const mo = (window.ZODIAC_MOTIF || {})[el_];
+      $('#zdMotif').innerHTML = mo ? mo.map(d => '<path d="' + d + '"/>').join('') : '';
       $('#zdColor').textContent = z[1]; $('#zdColorTip').textContent = z[3];
       const T = $('#zdTraits'); T.innerHTML = ''; z[4].forEach(t => T.appendChild(el('span', '', t)));
       $('#zdPara').textContent = z[5];
       const J = $('#zdJobs'); J.innerHTML = ''; z[6].forEach(t => J.appendChild(el('span', '', t)));
+      M.scrollTop = 0;
     }
     window.addEventListener('mb-zodiac', e => {
       const names = (e.detail && e.detail.names || []).filter(n => ZODIAC[n]); if (!names.length) return;
       const sw = $('#zdSwitch'); sw.innerHTML = '';
       sw.hidden = names.length < 2;
       if (names.length > 1) names.forEach((n, i) => {
-        const b = el('button', i ? '' : 'on', n + '宝宝'); b.type = 'button';
+        const b = el('button', i ? '' : 'on'); b.type = 'button';
+        b.innerHTML = (window.zodiacIcon ? window.zodiacIcon(n, 12, 2.2) : '') + '<span>' + n + '宝宝</span>';
         b.addEventListener('click', () => { $$('button', sw).forEach(x => x.classList.toggle('on', x === b)); fill(n); });
         sw.appendChild(b);
       });
diff --git a/js/hero-fx.js b/js/hero-fx.js
index 0f0b759..82c9cef 100644
--- a/js/hero-fx.js
+++ b/js/hero-fx.js
@@ -86,8 +86,8 @@
     if (!due) { zEl.classList.remove('is-on'); return; }
     const z = zodiacOf(due[0], due[1], due[2]);
     const pair = z.alt ? (z.prevAlt ? [z.alt, z.main] : [z.main, z.alt]) : [z.main];
-    // 图标用自绘四角星：星座符号（♋ 之类）在部分安卓上没有字形，会显示成方框
-    zEl.innerHTML = '<i><svg viewBox="0 0 12 12" width="8" height="8"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></i>' +
+    // 图标：对应星座的自绘符号（js/zodiac-art.js；不用 ♋ 一类字符，部分安卓没有字形会成方框）
+    zEl.innerHTML = '<i>' + (window.zodiacIcon ? window.zodiacIcon(pair[0][2], 10, 2.6) : '') + '</i>' +
       '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
     zNames = pair.map(x => x[2]);
     zEl.setAttribute('aria-label', zNames.join('·') + '宝宝，点开看看');
diff --git a/js/zodiac-art.js b/js/zodiac-art.js
new file mode 100644
index 0000000..7106e54
--- /dev/null
+++ b/js/zodiac-art.js
@@ -0,0 +1,62 @@
+/* 2026-10-04 星座宝宝的美术素材：12 个星座符号（自绘，部分安卓没有 ♋ 这类字形）、星图、四象配色与纹样。
+   首页小牌（js/hero-fx.js）和星座弹窗（js/app.js）共用，所以单独成文件、在 app.js 之前加载。 */
+/* 星座符号（24×24，描边绘制，stroke=currentColor） */
+window.ZODIAC_ICON = {
+  白羊: 'M12 20.5V9.5M12 9.5C12 5.5 9.8 3.6 7.6 3.6 5.6 3.6 4 5.1 4 7.1c0 1.8 1.3 3.1 3 3.1M12 9.5c0-4 2.2-5.9 4.4-5.9 2 0 3.6 1.5 3.6 3.5 0 1.8-1.3 3.1-3 3.1',
+  金牛: 'M4 4.2c1.2 3.4 4.2 5.4 8 5.4s6.8-2 8-5.4M12 9.6a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4z',
+  双子: 'M4.5 4.2c4.6 1.6 10.4 1.6 15 0M4.5 19.8c4.6-1.6 10.4-1.6 15 0M9 5.4v13.2M15 5.4v13.2',
+  巨蟹: 'M5 8.6a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 0 0-4.8 0zM7.4 6.2C10.4 4.2 16 4.2 20 7.6M19 15.4a2.4 2.4 0 1 0-4.8 0 2.4 2.4 0 0 0 4.8 0zM16.6 17.8C13.6 19.8 8 19.8 4 16.4',
+  狮子: 'M5 15.6a3 3 0 1 0 6 0 3 3 0 0 0-6 0zM11 15.6C11 11 9.4 9.2 9.4 7.2a3.6 3.6 0 0 1 7.2 0c0 3.4-2.6 5.8-2.6 9.6 0 2 1.3 3.3 3 3.3 1.3 0 2.3-.7 2.9-1.7',
+  处女: 'M3.6 6.6c1.3 0 2.1.8 2.1 2.1V17M5.7 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1V17M9.9 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1v6.6c0 2.3 1.3 3.7 3.2 4.1M14.1 13c.9-2.3 2.7-3.3 4.1-2.6 1.6.8 1.1 3.7-1.1 5.8-1.2 1.1-2.6 1.9-3.4 2.2',
+  天秤: 'M4 19.2h16M4 15.4h4.4a3.8 3.8 0 1 1 7.2 0H20',
+  天蝎: 'M3.4 6.6c1.3 0 2.1.8 2.1 2.1V17M5.5 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1V17M9.7 8.7c0-1.3.9-2.1 2.1-2.1s2.1.8 2.1 2.1v7.4c0 1.5.9 2.4 2.4 2.4h3.9M18.3 16.3l2.2 2.2-2.2 2.2',
+  射手: 'M5 19L19 5M12.2 5H19v6.8M7.6 11.4l5 5',
+  摩羯: 'M3.6 6.6c1.3 0 2.1.8 2.1 2.1V17M5.7 9c0-1.5 1-2.4 2.3-2.4S10.4 7.5 10.4 9v7c0 2 1.2 3.4 3 3.4M10.4 13.2c.9-1.9 2.4-2.9 4.2-2.9a3.1 3.1 0 1 1 0 6.2c-1.9 0-3.1-1.1-3.7-2.4',
+  水瓶: 'M3 10.4l3-2.6 3 2.6 3-2.6 3 2.6 3-2.6 3 2.6M3 16.2l3-2.6 3 2.6 3-2.6 3 2.6 3-2.6 3 2.6',
+  双鱼: 'M6.2 4c3.2 3.4 3.2 12.6 0 16M17.8 4c-3.2 3.4-3.2 12.6 0 16M4.6 12h14.8'
+};
+
+/* 星图（星座的真实连线，示意位置，0~1 归一化）：[星点[x,y,亮度0~1], 连线[i,j]] —— 弹窗顶部右上角淡淡地画出来 */
+window.ZODIAC_STARS = {
+  白羊: [[[.1,.62,.6],[.46,.42,1],[.7,.4,.8],[.84,.54,.5]], [[0,1],[1,2],[2,3]]],
+  金牛: [[[.5,.62,1],[.42,.52,.6],[.36,.44,.5],[.56,.5,.6],[.62,.42,.5],[.12,.16,.8],[.88,.22,.7],[.72,.78,.4]], [[0,1],[1,2],[2,5],[0,3],[3,4],[4,6],[0,7]]],
+  双子: [[[.3,.14,1],[.56,.12,.9],[.27,.48,.6],[.55,.48,.6],[.2,.86,.5],[.62,.86,.5],[.12,.62,.4]], [[0,2],[2,4],[1,3],[3,5],[2,3],[2,6]]],
+  巨蟹: [[[.5,.46,.7],[.46,.16,.6],[.24,.82,.8],[.78,.78,.6]], [[0,1],[0,2],[0,3]]],
+  狮子: [[[.2,.64,1],[.22,.44,.6],[.3,.28,.7],[.44,.22,.6],[.5,.34,.5],[.62,.46,.6],[.88,.52,.8],[.62,.64,.5]], [[0,1],[1,2],[2,3],[3,4],[1,5],[5,6],[6,7],[7,0]]],
+  处女: [[[.12,.28,.5],[.32,.36,.6],[.5,.3,.6],[.56,.52,.7],[.78,.74,1],[.4,.56,.5],[.3,.78,.5]], [[0,1],[1,2],[2,3],[3,4],[3,5],[5,6]]],
+  天秤: [[[.5,.14,.9],[.24,.4,.8],[.76,.44,.7],[.3,.82,.5],[.7,.86,.5]], [[0,1],[0,2],[1,2],[1,3],[2,4]]],
+  天蝎: [[[.14,.18,.6],[.2,.3,.6],[.1,.4,.5],[.34,.4,1],[.44,.5,.6],[.5,.66,.6],[.56,.8,.6],[.7,.88,.6],[.83,.8,.7],[.86,.66,.6]], [[0,1],[1,2],[1,3],[3,4],[4,5],[5,6],[6,7],[7,8],[8,9]]],
+  射手: [[[.28,.52,.7],[.44,.4,.8],[.6,.44,.7],[.7,.32,.6],[.82,.5,.8],[.66,.66,.7],[.44,.66,.6]], [[0,1],[1,2],[2,3],[2,4],[4,5],[5,6],[6,0],[6,1],[2,5]]],
+  摩羯: [[[.1,.3,.8],[.38,.46,.6],[.86,.24,.7],[.72,.64,.6],[.36,.76,.6]], [[0,1],[1,2],[2,3],[3,4],[4,0]]],
+  水瓶: [[[.1,.3,.6],[.28,.24,.7],[.44,.36,.8],[.56,.3,.5],[.62,.52,.6],[.76,.7,.6],[.88,.86,.5],[.5,.62,.5]], [[0,1],[1,2],[2,3],[2,4],[4,5],[5,6],[4,7]]],
+  双鱼: [[[.08,.2,.5],[.16,.14,.5],[.2,.26,.5],[.3,.38,.6],[.5,.58,.6],[.66,.84,.9],[.74,.62,.6],[.8,.42,.6],[.9,.3,.5]], [[0,1],[1,2],[2,0],[2,3],[3,4],[4,5],[5,6],[6,7],[7,8]]]
+};
+
+/* 四象：星座 → 元素；元素 → 配色与纹样（弹窗用） */
+window.ZODIAC_ELEMENT = { 白羊: 'fire', 狮子: 'fire', 射手: 'fire', 金牛: 'earth', 处女: 'earth', 摩羯: 'earth',
+  双子: 'air', 天秤: 'air', 水瓶: 'air', 巨蟹: 'water', 天蝎: 'water', 双鱼: 'water' };
+window.ZODIAC_THEME = {
+  fire:  { name: '火象星座', words: '热情 · 勇敢 · 有行动力', band: 'linear-gradient(160deg,#FFA275 0%,#F0704A 48%,#C8443A 100%)', body: '#FFF7F2', ink: '#D9583C' },
+  earth: { name: '土象星座', words: '踏实 · 温和 · 很靠得住', band: 'linear-gradient(160deg,#D8C092 0%,#AE9263 50%,#77704C 100%)', body: '#FAF6EE', ink: '#8E7448' },
+  air:   { name: '风象星座', words: '灵动 · 聪明 · 爱交朋友', band: 'linear-gradient(160deg,#CFE3F7 0%,#A3BDEC 50%,#8C93DC 100%)', body: '#F5F7FD', ink: '#6A79CC' },
+  water: { name: '水象星座', words: '温柔 · 细腻 · 很有感知力', band: 'linear-gradient(160deg,#86D3DE 0%,#4C9FC6 50%,#33669F 100%)', body: '#F2F8FB', ink: '#2F7FAD' }
+};
+/* 头部底边纹样：最下一层用正文底色填，头部就「长」进正文里；上面两层半透明白做层次。viewBox 0 0 375 56 */
+window.ZODIAC_MOTIF = {
+  fire:  ['M0 56V40 C10.4 40.0 13.8 30.1 18.8 22.0 C21.8 31.0 33.3 40.0 41.7 40.0 C52.1 40.0 58.5 23.6 63.5 10.1 C66.5 25.1 75.0 40.0 83.3 40.0 C93.8 40.0 92.9 28.4 97.9 18.9 C100.9 29.5 116.7 40.0 125.0 40.0 C135.4 40.0 141.2 24.0 146.2 10.9 C149.2 25.4 158.3 40.0 166.7 40.0 C177.1 40.0 181.3 26.8 186.3 16.1 C189.3 28.0 200.0 40.0 208.3 40.0 C218.7 40.0 218.4 24.8 223.4 12.4 C226.4 26.2 241.7 40.0 250.0 40.0 C260.4 40.0 267.7 25.5 272.7 13.6 C275.7 26.8 283.3 40.0 291.7 40.0 C302.1 40.0 303.8 26.0 308.8 14.6 C311.8 27.3 325.0 40.0 333.3 40.0 C343.8 40.0 345.3 24.4 350.3 11.7 C353.3 25.8 366.7 40.0 375.0 40.0 V56z',
+          'M0 56V46 C8.5 46.0 13.9 35.2 18.6 26.3 C21.5 36.1 27.3 46.0 34.1 46.0 C42.6 46.0 43.2 38.8 47.9 32.9 C50.8 39.4 61.4 46.0 68.2 46.0 C76.7 46.0 77.5 35.0 82.2 26.0 C85.1 36.0 95.5 46.0 102.3 46.0 C110.8 46.0 116.0 38.9 120.8 33.1 C123.7 39.5 129.5 46.0 136.4 46.0 C144.9 46.0 143.9 35.1 148.7 26.2 C151.6 36.1 163.6 46.0 170.5 46.0 C179.0 46.0 181.8 37.8 186.6 31.1 C189.4 38.5 197.7 46.0 204.5 46.0 C213.1 46.0 217.1 35.5 221.8 27.0 C224.7 36.5 231.8 46.0 238.6 46.0 C247.2 46.0 245.8 36.8 250.6 29.3 C253.5 37.6 265.9 46.0 272.7 46.0 C281.2 46.0 285.9 36.2 290.6 28.2 C293.5 37.1 300.0 46.0 306.8 46.0 C315.3 46.0 317.4 36.0 322.1 27.8 C325.0 36.9 334.1 46.0 340.9 46.0 C349.4 46.0 349.0 37.1 353.7 29.8 C356.6 37.9 368.2 46.0 375.0 46.0 V56z',
+          'M0 56V50c30-3 60-6 94-4s62 5 94 3 62-6 94-4 62 5 93 3V56z'],
+  earth: ['M0 56V30l38-18 30 14 44-24 36 20 28-10 46 26 34-16 40 18 30-12 49 22V56z',
+          'M0 56V40l46-14 34 10 40-16 42 16 30-6 42 14 38-12 36 12 34-8 33 12V56z',
+          'M0 56V48c40-6 80-8 125-4s90 6 130 0 80-6 120-2V56z'],
+  air:   ['M0 56V38c18 0 22-14 40-14s22 12 38 12 18-16 38-16 24 14 40 14 20-12 38-12 22 14 40 14 20-14 38-14 22 12 40 12 18-10 30-10 18 10 33 10V56z',
+          'M0 56V44c22 0 30-10 52-10s28 10 48 10 28-12 50-12 30 12 50 12 28-10 50-10 30 10 50 10 26-8 42-8 22 8 33 8V56z',
+          'M0 56V49c30 0 50-5 80-5s48 6 78 6 50-6 80-6 48 5 78 5 40-4 59-4V56z'],
+  water: ['M0 56V36c22 0 26-12 47-12s25 12 47 12 25-12 47-12 25 12 47 12 25-12 47-12 25 12 47 12 25-12 47-12 25 12 46 12V56z',
+          'M0 56V43c24 0 28-9 50-9s27 9 50 9 27-9 50-9 27 9 50 9 27-9 50-9 27 9 50 9 27-9 50-9 26 9 25 9V56z',
+          'M0 56V49c26 0 30-6 54-6s28 6 54 6 28-6 54-6 28 6 54 6 28-6 54-6 28 6 54 6 26-5 51-5V56z']
+};
+window.zodiacIcon = function (n, w, sw) {
+  const d = window.ZODIAC_ICON[n]; if (!d) return '';
+  return '<svg viewBox="0 0 24 24" width="' + w + '" height="' + w + '" fill="none" stroke="currentColor" stroke-width="' + (sw || 2) + '" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path fill="none" d="' + d + '"/></svg>';
+};
diff --git a/mama-box.css b/mama-box.css
index c25e0f8..d7d8394 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4547,33 +4547,47 @@ a.skip:focus{left:16px;top:16px}
 .hero-zod::before{content:"";position:absolute;inset:-10px -6px}        /* 牌子只有 20px 高，点击区放大一圈 */
 .hero-zod:active{transform:scale(.96)}
 
-/* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac ============
-   米白底；顶部一团幸运色的柔光（--zc，JS 按星座写）；三段用细线分隔，字号克制（标题 20、正文 13.5）。 */
-.zd-modal{--zc:#E8A33D;overflow:hidden;padding-top:26px;max-height:88vh;overflow-y:auto}
-.zd-glow{position:absolute;left:50%;top:-120px;width:340px;height:220px;margin-left:-170px;border-radius:50%;
-  background:radial-gradient(closest-side,var(--zc),transparent);opacity:.32;filter:blur(8px);pointer-events:none}
-.zd-modal .modal-x{position:absolute;right:16px;top:16px;z-index:2}
-.zd-head{position:relative;text-align:center}
-.zd-star{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--zc);color:color-mix(in srgb,var(--zc) 55%,#7A5240);
-  box-shadow:0 4px 14px rgba(150,80,50,.14)}
-.zd-head h3{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:2px;color:var(--ink)}
-.zd-range{margin:0;font-size:11.5px;letter-spacing:.5px;color:var(--muted)}
+/* ============ 2026-10-04 星座宝宝弹窗 #modalZodiac（二版：四象主题） ============
+   JS 写四个变量：--zc 幸运色、--zb 头带渐变、--zbody 正文底色、--zi 元素主色（小标题 / 标签 / 星座符号）。 */
+.zd-modal{--zc:#E8A33D;--zb:linear-gradient(160deg,#FFA275,#C8443A);--zbody:#FFF7F2;--zi:#D9583C;
+  background:var(--zbody);padding-top:0;max-height:88vh;overflow-y:auto;overflow-x:hidden}
+.zd-band{position:relative;margin:0 -22px;padding:24px 22px 58px;text-align:center;color:#fff;background:var(--zb);border-radius:28px 28px 0 0;overflow:hidden}
+.zd-band::before{content:"";position:absolute;left:-30%;top:-60%;width:90%;height:140%;border-radius:50%;
+  background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);pointer-events:none}
+.zd-sky{position:absolute;right:6px;top:8px;width:150px;height:118px;opacity:.85;pointer-events:none}
+.zd-sky line{stroke:rgba(255,255,255,.42);stroke-width:.6}
+.zd-sky circle{fill:#fff;animation:zdTw 3.2s ease-in-out infinite}
+@keyframes zdTw{0%,100%{opacity:.95}50%{opacity:.35}}
+.zd-band .modal-x{position:absolute;left:14px;right:auto;top:14px;z-index:2;background:rgba(255,255,255,.22);color:#fff}
+.zd-glyph{position:relative;display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-top:2px;
+  background:rgba(255,255,255,.2);border:.5px solid rgba(255,255,255,.6);color:#fff;
+  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5)}
+.zd-band h3{position:relative;margin:10px 0 4px;font-size:21px;font-weight:800;letter-spacing:3px;text-shadow:0 1px 6px rgba(0,0,0,.12)}
+.zd-range{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font-size:11.5px;letter-spacing:.5px;color:rgba(255,255,255,.88)}
+.zd-el{padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.22);border:.5px solid rgba(255,255,255,.5);font-weight:700;letter-spacing:1px;color:#fff}
 .zd-switch[hidden]{display:none}
-.zd-switch{display:inline-flex;gap:4px;margin-top:10px;padding:3px;border-radius:999px;background:rgba(255,255,255,.75);border:.5px solid #EFE3DA}
-.zd-switch button{height:24px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:12px;color:var(--muted)}
-.zd-switch button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(120,70,50,.12)}
-.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid #EADDD3}
-.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#B49A8A}
-.zd-color{display:flex;align-items:center;gap:14px}
+.zd-switch{position:relative;display:inline-flex;gap:4px;margin-top:12px;padding:3px;border-radius:999px;background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.45)}
+.zd-switch button{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 11px;border:0;border-radius:999px;background:none;font-size:12px;color:rgba(255,255,255,.9)}
+.zd-switch button.on{background:#fff;color:var(--zi);font-weight:700}
+.zd-motif{position:absolute;left:0;bottom:-1px;width:100%;height:46px}
+.zd-motif path:nth-child(1){fill:rgba(255,255,255,.14)}
+.zd-motif path:nth-child(2){fill:rgba(255,255,255,.22)}
+.zd-motif path:nth-child(3){fill:var(--zbody)}
+.zd-modal.el-water .zd-motif,.zd-modal.el-air .zd-motif{animation:zdDrift 7s ease-in-out infinite alternate}
+@keyframes zdDrift{from{transform:translateX(-6px) scaleX(1.04)}to{transform:translateX(6px) scaleX(1.04)}}
+.zd-words{margin:2px 0 0;text-align:center;font-size:12px;letter-spacing:2px;color:var(--zi);opacity:.85}
+.zd-sec{position:relative;margin-top:16px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--zi) 18%,transparent)}
+.zd-label{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:var(--zi)}
+.zd-color{display:flex;align-items:center;gap:14px;padding:14px;margin-top:14px;border-top:0;border-radius:16px;background:rgba(255,255,255,.7)}
 .zd-color .zd-label{margin-bottom:3px}
 .zd-sw{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--zc);
-  box-shadow:inset 0 -6px 12px rgba(0,0,0,.08),inset 0 4px 8px rgba(255,255,255,.45),0 0 0 4px #fff,0 4px 14px rgba(120,70,50,.16)}
+  box-shadow:inset 0 -6px 12px rgba(0,0,0,.08),inset 0 4px 8px rgba(255,255,255,.45),0 0 0 4px #fff,0 4px 14px rgba(0,0,0,.1)}
 .zd-color b{display:block;font-size:16px;font-weight:800;letter-spacing:1px;color:var(--ink)}
 .zd-color p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
 .zd-tags{display:flex;gap:6px;margin-bottom:8px}
-.zd-tags span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink-2);
-  background:color-mix(in srgb,var(--zc) 16%,#fff);border:.5px solid color-mix(in srgb,var(--zc) 35%,#fff)}
+.zd-tags span{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--zi);
+  background:color-mix(in srgb,var(--zi) 10%,#fff);border:.5px solid color-mix(in srgb,var(--zi) 28%,#fff)}
 .zd-para{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
 .zd-jobs{display:flex;flex-wrap:wrap;gap:7px}
-.zd-jobs span{padding:6px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 3px rgba(120,70,50,.08)}
+.zd-jobs span{padding:6px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 3px rgba(0,0,0,.06)}
 .zd-foot{margin:18px 0 2px;text-align:center;font-size:11px;color:#BCAEA4}