/* 網路基準（topo-ssot）樣式：不依賴任何外部字型或 CSS 框架，可完全離線使用 */
:root {
  --bg: #f3f6fa; --panel: #ffffff; --surface: #f8fafc; --line: #e1e7ee; --line-strong: #cbd5df; --text: #1f2933; --muted: #5f6d7e; --accent: #0b6bcb; --accent-soft: #e6f0fb;
  --err: #d93025; --err-soft: #fdecea; --warn-soft: #fff4e0; --info: #3b6ea8; --info-soft: #e8f0fa; --ok: #1e8e3e; --ok-soft: #e6f4ea;
  /* 狀態文字色：對白底、狀態淺底與表面色都 ≥ 4.5:1；與 theme.js 的 text 一致（有測試比對）。--err 等飽和色只用於圖形標記 */
  --err-text: #b3261e; --warn-text: #8a5300; --ok-text: #17692f; --info-text: #315d8a;
  /* 狀態框線（狀態 chip、提示框）：比 --*-soft 深一階 */
  --err-line: #f8d6d2; --warn-line: #f3dfb9; --info-line: #d5e3f2; --ok-line: #d0ead7;
  /* 設備類型色：與 theme.js 的 kind 一致（有測試比對，不被 var() 使用，列在測試的例外清單）；不用狀態色的色相 */
  --fw: #7b208e; --sw: #2795b5; --rt: #335dcd; --host: #977af8; --unk: #535d62;
  /* 設備類型 chip（.chip.kind-*）的淺底與文字色（文字對底 ≥ 4.5:1，有測試） */
  --kind-firewall-bg: #f3e6f6; --kind-firewall-fg: #6a1b7b; --kind-switch-bg: #e2f2f7; --kind-switch-fg: #1d6177;
  --kind-router-bg: #e5ebfb; --kind-router-fg: #2849a8; --kind-host-bg: #efeafe; --kind-host-fg: #5a3dc0;
  --kind-unknown-bg: #eceff1; --kind-unknown-fg: #46505a;
  /* 強調色的按下／hover 深一階；強調底上的文字 */
  --accent-strong: #095aa9; --on-accent: #ffffff;
  /* 危險操作（.danger，例如清除基準）：平時的文字色與 hover 的框線 */
  --danger-text: #8c4a46; --danger-line: #f2c9c5;
  /* 次要文字：預設 chip、表頭、詳情小標 */
  --chip-text: #3c4650; --th-text: #566678; --heading-text: #405164;
  /* 表格的錯誤列（.bad）與原文的定位高亮 */
  --row-bad: #fff8f7; --row-bad-hover: #fff0ed; --hl-bg: #fff3c4;
  /* 選取或定位的列（表格視窗的選取列、管理面設定的定位列）：同 theme.firewall.focus 的 bg／border（有測試） */
  --row-focus-bg: #e6f0fb; --row-focus-line: #0b6bcb;
  /* 疊在畫布上的半透明底（圖例、層級說明、操作提示） */
  --overlay: rgba(255, 255, 255, .96); --overlay-soft: rgba(255, 255, 255, .9);
  /* 深底浮動提示（拓樸圖的 tooltip） */
  --tooltip-bg: #1f2933; --tooltip-fg: #ffffff;
  /* 對話框的框線與背後的遮罩 */
  --dialog-line: rgba(203, 213, 223, .8); --backdrop: rgba(15, 23, 32, .45);
  /* L4 格子、標籤與服務膠囊的框線（半透明，疊在 theme.l4 的底色上） */
  --l4-line: rgba(31, 41, 51, .14); --l4-line-strong: rgba(31, 41, 51, .18); --l4-line-hover: rgba(31, 41, 51, .35);
  /* 不隨配色改變的亮色：強制色彩模式下的趨勢圖像圖片一樣保留原配色 */
  --fixed-light-bg: #f8fafc; --fixed-light-text: #1f2933;
  /* 嚴重度標記：與 theme.js 的 sev 一致（有測試比對）；外形與畫布相同：錯誤方形、警告三角形 */
  --sev-error: #d93025; --sev-warn: #c27a00;
  /* 文字輸入框、select、textarea 的邊框：欄位只靠這條線辨識，對白底與表面色需 ≥ 3:1（有測試） */
  --line-input: #7d8b9a;
  /* 中性底色：表面（表頭、斑馬列、說明框）、hover、標籤底色；強調色的 hover */
  --surface-hover: #f3f6f9; --neutral-soft: #eef1f4; --accent-hover: #edf4fb; --line-hover: #aebdcb; --line-soft: #edf0f3;
  /* 字型：拉丁字型在前、繁中字型在後，涵蓋 macOS／Windows／Linux；canvas 用 theme.js 的 font 同一串（有測試比對）。
     等寬字型只給 IP、MAC、規則 ID、行號與原文 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono: var(--font-mono);
  /* 字級（整數階梯，窄螢幕不縮小）：xs 13 只給規則 ID、行號、圖例這類標記；sm 14 次要文字與標籤；md 14 表格與清單；
     base 15 內文、按鈕與輸入框；lg 17 小標題；xl 20 詳情標題；2xl 24 頁面標題 */
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px;
  /* 行高：內文 1.65、說明與長段落 1.7、標題與控制項 1.4 */
  --lh-body: 1.65; --lh-prose: 1.7; --lh-heading: 1.4;
  /* 控制項高度：滑鼠 36px，觸控（pointer: coarse）44px */
  --control-h: 36px;
  /* 圓角：lg 卡片與對話框、預設 8 選單與框、sm 按鈕與輸入框；chip 是半個列高；cell L4 格子；xs 程式碼與小徽章；
     2xs 抽屜把手；mark 錯誤方形標記；pill 膠囊與進度條 */
  --radius-lg: 12px; --radius: 8px; --radius-sm: 5px; --radius-chip: 11px; --radius-cell: 4px; --radius-xs: 3px;
  --radius-2xs: 2px; --radius-mark: 1px; --radius-pill: 999px;
  /* 陰影：sm 卡片、md 浮層；xs 按鈕、header 頁首、lg 歡迎卡、dialog 對話框；primary 主要按鈕（hover 深一階） */
  --shadow-sm: 0 1px 3px rgba(22, 37, 54, .08); --shadow-md: 0 8px 24px rgba(22, 37, 54, .12);
  --shadow-xs: 0 1px 1px rgba(22, 37, 54, .025); --shadow-header: 0 1px 4px rgba(22, 37, 54, .035);
  --shadow-lg: 0 14px 42px rgba(22, 37, 54, .1); --shadow-dialog: 0 20px 60px rgba(22, 37, 54, .24);
  --shadow-primary: 0 2px 5px rgba(11, 107, 203, .2); --shadow-primary-hover: 0 3px 8px rgba(11, 107, 203, .24);
  /* 停用：按鈕、篩選選項、流程步驟與輸入框共用同一個透明度 */
  --disabled-opacity: .48;
  /* 疊放順序（由下而上）：base 拓樸圖；sticky 表頭；raised 聚焦的控制項與表格角落；layer 歡迎畫面與 L4；overlay 工具列、圖例與提示；
     work 工作畫面、欄寬把手、資料中心與抽屜；header 頁首與通知；float L4 浮動說明與展開的搜尋；banner-top 資料中心開啟時的通知；
     tooltip 拓樸圖提示；dropdown 搜尋結果；menu 下拉選單與浮動面板 */
  --z-base: 0; --z-sticky: 1; --z-raised: 2; --z-layer: 4; --z-overlay: 5; --z-work: 6; --z-header: 7; --z-float: 8;
  --z-banner-top: 9; --z-tooltip: 20; --z-dropdown: 50; --z-menu: 60;
  /* 動效時長：row 清單列 hover；fast 按鈕、輸入框與 chip；progress 進度條；fade 通知與提示淡出；loop 不確定進度的循環；
     instant 減少動態效果時的覆寫 */
  --dur-row: .12s; --dur-fast: .14s; --dur-progress: .15s; --dur-fade: .4s; --dur-loop: 1.2s; --dur-instant: .01ms;
  /* 焦點框：內圈白、外圈強調色實線（強調色對白底與表面色 ≥ 3:1，有測試）；強制色彩模式改用 outline */
  --focus-ring-inner: #ffffff;
  /* 品牌圖示下方的節點 */
  --brand-leaf: #22a338;
  --focus-ring: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--accent);
  /* 按鈕、連結、清單列與表格列的焦點：2px 實線 outline（強調色，對白底與表面色 ≥ 3:1，有測試） */
  --focus-outline: 2px solid var(--accent);
  /* 原生控制項（捲軸、date picker、select 下拉）跟著畫面的深淺 */
  color-scheme: light;
}
/* 深色：<html data-theme="dark">，只重新定義語意變數；--fixed-light-* 刻意不變。
   屬性由 app-scheme.js 設定，等於 theme.mode：偏好是深色，或跟隨系統而 prefers-color-scheme 是 dark（JS 的 matchMedia 判斷）。
   所以這裡不另寫 @media (prefers-color-scheme: dark) 的複本，深色變數只有這一份（有測試）；首次繪製前由 index.html 的 inline script 設好，不閃。
   --surface、--text、--muted、--*-text、--fw 等、--sev-* 與 theme.js 的 palettes.dark 一致（有測試），
   文字對底色 ≥ 4.5:1、圖形與欄位邊框 ≥ 3:1（有測試）。亮色的「淺底配深字」在這裡是「深底配淺字」 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f141a; --panel: #1c232c; --surface: #151b23; --line: #2c3540; --line-strong: #3c4754; --text: #e6edf3; --muted: #9aa7b4; --accent: #539ce2; --accent-soft: #162a40;
    --err: #f56258; --err-soft: #3a1d1c; --warn-soft: #33260f; --info: #6f9fd8; --info-soft: #172a40; --ok: #3cb672; --ok-soft: #15301e;
    --err-text: #ff8a80; --warn-text: #f0b354; --ok-text: #6fcf8a; --info-text: #8ab8e8;
    --err-line: #5c2a27; --warn-line: #574018; --info-line: #2a4566; --ok-line: #24502f;
    --fw: #a148cc; --sw: #3296a9; --rt: #92b1e0; --host: #9b83ff; --unk: #a2a2a2;
    --kind-firewall-bg: #33203d; --kind-firewall-fg: #e0b0f0; --kind-switch-bg: #12313b; --kind-switch-fg: #8fd3e8;
    --kind-router-bg: #1c2a4d; --kind-router-fg: #b4c6f5; --kind-host-bg: #2a2346; --kind-host-fg: #c9bcfd;
    --kind-unknown-bg: #262e37; --kind-unknown-fg: #c5ced6;
    --accent-strong: #79b4ec; --on-accent: #0b1520;
    --danger-text: #f0a39d; --danger-line: #6b3330;
    --chip-text: #c5ced6; --th-text: #a9b5c2; --heading-text: #b8c4d0;
    --row-bad: #26191a; --row-bad-hover: #321d1d; --hl-bg: #4a3d10;
    --row-focus-bg: #17304a; --row-focus-line: #539ce2;
    --overlay: rgba(28, 35, 44, .96); --overlay-soft: rgba(28, 35, 44, .9);
    --tooltip-bg: #e6edf3; --tooltip-fg: #11161c;
    --dialog-line: rgba(60, 71, 84, .9); --backdrop: rgba(0, 0, 0, .6);
    --l4-line: rgba(230, 237, 243, .16); --l4-line-strong: rgba(230, 237, 243, .22); --l4-line-hover: rgba(230, 237, 243, .4);
    --sev-error: #f56258; --sev-warn: #e0960f;
    --line-input: #6f7c8c;
    --surface-hover: #1f2731; --neutral-soft: #262e37; --accent-hover: #182a3d; --line-hover: #4c5866; --line-soft: #232b35;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3); --shadow-header: 0 1px 4px rgba(0, 0, 0, .4);
    --shadow-lg: 0 14px 42px rgba(0, 0, 0, .5); --shadow-dialog: 0 20px 60px rgba(0, 0, 0, .6);
    --shadow-primary: 0 2px 5px rgba(83, 156, 226, .25); --shadow-primary-hover: 0 3px 8px rgba(83, 156, 226, .3);
    --focus-ring-inner: #0f141a;
    --brand-leaf: #3cb672;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* CJK 排版：不拆英數（word-break: normal），太長的字才換行；標點避頭尾（line-break: strict）；
   中英之間自動加間距、全形標點擠壓為漸進增強，不支援的瀏覽器會忽略 */
body { font: var(--fs-base)/var(--lh-body) var(--font-sans); color: var(--text); background: var(--bg); overflow: hidden;
  word-break: normal; overflow-wrap: break-word; line-break: strict; text-autospace: normal; text-spacing-trim: normal; }
h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: 600; letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; line-height: var(--lh-heading); }
button { min-height: var(--control-h); cursor: pointer; border: 1px solid var(--line-strong); background: var(--panel); border-radius: var(--radius-sm); padding: 6px 11px; box-shadow: var(--shadow-xs); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease; }
button:not(.chip):hover { border-color: var(--line-hover); background: var(--surface); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-primary); font-weight: 600; }
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: var(--shadow-primary-hover); }
button.ghost { border-color: transparent; background: transparent; box-shadow: none; }
button.ghost:hover { background: var(--neutral-soft); }
/* 危險操作的修飾（例如設定「本機資料」的清除基準）：平時是暗紅文字，hover 時錯誤淺底；選單項目的 hover 底色規則較具體，另外列出 */
.danger { color: var(--danger-text); }
.danger:hover:not(:disabled), .menu .menu-item.danger:hover:not(:disabled) { color: var(--err-text); border-color: var(--danger-line); background: var(--err-soft); }
button:focus-visible, a:focus-visible, summary:focus-visible, .fgroup > .head:focus-visible, .fitem:focus-visible, tr.click:focus-visible { outline: var(--focus-outline); outline-offset: 2px; position: relative; z-index: var(--z-raised); }
/* 表格列與清單列貼著捲動框，外框畫在內側才不會被裁掉（tr 的 box-shadow 在 Chrome／Safari 不會畫） */
tr.click:focus-visible, .fitem:focus-visible, .fgroup > .head:focus-visible { outline-offset: -2px; }
/* 停用：一律 --disabled-opacity 與 not-allowed（按鈕、篩選選項、流程步驟、輸入框） */
button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; box-shadow: none; }
/* 原生勾選框與單選鈕：勾選色用強調色，深色時跟著 :root 的 color-scheme 畫成深色控件 */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); color-scheme: inherit; }
input[type=date], input[type=text], input[type=search], select, textarea { min-height: var(--control-h); border: 1px solid var(--line-input); border-radius: var(--radius-sm); padding: 6px 9px; background: var(--panel); transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
input:disabled:hover, select:disabled:hover, textarea:disabled:hover { border-color: var(--line-input); }
.mono { font-family: var(--mono); font-size: var(--fs-sm); }
/* 說明文字與長段落 */
.note-box, .pane-note, .empty-detail, .layer-note, .dlg .db > p, .work-card > p { line-height: var(--lh-prose); }
/* 只給螢幕閱讀器的文字（例如鍵盤在拓樸圖上移到的設備） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- 版面 ---------- */
/* 頁首的高度依內容（流程步驟放不下時換行），至少 48px */
/* 三列：頁首、窄螢幕的工作區列、主畫面。基準的摘要在步驟列與右側的總覽，沒有另外的摘要列與頁尾 */
#app { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100vh; }
#app > header { grid-row: 1; }
#mobile-workspaces { grid-row: 2; }
#main { grid-row: 3; }
/* 資料中心（#hub）和 #main 疊在同一格（也蓋住窄螢幕的工作區列）：明確指定欄，避免自動放置另開一欄 */
#app > * { grid-column: 1; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-header); z-index: var(--z-header); }
header .brand { font-weight: 600; font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
header .brand svg { width: 22px; height: 22px; }
/* 品牌圖示：顏色跟著配色（index.html 的 SVG 不寫色碼） */
header .brand .brand-node { fill: var(--accent); }
header .brand .brand-leaf { fill: var(--brand-leaf); }
header .brand .brand-line { fill: none; stroke: var(--accent); }
header .spacer { flex: 1; }
/* 頁首右側：資料中心與 ⚙ 設定（app-settings.js） */
.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { width: var(--control-h); padding: 0; font-size: var(--fs-xl); line-height: 1; }
/* 下拉選單（A.bindMenu）：勾選項目以 ✓、單選以 • 標示（不只靠顏色），危險的操作用錯誤色 */
.menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 210px; display: flex; flex-direction: column; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: var(--z-menu); }
.menu .menu-item { position: relative; display: flex; align-items: center; width: 100%; min-height: var(--control-h); padding: 5px 12px 5px 28px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; text-align: left; white-space: nowrap; }
.menu .menu-item:hover:not(:disabled), .menu .menu-item:focus-visible { background: var(--accent-soft); }
.menu .menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.menu .menu-item:active { transform: none; }
.menu .menu-item:disabled { color: var(--muted); cursor: not-allowed; }
.menu .menu-item[aria-checked="true"]::before { content: "✓"; position: absolute; left: 10px; color: var(--accent); font-weight: 600; }
.menu .menu-item[role="menuitemradio"][aria-checked="true"]::before { content: "•"; left: 12px; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }
.menu-label { padding: 4px 12px 2px 28px; color: var(--muted); font-size: var(--fs-xs); }
/* 工具列的路由追蹤表單：和工具列的選單一樣在按鈕下方（left 由 A.placeTrace 對齊按鈕） */
.toolbar .popover { top: calc(100% + 4px); left: 0; max-width: calc(100vw - 32px); }
/* 流程步驟（app-panes.js）：導覽，目前的一步除了顏色，還有粗體與底線（aria-current="step"）；每一步有狀態文字 */
.steps ol { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.steps button { display: inline-flex; align-items: baseline; gap: 5px; min-height: var(--control-h); padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); box-shadow: none; white-space: nowrap; }
.steps button:hover { background: var(--surface-hover); color: var(--text); border-color: transparent; }
.steps .step-st { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.steps button[aria-current="step"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.steps button[aria-current="step"] .step-st { font-weight: 600; }
.steps button[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }
.steps button[aria-disabled="true"]:hover { background: transparent; color: var(--muted); }
#main { display: grid; grid-template-columns: 330px minmax(0, 1fr) 400px; min-height: 0; }
/* 欄的位置固定：「修正」、「驗證」沒有左側清單（#left 隱藏、寬度 0）時，中間仍在第二欄 */
#main > #left { grid-column: 1; } #main > #center { grid-column: 2; } #main > #right { grid-column: 3; }
#main > * { grid-row: 1; }
#left, #right { background: var(--panel); min-height: 0; display: flex; flex-direction: column; }
.left-head { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--panel), var(--surface)); }
.left-title { margin: 0; font-size: var(--fs-lg); }
.left-title:focus { outline: none; }
.left-title:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
#left { border-right: 1px solid var(--line); }
#right { border-left: 1px solid var(--line); }
#left, #right { position: relative; }
.grip { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: var(--z-work); }
.grip-left { right: -3px; } .grip-right { left: -3px; }
.grip:hover, .grip.on { background: var(--accent-soft); }
/* 中間：#stage 是工作畫面本身（依流程步驟：拓樸圖、修正計畫、驗證）。
   工作畫面疊在拓樸圖上（同一格）：畫布的大小不因切換而改變，位置、縮放、選取都保留 */
#center { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; }
/* z-index: 0 讓拓樸圖上的提示（tooltip 等）都留在工作畫面底下 */
.view-graph { position: absolute; inset: 0; z-index: var(--z-base); }
.work { position: absolute; inset: 0; z-index: var(--z-work); overflow: auto; overflow-x: hidden; background: var(--bg); container-type: inline-size; }
.work-inner { max-width: 1400px; margin: 0 auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.work-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-width: 0; }
.work-title { margin: 0; font-size: var(--fs-2xl); }
.work-title:focus { outline: none; }
.work-title:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.work-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.work-card-title { margin: 0 0 8px; font-size: var(--fs-xl); }
#compare-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#compare-body .work-card > .pane-body, #compare-body .baseline-diff { padding: 14px; }
#compare-body .summary { padding-left: 0; padding-right: 0; background: none; }
/* 「驗證」：窄的時候上下排；工作畫面夠寬時左欄是本輪變化與處理紀錄（捲動時固定），右欄是修復追蹤、收斂趨勢與比對 */
.verify-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.verify-side, .verify-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.verify-card { padding: 12px 14px; }
.verify-card .summary { padding-left: 0; padding-right: 0; background: none; border-bottom: none; }
.verify-sec-title { margin: 4px 0 8px; font-size: var(--fs-xl); }
.verify-sec-title:focus, .verify-card .work-card-title:focus { outline: none; }
.verify-sec-title:focus-visible, .verify-card .work-card-title:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@container (min-width: 880px) {
  .verify-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .verify-side { position: sticky; top: 0; max-height: calc(100vh - 200px); overflow: auto; }
}
.mobile-workspaces { display: none; }
/* 詳情抽屜的操作列：只在窄螢幕的抽屜模式顯示（見下方 max-width: 900px） */
.sheet-bar { display: none; }
.sheet-handle { width: 56px; min-height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: ns-resize; touch-action: none; }
.sheet-handle span { display: block; width: 32px; height: 4px; border-radius: var(--radius-2xs); background: var(--line-strong); }
.sheet-title { flex: 1; margin: 0; font-size: var(--fs-base); }
.sheet-title:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 搜尋 ---------- */
.search { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 200px; }
.search input { width: 100%; padding-left: 28px; }
.search .icon { position: absolute; left: 8px; top: 7px; color: var(--muted); pointer-events: none; }
.dropdown { position: absolute; top: 38px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: var(--z-dropdown); max-height: 420px; overflow: auto; }
.dropdown .item { padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.dropdown .item:hover, .dropdown .item.active { background: var(--accent-soft); }
.dropdown .item .sub { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown .empty { padding: 10px; color: var(--muted); }

/* ---------- 標籤、徽章 ---------- */
.pane { flex: 1; overflow: auto; min-height: 0; }
.pane-body { padding: 10px; }
.pane-body > p:first-child { margin-top: 0; }
.pane-section { padding: 0 10px; }
.pane-filter { display: block; width: calc(100% - 20px); margin: 8px 10px; }
/* 清單（「檢視」）：清單種類、種類內篩選與文字篩選同一列；窄欄時文字篩選換到下一行 */
.inv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.inv-bar select { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: var(--fs-sm); }
.inv-bar .pane-filter { flex: 1 1 8em; width: auto; min-width: 8em; margin: 0; }
.pane-note { padding: 4px 10px; }
.note-box { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); padding: 8px; border-radius: var(--radius-sm); }
.table-more { padding: 6px 9px; }
/* 大量列的清單（V.bigList：路由表、位址清單）：搜尋框、摘要的分組（展開列）與分頁按鈕 */
.biglist-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
.biglist-search { flex: 1 1 12em; min-width: 0; }
.biglist-total { margin: 0 0 6px; }
.biglist-group { margin-left: 4px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; }
.pager-where { font-size: var(--fs-sm); }
/* chip：短的單列（flex-shrink: 0，不會被擠成逐字直排）；長文字在容器寬度內換行，不撐破版面（圓角用半個列高，換行時仍是圓角矩形） */
.chip { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 100%; min-height: 22px; padding: 2px 8px; border: 1px solid transparent; border-radius: var(--radius-chip); font-size: var(--fs-sm); font-weight: 600; background: var(--neutral-soft); color: var(--chip-text); overflow-wrap: break-word; }
/* 表格內的 chip（類型、狀態）不換行：表格自動排版以 min-content 決定欄寬，可斷行的 chip 會被壓成一字一行 */
table.t .chip { white-space: nowrap; overflow-wrap: normal; }
/* 篩選選項是 <button class="chip btn">：不套一般按鈕的高度、陰影與 hover 底色 */
button.chip { box-shadow: none; line-height: inherit; text-align: left; }
/* 已選檔案：名稱＋移除鈕（觸控時移除鈕至少 44px，見 pointer: coarse） */
.chip.file-chip { padding-right: 2px; }
.chip .chip-x { min-height: 22px; min-width: 22px; padding: 0 4px; border-radius: var(--radius-pill); font-weight: 400; line-height: 1; }
.chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.chip.err { background: var(--err-soft); color: var(--err-text); border-color: var(--err-line); }
.chip.warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.chip.info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-line); }
.chip.ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); }
/* 路由追蹤「無法驗證」（停在未收集的設備）：中性灰，不是錯誤 */
.chip.unverified { background: var(--neutral-soft); color: var(--muted); border-color: var(--line); }
.chip.kind-firewall { background: var(--kind-firewall-bg); color: var(--kind-firewall-fg); }
.chip.kind-switch { background: var(--kind-switch-bg); color: var(--kind-switch-fg); }
.chip.kind-router { background: var(--kind-router-bg); color: var(--kind-router-fg); }
.chip.kind-host { background: var(--kind-host-bg); color: var(--kind-host-fg); }
.chip.kind-unknown { background: var(--kind-unknown-bg); color: var(--kind-unknown-fg); }
.chip.btn { cursor: pointer; transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease, filter var(--dur-fast) ease; }
.chip.btn:hover { filter: saturate(1.15); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip.btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.chip.btn.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
/* 篩選選項：沒有狀態色的選取時以強調色填滿；筆數較淡；0 筆停用 */
.chip.btn.on:not(.err):not(.warn):not(.info):not(.ok) { background: var(--accent-soft); color: var(--accent); }
/* 筆數以字重區分層級，不降不透明度（淡化後在狀態底色上不到 4.5:1） */
.chip .n, .seg .n { font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.btn.off { opacity: var(--disabled-opacity); cursor: not-allowed; }
.chip.btn.off:hover { filter: none; box-shadow: none; transform: none; }
.sev { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* 嚴重度不只靠顏色：錯誤方形、警告三角形、提醒與正常圓形（與畫布、圖例相同） */
.sev.error { background: var(--sev-error); border-radius: var(--radius-mark); }
.sev.warn { background: var(--sev-warn); border-radius: 0; width: 10px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sev.info { background: var(--info); } .sev.ok { background: var(--ok); }
.chip .sev { margin-right: 1px; }

/* ---------- 檢查結果 ---------- */
.summary { display: flex; gap: 7px; padding: 11px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--surface)); }
/* 第二層篩選：緊接上一層，較緊湊、無漸層 */
.summary.sub { gap: 6px; padding: 8px 10px; background: var(--surface); }
/* 分段按鈕：清單種類（與工具列按鈕群組同樣式） */
.seg { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.seg button { border: none; border-right: 1px solid var(--line); border-radius: 0; padding: 4px 10px; min-height: 0; font-size: var(--fs-sm); background: var(--panel); }
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--surface-hover); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.seg button:focus-visible { outline-offset: -2px; }
.fgroup { border-bottom: 1px solid var(--line); }
.fgroup > .head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer; user-select: none; transition: background-color var(--dur-row) ease; }
.fgroup > .head:hover { background: var(--surface-hover); }
.fgroup > .head .title { flex: 1; }
.fgroup > .head .id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.fgroup .items { padding: 0 0 6px; }
/* 依規則分組的第一層：規則類別（標題列出各嚴重度的筆數），規則與結果往內縮一層 */
.fgroup.fcat > .head { font-weight: 600; background: var(--surface); }
.fgroup.fcat > .head:hover { background: var(--surface-hover); }
.fcat-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.fcat-n { font-weight: 600; }
.fcat-rules > .fgroup { border-bottom: 0; border-top: 1px solid var(--line-soft); }
.fcat-rules > .fgroup > .head { padding-left: 22px; font-size: var(--fs-md); }
.fcat-rules .fitem { padding-left: 38px; }
.fcat-rules .fhint { padding-left: 38px; }
/* 與多數不同（推論）：結果下方、可點的設備；在可點的結果列之外，避免連結包在按鈕裡 */
.fitem-wrap > .deviation { padding: 0 10px 6px 29px; font-size: var(--fs-sm); }
.fcat-rules .fitem-wrap > .deviation { padding-left: 41px; }
/* 處理狀態按鈕在訊息下方：與該層的訊息左緣對齊（依檢查分組時多一層縮排） */
.fitem-wrap > .ledger-actions { padding: 0 10px 6px 26px; }
.fcat-rules .fitem-wrap > .ledger-actions { padding-left: 38px; }
/* 規則的處理提示（V.remediation.hintLine）：展開規則後在結果列表上方，詳情卡片在訊息下方 */
.rule-hint { font-size: var(--fs-sm); line-height: 1.6; }
.fgroup .fhint { padding: 0 10px 4px 26px; }
.rule-hint code { padding: 0 3px; border-radius: var(--radius-xs); background: var(--neutral-soft); overflow-wrap: anywhere; }
/* 沒有發現的規則清單（通過／沒有資料可檢查） */
.fgroup.rules > .head { color: var(--muted); }
.fgroup .rule { display: flex; align-items: flex-start; gap: 8px; padding: 5px 10px 5px 26px; font-size: var(--fs-md); }
.fgroup .rule .title { flex: 1; }
.fgroup .rule .id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.fgroup .rule .note { font-size: var(--fs-sm); }
.fgroup .rule .mark { width: 12px; color: var(--muted); }
.fgroup.pass .rule .mark { color: var(--ok-text); }
.fitem { padding: 6px 10px 6px 26px; cursor: pointer; font-size: var(--fs-md); border-left: 3px solid transparent; transition: background-color var(--dur-row) ease; }
.fitem:hover { background: var(--accent-soft); }
.fitem.sel { border-left-color: var(--accent); background: var(--accent-soft); }
.more { display: block; margin: 4px 26px; font-size: var(--fs-sm); }
/* 一筆檢查結果與它的「確認／取消確認」按鈕 */
.fitem-row { display: flex; align-items: flex-start; }
.fitem-row .fitem { flex: 1; min-width: 0; }
.fitem-row .fitem .id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.fitem-row .fitem .note { font-size: var(--fs-sm); }
.fitem-row .ack { min-height: 0; padding: 3px 8px; margin: 3px 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
/* 新舊基準比對 */
.pane-title { margin: 14px 0 6px; font-size: var(--fs-md); }
.diff-cat { margin-top: 10px; }
.diff-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.diff-summary { padding-left: 0; padding-right: 0; }
/* 修復追蹤（比對結果上方） */
.fix-tracking { margin: 10px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fix-summary { padding-left: 0; padding-right: 0; border-bottom: none; background: none; }
/* 檢查結果：確認的分類與原因、分組方式 */
.ack-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 10px 8px 26px; }
.ack-editor button, .ack-editor select, .ack-editor input { min-height: var(--control-h); padding: 3px 8px; font-size: var(--fs-sm); }
.findings-view { align-items: center; }
.findings-view .seg button { min-height: 26px; padding: 2px 10px; border: none; border-radius: 0; box-shadow: none; font-size: var(--fs-sm); }
.findings-view .seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.findings-view .note { font-size: var(--fs-sm); }
/* 「依設備排序」是切換鈕（ghost 按鈕預設沒有框線，深色時看起來像一般文字）：平時也畫框線 */
button.ghost.export-by-device { border-color: var(--line-strong); }
.export-by-device.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* 防火牆修正範例 */
.fw-fix { margin-bottom: 10px; }
.fw-fix pre { margin: 4px 0; font-family: var(--mono); font-size: var(--fs-sm); overflow-x: auto; }
.fw-fix .warn-line { color: var(--warn-text); font-size: var(--fs-sm); }
.chip.effect { background: var(--panel); }

/* ---------- 表格 ---------- */
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
table.t th { text-align: left; font-weight: 600; color: var(--th-text); padding: 8px 9px; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: var(--surface); z-index: var(--z-sticky); white-space: nowrap; }
table.t th.sortable { padding: 0; user-select: none; }
table.t th.sortable:hover { background: var(--accent-hover); }
/* 可排序標頭內的按鈕：外觀同標頭文字，整格可點 */
table.t th .th-sort { display: block; width: 100%; min-height: 0; padding: 8px 9px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-weight: inherit; color: inherit; text-align: inherit; white-space: nowrap; }
table.t th .th-sort:hover { color: var(--accent); background: transparent; }
table.t th .th-sort:focus-visible { outline-offset: -2px; }
table.t td { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.t tbody tr:nth-child(even) td { background: var(--surface); }
table.t tbody tr.click:hover td { background: var(--accent-hover); }
table.t tbody tr.bad td { background: var(--row-bad); }
table.t tbody tr.bad.click:hover td { background: var(--row-bad-hover); }
table.t tr.click { cursor: pointer; }

/* ---------- 詳細資料 ---------- */
.detail { padding: 16px 16px 34px; }
.detail h2 { font-size: var(--fs-xl); margin: 0 0 10px; overflow-wrap: anywhere; }
.detail h2 .mono { font-size: inherit; }
.detail-section { margin-top: 20px; }
/* 右欄表格（details.js 的 table()）：識別字不逐字斷行，放不下時整個表格橫向捲動；一般文字欄仍可換行 */
.detail h3 { font-size: var(--fs-md); margin: 0 0 8px; padding-bottom: 5px; color: var(--heading-text); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.detail-fold { border-bottom: 1px solid var(--line); }
.detail-section + .detail-fold, .detail .kv + .detail-fold { margin-top: 12px; }
/* summary 是 flex，瀏覽器不畫展開記號：▸／▾ 由 ::before 補上（同修正計畫的 .patch-cat） */
.detail-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding: 6px 2px; cursor: pointer; list-style: none; font-size: var(--fs-md); font-weight: 600; color: var(--heading-text); }
.detail-fold > summary::-webkit-details-marker { display: none; }
.detail-fold > summary::before { content: "▸"; color: var(--muted); font-weight: 400; }
.detail-fold[open] > summary::before { content: "▾"; }
.detail-fold > summary:hover { color: var(--accent); }
/* 標題列的狀態 chip 與連結（V.section 的 extra）：字重回到一般，連結靠右前留一點距離 */
.detail-fold > summary .section-extra { font-weight: 400; display: inline-flex; align-items: center; }
.detail-fold > summary .section-extra .link, .detail-fold > summary .section-extra button { margin-left: 4px; }
.detail-fold > div { padding: 0 2px 12px; }
.row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.row.spaced { margin-top: 10px; }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 10px; font-size: var(--fs-md); }
.kv .k { color: var(--muted); }
/* 設備詳情的工作入口（details.js 的 workEntries）：和上方的屬性以分隔線隔開（不像屬性表的延續）；標籤（路由表、防火牆、管理面設定）不從詞中間折行 */
.work-entries { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.work-entries .kv { grid-template-columns: max-content minmax(0, 1fr); }
.link { color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.finding { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 7px; font-size: var(--fs-md); background: var(--surface); }
.finding .ev { margin-top: 2px; }
.finding > .sev { margin-top: 5px; }
/* 設備詳情的管理面設定：每項一個區塊（右欄窄，不用多欄表格）；有檢查結果的項目用錯誤列的底色 */
.mgmt-row { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-md); }
.mgmt-row.bad { background: var(--row-bad); }
.mgmt-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mgmt-menu { font-size: var(--fs-xs); }
.mgmt-val { margin-top: 2px; overflow-wrap: anywhere; }
.mgmt-line { margin-top: 2px; }
/* 多數決判定與多數不同（推論，V.deviationLine）：訊息下方一行，設備名可點；平手時淡色說明無法推定 */
.finding .deviation { font-size: var(--fs-sm); line-height: var(--lh-body); }
.finding .deviation .link { overflow-wrap: anywhere; }
.finding .deviation.none { color: var(--muted); }
/* 標題下的可點 chip（與多數不同 N 項）：點了捲到檢查結果 */
.chip-link { text-decoration: none; cursor: pointer; }
.chip-link:hover { text-decoration: none; }
.chip-link:hover .chip { border-color: var(--line-hover); }
/* 基準狀態卡（未選取時的右欄）：一句話狀態、收集完整度、四個數字、其餘收在技術細節 */
.status-card .status-line { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 8px; font-size: var(--fs-lg); line-height: var(--lh-body); }
.status-card .status-line > .sev { margin-top: 8px; flex: none; }
.status-card .status-line .link { font-weight: 600; overflow-wrap: anywhere; }
.status-card .status-alerts { margin: 0 0 8px; }
.status-card .status-coverage { margin: 0 0 4px; font-size: var(--fs-md); line-height: var(--lh-body); }
.status-card .status-coverage .link { font-weight: 600; }
.status-card .status-hosts { margin: 0 0 14px; font-size: var(--fs-sm); line-height: var(--lh-body); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.stat { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.stat-num { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-heading); overflow-wrap: anywhere; }
.stat-label { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-heading); }
.status-card .status-meta { margin: 0 0 6px; font-size: var(--fs-sm); line-height: var(--lh-body); overflow-wrap: anywhere; }
.status-card .kv .mono { overflow-wrap: anywhere; }
.status-card .status-hint { margin-top: 14px; font-size: var(--fs-sm); line-height: var(--lh-body); }
/* 規則的常見原因與處理（CATALOG）：檢查結果與規則清單共用，預設收合 */
.advice { margin-top: 4px; font-size: var(--fs-sm); }
.advice > summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
.advice > summary:hover { text-decoration: underline; }
.advice-body { margin-top: 4px; padding: 6px 8px; border-left: 2px solid var(--line-strong); background: var(--surface-hover); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.advice-label { color: var(--muted); font-weight: 600; }
.advice-causes { margin-top: 4px; }
.advice-causes ul { margin: 2px 0 0; padding-left: 18px; }
.advice code { padding: 0 3px; border-radius: var(--radius-xs); background: var(--neutral-soft); overflow-wrap: anywhere; }
.ev .link + .link { margin-left: 10px; }
.ev.stack .link { display: block; }
.ev.stack .link + .link { margin-left: 0; }
/* L3 的外部（對外邊界）：每個介面的依據一行一筆 */
.boundary-ev + .boundary-ev { margin-top: 2px; }
.hop .mono { font-size: var(--fs-sm); }
.detail h3 .link { margin-left: 8px; font-weight: 400; }
.files .chip { cursor: pointer; }
.empty-detail { padding: 40px 24px; color: var(--muted); text-align: center; }
.empty-detail .big { font-size: var(--fs-lg); color: var(--text); margin-bottom: 6px; }
.vlanlist { font-family: var(--mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* 表格內的識別字（IP、MAC、VLAN 清單）不逐字斷行：表格寬於欄位時在 .table-scroll 內橫向捲動 */
.table-scroll { max-width: 100%; overflow-x: auto; }
.inv-scroll-hint { display: none; }
table.t .mono, table.t .vlanlist { white-space: nowrap; overflow-wrap: normal; }
/* 短的類別字串（例如「LLDP・聚合」）不折成兩行撐高列；寬於畫面時由 .table-scroll 橫捲 */
table.t td.nowrap { white-space: nowrap; }
.diffA { color: var(--err-text); font-weight: 600; }
.hop { border-left: 2px solid var(--line); margin-left: 6px; padding: 2px 0 8px 12px; position: relative; }
.hop::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.hop.end-reached::before { background: var(--ok); } .hop.end-bad::before { background: var(--err); } .hop.end-unverified::before { background: var(--muted); }
.hop.end-external::before { background: var(--info); }
/* 逐跳的「送往基準以外」（推論，不是錯誤）用 info 文字色；多起點時每個起點一段的小標 */
.trace-egress { color: var(--info-text); }
.detail-section.trace-sub { margin-top: 8px; }
.detail-section.trace-sub > h3 { font-size: var(--fs-sm); color: var(--muted); border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }
/* 路由表的非作用中路由：整列 muted（網段欄另有「非作用中」chip，不只靠顏色） */
tr.route-off > td { color: var(--muted); }
/* 兩行式的格（介面表、鄰居表與 linkTable）：第二行是次要資料，可在「・」與空白處換行，右欄與 360px 的手機都不必橫捲；
   識別字（.mono）不從中間斷開，VLAN 清單與描述太長時才斷開 */
.two-line .l2 { font-size: var(--fs-sm); white-space: normal; overflow-wrap: anywhere; }
.two-line .l2 .ifc-vlans { overflow-wrap: anywhere; }
/* 路由表摘要（右欄）：路由最多的幾組、搜尋框；路由詳情（視窗右欄）的每個下一跳一塊 */
/* 路由表的下一跳：每個下一跳一行（ECMP 不黏成一串） */
.route-nh-one { white-space: nowrap; }
.routes-top { margin: 4px 0 8px; padding-left: 20px; }
.routes-top li { margin: 2px 0; }
.routes-search { width: 100%; max-width: 360px; }
/* VRF、策略路由與 OSPF 鄰接的一行摘要（每一項開視窗的分頁）：在「、」處換行；視窗頁首的查表設定 */
.routes-more { margin: 6px 0 0; white-space: normal; overflow-wrap: anywhere; }
.routes-head .kv { margin: 4px 0 8px; }
/* 收集到的原始輸出：一個區塊一張卡片，指令可換行（不擠成窄欄） */
.two-line.block-card .block-cmd { white-space: normal; overflow-wrap: anywhere; }
.route-hop + .route-hop { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 6px; }
/* 從檢查結果選來的那一筆（.current）：外框與「目前選取」chip */
.finding.current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- 圖 ---------- */
/* touch-action: none：觸控拖曳由畫布處理，不讓瀏覽器捲動或縮放頁面 */
#graph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--surface); cursor: grab; touch-action: none; }
#graph:focus { outline: none; }
#graph:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
#graph.dragging { cursor: grabbing; }
.toolbar { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: var(--z-overlay); }
.toolbar .grp { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.toolbar .grp button { border: none; border-right: 1px solid var(--line); border-radius: 0; padding: 5px 10px; }
.toolbar .grp button:last-child { border-right: none; }
.toolbar .grp select { border: none; border-right: 1px solid var(--line); border-radius: 0; min-height: 0; padding: 4px 6px; background: var(--panel); }
.toolbar .grp select:last-child { border-right: none; }
/* 群組是 overflow: hidden 的連續按鈕列：外擴的焦點光暈會被裁成單邊直條，改用內縮框，且只在鍵盤操作時顯示 */
.toolbar .grp select:focus { border-right-color: var(--line); box-shadow: none; }
.toolbar .grp button:focus-visible { outline-offset: -2px; }
.toolbar .grp select:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.toolbar .grp button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
/* 拓樸圖的層級（radiogroup）：選取的層級同 .on；停用的 L4 標示「M2」 */
.layer-switch [role="radio"][aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.layer-switch [role="radio"]:disabled { color: var(--muted); cursor: not-allowed; background: var(--panel); }
.toolbar .grp button:disabled { color: var(--muted); cursor: not-allowed; }
/* 這一層畫了什麼、沒畫什麼（L2 的 MNDP、只畫一台設備的原因，L3 的路由與重疊） */
/* 層級說明在圖例按鈕（高度 --control-h，外加圖例的內距與框線）與操作提示的上方，窄螢幕時也不被圖例蓋住；太長時在框內捲動 */
.layer-note { position: absolute; right: 10px; bottom: calc(var(--control-h) + 28px); max-width: min(460px, calc(100% - 20px)); max-height: 30%; overflow: auto; font-size: var(--fs-sm); color: var(--text); background: var(--overlay); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 9px; z-index: var(--z-overlay); box-shadow: var(--shadow-sm); }
/* 平常只留第一句，「更多說明」展開其餘（展開後太長時仍在框內捲動） */
/* 窄螢幕：展開的說明在 30% 高度內要捲動好幾行，放寬到 45%（收起時只有一行，不影響全圖讓出的高度） */
@media (max-width: 600px) { .layer-note { max-height: 45%; } }
.layer-note-toggle { margin-left: 6px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.layer-note-more:not(.hidden)::before { content: ' '; }
.legend { position: absolute; left: 10px; bottom: 10px; background: var(--overlay); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 9px; font-size: var(--fs-sm); z-index: var(--z-overlay); max-width: calc(100% - 20px); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px);
  /* 展開時不蓋滿整張圖：最多約半張圖高（也讓開上方的工具列），分類橫向並排成多欄，其餘在框內捲動 */
  max-height: min(55%, calc(100% - 130px)); display: flex; flex-direction: column; }
.legend .legend-head { border: 0; background: none; padding: 2px 0; font-weight: 600; font-size: var(--fs-sm); align-self: flex-start; }
.legend .legend-body { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0 4px; min-height: 0; overflow: auto; }
/* 圖例展開時，右下的操作提示讓位（兩者不疊在一起） */
.legend.open ~ .hint { visibility: hidden; }
.legend .lg-group { display: grid; gap: 3px; align-content: start; }
.legend .lg-title { color: var(--muted); font-size: var(--fs-xs); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.legend .li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .ln { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; flex: none; }
.legend .lg-vendors { display: grid; gap: 3px; }
/* 廠商名稱可能很長：截斷，完整名稱在 title */
.legend .lg-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.legend .lg-arrow { font-size: var(--fs-xs); margin-left: -4px; }
.hint { position: absolute; right: 10px; bottom: 10px; font-size: var(--fs-sm); color: var(--muted); background: var(--overlay-soft); padding: 4px 8px; border-radius: var(--radius); z-index: var(--z-overlay); transition: opacity var(--dur-fade) ease; }
/* 通知在圖的下方中央，不遮工具列；數秒後淡出（.fading，A.banner） */
.banner { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 40px)); z-index: var(--z-header); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow-md); display: flex; gap: 8px; align-items: center; font-size: var(--fs-md); transition: opacity var(--dur-fade) ease; }
.banner.fading, .hint.fading { opacity: 0; }
.tooltip { position: absolute; pointer-events: none; background: var(--tooltip-bg); color: var(--tooltip-fg); font-size: var(--fs-sm); padding: 4px 8px; border-radius: var(--radius-sm); z-index: var(--z-tooltip); width: max-content; max-width: min(320px, calc(100vw - 16px)); overflow-wrap: anywhere; }
/* 滑鼠與觸控各一份的說明（歡迎畫面、操作提示）：觸控裝置（pointer: coarse）改用「點一下、拖曳、雙指縮放」 */
.for-touch { display: none; }
.welcome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: var(--z-layer); }
.welcome .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 34px; max-width: 560px; box-shadow: var(--shadow-lg); }
.welcome h1 { font-size: var(--fs-2xl); margin: 0 0 8px; }
.welcome ol { padding-left: 20px; margin: 10px 0 18px; }
.welcome li { margin-bottom: 4px; }

/* ---------- 對話框 ---------- */
dialog { border: 1px solid var(--dialog-line); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-dialog); max-width: 96vw; }
dialog::backdrop { background: var(--backdrop); }
.dlg { display: flex; flex-direction: column; max-height: 90vh; }
.dlg .dh { padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--panel), var(--surface)); font-weight: 600; font-size: var(--fs-lg); display: flex; align-items: center; }
.dlg .dh .x { margin-left: auto; }
/* 原文對話框的標題列：窄螢幕時折成兩行（複製與自動換行移到第二行），按鈕文字不折 */
#dlg-raw .dh { flex-wrap: wrap; row-gap: 6px; }
#raw-copy { margin-left: 8px; white-space: nowrap; }
#raw-copy-status { margin-left: 6px; font-weight: 400; font-size: var(--fs-sm); }
.dlg .db { padding: 14px 18px; overflow: auto; }
.dlg .df { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
/* 表格視窗（V.tableDialog，#dlg-table）：置中的大視窗，左欄分頁＋表格、右欄選取那一列的詳情；兩欄各自捲動，整頁不橫捲 */
#dlg-table { width: 94vw; height: 85vh; max-width: 94vw; max-height: 85vh; }
#dlg-table .dlg { height: 100%; max-height: none; }
#tdlg-title { min-width: 0; overflow-wrap: anywhere; }
#tdlg-title:focus { outline: none; }
#tdlg-status { margin-left: 10px; font-weight: 400; font-size: var(--fs-sm); }
.tdlg-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.tdlg-list, .tdlg-side { min-width: 0; min-height: 0; overflow: auto; overflow-x: hidden; }
/* 上方不留 padding：固定的表頭貼齊捲動區的上緣，上面不透出被捲走的列；間距改由第一個元素的 margin 提供 */
.tdlg-list { padding: 0 18px 24px; }
.tdlg-list > :first-child { margin-top: 12px; }
.tdlg-side { border-left: 1px solid var(--line); background: var(--surface); }
.tdlg-side-head { padding: 10px 16px 0; }
.tdlg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; border-bottom: 1px solid var(--line); }
.tdlg-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 6px 10px; font-weight: 600; color: var(--heading-text); }
.tdlg-tab.on { border-bottom-color: var(--accent); color: var(--accent); }
.tdlg-extra { margin-bottom: 8px; }
/* 視窗左欄的表格不橫捲（.tdlg-list 是捲動容器，表頭才固定得住）：識別字與條件只在空白處（k=v 之間）折行，不從字詞中間切開
   （break-word 只在一個字詞整行都放不下時才斷，例如窄螢幕的卡片）；長欄位設上限；900px 以下改成每列一塊（V.tableDialog 的表格帶 stack）。
   數字、行號與動作（td.num、td.nowrap）不折行，數字用等寬數字；註解是自由文字，可以在任何地方斷 */
.tdlg-list .table-scroll { overflow-x: visible; }
.tdlg-list table.t td .mono, .tdlg-list table.t td .vlanlist { white-space: normal; overflow-wrap: break-word; }
.tdlg-list table.t td { overflow-wrap: break-word; }
.tdlg-list table.t td.wrap { max-width: 28em; overflow-wrap: anywhere; }
.tdlg-list table.t td.num, .tdlg-list table.t td.nowrap, .tdlg-list table.t td.num .mono, .tdlg-list table.t td.nowrap .mono { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
/* 動作欄：動作本身不折行，「停用」chip 放不下時換到下一行（不把表格撐寬） */
.tdlg-list table.t td.nowrap .fw-action { white-space: normal; }
/* 防火牆條件的一個 k=v（firewall.js 的 fw-tok）：值以逗號分成幾片（fw-seg），片與片之間是 <wbr>。斷行的優先順序：
   k=v 之間 → 逗號後 → 片內。每一片是 inline-block（整片當一個單位換到下一行，不從連字號切開），寬度上限是一整行（max-width），
   一片整行都放不下（例如很長的 address-list 名稱）時才在片內折行（連字號或任何位置），不把表格撐寬、右邊的欄不被裁掉。
   min-width 是表格排欄寬時這一片至少要的寬度：片的字數（--len，firewall.js 的 segs 寫入；等寬字一個字 1ch），最多 30ch，
   也不超過 18vw（兩欄版面最窄的 901px 時條件欄只剩約 170px）；沒有它時欄寬可能被分得比一般的 k=v 還窄，寬螢幕也從中間切開 */
.tdlg-list .fw-tok { white-space: normal; overflow-wrap: normal; }
.tdlg-list .fw-seg { display: inline-block; max-width: 100%; min-width: min(calc(var(--len, 0) * 1ch), 30ch, 18vw); white-space: normal; overflow-wrap: anywhere; }
/* 詳情頂端的按鈕（table-dialog.js 的 renderSide）：兩段文字，寬螢幕顯示「回到總覽」，900px 以下（下方 @media）顯示「返回」 */
.tdlg-back-narrow { display: none; }
/* 可選取的表格：滑過用中性的底色，和選取列（藍底＋左側粗線）分得出來 */
table.t[role="grid"] tbody tr.click:hover td { background: var(--surface-hover); }
table.t[role="grid"] tbody tr.focus.click:hover td { background: var(--row-focus-bg); }
table.t[role="grid"] tbody tr.focus td:first-child { box-shadow: inset 4px 0 0 var(--row-focus-line), inset 0 2px 0 var(--row-focus-line), inset 0 -2px 0 var(--row-focus-line); }
/* 選取或定位的列：一個 class，顏色取自 --row-focus-*（不在 JS 組 inline style） */
table.t tbody tr.focus td, table.t tbody tr.focus.click:hover td, table.t tbody tr.bad.focus td { background: var(--row-focus-bg); box-shadow: inset 0 2px 0 var(--row-focus-line), inset 0 -2px 0 var(--row-focus-line); }
.mgmt-row.focus { background: var(--row-focus-bg); box-shadow: inset 3px 0 0 var(--row-focus-line); }
/* 窄螢幕（同 A.isNarrowScreen 的 900px）：全螢幕、單欄。選了一列時只顯示詳情（「返回」回到表格）；沒有選取時表格在前、總覽排在表格之後 */
@media (max-width: 900px) {
  #dlg-table { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .tdlg-cols { display: flex; flex-direction: column; overflow: auto; overflow-x: hidden; }
  .tdlg-list, .tdlg-side { flex: none; overflow: visible; }
  .tdlg-list { padding: 0 12px 24px; }
  .tdlg-list > :first-child { margin-top: 10px; }
  .tdlg-side { order: 1; border-left: 0; border-top: 1px solid var(--line); }
  .tdlg-cols[data-view="detail"] .tdlg-list { display: none; }
  .tdlg-cols[data-view="list"][data-selected] .tdlg-side { display: none; }
  .tdlg-back-narrow { display: inline; }
  .tdlg-back-wide { display: none; }
}
/* 高度扣掉對話框的其他列（選檔、拖放區、預檢、命名規則與按鈕列約 480px），命名規則那一列不被按鈕列切掉 */
#input-text { width: 100%; height: min(46vh, calc(90vh - 480px)); min-height: 140px; font-family: var(--mono); font-size: var(--fs-sm); white-space: pre; resize: vertical; }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.drop { border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 10px; text-align: center; color: var(--muted); background: var(--surface); margin-top: 8px; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* 收合的說明區（歡迎畫面的收集指引、對話框的格式說明、預檢清單） */
details.collect { margin: 6px 0 10px; }
details.collect > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-md); }
details.collect[open] > summary { margin-bottom: 6px; }
details.collect p { margin: 6px 0; }
pre.cmd-list { margin: 6px 0; padding: 8px 10px; max-height: 220px; overflow: auto; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre; }
.welcome .card { max-height: calc(100% - 32px); overflow: auto; }
/* 建立前的預檢（S.preflight） */
.preflight { margin-top: 10px; font-size: var(--fs-md); }
.preflight .pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.preflight .pf-why { color: var(--err-text); margin: 6px 0 0; }
.preflight .pf-bad { margin: 6px 0 0; padding-left: 20px; }
.preflight .pf-bad li { margin-bottom: 2px; }
.progress { height: 6px; background: var(--neutral-soft); border-radius: var(--radius-pill); overflow: hidden; flex: 1; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width var(--dur-progress); }
/* 原文：預設長行自動換行（窄螢幕不必橫向捲動），換行的後續行縮排到行號之後（懸掛縮排）；
   取消「自動換行」（#raw-wrap → #dlg-raw.raw-nowrap）時不折行、在 pre 內橫向捲動，行號固定在左邊不跟著捲走 */
pre.raw { margin: 0; font-family: var(--mono); font-size: var(--fs-sm); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
pre.raw > span { display: block; padding-left: 56px; text-indent: -56px; }
pre.raw .ln { color: var(--muted); display: inline-block; width: 56px; text-indent: 0; text-align: right; padding-right: 10px; user-select: none; white-space: nowrap; position: sticky; left: 0; background: var(--panel); }
#dlg-raw.raw-nowrap pre.raw { white-space: pre; overflow-wrap: normal; }
pre.raw .hl { background: var(--hl-bg); }
pre.raw .hl .ln { background: inherit; }
.dlg .dh .raw-wrap-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: var(--control-h); font-weight: 400; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; white-space: nowrap; }
.dlg .dh .raw-wrap-toggle ~ .x { margin-left: 8px; }
/* 原文對話框標題旁的「上一處／下一處」（多處證據時才顯示） */
.dlg .dh .raw-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; font-weight: 400; font-size: var(--fs-sm); }
.form-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.form-row label { color: var(--muted); }
.popover { position: absolute; top: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 14px; z-index: var(--z-menu); width: 300px; }
.popover .form-row input, .popover .form-row select { flex: 1; }
.trace-msg { font-size: var(--fs-sm); margin: -4px 0 10px; }

/* ---------- L4 可達性（panels/l4.js）：疊在畫布上，捲動區從工具列下緣開始（top 由 A.syncL4Top 依工具列的高度設定；50px 是還沒量到時的值），
   工具列旁不露出畫布；格子的底色與符號色取自 theme.l4（inline style） ---------- */
.l4 { position: absolute; inset: 50px 0 0 0; z-index: var(--z-layer); overflow: auto; overflow-x: hidden; background: var(--bg); container-type: inline-size; }
.stage.l4-on #graph { visibility: hidden; }
.l4-inner { max-width: 1400px; }
.l4-card { padding: 12px 14px; }
.l4-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.l4-card-head .work-card-title { margin: 0 auto 0 0; }
.l4-card .work-card-title:focus, .l4-sub h4:focus, #l4-drill-title:focus { outline: none; }
.l4-card .work-card-title:focus-visible, .l4-sub h4:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.l4-note { margin: 2px 0 8px; font-size: var(--fs-sm); }
.l4-assume-list { margin: 0; padding-left: 18px; font-size: var(--fs-md); }
/* 由外而內：頁首的結論句、三段暴露清單；內部互通與可達性查詢收在 details（summary 就是段標題） */
.l4-ex-summary { margin: 4px 0 0; font-size: var(--fs-md); line-height: 1.6; }
.l4-ex-sec { margin-top: 12px; }
.l4-ex-sec + .l4-ex-sec { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.l4-ex-title { margin: 0 0 4px; font-size: var(--fs-md); }
.l4-ex-sentence { margin: 0 0 6px; }
.l4-ex-denied, .l4-ex-notes, .l4-ex-nowan { margin: 4px 0 0; font-size: var(--fs-sm); }
.l4-ex-reasons { font-size: var(--fs-sm); }
/* 「看路徑」：ghost 按鈕用連結色並加 ▸，看得出可以點 */
.l4-ex-path { min-height: var(--control-h); white-space: nowrap; color: var(--accent); padding-left: 4px; padding-right: 6px; }
/* 結果格內的每一行都是 block、寬度跟著格子（不用 max-content：會把表格撐得比卡片寬） */
.l4-ex-entry, .l4-ex-sub, .l4-ex-basis, .l4-ex-res .l4-ex-path { display: block; max-width: 100%; }
.l4-ex-res .l4-ex-path { display: inline-block; }
.l4-ex-entry, .l4-ex-sub { font-size: var(--fs-sm); margin-top: 2px; }
/* 依據：結果格的一行（規則短連結＋相關檢查的代碼 chip）；「forward 結尾預設」不在詞中間斷行 */
.l4-ex-basis { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.7; }
.l4-ex-basis .l4-rule { word-break: keep-all; }
.l4-ex-res .l4-ex-path { margin-top: 4px; }
/* 分層結果「路由 ✓ → 防火牆 ✕」：結果格的第二行（不加欄）；路徑標頭內接在結論後面 */
.l4-ex-layers { display: block; margin-top: 2px; }
.l4-layers { font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; }
.l4-reason-layer > b { font-weight: 600; }
.l4-ex-sec table.t { width: 100%; }
.l4-ex-sec table.t td { overflow-wrap: anywhere; min-width: 0; }
/* 目的的「位址 → 位址」可在空白處換行（table.t .mono 預設不換行），識別字本身不從中間斷開 */
.l4-ex-sec table.t td .mono { white-space: normal; overflow-wrap: normal; }
.l4-card-fold > summary { cursor: pointer; list-style-position: inside; }
.l4-card-fold > summary > .work-card-title { display: inline; margin: 0; }
.l4-card-fold[open] > summary { margin-bottom: 8px; }
.l4-assume .l4-fold > summary { margin: 0; }
/* 頁尾的摘要：「判斷的前提」＋判斷方式的一句話（窄螢幕時一句話自己換行，不撐寬） */
.l4-assume #l4-assume-fold > summary { width: auto; line-height: 1.6; }
.l4-assume-k { margin-right: 8px; }
.l4-assume-def { font-weight: 400; color: var(--text); font-size: var(--fs-md); }
.l4-assume-route { margin: 8px 0; font-size: var(--fs-md); }
.l4-assume-title { margin: 10px 0 4px; font-size: var(--fs-md); font-weight: 600; }
/* 前提清單（L4 頁尾、這次查詢的前提、這次追蹤的前提共用，V.assumeBlock）：每條一行短句＋影響，「詳細」收合 */
.assume-list { margin: 0; padding-left: 18px; font-size: var(--fs-md); }
.assume-item { margin: 2px 0 6px; line-height: 1.6; }
.assume-item:focus { outline: none; }
.assume-item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.assume-impact { color: var(--muted); font-size: var(--fs-sm); }
.assume-detail { display: inline; }
.assume-detail > summary { display: inline; cursor: pointer; color: var(--accent); font-size: var(--fs-sm); }
.assume-detail[open] { display: block; margin: 2px 0 4px; }
.assume-detail-text, .assume-detail-devs { margin: 2px 0; font-size: var(--fs-sm); color: var(--muted); }
.assume-detail-rules { margin: 2px 0; padding-left: 18px; font-size: var(--fs-sm); }
.assume-other > summary, .l4-assume-route-list > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 8px 0 4px; font-size: var(--fs-md); }
.l4-assume-route-list { display: inline; }
.l4-assume-route-list[open] { display: block; }
.l4-assume-route-list > summary { display: inline; font-weight: 400; margin-left: 6px; }
.l4-assume-route-list[open] > .assume-list { margin-top: 4px; }
.assume-sub { margin: 6px 0 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.assume-none { margin: 2px 0; font-size: var(--fs-sm); }
/* 原因旁的「為什麼」：小字連結，不在詞中間斷行 */
.why-link { font-size: var(--fs-sm); white-space: nowrap; }
.l4-form input[type=text] { width: 140px; }
.l4-form .l4-port { width: 80px; }
.l4-modes button { min-height: var(--control-h); }
.l4-modes button:disabled { color: var(--muted); cursor: not-allowed; }
.l4-csv { min-height: var(--control-h); padding: 3px 10px; font-size: var(--fs-sm); }
.l4-status { min-height: 22px; margin: 4px 0 8px; font-size: var(--fs-sm); color: var(--text); }
.l4-busy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--info-line); border-radius: var(--radius); background: var(--info-soft); color: var(--info-text); font-weight: 600; }
.l4-busy .progress { flex: 0 1 200px; }
.l4-progress-text { font-variant-numeric: tabular-nums; font-weight: 400; }
.l4-div-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.l4-div-note .l4-het { margin-left: 0; }
.l4-show-all { margin-bottom: 6px; }
.l4-legend { margin-bottom: 8px; font-size: var(--fs-sm); }
.l4-legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.l4-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.l4-swatch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--panel); }
.l4-swatch.diag, .l4-cell.diag { border-width: 1.5px; border-style: dashed; } /* 顏色：theme.l4.diagonal（inline） */
.l4-matrix-box { position: relative; min-width: 0; }
.l4-matrix { min-width: 0; }
.l4-grid-wrap { max-width: 100%; overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.l4-grid { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-sm); }
.l4-grid th { position: sticky; background: var(--surface); color: var(--text); font-weight: 600; padding: 4px 6px; text-align: left; z-index: var(--z-sticky); }
.l4-grid thead th { top: 0; vertical-align: bottom; min-width: 86px; max-width: 140px; }
.l4-grid tbody th { left: 0; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.l4-grid .l4-corner { left: 0; z-index: var(--z-raised); color: var(--muted); }
.l4-zone { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.l4-zone-src, .l4-zone-inf { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); padding: 0 3px; background: var(--panel); }
.l4-zone-inf { color: var(--info-text); border-color: var(--info-line); background: var(--info-soft); }
.l4-cell { position: relative; min-width: 86px; height: 44px; padding: 3px 6px; border: 1px solid var(--l4-line); border-radius: var(--radius-cell); cursor: pointer; vertical-align: middle; white-space: nowrap; }
.l4-cell:hover { box-shadow: inset 0 0 0 2px var(--l4-line-hover); }
.l4-cell:focus { outline: none; }
.l4-cell:focus-visible, .l4-cell:focus { box-shadow: inset 0 0 0 3px var(--accent); }
.l4-glyph { display: inline-block; min-width: 1em; font-weight: 600; text-align: center; }
.l4-lab { margin-left: 3px; font-weight: 600; }
.l4-cnt { display: block; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.l4-het { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid; border-radius: var(--radius-xs); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } /* 顏色：theme.l4.badge（inline） */
.l4-cell .l4-het { margin-left: 6px; }
.l4-tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border: 1px solid var(--l4-line); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.l4-tip { position: absolute; z-index: var(--z-float); max-width: 420px; padding: 7px 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: var(--fs-sm); pointer-events: none; white-space: normal; }
.l4-tip-head { font-weight: 600; margin-bottom: 2px; }
.l4-table td.num, .l4-sub td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 明細就地顯示：格子的明細在矩陣下面、查詢的結果在表單下面（同一張卡片裡，以分隔線分開） */
.l4-drill { scroll-margin-top: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
/* 暴露清單「看路徑」就地展開的那一列；「顯示全部（N）」 */
.l4-ex-sec tr.l4-ex-pathrow > td { padding: 4px 8px 10px; background: var(--surface); }
.l4-ex-pathbox .l4-sub { margin-top: 4px; }
/* 第 1 段依設備分組的標題列（窄螢幕的 stack 排法也是一整列） */
.l4-ex-sec tr.l4-ex-devrow > th { padding: 8px 8px 4px; text-align: left; font-weight: 600; background: var(--surface); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .l4-ex-sec table.t.stack tr.l4-ex-devrow > th { display: block; } }
.l4-ex-all { min-height: var(--control-h); margin-top: 6px; }
/* IPv6 的列沒有逐跳路徑（說明取代按鈕）；「⚠ 回程不保證」短標後的規則連結 */
.l4-ex-nopath { display: block; margin-top: 4px; font-size: var(--fs-sm); }
.l4-return-rules { font-size: var(--fs-sm); }
.l4-sub { margin-top: 12px; }
.l4-sub h4 { margin: 0 0 6px; font-size: var(--fs-lg); display: flex; align-items: center; gap: 6px; }
.l4-svcs { display: flex; flex-wrap: wrap; gap: 4px; }
.l4-svc { min-height: 26px; padding: 2px 8px; border: 1px solid var(--l4-line-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); white-space: nowrap; }
.l4-reasons, .l4-notes { margin: 6px 0; font-size: var(--fs-md); }
/* 部分無法判斷（「＋?」）：格子內的小標記，加框與文字色，不只靠位置；IPv6 提示與連線追蹤的說明是附註 */
.l4-inc { display: inline-block; margin-left: 3px; padding: 0 3px; border: 1px dashed var(--line-strong); border-radius: var(--radius-xs); font-size: var(--fs-xs); font-weight: 600; color: var(--text); vertical-align: middle; }
.l4-ipv6-note { margin: 4px 0 8px; padding-left: 8px; border-left: 3px solid var(--info-line); font-size: var(--fs-sm); }
.l4-ct { margin-top: 2px; font-size: var(--fs-sm); }
.l4-reasons ul, .l4-notes ul { margin: 2px 0 0; padding-left: 18px; }
.l4-path { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.l4-path-head { font-weight: 600; margin-bottom: 4px; }
.l4-hops { margin: 0; padding-left: 22px; }
.l4-hop { padding: 4px 0 6px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-md); }
.l4-hop-addr { margin: 2px 0; overflow-wrap: anywhere; }
.l4-stages, .l4-nat { margin: 3px 0 0; padding-left: 18px; }
.l4-end { margin-top: 6px; font-size: var(--fs-md); }
.l4-fold > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; max-width: 100%; margin: 8px 0 4px; }
@media (max-width: 900px) {
  .l4-form input[type=text] { width: 120px; }
}
/* 窄螢幕：聚焦格子的提示不疊在格子上（會蓋住右下的格子），改成矩陣框下方固定一行（評審 L2；left／top 的 inline 值在 static 時不作用） */
@media (max-width: 600px) {
  .l4-matrix-box .l4-tip { position: static; max-width: none; margin-top: 6px; box-shadow: none; }
}

/* 強制色彩模式（Windows 高對比）：box-shadow 會被移除，焦點與「選取中」改用系統色的 outline；
   嚴重度、圖例色塊保留原色（它們是資料，外形也已經區分） */
@media (forced-colors: active) {
  button:focus-visible, a:focus-visible, summary:focus-visible, .fgroup > .head:focus-visible, .fitem:focus-visible, tr.click:focus-visible,
  input:focus, select:focus, textarea:focus, #graph:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .chip.btn.on, .seg button.on, .toolbar .grp button.on, .mobile-workspaces button.on, .export-by-device.on, header .hub-btn.on, header .icon-btn.on, .settings-tab.on,
  .steps button[aria-current="step"], .layer-switch [role="radio"][aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .layer-switch [role="radio"]:disabled, .steps button[aria-disabled="true"] { color: GrayText; }
  .left-title:focus-visible, .verify-sec-title:focus-visible, .verify-card .work-card-title:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .layer-note { border-color: CanvasText; }
  .hub-card:focus-visible, .hub-row:focus-visible, .hub-out:focus-visible, #hub-title:focus-visible, .work-title:focus-visible, .trend-hit:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  #settings-title:focus-visible, #settings-panel-title:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .work-card, .patch-dev, .patch-choice { border-color: CanvasText; }
  /* 趨勢圖是資料：整張圖（含 tooltip）保留原本的淺色底與配色，像圖片一樣，文字對底色仍 ≥ 4.5:1；圖例的樣本保留原色 */
  .trend-plot { forced-color-adjust: none; background: var(--fixed-light-bg); color: var(--fixed-light-text); }
  .trend-swatch { forced-color-adjust: none; }
  .fitem.sel { border-left-color: Highlight; }
  .chip { border-color: CanvasText; }
  .sev, .legend .ln, .legend .sev { forced-color-adjust: none; }
  /* L4：格子的底色被系統色取代，狀態靠符號與文字（本來就有）；格子、徽章加系統色外框，焦點用 Highlight */
  .l4-cell, .l4-tag, .l4-svc, .l4-het, .l4-swatch, .l4-zone-src, .l4-zone-inf { border-color: CanvasText; }
  .l4-cell.diag { border-style: dashed; }
  .l4-cell:focus, .l4-cell:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
  .l4-modes button[aria-pressed="true"], .l4-hide-deny[aria-pressed="true"], .l4-show-all[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .l4-tip { border-color: CanvasText; }
}

@media (pointer: coarse) {
  :root { --control-h: 44px; }
  .for-mouse { display: none; }
  .for-touch { display: inline; }
  .chip .chip-x { min-height: 44px; min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: var(--dur-instant) !important; animation-duration: var(--dur-instant) !important; }
  /* 忙碌提示不播動畫：改成靜止的長條，文字仍說明正在進行 */
  .progress.indeterminate > div { animation: none !important; width: 100%; opacity: .55; }
}

@media (max-width: 900px) {
  /* 欄寬固定為視窗寬：頁首是不換行的單列，不能讓它的內容把整個版面撐寬 */
  #app { height: 100dvh; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  /* 圖上方只有兩列：第一列是流程步驟（五步等寬、不捲動，目前的一步一定看得到）；第二列是工作區分頁，
     搜尋（收成圖示）與 ⚙ 從頁首移到這一列的右端（絕對定位，頁首的 z-index 高於工作區列）。
     品牌只留名稱給螢幕閱讀器；「資料中心」與「輸入」是同一個畫面，窄螢幕只留步驟 */
  header { position: relative; min-height: 0; padding: 4px 6px; flex-wrap: nowrap; gap: 0; }
  header .spacer { display: none; }
  header .brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header .hub-btn { display: none; }
  .steps { flex: 1 1 100%; min-width: 0; }
  /* 流程步驟：五步等寬；號碼與名稱在上、狀態在下，文字可以換行，不出現水平捲動 */
  .steps ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .steps button { width: 100%; min-width: 0; min-height: 44px; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 3px; padding: 3px 2px; white-space: normal; text-align: center; line-height: 1.3; }
  .steps .step-st { flex-basis: 100%; overflow-wrap: anywhere; }
  /* 第二列右端：搜尋圖示與 ⚙（top 對齊工作區列的內距 5px＋頁首的下框線 1px） */
  .search, .header-actions { position: absolute; top: calc(100% + 6px); z-index: var(--z-sticky); }
  .header-actions { right: 8px; }
  .search { right: calc(14px + var(--control-h)); }
  /* 資料中心或設定開著時不疊在上面：兩者都有自己的「關閉」 */
  #app.overlay-open header .search, #app.overlay-open header .header-actions { display: none; }
  /* 搜尋收成圖示：輸入框本身就是圖示（點了就聚焦，不需要 JS）；聚焦時展開蓋住整列，下拉清單跟著展開 */
  .search { flex: none; width: max(40px, var(--control-h)); min-width: 0; max-width: none; }
  .search input { width: 100%; min-height: max(40px, var(--control-h)); padding: 0 0 0 max(40px, var(--control-h)); cursor: pointer; }
  .search input::placeholder { color: transparent; }
  .search input::-webkit-search-cancel-button { display: none; }
  .search .icon { left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; color: var(--text); }
  .search:focus-within { left: 8px; right: 8px; width: auto; z-index: var(--z-float); }
  .search:focus-within input { padding: 6px 9px 6px 32px; cursor: text; }
  .search:focus-within input::placeholder { color: var(--muted); }
  .search:focus-within .icon { width: 32px; color: var(--muted); }
  .search .dropdown { top: calc(100% + 4px); }
  .menu .menu-item { min-height: 44px; }
  .banner { bottom: 72px; }
  .mobile-workspaces { display: flex; gap: 4px; padding: 5px calc(22px + 2 * max(40px, var(--control-h))) 5px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .mobile-workspaces button { flex: 1; min-height: max(40px, var(--control-h)); border-color: transparent; background: transparent; color: var(--muted); }
  .mobile-workspaces button.on { border-color: var(--line); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  #main { display: block; position: relative; min-height: 0; }
  #main > #left, #main > #center, #main > #right { display: none; width: 100%; height: 100%; min-height: 0; border: 0; }
  #main[data-workspace="graph"] > #center,
  #main[data-workspace="checks"] > #left,
  #main[data-workspace="details"] > #right { display: flex; }
  #center { position: absolute; inset: 0; }
  #left, #right { position: absolute; inset: 0; }
  #left .grip, #right .grip { display: none; }
  .detail { padding: 14px 12px 28px; }
  /* 底部抽屜：在拓樸圖選取時 #right 疊在圖的下方（半高 40%、全高蓋滿 #main），圖仍可操作 */
  #main[data-workspace="graph"][data-sheet] > #right { display: flex; flex-direction: column; top: auto; height: 40%; max-height: 100%; z-index: var(--z-work); background: var(--panel);
    border-top: 1px solid var(--line-strong); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); }
  #main[data-workspace="graph"][data-sheet="full"] > #right { height: 100%; border-radius: 0; }
  #main[data-workspace="graph"][data-sheet] .sheet-bar { display: flex; flex: none; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; border-bottom: 1px solid var(--line); }
  #main[data-workspace="graph"][data-sheet] > #right > #detail { flex: 1; min-height: 0; overflow: auto; }
  /* 窄螢幕的工具列會折成兩列：加一層底色，圖上的文字不會從按鈕之間露出來 */
  .toolbar { max-width: calc(100% - 20px); background: var(--overlay); border-radius: var(--radius); padding: 4px; top: 6px; left: 6px; box-shadow: var(--shadow-sm); }
  /* 操作提示寬到和圖例按鈕同一列：移到圖例按鈕上方（和層級說明同高；有層級說明時提示讓位），不蓋住「圖例」 */
  .hint { left: 10px; bottom: calc(var(--control-h) + 28px); }
  .layer-note:not(.hidden) ~ .hint { visibility: hidden; }
  /* 窄螢幕的表格（V.table 的 stack、命名規則）：每一列是一塊，每格前面寫欄名，不在框內橫向捲動（右邊的欄不會被切掉） */
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display: block; width: auto; min-width: 0; }
  table.t.stack thead { display: none; }
  table.t.stack tr { padding: 6px 2px; border-bottom: 1px solid var(--line); }
  table.t.stack td { border: 0; padding: 2px 4px; white-space: normal; text-align: left; }
  table.t.stack td[data-label]::before { content: attr(data-label) "："; color: var(--muted); margin-right: 4px; }
  table.t.stack td.num { text-align: left; }
  table.t.stack td[data-label=""]::before { content: none; }
  /* 值是空的格（V.table 的 stack 標 blank）：卡片不顯示空的「狀態：」「檢查：」 */
  table.t.stack td.blank { display: none; }
  /* 歡迎卡左右各留 16px，圓角不被畫面邊緣切掉 */
  .welcome .card { margin-inline: 16px; padding: 22px 20px; }
}

/* ---------- 處理紀錄（app-ledger.js、panels/ledger.js） ---------- */
.ledger-editor .ledger-note, .ledger-editor .ledger-waiver-reason { flex: 1; min-width: 140px; }
.ledger-editor .ledger-waiver { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
/* 日期欄（處理紀錄、接受風險）：共用輸入框的基底規則，這裡只縮小內距與字級，和旁邊的小按鈕同高 */
.ledger-editor input[type=date], .patch-accept input[type=date] { padding: 3px 6px; font-size: var(--fs-sm); }
.ledger-error { flex-basis: 100%; color: var(--err-text); font-size: var(--fs-sm); }
.fgroup.handled > .head { color: var(--muted); }
.ledger-chip { margin-right: 2px; }
.ledger-alert { min-height: 24px; }
.ledger-pane .ledger-counts, .ledger-pane .ledger-round-summary { padding-left: 0; padding-right: 0; background: none; border-bottom: none; }
.ledger-item { padding: 4px 6px; font-size: var(--fs-md); border-bottom: 1px solid var(--line-soft); }
.ledger-item.click { cursor: pointer; }
.ledger-item.click:hover { background: var(--accent-hover); }
.ledger-item .id { margin-right: 4px; color: var(--muted); }
.ledger-errors { margin: 4px 0 8px 18px; padding: 0; font-size: var(--fs-sm); max-height: 260px; overflow: auto; }
.ledger-blocked-box, .ledger-import-result { padding: 8px 10px; margin: 8px 0; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-soft); }
.ledger-import-confirm { border-color: var(--info-line); background: var(--info-soft); }
.warn-line { color: var(--warn-text); }
/* 收斂趨勢圖：SVG 折線、外形標記與 tooltip；文字用文字色，線與標記才用資料色（theme.trend） */
.trend-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.trend-tile { min-width: 70px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.trend-value { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 中間的「收斂趨勢」：三張小倍數折線圖並排（放不下時換行）；一張圖的寬度固定（px），比畫面寬時在自己的框內捲動 */
#trend-body > p { margin: 0 0 6px; }
.trend-charts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.trend-chart { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; max-width: 100%; }
.trend-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--text); margin-bottom: 4px; }
.trend-legend-item, .trend-tip-row { display: inline-flex; align-items: center; gap: 5px; }
.trend-swatch { display: block; flex: none; }
.trend-plot { position: relative; max-width: 100%; overflow-x: auto; }
.trend-plot svg { display: block; font-family: inherit; font-variant-numeric: tabular-nums; }
.trend-plot svg text { font-size: var(--fs-xs); }
.trend-hit:focus { outline: none; stroke: var(--accent); stroke-width: 2; }
.trend-tip { position: absolute; top: 4px; padding: 6px 9px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: var(--fs-sm); pointer-events: none; white-space: nowrap; }
.trend-tip-head { margin-bottom: 2px; }
.trend-tip-row { display: flex; }
.trend-table > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; }
.trend-table table { font-variant-numeric: tabular-nums; }

/* ---------- 修正計畫（panels/patch.js，中間的工作畫面） ---------- */
.patch-readonly { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--info-line); border-radius: var(--radius); background: var(--info-soft); color: var(--info-text); }
.patch-readonly > summary { cursor: pointer; }
.patch-readonly-more { margin-top: 4px; }
/* 窄的時候「要修正哪些」與計畫上下排；工作畫面夠寬時左右兩欄（依工作畫面本身的寬度，不是視窗） */
.patch-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.patch-select, .patch-main { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; min-width: 0; box-shadow: var(--shadow-sm); }
.patch-select .pane-title, .patch-main > .pane-title { margin-top: 0; font-size: var(--fs-lg); }
.patch-select-note { font-size: var(--fs-sm); margin-bottom: 6px; }
@container (min-width: 880px) {
  .patch-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .patch-select { position: sticky; top: 0; max-height: calc(100vh - 200px); overflow: auto; }
}
.patch-select .row { margin-bottom: 6px; }
/* 依規則：類別 ▸ 規則標題。收合的類別是並排的小框（省高度），展開的類別佔滿一列、列出規則標題的 chip；規則標題較長，chip 可以換行 */
.patch-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.patch-cat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.patch-cat[open] { flex-basis: 100%; }
.patch-cat > summary { padding: 2px 10px; }
.patch-cat > summary, .patch-picks-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: var(--control-h); cursor: pointer; }
.patch-picks-box > summary { padding: 4px 2px; }
.patch-cat > summary::before, .patch-picks-box > summary::before { content: "▸"; color: var(--muted); }
.patch-cat[open] > summary::before, .patch-picks-box[open] > summary::before { content: "▾"; }
.patch-cat > summary::-webkit-details-marker, .patch-picks-box > summary::-webkit-details-marker { display: none; }
.patch-cat > summary, .patch-picks-box > summary { list-style: none; }
.patch-cat-name { font-weight: 600; }
.patch-cat-rules { padding: 2px 10px 10px; gap: 6px; }
.chip.patch-rule, .chip.patch-rule-tag { white-space: normal; text-align: left; }
.patch-picks-box > summary { color: var(--accent); }
/* 「其他格式 ▾」：主要下載旁的次要選項，展開後在下方列出 */
.patch-more > summary { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; list-style: none; }
.patch-more > summary::-webkit-details-marker { display: none; }
.patch-more[open] { flex-basis: 100%; }
.patch-more-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.patch-more-list p { margin: 0; font-size: var(--fs-sm); }
.patch-groups details { margin: 2px 0; }
.patch-picks { padding: 4px 0 6px 18px; max-height: 260px; overflow: auto; }
.patch-pick-row { display: block; font-size: var(--fs-md); padding: 2px 0; }
.patch-dev { margin: 12px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.patch-item { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.patch-item p { margin: 3px 0; }
.patch-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: 6px 0 2px; }
.patch-ev code { overflow-wrap: anywhere; }
.patch-cmd, .patch-file { margin: 2px 0; font-family: var(--mono); font-size: var(--fs-sm); overflow-x: auto; white-space: pre; }
.patch-file { max-height: 320px; overflow: auto; }
.patch-files .row { margin: 8px 0 4px; }
.patch-download, .patch-copy { min-height: var(--control-h); padding: 3px 8px; font-size: var(--fs-sm); }
.patch-skipped { margin-top: 12px; }
.patch-skip { font-size: var(--fs-md); padding: 3px 0 3px 10px; }
.patch-skip .finding-ref, .fw-fix .finding-ref { overflow-wrap: anywhere; }
.patch-skip-detail { font-size: var(--fs-sm); margin: 1px 0 0; }
.patch-choices { margin: 12px 0; }
.patch-choice { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.patch-choice p { margin: 4px 0; }
.patch-choice .finding-ref { overflow-wrap: anywhere; }
.patch-choice-set { margin: 6px 0 2px; padding: 4px 8px 6px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.patch-choice-set legend { padding: 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.patch-choice-row { display: block; padding: 3px 0; font-size: var(--fs-md); cursor: pointer; }
.patch-choice-row.on { font-weight: 600; }
.patch-accept .row { gap: 6px; }
.patch-accept .patch-accept-reason { flex: 1; min-width: 160px; }
.diff-warnings { margin: 8px 0; }
.diff-warning { font-size: var(--fs-md); padding: 2px 0; }
/* 預期現況的漂移提示（推論）：與新舊基準比對的提醒同一個字級 */
.drift-warning { font-size: var(--fs-md); padding: 2px 0; }
.drift-items { margin: 6px 0; }
.partial-unrecognized { margin-left: 6px; color: var(--warn-text); }

/* ---------- 蓋住主畫面的一層（A.overlay：資料中心與設定共用）：和 #main 疊在同一格（也蓋住窄螢幕的工作區列），畫布大小不變 ---------- */
.overlay { grid-row: 2 / 4; z-index: var(--z-work); min-height: 0; overflow: auto; overflow-x: hidden; background: var(--bg); }
/* 提示列在 #center 裡，會被這一層蓋住：開啟時改成固定在視窗底部 */
#app.overlay-open #banner { position: fixed; bottom: 16px; z-index: var(--z-banner-top); max-width: calc(100vw - 24px); }

/* ---------- 資料中心（panels/hub.js、app-hub.js） ---------- */
header .hub-btn { font-weight: 600; }
header .hub-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.hub-inner { max-width: 1180px; margin: 0 auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hub-head, .hub-card-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-width: 0; }
.hub-head h1 { margin: 0; font-size: var(--fs-2xl); }
.hub-card-head h2 { margin: 0; font-size: var(--fs-xl); }
.hub-spacer { flex: 1 1 20px; }
.hub-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow-sm); }
.hub-card > p { margin: 0; }
#hub-title:focus, .hub-card:focus, .hub-row:focus, .hub-out:focus { outline: none; }
#hub-title:focus-visible, .hub-card:focus-visible, .hub-row:focus-visible, .hub-out:focus-visible { box-shadow: var(--focus-ring); }
/* 各列共用同一組欄（subgrid）：項目、來源、狀態的左緣上下對齊，操作欄依最寬的按鈕；不支援 subgrid 時退回固定比例的欄 */
.hub-rows { display: grid; grid-template-columns: minmax(7em, max-content) minmax(0, 2fr) minmax(0, 2fr) auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hub-row { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr); grid-template-columns: subgrid; gap: 4px 12px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--line); font-size: var(--fs-md); text-align: left; }
.hub-row:first-child { border-top: none; }
.hub-row-head { background: var(--surface); font-weight: 600; }
.hub-row-head > :last-child { text-align: right; } /* 和操作欄靠右的按鈕對齊 */
.hub-k { font-weight: 600; }
.hub-src, .hub-st-cell { min-width: 0; overflow-wrap: anywhere; }
.hub-cap { display: none; color: var(--muted); }
.hub-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hub-act button, .hub-out button { min-height: var(--control-h); padding: 4px 10px; }
/* 狀態文字：前面一律有符號（✓、!、✗），顏色只是加強；都是對白底與表面色 ≥ 4.5:1 的文字色 */
.hub-st-ok { color: var(--ok-text); } .hub-st-warn { color: var(--warn-text); } .hub-st-err { color: var(--err-text); } .hub-st-muted { color: var(--muted); }
.hub-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-out { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hub-out h3 { margin: 0; font-size: var(--fs-md); }
.hub-out p { margin: 0; }
.hub-out .row { margin: 0; }
.hub-cmd { display: block; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--neutral-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 覆蓋率（「輸入」）：篩選選項與每台設備的表格；表格寬於畫面時在自己的框內捲動 */
.hub-coverage { min-width: 0; }
.hub-coverage .summary { padding-left: 0; padding-right: 0; background: none; }
/* 每台一列：缺少的資料與收集失敗的 chip 不換行，表格寬於畫面時橫向捲動 */
.hub-coverage table.t td { vertical-align: middle; }
.cov-gaps { flex-wrap: nowrap; }
.chip.failure { font-weight: 400; }
.hub-pack { display: flex; flex-direction: column; gap: 8px; }
.hub-pack .row { margin: 0; }
.wp-choices { margin: 0; padding: 6px 10px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wp-choices legend { padding: 0 4px; font-weight: 600; }
.wp-option { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.wp-option.off { color: var(--muted); }
.wp-option select { max-width: 100%; }
.wp-note { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.wp-read { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wp-read p { margin: 0; }
.wp-read .row { margin: 0; }
.wp-read-error, .wp-loss, .wp-validate-error, .wp-build-error, .wp-warn-box { padding: 8px 10px; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-soft); }
.wp-read-error { background: var(--warn-soft); }
.hub-issues { margin: 4px 0 0; padding-left: 18px; max-height: 320px; overflow: auto; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.hub-busy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--info-line); border-radius: var(--radius); background: var(--info-soft); color: var(--info-text); font-weight: 600; }
.hub-busy .progress { flex: 0 1 200px; }
.progress.indeterminate > div { width: 30%; animation: hub-indeterminate var(--dur-loop) ease-in-out infinite; }
@keyframes hub-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ---------- 設定（app-settings.js、panels/settings-*.js）：和資料中心疊在同一格（兩者互斥），左側分類、右側內容 ---------- */
header .icon-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.settings-inner { max-width: 1180px; margin: 0 auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.settings-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-width: 0; }
.settings-head h1 { margin: 0; font-size: var(--fs-2xl); }
.settings-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
/* 分類：目前的一個除了顏色，還有粗體與左側的直線（不只靠顏色） */
.settings-tabs { display: flex; flex-direction: column; gap: 2px; }
.settings-tab { justify-content: flex-start; width: 100%; min-height: var(--control-h); padding: 6px 12px; border-color: transparent; background: transparent; box-shadow: none; text-align: left; }
.settings-tab:hover:not(.on) { background: var(--surface-hover); }
.settings-tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 var(--accent); }
.settings-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow-sm); }
.settings-panel h2 { margin: 0; font-size: var(--fs-xl); }
#settings-title:focus, #settings-panel-title:focus { outline: none; }
#settings-title:focus-visible, #settings-panel-title:focus-visible { box-shadow: var(--focus-ring); }
.settings-desc { margin: 0; }
.settings-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings-content > p, .settings-content > .row { margin: 0; }
.settings-content pre.cmd-list { margin: 0; }
.settings-group { margin: 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings-group legend { padding: 0 4px; font-weight: 600; }
.settings-option { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: var(--control-h); cursor: pointer; }
.settings-option-name { min-width: 7em; font-weight: 600; }
.settings-note { margin: 4px 0 0; font-size: var(--fs-sm); }
.settings-group h3, .settings-content > h3 { margin: 0; }
/* 收集與建立基準：每段的標題、段落與指令清單由 gap 控制間距 */
.settings-step { gap: 10px; padding: 14px 16px 16px; }
.settings-step > h3 { margin: 0; font-size: var(--fs-lg); }
.settings-step > p, .settings-step > pre.cmd-list, .settings-step .settings-list { margin: 0; }
.settings-exit dt { font-weight: 600; }
/* 本機資料：大小靠右對齊，名稱與「無法重建」加粗；按鈕可換行 */
/* 窄螢幕：表格保持可讀的最小寬度，在外層的 .table-scroll 內橫向捲動（不擠成一字一行、不撐寬整頁）；按鈕文字不折行 */
.settings-data { min-width: 560px; }
.settings-profiles { min-width: 680px; }
.settings-data .settings-clear, .settings-profiles button { white-space: nowrap; }
.settings-data td { vertical-align: top; }
.settings-data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settings-data caption { text-align: left; }
.settings-data-name, .settings-data-critical { font-weight: 600; }
.settings-action { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-list { margin: 0; padding-left: 20px; }
.settings-action { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.settings-about { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.settings-about dt { color: var(--muted); }
.settings-about dd { margin: 0; overflow-wrap: anywhere; }
/* 窄螢幕（和上方的 max-width: 900px 相同）：放在資料中心的一般樣式之後，才能覆蓋 */
@media (max-width: 900px) {
  /* 資料中心：單欄，各列的欄位改成上下排並加上「來源：」「狀態：」標示；不出現水平捲動 */
  .hub-inner { padding: 12px; gap: 12px; }
  .hub-card { padding: 12px; }
  .hub-rows { display: block; }
  .hub-row { grid-template-columns: minmax(0, 1fr); }
  .hub-row-head { display: none !important; }
  .hub-cap { display: inline; }
  .hub-act { justify-content: flex-start; }
  .hub-outs { grid-template-columns: minmax(0, 1fr); }
  #app.overlay-open #banner { left: 10px; right: 10px; transform: none; width: auto; bottom: 16px; }
  /* 設定：單欄，分類改成內容上方的一列（放不下時換行，每個分類都看得到），不出現整頁的水平捲動 */
  .settings-inner { padding: 12px; gap: 12px; }
  .settings-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .settings-tabs { flex-direction: row; flex-wrap: wrap; overflow-x: visible; }
  .settings-tab { flex: none; width: auto; min-height: 44px; }
  .settings-tab.on { box-shadow: inset 0 -3px var(--accent); }
  .settings-panel { padding: 12px; }
  .settings-about { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .settings-about dd { margin-bottom: 8px; }
  /* 中間的工作畫面：內距縮小；內容不出現整頁的水平捲動（寬的表格、指令與圖在自己的框內捲動） */
  .work-inner { padding: 12px 10px 24px; gap: 12px; }
  /* 清單（「檢視」）：關鍵欄排在前三欄；表格依內容寬度在 .table-scroll 內橫向捲動，廠商等欄不被擠窄截斷 */
  .inv-scroll-hint { display: block; }
  .inv-table table.t { width: max-content; min-width: 100%; }
  .inv-table table.t td { white-space: nowrap; }
  .inv-table table.t td:first-child { white-space: normal; min-width: 7em; max-width: 45vw; overflow-wrap: anywhere; }
  .patch-select, .patch-main, .verify-card { padding: 10px; }
}