/* 頂部導航列 */
      #main-nav {
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 20px;
        display: flex;
        justify-content: center;
        gap: 20px;
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 50;
      }

      .main-tab-btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #aaa;
        padding: 10px 24px;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s;
        font-weight: 600;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .main-tab-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
      }

      .main-tab-btn.active {
        background: #ffd37a;
        color: #0b0b1a;
        border-color: #ffd37a;
        box-shadow: 0 0 15px rgba(255, 211, 122, 0.3);
      }

      /* 內容容器切換 */
      .view-container {
        display: none;
        padding: 20px;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
      }
      .view-container.active-view {
        display: block;
        animation: fadeIn 0.5s ease-in-out;
      }

      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }

      /* =========================================
         星象區樣式 (OnlystarA 風格)
         ========================================= */
      .star-layout {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
      }

      #starChart {
        max-width: 90vw;
        max-height: 90vw;
        width: min(640px, 90vw);
        height: min(640px, 90vw);
        aspect-ratio: 1 / 1;
        border: 1px solid #888;
        border-radius: 50%;
        background: radial-gradient(circle at center, #1a1a2e 0%, #0b0b1a 100%);
        flex-shrink: 0;
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
      }

      #report {
        width: 100%;
        max-width: 500px;
        flex-grow: 1;
        padding: 25px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }

      #report h3 {
        margin: 10px 0 20px 0;
        color: #ffdf99;
        font-weight: 600;
        letter-spacing: 1px;
        font-size: 1.4rem;
        border-left: 4px solid #ffdf99;
        padding-left: 12px;
      }
      #report p {
        margin: 8px 0;
        color: #ddd;
        line-height: 1.7;
        font-size: 0.95rem;
      }

      .badge {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        padding: 4px 10px;
        border-radius: 6px;
        display: inline-block;
        margin-right: 8px;
        font-size: 0.85em;
        border: 1px solid rgba(255, 255, 255, 0.15);
      }

      /* D3 Chart Specifics */
      #wuxingChartContainer .bar { fill: #ffdf99; transition: height 0.5s ease; }
      #wuxingChartContainer text { fill: #aaa; font-size: 11px; font-family: sans-serif; }
      #wuxingChartContainer line, #wuxingChartContainer path { stroke: #444; }

      .hint {
        color: #ffecb3;
        font-size: 0.95em;
        margin-top: 12px;
        background: rgba(255, 223, 153, 0.08);
        padding: 12px;
        border-radius: 8px;
        border-left: 3px solid #ffdf99;
        line-height: 1.6;
      }

      /* Advice Tabs in Star View */
      .advice-panel {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        padding: 15px;
        margin-top: 15px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: none;
        animation: fadeIn 0.3s;
      }
      .advice-panel.active { display: block; }
      .advice-panel h4 { margin-top: 0; color: #fff; font-size: 1.1em; }

      .inner-tab-button {
        background: none;
        border: none;
        color: #888;
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-size: 1em;
        transition: all 0.3s;
        flex: 1;
        text-align: center;
      }
      .inner-tab-button:hover { color: #ccc; }
      .inner-tab-button.active {
        color: #ffdf99;
        border-bottom-color: #ffdf99;
        font-weight: bold;
      }

      /* Social Luck Table */
      #socialLuckTable { width: 100%; font-size: 0.9em; border-collapse: separate; border-spacing: 0 4px; }
      #socialLuckTable th { text-align: left; padding: 5px; color: #888; font-weight: normal; border-bottom: 1px solid #444; }
      #socialLuckTable td { padding: 6px 5px; background: rgba(255,255,255,0.02); }
      #socialLuckTable tr:hover td { background: rgba(255,255,255,0.05); }

      /* =========================================
         筆劃字典區樣式 (Word 模組適配)
         ========================================= */
      .word-layout-container {
         max-width: 1000px;
         margin: 0 auto;
         background-color: white; /* 確保內容在深色背景上清晰，使用白色卡片 */
         color: #1f2937; /* Tailwind gray-800 */
      }

      /* Word Tabs */
      .word-tab-btn {
          padding: 0.75rem 1.5rem;
          font-weight: 600;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
          transition: all 200ms;
          font-size: 1rem;
      }
      .word-tab-btn.active-tab {
          color: #1E40AF;
          border-bottom: 4px solid #1E40AF;
          background-color: #EFF6FF;
      }
      .word-tab-btn.inactive-tab {
          color: #6B7280;
          background-color: transparent;
      }
      .word-tab-btn.inactive-tab:hover {
          background-color: #F3F4F6;
      }

      .loading-overlay {
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-color: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(3px);
          z-index: 10;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 0.75rem;
      }

      /* 響應式調整 */
      @media (max-width: 768px) {
        .star-layout { flex-direction: column; align-items: center; }
        #report { width: 100%; padding: 15px; }
        #starChart { width: 100%; height: auto; }
        .main-tab-btn { padding: 8px 16px; font-size: 0.9rem; }
      }
    </style>
  </head>
  <body>
    
    <!-- 1. 頂部主要導航 -->
    <nav id="main-nav">
        <button class="main-tab-btn active" onclick="switchMainView('view-star')">
            <span>🌌</span> 星象儀表板
        </button>
        <button class="main-tab-btn" onclick="switchMainView('view-word')">
            <span>✍️</span> 筆劃與字典
        </button>
    </nav>

    <!-- 2. 星象儀表板 (原 OnlystarA.html 內容) -->
    <div id="view-star" class="view-container active-view">
        <!-- 行星 Tooltip -->
        <div id="planetTooltip" style="position: absolute; background: rgba(0,0,0,0.85); color: #fff; padding: 6px 12px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 100; font-size: 0.9em; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 1px solid #555;"></div>

        <div class="star-layout">
            <!-- 左側：星盤 SVG -->
            <svg id="starChart"></svg>

            <!-- 右側：報告面板 -->
            <div id="report">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px;">
                    <h3>星象報告 · V3 (完整版)</h3>
                    <div style="font-size:0.8rem; color:#888; border:1px solid #444; padding:2px 8px; border-radius:10px;">Live Mode</div>
                </div>

                <!-- 個人設定區塊 -->
                <div id="personalSettings" style="margin-bottom: 20px; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);">
                    <h4 style="color: #ffdf99; margin-top: 0; margin-bottom: 12px; font-size:1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px;">個人命盤設定 (預設為現在時間)</h4>
                    <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px">
                        <label style="flex: 1 1 45%; font-size: 0.9em; color:#ccc;">日期: 
                            <input type="date" id="birthDate" style="width: 100%; padding: 6px; border-radius: 4px; background: #222; color: #fff; border:1px solid #555; margin-top: 4px;"/>
                        </label>
                        <label style="flex: 1 1 45%; font-size: 0.9em; color:#ccc;">時間: 
                            <input type="time" id="birthTime" style="width: 100%; padding: 6px; border-radius: 4px; background: #222; color: #fff; border:1px solid #555; margin-top: 4px;"/>
                        </label>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 10px">
                        <label style="flex: 1 1 45%; font-size: 0.9em; color:#ccc;">經度: 
                            <input type="number" id="birthLon" value="121.5654" step="0.0001" style="width: 100%; padding: 6px; background: #222; color: #fff; border:1px solid #555; border-radius: 4px; margin-top: 4px;"/>
                        </label>
                        <label style="flex: 1 1 45%; font-size: 0.9em; color:#ccc;">緯度: 
                            <input type="number" id="birthLat" value="25.0330" step="0.0001" style="width: 100%; padding: 6px; background: #222; color: #fff; border:1px solid #555; border-radius: 4px; margin-top: 4px;"/>
                        </label>
                    </div>
                    <button id="applyPersonalSettingsBtn" style="margin-top: 15px; width:100%; padding: 8px; background: #ffd37a; border: none; border-radius: 6px; cursor: pointer; color: #000; font-weight:bold; transition: background 0.2s;">應用個人設定並重新計算</button>
                </div>

                <!-- 基本數據 -->
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <div><span class="badge">月—行星</span> <span id="closestPlanet" style="color: #ffdf99;">計算中...</span></div>
                    <div><span class="badge">月相</span> <span id="moonPhase">計算中...</span></div>
                    <div><span class="badge">干支</span> <span id="ganzhi">計算中...</span></div>
                    <div><span class="badge">節氣</span> <span id="jieqi">計算中...</span></div>
                    <div><span class="badge">宿曜</span> <span id="xingxiu">計算中...</span></div>
                </div>

                <!-- 五行圖表 -->
                <div style="margin-top: 15px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
                    <span class="badge" style="margin-bottom: 8px; display:inline-block;">合成五行能量分佈</span>
                    <div id="wuxingChartContainer" style="margin-top: 6px; height: 120px;"></div>
                </div>

                <!-- 天氣 -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; font-size: 0.9em;">
                    <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px;">
                        <span class="badge" style="margin:0;">雲層</span> <span id="cloudCover">...</span>
                    </div>
                    <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px;">
                        <span class="badge" style="margin:0;">風速</span> <span id="windSpeed">...</span>
                    </div>
                    <div style="grid-column: span 2; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px;">
                        <span class="badge" style="margin:0;">狀況</span> <span id="weatherDescription">...</span>
                    </div>
                </div>

                <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 20px 0;" />

                <!-- 社會氣運 -->
                <h3>社會氣運 · 推算</h3>
                <div id="socialLuckPanel">
                    <p class="hint" id="socialLuckSummary" style="margin-bottom:15px; font-weight: 500;"></p>
                    
                    <div style="overflow-x:auto;">
                        <table id="socialLuckTable">
                            <thead>
                                <tr>
                                    <th style="width: 30%">星體對</th>
                                    <th style="text-align:right">角距</th>
                                    <th style="padding-left:15px;">相位</th>
                                    <th>影響</th>
                                    <th style="text-align:right">分數</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <p style="text-align: right; font-weight: bold; color: #ffdf99; margin-top: 10px; font-size: 1.1em;">
                        總分: <span id="socialLuckScore">...</span>
                    </p>
                </div>

                <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 20px 0;" />

                <!-- 加密貨幣 -->
                <h3>加密貨幣 · 五行傾向</h3>
                <p style="font-size: 0.85em; color: #aaa; margin-bottom: 10px;">系統根據宿曜、節氣與最近行星合成五行能量，對應至各幣種。</p>
                <div id="cryptoList" style="margin-top: 10px; display: grid; gap: 8px;"></div>

                <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 20px 0;" />

                <!-- 建議 Tabs -->
                <div id="adviceTabs" style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 5px;">
                    <button class="inner-tab-button active" data-tab="work">💼 工作</button>
                    <button class="inner-tab-button" data-tab="wealth">💰 財運</button>
                    <button class="inner-tab-button" data-tab="relationship">❤️ 感情</button>
                    <button class="inner-tab-button" data-tab="health">⚕️ 健康</button>
                </div>

                <div id="adviceTabContent">
                    <div id="workPanel" class="advice-panel active">
                        <h4>工作運 · 推算建議</h4>
                        <p id="workTheme" style="font-size:0.9em; color:#aaa; margin-bottom: 10px;"></p>
                        <p id="workAdvice" class="hint"></p>
                    </div>
                    <div id="wealthPanel" class="advice-panel">
                        <h4>財運 · 推算建議</h4>
                        <p id="wealthTheme" style="font-size:0.9em; color:#aaa; margin-bottom: 10px;"></p>
                        <p id="wealthAdvice" class="hint"></p>
                    </div>
                    <div id="relationshipPanel" class="advice-panel">
                        <h4>感情運 · 推算建議</h4>
                        <p id="relationshipTheme" style="font-size:0.9em; color:#aaa; margin-bottom: 10px;"></p>
                        <p id="relationshipAdvice" class="hint"></p>
                    </div>
                    <div id="healthPanel" class="advice-panel">
                        <h4>健康運 · 推算建議</h4>
                        <p id="healthTheme" style="font-size:0.9em; color:#aaa; margin-bottom: 10px;"></p>
                        <p id="healthAdvice" class="hint"></p>
                    </div>
                </div>

                <div style="margin-top: 25px; display:flex; gap:10px;">
                    <button id="refreshBtn" style="padding: 10px 16px; background: #444; border:none; border-radius:6px; color:#fff; cursor:pointer; font-size: 0.95em; transition: background 0.2s;">🔄 重新計算</button>
                    <button id="copyReportBtn" style="padding: 10px 16px; background: #28a745; border:none; border-radius:6px; color:#fff; cursor:pointer; font-size: 0.95em; transition: background 0.2s;">📋 複製完整報告</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. 筆劃與字典工具 (原 star_word.html 內容) -->
    <div id="view-word" class="view-container">
        <!-- 包裹一個白色卡片容器以適配 Light Mode 樣式 -->
        <div class="word-layout-container shadow-2xl rounded-xl p-6 transition duration-500">
            <h2 class="text-2xl font-bold text-center text-gray-800 border-b-2 pb-4 mb-6">
                模組化字串筆劃計算工具
            </h2>

            <!-- 內部 Tab 導航 -->
            <div class="flex border-b border-gray-300 mb-6">
                <button id="tab-stroke-button" onclick="window.AppController.switchTab('stroke')" class="word-tab-btn active-tab flex-1 text-center">
                    筆劃總數計算
                </button>
                <button id="tab-astrology-button" onclick="window.AppController.switchTab('astrology')" class="word-tab-btn inactive-tab flex-1 text-center">
                    星象字典狀態
                </button>
            </div>

            <!-- 筆劃計算器 Tab -->
            <div id="stroke-tab" class="word-tab-content block">
                <div class="flex flex-col md:flex-row md:space-x-6 relative"> 
                    
                    <!-- 載入遮罩 -->
                    <div id="cjkLoadingOverlay" class="loading-overlay rounded-xl">
                        <svg class="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <p id="cjkLoadingText" class="mt-4 text-lg font-semibold text-gray-700">正在下載中文字典... (請稍候)</p>
                        <button id="cjkRetryButton" onclick="window.AppController.retryLoadCjkDict()" class="mt-4 px-4 py-2 bg-red-500 text-white font-semibold text-sm rounded-lg hover:bg-red-600 hidden transition">
                            手動重試載入字典
                        </button>
                    </div>

                    <!-- 輸入區 (左) -->
                    <div class="w-full md:w-1/3 space-y-5">
                        <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 shadow-sm">
                            <h3 class="font-bold text-gray-700 mb-2 flex items-center">
                                <span class="mr-2">🔗</span> 星象連動功能
                            </h3>
                            <button onclick="importGanzhiToStroke()" class="w-full py-2.5 bg-accent-orange hover:bg-orange-600 text-white rounded font-bold transition shadow active:translate-y-0.5">
                                📥 引入今日星象干支
                            </button>
                            <p class="text-xs text-gray-500 mt-2">點擊後自動將「星象儀表板」計算出的年、月、日、時干支填入下方輸入框。</p>
                        </div>

                        <div>
                            <label for="charInput1" class="text-sm font-semibold text-gray-700 block mb-1">字串 1 (自訂輸入)</label>
                            <input type="text" id="charInput1" placeholder="輸入中英數字混合字串" class="w-full p-3 border border-primary-blue rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-blue/50 text-base shadow-inner text-gray-800 transition" disabled />
                        </div>

                        <div>
                            <label for="charInput2" class="text-sm font-semibold text-gray-700 block mb-1">字串 2 (固定拆分測試)</label>
                            <input type="text" id="charInput2" value="加里寧格勒波羅的海 @ 奧倫堡" readonly class="w-full p-3 border border-gray-400 bg-gray-100 text-gray-600 rounded-lg text-base shadow-inner cursor-not-allowed" />
                            <p class="text-xs text-accent-orange mt-1 font-medium">系統依 @ 符號及空白自動拆分計算。</p>
                        </div>

                        <button id="lookupButton" onclick="window.AppController.lookupStrokeCount()" class="w-full p-3.5 bg-primary-blue text-white font-bold text-lg rounded-xl shadow-lg hover:bg-blue-800 transition transform active:scale-98" disabled>
                            計算所有字串總數
                        </button>
                    </div>

                    <!-- 結果區 (右) -->
                    <div class="w-full md:w-2/3 mt-6 md:mt-0">
                        <h2 class="text-lg font-semibold text-gray-700 border-b pb-2 mb-4">總筆劃計算結果</h2>
                        <div id="strokeResultBox" class="bg-secondary-gray/20 p-6 rounded-xl border border-secondary-gray/50 flex flex-col justify-center items-center min-h-[300px]">
                            <p id="strokeResultText" class="text-center text-gray-600 animate-pulse">
                                📘 等待中文字典載入...
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 星象字典狀態 Tab -->
            <div id="astrology-tab" class="word-tab-content hidden pt-4">
                <h2 class="text-xl font-bold text-gray-800 mb-4">星象字典 (Star 模組) 載入狀態</h2>
                <div id="astroStatusBox" class="p-8 border-2 border-dashed border-primary-blue/50 rounded-xl bg-blue-50 flex flex-col items-center justify-center shadow-lg transition-colors duration-300">
                    <p id="astroStatusText" class="text-center text-lg font-medium text-gray-600">🟡 等待初始化...</p>
                    <button id="astroRetryButton" onclick="window.AppController.retryLoadAstroDict()" class="mt-6 px-6 py-2 bg-red-500 text-white font-semibold text-sm rounded-lg hover:bg-red-600 hidden transition shadow-md">
                        重試載入
                    </button>
                </div>
                <div class="text-sm text-gray-500 pt-4 mt-4 space-y-2 border-t">
                    <p class="font-bold text-gray-700">字典來源資訊:</p>
                    <p class="bg-gray-100 p-2 rounded break-all font-mono text-xs">URL: <span id="astroUrlDisplay"></span></p>
                    <p>用途：提供星象分析所需的關鍵字與映射資料。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局變數儲存區 (用於模組間通信) -->
    <script>
        // 用於儲存星象計算後的干支字串
        window.currentGanzhiString = "";

        // 主介面切換函數
        function switchMainView(viewId) {
            document.querySelectorAll('.view-container').forEach(el => el.classList.remove('active-view'));
            document.querySelectorAll('.main-tab-btn').forEach(el => el.classList.remove('active'));
            
            document.getElementById(viewId).classList.add('active-view');
            
            // Highlight button
            const btns = document.querySelectorAll('.main-tab-btn');
            if (viewId === 'view-star') btns[0].classList.add('active');
            if (viewId === 'view-word') btns[1].classList.add('active');
        }

        // 連動功能：將干支填入筆劃輸入框
        function importGanzhiToStroke() {
            if (window.currentGanzhiString) {
                const input = document.getElementById('charInput1');
                // 移除 "📅 干支：" 以及可能的空白，提取純文字
                let cleanText = window.currentGanzhiString.replace(/📅\s*干支：/g, '').trim();
                
                input.value = cleanText;
                input.disabled = false;
                
                // 視覺回饋
                input.focus();
                // 切換 Tab 到筆劃計算
                window.AppController.switchTab('stroke');
                
                // 顯示提示
                const msg = document.createElement('div');
                msg.textContent = `已引入: ${cleanText}`;
                msg.style.cssText = "position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.8); color:white; padding:15px 25px; border-radius:8px; z-index:9999; animation: fadeOut 2s forwards;";
                document.body.appendChild(msg);
                setTimeout(() => msg.remove(), 2000);
                
                // 自動觸發計算
                if(window.AppController && window.AppController.lookupStrokeCount) {
                    window.AppController.lookupStrokeCount();
                }
            } else {
                alert("星象數據尚未準備好，請先等待星象儀表板計算完成。");
            }
        }

        // 定義淡出動畫
        const styleSheet = document.createElement("style");
        styleSheet.innerText = "@keyframes fadeOut { 0% {opacity:1;} 70% {opacity:1;} 100% {opacity:0;} }";
        document.head.appendChild(styleSheet);
    </script>

    <!-- 核心邏輯模組 -->
    <script type="module">
        import calendar from 'https://cdn.jsdelivr.net/npm/js-calendar-converter@latest/+esm';

        // =========================================================
        // PART 1: 星象邏輯 (OnlystarA.html 完整功能)
        // =========================================================
        
        let personalBirthDate = null;
        let personalBirthTime = null;
        let personalBirthLon = null;
        let personalBirthLat = null;
        
        // 個人設定事件監聽
        const applyBtn = document.getElementById('applyPersonalSettingsBtn');
        if(applyBtn) {
            applyBtn.addEventListener('click', () => {
                personalBirthDate = document.getElementById('birthDate').value;
                personalBirthTime = document.getElementById('birthTime').value;
                personalBirthLon = parseFloat(document.getElementById('birthLon').value);
                personalBirthLat = parseFloat(document.getElementById('birthLat').value);
                
                if(!personalBirthDate || !personalBirthTime) {
                    alert("請輸入完整的日期與時間！");
                    return;
                }
                
                refreshAll();
                
                // Feedback
                applyBtn.innerText = "✅ 設定已應用";
                setTimeout(() => applyBtn.innerText = "應用個人設定並重新計算", 2000);
            });
        }

        // 星象基本資料
        const planetChineseNames = { 
            Sun: '太陽', Moon: '月亮', Mercury: '水星', Venus: '金星', Mars: '火星', Jupiter: '木星', Saturn: '土星' 
        };
        const wuxingMap = { 
            Sun: '火', Moon: '水', Mercury: '水', Venus: '金', Mars: '火', Jupiter: '木', Saturn: '土' 
        };
        const wuxingSheng = { 木: '火', 火: '土', 土: '金', 金: '水', 水: '木' };
        const wuxingKe = { 木: '土', 土: '水', 水: '火', 火: '金', 金: '木' };
        
        const planetSocialSymbolism = {
            Jupiter: '經濟繁榮、樂觀、教育文化興盛',
            Mars: '戰爭、科技突破、群體衝突',
            Saturn: '經濟壓力、政策收縮、紀律強化',
            Venus: '消費、藝術、社交與情感議題',
            Mercury: '資訊傳播、媒體輿論、思維模式',
        };

        // 完整的 27 宿曜表
        const sukuyoTable = [
            { element: '木', name: '角木蛟', fortune: '吉', description: '聰明靈巧，主貴氣，宜開始新事。' },
            { element: '金', name: '亢金龍', fortune: '小吉', description: '有威勢但需謙遜，宜守成。' },
            { element: '土', name: '氐土貉', fortune: '平', description: '平穩之象，宜安居或修整舊業。' },
            { element: '火', name: '房日兔', fortune: '吉', description: '家庭安樂，利婚嫁與祭祀。' },
            { element: '火', name: '心月狐', fortune: '凶', description: '易煩躁、情緒起伏，宜靜養心神。' },
            { element: '火', name: '尾火虎', fortune: '大吉', description: '英勇果斷，宜出征、開業、立志。' },
            { element: '水', name: '箕水豹', fortune: '小凶', description: '多口舌是非，宜謹言慎行。' },
            { element: '木', name: '斗木獬', fortune: '吉', description: '創造力旺盛，宜藝術與設計。' },
            { element: '土', name: '女土蝠', fortune: '凶', description: '多小人，慎防謠言與損友。' },
            { element: '水', name: '虛日鼠', fortune: '平', description: '宜休養，忌重大決策。' },
            { element: '火', name: '危月燕', fortune: '吉', description: '宜旅行、宴會，氣氛愉快。' },
            { element: '火', name: '室火豬', fortune: '小凶', description: '易爭執，宜保持冷靜。' },
            { element: '水', name: '壁水獝', fortune: '吉', description: '堅定有信，宜立約與締盟。' },
            { element: '木', name: '奎木狼', fortune: '大吉', description: '氣勢旺盛，宜發展事業。' },
            { element: '金', name: '婁金狗', fortune: '小吉', description: '宜修身養性，防口舌。' },
            { element: '土', name: '胃土雉', fortune: '平', description: '宜整備規劃，安定發展。' },
            { element: '火', name: '昴日雞', fortune: '吉', description: '宜學習與進修，聰明活躍。' },
            { element: '火', name: '畢月烏', fortune: '小凶', description: '情緒不穩，宜靜心修持。' },
            { element: '火', name: '觜火猴', fortune: '凶', description: '言語有失，慎口舌。' },
            { element: '水', name: '參水猿', fortune: '吉', description: '宜出行、貿易與學習。' },
            { element: '木', name: '井木犴', fortune: '小吉', description: '宜整修舊業，防口舌。' },
            { element: '金', name: '鬼金羊', fortune: '凶', description: '多阻礙，不宜出行。' },
            { element: '土', name: '柳土獐', fortune: '小凶', description: '宜謹慎行事，忌衝動。' },
            { element: '火', name: '星日馬', fortune: '吉', description: '宜外出與社交，人氣佳。' },
            { element: '火', name: '張月鹿', fortune: '吉', description: '宜演出、展示、娛樂。' },
            { element: '火', name: '翼火蛇', fortune: '凶', description: '易生爭端，宜避開衝突。' },
            { element: '水', name: '軫水蚓', fortune: '吉', description: '宜勤勉學習，利文書與交易。' }
        ];

        // 完整的節氣列表
        const jieqiList = [
            { name: '立春', month: 2, day: 4, element: '木' }, { name: '雨水', month: 2, day: 19, element: '水' },
            { name: '驚蟄', month: 3, day: 5, element: '木' }, { name: '春分', month: 3, day: 20, element: '木' },
            { name: '清明', month: 4, day: 4, element: '木' }, { name: '穀雨', month: 4, day: 19, element: '土' },
            { name: '立夏', month: 5, day: 5, element: '火' }, { name: '小滿', month: 5, day: 20, element: '木' },
            { name: '芒種', month: 6, day: 5, element: '火' }, { name: '夏至', month: 6, day: 21, element: '火' },
            { name: '小暑', month: 7, day: 6, element: '火' }, { name: '大暑', month: 7, day: 22, element: '火' },
            { name: '立秋', month: 8, day: 7, element: '土' }, { name: '處暑', month: 8, day: 22, element: '土' },
            { name: '白露', month: 9, day: 7, element: '金' }, { name: '秋分', month: 9, day: 22, element: '金' },
            { name: '寒露', month: 10, day: 8, element: '金' }, { name: '霜降', month: 10, day: 23, element: '金' },
            { name: '立冬', month: 11, day: 7, element: '土' }, { name: '小雪', month: 11, day: 22, element: '土' },
            { name: '大雪', month: 12, day: 6, element: '土' }, { name: '冬至', month: 12, day: 21, element: '水' },
            { name: '小寒', month: 1, day: 5, element: '水' }, { name: '大寒', month: 1, day: 20, element: '水' }
        ];

        // --- Helper Functions ---
        function raDeg(obj) { return (obj.ra * 15 + 360) % 360; }
        function angleDistance(a, b) { let d = Math.abs(a - b) % 360; return d > 180 ? 360 - d : d; }

        function calculateFullGanzhi(date) {
            const lunar = calendar.solar2lunar(date.getFullYear(), date.getMonth()+1, date.getDate());
            const h = date.getHours();
            
            // 時辰干支推算 (日上起時：五鼠遁)
            const heavenlyStems = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
            const earthlyBranches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
            
            // 日干序數
            const dayStemIndex = heavenlyStems.indexOf(lunar.gzDay.charAt(0));
            
            // 時支序數 (子時=0, 丑時=1...)
            // 23:00-01:00 為子時
            const hourBranchIndex = Math.floor((h + 1) / 2) % 12;
            
            // 時干推算: 甲己還加甲(0), 乙庚丙作初(2)...
            // offset: 0, 2, 4, 6, 8 for dayStemIndex % 5 = 0, 1, 2, 3, 4
            const stemStartOffset = (dayStemIndex % 5) * 2;
            const hourStemIndex = (stemStartOffset + hourBranchIndex) % 10;
            
            const hourGz = heavenlyStems[hourStemIndex] + earthlyBranches[hourBranchIndex];
            
            return { year: lunar.gzYear, month: lunar.gzMonth, day: lunar.gzDay, hour: hourGz };
        }

        function get宿曜Info(date) {
            const base = new Date(2024, 0, 1); // 2024-01-01 is a known anchor (need to verify real sukuyo anchor, using approx for demo logic from previous code)
            // 簡單起見，這裡沿用之前的邏輯。真實宿曜算法可能需要更精確的農曆對照
            const diff = Math.floor((date - base)/(86400000));
            const idx = ((diff % 27) + 27) % 27;
            return sukuyoTable[idx];
        }

        function getNearestJieqi(date) {
            let y = date.getFullYear();
            // 建立今年和明年的節氣日期候選
            let candidates = jieqiList.map(j => ({...j, date: new Date(y, j.month-1, j.day)}));
            candidates = candidates.concat(jieqiList.map(j => ({...j, date: new Date(y+1, j.month-1, j.day)})));
            
            candidates.sort((a,b) => a.date - b.date);
            
            // 找出最近的一個未來節氣 (或今天)
            for(let c of candidates) {
                const d = Math.ceil((c.date - date)/86400000);
                if(d >= 0) return { ...c, days: d };
            }
            return candidates[0]; // Fallback
        }

        // --- Core Star Logic ---
        function refreshAll() {
            let date = new Date();
            let lon = 121.5654, lat = 25.0330; // Default Taipei

            // 使用個人設定值
            if (personalBirthDate && personalBirthTime) {
                date = new Date(`${personalBirthDate}T${personalBirthTime}:00`);
            }
            if (personalBirthLon) lon = personalBirthLon;
            if (personalBirthLat) lat = personalBirthLat;

            const time = Astronomy.MakeTime(date);
            const obs = new Astronomy.Observer(lat, lon, 0);
            
            // 計算七政四餘 (簡化為七政)
            const bodies = ['Sun','Moon','Mercury','Venus','Mars','Jupiter','Saturn'];
            const pData = {};
            bodies.forEach(b => {
                const eq = Astronomy.Equator(Astronomy.Body[b], time, obs, false, true);
                pData[b] = raDeg(eq);
            });

            // Draw Chart
            drawPlanets(pData);

            // Calculate Metrics
            const moonDiff = (pData.Moon - pData.Sun + 360) % 360;
            let moonPhase = '';
            if (moonDiff < 45) moonPhase = '新月';
            else if (moonDiff < 135) moonPhase = '上弦';
            else if (moonDiff < 225) moonPhase = '滿月';
            else moonPhase = '下弦';
            
            // Closest Planet to Moon
            let minD = 360, minP = '';
            bodies.forEach(b => {
                if(b === 'Moon') return;
                const d = angleDistance(pData.Moon, pData[b]);
                if(d < minD) { minD = d; minP = b; }
            });

            // Data Calculations
            const gz = calculateFullGanzhi(date);
            const suk = get宿曜Info(date);
            const jie = getNearestJieqi(date);

            // Update UI Text
            document.getElementById('closestPlanet').innerText = `🌕 月亮目前最接近 🪐 ${planetChineseNames[minP]} (${minP})（角距 ${minD.toFixed(1)}°）`;
            document.getElementById('moonPhase').innerText = `🌓 月相：${moonPhase}`;
            const gzStr = `📅 干支：${gz.year}年 ${gz.month}月 ${gz.day}日 ${gz.hour}時`;
            document.getElementById('ganzhi').innerText = gzStr;
            // 更新全局變數供筆劃模組使用
            window.currentGanzhiString = gzStr;

            document.getElementById('jieqi').innerText = `☯ 節氣：${jie.name}（距離 ${jie.days} 天）`;
            document.getElementById('xingxiu').innerText = `🌠 宿曜：${suk.name} (${suk.element}) - ${suk.fortune}`;

            // Wuxing Calc
            const wuxingResult = computeWuxingEnergy(suk, jie, minP, moonDiff);
            drawWuxingChart(wuxingResult.pct);
            updateCrypto(wuxingResult.pct);

            // Social Luck (Simplified)
            computeSocialLuck(pData);

            // Advice Text
            updateAdvice(suk, jie, moonPhase, wuxingResult.pct, gz);

            // Weather (Fetch)
            updateWeather(lat, lon);
        }

        function computeWuxingEnergy(suk, jie, closestP, moonDiff) {
            let score = { 木:0, 火:0, 土:0, 金:0, 水:0 };
            
            // 宿曜加分
            if(suk.element && score.hasOwnProperty(suk.element)) score[suk.element]++;
            // 節氣加分
            if(jie.element && score.hasOwnProperty(jie.element)) score[jie.element]++;
            // 最近行星加分
            if(wuxingMap[closestP]) score[wuxingMap[closestP]]++;
            
            // 月相修正
            if(moonDiff >= 135 && moonDiff < 225) score['水']++; // 滿月情緒波動大 -> 水
            else if(moonDiff < 45) score['木']++; // 新月新生 -> 木

            // 生剋調整 (五行流轉)
            let adj = {...score};
            Object.keys(wuxingSheng).forEach(k => {
                if(score[k] > 0) adj[wuxingSheng[k]] += score[k] * 0.2; // 生者助人
            });
             Object.keys(wuxingKe).forEach(k => {
                if(score[k] > 0) {
                    adj[wuxingKe[k]] -= score[k] * 0.1; // 剋者抑制 (輕微)
                    if(adj[wuxingKe[k]] < 0) adj[wuxingKe[k]] = 0;
                }
            });
            Object.assign(score, adj);
            
            // 百分比化
            const total = Object.values(score).reduce((a,b)=>a+b, 0) || 1;
            const pct = {};
            Object.keys(score).forEach(k => pct[k] = Math.round((score[k]/total)*100));
            
            return { score, pct };
        }

        function computeSocialLuck(pData) {
            // 相位定義
            const aspects = [
                { name: '合相', range: [0, 6], score: 5, effect: '強化、聯合' }, 
                { name: '衝相', range: [174, 186], score: -10, effect: '對立、衝撞' },
                { name: '三合', range: [112, 128], score: 15, effect: '和諧、流暢' },
                { name: '四分', range: [82, 98], score: -15, effect: '衝突、改革' },
                { name: '六分', range: [54, 66], score: 10, effect: '合作、靈活' },
            ];
            
            // 檢查外行星間的關係
            const pairs = [
                ['Jupiter', 'Mars'], ['Jupiter', 'Saturn'], ['Jupiter', 'Venus'],
                ['Mars', 'Saturn'], ['Mars', 'Venus'], ['Saturn', 'Venus']
            ];
            
            let totalScore = 0;
            const tbody = document.querySelector('#socialLuckTable tbody');
            tbody.innerHTML = '';
            
            pairs.forEach(pair => {
                const d = angleDistance(pData[pair[0]], pData[pair[1]]);
                let matchedAspect = null;
                
                for(let asp of aspects) {
                    if(d >= asp.range[0] && d <= asp.range[1]) {
                        matchedAspect = asp;
                        break;
                    }
                }
                
                if(matchedAspect) {
                    totalScore += matchedAspect.score;
                    const row = `
                        <tr>
                            <td>${planetChineseNames[pair[0]]} / ${planetChineseNames[pair[1]]}</td>
                            <td style="text-align:right">${d.toFixed(1)}°</td>
                            <td style="padding-left:15px;"><span class="badge" style="background:${matchedAspect.score>0?'#28a745':'#dc3545'}">${matchedAspect.name}</span></td>
                            <td>${matchedAspect.effect}</td>
                            <td style="text-align:right; font-weight:bold; color:${matchedAspect.score>0?'#4caf50':'#ff6b6b'}">${matchedAspect.score}</td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                }
            });
            
            if(tbody.innerHTML === '') {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:10px; color:#888;">目前主要星體無顯著強相位</td></tr>';
            }

            document.getElementById('socialLuckScore').innerText = totalScore;
            let summary = "社會氣氛平穩";
            if(totalScore > 15) summary = "社會氣氛積極樂觀，利於擴張與合作。";
            else if(totalScore < -15) summary = "社會氣氛緊繃，易有衝突或壓力，宜保守。";
            document.getElementById('socialLuckSummary').innerText = summary;
        }

        // D3 Drawing
        function drawPlanets(data) {
            const svg = d3.select('#starChart');
            svg.selectAll('*').remove();
            const container = document.getElementById('starChart');
            const w = container.clientWidth;
            const h = container.clientHeight;
            const r = Math.min(w,h)/2 - 30;
            const cx = w/2, cy = h/2;
            
            // Draw Zodiac Ring (Simplified)
            svg.append('circle').attr('cx',cx).attr('cy',cy).attr('r',r).attr('fill','none').attr('stroke','rgba(255,255,255,0.1)').attr('stroke-width', 2);
            svg.append('circle').attr('cx',cx).attr('cy',cy).attr('r',r*0.66).attr('fill','none').attr('stroke','rgba(255,255,255,0.05)');
            svg.append('circle').attr('cx',cx).attr('cy',cy).attr('r',r*0.33).attr('fill','none').attr('stroke','rgba(255,255,255,0.05)');
            
            // Planets
            Object.entries(data).forEach(([name, deg]) => {
                // Adjust degree so 0 is usually at 3 o'clock or standard astro position (Aries at 9 o'clock often used, but here simple polar)
                // -90 puts 0 degrees at 12 o'clock. +0 puts 0 degrees at 3 o'clock.
                const rad = ((deg - 90) * Math.PI) / 180; 
                const x = cx + r * Math.cos(rad);
                const y = cy + r * Math.sin(rad);
                
                const g = svg.append('g')
                    .attr('transform', `translate(${x},${y})`)
                    .style('cursor', 'pointer');
                
                // Planet Circle
                let color = '#ffd700'; // Gold default
                if(name === 'Sun') color = '#ff6b6b';
                if(name === 'Moon') color = '#f0f0f0';
                if(name === 'Mars') color = '#ff4444';
                if(name === 'Saturn') color = '#a89f91';
                if(name === 'Venus') color = '#ffb7b2';
                
                g.append('circle')
                    .attr('r', name==='Moon'? 12 : 8)
                    .attr('fill', color)
                    .attr('stroke', 'rgba(0,0,0,0.5)')
                    .attr('stroke-width', 1);
                
                // Text Label
                g.append('text')
                    .text(name === 'Moon' ? '月' : planetChineseNames[name].charAt(0))
                    .attr('dy', 4)
                    .attr('text-anchor', 'middle')
                    .attr('fill', '#000')
                    .style('font-size', '10px')
                    .style('font-weight', 'bold');
                
                // Tooltip events
                g.on('mouseover', (e) => {
                   d3.select('#planetTooltip')
                     .style('opacity',1)
                     .html(`<strong>${planetChineseNames[name]} (${name})</strong><br>黃經: ${deg.toFixed(2)}°`);
                }).on('mousemove', (e) => {
                   d3.select('#planetTooltip')
                     .style('left',(e.pageX+15)+'px')
                     .style('top',(e.pageY-10)+'px'); 
                }).on('mouseout', () => {
                   d3.select('#planetTooltip').style('opacity',0);
                });
            });
        }

        function drawWuxingChart(pct) {
            const el = document.getElementById('wuxingChartContainer');
            el.innerHTML = ''; // Clear for D3
            
            const w = el.clientWidth;
            const h = el.clientHeight;
            const margin = {top: 10, right: 10, bottom: 20, left: 30};
            
            const svg = d3.select('#wuxingChartContainer').append('svg')
                .attr('width', w)
                .attr('height', h);
                
            const data = Object.entries(pct).map(([k,v]) => ({key:k, value:v}));
            
            const x = d3.scaleBand()
                .range([margin.left, w - margin.right])
                .padding(0.2)
                .domain(data.map(d => d.key));
                
            const y = d3.scaleLinear()
                .range([h - margin.bottom, margin.top])
                .domain([0, 100]); // Percent
                
            // Bars
            svg.selectAll('.bar')
                .data(data)
                .enter().append('rect')
                .attr('class', 'bar')
                .attr('x', d => x(d.key))
                .attr('width', x.bandwidth())
                .attr('y', d => y(d.value))
                .attr('height', d => h - margin.bottom - y(d.value))
                .attr('rx', 4);
                
            // Labels
            svg.selectAll('.label')
                .data(data)
                .enter().append('text')
                .attr('x', d => x(d.key) + x.bandwidth()/2)
                .attr('y', d => y(d.value) - 5)
                .attr('text-anchor', 'middle')
                .text(d => d.value + '%')
                .attr('fill', '#fff');
                
            // X Axis Labels
            svg.append('g')
                .attr('transform', `translate(0,${h - margin.bottom})`)
                .call(d3.axisBottom(x).tickSize(0))
                .select('.domain').remove();
        }

        function updateCrypto(pct) {
            const list = document.getElementById('cryptoList');
            list.innerHTML = '';
            
            // 找出最強的兩個屬性
            const sorted = Object.entries(pct).sort((a,b)=>b[1]-a[1]);
            const top1 = sorted[0][0];
            const top2 = sorted[1][0];
            
            const cryptoDb = {
                金: [
                    {n: 'Bitcoin (BTC)', desc: '交易量大，適合波動操作'},
                    {n: 'Litecoin (LTC)', desc: '支付概念，跟隨金價'}
                ],
                木: [
                    {n: 'Ethereum (ETH)', desc: '生態成長，合約擴展'},
                    {n: 'Solana (SOL)', desc: '新興公鏈，快速發展'}
                ],
                水: [
                    {n: 'XRP', desc: '流動性高，資訊敏感'},
                    {n: 'Chainlink (LINK)', desc: '數據流動，預言機'}
                ],
                火: [
                    {n: 'Dogecoin', desc: '社群熱度高，情緒主導'},
                    {n: 'Shiba Inu', desc: '爆發力強，風險亦高'}
                ],
                土: [
                    {n: 'USDT / USDC', desc: '穩定幣，避險首選'},
                    {n: 'Cardano (ADA)', desc: '學術穩健，長期持有'}
                ]
            };
            
            // 渲染函數
            const renderItem = (element, isPrimary) => {
                if(cryptoDb[element]) {
                    cryptoDb[element].forEach(c => {
                        const div = document.createElement('div');
                        div.style.background = 'rgba(255,255,255,0.05)';
                        div.style.padding = '10px';
                        div.style.borderRadius = '6px';
                        div.style.borderLeft = `4px solid ${isPrimary ? '#ffd37a' : '#888'}`;
                        div.innerHTML = `
                            <div style="display:flex; justify-content:space-between;">
                                <span style="font-weight:bold; color:${isPrimary?'#fff':'#ccc'}">${c.n}</span>
                                <span style="font-size:0.8em; background:${isPrimary?'#ffdf99':'#666'}; color:#000; padding:1px 6px; border-radius:4px;">${element}</span>
                            </div>
                            <div style="font-size:0.85em; color:#aaa; margin-top:4px;">${c.desc}</div>
                        `;
                        list.appendChild(div);
                    });
                }
            };
            
            renderItem(top1, true);
            if(top2 && sorted[1][1] > 20) { // 次要屬性強度夠才顯示
                renderItem(top2, false);
            }
        }

        function updateAdvice(suk, jie, moonPhase, pct, gz) {
            // 找出最強五行
            const sorted = Object.entries(pct).sort((a,b)=>b[1]-a[1]);
            const mainEl = sorted[0][0];
            
            // 干支日主
            const dayStem = gz.day.charAt(0);
            
            // 產生文字內容
            const workTheme = `宿曜[${suk.name}] · 節氣[${jie.name}] · 月相[${moonPhase}]`;
            let workText = `今日五行能量以【${mainEl}】為主導。`;
            if(mainEl==='木') workText += " 適合啟動新計畫、發想創意，有利於企劃與設計類工作。";
            else if(mainEl==='火') workText += " 行動力強，執行效率高，但需避免衝動決策與人爭執。";
            else if(mainEl==='土') workText += " 適合處理例行公事、整理文件與鞏固基礎，步調宜穩健。";
            else if(mainEl==='金') workText += " 適合談判、決策與釐清規則，思緒清晰但稍顯冷硬。";
            else if(mainEl==='水') workText += " 適合溝通協調、收集資訊與市場調查，靈活應變。";
            workText += ` 日干為${dayStem}，請留意今日能量與自身日主的生剋關係。`;
            
            const wealthTheme = `主導能量：${mainEl} (${pct[mainEl]}%)`;
            let wealthText = "";
            if(mainEl === '金' || mainEl === '土') wealthText = "財運能量相對穩健，適合評估長期投資或進行資產配置。";
            else if(mainEl === '火') wealthText = "市場波動可能較大，短線機會多但風險亦高，操作宜謹慎。";
            else wealthText = "財運平平，宜保守理財，減少不必要的衝動消費。";
            
            const relTheme = `情感氛圍：${mainEl==='水'?'感性流動':mainEl==='火'?'熱情奔放':'理性務實'}`;
            let relText = "";
            if(mainEl === '水' || mainEl === '火') relText = "情感交流順暢，適合約會或深度對話，容易產生共鳴。";
            else if(mainEl === '金') relText = "溝通趨於理性，適合解決現實問題，但可能缺乏浪漫情調。";
            else relText = "關係穩定平淡，適合居家活動或享受平靜時光。";
            
            const healthTheme = `養生重點：${jie.name}前後`;
            let healthText = `五行${mainEl}旺。`;
            if(mainEl === '木') healthText += " 留意肝膽保養，適度伸展放鬆筋骨，避免過度勞累。";
            else if(mainEl === '火') healthText += " 注意心血管與血壓，保持情緒平和，避免熬夜。";
            else if(mainEl === '土') healthText += " 留意脾胃消化系統，飲食宜清淡規律。";
            else if(mainEl === '金') healthText += " 注意呼吸道與皮膚保養，多喝水潤肺。";
            else if(mainEl === '水') healthText += " 留意腎臟與泌尿系統，注意保暖防寒。";

            document.getElementById('workTheme').innerText = workTheme;
            document.getElementById('workAdvice').innerText = workText;
            document.getElementById('wealthTheme').innerText = wealthTheme;
            document.getElementById('wealthAdvice').innerText = wealthText;
            document.getElementById('relationshipTheme').innerText = relTheme;
            document.getElementById('relationshipAdvice').innerText = relText;
            document.getElementById('healthTheme').innerText = healthTheme;
            document.getElementById('healthAdvice').innerText = healthText;
        }

        async function updateWeather(lat, lon) {
            try {
                // 使用 Open-Meteo 免費 API
                const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);
                const data = await res.json();
                
                if(data && data.current_weather) {
                    const w = data.current_weather;
                    document.getElementById('windSpeed').innerText = w.windspeed + ' km/h';
                    // 簡單的天氣代碼轉換
                    const codes = {0:'晴朗', 1:'多雲', 2:'陰', 3:'陰', 45:'霧', 51:'毛毛雨', 61:'雨', 71:'雪', 95:'雷雨'};
                    const desc = codes[w.weathercode] || '未知';
                    document.getElementById('weatherDescription').innerText = `${desc} (Code:${w.weathercode})`;
                    document.getElementById('cloudCover').innerText = 'API未提供'; // OpenMeteo basic doesn't force cloudcover in simple view sometimes
                }
            } catch(e) { 
                console.log('Weather fetch failed', e); 
                document.getElementById('weatherDescription').innerText = "無法取得";
            }
        }

        // Inner Tabs Logic (File A)
        document.querySelectorAll('.inner-tab-button').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.inner-tab-button').forEach(b => b.classList.remove('active'));
                document.querySelectorAll('.advice-panel').forEach(p => p.classList.remove('active'));
                btn.classList.add('active');
                document.getElementById(`${btn.dataset.tab}Panel`).classList.add('active');
            });
        });

        // 複製報告功能
        document.getElementById('copyReportBtn').addEventListener('click', () => {
             const t1 = document.getElementById('workAdvice').innerText;
             const t2 = document.getElementById('socialLuckSummary').innerText;
             const t3 = document.getElementById('ganzhi').innerText;
             const text = `【星象運勢報告】\n${t3}\n\n社會氣運：${t2}\n\n工作建議：${t1}\n\n(由系統自動生成)`;
             navigator.clipboard.writeText(text).then(()=>alert("報告已複製！"));
        });

        // =========================================================
        // PART 2: 筆劃字典邏輯 (star_word.html 完整功能)
        // =========================================================
        
        class DictionaryManager {
            constructor(url, name) { this.url = url; this.name = name; this.data = null; this.isLoaded = false; }
            async load(updateStatus, maxRetries = 3) {
                this.isLoaded = false;
                for (let i = 0; i < maxRetries; i++) {
                    const attempt = i + 1;
                    updateStatus(`🟡 正在下載 ${this.name}... (第 ${attempt} 次嘗試)`);
                    try {
                        const res = await fetch(this.url);
                        if (!res.ok) throw new Error(`HTTP ${res.status}`);
                        this.data = await res.json();
                        this.isLoaded = true;
                        
                        // 計算資料筆數供顯示
                        let count = 0;
                        if (Array.isArray(this.data)) count = this.data.length;
                        else if (typeof this.data === 'object') {
                            count = Object.keys(this.data).length;
                        }
                        updateStatus(`✅ ${this.name} 載入成功！ (共 ${count} 筆記錄)`, { totalInternalCount: count });
                        return true;
                    } catch (e) {
                        if (i === maxRetries - 1) {
                            updateStatus(`❌ ${this.name} 載入失敗: ${e.message}`, null);
                            console.error(e);
                            return false;
                        }
                        // Retry delay
                        await new Promise(r => setTimeout(r, 1000 * Math.pow(2, i)));
                    }
                }
            }
            getData() { return this.data; }
            isReady() { return this.isLoaded; }
        }

        class WordStrokeCalculator {
            constructor() {
                // 使用 Max 的中文字典
                this.dictManager = new DictionaryManager(
                    "https://raw.githubusercontent.com/max32002/chinese_dictionary/0db111bb3dbe335a956732413557a710ef6901dc/Dictionary.json",
                    "中文字典 (CJK)"
                );
            }
            async loadDictionary(cb) { return await this.dictManager.load(cb); }
            calculateStrokeCount(text) {
                if (!this.dictManager.isReady()) throw new Error("字典尚未就緒");
                
                const dict = this.dictManager.getData();
                let total=0, cjk=0, alpha=0, digit=0, valid=0, allFound=true;
                
                for (const char of text) {
                    // CJK 範圍判斷
                    if ((/[\u4E00-\u9FFF\u3400-\u4DBF]/.test(char))) {
                        const info = dict[char];
                        if (info) {
                            // 優先取 stroke_count, 備用 strokes_total
                            const s = info.stroke_count || info.strokes_total || 0;
                            total += s; cjk += s; valid++;
                        } else {
                            allFound = false; // 字典查不到該字
                        }
                    } 
                    // 英文字母 (A=1, B=2...)
                    else if (/[a-zA-Z]/.test(char)) {
                        const s = char.toUpperCase().charCodeAt(0) - 64;
                        total += s; alpha += s; valid++;
                    } 
                    // 數字 (直接加總數值)
                    else if (/[0-9]/.test(char)) {
                        const s = parseInt(char, 10);
                        total += s; digit += s; valid++;
                    }
                }
                return { totalStrokeCount: total, totalCJK: cjk, totalALPHA: alpha, totalDIGIT: digit, allFound, validCharCount: valid };
            }
        }

        class StarDictManager {
            constructor() {
                this.dictManager = new DictionaryManager(
                    "https://raw.githubusercontent.com/orlandotigereye/Analy13/refs/heads/main/astrology_merged.json",
                    "星象字典"
                );
            }
            async loadAstroDictionary(cb) { return await this.dictManager.load(cb); }
        }

        // AppController (Exposed to window for HTML buttons)
        window.AppController = {
            wordModule: new WordStrokeCalculator(),
            starModule: new StarDictManager(),
            
            setCjkLoadingState(isLoading, isSuccess, msg) {
                const overlay = document.getElementById('cjkLoadingOverlay');
                const text = document.getElementById('cjkLoadingText');
                const retry = document.getElementById('cjkRetryButton');
                const input = document.getElementById('charInput1');
                const btn = document.getElementById('lookupButton');
                const resultText = document.getElementById('strokeResultText');

                if(isLoading) {
                    overlay.classList.remove('hidden');
                    text.textContent = msg;
                    retry.classList.add('hidden');
                    input.disabled = true; btn.disabled = true;
                } else if(isSuccess) {
                    overlay.classList.add('hidden');
                    resultText.innerHTML = `<span class="text-green-600 font-bold">${msg}</span>`;
                    input.disabled = false; btn.disabled = false;
                } else {
                    text.innerHTML = `<span class="text-red-500">${msg}</span>`;
                    retry.classList.remove('hidden');
                }
            },

            async handleCjkLoad() {
                this.setCjkLoadingState(true, false, "正在下載中文字典...");
                const success = await this.wordModule.loadDictionary(s => {
                    if(s.includes('失敗')) document.getElementById('cjkLoadingText').textContent = s;
                });
                if(success) this.setCjkLoadingState(false, true, "字典就緒，請輸入文字開始計算。");
                else this.setCjkLoadingState(false, false, "字典下載失敗，請檢查網路。");
            },

            retryLoadCjkDict() { this.handleCjkLoad(); },

            handleAstroLoadStatus(msg, info) {
                const box = document.getElementById('astroStatusBox');
                const text = document.getElementById('astroStatusText');
                const retry = document.getElementById('astroRetryButton');
                const urlDisp = document.getElementById('astroUrlDisplay');
                
                urlDisp.textContent = "https://raw.githubusercontent.com/.../astrology_merged.json";
                text.innerHTML = msg;
                if(msg.includes('成功')) {
                    box.className = box.className.replace('border-primary-blue/50', 'border-green-500');
                    retry.classList.add('hidden');
                } else if(msg.includes('失敗')) {
                    box.className = box.className.replace('border-primary-blue/50', 'border-red-500');
                    retry.classList.remove('hidden');
                }
            },

            retryLoadAstroDict() {
                this.starModule.loadAstroDictionary(this.handleAstroLoadStatus.bind(this));
            },

            switchTab(tab) {
                const sBtn = document.getElementById('tab-stroke-button');
                const aBtn = document.getElementById('tab-astrology-button');
                const sTab = document.getElementById('stroke-tab');
                const aTab = document.getElementById('astrology-tab');
                
                if(tab === 'stroke') {
                    sBtn.classList.add('active-tab'); sBtn.classList.remove('inactive-tab');
                    aBtn.classList.remove('active-tab'); aBtn.classList.add('inactive-tab');
                    sTab.classList.remove('hidden'); aTab.classList.add('hidden');
                } else {
                    aBtn.classList.add('active-tab'); aBtn.classList.remove('inactive-tab');
                    sBtn.classList.remove('active-tab'); sBtn.classList.add('inactive-tab');
                    aTab.classList.remove('hidden'); sTab.classList.add('hidden');
                }
            },

            lookupStrokeCount() {
                try {
                    const t1 = document.getElementById('charInput1').value.trim();
                    const res1 = t1 ? this.wordModule.calculateStrokeCount(t1) : null;
                    
                    const t2raw = document.getElementById('charInput2').value;
                    const parts = t2raw.split('@');
                    const t2a = (parts[0]||'').trim().replace(/\s+/g,'');
                    const t2b = (parts[1]||'').trim().replace(/\s+/g,'');
                    const res2a = this.wordModule.calculateStrokeCount(t2a);
                    const res2b = this.wordModule.calculateStrokeCount(t2b);

                    this.displayResults(res1, t1, res2a, t2a, res2b, t2b);
                } catch(e) { console.error(e); alert("計算錯誤：" + e.message); }
            },

            displayResults(r1, t1, r2a, t2a, r2b, t2b) {
                const box = document.getElementById('strokeResultBox');
                box.innerHTML = '';
                
                const card = (res, title, txt, col) => {
                    if(!res) return `<div class="p-4 text-center text-gray-400 bg-gray-50 rounded-lg border border-dashed border-gray-300">請在左側輸入文字</div>`;
                    
                    const statusIcon = res.allFound ? '✅' : '⚠️';
                    const statusText = res.allFound ? '全部字元已找到' : '部分字元未找到(略過)';
                    
                    return `
                        <div class="p-4 border rounded-xl bg-white shadow-sm hover:shadow-md transition-shadow duration-300 w-full mb-4">
                            <div class="flex justify-between items-center border-b pb-2 mb-2">
                                <span class="text-sm font-bold text-gray-700">${title}</span> 
                                <span class="text-xs font-mono text-gray-500 bg-gray-100 px-2 py-1 rounded truncate max-w-[120px]" title="${txt}">${txt}</span>
                            </div>
                            <div class="text-center py-3">
                                <div class="text-4xl font-extrabold ${col}">${res.totalStrokeCount}</div>
                                <div class="text-xs text-gray-400 mt-1 uppercase tracking-wide">Total Strokes</div>
                            </div>
                            <div class="grid grid-cols-3 gap-1 text-center text-xs text-gray-600 bg-gray-50 p-2 rounded-lg mt-2">
                                <div><span class="block font-bold text-char-cjk">${res.totalCJK}</span>中</div>
                                <div><span class="block font-bold text-char-alpha">${res.totalALPHA}</span>英</div>
                                <div><span class="block font-bold text-char-digit">${res.totalDIGIT}</span>數</div>
                            </div>
                            <div class="mt-2 text-center text-xs ${res.allFound?'text-green-600':'text-orange-500'}">
                                ${statusIcon} ${statusText}
                            </div>
                        </div>
                    `;
                };

                let html = `<div class="w-full">`;
                // 主要結果
                html += card(r1, "輸入字串 1 (自訂)", t1, "text-primary-blue");
                
                // 固定拆分結果
                html += `<div class="flex items-center my-4"><div class="flex-grow border-t border-gray-200"></div><span class="flex-shrink-0 mx-4 text-gray-400 text-xs">固定拆分對照</span><div class="flex-grow border-t border-gray-200"></div></div>`;
                
                html += `<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">`;
                html += card(r2a, "字串 2a (左)", t2a, "text-green-600");
                html += card(r2b, "字串 2b (右)", t2b, "text-accent-orange");
                html += `</div></div>`;
                
                box.innerHTML = html;
            },

            init() {
                // 初始化字典
                this.handleCjkLoad();
                this.starModule.loadAstroDictionary(this.handleAstroLoadStatus.bind(this));
                
                // 綁定輸入框 Enter 鍵
                document.getElementById('charInput1').addEventListener('keypress', e => {
                    if(e.key==='Enter') this.lookupStrokeCount();
                });
            }
        };

        // ---------------------------------------------------------
        // 系統啟動 (System Boot)
        // ---------------------------------------------------------
        
        // 1. 設定日期輸入框為現在時間
        const now = new Date();
        const dateStr = now.toISOString().split('T')[0];
        const timeStr = now.toTimeString().split(' ')[0].substring(0, 5); // HH:MM
        
        const dateInput = document.getElementById('birthDate');
        const timeInput = document.getElementById('birthTime');
        
        if(dateInput && timeInput) {
            dateInput.value = dateStr;
            timeInput.value = timeStr;
        }

        // 2. 執行初始計算 (Star Module)
        refreshAll(); 
        
        // 3. 執行字典初始化 (Word Module)
        window.AppController.init(); 

        // 綁定主刷新按鈕
        document.getElementById('refreshBtn').addEventListener('click', refreshAll);
    </script>
  </body>
</html>