排版重構 Phase 3：nav-col 子選單縮排（借 Bootstrap Sidebars 結構）

核心訴求：nav-col 看起來像一排平級按鈕，沒有手風琴/選單的層級感，
尤其「統計比較分析」展開後的4個子項目，只靠 padding-left 撐出縮排、
外觀跟平級按鈕沒有明顯差異。

按千卉要求「用別人做好的、不要自己構想」，這次直接抓
getbootstrap.com/docs/5.0/examples/sidebars/ 官方 Sidebars 範例的實際
原始碼（HTML + sidebars.css）來源，port 其中 .btn-toggle-nav a 這個
子選單樣式的結構規則（margin-left 縮排+margin-top 行距節奏），色彩
字體維持這個專案原本的 token 不換：

- 子項目改用 margin-left 真的把整個按鈕往右推（露出縮排空隙、寬度也
跟著縮小到 calc(100% - 1.1rem)），取代原本「滿版矩形只是文字內縮」
的 padding-left 做法，數值比例參照 Bootstrap 原案（margin-left
1.25rem／margin-top .125rem／padding .1875rem .5rem）換算成這個
專案 0.875rem 的字級基準
- 手風琴展開/收合的箭頭旋轉動畫確認是 Gradio Accordion 原生就有
（`.label-wrap.open` + icon 的 inline transform:rotate()），不用
額外實作，省了一部分工

新踩坑：縮窄子按鈕寬度後，Gradio 自己的 secondary 按鈕邊框冒出來蓋掉
`.result-nav-subbtn` 共用規則的 `border:none`——Svelte 編譯出的 scoped
選擇器實測是 `button.svelte-xxx.secondary` 這種 type+class 組合，
specificity 比純 class 選擇器高，兩邊都加 `!important` 也贏不了。
改用 `#result_nav_col` 當祖先提高 specificity 才蓋得過去。

已用 Playwright 驗證：子項目正確縮排、無邊框、間距緊湊，讀出巢狀層級
感；子項目點擊功能不受影響（頁面切換正常）；桌面收合窄欄模式不受影響
（收合時子選單本來就整組隱藏）；「開始新分析」reset 正確回首頁；
console 0 error。

A/B/D 頂端對齊那個視覺錯覺（nav-col 第一項沒有卡片邊框）：查證
Bootstrap 官方範例本身側欄頂部也不做卡片包裝，屬於側欄慣例而非
待修的缺陷，這次不特別處理。`.tabs > .tab-nav` 全站死規則視覺評估
留待下一輪。

app_agent.py

@@ -2754,13 +2754,38 @@ img.button-icon { opacity: .82; }
     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 {
-    padding: .45rem .7rem .45rem 1.4rem !important;
+    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;
 }
+/* 踩坑：縮窄寬度後 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;
+    background: transparent !important;
+    box-shadow: none !important;
+}
 .result-nav-subbtn:hover { background: rgba(var(--c-accent-rgb),.06) !important; color: var(--c-text-soft) !important; }
 .result-nav-accordion {
     margin: 0 !important;