/* ══════════════════════════════════════════════════
MX UAT Platform — site.css
提取自 prototype_0401.html v1.0
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
自架字型：Inter（英數，woff2 Latin 子集，各 layout preload 400/600）
──────────────────────────────────────────────────
分工同業界主流（Gmail/GitHub/Linear…）：英數自架 Inter、中文（CJK）走系統字
（見 body font-family：PingFang TC／微軟正黑／Noto Sans CJK），CJK 零 webfont＝零換字。
'Inter Fallback'＝以 Arial 度量（ascent/descent/size-adjust）對齊 Inter，swap 前後字寬一致，
消除 Ctrl+Shift+R 的 FOUT 位移。unicode-range 限 Latin＝CJK 不觸發 Inter、直接落系統中文字。
⚠️ 改字型前讀 docs/ui-tokens.md；新增/移除字重須同步 wwwroot/fonts 與 preload。
══════════════════════════════════════════════════ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Inter 度量對齊的系統 fallback（Arial；僅覆蓋英數，CJK 由 body stack 落系統中文字）。
值對齊 Next.js next/font 為 Inter/Arial 計算之 override，swap 時字寬不跳。 */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
ascent-override: 90.44%;
descent-override: 22.43%;
line-gap-override: 0%;
size-adjust: 107.06%;
}
/* ══════════════════════════════════════════════════
Design Tokens（日/夜模式，全站色彩透過變數表達）
品牌色固定；表面/文字/邊框/陰影依 data-theme 切換
══════════════════════════════════════════════════ */
:root {
/* ══ Primitive 色階（design-system-v3 §2；顏料庫——只准本 token 定義區的 semantic 引用；元件/頁面/JS 一律禁用）══
🔒 primitive 值永不改色相：換皮＝新增色階＋semantic 改指向，舊階退役刪除（見 docs/ui-tokens.md 修改紀律）*/
--violet-100:#F1EDFB; --violet-200:#DCD3F4; --violet-300:#B9A7E8; --violet-400:#9E7BFF; --violet-500:#8A2BFF;
--violet-600:#5C4EA6; --violet-700:#453B7D; --violet-800:#2E2853; --violet-900:#2A1B5E;
--teal-600:#0A9396; --teal-700:#005F73;
--cyan-100:#E0FBF9; --cyan-300:#00F5FF; --cyan-600:#0E7E96;
--grey-50:#FAFAFC; --grey-100:#F4F4F8; --grey-200:#ECEDF4; --grey-250:#E3E3EE; --grey-300:#D4D5E3;
--grey-400:#A9ABBC; --grey-500:#8B8DA0; --grey-600:#5F6172; --grey-700:#393A4B; --grey-750:#2C2D42;
--grey-800:#26283B; --grey-850:#1D1E2B; --grey-900:#16161F; --grey-950:#13131B;
--amber-400:#F0B93A; --amber-500:#EE9B00; --yellow-400:#FFFF00; --lime-400:#B4FF00; --red-700:#AE2012; --pink-400:#FF5CA8;
/* ══ Semantic 色相家族（design-system-v3 §3a；Cyberpunk Violet 定案值 v6；日值於此、夜值見 dark 區）══ */
--accent: var(--violet-600); /* #5C4EA6 實心底/色點/甘特待分配（日白字 6.8:1）；夜 violet-500（夜唯一白字實心底 5.4:1）*/
--accent-text: var(--violet-600); /* #5C4EA6 連結/必填星/選中/focus 邊框（日 6.8:1）；夜 violet-400 5.3:1 */
--accent-soft: rgba(92,78,166,.12); /* 選中列底/soft chip */
--accent-fill: rgba(92,78,166,.28); /* 資料面積 */
--info: var(--teal-700); /* #005F73 點/填色/複測；夜 cyan-300 */
--info-text: var(--teal-700); /* #005F73 數值強調 7.3:1；夜 #00F5FF 12:1 */
--info-soft: rgba(0,95,115,.12);
--info-fill: rgba(0,95,115,.28);
--success: var(--teal-600); /* #0A9396 點/填色/完成（日實心白字 3.7:1 元件級，甘特 bar 可用）；夜 lime-400 */
--success-soft: rgba(10,147,150,.12);
--success-fill: rgba(10,147,150,.28); /* 無 -text：success 禁作文字 */
--warn: var(--amber-500); /* #EE9B00 點/填色/處理中/警示；夜 yellow-400 */
--warn-soft: rgba(238,155,0,.12);
--warn-fill: rgba(238,155,0,.35); /* 無 -text：warn 禁作文字 */
--warn-solid: var(--amber-500); /* 實心底：日 #EE9B00 配深字 #232433(7.0:1)；夜 #FFFF00 配 #16161F（btn-warn）*/
--danger: var(--red-700); /* #AE2012 點/填色/實心底（日白字 7.0:1）；夜 pink-400（夜實心底配深字 #16161F）*/
--danger-text: var(--red-700); /* #AE2012 錯誤/刪除/超載% 7.0:1；夜 #FF5CA8 5.8:1 */
--danger-soft: rgba(174,32,18,.12); /* btn-delete hover 底 */
--danger-solid: var(--red-700); /* 實心 danger 白字底（日夜共用深紅 7.0:1；白字壓深紅場景，夜 --danger 拉亮不可白字）*/
--neutral-dot: var(--grey-500); /* #8B8DA0 中性色點（其他/低）；低優先淡點另用 #C7C9D6/#4D4F69 */
--ink: #232433; /* 實心深底白字（標題/btn-primary 底；頭像 2026-07-10 起改 --ink-muted）；舊 --dark，日夜共用深值 */
--soft-gray: rgba(0,0,0,.05);
--icon-fill: .2; /* 全站線性 icon 雙色調填色透明度（2026-07-12 icon 線→雙色調；一處可調，見下方 svg[stroke="currentColor"] 全域規則）。日夜共用；如夜太淡可於 dark 區 override */
/* ── 輔助色 ─────── */
--ink-muted: var(--grey-600); /* #5F6172 實心底白字（全站頭像 sb-avatar 系列、avatar-md、issue-av、wo-av、kb-avatar、account-card-av、avatar-circle-lg、甘特 .bar.done、role-tag--gray、filter-btn-count；白字 6.1:1）；舊 --gray-700 實心底用途。⚠️「次文字/icon」用途改吃 --text-secondary、--text-tertiary */
--paper: #FFFFFF; /* 卡片底色（純白，靠陰影/邊框拉層次）*/
/* ── 表面層次（design-system-v3 §3b：紫調冷灰 grey 階，靠邊框/陰影排層次）
bg-page → bg-subtle → bg-card；hover 獨立 token */
--bg-page: var(--grey-50); /* #FAFAFC 畫布（最底）*/
--bg-card: var(--paper); /* #FFFFFF 主工作表面 */
--bg-elevated: #FFFFFF; /* 浮層最高階（modal/dropdown）：純白＋陰影拉層次 */
--bg-subtle: var(--grey-100); /* #F4F4F8 比 card 暗：sidebar / 看板欄底（凹·安靜）*/
--bg-section: var(--grey-200); /* #ECEDF4 分組標題列 / 表頭 / sticky header */
--bg-hover: #EFEFF6; /* 列/導覽/卡片 hover（往下加深一階）*/
--bg-sunk: var(--grey-200); /* #ECEDF4 input rest、再凹一階 */
--bg-overlay: rgba(22,22,31,.55); /* 深紫遮罩 */
--bg-load-chip: rgba(250,250,252,.9); /* Time Board % chip 底（配 --text-primary；dark 對應深值）*/
/* 互動表面 token：「卡片上的互動元件要與 card 有一階差異」
- --bg-input：凹型互動表面（form input、search-box、可填寫容器）— 可編輯態
- --bg-control：抬型互動表面（btn-secondary、page-btn、chip、member-item 等卡上按鈕）
- --bg-frozen：readonly / disabled 凍結態的攤平底色，視覺要與 --bg-input 不同
light mode：editable 維持白色（card），凍結用淺灰（subtle）— Apple iOS 表單派
dark mode：editable 凹到 sunk，凍結攤回 card 高度（見下方 [data-theme="dark"] override） */
--bg-input: var(--bg-card);
--bg-control: var(--bg-card);
--bg-frozen: var(--bg-subtle);
/* 互動 hover 填色（按鈕/控制項/popover hover）：2026-06-24 自 --bg-sunk 解耦
—— 近白後 input 靜止底(sunk #E9ECEA)需近白、但 hover 需看得見，兩者需求相反，故獨立給值 */
--bg-muted: #E7E7EF;
/* ── Glass / 毛玻璃浮層（Sidebar / Modal / Toast / Standalone-card 共用；design-system-v3 §3c 質感值）
註：.toast / .standalone-card box-shadow 吃 --glass-shadow（2026-07-11 接回，取代 --shadow-lg——glass 元件用較柔的 glass 陰影）*/
--glass-bg: rgba(255, 255, 255, .62);
--glass-border: rgba(255, 255, 255, .65);
--glass-blur: 20px;
--glass-shadow: 0 6px 24px rgba(35, 36, 51, .10);
/* Modal 質感 v3.1（2026-07-11 核可）：頂緣亮 hairline＋多層柔光；scrim 調淺＋模糊。實心不套毛玻璃 */
--modal-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(20,20,35,.09), 0 16px 36px rgba(20,20,35,.17);
--modal-scrim: rgba(22,22,31,.36);
/* ── 邊框 / 分隔線（design-system-v3 §3b：紫調冷灰，精確 hex） ─────── */
--border-faint: #E9E9F1;
--border-input: var(--grey-300); /* #D4D5E3 */
--border-card: var(--grey-250); /* #E3E3EE 近白 canvas 上卡片靠框定義 */
--border-hover: #C7C9D6; /* hover 加深 */
--divider: #E9E9F1;
/* ── Sidebar（active 用左側指示條而非漸層底色） ─────── */
--bg-sidebar: var(--bg-subtle); /* 比 bg-page 深一階（§3b：sidebar 別名指向新值）*/
--bg-sidebar-hover: var(--bg-hover); /* 還原為原本 alias */
--border-sidebar: var(--divider);
--text-sidebar: var(--text-primary);
--text-sidebar-muted: var(--text-secondary);
--text-sidebar-hint: var(--text-tertiary);
/* ── 文字色階（design-system-v3 §3b：紫調冷灰）─────── */
--text-primary: #232433; /* 對 paper #FFFFFF 對比充足 */
--text-secondary: var(--grey-600); /* #5F6172 次文字：對 page 過 AA */
/* --text-tertiary：hint / caption / annotation */
--text-tertiary: var(--grey-500); /* #8B8DA0 */
--text-link: var(--accent-text);/* §3b：連結改吃 accent-text（violet）*/
--text-on-accent: #FFFFFF;
--text-on-bright: #232433; /* 深字 on 亮實心底（warn/success夜/danger夜/info夜）＝design §6.3；夜 #16161F */
/* 舊過渡色 --warn-fg/--success-fg（bronze/gray-teal 當文字）已於 2026-07-11 UAT 全數退役：
warn/success 一律不作文字（§6）→ 徽章/badge 改中性字＋色點、警示改 danger、選中改 accent（見各元件） */
/* ── 實心族色底過渡名（併入正式家族；.sf-step 逐處字色表待 Phase 5 §5.4）
active-review 底＝success、active-doing 底＝warn-solid（實心族色，白字/深字見 design §6.3）*/
--warn-solid-deep: var(--warn-solid); /* 併入 warn-solid 家族（舊 orange-dark）*/
/* ── 陰影（Linear：只給「浮層」，平面元素一律靠邊框，不用陰影）
sm：小浮層（dropdown / popover / menu / tooltip）
lg：大浮層（modal / toast / lightbox / standalone / 拖曳中）
兩階都帶 1px ring；dark 的 ring 會拉亮，因黑陰影在深底不可見、靠 ring 界定輪廓
UAT 決議（2026-07-11）：v3 曾試多層 hairline 配方，回饋差異不明顯→回復原單層配方 */
--shadow-sm: 0 2px 8px rgba(17,24,39,.08), 0 0 0 1px rgba(0,0,0,.05);
--shadow-lg: 0 8px 28px rgba(17,24,39,.12), 0 0 0 1px rgba(0,0,0,.06);
/* ── 圓角（Linear 風：比 v1 再緊，精密工具感）─────── */
--r-xs: 4px; /* 小按鈕、icon button、badge、view-btn（Linear 對齊：原 3px）*/
--r-sm: 6px; /* 按鈕、input、小元件（Linear 對齊：原 5px）*/
--r-md: 8px; /* 內層卡片、列表面板、區塊容器（Linear 對齊：原 7px）*/
--r-lg: 12px; /* 外層卡片、Modal（Linear 對齊：原 9px，Linear 大卡主力 12）*/
--r-pill: 999px; /* 搜尋框等特定語意場景保留 */
/* ── 間距尺度（Linear 4px base grid；2026-06-14 新增，收斂全站零散 px）─────
規則：嚴格 4 倍數階；--space-0_5 為 2px 例外（badge/chip 內距、細指示條）。
1px hairline 與 >40px 版面特例不進此系統。token 不隨主題切換（不在 dark 區 override）。*/
--space-0_5: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
/* ── 表格列高（2026-07-22 DS 定案：同類全站統一、以視覺舒適為準、無「表頭≥資料列」鐵則）
資料列＝標準列表基準；密集資料列＝甘特/負載時間軸（共用一值＝兩者密度一致）；
刻度行＝時間軸月/日/星期薄標尺；分組標題列取舒適下限。token 不隨主題切換。詳見 docs/ui-tokens.md。*/
--row-data: 44px; /* 標準列表資料列（.list-row / issue-table / 報價表）*/
--row-data-dense: 40px; /* 甘特/負載資料列（任務列/成員列，兩者共用＝密度一致）*/
--row-axis: 20px; /* 甘特/負載時間軸刻度行（月/日/星期，每行）*/
--row-group: 40px; /* 分組/組別標題列最小高 */
/* ── 字重 / 行高 ─────── */
--fw-medium: 500; /* 中等粗體：sidebar 標籤、filter chip */
--fw-bold: 600; /* 粗體：常規 emphasized 文字、metric 數字 */
--fw-heading: 500; /* 標題字重（Linear 對齊：原 700 Bold → Medium 500；Linear 標題不用 Bold）*/
--lh-normal: 1.65;
--lh-relaxed: 1.7;
/* ── 互動（v2）─────── */
/* focus ring：顏色/幾何解耦——色走 --focus-ring-color，各 selector 自留幾何（spread/inset）。
UAT 決議（2026-07-11）：focus 只保留「變色細框」、全站不加發光；glow 效果移除 */
--focus-ring-color: rgba(92,78,166,.25); /* violet accent 25% */
--focus-ring: 0 0 0 3px var(--focus-ring-color);
/* ── btn-primary（violet 招牌 CTA：accent 實心白字；日 6.8:1 / 夜 5.4:1 皆過 AA）*/
--btn-primary-bg: var(--accent);
--btn-primary-fg: var(--text-on-accent);
--btn-primary-hover: var(--violet-700); /* 日 hover 加深 #453B7D（夜見 dark override）*/
/* ── 內部留言 note-box（2026-07-22：改金系 amber，脫離 warn/accent）。
為何改：warn 夜間翻純黃 #FFFF00 大面積刺眼；accent 又與品牌紫難分＝易誤把內部當公開。
解法：--note-* 直接指 primitive amber、自帶日夜值（不寄生別的 semantic）；面積紀律＝大面積只鋪淡底、飽和金只在細條/chip/toggle/送出鈕。
用於：左條/chip/toggle-on/送出鈕(--note-accent)、卡底(--note-bg)、邊(--note-border)、label/chip 字(--note-strong)、金鈕深字(--note-btn-text)；內文字仍中性 --text-primary */
--note-bg: rgba(238,155,0,.08); /* amber #EE9B00 @8%（大面積淡底不刺眼）；夜見 dark override */
--note-border: rgba(238,155,0,.35); /* amber @35% */
--note-accent: var(--amber-500); /* #EE9B00 內部留言金：左條/chip/toggle-on/送出鈕 */
--note-strong: #8A5A00; /* 深金：label/chip 字（白底過 AA）*/
--note-btn-text: #1D1E2B; /* 金底送出鈕深字（白字在金上破 AA）*/
--note-accent-hover: #D98E00; /* 金鈕 hover 深一階 */
/* --warn-border 保留給真警示 .unsaved-pill（時數未存）；warn 家族其餘在上方 semantic 區 */
--warn-border: rgba(238,155,0,.45); /* warn 主值 #EE9B00 @45%（unsaved-pill 邊框）*/
/* ── select 箭頭（token 化：日夜自適應，取代寫死 data-URI；stroke=--text-secondary #5F6172）*/
--select-chevron: url("data:image/svg+xml;utf8,");
/* ── 第三方品牌色 ─────── */
--google-blue: #4285F4;
/* ── Scrollbar（紫調冷灰）*/
--scroll-thumb: var(--grey-400); /* #A9ABBC */
--scroll-thumb-hover: var(--grey-500); /* #8B8DA0 */
/* ── Legacy alias（既有引用沿用 - 直接刪除無效，保留指向新 token）*/
--body-bg: var(--bg-page);
--card-bg: var(--bg-card);
--bg-tooltip: #26283B; /* tooltip chip：light/dark 皆固定（§3b：深紫底白字）*/
/* ── 字級階梯（2026-07 整組上推一階：舊「小」body11 太小移除，預設＝舊「大」）：xs13）
══════════════════════════════════════════════════ */
[data-theme="dark"] {
/* ── 表面層次（design-system-v3 §3b night：深紫黑 grey 暗階）*/
--paper: var(--grey-850); /* #1D1E2B */
--bg-page: var(--grey-900); /* #16161F */
--bg-card: var(--paper); /* #1D1E2B 主工作表面 */
--bg-elevated: var(--grey-800); /* #26283B */
--bg-subtle: var(--grey-950); /* #13131B 比 card 暗：sidebar / 看板欄底 */
--bg-section: #26293E; /* 分組標題列 / 表頭 / sticky header */
--bg-hover: #23243A; /* hover 底色（card 可感知）*/
--bg-sunk: #101018;
--bg-overlay: rgba(0,0,0,.80);
--bg-tooltip: #26283B; /* tooltip chip：與 light 一致，刻意不切換 */
--bg-load-chip: rgba(22,22,31,.85); /* Time Board % chip 深底（配 dark --text-primary）*/
/* 互動表面 token（dark：拉開層次）*/
--bg-input: var(--bg-sunk);
--bg-control: var(--bg-elevated);
--bg-frozen: var(--bg-card);
/* alias */
--bg-muted: #2E3050; /* 控制項 hover（疊 control 需可感知回饋）*/
/* ── Glass dark（design-system-v3 §3c night：深底 + 微亮邊；blur 統一為 20px）*/
--glass-bg: rgba(29, 30, 43, .62);
--glass-border: rgba(255, 255, 255, .10);
--glass-blur: 20px;
--glass-shadow: 0 8px 30px rgba(0, 0, 0, .40);
--modal-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 8px rgba(0,0,0,.40), 0 18px 42px rgba(0,0,0,.52);
--modal-scrim: rgba(6,6,12,.60);
/* ── 邊框 / 分隔線（design-system-v3 §3b night：紫調冷灰）*/
--border-faint: #292B41;
--border-input: var(--grey-700); /* #393A4B */
--border-card: var(--grey-750); /* #2C2D42 */
--border-hover: #4D4F69;
--divider: #292B41;
/* ── Sidebar（dark：與 subtle 同階凹底 + 右側分隔線）*/
--bg-sidebar: var(--bg-subtle); /* #13131B */
--bg-sidebar-hover: var(--bg-hover);
--border-sidebar: var(--divider);
--text-sidebar: var(--text-primary);
--text-sidebar-muted: var(--text-secondary);
--text-sidebar-hint: var(--text-tertiary);
/* ── 文字色階（design-system-v3 §3b night：冷白 / 紫調冷灰）*/
--text-primary: #EEEFFC; /* 對 bg-card #1D1E2B 對比充足 */
--text-secondary: #B0B5C0;
--text-tertiary: #858699;
--text-link: var(--accent-text); /* violet 亮版 */
/* ── Semantic 色相家族 dark override（design-system-v3 §3a night；夜螢光功能色）*/
--accent: var(--violet-500); /* #8A2BFF 實心底白字 5.4:1（夜唯一白字實心底）*/
--accent-text: var(--violet-400); /* #9E7BFF 連結/必填星/選中/focus 邊框 5.3:1 */
--accent-soft: rgba(138,43,255,.16);
--accent-fill: rgba(138,43,255,.30);
--info: var(--cyan-300); /* #00F5FF 點/填色/複測 */
--info-text: var(--cyan-300); /* #00F5FF 12:1 */
--info-soft: rgba(0,245,255,.16);
--info-fill: rgba(0,245,255,.30);
--success: var(--lime-400); /* #B4FF00 點/填色/完成 */
--success-soft: rgba(180,255,0,.16);
--success-fill: rgba(180,255,0,.30);
--warn: var(--yellow-400); /* #FFFF00 點/填色/處理中 */
--warn-soft: rgba(255,255,0,.16);
--warn-fill: rgba(255,255,0,.32);
--warn-solid: var(--yellow-400); /* 底 #FFFF00 配深字 #16161F（btn-warn）*/
--danger: var(--pink-400); /* #FF5CA8 點/填色（實心底配深字 #16161F，白字 2.9:1 禁用）*/
--danger-text: var(--pink-400); /* #FF5CA8 5.8:1 */
--danger-soft: rgba(255,92,168,.16);
--neutral-dot: #858699; /* 中性色點（低優先淡點另用 #4D4F69）*/
/* --ink #232433・--ink-muted #5F6172・--danger-solid #AE2012＝日夜共用，不 override（見 :root）*/
/* 舊過渡色 --warn-fg/--success-fg dark 已於 2026-07-11 UAT 退役（見 :root 註）*/
--soft-gray: rgba(255,255,255,.07);
/* ── 文字 on accent / on bright（accent 夜實心底仍配白字；warn/success/danger 夜亮底配深字 #16161F）*/
--text-on-accent: #FFFFFF;
--text-on-bright: #16161F; /* §6.3：夜亮實心底深字 */
/* ── 陰影 dark：黑陰影在深底不可見 → 浮層靠「明顯亮邊 ring」界定輪廓（.14/.18）+ 表面色比背景亮
（--bg-elevated vs --bg-page 色差，浮層範圍主要靠這個色差被看見）*/
--shadow-sm: 0 4px 14px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.14);
--shadow-lg: 0 16px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18);
/* ── select 箭頭 dark 亮版（stroke=--text-tertiary #858699）*/
--select-chevron: url("data:image/svg+xml;utf8,");
/* ── 互動：focus-ring 暗模式（violet 拉亮 alpha 配深底；UAT 決議：不加發光）*/
--focus-ring-color: rgba(138,43,255,.38);
--focus-ring: 0 0 0 3px var(--focus-ring-color);
/* ── btn-primary 暗模式 → violet 招牌 CTA（accent #8A2BFF 實心白字 5.4:1；bg/fg 承 :root、僅 hover override）*/
--btn-primary-hover: var(--violet-400); /* #9E7BFF 夜 hover 提亮 */
/* ── 內部留言 note-box 暗模式（2026-07-22 金系）：收一階暖金 amber-400 #F0B93A，刻意不吃 warn 夜 #FFFF00 的刺眼 */
--note-bg: rgba(240,185,58,.12); /* amber-400 #F0B93A @12%（大面積淡底不刺眼）*/
--note-border: rgba(240,185,58,.38);
--note-accent: var(--amber-400); /* #F0B93A 夜間暖金 */
--note-strong: #F5C765; /* 亮金字（深底過 AA）*/
--note-btn-text: #16161F; /* 金底送出鈕深字 */
--note-accent-hover: #E0A62E; /* 金鈕 hover */
--warn-border: rgba(255,255,0,.35); /* warn 夜主值 #FFFF00 @35%（unsaved-pill 邊框）*/
/* ── scrollbar */
--scroll-thumb: rgba(255,255,255,.20);
--scroll-thumb-hover: rgba(255,255,255,.35);
}
/* 主題切換平滑過渡（preload 期間關閉避免首屏閃動） */
html:not(.sb-preload) body,
html:not(.sb-preload) #main,
html:not(.sb-preload) #content,
html:not(.sb-preload) .card,
html:not(.sb-preload) .kb-col,
html:not(.sb-preload) .kb-card,
html:not(.sb-preload) .modal,
html:not(.sb-preload) .reply-card,
html:not(.sb-preload) .psc {
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* sidebar 保留原 width/min-width transition，同時加上色彩 */
html:not(.sb-preload) #sidebar {
transition: width .2s ease, min-width .2s ease,
background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* ── 全站導航 fade（搭配 site-chrome.js 的 mxReload/mxNavigate） ───
reload/href 觸發前先加 .navigating 讓畫面淡出，避免「modal 關 → 舊內容停留 → 整頁閃白」的中間態 */
body.navigating {
opacity: .35;
transition: opacity .12s ease-out;
pointer-events: none;
}
/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family:
'Inter', 'Inter Fallback',
-apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI',
'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHeiUI', 'Microsoft JhengHei',
sans-serif;
font-feature-settings: 'cv11', 'ss01', 'palt';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--body-bg);
color: var(--text-primary);
font-size: var(--fs-lg);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 數字 / 統計欄位等寬數字（Apple 派細節）*/
.stat-value, .num,
table th, table td,
.info-value, .issue-num,
.psc-total-badge {
font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
/* ── 全域動畫 ─────────────────────────────────────── */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════
Layout
══════════════════════════════════════════════════ */
#app { flex: 1; display: flex; overflow: hidden; position: relative; }
/* ── Sidebar ─────────────────────────────────────── */
#sidebar {
width: 224px; min-width: 224px;
/* 改回不透明 --bg-sidebar（冷 sage）做出與主畫面的層次；
原毛玻璃 --glass-bg 近白透明，與主區區隔不足（PM 回報太淺）。
暗色版 --bg-sidebar 仍為深色，方向一致。 */
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-card); /* 明確分隔線（底色層次 + 線雙管，仿 Linear/Notion）*/
display: flex; flex-direction: column;
overflow: hidden;
transition: width .2s ease, min-width .2s ease;
}
/* 首次 paint 前關閉 transition，避免 class 套用當下被動畫化 */
html.sb-preload #sidebar { transition: none !important; }
.sb-brand {
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); /* 左 22 對齊 nav icon 左緣（#sb-nav 10 + a 12）*/
position: relative;
display: flex; align-items: center; gap: var(--space-2);
}
.sb-brand-name {
flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-medium);
color: var(--text-sidebar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* theme-aware utility：讓同一份 markup 放兩種素材，依 [data-theme] 切換顯示 */
.theme-dark-only { display: none; }
[data-theme="dark"] .theme-light-only { display: none; }
[data-theme="dark"] .theme-dark-only { display: block; }
#sb-nav { flex: 1; padding: var(--space-2) var(--space-2); overflow-y: auto; }
.sb-section {
font-size: var(--fs-sm); color: var(--text-sidebar-hint); letter-spacing: .04em; font-weight: var(--fw-medium);
padding: var(--space-2) var(--space-3) var(--space-1); margin-top: var(--space-1);
}
/* 側欄選單列。`.sb-foot .sb-link`（側欄底部固定區的按鈕）共用同一份規則——
同概念不寫第二份樣式，差異只在它是