diff --git a/local-tool/visiona-local/frontend/style.css b/local-tool/visiona-local/frontend/style.css
index e23fd6d..2fe78fa 100644
--- a/local-tool/visiona-local/frontend/style.css
+++ b/local-tool/visiona-local/frontend/style.css
@@ -590,6 +590,24 @@ html, body {
     z-index: 100;
     animation: fadeIn 150ms ease-out;
 }
+/* CSS specificity 修補：`.modal-backdrop` 的 `display: flex` 規則
+ * specificity = (0,1,0)，和 user agent stylesheet 的 `[hidden] { display: none }`
+ * 相同，但因為寫在後面 cascade 勝出 → 結果是即使 div 有 `hidden` 屬性，
+ * modal 依然可見。這裡用 (0,2,0) 的規則強制 hidden 生效。
+ *
+ * 症狀（M8 一開始就踩到但 M7 splash 沒 modal 所以沒人抓到）：
+ * Wails 控制台一打開就同時看到 Settings modal + shutdown-modal 疊在畫面上，
+ * 即使 DOM 裡兩個都有 `hidden` 屬性。
+ *
+ * 同樣問題也影響 `.error-banner`（display: flex 覆蓋 hidden），所以紅 banner
+ * 「伺服器無法啟動」也會一開 app 就可見。下面的通用 `[hidden]` 全域規則處理
+ * 這兩個和未來任何 `.class { display: X }` 被 `hidden` 屬性覆蓋的情況。
+ *
+ * 用 !important 是必要的——attribute selector specificity `(0,1,0)` 和 class
+ * selector 相同，光靠 `.class[hidden]` 要重複寫每個 class。全域 `[hidden]!important`
+ * 最省事，且符合 HTML 規範「hidden 屬性代表該元素不應被顯示」的語意。
+ */
+[hidden] { display: none !important; }
 .modal {
     background: var(--bg);
     border: 1px solid var(--border);