/* ---------- panel ---------- */
  /* 為什麼拿掉邊框跟陰影：套 18 號的視覺語言，面板不再靠邊框/陰影撐出立體感，
     改靠 --bg（頁面底色）跟 --surface（面板底色）的明度差自然分層，畫面看起來更貼平、不浮誇 */
  /* 2026-09-15 重設計：邊框加回來（1px 髮絲線）、圓角 10→8——底色明度差在新的 #F3F5F6 底上太淡，
     沒有線面板邊緣會糊掉；陰影仍然不加。 */
  /* 2026-09-15 重設計收尾：圓角改吃 --r-lg（token 已從 10px 調成設計稿的 8px），
     不再寫死 8px——寫死會讓下一個吃 token 的人跟畫面對不上。 */
  .panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
  .content, .pane{ display:flex; flex-direction:column; gap:16px; min-width:0; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
  /* flex 子項的 min-content 是整串中文的寬度（body 設了 word-break:keep-all），
     沒有 min-width:0 標題欄會自己撐開，把面板推爆、整頁長出橫向捲軸。 */
  .panel-head > :first-child{ min-width:0; }
  .panel-head.is-plain{ border-bottom:none; padding-bottom:4px; }
  .panel-title{ font-size:var(--fs-lg); font-weight:600; letter-spacing:0; display:flex; align-items:center; gap:8px; }
  .panel-sub{ color:var(--ink-faint); font-size:var(--fs-sm); margin-top:2px; line-height:1.45; }
  /* 標題旁的計數小徽章（「裝置 5」）：等寬字、淡底，取代把數字寫進副標那句話。 */
  .panel-count{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:var(--fs-xs); padding:1px 6px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-soft); }
  .panel-actions{ display:flex; gap:8px; align-items:center; flex:none; flex-wrap:wrap; }
  /* 窄螢幕時標題列改成上下兩排：右邊那組控制項是 flex:none，不換行的話會把左邊的標題與副標
     擠成一行兩三個字（320px 下最明顯）。 */
  @media (max-width:560px){
    .panel-head{ flex-wrap:wrap; }
    .panel-head > .panel-actions{ width:100%; }
  }
  .panel-body{ padding:16px; }
  /* 2026-09-15 重設計：裝置頁「系統屬性／規格」那張兩欄資訊表要讓逐列髮絲線貼齊面板左右邊緣
     （設計稿 DeviceLight 的 .kv 是滿版分隔線），面板內距歸零、內距改由 .overview-kv 每格自己出。
     #pane-overview 底下只有這一個 .panel-body，不會外溢到別頁。 */
  #pane-overview .panel-body{ padding:0; }
  /* 面板尾端的收尾連結（目前只有總覽頁「近期日誌」的「前往日誌 →」用到）：跟 .panel-head
     用同一種「上緣一條分隔線＋內距」語言收尾，不然清單最後一列跟按鈕直接貼在一起、按鈕又貼著
     面板外緣，看起來像忘了排版。 */
  .panel-foot{ padding:12px 16px; border-top:1px solid var(--line); }
  /* .panel 拿掉邊框之後，這裡不能再靠 border-style 借用鄰居的邊框設定，要自己畫一條完整的虛線邊框 */
  .panel.is-planned{ border:1px dashed var(--line-strong); }
  .planned-chip{
    font-size:var(--fs-2xs); font-weight:600; letter-spacing:.04em; flex:none; color:var(--ink-faint);
    border:1px dashed var(--line-strong); border-radius:var(--r-pill); padding:2px 8px; background:var(--surface-2);
  }

  /* ---------- 裝置清單側欄 ---------- */
  .fleet-search{ padding:12px 12px 8px; }
  .search-input{ width:100%; height:32px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:0 10px; font-size:var(--fs-sm); color:var(--ink); }
  .search-input::placeholder{ color:var(--ink-faint); }
  /* 2026-09-15 重設計：清單軌的在線／離線計數從一句灰字改成兩顆彩底藥丸（設計稿 DeviceLight
     搜尋框下方那排）。幾何照設計稿的 .pill：11px／500／2px 8px／全圓，底色吃既有語意 token。 */
  .pill-count{ display:inline-flex; align-items:center; font-size:var(--fs-xs); font-weight:500; padding:2px 8px; border-radius:var(--r-pill); margin-right:6px; }
  .pill-count.is-ok{ background:var(--ok-bg); color:var(--ok); }
  .pill-count.is-neu{ background:var(--neutral-bg); color:var(--neutral); }
  .fleet-item{
    /* 重設計：清單項改圓角 6px 方塊、左右各留 8px 走道，選中只靠淡青底，不再畫左邊框。 */
    display:flex; align-items:center; gap:10px; width:calc(100% - 16px); margin:0 8px; padding:9px 12px;
    border:none; border-radius:var(--r-md); background:none; text-align:left; cursor:pointer;
    font-size:var(--fs-md); color:var(--ink-soft);
  }
  .fleet-item:hover:not(.is-selected){ background:var(--surface-2); }
  .fleet-item.is-selected{ background:var(--accent-soft-bg); color:var(--ink); font-weight:600; }
  .fleet-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ok); }
  .fleet-item.is-offline .fleet-dot{ background:var(--neutral); box-shadow:inset 0 0 0 2px var(--surface); }
  .fleet-item.is-offline{ color:var(--ink-faint); }
  /* 2026-09-15 重設計：清單軌每一項改兩行（粗體名稱＋等寬硬體編號），設計稿 DeviceLight 的
     .rail-item > .id-cell。兩行的直排容器要 min-width:0，否則長名稱會把 260px 的軌道撐破。 */
  .fleet-item-text{ display:flex; flex-direction:column; min-width:0; }
  .fleet-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  /* 行距留給編號自己的 margin-top，容器不設 gap（設了會疊成 4px）；
     font-weight:400 是為了擋掉 .fleet-item.is-selected 的 600 繼承——編號永遠是弱化的那一行。
     70-table.css 的 .fleet-row-id 只有 nowrap 沒有截斷，在 260px 軌道裡一定要自己補 ellipsis。 */
  .fleet-item .fleet-row-id{ margin-top:2px; font-weight:400; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- 端點列 ---------- */
  .endpoint-list{ padding:8px 16px 16px; display:flex; flex-direction:column; gap:12px; }
  .endpoint{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
    padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);
  }
  .endpoint.is-expired{ border-style:dashed; }
  .endpoint.is-active{ border-color:var(--ok); }
  .endpoint.is-failed{ border-color:var(--crit); }
  .port-tile{
    width:52px; height:52px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line-strong);
    display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none;
    font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:var(--fs-xl); line-height:1;
  }
  .port-tile small{ font-size:var(--fs-2xs); font-weight:600; letter-spacing:.08em; color:var(--ink-faint); margin-top:4px; }
  .endpoint-label{ font-weight:600; font-size:var(--fs-lg); display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
  /* 端點名後端允許到 64 字，沒有 min-width:0 + anywhere 會衝出面板蓋掉右邊的狀態與按鈕 */
  .endpoint-label-text{ min-width:0; overflow-wrap:anywhere; }
  .kind-chip{
    font-size:var(--fs-2xs); font-weight:600; letter-spacing:.04em; border:1px solid var(--line-strong);
    color:var(--ink-soft); border-radius:var(--r-pill); padding:2px 8px; background:var(--surface); white-space:nowrap;
  }
  .endpoint-sub{ color:var(--ink-faint); font-size:var(--fs-sm); margin-top:4px; }
  .endpoint-note{ font-size:var(--fs-sm); margin-top:8px; line-height:1.5; }
  .endpoint-note.is-failed{ color:var(--crit); }
  /* 2026-09-15 重設計：設計稿色票沒有第五顆語意色（資訊藍），這裡的提示字收回中性的次要文字色。
     --info／--info-bg 兩顆 token 保留不刪，terminal.css 另有用途。 */
  .endpoint-note.is-info{ color:var(--ink-soft); }
  .endpoint-note.is-quiet{ color:var(--ink-faint); }
  .endpoint-state{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
  .endpoint-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  .endpoint-manage{ grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding-top:12px; border-top:1px dashed var(--line); }
  @media (max-width:640px){
    /* 兩欄之後整列變高：埠號磚要跟標題切齊頂端，不然它會浮在整列正中間、跟它標示的名稱脫節 */
    .endpoint{ grid-template-columns:auto minmax(0,1fr); align-items:start; }
    .endpoint-state{ grid-column:1 / -1; align-items:stretch; }
    .endpoint-state > .badge{ align-self:flex-start; }
    .endpoint-actions{ justify-content:flex-start; }
    .endpoint-manage{ justify-content:flex-start; }
  }

  /* badge：顏色 + 文字 + 形狀符號三重編碼，色盲也分得出來 */
  /* 2026-09-15 重設計：全站徽章收斂成設計稿唯一那顆 .pill 的幾何（11px／500／2px 8px／全圓），
     原本的 4px 12px＋600 比設計稿胖一圈，跟表格裡的 .status-pill 並排時兩種高度很明顯。 */
  .badge{
    display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:500; letter-spacing:.02em;
    padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; border:1px solid transparent;
  }
  .badge .glyph{ font-size:var(--fs-2xs); line-height:1; }
  .badge--offline{ background:var(--neutral-bg); color:var(--neutral); }
  .badge--idle{ background:var(--surface); color:var(--ink-faint); border-color:var(--line-strong); }
  .badge--connecting{ background:var(--accent-soft-bg); color:var(--accent-strong); }
  .badge--connecting .glyph{ animation:blink 1s steps(2) infinite; }
  @keyframes blink{ 50%{ opacity:.2; } }
  .badge--active{ background:var(--ok-bg); color:var(--ok); }
  .badge--failed{ background:var(--crit-bg); color:var(--crit); }
  /* 「已自動關閉」刻意不用紅色：那是正常回收，不是錯誤。
     2026-09-15 重設計：原本吃資訊藍，但設計稿色票沒有這顆；ConnectionsLight 的關閉原因整欄都是
     中性藥丸，改吃 --neutral 這一階。 */
  .badge--closed{ background:var(--neutral-bg); color:var(--neutral); }
  .badge--expired{ background:var(--neutral-bg); color:var(--neutral); border-style:dashed; border-color:var(--line-strong); }
  /* 日誌分類徽章。2026-09-15 重設計：分類不是狀態，不該跟主動作色或資訊藍搶眼——設計稿
     AuditLight 的分類欄三種分類全是中性藥丸，「系統」只把底色換深一階（--surface-3）、文字色不換。
     --accent 收回去只當主動作色用。 */
  .badge--tunnel{ background:var(--neutral-bg); color:var(--neutral); }
  .badge--system{ background:var(--surface-3); color:var(--neutral); }