/* ---------- context bar ---------- */
  .context-bar{ background:var(--surface); border-bottom:1px solid var(--line); }
  /* 2026-09-15 主控台重設計第二批（總覽＋裝置）：頁首改成「麵包屑 → 22px 標題＋右側動作列 → 一行引言」
     的結構，左右內距 24→28 跟設計稿對齊；.page-head／.page-actions 是新加的容器，讓每頁的主要動作
     （新增裝置、重新整理）從面板標題列提到頁首右側，跟 Linear／Vercel 的頁首同一種排法。 */
  .context-inner{ max-width:var(--page-max); margin:0 auto; padding:20px 28px 0; }
  .breadcrumb{ font-size:var(--fs-md); color:var(--ink-faint); margin-bottom:10px; }
  .page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .page-head > :first-child{ min-width:0; }
  .page-actions{ display:flex; align-items:center; gap:8px; flex:none; }
  .breadcrumb .sep{ margin:0 8px; color:var(--line-strong); }
  .device-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; }
  /* 2026-09-15：字級改吃 --fs-2xl token（22px，跟 10-tokens.css 的字階表對齊，不再寫死數字）。 */
  .device-title{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.01em; line-height:1.2; min-width:0; overflow-wrap:anywhere; }
  .device-title .did{ font-family:'JetBrains Mono',monospace; font-weight:600; margin-right:12px; }
  @media (max-width:560px){
    .device-title{ font-size:var(--fs-xl); }
    .device-title .did{ display:block; margin:0 0 4px; font-size:var(--fs-xl); }
    /* 2026-09-15 走查：.page-head 一直沒有跟 .panel-head（見 50-panel-device.css 同一個斷點）
       一樣的換行退路——.page-actions 是 flex:none，窄螢幕下標題／meta 那欄會被硬擠成一條窄縫，
       裝置頁尤其明顯（標題＋編輯名稱鈕＋狀態膠囊都擠在「開啟遠端連線」鈕左邊）。這裡補上同一招：
       換行、動作列自己佔一整行。 */
    .page-head{ flex-wrap:wrap; }
    .page-head > .page-actions{ width:100%; }
  }
  /* 2026-09-15：狀態膠囊改成設計稿唯一一種幾何（11px/500/字距0/padding 2px 8px/gap 5px），
     .dot 6px→7px；跨頁只有這一顆基礎樣式，客戶／使用者表格另外在 70-table.css 疊 .is-bare 剝色，
     兩邊改完剛好同值、不衝突。 */
  .status-pill{
    display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:500; letter-spacing:0;
    padding:2px 8px; border-radius:var(--r-pill); background:var(--ok-bg); color:var(--ok);
  }
  .status-pill.is-offline{ background:var(--neutral-bg); color:var(--neutral); }
  .status-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
  /* 重設計：裝置標頭的身分資訊收成一行等寬小字（編號／客戶／架構／IP／Agent 版本／心跳），
     不再是「標籤：值」一組一組的正文字——這行是給人「掃」的，不是給人「讀」的。 */
  .device-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--ink-faint); font-size:var(--fs-sm); font-family:'JetBrains Mono',monospace; margin:8px 0 16px; }
  /* 2026-09-15：meta 行改成純值六段（js 端已拿掉 <b>標籤</b> 那組寫法），這條規則沒有對象了，刪掉。 */
  .device-meta > span{ min-width:0; overflow-wrap:anywhere; }
  /* 端點格數徽章：掛在「穿透端點」面板的標題列，因為它就是這台裝置的數字（每台裝置最多幾個穿透端點，
     設定好沒在連也佔一格；2026-09-05 使用者釐清後從「本租戶同時連線」改成這個定義）。 */
  /* 2026-09-15：端點格數是計數徽章、不是狀態膠囊，改對齊 .panel-count 的幾何（mono／11px／1px 6px）。 */
  .quota-badge{ display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-weight:500; font-size:var(--fs-xs); padding:1px 6px; border-radius:var(--r-pill); background:var(--neutral-bg); color:var(--neutral); }
  /* 快滿了但還沒滿：以前借用強調色硬湊，現在有獨立警告色，改吃真的 --warn */
  .quota-badge.is-near{ background:var(--warn-bg); color:var(--warn); }
  .quota-badge.is-full{ background:var(--crit-bg); color:var(--crit); }
  .quota-badge b{ color:inherit; font-weight:600; }
  .view-lead{ color:var(--ink-faint); font-size:var(--fs-md); max-width:660px; margin:6px 0 20px; }

  /* 重設計：分頁改成「字貼字、間距 20px、選中只畫 2px 亮青底線」，不再是每顆 16px 內距的按鈕感。
     2026-09-15：分頁列底下改成常駐一條髮絲線，選中用 inset box-shadow 壓在線上而不是實體
     border-bottom——後者會蓋掉容器線本身，切換時底線跟著跳 2px；inset 陰影不佔版面、也不會跳動。 */
  .tabs{ display:flex; gap:20px; overflow-x:auto; border-bottom:1px solid var(--line); }
  .tab{
    appearance:none; background:none; border:none; cursor:pointer; padding:8px 2px 10px;
    font-size:var(--fs-md); color:var(--ink-faint); white-space:nowrap;
  }
  .tab:hover{ color:var(--ink); }
  .tab[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent-2); font-weight:600; }

  /* ---------- layout ---------- */
  .layout{
    max-width:var(--page-max); margin:0 auto; padding:20px 28px 72px;
    display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start;
  }
  .view-body{ max-width:var(--page-max); margin:0 auto; padding:20px 28px 72px; display:flex; flex-direction:column; gap:20px; }
  /* 總覽主體：左邊裝置表吃剩餘寬度、右邊 320px（設計稿 340，但 1440 寬下裝置表塞不下，見 CHANGELOG 第二批；
     2026-09-15 用 fe-mock 實測過 340px 會讓 #fleetTable scrollWidth(771) > 容器(767) 產生橫捲，維持 320
     才是 787/787 剛好塞下——註解與數字先前對不上，這裡改成跟程式碼一致）放近期日誌
     （設計稿右欄還有「需要注意」，那是新功能，待拍板）。 */
  /* 2026-09-15 重設計收尾：右欄 320→340px，對回設計稿 Main.dc.html 的 minmax(0,1fr) 340px——
     近期日誌那一列是「分類膠囊＋標題／副標＋相對時間」三段，320px 下標題會被截到只剩動作名。 */
  .overview-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
  @media (max-width:1100px){ .overview-grid{ grid-template-columns:minmax(0,1fr); } }
  /* 2026-09-15：系統屬性 kv 表要貼齊面板邊緣的髮絲線（跟畫板一致），這裡把 overview 分頁唯一一張
     面板的內距清零，欄位本身的內距改由 70-table.css 的 .overview-kv th/td 自己控制。 */
  #pane-overview .panel-body{ padding:0; }
  /* 篩選列（使用者／日誌，2026-09-15 重設計第四批）：表格上方一排「搜尋框＋帶標籤的下拉＋勾選」，
     不再包在面板裡當表單。.filter-sel 是「小標籤＋下拉」黏在一起的一顆。 */
  .filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .filter-sel{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 10px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-md); color:var(--ink); }
  .filter-sel > span{ color:var(--ink-faint); font-size:var(--fs-sm); white-space:nowrap; }
  .filter-sel .form-control{ border:none; background:transparent; height:30px; min-height:0; padding:0 22px 0 4px; font-size:var(--fs-md); width:auto; max-width:240px; }
  .filter-check{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-md); color:var(--ink-soft); padding:0 4px; }
  .filter-check input{ width:auto; accent-color:var(--accent); }
  .filters-tail{ margin-left:auto; font-size:var(--fs-sm); color:var(--ink-faint); }
  .filters .search-input{ width:280px; }
  /* 說明列（客戶管理底下那段「為什麼沒有裝置數」）。
     2026-09-15：圓角改吃 --r-lg token（不再寫死 8px，跟面板圓角統一由同一個 token 控制）。 */
  .note-row{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6; }
  .note-row svg{ flex:none; margin-top:2px; color:var(--ink-faint); }
  /* 2026-09-15：租戶停用提示改用這個語氣容器（原本是彈窗借來的裸紅字 .pv-modal-note is-warn），
     is-warn 走新增的「需要注意」色階 --warm／--warm-bg，不是錯誤等級的 --crit。 */
  .note-row.is-warn{ border-color:var(--warm); background:var(--warm-bg); color:var(--ink); }
  /* 2026-09-15 重設計收尾：設定頁原本拿「面板本身」當唯一一條兩欄列（一張面板只能左標題右控制項一次），
     跟畫板 SettingsLight 對不上——畫板的 .set-row 是面板「內」可重複的列，一張面板可以疊好幾列
     （外觀一列、資料上報一列、密碼三列）。改法：panel-head 吃回 50-panel-device.css 的預設（含髮絲線，
     只收窄內距），面板內容改包成 .settings-row 逐列放，兩欄比例（1fr / 320px）跟間距對齊畫板數值。 */
  #view-settings .panel-head{ padding:12px 16px; }
  #view-settings .panel-body{ padding:0; }
  #view-settings .panel-body .form-row{ max-width:none !important; }
  /* 2026-09-15 走查，第二輪修正：第一輪把 max-width 設在 .settings-row 上，結果更怪——面板本身
     （有邊框、有底色的卡片）還是撐到 1400px 滿版，只有列內容縮在左邊 640px，卡片右邊留了一大塊
     空的底色夾在邊框裡，比「控制項貼右緣」更像沒做完。真正該收窄的是面板卡片本身，不是卡片裡的
     列——把寬度上限改設在 .view-body（這個 view 專屬），面板跟著整張變窄、邊框貼齊內容，
     跟畫面上其他設定頁（GitHub／Stripe 那類）同一種做法：一欄窄面板置中在頁面裡，不是滿版
     卡片裡塞一條窄內容。640px 行寬（標籤欄＋320px 控制欄＋間距）算出來面板約抓 680px 剛好。 */
  #view-settings .view-body{ max-width:680px; }
  #view-settings .settings-row{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; padding:16px; align-items:center; border-bottom:1px solid var(--line); }
  #view-settings .settings-row:last-child{ border-bottom:0; }
  #view-settings .settings-label{ font-size:var(--fs-md); font-weight:600; }
  #view-settings .settings-desc{ font-size:var(--fs-sm); color:var(--ink-faint); margin-top:3px; line-height:1.5; }
  #view-settings .settings-control{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
  @media (max-width:900px){
    #view-settings .settings-row{ grid-template-columns:minmax(0,1fr); }
    #view-settings .settings-control{ justify-content:flex-start; }
  }
  /* 版本發布：左欄版本清單＋建立表單、右欄發起 Rollout＋狀態，兩欄各自直向堆面板。 */
  .releases-grid{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:20px; align-items:start; }
  .releases-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
  @media (max-width:1100px){ .releases-grid{ grid-template-columns:minmax(0,1fr); } }
  @media (max-width:1000px){
    .layout{ grid-template-columns:minmax(0,1fr); padding:16px 16px 64px; }
    .layout .fleet-rail{ order:2; }
    .view-body{ padding:16px 16px 64px; }
    .context-inner{ padding:16px 16px 0; }
  }