步驟列收斂 8 步 → 6 步 + 導覽列與頁殼視覺調整

步驟列：
- _STEPS 改為 文本上傳／格式驗證／語料說明／指標計算／統計分析／報告產出
- 移除的 4 步都不帶資訊：情境選擇已搬到首頁、上傳引導與文本上傳在同一個
generator 內連續完成、報告撰寫與下載成果本來就寫在同一行一起標記
- 新增「語料說明」步驟，修正填表期間步驟列誤亮「指標計算 進行中」
- failed_step 5,6 → 4,5；_COMPUTING_STEP_LABELS key 5,6,7 → 4,5,6
- 格式驗證失敗退回重傳時，一併把該步從 done_steps 移除（原本只設
current_step，_build_header_html 判斷順序 done > current，步驟列會停在
「✓ 文本上傳」與畫面要求補傳自相矛盾）
- 全部完成後步驟列整條隱藏，只留產品名

視覺：
- 頂部列扁平化（去框線／漸層／圓角，只留 1px 下邊框，產品名與步驟列改上下兩行）
- .upload-zone／.metadata-zone 去框線／陰影／底色
- .nav-col／.chat-col 各加 border-right
- 導覽列改 Bootstrap 5.3 nav-underline 垂直版（選取項左緣 2px 主色線）
- 統計比較分析 4 個子頁改一般項目＋各配圖示、左緣齊平，手風琴預設展開
- 主項目 .result-nav-btn 改用 #result_nav_col 祖先提高 specificity，蓋掉
Gradio 的 button.svelte-xxx.secondary 預設框線（子項目先前已修，主項目漏了）
- 新增 table-cells／scale／academic-cap／squares-2x2 四個 Heroicons 圖示

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

app_agent.py

@@ -1379,15 +1379,20 @@ def make_initial_state(session_id: str) -> dict:
 
 
 
+# 2026-07-23 步驟列收斂：原本 8 步裡有 4 步不帶資訊——①情境選擇在 Phase 8-A
+# 搬去首頁後，使用者在工作區看到的是別的畫面做完的事；①② 在同一個 generator
+# 內連續完成，中間沒有任何使用者動作；⑦⑧ 本來就寫死在同一行一起標記（下載
+# 成果不是獨立運算階段）。同時補上原本完全沒有步驟的「語料說明」表單——先前
+# 格式驗證通過就直接把 current_step 設成「指標計算」，導致使用者在填表的整段
+# 期間，步驟列都亮著「指標計算 進行中」的呼吸動畫，畫面在說電腦正在算，實際
+# 上是在等人填表。收斂後每一步都對應一件使用者感知得到的事。
 _STEPS = [
-    (1, "情境選擇"),
-    (2, "上傳引導"),
-    (3, "文本上傳"),
-    (4, "格式驗證"),
-    (5, "指標計算"),
-    (6, "統計分析"),
-    (7, "報告撰寫"),
-    (8, "下載成果"),
+    (1, "文本上傳"),
+    (2, "格式驗證"),
+    (3, "語料說明"),
+    (4, "指標計算"),
+    (5, "統計分析"),
+    (6, "報告產出"),
 ]
 
 
@@ -1405,6 +1410,17 @@ def _build_header_html(done_steps: list = None, current_step: int = None,
                  使用者容易誤以為系統還在運算而手滑刷新頁面）
     """
     done_steps = done_steps or []
+
+    # 全部完成後整條步驟列收起來，把畫面高度讓給結果內容——此時瀏覽結果的
+    # 角色已經交接給左側結果導覽（空間型），時間軸型的步驟列講完它要講的事
+    # 就沒有存在必要。失敗時例外：步驟列要留著標示卡在哪一步。
+    if failed_step is None and all(num in done_steps for num, _ in _STEPS):
+        return (
+            '<div class="app-header">'
+            '  <p class="title-line">譯彩紛呈 <span class="en">SpectraEngine</span></p>'
+            '</div>'
+        )
+
     pills = []
     for num, name in _STEPS:
         if num == failed_step:
@@ -1446,8 +1462,9 @@ def handle_scenario_select(user_input: str, state: dict):
     sc_num = m.group()
     sc_info = SCENARIOS[sc_num]
     state["scenario"] = sc_num
-    state["done_steps"] = [1]
-    state["current_step"] = 2
+    # 情境選擇本身已不是步驟列的一步（在首頁完成），選完直接站上「文本上傳」
+    state["done_steps"] = []
+    state["current_step"] = 1
 
     # 固定文字，不經 LLM：確保每次措辭一致，並直接引導使用者去看上傳卡片裡的
     # 格式要求，不需要另外由工作程序 Agent 生成一則重複格式細節的引導訊息
@@ -1598,7 +1615,7 @@ def run_computation_pipeline_streaming(state: dict):
         yield f"  [OK] 指標計算完成（{len(idx_df)} 個文本）", False, state
     except Exception as e:
         state["state"] = "COMPLETE"
-        state["failed_step"] = 5
+        state["failed_step"] = 4
         yield f"[ERROR] 指標計算失敗：{e}\n\n請重新整理頁面，重新開始分析。", True, state
         return
 
@@ -1623,7 +1640,7 @@ def run_computation_pipeline_streaming(state: dict):
     except Exception as e:
         state["state"] = "COMPLETE"
         state["output_files"] = results_paths
-        state["failed_step"] = 6
+        state["failed_step"] = 5
         yield f"[ERROR] 統計分析失敗：{e}\n\n請重新整理頁面，重新開始分析。", True, state
         return
 
@@ -1941,18 +1958,22 @@ footer {
 .md { display: block !important; }
 
 /* ── 2. HEADER（卡片化，2026-07-23 精簡成單行）───────────────────── */
+/* 2026-07-23 千卉實機回饋：原本整塊是「有外框＋漸層底色＋圓角」的卡片，
+   看起來像一個獨立區塊漂在畫面上方。改成完全扁平：拿掉外框、底色、圓角，
+   只留一條下邊框當工作區的水平分界；產品名與步驟列改上下兩行。 */
 .app-header {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
     gap: .9rem;
     text-align: left;
-    padding: .85rem 1.25rem;
+    padding: 1.5rem 1.25rem 1.1rem;
     position: relative;
     margin: 0 0 1.25rem;
-    border: 1px solid var(--c-border);
-    border-radius: 16px;
-    background: linear-gradient(180deg, rgba(var(--c-accent-rgb),.07) 0%, rgba(var(--c-bg-rgb),.45) 100%);
+    border: none;
+    border-bottom: 1px solid var(--c-border);
+    background: none;
 }
 /* 注意：這三個選擇器的漸層文字底色（background-image: linear-gradient(...var()...)）
    改在 launch(head=...) 注入的 <style> 裡設定（見 _DARK_MODE_HEAD_CSS）——
@@ -2009,12 +2030,13 @@ footer {
     color: var(--c-accent2-strong);
     border: 1px solid rgba(var(--c-accent2-rgb),.30);
 }
-/* step indicators：2026-07-23 header 改單行版面後，steps 改成跟標題
-   同一行左右排列（flex-wrap 讓視窗窄時自動換行），不再置中、不再需要
-   靠 margin-top 跟上方大標題拉開距離（間距已交給 .app-header 的 gap） */
+/* step indicators：2026-07-23 二度調整——header 改成上下兩行（產品名一行、
+   步驟列一行），所以這裡不再需要 flex:1 去跟標題搶同一行的水平空間，改成
+   自己佔滿整行寬度。兩行之間的間距一樣交給 .app-header 的 gap，不另設
+   margin-top，避免兩邊疊加。 */
 .app-header .steps {
     display: flex; justify-content: flex-start; flex-wrap: wrap;
-    gap: 4px; margin: 0; flex: 1 1 auto; min-width: 0;
+    gap: 4px; margin: 0; width: 100%; min-width: 0;
 }
 .step-pill {
     display: inline-flex; align-items: center; gap: 6px;
@@ -2382,6 +2404,14 @@ div[role="log"][aria-label="chatbot conversation"],
    ——雖然不會再拖走頂部列/footer了（那兩個已經在 .contain 外面），但
    chat-col/canvas-col 會跟著被迫一起捲動，體驗還是不對。讓三欄各自
    獨立捲動，互不影響。 */
+/* border-right：導覽欄與對話欄各在自己的右緣掛一條 1px 垂直分隔線
+   （千卉 2026-07-23 指定），三欄之間才有明確的邊界。畫在欄位自己的
+   邊框上、不是插入額外的分隔元件，這樣它會自動跟著欄高走完整條。
+
+   padding 左右 8px（千卉 2026-07-23）：欄裡的東西都不要貼著兩側邊緣。
+   留白設在欄位本身而不是逐項設定，「開始新分析」按鈕、收合鈕、結果導覽
+   項目才會全部吃到同一份，不會有人漏掉——先前只設在 .result-nav 上時，
+   「開始新分析」因為是 .nav-col 的直接子項，就沒被涵蓋到。 */
 .nav-col {
     flex: 0 0 220px !important;
     max-width: 220px !important;
@@ -2391,6 +2421,9 @@ div[role="log"][aria-label="chatbot conversation"],
     height: 100% !important;
     overflow-y: auto !important;
     overflow-x: hidden !important;
+    border-right: 1px solid var(--c-border) !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
 }
 /* 真因排查記錄：Gradio 的 .column 預設會帶 flex-wrap:wrap。平常沒設高度時
    不會有事，但這裡額外設了固定 height 讓內容用捲動取代撐高，一旦內容總高
@@ -2406,6 +2439,7 @@ div[role="log"][aria-label="chatbot conversation"],
     height: 100% !important;
     overflow: hidden !important;
     min-width: 0 !important;
+    border-right: 1px solid var(--c-border) !important;
 }
 /* 對話視窗：輸入框高度比例 5:1（千卉要求，2026-07-23）。用 flex-grow
    依 chat-col 當下的可用高度分配，不寫死 px，縮放視窗時比例仍會維持；
@@ -2681,8 +2715,13 @@ img.button-icon { opacity: .82; }
     .nav-col.collapsed .result-nav-accordion,
     .nav-col.collapsed .result-nav-divider,
     .nav-col.collapsed .reset-confirm { display: none !important; }
+    /* 選擇器裡的 #result_nav_col 是為了贏過下方 nav-underline 樣式的
+       `#result_nav_col .result-nav-btn`（1 個 id + 1 個 class = 1,1,0）。
+       兩邊都掛 !important 時由 specificity 決勝，純 class 的
+       `.nav-col.collapsed .result-nav-btn`（0,3,0）會輸，收合後的置中
+       與 padding 就不會生效。加上 id 祖先後是 1,3,0，穩定勝出。 */
     .nav-col.collapsed .reset-btn,
-    .nav-col.collapsed .result-nav-btn {
+    .nav-col.collapsed #result_nav_col .result-nav-btn {
         justify-content: center !important;
         padding: .6rem !important;
         font-size: 0 !important;
@@ -2695,8 +2734,18 @@ img.button-icon { opacity: .82; }
 /* 統計比較分析 Accordion 沒有 icon= 參數，改用 CSS ::before 掛圖示
    （data-URI，同一份 chart-bar 線稿，色值同步 assets/icons/*.svg 的
    #475569／深色模式同樣靠 filter 反相，寫法比照上面 img.button-icon）。 */
+/* justify-content：Gradio 給 .label-wrap 的預設是 space-between（標題文字
+   靠左、開合箭頭靠右）。這裡是三個 flex 子項（::before 圖示、標題文字、
+   箭頭），space-between 會把可用空間平均塞進三者之間，標題文字被推到整
+   列中間，跟旁邊其他導覽項目的文字對不齊。改成 flex-start 讓圖示與文字
+   靠左並排（跟其他項目一致），箭頭再單獨用 margin-left:auto 推到最右。
+   gap 對齊其他項目：圖示 18px 之後空 10px 才是文字。 */
 #nav_stat_accordion .label-wrap {
-    display: flex !important; align-items: center !important; gap: .5rem !important;
+    display: flex !important; align-items: center !important;
+    justify-content: flex-start !important; gap: 10px !important;
+}
+#nav_stat_accordion .label-wrap > .icon {
+    margin-left: auto !important;
 }
 #nav_stat_accordion .label-wrap::before {
     content: "";
@@ -2763,14 +2812,18 @@ img.button-icon { opacity: .82; }
 /* 注意：max-width + margin auto 是舊版單欄置中版面留下的樣式，現在
    upload-zone 是右側 action-col 裡的元件，要跟同一欄的 scenario-buttons
    同寬��撐滿欄寬），不能再置中收窄 */
+/* 2026-07-23 千卉實機回饋：原本的強調色外框＋大範圍陰影＋漸層底色讓這張
+   卡片像一個浮起來的彈窗。改成扁平——外框、陰影、底色全部拿掉，只保留
+   圓角與內邊距維持內容的呼吸空間。彈出動畫保留，它負責的是「這塊剛剛才
+   出現」的狀態提示，跟視覺重量無關。 */
 .upload-zone {
-    border: 1px solid rgba(var(--c-accent-rgb),.40) !important;
+    border: none !important;
     border-radius: 16px !important;
-    background: linear-gradient(180deg, rgba(var(--c-accent-rgb),.06) 0%, var(--c-surface) 100%) !important;
+    background: none !important;
     padding: 1.4rem 1.5rem !important;
     margin: .6rem 0 0 !important;
     width: 100% !important;
-    box-shadow: 0 16px 50px rgba(15,23,42,.20) !important;
+    box-shadow: none !important;
     animation: popupIn .25s cubic-bezier(.2,.8,.3,1) !important;
 }
 @keyframes popupIn {
@@ -2786,9 +2839,8 @@ img.button-icon { opacity: .82; }
     margin-bottom: .9rem;
     letter-spacing: .02em;
 }
-.upload-zone:hover, .upload-zone:focus-within {
-    border-color: rgba(var(--c-accent-rgb),.6) !important;
-}
+/* 原本這裡有 .upload-zone:hover/:focus-within 加深 border-color 的規則，
+   2026-07-23 卡片扁平化拿掉外框後就沒有東西可加深了，一併移除。 */
 /* 對話輸入框（Phase 8：不再負責上傳，改回純展示用的常駐輸入框）：
    刻意跟上面「醒目卡片」風格的 .upload-zone 拉開視覺重量差異，
    不用強調色框線／陰影／彈出動畫，也不掛 ::before 的標題文字，
@@ -2861,13 +2913,26 @@ img.button-icon { opacity: .82; }
    標籤（暫不用圖示，等下一輪視覺打磨補 Heroicons SVG），維持跟
    scenario-buttons 一致的「貼齊左邊、無強調色底」低視覺重量風格，
    避免搶過主要操作按鈕的注意力 */
+/* 左右留白已上移到 .nav-col（見該處註解），這裡不再重複設定，避免疊加成
+   雙倍縮排。上緣的 border-top 因此會跟著欄位的 padding 內縮 8px，跟下方
+   .result-nav-divider 本來就有的內縮一致。 */
 .result-nav {
     margin-top: 1rem !important;
     padding-top: 1rem !important;
     border-top: 1px solid var(--c-border) !important;
     gap: .3rem !important;
 }
-.result-nav-btn, .result-nav-subbtn {
+/* 2026-07-23：導覽項目改用 Bootstrap 5.3 `.nav-underline` 的視覺模型
+   （getbootstrap.com/docs/5.3/components/navs-tabs/）——未選取的項目是
+   純文字，沒有邊框也沒有底色；選取的項目只換文字顏色再加一條粗線。官方
+   的線畫在下緣（橫向分頁用），這裡是垂直導覽，依慣例改畫在左緣。
+   千卉回饋原本「看起來像很多按鈕」的真正原因不是這裡的樣式寫錯，而是
+   下面這個選擇器少了 id 祖先：Gradio 自己的 secondary 按鈕樣式（Svelte
+   編譯出 button.svelte-xxx.secondary 這種 type+class 組合）specificity
+   比純 class 高，即使掛 !important 也贏不了，所以 border:none 一直沒生效、
+   Gradio 預設的框線與底色整個透出來。子項目當初已經用 #result_nav_col
+   修過（見下方註解），主項目漏掉了，這次補上。 */
+#result_nav_col .result-nav-btn {
     width: 100% !important;
     justify-content: flex-start !important;
     text-align: left !important;
@@ -2875,92 +2940,87 @@ img.button-icon { opacity: .82; }
     background: transparent !important;
     box-shadow: none !important;
 }
-.result-nav-btn {
-    padding: .6rem .7rem !important;
+#result_nav_col .result-nav-btn {
+    padding: .5rem .75rem !important;
     font-size: .88rem !important;
-    font-weight: 600 !important;
-    border-radius: 8px !important;
-    color: var(--c-text-soft) !important;
-}
-.result-nav-btn:hover { background: rgba(var(--c-accent-rgb),.08) !important; color: var(--c-text) !important; }
-/* 2026-07-23：子項目縮排改參考 Bootstrap 官方 Sidebars 範例的
-   .btn-toggle-nav a 寫法（getbootstrap.com/docs/5.0/examples/sidebars/
-   sidebars.css）——原本只用 padding-left 撐出縮排，視覺上子項目還是
-   「跟父項同一個滿版矩形、只是文字往右挪」，看不太出來是巢狀關係。
-   Bootstrap 的做法是用 margin-left 真的把整個元素往右推、露出左邊的
-   縮排空隙，寬度也跟著縮小（不是滿版），加上一致的 margin-top 取代
-   padding 撐出的行距，這樣視覺上才會讀出「這是掛在上一層底下的子選單」
-   而不是另一個平級按鈕。數值比例沿用 Bootstrap 原案（margin-left
-   1.25rem、margin-top .125rem、padding .1875rem .5rem），只在這個
-   專案 --font-size-base 是 0.875rem（比 Bootstrap 預設 1rem 小）的
-   前提下等比例微調過，色彩／字體維持這個專案原本的 token 不動。 */
-.result-nav-subbtn {
-    width: calc(100% - 1.1rem) !important;
-    margin-left: 1.1rem !important;
-    margin-top: .15rem !important;
-    padding: .3rem .6rem !important;
-    font-size: .8rem !important;
     font-weight: 500 !important;
-    border-radius: 6px !important;
-    color: var(--c-text-muted) !important;
+    border-radius: 0 !important;
+    border-left: 2px solid transparent !important;
+    color: var(--c-text-soft) !important;
+    transition: color .15s ease-out, border-color .15s ease-out !important;
 }
-/* 踩坑：縮窄寬度後 Gradio 自己的 secondary 按鈕邊框（Svelte 編譯出的
-   scoped 選擇器實測是 button.svelte-xxx.secondary 這種 type+class 組合，
-   specificity 比純 class 選擇器 .result-nav-subbtn 高，即使兩邊都加
-   !important 也會贏）冒出來蓋掉上面共用規則的 border:none。用
-   #result_nav_col 這個 id 當祖先提高 specificity 才蓋得過去，純加
-   !important 不夠。 */
-#result_nav_col .result-nav-subbtn {
-    border: none !important;
+#result_nav_col .result-nav-btn:hover {
     background: transparent !important;
-    box-shadow: none !important;
+    color: var(--c-text) !important;
 }
-.result-nav-subbtn:hover { background: rgba(var(--c-accent-rgb),.06) !important; color: var(--c-text-soft) !important; }
+/* 歷史紀錄：這裡原本有一整組 .result-nav-subbtn 樣式，把統計比較分析底下
+   的四頁做成「小一號字＋灰一階＋真縮排」的子選單（縮排寫法是 2026-07-23
+   從 Bootstrap 官方 Sidebars 範例的 .btn-toggle-nav a 移植過來的，用
+   margin-left 真的把元素往右推、寬度跟著縮，而不是只用 padding-left 讓
+   文字位移）。同日千卉決定四頁改用跟其他導覽項目一模一樣的樣式並各自配
+   圖示、左緣齊平，這組樣式整個不再需要，連同 class 一起移除。
+   Gradio secondary 按鈕邊框那個 specificity 坑不會因此消失——它現在由
+   上方 `#result_nav_col .result-nav-btn` 那組共用規則一併處理。 */
+/* padding 左右歸零：Gradio 幫 gr.Accordion 的外層 block 掛了 .padded
+   （水平 12px）。四個子頁改成一般項目、要跟其他導覽項目左緣齊平之後，
+   這 12px 會讓它們整組往右位移，看起來像還有縮排沒拿乾淨。垂直方向的
+   padding 不動，那是手風琴自己的行距。 */
 .result-nav-accordion {
     margin: 0 !important;
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
 }
+/* 手風琴的標題列（統計比較分析）也是一個導覽項目，字重／內距／左緣線
+   都跟 .result-nav-btn 對齊，不然它會是這排裡唯一長得不一樣的一項 */
 .result-nav-accordion .label-wrap {
-    padding: .6rem .7rem !important;
+    padding: .5rem .75rem !important;
     font-size: .88rem !important;
-    font-weight: 600 !important;
+    font-weight: 500 !important;
+    border-left: 2px solid transparent !important;
     color: var(--c-text-soft) !important;
 }
 /* 2026-07-23：頁面切換模型——目前使用者所在的那一頁在導覽列高亮，
    applyActivePage() JS 幫對應按鈕加/移除這個 class。視覺先求「看得出
    選中誰」的基本可用，細部樣式（跟 Bootstrap 借來的分組/層級規範）留給
    下一輪 nav-col 視覺重做一起處理，這裡不重複做兩次。 */
-.result-nav-btn.active {
-    background: rgba(var(--c-accent-rgb),.10) !important;
+#result_nav_col .result-nav-btn.active {
+    background: transparent !important;
+    border-left-color: var(--c-accent-strong) !important;
     color: var(--c-accent-strong) !important;
     font-weight: 700 !important;
 }
 .result-nav-accordion.active .label-wrap {
+    border-left-color: var(--c-accent-strong) !important;
     color: var(--c-accent-strong) !important;
     font-weight: 700 !important;
 }
-/* 技術執行紀錄：低優先度診斷工具，跟上面三個主要分析結果用分隔線＋
-   降低視覺權重區隔（字級/顏色都比照 result-nav-subbtn 而非 result-nav-btn）*/
+/* 技術執行紀錄：低優先度診斷工具，跟上面的分析結果用分隔線＋降低視覺
+   權重（字級與顏色都比其他導覽項目再低一階）區隔開來 */
 .result-nav-divider {
     height: 1px;
     background: var(--c-border);
     margin: .5rem .3rem;
 }
-.result-nav-btn--muted {
+/* 同樣要帶 #result_nav_col，否則純 class（0,1,0）會被上方
+   `#result_nav_col .result-nav-btn`（1,1,0）的字級／顏色蓋掉，
+   技術執行紀錄就不再是降權的樣子 */
+#result_nav_col .result-nav-btn--muted {
     font-size: .82rem !important;
     font-weight: 500 !important;
     color: var(--c-text-muted) !important;
 }
-/* 語料 Metadata 說明表單卡片 */
+/* 語料 Metadata 說明表單卡片：跟 .upload-zone 同批扁平化（2026-07-23），
+   兩者是同一種「Canvas 裡的操作區塊」，樣式要保持一致 */
 .metadata-zone {
-    border: 1px solid rgba(var(--c-accent-rgb),.40) !important;
+    border: none !important;
     border-radius: 16px !important;
-    background: linear-gradient(180deg, rgba(var(--c-accent-rgb),.06) 0%, var(--c-surface) 100%) !important;
+    background: none !important;
     padding: 1.4rem 1.6rem !important;
     margin: 1rem 0 !important;
-    box-shadow: 0 16px 50px rgba(15,23,42,.20) !important;
+    box-shadow: none !important;
     animation: popupIn .25s cubic-bezier(.2,.8,.3,1) !important;
 }
 .metadata-zone .gr-box, .metadata-zone .form { background: transparent !important; }
@@ -3889,16 +3949,29 @@ def create_app():
                         "語言指標分析", icon=str(BASE_DIR / "assets" / "icons" / "trending-up.svg"),
                         elem_id="nav_idx_btn", elem_classes=["result-nav-btn"], variant="secondary",
                     )
-                    with gr.Accordion("統計比較分析", open=False, elem_id="nav_stat_accordion",
+                    # open=True（千卉 2026-07-23）：收合狀態下這一項跟旁邊四個
+                    # 主項目長得一樣，看不出底下還有四個子頁面，使用者不會知道
+                    # 要去點開。導覽列的作用是把可去的地方攤開來給人看，預設收
+                    # 起來等於把內容藏住。仍然保留可收合，只是不再預設收起。
+                    with gr.Accordion("統計比較分析", open=True, elem_id="nav_stat_accordion",
                                        elem_classes=["result-nav-accordion"]):
-                        nav_stat_sub_0 = gr.Button("敘述統計", elem_id="nav_stat_sub_0",
-                                                    elem_classes=["result-nav-subbtn"], variant="secondary")
-                        nav_stat_sub_1 = gr.Button("差異性分析", elem_id="nav_stat_sub_1",
-                                                    elem_classes=["result-nav-subbtn"], variant="secondary")
-                        nav_stat_sub_2 = gr.Button("監督式學習", elem_id="nav_stat_sub_2",
-                                                    elem_classes=["result-nav-subbtn"], variant="secondary")
-                        nav_stat_sub_3 = gr.Button("非監督式學習", elem_id="nav_stat_sub_3",
-                                                    elem_classes=["result-nav-subbtn"], variant="secondary")
+                        # 2026-07-23 千卉決定：這四頁改用跟其他導覽項目完全
+                        # 一樣的樣式（elem_classes 從 result-nav-subbtn 換成
+                        # result-nav-btn）並各自配圖示，縮排也拿掉、左緣齊平。
+                        # 原本的「小一號字＋灰一階＋真縮排」子選單樣式（Phase 3
+                        # 借 Bootstrap Sidebars 的那套）連同 CSS 一併移除。
+                        nav_stat_sub_0 = gr.Button(
+                            "敘述統計", icon=str(BASE_DIR / "assets" / "icons" / "table-cells.svg"),
+                            elem_id="nav_stat_sub_0", elem_classes=["result-nav-btn"], variant="secondary")
+                        nav_stat_sub_1 = gr.Button(
+                            "差異性分析", icon=str(BASE_DIR / "assets" / "icons" / "scale.svg"),
+                            elem_id="nav_stat_sub_1", elem_classes=["result-nav-btn"], variant="secondary")
+                        nav_stat_sub_2 = gr.Button(
+                            "監督式學習", icon=str(BASE_DIR / "assets" / "icons" / "academic-cap.svg"),
+                            elem_id="nav_stat_sub_2", elem_classes=["result-nav-btn"], variant="secondary")
+                        nav_stat_sub_3 = gr.Button(
+                            "非監督式學習", icon=str(BASE_DIR / "assets" / "icons" / "squares-2x2.svg"),
+                            elem_id="nav_stat_sub_3", elem_classes=["result-nav-btn"], variant="secondary")
                     nav_report_btn = gr.Button(
                         "LLM輔助分析", icon=str(BASE_DIR / "assets" / "icons" / "document.svg"),
                         elem_id="nav_report_btn", elem_classes=["result-nav-btn"], variant="secondary",
@@ -4349,13 +4422,14 @@ def create_app():
             )
 
         # ── Phase 8-D：Canvas 運算中提示（粗粒度階段文字＋轉圈動畫）─────
-        # 沿用跟 _accordion_update 完全一樣的判斷（current_step 在 5/6/7 之間
-        # 才顯示），不新增運算邏輯；用 gr.HTML() 單一元件承載，空字串＝不
-        # 顯示、不用另外接一個 visibility 輸出，wiring 只多一個輸出點。
+        # 只在三段運算階段顯示（2026-07-23 步驟列收斂後 key 從 5/6/7 改成
+        # 4/5/6，這個字典的 key 是 _STEPS 的步驟編號，改步驟列一定要一起改），
+        # 不新增運算邏輯；用 gr.HTML() 單一元件承載，空字串＝不顯示、不用另外
+        # 接一個 visibility 輸出，wiring 只多一個輸出點。
         _COMPUTING_STEP_LABELS = {
-            5: ("1", "指標計算"),
-            6: ("2", "統計分析"),
-            7: ("3", "報告撰寫"),
+            4: ("1", "指標計算"),
+            5: ("2", "統計分析"),
+            6: ("3", "報告撰寫"),
         }
 
         def _build_computing_html(state):
@@ -4399,22 +4473,19 @@ def create_app():
                    gr.update(visible=True))
 
             reply, state = handle_scenario_select(sc_num, state)
-            log_history = _log_append(log_history, "✅ STEP 1 情境選擇完成")
+            log_history = _log_append(log_history, "✅ 情境選擇完成")
             chat_history = chat_history + [_assistant_msg(reply)]
             yield (chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update(),
                    gr.update(), gr.update(), gr.update(), gr.update())
 
-            # STEP 2：確認訊息已經導向上傳卡片的「格式要求」區塊，不再另外用
-            # LLM 生成一則重複格式細節的引導訊息，避免對話視窗出現冗餘內容
-            state["current_step"] = 2
-            log_history = _log_append(log_history, "⏳ STEP 2 上傳引導中……")
-            yield (chat_history, log_history, state, gr.update(), _todo_update(state), gr.update(), gr.update(),
-                   gr.update(), gr.update(), gr.update(), gr.update())
-
-            state["done_steps"] = [1, 2]
-            state["current_step"] = 3
+            # STEP 1 文本上傳：確認訊息已經導向上傳卡片的「格式要求」區塊，不再
+            # 另外用 LLM 生成一則重複格式細節的引導訊息，避免對話視窗出現冗餘
+            # 內容。這裡原本是獨立的「上傳引導」步驟，但它跟前一步在同一個
+            # generator 內連續完成、中間沒有任何使用者動作，步驟列上永遠只會一
+            # 起亮起，2026-07-23 併進「文本上傳」，只留等待上傳的狀態切換。
+            state["current_step"] = 1
             state["state"] = "UPLOAD_WAIT"
-            log_history = _log_append(log_history, "✅ STEP 2 完成，等待上傳文本")
+            log_history = _log_append(log_history, "⏳ STEP 1 等待上傳文本……")
             # 情境已選定，按鈕收起；對話視窗自此回歸純輸出角色。
             # 格式要求直接寫進上傳卡片本身（upload_hint_md），使用者不用往上
             # 捲回對話視窗找 AI 剛剛說過的規則——卡片本身就要自己講清楚。
@@ -4487,34 +4558,39 @@ def create_app():
                 yield chat_history, log_history, state, gr.update(visible=True), gr.update()
                 return
 
-            # STEP 3（開始處理即關閉上傳彈窗，避免遮罩擋住操作）
-            state["current_step"] = 3
-            log_history = _log_append(log_history, "⏳ STEP 3 接收上傳檔案中……")
+            # STEP 1 文本上傳（開始處理即關閉上傳彈窗，避免遮罩擋住操作）
+            state["current_step"] = 1
+            log_history = _log_append(log_history, "⏳ STEP 1 接收上傳檔案中……")
             yield chat_history, log_history, state, gr.update(visible=False), _todo_update(state)
 
             recv_msg, state = handle_uploaded_files(files, state)
             chat_history = chat_history + [_assistant_msg(recv_msg)]
-            state["done_steps"] = list(set(state.get("done_steps", []) + [3]))
-            state["current_step"] = 4
-            log_history = _log_append(log_history, f"✅ STEP 3 已接收 {len(files)} 個檔案")
+            state["done_steps"] = list(set(state.get("done_steps", []) + [1]))
+            state["current_step"] = 2
+            log_history = _log_append(log_history, f"✅ STEP 1 已接收 {len(files)} 個檔案")
             yield chat_history, log_history, state, gr.update(visible=False), _todo_update(state)
 
-            # STEP 4
-            log_history = _log_append(log_history, "⏳ STEP 4 格式驗證中……")
+            # STEP 2 格式驗證
+            log_history = _log_append(log_history, "⏳ STEP 2 格式驗證中……")
             yield chat_history, log_history, state, gr.update(visible=False), _todo_update(state)
 
             check_msg, state, has_errors = run_format_check(state)
             chat_history = chat_history + [_assistant_msg(check_msg)]
 
             if has_errors:
-                log_history = _log_append(log_history, "⚠️ STEP 4 格式不符，請重新上傳")
-                state["current_step"] = 3
+                log_history = _log_append(log_history, "⚠️ STEP 2 格式不符，請重新上傳")
+                # 退回等待重傳：step 1 要從 done_steps 拿掉才會顯示成「進行中」。
+                # _build_header_html 的判斷順序是 done > current，只設 current_step
+                # 而不清除 done 的話，步驟列會停在「✓ 文本上傳」，跟畫面正在要求
+                # 使用者補傳檔案互相矛盾。
+                state["done_steps"] = [s for s in state.get("done_steps", []) if s != 1]
+                state["current_step"] = 1
                 yield chat_history, log_history, state, gr.update(visible=True), _todo_update(state)
                 return
 
-            state["done_steps"] = list(set(state.get("done_steps", []) + [4]))
-            state["current_step"] = 5
-            log_history = _log_append(log_history, "✅ STEP 4 格式驗證通過")
+            state["done_steps"] = list(set(state.get("done_steps", []) + [2]))
+            state["current_step"] = 3
+            log_history = _log_append(log_history, "✅ STEP 2 格式驗證通過")
             # 格式通過後：顯示 metadata 說明表單，等使用者填寫後再開始分析
             state["state"] = "METADATA_INPUT"
             meta_hint = "請填寫語料 Metadata 說明（原文資訊、群組層與個體層），完成後點「確認並開始分析」。"
@@ -4573,20 +4649,26 @@ def create_app():
             # 2026-07-23：技術執行紀錄轉正成獨立頁面後，可見性只在情境選定
             # （on_scenario_pick）與重置（on_reset_confirm）時切換一次，
             # 這裡不用再逐步更新開合狀態／摘要標籤，改回傳 gr.update() 不動。
-            log_history = _log_append(log_history, "⏳ STEP 5 計算語言指標中……")
+            # 「語料說明」(step 3) 在這裡收尾：confirm 與 skip 兩條路徑都會走進
+            # _run_computation，標記在這一處就好，不用在兩個 handler 各寫一次。
+            state["done_steps"] = list(set(state.get("done_steps", []) + [3]))
+            state["current_step"] = 4
+            log_history = _log_append(log_history, "⏳ STEP 4 計算語言指標中……")
             yield (chat_history, log_history, state, _todo_update(state),
                    gr.update(), _computing_update(state))
             for prog_msg, is_final, state in run_computation_pipeline_streaming(state):
                 if "指標計算完成" in prog_msg:
-                    state["done_steps"] = list(set(state.get("done_steps", []) + [5])); state["current_step"] = 6
+                    state["done_steps"] = list(set(state.get("done_steps", []) + [4])); state["current_step"] = 5
                 elif "步驟 2/3" in prog_msg or "統計分析" in prog_msg and "完成" not in prog_msg:
-                    state["current_step"] = 6
+                    state["current_step"] = 5
                 elif "統計分析完成" in prog_msg or ("統計" in prog_msg and "完成" in prog_msg):
-                    state["done_steps"] = list(set(state.get("done_steps", []) + [6])); state["current_step"] = 7
+                    state["done_steps"] = list(set(state.get("done_steps", []) + [5])); state["current_step"] = 6
                 elif "步驟 3/3" in prog_msg or "報告" in prog_msg and "完成" not in prog_msg:
-                    state["current_step"] = 7
+                    state["current_step"] = 6
                 elif is_final:
-                    state["done_steps"] = list(set(state.get("done_steps", []) + [7, 8])); state["current_step"] = None
+                    # 舊版這裡是 +[7, 8]（報告撰寫與下載成果寫死在同一行一起標記，
+                    # 因為下載成果本來就不是獨立運算階段），收斂後合併成 step 6
+                    state["done_steps"] = list(set(state.get("done_steps", []) + [6])); state["current_step"] = None
                 log_history = _log_append(log_history, prog_msg)
                 if is_final:
                     chat_history = chat_history + [_assistant_msg(prog_msg)]