修復標題漸層文字消失 bug（background 簡寫解析失敗）

「譯彩紛呈：重譯文本分析系統」標題（首頁 .homepage-hero h1 與 Canvas
.app-header h1/.subtitle/.subtitle-3）用 background-clip:text 做漸層
文字效果，實機測試發現偶爾整個消失、要反白選取才看得到。

真正根因：這幾條規則原本用 background 簡寫（shorthand）搭配多個裸
var() 當漸層色標＋!important，瀏覽器把簡寫展開成子屬性時
background-image 解析成空值（用 devtools 直接讀 CSSStyleDeclaration
證實），導致沒有底色可畫、文字又是 transparent，視覺上等於標題消失。
不是 Gradio css= 管線問題（head 注入的版本一樣會踩到），也不是
repaint/合成層問題（試過 transform:translateZ(0) 無效）。

修法：不用 background 簡寫，直接寫 background-image 這個子屬性本身，
跳過簡寫展開的解析路徑。已用瀏覽器 devtools 即時修改驗證、再改寫進
原始碼後乾淨重啟伺服器複測，首頁與 Canvas 標題皆穩定顯示漸層。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app_agent.py

@@ -1860,11 +1860,24 @@ _CUSTOM_CSS = """
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(var(--c-accent-rgb),.07) 0%, rgba(var(--c-bg-rgb),.45) 100%);
 }
-/* 注意：這三個選擇器的漸層文字底色（background: linear-gradient(...var()...)）
+/* 注意：這三個選擇器的漸層文字底色（background-image: linear-gradient(...var()...)）
    改在 launch(head=...) 注入的 <style> 裡設定（見 _DARK_MODE_HEAD_CSS）——
-   Gradio 的 css= 轉換管線會把「!important + 多個裸 var() 當漸層色標」的
-   background 宣告整條吃掉，導致標題文字變透明卻沒有漸層可顯示而「消失」。
-   這裡只保留其餘不受影響的樣式（字型、間距等）。 */
+   這裡只保留其餘不受影響的樣式（字型、間距等）。
+   踩坑（2026-07-22 千卉實機回報，首頁與 Canvas 標題皆會發生，須反白選取
+   才看得到）：真正的根因不是重繪/合成層問題（曾誤判為 Chromium 動態內容
+   repaint bug，試過 transform:translateZ(0) 無效，已移除），而是瀏覽器
+   對 `background` 這個簡寫屬性（shorthand）解析失敗——當值是
+   `linear-gradient(...多個裸 var() 當色標...)` 且整條宣告掛
+   `!important` 時，瀏覽器會把簡寫展開成多個子屬性（background-image/
+   background-color/...），但 background-image 這個子屬性最終解析成空值
+   （用 devtools 讀 CSSStyleDeclaration 已直接證實：getPropertyValue
+   ('background-image') 回傳空字串，即使 getPropertyPriority 顯示
+   'important'），導致完全沒有漸層可畫、文字又是 transparent，看起來就是
+   整個標題消失；反白選取會強制瀏覽器重繪，這次改用其他路徑重新算出
+   實際漸層才「顯現」。修法：不要用 `background` 簡寫，直接寫
+   `background-image: linear-gradient(...) !important;` 這個子屬性本身，
+   跳過簡寫展開的解析路徑——已用瀏覽器 devtools 即時修改驗證過，改長寫法
+   後漸層立即正常顯示。*/
 .app-header h1 {
     font-family: 'Crimson Pro', 'Noto Serif TC', Georgia, serif !important;
     font-size: 2.1rem !important;
@@ -2382,7 +2395,10 @@ div[role="log"][aria-label="chatbot conversation"],
 }
 .homepage-hero h1 {
     margin: 1rem 0 .6rem; font-size: 2.1rem; line-height: 1.3; font-weight: 700;
-    background: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent2) 90%);
+    /* 同 .app-header h1 的漸層文字踩坑（見 _DARK_MODE_HEAD_CSS 上方註解）：
+       background 簡寫在瀏覽器展開成子屬性時 background-image 會解析成
+       空值，改直接寫 background-image 這個子屬性本身即可 */
+    background-image: linear-gradient(100deg, var(--c-accent) 10%, var(--c-accent2) 90%);
     -webkit-background-clip: text; background-clip: text; color: transparent;
 }
 .homepage-hero .subtitle { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--c-text-muted); }
@@ -2805,18 +2821,26 @@ a:hover { color: var(--c-link-hover); }
 # 這讓 @media 區塊內的 :root 永遠無法命中（:root 不可能是任何元素的子孫）。
 # 因此系統深色模式的 token 覆寫改用 launch(head=...) 注入純 <style>，繞過該轉換。
 #
-# 這個常數後來也收留了另一個踩到的 Gradio css= 處理管線問題：
-# 「background: linear-gradient(角度, var(--x) 0%, var(--y) 55%, var(--z) 100%) !important;」
-# 這種同時帶 !important、且用多個裸 var() 當漸層色標的宣告，Gradio 的 css=
-# 轉換流程會整條吃掉（用瀏覽器 devtools 直接對同一元素設 inline style 測過，
-# 瀏覽器本身完全可以正確解析，問題出在 Gradio 那層），造成標題文字變透明卻沒有
-# 底下的漸層可以顯示，視覺上等於「標題消失」。同樣改用 head=注入繞過。
+# 這個常數後來也收留了另一個踩到的漸層文字問題（2026-07-22 千卉實機回報，
+# 首頁與這裡的標題都會發生，要反白選取才看得到）：這條規則原本寫成
+# 「background: linear-gradient(角度, var(--x) 0%, var(--y) 55%, var(--z)
+# 100%) !important;」（background 簡寫），結果瀏覽器把這個簡寫展開成多個
+# 子屬性時，background-image 這個子屬性解析成空值（用瀏覽器 devtools 直接
+# 讀該 CSS 規則的 CSSStyleDeclaration 證實：getPropertyValue
+# ('background-image') 回傳空字串）——文字本身是 transparent，底下又沒有
+# 漸層可畫，視覺上等於「標題消失」。這不是 Gradio 的 css= 轉換管線造成的
+# （這裡本來就是繞過該管線的 head 注入 <style>，一樣會踩到），也不是
+# repaint/合成層問題（試過 transform:translateZ(0) 無效）。修法：不要用
+# background 簡寫，改直接寫 background-image 這個子屬性本身，跳過簡寫展開
+# 的解析路徑——已用瀏覽器 devtools 直接改這條規則驗證過，改長寫法後漸層
+# 立即正常顯示。首頁 .homepage-hero h1 用的是同一種 background 簡寫寫法，
+# 同一批修掉（見 _CUSTOM_CSS 對應區塊）。
 _DARK_MODE_HEAD_CSS = """
 <style>
 .app-header h1,
 .app-header .subtitle,
 .app-header .subtitle-3 {
-    background: linear-gradient(130deg, var(--c-accent-strong) 0%, var(--c-accent2) 55%, var(--c-accent3) 100%) !important;
+    background-image: linear-gradient(130deg, var(--c-accent-strong) 0%, var(--c-accent2) 55%, var(--c-accent3) 100%) !important;
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }