/* ══════════════════════════════════════════════════════════════════
   Legacy Bridge — 舊頁面(style.css 時代)的亮色相容層
   載入順序必須是:tokens.css → style.css → legacy-bridge.css(最後)

   為什麼需要它:CRM 有 18 個頁面依賴 style.css 的深色玻璃擬態,共數千條規則,
   逐頁重寫風險高、工期長。所幸 style.css 的視覺幾乎全靠 :root 的 38 個變數驅動
   (--primary-color 引用 71 次、--text-dim 31 次…),因此只要把這些變數重新指向
   ExpertHub v2.7 的 Token 值,全部舊頁面即刻轉為合規亮色主題,不必改動 HTML。

   定位:過渡手段。每頁完成正式遷移(改用 ux-* 元件)後即可停止載入本檔;
   全站遷移完成後本檔與 style.css 一併退場。
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 品牌與主色:紫 → ASUS 藍(5.4 硬性底線) ── */
  --primary-color: var(--color-primary-default);
  --primary-hover: var(--color-primary-hover);
  --primary-glow: rgba(0, 108, 225, .18);
  --editor-focus-bg: var(--color-primary-subtle-bg);

  /* ── 背景:深色 → 亮色(規範 OX 色彩系統) ── */
  --bg-dark: var(--color-bg-body);
  --bg-card: var(--color-bg-container);
  --bg-card-hover: var(--color-bg-hover);

  /* ── 玻璃擬態 → 實色卡片(1.2:裝飾性效果留給行銷場景) ── */
  --glass-bg: var(--color-bg-container);
  --glass-bg-heavy: var(--color-bg-container);
  --glass-border: var(--color-border);
  --glass-border-light: var(--color-border);

  /* ── 文字:反白 → 深色階層(5.4.1 對比度已實算) ── */
  --text-main: var(--color-text-primary);
  --text-dim: var(--color-text-secondary);      /* 原 #94a3b8 對亮底僅約 2.5:1,不合規 */
  --text-muted: var(--color-text-tertiary);

  /* ── 狀態色:改用實算通過 AA 的 Token ── */
  --success: var(--color-status-success);
  --danger: var(--color-status-danger);
  /* 舊 --warning 在舊碼中同時被當「文字色」與「按鈕填色」使用。填色情境較多且
     文字色拿去填色會顯土黃(Ken 回報回饋鈕),故橋接指向填色版;需要淡底文字的
     地方改用 --color-status-warning。 */
  --warning: var(--color-status-warning-fill);

  /* ── 圓角:收斂為 8/4 兩級(5.2;原 20~32px 屬行銷風格) ──
     註:原本這裡有一行 `--radius-sm: var(--radius-sm)` —— 自我參照,依 CSS 規則
     屬於循環引用、該宣告會失效,實際上什麼也沒做。2026-07-31 一併移除。 */
  --eh-radius-pill: var(--radius-sm);
  --eh-radius-card: var(--radius-lg);
  --eh-radius-input: var(--radius-sm);

  /* ── 陰影:去除深色重陰影與彩色光暈(5.5) ── */
  --eh-shadow-premium: var(--shadow-sm);
  --eh-shadow-elevated: var(--shadow-md);
  --eh-glass-gradient: var(--color-bg-container);
  --eh-input-bg: var(--color-bg-container);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-md);

  /* ── 動效:對齊 Motion Token(避免 >300ms) ── */
  --transition-fast: var(--duration-fast) var(--easing-standard);
  --transition-normal: var(--duration-normal) var(--easing-standard);
}

/* ── 舊圓角變數與 tokens 同名衝突的修正 ──
   style.css 原本定義 --radius-sm/md/lg/xl 與 tokens.css 同名而值不同,故此處曾以
   「舊名 → 新值」重新宣告來補救。2026-07-31 已從 style.css 直接刪除那組宣告
   (它在 style.css 內部零引用),因此 sm / lg 不必也不該在這裡再宣告一次 ——
   同名重宣告本身就是問題的根源,ux_audit.py 現在會擋。
   僅保留 tokens.css **沒有**定義、而舊頁面仍在引用的三個名字。 */
:root {
  --radius-md: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  /* 2026-07-31 移除 --space-* 的舊值沿用(原為 xs=4/sm=8,理由是「舊頁面已依舊值
     排版,避免整體位移」)。改為讓 tokens.css 供值(xs=8/sm=12),因為那個理由
     實測不成立、且代價是共用元件在不同頁不同尺寸:
       · style.css 內部引用這些變數 0 次 —— 沒有「已依舊值排版」的舊頁面
       · 真正的引用者是本檔(6 處)、line_users(2)、record_detail.js(5),
         全都是改版後寫的,本來就是照 tokens 語意寫的。本檔第 337 行的註解
         甚至寫明「動作組間距一律 8px(--space-xs)」—— 舊值反而讓它變成 4px
       · 只載 tokens.css 的頁面(PERSONA 後台、Pipeline)拿的是 8/12,
         同一個殼層因此在不同頁有不同間距(Ken 回報 Logo 不一樣的原因之一) */
}

/* ══════════════════════════════════════════════════════════════════
   個別覆寫:變數換不掉的硬編碼深色效果
   ══════════════════════════════════════════════════════════════════ */

/* 全域字型改 Roboto+微軟正黑體(5.5 硬性)

   ⚠ 為什麼需要**通用選擇器**,只寫 body 不夠(2026-07-31 Ken 回報「不同頁的 Logo
   長得不一樣」後查出的既有缺陷):
   style.css 第 141 行有一條 `* { font-family: system-ui, …, Segoe UI, Roboto, … }`。
   通用選擇器直接命中每一個元素,所以 body 的字型宣告根本傳不下去 ——
   載入 style.css 的 15 個頁面,實際上**全站文字都在用 system-ui / Segoe UI**,
   而只載 tokens.css 的頁面(PERSONA 後台、Pipeline)才是規範指定的 Roboto。
   同一個殼層品牌字樣因此在不同頁呈現兩種字體,一眼就看得出粗細與字寬不同。

   為什麼用 `*` 而非 `!important`:兩條規則的權重都是 0,後載入者勝 ——
   legacy-bridge 排在 style.css 之後,故單靠通用選擇器就壓得過。
   而任何帶 class/元素的字型宣告(權重更高)仍會贏過這條,刻意指定的字型不會被搶走。 */
body, input, select, textarea, button { font-family: var(--font-family); }
*, *::before, *::after { font-family: var(--font-family); }

body {
  background: var(--color-bg-body) !important;
  color: var(--color-text-primary);
}

/* 裝飾性背景光暈:內部作業系統應維持視覺純淨(1.2 / 2.3) */
.background-blobs, .blob, .blob1, .blob2 { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   效能:全面移除 backdrop-filter(毛玻璃模糊)
   全站原有 30 處 blur(3~20px)。全螢幕遮罩上的 backdrop-filter 會讓瀏覽器
   在「每一次重繪」時重新模糊整個背景頁面 —— 詳細頁很長、卡片又多,
   於是打開彈窗後連打字都會頓(Ken 實測回報)。
   規範 1.2 本就要求內部作業系統避免裝飾性效果,故移除同時符合規範與效能。
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay, .modal, .glass, .glass-heavy, .scan-mask,
.dropdown-content, .drawer, .side-panel, .popover,
[style*="backdrop-filter"], [style*="backdrop-filter:blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 重陰影同樣是繪製成本大戶(0 15px 40px 這類大範圍擴散)→ 收斂為 Token 陰影 */
[style*="box-shadow: 0 15px"], [style*="box-shadow:0 15px"],
[style*="box-shadow: 0 25px"], [style*="box-shadow:0 25px"],
[style*="box-shadow: 0 20px"], [style*="box-shadow:0 20px"] {
  box-shadow: var(--shadow-md) !important;
}

/* 玻璃卡片 → 白底實色卡片 */
.glass, .glass-heavy {
  background: var(--color-bg-container) !important;
  border: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-sm);
}

/* 舊 eh-* 元件(style.css 版)一併轉亮,避免半遷移頁面出現深色殘留 */
.eh-card {
  background: var(--color-bg-container) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.eh-input, .eh-btn-primary, .eh-btn-ghost, .eh-btn-pill {
  border-radius: var(--radius-sm) !important;
}
.eh-input {
  background: var(--color-bg-container) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
}

/* 輸入元件:淡灰線框、深色文字(2.3 視覺靜默) */
input, select, textarea, .grid-cell-input, .form-control {
  background: var(--color-bg-container) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-strong) !important;
}
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary) !important; }
select option { background: var(--color-bg-container); color: var(--color-text-primary); }

/* 表格:表頭 #F5F7FA、深色文字(11.3) */
table th { background: var(--color-bg-hover) !important; color: var(--color-text-secondary) !important; }
table td { color: var(--color-text-primary); }
table tr:hover td { background: var(--color-bg-hover); }

/* 主按鈕:去除漸層與彩色光暈,改實色主色(3.2) */
.btn-primary, button.btn-primary {
  background: var(--color-primary-default) !important;
  color: var(--color-text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--color-primary-hover) !important; }
.btn-nav-glass, .btn-nav-home {
  background: var(--color-bg-container) !important;
  color: var(--color-primary-default) !important;
  border: 1px solid var(--color-primary-default) !important;
  border-radius: var(--radius-sm) !important;
}

/* Toast → Tier 1 規範:頂部中央、白底、左側語意色條(9.1)
   元件基準已移入 tokens.css(讓只載 tokens 的頁面也有 Toast);
   這一份保留 !important 的職責是壓過舊頁面自寫的 Toast 樣式(右下角/實色底)。
   兩處的值必須一致,改動時請同時改。 */
#toast.toast, .toast {
  position: fixed !important;
  top: var(--space-md) !important; bottom: auto !important; right: auto !important;
  left: 50% !important; width: auto !important; height: auto !important;
  min-height: 48px; max-width: 560px;
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg) !important;
  background: var(--color-bg-container) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-size: var(--font-size-body) !important; font-weight: var(--font-weight-medium) !important;
  transform: translateX(-50%) translateY(-16px) !important;
  z-index: var(--z-toast) !important;
}
.toast.show { transform: translateX(-50%) translateY(0) !important; opacity: 1 !important; }
/* Hover 暫留需要能收到滑鼠事件;隱藏時不可攔截底下元素的點擊 */
.toast { pointer-events: none !important; }
.toast.show { pointer-events: auto !important; }
/* 類型語意升級(2026-07-31,與 tokens.css 的 .toast 區塊同步改,兩處值必須一致):
   整條「狀態淡色底 + 狀態深色字 + ::before 圓形圖示」;色組皆為 tokens.css
   已標註對比度合格的成對 token。圖示用 ::before 是因 showToast 以 textContent 寫入。 */
.toast::before {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--font-weight-bold, 700); color: #fff;
}
.toast.success::before { content: '✓'; background: var(--color-status-success); }
.toast.error::before   { content: '✕'; background: var(--color-status-danger); }
.toast.warning::before { content: '!'; background: var(--color-status-warning); }
.toast.info::before    { content: 'i'; background: var(--color-info-text); }
.toast.success { background: var(--color-status-success-bg) !important; color: var(--color-status-success) !important;     border-left-color: var(--color-status-success) !important; }
.toast.error   { background: var(--color-status-danger-bg) !important;  color: var(--color-status-danger-text) !important; border-left-color: var(--color-status-danger) !important; }
.toast.warning { background: var(--color-status-warning-bg) !important; color: var(--color-status-warning) !important;     border-left-color: var(--color-status-warning) !important; }
.toast.info    { background: var(--color-info-bg) !important;           color: var(--color-info-text) !important;          border-left-color: var(--color-info-text) !important; }

/* 遮罩:統一 #23252C @60%(6.1 v2.7);層級收斂進 Token 體系(5.5)
   舊頁面有 z-index:1100/1200/3000 等散落值,統一為 --z-modal,
   確認 Dialog(--z-dialog=1200)才能永遠在其上(6.5)

   2026-08-01 補上舊 class 名 `.modal`(Ken 回報「回饋視窗跳出來了,但背景還在」):
   index.html 等頁面的彈窗用的是 .modal,沒被這條規則收進來,於是
     · 遮罩維持內聯的 rgba(0,0,0,0.x) → 被本檔的深色轉換規則改成不透明近白色
     · z-index 停在內聯的 1000,與外殼的側欄/頂欄同層,而外殼是後插入的節點
       → 側欄與頂欄畫在遮罩「上面」,看起來背景完全沒被遮住、還能操作
   style.css 本來就把 .modal 與 .modal-overlay 定義成同一種固定遮罩,兩者一起收斂才一致。 */
.modal-overlay, .modal {
  background: var(--color-overlay-scrim) !important;
  z-index: var(--z-modal) !important;
}
/* 例外:進階排名彈窗原本刻意用 9999(要蓋在其他彈窗之上),保留其相對高度 */
#advancedRankingModal {
  z-index: calc(var(--z-modal) + 10) !important;
}

/* 下拉選單/浮層:原 rgba(20,20,30,.96) 深底(Ken 回報系統功能選單看不見內容)
   → 白底 + 1px 框 + shadow-md(5.5 浮層用 md);項目 Hover 用淡灰(7.3 低噪音焦點態) */
.dropdown-content, .dropdown-menu, .popover, .menu-panel, .context-menu {
  background: var(--color-bg-container) !important;
  background-color: var(--color-bg-container) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: none !important;
}
.dropdown-item, .dropdown-content a, .dropdown-content button, .menu-item {
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.dropdown-item:hover, .dropdown-content a:hover, .menu-item:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}
/* 選單內的分隔線與說明文字 */
.dropdown-content hr, .dropdown-divider { border-color: var(--color-border) !important; }
.dropdown-content .hint, .dropdown-content small { color: var(--color-text-tertiary) !important; }

/* 側邊選單/抽屜:同樣避免深底殘留 */
.sidebar, .side-panel, .drawer {
  background: var(--color-bg-container) !important;
  border-color: var(--color-border) !important;
}

/* Focus Ring 不可移除(7.4 硬性):補回舊頁面被 outline:none 抹掉的焦點指示 */
*:focus-visible {
  outline: 2px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

/* 連結色 */
a { color: var(--color-primary-default); }

/* ══════════════════════════════════════════════════════════════════
   行內樣式攔截(過渡手段)
   舊頁面與 JS 模板字串中有約 900 處硬編碼深色行內樣式(color:white、
   rgba(255,255,255,.05) 底、紫色 #6366f1 等)。行內樣式優先度高於 class,
   變數換不掉;以「屬性選擇器 + !important」精準攔截最常見的模式,
   即可讓亮色主題在不修改 900 個位置的前提下正確顯示。
   註:這是過渡層。頁面正式遷移時應把行內樣式改為 ux-* class 並移除對應攔截。
   ══════════════════════════════════════════════════════════════════ */

/* ── style.css 內以 class 定義的白字(75 條)── 分兩類處理:
   A) 一般文字/標題/欄位值 → 改深色(白底白字看不見,Ken 實測回報)
   B) 主色/危險色「填色」上的白字 → 保留白色(對比 4.83~4.96:1 已達 AA)      */

/* A) 內容型:一律深色 */
.section-title, .field-value, .stat-value, .pill-value,
.dropdown-item, .grid-cell-input, .form-textarea, .custom-select,
.ai-result-box, .data-content, .rich-text-content, .ql-editor,
.auth-title, .scan-text, .brand,
.matrix-table th, .matrix-table th label, .matrix-table th span,
.mapping-grid thead th, .mapping-grid td,
.btn-ghost, .btn-outline {
  color: var(--color-text-primary) !important;
}
/* 區塊標題(ISV/名片/商機…):左側色條保持主色,文字改深色。
   字級採八級制的 h4 20px「頁面/大區塊標題」——這些是頁面的主要分區,
   原 h6 16px 在整頁中不夠醒目(Ken 回報);仍在規範字級表內,未自創數值(5.5)。 */
.section-title {
  font-size: var(--font-size-h4) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: .2px;
}
/* 欄位 Label(原為主色粗體)降為次要灰,避免整頁都是藍字(2.3 視覺靜默) */
.field-label, .field-item label { color: var(--color-text-secondary) !important; }
/* 圖示:繼承父元素顏色,才能在白底/彩底上都正確 */
.icon-file, .icon-download, .icon-key, .icon-trash, .icon-edit,
.icon-plus, .icon-settings, .icon-shield, .icon-logout,
.crm-icon { color: currentColor !important; }
/* 快速切換點/箭頭:未選中在白底上需深色,選中為填色時才白字 */
.nav-arrow, .jump-dot { color: var(--color-text-secondary) !important; }
.nav-arrow:hover, .jump-dot:hover, .jump-dot.active { color: var(--color-text-inverse) !important; }
/* 佔位文字:改用合規的 tertiary(原 rgba(255,255,255,.25) 在白底=隱形) */
.grid-cell-input::placeholder, .ql-editor.ql-blank::before {
  color: var(--color-text-tertiary) !important;
}

/* B) 填色元件上的白字要保留(這些元件確實有實色背景) */
.btn-primary, .btn-add-pill, .btn-delete-icon, .btn-download-icon,
.eh-btn-primary, .eh-btn-ghost, .admin-badge,
.form-nav-item.active, .nav-item.active,
.permission-pill.active, .mode-btn.active,
.btn-delete:hover, .logout-btn:hover, .config-btn:hover:not(:disabled),
.settings-btn:hover, .remove-btn,
.source-card.active .label, .record-checkbox:checked::after {
  color: var(--color-text-inverse) !important;
}

/* ── Hover 態:原設計是「淡白半透明底 + 白字」(深色主題用),
   在亮底上底色近乎透明、白字直接消失(Ken 回報 ISV 選單 hover 字不見)。
   改為淡灰底 + 深色字 —— 規範 7.3「低噪音焦點態:下拉高亮建議淡灰,避免彩底閃爍」 */
.form-nav-item:hover, .nav-item:hover, .permission-pill:hover,
.mode-btn:hover:not(.active), .btn-ghost:hover,
.checklist-item:hover, .dropdown-item:hover, .menu-item:hover,
.list-item:hover, .company-item:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}
/* 選中態:實色主色底 + 白字(對比 4.96:1 ✓) */
.form-nav-item.active, .nav-item.active, .permission-pill.active, .mode-btn.active {
  background: var(--color-primary-default) !important;
  box-shadow: none !important;
}
/* 選單項目未選中時的預設字色(原 --text-dim,亮底上需足夠對比) */
.form-nav-item, .nav-item { color: var(--color-text-secondary) !important; }
/* 卡片右上動作組(回饋/修改/刪除):依 6.6 給破壞性動作隔離距離,
   並依 3.2 讓單一工作區只有一顆 Filled 主鈕(修改),其餘為 Outlined。 */
.sub-actions { display: flex; align-items: center; gap: var(--space-xs); }
/* 動作組間距一律 8px(--space-xs),不對刪除鈕做額外隔離。
   規範 6.6 的 16px 隔離是為了防誤觸,但本專案的誤觸防線已由更強的機制提供:
   ①刪除一律經 Confirmation Dialog 二次確認(deleteRecord→uiConfirm,符合 10.3)
   ②按鈕目標為 32×32,已滿足 WCAG 2.5.8 的目標尺寸要求(≥24×24)
   在此前提下等距排列的視覺一致性優先。依 6.5 記錄於 UI_改版計畫.md 偏離表。 */
.sub-actions .btn-delete-icon {
  margin-left: 0;
  background: var(--color-status-danger) !important;
  border-radius: var(--radius-sm) !important;
}
/* 同一組動作按鈕高度一致(視覺對齊) */
.sub-actions .btn-mini, .sub-actions .btn-delete-icon {
  min-height: 32px; height: 32px; font-size: var(--font-size-caption);
}
.sub-actions .btn-mini { padding: 0 var(--space-sm); }
.sub-actions .btn-delete-icon { width: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* 導覽鈕在亮底上改為外框樣式(白字白底會消失);Hover 用淡藍底,不用白邊白字 */
.btn-nav-home, .btn-nav-glass,
.btn-nav-home:hover, .btn-nav-glass:hover {
  color: var(--color-primary-default) !important;
}
.btn-nav-home:hover, .btn-nav-glass:hover {
  background: var(--color-primary-subtle-bg) !important;
  border-color: var(--color-primary-default) !important;
  transform: none !important;          /* 去除上浮效果(1.2 裝飾性動效) */
  box-shadow: none !important;
}
/* 快速切換點 Hover:淡灰底+深字(原白字白底) */
.jump-dot:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-primary-default) !important;
}
.jump-dot.active {
  background: var(--color-primary-default) !important;
  color: var(--color-text-inverse) !important;
}
/* 釘選圖示的三種狀態(圖示本身是遮罩,顏色即 color) */
.jump-dot .pin-btn {
  color: var(--color-text-tertiary) !important;   /* 未釘選:可見但不搶戲(4.6:1) */
  margin-right: var(--space-2xs);
  cursor: pointer;
  flex-shrink: 0;
}
.jump-dot .pin-btn.is-pinned {
  color: var(--color-status-warning-fill) !important;   /* 已釘選:琥珀實心(白底 5.02:1) */
}
/* 選中的切換點是藍底,琥珀在藍上對比不足 —— 改用白色;
   「已釘選」的語意仍由實心圖形表達,不依賴顏色 */
.jump-dot.active .pin-btn,
.jump-dot.active .pin-btn.is-pinned { color: var(--color-text-inverse) !important; }
.jump-dot .pin-btn:hover { color: var(--color-status-warning-fill) !important; }
.jump-dot.active .pin-btn:hover { color: var(--color-text-inverse) !important; opacity: .8; }

/* 白字 → 深色文字(白底上的白字=看不見) */
[style*="color: white"], [style*="color:white"],
[style*="color: #fff"], [style*="color:#fff"],
[style*="color: #FFF"], [style*="color:#FFF"] {
  color: var(--color-text-primary) !important;
}
/* 例外:主色/危險色填色的按鈕上,白字是正確的 */
.btn-primary[style*="color: white"], .btn-primary[style*="color:white"],
.ux-btn--primary[style*="color: white"], .ux-btn--danger[style*="color: white"] {
  color: var(--color-text-inverse) !important;
}

/* 白色半透明底(玻璃層) → 白卡或極淡底 */
[style*="background: rgba(255, 255, 255, 0.0"], [style*="background:rgba(255,255,255,0.0"],
[style*="background: rgba(255,255,255,0.0"],
[style*="background: rgba(255, 255, 255, .0"] {
  background: var(--color-bg-subtle) !important;
  border-color: var(--color-border) !important;
}
/* 黑色半透明底(深色輸入框/程式碼區) → 白底或淡底 */
[style*="background: rgba(0, 0, 0, 0."], [style*="background:rgba(0,0,0,0."],
[style*="background: rgba(0,0,0,0."] {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
}
/* ⚠ 例外:遮罩層不可被上面那條洗白 —— 它本來就該是半透明深色,
   被轉成不透明淺色後整個畫面像「換了一頁」,使用者不知道那是彈窗
   (2026-08-01 Ken 回報「回饋視窗跳出來了,但背景還在」)。
   選擇器多帶一個 [style] 提高權重,不必依賴檔案內的先後順序;
   一條規則同時修掉各頁內聯寫 rgba(0,0,0,0.x) 的所有彈窗。 */
.modal-overlay[style], .modal[style] {
  background: var(--color-overlay-scrim) !important;
}

/* 舊紫色系(#6366f1 / #a855f7 / #4f46e5)→ ASUS 藍 */
[style*="#6366f1"], [style*="#6366F1"], [style*="#4f46e5"], [style*="#4F46E5"],
[style*="#a855f7"], [style*="#A855F7"] {
  color: var(--color-primary-default) !important;
}
/* 紫色漸層背景(進度條、標題底)→ 實色主色 */
[style*="linear-gradient(90deg, #6366f1"], [style*="linear-gradient(135deg, #6366f1"],
[style*="linear-gradient(135deg,#6366f1"], [style*="linear-gradient(90deg,#6366f1"] {
  background: var(--color-primary-default) !important;
}

/* ══════════════════════════════════════════════════════════════════
   圓角收斂:style.css 有 46 條 border-radius ≥12px 的規則(最大 .info-card 32px),
   規範 5.2 為硬性兩級——外層容器 8px、內層元件 4px。
   「過大的膠囊圓角在密集介面中會顯得鬆散,建議保留給行銷場景」(5.2)
   ══════════════════════════════════════════════════════════════════ */

/* 外層容器 → 8px */
.glass, .glass-heavy, .info-card, .admin-card, .stat-card, .settings-card,
.role-card, .sidebar, .table-container, .dropdown-content, .modal-content-glass,
.persona-card, .source-card, .checklist-container, .data-content, .ai-result-box,
.visit-section-container, .nav-jump-bar, .export-section, .drop-zone,
.mapping-grid-container, .switch-container, .scan-container, .mode-selector,
.template-item, .feedback-item, .card, .panel {
  border-radius: var(--radius-lg) !important;
}
/* 內層元件 → 4px */
input, select, textarea, button, .btn-primary, .btn-nav-home, .btn-nav-glass,
.btn-add-pill, .btn-ghost, .btn-outline, .grid-cell-input, .form-textarea,
.custom-select, .topic-row, .checkbox-item, .nav-item, .form-nav-item,
.date-badge, .meta-pill, .permission-pill, .mode-btn, .toast {
  border-radius: var(--radius-sm) !important;
}
/* 頂部膠囊導覽(.user-profile 等):原 20px。border-radius:50% 會把寬扁元素變成橢圓
   (Ken 實測回報),絕不可用於非正方形元素;依 5.2 收斂為 4px。 */
.user-profile, .header-capsules-container .user-profile {
  border-radius: var(--radius-sm) !important;
}
/* 例外:真正需要圓形的「正方形」元素 —— 頭像、狀態圓點、核選方框
   ⚠ 2026-07-31 移除 .jump-dot:它**不是正方形**。快速切換點的內容是「#1 / #2」
   加上釘選圖示、內距 4px 10px,是個寬扁的膠囊 —— 套 50% 就變成橢圓
   (Ken 回報「快速切換按鈕有問題」)。這正是本段開頭警告的那個錯誤,
   當初卻把 .jump-dot 一起列進了例外清單。改依 5.2 收斂為 --radius-sm。 */
.avatar, .user-avatar, .status-dot,
input[type="checkbox"], input[type="radio"] { border-radius: 50% !important; }
.jump-dot { border-radius: var(--radius-sm) !important; }
.slider { border-radius: 34px !important; }          /* 開關軌道維持膠囊(元件語意) */
.slider:before { border-radius: 50% !important; }    /* 滑塊本體為正方形→圓 */
.role-badge, .admin-badge { border-radius: var(--radius-sm) !important; }  /* 標籤非圓形 */
/* 表格首末欄圓角:密集表格不需要圓角(11.3) */
.log-table tr td:first-child, .log-table tr td:last-child { border-radius: 0 !important; }

/* 大圓角行內樣式收斂(5.2:容器 8px) */
[style*="border-radius: 32px"], [style*="border-radius:32px"],
[style*="border-radius: 24px"], [style*="border-radius:24px"],
[style*="border-radius: 20px"], [style*="border-radius:20px"],
[style*="border-radius: 16px"], [style*="border-radius:16px"] {
  border-radius: var(--radius-lg) !important;
}

/* 深色 hex 底(#0f172a / #1a1a1a / #1e1e2e 等)→ 白底 */
[style*="background: #0f172a"], [style*="background:#0f172a"],
[style*="background: #1a1a1a"], [style*="background:#1a1a1a"],
[style*="background: #000"], [style*="background:#000"] {
  background: var(--color-bg-container) !important;
  color: var(--color-text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   商機「說明原因」區塊(2026-08-04):Lose / Close 必填的原因欄位
   本檔上面那條 `input, select, textarea { background: ... !important }`
   會把區塊裡的標籤與輸入框刷成白底,結果整塊淡紅只剩外框跟標題列,
   看起來像壞掉(Ken 實機回報)。這裡只針對這個區塊還原成透明,
   讓底色由外層容器統一提供。
   ══════════════════════════════════════════════════════════════════ */
.opp-reason-row .opp-field-label,
.opp-reason-row .opp-field-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.opp-reason-row .opp-field-text { color: var(--color-text-primary) !important; }

/* ══════════════════════════════════════════════════════════════════
   Focus Ring 強制還原(規範 7.4 硬性底線:不得移除且未提供替代)
   2026-07-30 稽查發現全站 112 處 `outline: none`,幾乎全部寫在 JS 樣板
   字串的 inline style 裡(visit_editor.js 29、record_detail.js 28、
   index.html 16…),用意只是拿掉輸入框的預設焦點框,但都沒有補替代線索
   —— 純鍵盤操作者因此完全看不到焦點位置。

   為何用 !important 而非逐一修掉 112 處:CSS 串接規則中,樣式表的
   !important 宣告優先於沒有 !important 的 inline style。因此一條規則即可
   全站還原,且不必改動 112 個樣板字串(改動樣板字串的迴歸風險遠高於此)。
   逐頁遷移(Step 3)完成後,這條保險可隨 legacy-bridge 一併退場。

   為何用 :focus-visible 而非 :focus:滑鼠點擊不觸發,不會出現使用者
   抱怨過的「點一下就多一個框」;鍵盤 Tab 與輔助技術才顯示。
   ══════════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}
/* 深色填色按鈕上的焦點框需要外側白色襯底才看得見(對比度) */
.btn-primary:focus-visible, .ux-btn--primary:focus-visible,
.btn-danger:focus-visible, .ux-btn--danger:focus-visible {
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px var(--color-bg-container) !important;
}

/* ══════════════════════════════════════════════════════════════════
   深色 inline 底色補完(2026-07-30 Step 6 走查)
   原本只攔截 #000 / #0f172a / #1a1a1a 三個值,但全站實際用了 11 種深色 hex,
   分散在 9 個檔案。漏掉的那些在亮色主題下仍是深底,最明顯的三處:
     · persona_templates.html 的 sticky 表頭(#1a1a2e)
     · import_data.html 的匯入錯誤表頭(#151528)
     · index.html 的多選下拉標頭(#1a1a24)
   這些都是「捲動時固定在上方」的元素,深底特別顯眼。
   注意:#10b981 是成功綠(非深色),不可納入。
   ══════════════════════════════════════════════════════════════════ */
[style*="background: #1e293b"], [style*="background:#1e293b"],
[style*="background: #1a1a25"], [style*="background:#1a1a25"],
[style*="background: #1e1e24"], [style*="background:#1e1e24"],
[style*="background: #1a1a24"], [style*="background:#1a1a24"],
[style*="background: #151528"], [style*="background:#151528"],
[style*="background: #1a1a2e"], [style*="background:#1a1a2e"],
[style*="background: #151521"], [style*="background:#151521"],
[style*="background: #1a2234"], [style*="background:#1a2234"],
[style*="background: #15152a"], [style*="background:#15152a"] {
  background: var(--color-bg-container) !important;
  color: var(--color-text-primary) !important;
}
/* 上述若落在表頭上,改用表頭底灰以維持「表頭 ≠ 內容」的層次(11.3) */
thead[style*="background: #1a1a2e"], thead[style*="background:#1a1a2e"],
th[style*="background: #151528"], th[style*="background:#151528"],
.multiselect-header[style*="background: #1a1a24"] {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   表格幾何對齊規範 11.3(2026-07-30)
   規範:表頭高 40px / 底色 #F5F7FA / 字級 12 中灰、資料列高 48px。
   舊表格散用 .log-table / .data-table / .matrix-table / .flat-table 四種
   class,故一併指定;不改 HTML。

   刻意未做「首末欄凍結」:規範列為建議,但全站只有 audit_logs 一張表真的
   會橫向捲動,對其餘表格套 position:sticky 會在欄寬不足時產生欄位重疊。
   待 Step 3 逐頁遷移時針對個別表格處理。
   ══════════════════════════════════════════════════════════════════ */
.log-table thead th, .data-table thead th, .flat-table thead th,
.feedback-table thead th {
  height: var(--table-header-height);
  padding: 0 var(--space-sm) !important;
  background: var(--color-bg-hover) !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: var(--font-weight-medium) !important;
  text-align: left;
  border-bottom: 1px solid var(--color-border) !important;
  white-space: nowrap;
}
.log-table tbody td, .data-table tbody td, .flat-table tbody td,
.feedback-table tbody td {
  height: var(--table-row-height);
  padding: var(--space-xs) var(--space-sm) !important;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border) !important;
}
.log-table tbody tr:hover td, .data-table tbody tr:hover td,
.flat-table tbody tr:hover td, .feedback-table tbody tr:hover td {
  background: var(--color-bg-hover);
}

/* 長列表的表頭捲動時固定(11.3):僅套用於本來就有捲動容器的表格。
   z-index 低於 --z-sticky,確保不會蓋到彈窗與 Toast。 */
.table-container thead th, .feedback-table-container thead th {
  position: sticky; top: 0; z-index: 2;
  /* sticky 元素必須有實色底,否則捲動時會看到列的內容透上來 */
  background: var(--color-bg-hover) !important;
}
/* 捲動容器本身:圓角與底色改用 Token(audit_logs 原為 rgba(0,0,0,.1) 深灰) */
.table-container, .feedback-table-container {
  background: var(--color-bg-container) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
}

/* 搜尋命中標示(11.5):原為 #fbbf24 琥珀字配 rgba(251,191,36,.25) 淡琥珀底,
   在亮色主題下對比約 1.7:1 —— 命中的關鍵字反而是整頁最難讀的字。
   改為淡黃底 + 深色字(維持「命中」的視覺訊號,但字讀得到)。 */
mark, mark[style] {
  background: var(--color-search-highlight-bg) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1px 4px;
  font-weight: var(--font-weight-semibold);
}

/* ══════════════════════════════════════════════════════════════════
   工作台版面(REN 2026-07-31 指示):清單頁不用卡片,改用一整片表格工作區
   ══════════════════════════════════════════════════════════════════
   原本是「灰底 +(白卡 我的表單)+ 2rem 間隙 +(白卡 表格)」，兩張漂浮卡片。
   REN 的意見是這裡應該是 TABLE 而不是卡片 —— 這與規範 2.3(OX 視覺靜默)
   和 11.3(高密度表格)一致:卡片的圓角、陰影、間隙在「看資料」的頁面上
   只是把可視高度切碎,首屏能看到的列數變少。

   改法是「拿掉容器外觀」而不是改 HTML 結構:
     · .main-layout 自己變成那片白色工作區(1px 外框、無圓角、無陰影、gap 0)
     · 左右兩欄退回透明,中間只留一條 1px 分隔線
     · 表格貼齊容器邊緣;表頭 sticky 已由上方 .table-container thead th 提供

   以 body.page-worktable 限定範圍:目前只有智能中心(index.html)採用,
   待 Ken/REN 驗收後再決定是否推到其他清單頁(名片待審核、稽核日誌…)。

   為什麼寫在 legacy-bridge:這些 class(.main-layout/.sidebar/.glass)由
   style.css 定義,而 style.css 載入順序在 tokens.css 之後 —— 覆寫必須放在
   最後載入的這一支,否則吃不到(同字型/Token 的教訓)。 */

/* 工作區貼齊殼層邊緣:body 的 2rem 內距會在四周留灰邊,與「一整片」的意圖相違。
   min-height 也要一起改:style.css 給 body 下了 `min-height: 100vh`,而殼層又替 body
   加了 64px 的 margin-top(讓開 Top Bar)—— 100vh + 64px margin = 比視窗高 64px,
   於是整頁多一條 64px 的捲動,和表格內部的捲軸並存(雙捲軸)。
   工作台已自行鎖定一屏高,故這裡讓 body 交還高度控制權。 */
body.page-worktable {
  padding: 0 !important;
  min-height: 0 !important;
}

/* 各頁「內容起始高度」統一為 Top Bar 下方 24px(2026-07-31 Ken 要求對齊 Pipeline)。
   舊頁面的 body 內距是 2rem(32px),只載 tokens.css 的頁面(Pipeline / PERSONA 後台)
   用的是 --space-lg(24px)—— 換頁時內容會上下跳 8px。統一取 Token 值。
   `:not(.page-worktable)` 是必要的:工作台版面刻意貼齊邊緣(內距 0),
   而本規則的權重比它高,不排除的話會把那個滿版版面推出一圈灰邊。 */
html.ux-shell-on body:not(.page-worktable) { padding-top: var(--space-lg) !important; }

/* .container 改 flex 並鎖定一屏高。
   為什麼要改 flex(這點很反直覺,值得留痕):HTML 裡 <header> 與 <main> 之間有
   換行縮排,那些**空白文字節點**在 block 容器裡會各自生成行框 ——
   實測 .container 因此比內容多出 64px,整頁多一條 64px 的捲動(雙捲軸)。
   flex 容器會忽略只有空白的文字節點,行框隨之消失,高度才會剛好等於一屏。
   (改 HTML 刪空白也可以,但那要動 20 頁的排版習慣,不如在樣式層一次解決。) */
.page-worktable .container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--shell-topbar-height));
  min-height: 0;
}

.page-worktable .main-layout {
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: stretch;                 /* 兩欄同高,分隔線才通到底 */
  background: var(--color-bg-container);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  /* 固定成「殼層下方的一整屏」,而不是隨內容長高。
     這一點是工作台的關鍵:高度固定後,捲動發生在表格內部,
     表頭的 position:sticky 才會黏在工具列下方。
     若讓整頁捲動(原本的行為),sticky 的參考點是視窗頂端 ——
     表頭會滑到固定的 Top Bar 底下被蓋住,等於沒有吸頂。 */
  /* 高度由 .container(已鎖一屏)分配,故這裡用 flex 撐滿而非再算一次 100vh ——
     算兩次的話,任何一邊的偏移都會讓底部多出或少掉一條縫。 */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 左欄「我的表單」:去卡片,只留右側分隔線 */
.page-worktable .sidebar {
  background: transparent !important;
  border: 0;
  border-right: 1px solid var(--color-border);
  /* !important:上方「外層容器 → 8px」那條圓角規則帶 !important,不加壓不過去。
     在透明無邊框的欄位上圓角看不見,但留著會讓日後加回底色時莫名缺角。 */
  border-radius: 0 !important;
  box-shadow: none;
  backdrop-filter: none;
  padding: var(--space-md);
  min-height: 0;
  height: auto;
  position: static;                     /* 原為 sticky,在滿版工作區裡不需要 */
  overflow-y: auto;                     /* 表單很多時左欄自己捲,不牽動右邊表格 */
}

/* 右欄與清單容器:去卡片。padding 用 !important 是因為 index 的 #listView
   帶著 inline `padding: 2.5rem 2rem`,不加壓不過去(這是舊頁的行內樣式,
   等該頁正式遷移時應該從 HTML 移除,屆時這條 !important 可一併拿掉)。 */
/* min-height:0 是必要的:flex/grid 子項的預設 min-height:auto 會讓它被內容撐開,
   高度限制失效 → 又變回整頁捲動。這是 flex 佈局最常見的一個坑。 */
.page-worktable .content-area { height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.page-worktable #listView {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* 工具列(標題／搜尋／篩選／新增):與表格之間用 1px 線分隔,不用留白分隔 */
.page-worktable .list-header {
  padding: var(--space-md);
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--color-border);
}

/* 表格貼齊邊緣:外框與圓角交給工作區本身。
   flex:1 + min-height:0 + overflow-y:auto → 捲動限制在表格內,工具列與表頭都留在畫面上 */
.page-worktable .table-container {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* 工具列不可被壓縮:預設 flex 子項會為了塞下表格而縮小,搜尋框會變形 */
.page-worktable .list-header { flex: 0 0 auto; }

/* 儀表板檢視仍是卡片式(指標卡/圖表本來就該是卡片),但需要自己的內距與捲軸 */
.page-worktable #dashboardView {
  padding: var(--space-lg);
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 1100px) {
  /* 窄螢幕單欄:分隔線改到底部,否則會出現一條沒有意義的垂直線 */
  .page-worktable .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ══════════════════════════════════════════════════════════════════
   捲動下移一層:讓卡片邊框(尤其圓角)不被捲軸吃掉(2026-08-01)

   問題:style.css 讓 .card-wide / 畫廊裡的 .info-card 自己捲動
   (max-height:700px + overflow-y:auto)。Chromium 的捲軸是**方角長條**,
   會延伸到卡片最上緣與最下緣,覆蓋 12px 圓角處的邊框弧線 ——
   回饋提醒的琥珀色外框右上/右下角因此各缺一小段(Ken 回報;
   已用 headless CDP 截圖比對確認,調捲軸配色/軌道內縮都無效)。

   作法:模板多包一層 .card-scroll 承接捲動,卡片本身改 overflow:hidden。
   捲軸位在內層、被卡片的圓角裁掉,完全碰不到卡片邊框。
   用 :has(> .card-scroll) 讓它只作用在已改好模板的卡片,其餘維持原狀。
   ══════════════════════════════════════════════════════════════════ */
.info-card:has(> .card-scroll) {
  overflow: hidden !important;          /* 壓過 style.css 的 overflow-y:auto */
  display: flex;
  flex-direction: column;
}
.card-scroll {
  flex: 1 1 auto;
  min-height: 0;                        /* flex 子項預設 min-height:auto,不設會撐破卡片 */
  overflow-y: auto;
  position: relative;                   /* .sub-actions 錨在捲動內容上,維持原本會跟著捲的行為 */
}
/* 編輯中要讓下拉選單可以溢出卡片(對應 style.css 的 .editing-active 規則) */
.editing-active > .card-scroll,
.info-card.editing-active > .card-scroll {
  overflow: visible !important;
}