/* ---------- 清單／表格 ---------- */
  .row-list > li{ padding:12px 16px; border-bottom:1px solid var(--line); }
  .row-list > li:last-child{ border-bottom:none; }
  .session-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .session-type{ display:flex; align-items:center; gap:4px; min-width:0; font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:4px; overflow-wrap:anywhere; }
  .link-btn{
    font-size:var(--fs-md); font-weight:600; display:block; background:none; border:none; padding:0; margin:0;
    font-family:inherit; color:var(--ink); cursor:pointer; text-align:left;
  }
  .link-btn:hover{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
  .session-meta{ color:var(--ink-faint); font-size:var(--fs-sm); margin-top:4px; display:flex; gap:4px 12px; flex-wrap:wrap; align-items:center; }
  /* 2026-09-15 重設計：全站空狀態／載入中收斂成這唯一一顆（面板內置中一段 13px 淡字）。
     原本 .fleet-table td.empty-state、.conn-table td.empty-state 兩條各自調內距的變體已刪除，
     不要再為個別表格另外開變體，不然又會長回五種寫法。 */
  .empty-state{ padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:var(--fs-md); line-height:1.6; }
  .audit-body{ padding:12px 16px 16px; }
  .audit-detail{ color:var(--ink-faint); font-size:var(--fs-xs); margin-top:2px; overflow-wrap:anywhere; }

  /* 寬表格一律讓表格自己橫捲，不要讓整頁跟著橫向捲動 */
  .tbl-scroll{ overflow-x:auto; }
  .data-table{ width:100%; border-collapse:collapse; font-size:var(--fs-md); }
  /* 2026-09-15 重設計：設計稿只有一種表格語言，所以 .data-table 的表頭／格子密度全部改成跟下面
     .fleet-table 同一組值（th 8px 14px＋surface-2 淡底列、td 10px 14px＋逐列髮絲線），並拿掉
     斑馬紋與右側 padding-right:0 那兩條——同一頁同時出現兩種表格觀感一眼就看得出來。 */
  .data-table th{ text-align:left; font-weight:600; color:var(--ink-faint); font-size:var(--fs-xs); letter-spacing:.04em; padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .data-table thead tr{ border-bottom:1px solid var(--line); }
  .data-table td{ padding:10px 14px; border-top:1px solid var(--line); vertical-align:middle; }
  /* 第一列上方那條線由 thead 負責，不然表頭底線會跟它疊成雙線（同 .fleet-table 的做法） */
  .data-table tbody tr:first-child td{ border-top:none; }
  .cell-nowrap{ white-space:nowrap; }
  .cell-actions{ white-space:nowrap; width:1%; text-align:right; }

  /* 「總覽」分頁（2026-09-09 裝置 Overview 識別資訊補強規格）的欄位標籤／值兩欄表格：沿用上面
     .data-table 的外觀，只是拿掉表頭列、改成逐列 <th scope="row"> 當左欄標籤——不新開一套表格
     樣式系統，單純固定左欄寬度讓標籤對齊。 */
  /* 2026-09-15 重設計：設計稿的 .kv 是「140px 標籤欄＋1fr 值欄、每格 10px 16px、逐列髮絲線、
     最後一列不畫線」的兩欄資訊表，標籤跟值同樣是 13px 正文字——不是表頭。所以這裡要把上面
     .data-table th 的淡底列、11px、600、字距全部壓回去，只留「淡字標籤」這一階。 */
  .overview-kv{ table-layout:fixed; }
  .overview-kv th{ width:140px; background:transparent; font-size:var(--fs-md); font-weight:400; letter-spacing:0; color:var(--ink-faint); white-space:normal; }
  /* 改用 border-bottom（而非 .data-table 的 border-top）才對得上設計稿：第一列上方無線、
     最後一列下方無線；border-top:none 是為了蓋掉上面 .data-table td 那條。 */
  .overview-kv th, .overview-kv td{ padding:10px 16px; border-top:none; border-bottom:1px solid var(--line); }
  .overview-kv tr:last-child th, .overview-kv tr:last-child td{ border-bottom:none; }
  /* 「出站來源 IP 最後更新」欄位下方的小字說明（提醒這不是即時值）。跟上面 .form-row .hint 是
     同一顆視覺樣式，但那組選擇器只認 .form-row／.pv-modal-row 這兩種容器，這裡的小字是插在
     .overview-kv 的 <td> 裡，不在那兩種容器內，所以另外列一份選擇器，不去改動原本那條規則
     （改了要重新確認所有既有用法有沒有被波及，不划算）。 */
  .overview-kv .hint{ display:block; font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.5; margin-top:4px; }
  /* 一欄多筆值（本機網卡 IP 清單）比照 qbee 逐行條列：拿掉項目符號（沿用最上面 ul,ol 的全域
     reset）之後只需要補直向排列與行距。 */
  .stacked-list{ display:flex; flex-direction:column; gap:4px; }
  /* 標籤（Tags）清單的外層容器：只負責讓多個標籤能換行、彼此留間距，標籤本身的樣式看下面的 .tag。 */
  .tag-chip-list{ display:flex; flex-wrap:wrap; gap:6px; }
  /* 2026-09-15 重設計：設計稿把「識別標籤」（裝置標籤／管轄範圍／角色權限）跟「類型膠囊」分成
     兩顆不同的東西——標籤是 10px 方角 4px、實心 surface-3 底、無框不加粗；類型才是全圓角有框的
     藥丸。這裡新增 .tag 當標籤的正式樣式。 */
  .tag{ display:inline-block; font-size:var(--fs-2xs); font-weight:400; letter-spacing:0; padding:1px 6px; border-radius:var(--r-sm); background:var(--surface-3); color:var(--ink-soft); white-space:nowrap; }

  /* 2026-09-15 重設計：表頭改淡底列（surface-2）＋11px 字距標籤，格子左右各 14px 內距、列高約 44px，
     表格貼齊面板四邊（.audit-body 在總覽不再包一層內距，見 view-overview.html）。 */
  .fleet-table{ width:100%; border-collapse:collapse; font-size:var(--fs-md); }
  .fleet-table th{ text-align:left; font-weight:600; color:var(--ink-faint); font-size:var(--fs-xs); letter-spacing:.04em; padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .fleet-table th.num, .fleet-table td.num{ text-align:right; }
  /* vertical-align:middle 只覆寫這兩欄（比下面 .fleet-table td{ vertical-align:top; } 選擇器多
     一個 class，specificity 贏）——其餘欄位維持既有的 top 對齊是刻意的（裝置名／狀態／磁碟那些
     多行內容，靠 top 讓每列的「第一行」橫向對齊，不會因為子行文字長短不一而上下跳動）。
     這兩欄內容永遠只有一行（純文字「—」或一顆按鈕），跟其他多行欄位的內容形狀不一樣，改成
     middle 才會跟同一列裡的高格子（例如磁碟兩行）看起來垂直置中，不是頂到最上面。 */
  /* 2026-09-15：td 左右內距改成跟 th 同樣的 14px 之後，格子本來就左右對稱，text-align:center
     自然置中在整格正中央，原本那條補償用的 padding-right:0 不再需要（留著反而變成偏移來源）。 */
  .fleet-table th.center, .fleet-table td.center{ text-align:center; vertical-align:middle; }
  /* .link-btn 是共用 class，原本設計給列表列（session-row 那類）用，寫死 display:block／
     text-align:left——block 元素不吃父層 text-align，塞進這兩欄置中格子裡「使用中連線」／
     「活動紀錄」的數字會貼齊儲存格左邊，看起來像沒置中到。改回 inline-block 讓它服從父層
     td.center 的 text-align，順便把自己的 text-align 也覆寫成 center（雙保險，不依賴繼承）。 */
  .fleet-table td.center .link-btn{ display:inline-block; text-align:center; }
  /* 同理：靠右的數值欄若放可點數字，.link-btn 的 display:block／text-align:left 會讓它貼左邊。 */
  .fleet-table td.num .link-btn{ display:inline-block; text-align:right; }
  .fleet-table th button{ background:none; border:none; padding:0; cursor:pointer; color:inherit; font:inherit; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
  .fleet-table th button:hover{ color:var(--ink); }
  /* 沒排序時箭頭留位子但不顯示——不然點下去整欄會左右跳一下 */
  .fleet-table .sort-arrow{ font-size:var(--fs-2xs); opacity:0; }
  .fleet-table th[aria-sort] button{ color:var(--ink); }
  .fleet-table th[aria-sort] .sort-arrow{ opacity:1; }
  /* 2026-09-15：設計稿 td 是 padding:10px 14px，左右跟 th 的 14px 切齊，欄名左緣才會跟底下
     內容對成一條線（原本 12px 讓每一欄的欄名都比內容右推 2px）。 */
  .fleet-table td{ padding:10px 14px; border-top:1px solid var(--line); vertical-align:middle; }
  .fleet-table tbody tr:first-child td{ border-top:none; }
  /* 2026-09-15：「剝掉膠囊底色、改 7px 圓點＋文字」只適用總覽的裝置表（設計稿畫的是 .st-line）。
     客戶管理與帳號清單這兩張表的狀態欄，設計稿保留的是有底色的 11px 膠囊，所以這組覆寫一律
     只吃帶 .is-bare 的膠囊，不再無差別套到所有 .fleet-table 裡的狀態欄。 */
  .fleet-table .status-pill.is-bare{ background:none; padding:0; gap:7px; font-size:var(--fs-md); font-weight:500; letter-spacing:0; color:var(--ink); }
  .fleet-table .status-pill.is-bare .status-dot{ width:7px; height:7px; background:var(--ok); }
  .fleet-table .status-pill.is-bare.is-offline{ color:var(--ink-faint); }
  .fleet-table .status-pill.is-bare.is-offline .status-dot{ background:var(--neutral); }
  /* 設計 token 表：ID／數值／時間一律等寬 12，比表格內文（13）小一階，掃的時候才分得出機器值。 */
  .fleet-table td.mono{ font-size:var(--fs-sm); }
  .fleet-table tbody tr:hover{ background:var(--surface-2); }
  .fleet-row-name{ font-weight:600; }
  .fleet-row-sub{ color:var(--ink-faint); font-size:var(--fs-xs); margin-top:2px; white-space:nowrap; }
  /* 裝置名下面那行等寬編號（重設計把 2026-09-09 拿掉的 id 加回來，但只當 11px 淡字，不搶名稱）。 */
  /* ---------- 遠端連線頁（2026-09-15 重設計第三批）：沿用 .fleet-table，加類型膠囊、剩餘時間進度條、關閉原因膠囊 ---------- */
  /* 頁首「全部／SSH／網頁」分段按鈕：設計稿 .seg 是 32px 高、6px 圓角、1px --line-strong 外框，
     格與格之間用 --line 分隔，選中那格鋪 --surface-3 並加粗。標記與切換邏輯在 view-connections.html
     與 connections.mjs（另一支負責），這裡只出樣式。 */
  .conn-seg{ display:inline-flex; height:32px; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; }
  .conn-seg button{ padding:0 10px; border:none; border-right:1px solid var(--line); background:var(--surface); color:var(--ink-faint); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
  .conn-seg button:last-child{ border-right:none; }
  .conn-seg button[aria-checked="true"]{ background:var(--surface-3); color:var(--ink); font-weight:600; }
  .conn-kind{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:500; padding:2px 8px; border-radius:var(--r-pill); background:var(--neutral-bg); color:var(--neutral); white-space:nowrap; }
  .conn-dev{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .conn-dev .fleet-row-id{ overflow:hidden; text-overflow:ellipsis; }
  /* 版本表的映像欄：repository@digest 可以很長，限寬＋省略號，表格才不會被它撐出捲軸。 */
  /* 使用者身分格：頭像字首＋名稱＋帳號·Email。 */
  .user-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
  .user-avatar{ width:28px; height:28px; border-radius:50%; flex:none; background:var(--surface-3); color:var(--ink-soft); font-size:var(--fs-sm); font-weight:600; display:flex; align-items:center; justify-content:center; }
  .fleet-row-id .sep{ color:var(--line-strong); }
  /* 設計稿的身分副行只有帳號代號走等寬，Email 另外蓋回比例字體（等寬 Email 又長又難讀）。
     class 由 users.mjs 那支補上，這條只認帶 .id-email 的節點，其他頁的 .fleet-row-id 不受影響。 */
  .fleet-row-id .id-email{ font-family:'Noto Sans TC', system-ui, sans-serif; }
  /* 整列淡化（已停用客戶／帳號）。 */
  .fleet-table tr.is-muted td{ color:var(--ink-faint); }
  .fleet-table tr.is-muted .fleet-row-name{ color:var(--ink-soft); }
  /* 2026-09-15 走查：這裡原本有一組「表格內的動作鈕組改成文字連結密度」規則（.fleet-table
     .tbl-actions 開頭那五條），使用者反饋動作鈕看不出是按鈕——已經把 tenants.mjs／users.mjs／
     releases.mjs 三處改回 .endpoint-actions（跟同一頁的角色表格一致），這裡的規則沒有任何
     HTML／JS 還在用，一併刪除，不留死規則。 */
  .fleet-table td.cell-actions{ text-align:right; white-space:nowrap; }
  /* 2026-09-15 走查：換回 .endpoint-actions 之後動作鈕在表格裡擠成兩三顆一排、直向堆疊，很怪——
     .endpoint-actions 的 flex-wrap:wrap（50-panel-device.css）是給遠端存取分頁那種較窄的端點卡片
     用的，客戶管理那張表沒鎖欄寬（auto layout，瀏覽器會照內容撐開），但 #usersTable／
     .release-table 兩張都是 table-layout:fixed＋colgroup 鎖死欄寬——那種情況下瀏覽器的自動欄寬
     算法會用「換行後最寬的那顆按鈕」當這欄的最小寬度，把整欄壓得只夠放一顆鈕，其餘的鈕就换行
     擠成一疊。這裡先強制不換行。
     2026-09-15 二輪：只加 nowrap 不夠——欄寬是 colgroup 鎖死的固定值，不換行之後瀏覽器改成把
     按鈕「壓扁」塞進去（flex-item 預設 flex-shrink:1），按鈕的字沒有跟著縮小，看起來就是文字被
     裁掉一截。這裡補 flex-shrink:0，按鈕永遠维持自己內容需要的寬度，不夠放的話交給
     colgroup／table-layout 決定要不要橫向捲動（users.mjs／releases.mjs 那兩支的 colgroup
     欄寬同一輪一起調寬，兩者要搭配著看，只改一邊沒有用）。 */
  .fleet-table td.cell-actions .endpoint-actions{ flex-wrap:nowrap; }
  .fleet-table td.cell-actions .endpoint-actions .btn{ flex-shrink:0; }
  /* 不是新變體：`.fleet-table td`／`.data-table td` 的 padding 特異度比 .empty-state 高，
     這裡只是把上面那顆唯一空狀態的同一組內距值提權回來，數值必須跟它一致。 */
  .fleet-table td.empty-state, .data-table td.empty-state{ padding:28px 16px; }
  .audit-table{ table-layout:fixed; }
  .audit-table .audit-detail{ font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; }
  /* 日誌表的分類徽章借用裝置頁 .badge 基底（4px 12px／600／有字距），但分類欄是固定 90px、
     表格又是 table-layout:fixed，「穿透紀錄」這種四字分類會撐爆溢到動作欄；設計稿那顆本來就是
     2px 8px／500／無字距。動作欄設計稿也只有 500，比 .fleet-row-name 的 600 輕一階。
     用 .audit-table 前綴收斂影響範圍，不動兩個共用基底。 */
  .audit-table .badge{ padding:2px 8px; font-weight:500; letter-spacing:0; }
  .audit-table .fleet-row-name{ font-weight:500; }
  .release-table{ table-layout:fixed; }
  .release-table td{ overflow:hidden; }
  /* 帳號清單：設計稿用 colgroup 鎖七欄寬＋table-layout:fixed，使用者欄吃剩餘寬度。colgroup 由
     users.mjs 那支輸出；td 的 overflow:hidden 照 .release-table 的既有先例，讓身分欄那條既有的
     text-overflow:ellipsis 在固定寬度下真的生效，而不是把長 Email 溢出去。 */
  #usersTable{ table-layout:fixed; }
  #usersTable td{ overflow:hidden; }
  .conn-ttl{ display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; }
  .conn-ttl b{ font-weight:500; font-size:var(--fs-sm); min-width:52px; text-align:right; }
  .conn-bar{ width:72px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; display:inline-block; }
  .conn-bar i{ display:block; height:100%; background:var(--accent-2); }
  /* 2026-09-15：設計稿快到期那列只把進度條填色換成 144 C 暖橘，右邊的剩餘時間數字維持正文色
     （原本多寫的 .conn-ttl.is-warn b{color:var(--warm)} 已刪——12px 小字吃 #F08307 也撐不到
     4.5:1，設計稿本來就沒有這條）。 */
  .conn-ttl.is-warn .conn-bar i{ background:var(--warm); }
  .conn-close{ color:var(--crit); font-size:var(--fs-sm); }
  .conn-reason{ display:inline-block; font-size:var(--fs-xs); font-weight:500; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; }
  .conn-reason.is-neu{ background:var(--neutral-bg); color:var(--neutral); }
  .conn-reason.is-warn{ background:var(--warn-bg); color:var(--warn); }
  .conn-reason.is-crit{ background:var(--crit-bg); color:var(--crit); }
  .conn-reason.is-ok{ background:var(--ok-bg); color:var(--ok); }
  .fleet-row-id{ display:block; color:var(--ink-faint); font-size:var(--fs-xs); font-family:'JetBrains Mono',monospace; margin-top:2px; white-space:nowrap; }
  .fleet-cell-quiet{ color:var(--ink-faint); }

  /* 2026-09-15：設計稿只有一種膠囊幾何（11px／500／2px 8px／999px），字重跟著收斂成 500。 */
  .inv-state{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:var(--fs-xs); font-weight:500; padding:2px 8px; border-radius:var(--r-pill); }
  .inv-state.ok{ background:var(--ok-bg); color:var(--ok); }
  .inv-state.bad{ background:var(--crit-bg); color:var(--crit); }
  .inv-state.warn{ background:var(--warn-bg); color:var(--warn); }