淡藍底色體系：降低純白／純黑面積，深淺共用三層結構

千卉回報「純黑或純白背景面積很大，整個視覺壓力也變大」，並指定淺色走
「氣泡淡藍＋對話欄底稍深淡藍」（她的方案 2）、深色邏輯相同。量過之後
確認抱怨來源不只對話欄：淺色頁面底 #f8fafc 幾乎等於白，真正的大面積
純白是 --c-surface（表格資料列＋所有 Gradio 區塊）；深色則是 #020617
近乎純黑。

底色改成三層，淺深共用同一套邏輯：
底（--c-bg） 淺 #f8fafc→#e8f1fa 深 #020617→#0b1424
浮起物（--c-bubble-bg）淺 #eef2f7→#f5faff 深 #0d1526→#172136
資料紙張（--c-surface）淺 #ffffff 維持 深 #0d1526→#172136
淺色的表格／卡片刻意維持純白：75 項指標表格是資料密集區，可讀性優先於
「消滅所有純白」；染藍的是它下面那層底，白表格因此變成浮在淡藍上的紙張。
連帶 --c-surface2／--c-thead-bg／--background-fill-secondary 同批換成
同色相的值，避免藍底配灰塊。

線條改走 sky 相（千卉：淺色邊框不要太深，要維持亮麗的淺藍）：
--c-border-strong #a3aebd→#6ba3d6（結構線，約 2.3:1）
--c-divider #b6c0cd→#a9cbe8（表格資料列細線）
--c-input-border #a3aebd→#7fb0d9（約 2.0:1）
亮度級距不動，只換色相，手感與上一輪柔化後相同。

順帶修掉一個自己上一輪引入的深淺不一致：氣泡邊框原本共用 --c-divider，
淺色值卻是對著「深色結構線那一級（alpha .28）」挑的，而深色 --c-divider
是更淡的 .18，實測深色 1.37:1／淺色 1.61:1，兩個主題看起來不一樣。改成
獨立 token --c-bubble-border（淺 #a9cbe8、深 rgba(148,163,184,.26)），
兩邊實測都是 1.61:1，--c-divider 也回歸單一用途。

docs/design.md 同步：新增「底色體系：三層」章節（含淺色表格為何維持白底
的準則）、線條表換新值並補「淺色一律走 sky 相」、氣泡章節記錄跨主題對齊
要給獨立 token 的教訓。

驗證：三個 token 宣告點同步（app.css :root／.dark、app_agent.py
_DARK_MODE_HEAD_CSS）。本機 .venv + Playwright 走完情境 1（真實檔案選擇器
上傳→格式驗證→語料說明→略過→運算完成→語言指標分析結果頁），淺深兩色
各量一輪：淺色文字 6.06–12.81:1、結構線 2.14–2.35:1、氣泡邊框 1.61:1；
深色文字 5.59–14.95:1、結構線 1.65–1.66:1、氣泡邊框 1.61:1。底色實際
渲染像素以 PIL 取樣確認（淺 232,241,250／深 11,20,36），未只憑目測。
console 僅 3 筆既有外部資源錯誤。

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

app_agent.py

@@ -1917,9 +1917,9 @@ _DARK_MODE_HEAD_CSS = """
 }
 @media (prefers-color-scheme: dark) {
     :root:not(.light) {
-        --c-bg:              #020617;
-        --c-surface:         #0d1526;
-        --c-surface2:        #111827;
+        --c-bg:              #0b1424;
+        --c-surface:         #172136;
+        --c-surface2:        #1b2740;
         --c-surface3:        #1e293b;
         --c-surface3-border: #334155;
         --c-border:          rgba(14,165,233,.11);
@@ -1930,8 +1930,9 @@ _DARK_MODE_HEAD_CSS = """
            就會在某一種深色觸發方式下退回淺色值。 */
         --c-border-strong:   rgba(148,163,184,.28);
         --c-divider:         rgba(148,163,184,.18);
-        --c-thead-bg:        #111827;
-        --c-bubble-bg:       #0d1526;
+        --c-bubble-border:   rgba(148,163,184,.26);
+        --c-thead-bg:        #1e2a42;
+        --c-bubble-bg:       #172136;
         --c-accent:          #0ea5e9;
         --c-accent-strong:   #38bdf8;
         --c-accent2:         #818cf8;
@@ -1961,7 +1962,7 @@ _DARK_MODE_HEAD_CSS = """
 
         --body-background-fill:      var(--c-bg) !important;
         --background-fill-primary:   var(--c-surface) !important;
-        --background-fill-secondary: #090e1a !important;
+        --background-fill-secondary: #080f1c !important;
         --block-background-fill:     var(--c-surface) !important;
         --block-border-color:        var(--c-border) !important;
         --border-color-primary:      var(--c-border) !important;

assets/app.css

@@ -9,10 +9,20 @@
 
 /* ── 1. TOKENS & RESET ─────────────────────────────────────────── */
 /* 預設淺色；系統設定為深色模式時（或明確帶 .dark class）自動切換深色 */
+/* 底色體系（2026-08-12 三修）：千卉回報「純黑或純白背景面積很大，視覺壓力
+   也變大」。量過三層才確定抱怨的來源不只對話欄——淺色的頁面底 #f8fafc 幾乎
+   等於白，而真正的大面積純白是 --c-surface（表格資料列＋所有 Gradio 區塊）；
+   深色則是 #020617 近乎純黑。改成三層結構，淺深共用同一套邏輯：
+     底（--c-bg）        淡藍／帶藍深色，鋪滿頁面、canvas、導覽、對話欄
+     浮起物（--c-bubble-bg）比底亮一階，對話氣泡
+     資料紙張（--c-surface）淺色維持純白當表格底（資料密集區可讀性優先），
+                          深色跟著抬亮
+   淺色氣泡「比欄底亮一階、浮在上面」是千卉選的方案 2，剛好與深色本來就有的
+   關係（氣泡比欄底亮）一致，兩個主題不再各講各的。 */
 :root {
-    --c-bg:              #f8fafc;
+    --c-bg:              #e8f1fa;
     --c-surface:         #ffffff;
-    --c-surface2:        #f1f5f9;
+    --c-surface2:        #eef5fc;
     --c-surface3:        #ffffff;
     --c-surface3-border: #e2e8f0;
     --c-border:          rgba(2,132,199,.16);
@@ -34,16 +44,28 @@
        跟深色 rgba(148,163,184,.28) 疊 #0d1526 算出來的 1.67:1 幾乎相同，
        這就是「深淺兩個模式的氣泡邊框看起來一樣淡」的依據（用量測對齊，
        不是各自挑一個看起來順眼的值）。
+       2026-08-12 三修（千卉：淺色系的邊框不要太深，要維持亮麗的淺藍）：
+       #a3aebd／#b6c0cd 是中性灰藍，配上這輪的淡藍底會顯灰、顯髒。改走
+       sky 相：結構線 #6ba3d6、細線 #a9cbe8、輸入框 #7fb0d9。**亮度級距
+       不動**（結構線仍約 2.3:1、氣泡邊框仍約 1.6:1，跟前一輪柔化後的手感
+       相同），換的是色相不是輕重——這樣既維持千卉要的柔和度，也讓線條跟
+       底色同屬一個藍色家族。
        --c-border 本身維持原值不動：它還餵給 --block-border-color／
        --border-color-primary 這兩個 Gradio 原生元件用的變數，動了會牽連
        一整批沒盤點過的元件。 */
-    --c-border-strong:   #a3aebd;
-    --c-divider:         #b6c0cd;
+    --c-border-strong:   #6ba3d6;
+    --c-divider:         #a9cbe8;
+    /* 對話氣泡邊框獨立一個 token：前一版讓它共用 --c-divider，結果深淺兩邊
+       對不齊——淺色的 #a9cbe8 是對著「結構線那一級的深色值（alpha .28）」
+       挑的，但深色的 --c-divider 其實是更淡的 .18，實測深色氣泡邊框只有
+       1.37:1、淺色 1.61:1，兩個模式看起來不一樣。分成獨立 token 之後兩邊
+       各自對齊到 1.61:1，--c-divider 也回歸單一用途（表格資料列細線）。 */
+    --c-bubble-border:   #a9cbe8;
     /* 表格表頭底色與對話氣泡底色改成獨立 token（原本借用 --c-surface2／
        --c-surface）：淺色時兩者疊在自己的鄰接底色上都只有 1.03–1.07:1，
        業主回報「表頭跟文字黏在一起」「看不清楚區塊的顏色」就是這個。 */
-    --c-thead-bg:        #e2e8f0;
-    --c-bubble-bg:       #eef2f7;
+    --c-thead-bg:        #d8e8f6;
+    --c-bubble-bg:       #f5faff;
     --c-accent:          #0284c7;
     --c-accent-strong:   #0369a1;
     --c-accent2:         #4f46e5;
@@ -68,7 +90,7 @@
     --c-input-bg:        #ffffff;
     /* 2026-08-12：原本 rgba(2,132,199,.22) 疊白只有約 1.3:1，輸入框邊界同樣
        受 1.4.11 的 3:1 規範；語料 metadata 表單「欄位看不清楚」有一半是這條。 */
-    --c-input-border:    #a3aebd;
+    --c-input-border:    #7fb0d9;
     --c-link-hover:      #075985;
     --c-scrollbar:       #cbd5e1;
     --c-scrollbar-hover: #94a3b8;
@@ -77,7 +99,7 @@
 
     --body-background-fill:      var(--c-bg) !important;
     --background-fill-primary:   var(--c-surface) !important;
-    --background-fill-secondary: #eef2f7 !important;
+    --background-fill-secondary: #dfeaf6 !important;
     --block-background-fill:     var(--c-surface) !important;
     --block-border-color:        var(--c-border) !important;
     --border-color-primary:      var(--c-border) !important;
@@ -97,9 +119,9 @@
    :root 一旦被包進 @media 只會留下加了前綴的版本，而 ":root" 不可能是任何元素的子孫，等於永遠不會命中。 */
 /* 明確以 ?__theme=dark 網址參數強制深色時 */
 .dark {
-    --c-bg:              #020617;
-    --c-surface:         #0d1526;
-    --c-surface2:        #111827;
+    --c-bg:              #0b1424;
+    --c-surface:         #172136;
+    --c-surface2:        #1b2740;
     --c-surface3:        #1e293b;
     --c-surface3-border: #334155;
     --c-border:          rgba(14,165,233,.11);
@@ -109,8 +131,11 @@
        那些個別覆寫規則就整組刪掉了，避免同一個色值散落六處。 */
     --c-border-strong:   rgba(148,163,184,.28);
     --c-divider:         rgba(148,163,184,.18);
-    --c-thead-bg:        #111827;
-    --c-bubble-bg:       #0d1526;
+    /* .26 是實測對齊值：疊在深色氣泡底 #172136 上等於 1.61:1，跟淺色
+       #a9cbe8 疊 #f5faff 的 1.61:1 相同（見 :root 的同名 token 註解）。 */
+    --c-bubble-border:   rgba(148,163,184,.26);
+    --c-thead-bg:        #1e2a42;
+    --c-bubble-bg:       #172136;
     --c-accent:          #0ea5e9;
     --c-accent-strong:   #38bdf8;
     --c-accent2:         #818cf8;
@@ -140,7 +165,7 @@
 
     --body-background-fill:      var(--c-bg) !important;
     --background-fill-primary:   var(--c-surface) !important;
-    --background-fill-secondary: #090e1a !important;
+    --background-fill-secondary: #080f1c !important;
     --block-background-fill:     var(--c-surface) !important;
     --block-border-color:        var(--c-border) !important;
     --border-color-primary:      var(--c-border) !important;
@@ -653,7 +678,7 @@ div[role="log"][aria-label="chatbot conversation"],
        深色 rgba(148,163,184,.28) 疊 #0d1526 是 1.67:1，兩個模式的邊框
        亮度差幾乎相同，看起來才是同一種「淡邊框」。 */
     background: var(--c-bubble-bg) !important;
-    border: 1px solid var(--c-divider) !important;
+    border: 1px solid var(--c-bubble-border) !important;
     border-radius: 10px !important;
 }
 /* ── AI 頭像（2026-08-12，業主要求）─────────────────────────────

docs/design.md

@@ -1,5 +1,5 @@
 ---
-version: 1.1
+version: 1.2
 project: SpectraEngine（譯彩紛呈 II 分析引擎）
 brand: 致理科技大學應日系 鄧老師委託案
 last_updated: 2026-08-12
@@ -7,18 +7,18 @@ source: assets/app.css（E4 抽出前為 app_agent.py 內嵌 _CUSTOM_CSS 常數
 
 colors:
   light:
-    bg: "#f8fafc"
+    bg: "#e8f1fa"
     surface: "#ffffff"
-    surface2: "#f1f5f9"
+    surface2: "#eef5fc"
     surface3: "#ffffff"
     surface3-border: "#e2e8f0"
     border: "rgba(2,132,199,.16)"
     border-hover: "rgba(2,132,199,.35)"
-    border-strong: "#a3aebd"
-    divider: "#b6c0cd"
-    thead-bg: "#e2e8f0"
-    bubble-bg: "#eef2f7"
-    input-border: "#a3aebd"
+    border-strong: "#6ba3d6"
+    divider: "#a9cbe8"
+    thead-bg: "#d8e8f6"
+    bubble-bg: "#f5faff"
+    input-border: "#7fb0d9"
     accent: "#0284c7"
     accent-strong: "#0369a1"
     accent2: "#4f46e5"
@@ -34,17 +34,17 @@ colors:
     user-bubble-border: "#86efac"
     user-bubble-text: "#166534"
   dark:
-    bg: "#020617"
-    surface: "#0d1526"
-    surface2: "#111827"
+    bg: "#0b1424"
+    surface: "#172136"
+    surface2: "#1b2740"
     surface3: "#1e293b"
     surface3-border: "#334155"
     border: "rgba(14,165,233,.11)"
     border-hover: "rgba(14,165,233,.30)"
     border-strong: "rgba(148,163,184,.28)"
     divider: "rgba(148,163,184,.18)"
-    thead-bg: "#111827"
-    bubble-bg: "#0d1526"
+    thead-bg: "#1e2a42"
+    bubble-bg: "#172136"
     input-border: "rgba(14,165,233,.15)"
     accent: "#0ea5e9"
     accent-strong: "#38bdf8"
@@ -141,6 +141,23 @@ layout:
 
 淺色模式的一般強調色 `#0284c7`（accent）用於一般大小的內文文字時，對比度 4.09:1 略低於 WCAG AA 的 4.5:1 門檻，但用於按鈕/圖示/大字等允許 3:1 門檻的地方完全合格。系統另外準備了 `accent-strong`（`#0369a1`，5.93:1）供小字/連結專用。**兩者不能混用**：一般強調色用在按鈕/圖示/大字，加強強調色用在小字/連結文字。
 
+### 底色體系：三層（2026-08-12 新增）
+
+業主回報「純黑或純白背景面積很大，整個視覺壓力也變大」。量過之後確認抱怨的來源不只對話欄：淺色的頁面底 `#f8fafc` 幾乎等於白，而真正的大面積純白是 `--c-surface`（表格資料列與所有 Gradio 區塊）；深色則是 `#020617` 近乎純黑。
+
+改成三層結構，淺色與深色共用同一套邏輯：
+
+| 層 | Token | 淺色 | 深色 | 鋪在哪 |
+| :--- | :--- | :--- | :--- | :--- |
+| 底 | `--c-bg` | `#e8f1fa` | `#0b1424` | 頁面、canvas、導覽列、對話欄 |
+| 浮起物 | `--c-bubble-bg` | `#f5faff` | `#172136` | 對話氣泡，比底亮一階 |
+| 資料紙張 | `--c-surface` | `#ffffff` | `#172136` | 表格資料列、卡片、輸入框、Gradio 區塊 |
+
+兩個判斷準則：
+
+- **淺色的資料紙張維持純白**，不跟著染藍。75 項指標表格是資料密集區，白底的可讀性優先於「消滅所有純白」；染藍的是它下面那層底，白色表格因此變成浮在淡藍上的紙張，層次比原本白疊白更清楚。
+- **氣泡比底亮一階、浮在上面**，深淺一致。深色本來就是這個關係（原 `#0d1526` 浮在 `#020617` 上），這輪讓淺色跟上，兩個主題不再各講各的。近白區間的填色差本來就只有一階，邊界靠細線邊框補（見下）。
+
 ### 邊界與分隔線：兩級線條（2026-08-12 新增）
 
 WCAG 1.4.11 對「UI 元件與圖形物件的邊界」要求 3:1，這條在淺色模式一直沒被滿足：`--c-border`（`rgba(2,132,199,.16)`）疊在白／近白底上只有約 1.2:1，區塊外框、水平分界線、表格框線在淺色模式等於看不見（深色模式當初已針對 `.app-header`、欄邊框、標題底線個別補成 `rgba(148,163,184,.28)`，淺色端從沒補）。業主 2026-08-12 回報「淺色版看不清楚區塊的顏色」即為此。
@@ -149,22 +166,26 @@ WCAG 1.4.11 對「UI 元件與圖形物件的邊界」要求 3:1，這條在淺
 
 | Token | 用途 | 淺色 | 深色 |
 | :--- | :--- | :--- | :--- |
-| `--c-border-strong` | 結構線：區塊外框、欄位分隔、頂部列底線、標題底線、`hr`、表格外框與表頭分界 | `#a3aebd`（對白 2.25:1） | `rgba(148,163,184,.28)` |
-| `--c-divider` | 細線：表格資料列之間這種密集重複的線、對話氣泡邊框 | `#b6c0cd`（對氣泡底 1.64:1、對欄底 1.76:1） | `rgba(148,163,184,.18)` |
+| `--c-border-strong` | 結構線：區塊外框、欄位分隔、頂部列底線、標題底線、`hr`、表格外框與表頭分界 | `#6ba3d6`（對底約 2.3:1） | `rgba(148,163,184,.28)` |
+| `--c-divider` | 細線：表格資料列之間這種密集重複的線 | `#a9cbe8` | `rgba(148,163,184,.18)` |
+| `--c-bubble-border` | 對話氣泡邊框（獨立一級，兩個主題實測對齊 1.61:1） | `#a9cbe8` | `rgba(148,163,184,.26)` |
+| `--c-input-border` | 輸入框邊界 | `#7fb0d9`（約 2.0:1） | `rgba(14,165,233,.15)` |
 
 密集重複的線刻意不拉到 3:1：整張資料表如果每一條線都是結構線強度，會變成網格紙、反而更難讀，1.4.11 的門檻也只針對「識別元件所必需」的邊界。
 
-**結構線 2.25:1 是刻意離開 3:1 門檻的決定**：第一版用 `#7c8798`（3.64:1，完全符合 1.4.11），實機檢視後判斷線條太搶眼、視覺變吵，柔化到 2.25:1。這個值仍是改版前 1.2:1 的近兩倍，業主回報的「淺色看不清楚區塊」在這個亮度差已解決。文字對比不受這條影響，全站文字仍通過 AA（淺色 6.15–14:1）。日後若無障礙稽核要求嚴格達標，把這個 token 調回 `#7c8798` 即可，全站 19 處線條會一起跟上，不用逐處改。
+**淺色線條一律走 sky 相，不用中性灰藍。** 中間版本曾用 `#a3aebd`／`#b6c0cd`（同樣的亮度級距、但偏灰），配上淡藍底會顯灰顯髒，業主明確要求「維持亮麗的淺藍」。換色相時**亮度級距不動**，手感才不會又跑掉。
 
-`--c-border` 本身維持原值，因為它同時餵給 `--block-border-color` 與 `--border-color-primary` 兩個 Gradio 原生元件變數，改動會牽連一整批沒盤點過的元件。
+**結構線約 2.3:1 是刻意離開 3:1 門檻的決定**：第一版用 `#7c8798`（3.64:1，完全符合 1.4.11），實機檢視後判斷線條太搶眼、視覺變吵，柔化到這一級。這個值仍是改版前 1.2:1 的近兩倍，業主回報的「淺色看不清楚區塊」在這個亮度差已解決。文字對比不受這條影響，全站文字仍通過 AA。日後若無障礙稽核要求嚴格達標，把這個 token 換成同色相但更深的 sky 值即可，全站 19 處線條會一起跟上，不用逐處改。
 
-同批把 `--c-input-border`（淺色）從 `rgba(2,132,199,.22)`（約 1.3:1）改成 `#7c8798`：輸入框邊界同樣受 1.4.11 規範，這是語料 metadata 表單「欄位看不清楚」的另一半原因。
+`--c-border` 本身維持原值，因為它同時餵給 `--block-border-color` 與 `--border-color-primary` 兩個 Gradio 原生元件變數，改動會牽連一整批沒盤點過的元件。
 
 ### 對話氣泡（2026-08-12 更新）
 
-淺色氣泡原本是白底無框，疊在對話欄底 `#f8fafc` 上只有 1.07:1。定案改成 **填色＋淡邊框**：底色 `--c-bubble-bg`（淺色 `#eef2f7`、深色維持 `#0d1526`），外加 1px `--c-divider`。
+淺色氣泡原本是白底無框，疊在對話欄底 `#f8fafc` 上只有 1.07:1。定案改成 **填色＋淡邊框**：底色 `--c-bubble-bg`（淺色 `#f5faff`、深色 `#172136`），外加 1px `--c-bubble-border`。氣泡比欄底亮一階、浮在上面（見上方「底色體系」）。
+
+邊框比結構線淡，才不會讓每一則訊息都像一張卡片。**「深淺一致」是用量測對齊的，不是兩邊各挑一個看起來順眼的值**：淺色 `#a9cbe8` 疊 `#f5faff` 與深色 `rgba(148,163,184,.26)` 疊 `#172136`，兩邊都是 1.61:1。
 
-邊框用細線而非結構線，是為了讓兩個主題的氣泡看起來一樣淡：淺色 `#b6c0cd` 對氣泡底 1.64:1、對欄底 1.76:1，深色 `rgba(148,163,184,.28)` 疊 `#0d1526` 算出來是 1.67:1。**「深淺一致」是用量測對齊的，不是兩邊各挑一個看起來順眼的值。**
+這裡踩過一次坑值得記下來：中間版本讓氣泡邊框共用 `--c-divider`，淺色值卻是對著「深色結構線那一級（alpha `.28`）」挑的，而深色 `--c-divider` 其實是更淡的 `.18`——結果深色氣泡邊框只有 1.37:1、淺色 1.61:1，兩個主題看起來不一樣。**跨主題要對齊的視覺元素，就給它自己的 token，不要借用剛好數值接近的鄰居。**
 
 可見邊界畫在內層 `.md`，不是外層 `.message`（量測時要認這層）。使用者訊息與 AI 訊息共用同一層，目前兩側同款氣泡、只靠左右對齊區分，是 2026-08-12 業主確認過的現況。