LLM 輔助分析頁排版一致化 + 首頁產品名稱重新設計

- 補齊 LLM 報告頁（#canvas_report）markdown 的 h1/h2/h5/h6/表格/水平線/
引言區塊樣式，原本只有 h3/h4 有樣式，字級與其他頁面不一致、表格吃瀏覽器
預設白框
- 修 .txt 報告開頭 "="*60 分隔線被 Markdown 誤判成 Setext 標題底線、把
研究情境/時間吃成巨大無樣式標題的 bug，改用正規 --- 分隔線
- 加強報告 LLM prompt 格式規範，明確要求用 ##/#### 標題語法而非粗體字充當
標題
- 補齊 .nav-col/.chat-col 右邊框、報告頁標題底線在深色模式下太淡的問題
（沿用 .app-header 之前的修法），並修正 Gradio 對 ".dark A, .dark B"
逗號並列選擇器加容器前綴時的既有 bug（拆成各自獨立規則）
- 首頁產品名稱重新設計：「譯彩紛呈：重譯文本分析系統」（系列名稱）降級為
副標，「II 分析引擎 SpectraEngine」（子產品名稱）升級為大標題＋漸層字，
頂部工作區標題同步更新
- 「讀取進度」連結視覺上改為 enabled 樣式（功能仍未開發，點擊無作用）

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JpXMpgHnw5YkEfyeUYt4dy

app_agent.py

@@ -289,6 +289,12 @@ SYSTEM_PROMPT_BASE = """# 角色定義
 【量化分析結果】：（見 user message 中的 JSON 資料）
 【使用者補充關注點】：{user_focus}
 
+# 格式規範（務必嚴格遵守，直接影響報告的可讀性）
+1. 以下「通用輸出結構」中 `## 一、`、`## 三、`、`## 四、` 這幾個章節標題，輸出時必須原樣保留 `## ` 這個 Markdown 標題語法開頭，不可改寫成「**粗體**」或其他格式。
+2. 章節內若需要子標題或小節提示語（例如「總體事實」「觀察」「結論」之類的段落標籤），一律使用 `#### ` 開頭的四級標題語法，不可用「**粗體**」取代標題。
+3. `**粗體**` 只能用於一般敘述中的強調字詞，不可整行只放一個粗體片語來充當標題。
+4. 表格請使用標準 Markdown 表格語法（`| 欄位 | 欄位 |` 搭配 `|---|---|` 分隔列）。
+
 # 通用輸出結構
 輸出必須包含以下四個區塊，缺一不可：
 
@@ -1317,7 +1323,12 @@ def run_report_writing(scenario_key: str, user_metadata: str, user_focus: str,
     with open(str(txt_path), 'w', encoding='utf-8') as f:
         f.write(f"研究情境：{scenario_info['title']}\n")
         f.write(f"時間：{now_tw().strftime('%Y-%m-%d %H:%M:%S')}（台灣時間）\n")
-        f.write("=" * 60 + "\n\n")
+        # 2026-07-27：原本用 "="*60 當純文字分隔線，但緊接在上兩行文字正下方，
+        # 符合 Markdown Setext 標題語法（文字正上方接一整行 = 會被解讀成 h1
+        # 底線），導致這兩行 metadata 被渲染成巨大無樣式標題。改成前面留空行
+        # 再接 "---"，變成正規的 <hr> 分隔線（已有 CSS 樣式），純文字閱讀也
+        # 不受影響。
+        f.write("\n---\n\n")
         f.write(result_text)
 
     return {
@@ -1467,7 +1478,7 @@ def _build_header_html(done_steps: list = None, current_step: int = None,
 
     return (
         '<div class="app-header">'
-        '  <p class="title-line">譯彩紛呈 <span class="en">SpectraEngine</span></p>'
+        '  <p class="title-line">譯彩紛呈 <span class="en">II</span> 分析引擎 <span class="en">SpectraEngine</span></p>'
         f'  <div class="steps">{"".join(pills)}</div>'
         '</div>'
     )
@@ -2090,6 +2101,30 @@ footer {
 @media (prefers-color-scheme: dark) {
     :root:not(.light) .app-header { border-bottom-color: rgba(148, 163, 184, .28) !important; }
 }
+/* 2026-07-27：.nav-col/.chat-col 右邊框、標題（h1/h2/h3）底線跟 .app-header
+   底線同一個問題（--c-border 深色模式太淡，rgba(14,165,233,.11)），當初只
+   修了 .app-header 沒有回頭修這幾處，這次比照同一個做法補齊、不動共用
+   token 本身（避免牽動其他 24 處用到 --c-border 的地方）。 */
+/* 注意：Gradio 會自動幫 CSS 選擇器加容器前綴，這個機制處理「.dark A, .dark B」
+   這種逗號並列、且每個分支都以 .dark 開頭的選擇器時有 bug——只有第一個分支
+   前綴正確，後面每個分支都被錯誤地多插一次 .dark（變成需要兩層 .dark 祖先
+   才能匹配，永遠選不到東西，等於整條規則除了第一分支都是死的）。已用瀏覽器
+   實測到這個 Gradio 6.20.0 的行為，之後任何 .dark 開頭的規則要並列多個
+   選擇器，都要拆成一條一個選擇器，不要用逗號合併。 */
+.dark .nav-col { border-right-color: rgba(148, 163, 184, .28) !important; }
+.dark .chat-col { border-right-color: rgba(148, 163, 184, .28) !important; }
+.dark #canvas_report .prose h1 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+.dark #canvas_report .md h1 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+.dark #canvas_report .prose h2 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+.dark #canvas_report .md h2 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+.dark .prose h3 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+.dark .md h3 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+@media (prefers-color-scheme: dark) {
+    :root:not(.light) .nav-col, :root:not(.light) .chat-col { border-right-color: rgba(148, 163, 184, .28) !important; }
+    :root:not(.light) .prose h1, :root:not(.light) .md h1,
+    :root:not(.light) .prose h2, :root:not(.light) .md h2,
+    :root:not(.light) .prose h3, :root:not(.light) .md h3 { border-bottom-color: rgba(148, 163, 184, .28) !important; }
+}
 /* 注意：這三個選擇器的漸層文字底色（background-image: linear-gradient(...var()...)）
    改在 launch(head=...) 注入的 <style> 裡設定（見 _DARK_MODE_HEAD_CSS）——
    這裡只保留其餘不受影響的樣式（字型、間距等）。
@@ -2728,17 +2763,28 @@ div[role="log"][aria-label="chatbot conversation"],
 .homepage-hero .kicker::before, .homepage-hero .kicker::after {
     content: ""; width: 28px; height: 1px; background: var(--c-border-hover);
 }
+/* 2026-07-27：老師確認「譯彩紛呈：重譯文本分析系統」是大系���品牌名稱，
+   這一款子產品其實叫「II 分析引擎 SpectraEngine」——原本大系列名稱佔用
+   最大最搶眼的 h1+漸層，子產品名反而縮在最小的一行，跟實際定位相反。
+   重新分配視覺權重：大系列名稱降級成小字（series-name），子產品名稱升級
+   成 h1 大標題＋漸層。 */
+.homepage-hero .series-name {
+    margin: .9rem 0 .1rem; font-size: .95rem; font-weight: 600;
+    color: var(--c-text-soft);
+}
+.homepage-hero .subtitle { margin: 0 0 1.1rem; font-size: .85rem; color: var(--c-text-muted); }
 .homepage-hero h1 {
-    margin: 1rem 0 .6rem; font-size: 2.1rem; line-height: 1.3; font-weight: 700;
+    margin: 0 0 .6rem; font-size: 2.1rem; line-height: 1.3; font-weight: 700;
     /* 同 .app-header .title-line 的漸層文字踩坑（見 _DARK_MODE_HEAD_CSS 上方註解）：
        background 簡寫在瀏覽器展開成子屬性時 background-image 會解析成
-       空值，改直接寫 background-image 這個子屬性本身即可 */
+       空值，改直接寫 background-image 這個子屬性本身即可。這裡進一步採用
+       .app-header .title-line 已驗證過、支援巢狀 <span class="en"> 的寫法
+       （-webkit-text-fill-color 會被子元素繼承，color:transparent 單獨用
+       在有巢狀 span 時未實測過是否可靠，兩個都寫上比較保險）。 */
     background-image: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent2) 90%);
-    -webkit-background-clip: text; background-clip: text; color: transparent;
+    -webkit-background-clip: text; background-clip: text;
+    color: transparent; -webkit-text-fill-color: transparent;
 }
-.homepage-hero .subtitle { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--c-text-muted); }
-.homepage-hero .engine-line { margin: 0; font-size: .95rem; font-weight: 600; color: var(--c-text-soft); }
-.homepage-hero .engine-line .en { color: var(--c-accent-strong); }
 .homepage-hero .lede {
     margin: 1.8rem 0 0; text-align: left; font-size: var(--font-size-base);
     line-height: 1.8; color: var(--c-text-muted);
@@ -2772,9 +2818,10 @@ div[role="log"][aria-label="chatbot conversation"],
 .homepage-secondary { display: flex; justify-content: center; margin-top: 2rem; }
 .homepage-secondary .placeholder-link {
     display: inline-flex; align-items: center; gap: .4rem;
-    font-size: var(--font-size-base); color: var(--c-text-subtle); cursor: not-allowed;
+    font-size: var(--font-size-base); color: var(--c-accent); cursor: pointer;
 }
-.homepage-secondary .placeholder-link svg { width: 1rem; height: 1rem; opacity: .6; }
+.homepage-secondary .placeholder-link:hover { text-decoration: underline; }
+.homepage-secondary .placeholder-link svg { width: 1rem; height: 1rem; opacity: 1; }
 .homepage-footnote { margin-top: 2rem; text-align: center; font-size: .82rem; color: var(--c-text-subtle); }
 @media (prefers-reduced-motion: reduce) { .scenario-card { transition: none; } }
 
@@ -3548,8 +3595,95 @@ table tbody tr:hover td { background: rgba(var(--c-accent-rgb),.08) !important;
     font-size: 0.82em;
 }
 .prose ul li, .md ul li { color: var(--c-text-soft); line-height: 1.75; }
+.prose ol li, .md ol li { color: var(--c-text-soft); line-height: 1.75; }
 .prose p { line-height: 1.75; color: var(--c-text-soft); }
 
+/* h1/h2/h5/h6/表格/hr/blockquote 補齊——原本只有 h3/h4 有樣式，LLM 報告等
+   自由格式 Markdown 若真的輸出到這幾個標題等級會吃到瀏覽器預設樣式。
+   刻意只 scope 在 #canvas_report（LLM 輔助分析頁），不像 h3/h4 沿用全站
+   .prose/.md 泛用寫法：踩過一次坑才發現 gr.HTML() 元件外層也會被 Gradio
+   包一層 .prose class（不是只有 gr.Markdown() 才有），首頁標題就是用
+   gr.HTML() 寫死的 <h1>，全站套用 h1 樣式會蓋掉首頁標題自己的漸層字設計
+   （color: transparent 被這裡的 color:...!important 蓋掉）。 */
+#canvas_report .prose h1, #canvas_report .md h1 {
+    font-family: 'Crimson Pro', Georgia, serif !important;
+    font-size: 1.6rem !important;
+    font-weight: 700 !important;
+    color: var(--c-text) !important;
+    border-bottom: 1px solid var(--c-border);
+    padding-bottom: 0.5rem;
+    margin: 1.6rem 0 .9rem !important;
+}
+#canvas_report .prose h2, #canvas_report .md h2 {
+    font-family: 'Crimson Pro', Georgia, serif !important;
+    font-size: 1.4rem !important;
+    font-weight: 600 !important;
+    color: var(--c-text) !important;
+    border-bottom: 1px solid var(--c-border);
+    padding-bottom: 0.45rem;
+    margin: 1.5rem 0 .8rem !important;
+}
+#canvas_report .prose h5, #canvas_report .md h5 {
+    font-family: 'Crimson Pro', Georgia, serif !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    color: var(--c-text-muted) !important;
+    margin: 1rem 0 .4rem !important;
+}
+#canvas_report .prose h6, #canvas_report .md h6 {
+    font-size: 0.78rem !important;
+    font-weight: 700 !important;
+    color: var(--c-text-subtle) !important;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    margin: .8rem 0 .3rem !important;
+}
+
+/* 表格——原本完全沒樣式，LLM 報告的表格吃瀏覽器預設白色框線，深色主題下很刺眼 */
+#canvas_report .prose table, #canvas_report .md table {
+    width: 100%; border-collapse: collapse; margin: 1rem 0;
+    font-size: 0.82rem;
+}
+#canvas_report .prose th, #canvas_report .md th,
+#canvas_report .prose td, #canvas_report .md td {
+    border: 1px solid var(--c-border);
+    padding: .5rem .75rem; text-align: left;
+    color: var(--c-text-soft);
+}
+#canvas_report .prose th, #canvas_report .md th {
+    background: rgba(var(--c-accent-rgb),.08);
+    color: var(--c-text); font-weight: 700;
+}
+#canvas_report .prose tr:nth-child(even) td, #canvas_report .md tr:nth-child(even) td { background: var(--c-surface2); }
+
+/* 水平線——原本完全沒樣式，吃瀏覽器預設 */
+#canvas_report .prose hr, #canvas_report .md hr { border: none; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }
+
+/* 引言區塊（LLM 報告常用 > 標出結論/總結） */
+#canvas_report .prose blockquote, #canvas_report .md blockquote {
+    border-left: 3px solid var(--c-accent);
+    padding: .6rem 1rem; margin: 1rem 0;
+    background: rgba(var(--c-accent-rgb),.05);
+    color: var(--c-text-soft); font-style: normal;
+}
+#canvas_report .prose blockquote p, #canvas_report .md blockquote p { margin: 0; }
+
+/* LLM 報告頁專用：模型常把「章節標題」寫成整行粗體而非真正的 ##/### 語法，
+   CSS 選不出「這行粗體是標題」還是「句中強調」，只能用「整行只有一顆粗體」
+   這個結構特徵做近似辨識，並非真正標題樣式的替代品 */
+#canvas_report .md p:has(> strong:only-child),
+#canvas_report .prose p:has(> strong:only-child) {
+    font-family: 'Crimson Pro', Georgia, serif;
+    font-size: 1.15rem; font-weight: 600;
+    color: var(--c-text);
+    margin: 1.4rem 0 .6rem;
+}
+/* 報告開頭「研究情境／時間」metadata 兩行，視覺上當副標題處理 */
+#canvas_report .md > p:first-of-type,
+#canvas_report .prose > p:first-of-type {
+    color: var(--c-text-muted); font-size: 0.85rem; margin-bottom: 1rem;
+}
+
 /* ── 12. LABELS ────────────────────────────────────────────────── */
 /* 排除 Radio／Checkbox 選項的 <label><input>...<span>選項文字</span></label>：
    這些「藥丸」本身有自己的底色（未選中時剛好跟 --c-text-subtle 深色版同一種
@@ -4243,9 +4377,9 @@ def _build_homepage_html() -> str:
         '<div class="homepage-col">'
         '<div class="homepage-hero">'
         '<span class="kicker">重譯文本量化分析平台</span>'
-        '<h1>譯彩紛呈：重譯文本分析系統</h1>'
+        '<p class="series-name">譯彩紛呈：重譯文本分析系統</p>'
         '<p class="subtitle en">TransPrism: An Analytical Framework for Retranslation</p>'
-        '<p class="engine-line"><span class="en">II</span> 分析引擎 <span class="en">SpectraEngine</span></p>'
+        '<h1><span class="en">II</span> 分析引擎 <span class="en">SpectraEngine</span></h1>'
         '<p class="lede">上傳已斷詞的譯本文本，系統將自動計算 <span class="en">75</span> 項語言指標並進行統計分析，'
         '協助您完成重譯研究的量化論證。請先選擇最符合您研究設計的比較情境：</p>'
         '</div>'
@@ -5437,7 +5571,7 @@ if __name__ == "__main__":
     app.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=False,
+        share=True,
         inbrowser=False,
         allowed_paths=[str(SESSIONS_DIR)],
         head=_APP_HEAD,