/* ---------- base ---------- */
  *{ box-sizing:border-box; }
  /* 作者樣式一律蓋過瀏覽器預設的 [hidden]{display:none}，所以有 .xxx{display:flex} 的元素
     光設 element.hidden = true 是藏不掉的——這條補回來讓 hidden 真的有效。 */
  [hidden]{ display:none !important; }
  /* scrollbar-gutter:stable 固定留一條捲軸的位置：裝置分頁之間內容高度差很多（「裝置資訊」長、
     「容器」「OTA 更新」空狀態很短），沒有這行的話切分頁時捲軸忽有忽無，整個頁面（含側欄）會
     跟著左右跳一下。同一招 .sidebar 自己的內捲軸已經在用（見 30-shell.css），這裡補到整個文件。 */
  /* 2026-09-15 走查：color-scheme 原本寫死 light dark（丟給瀏覽器照 OS 淺/深色偏好自己選），
     但主控台的淺／深色是使用者在「設定」頁自己切的 data-theme 屬性，兩者常常對不上——OS 是淺色、
     頁面被切成深色時，原生表單元件（<select> 下拉清單那類瀏覽器自己畫的彈出層）還是照 OS 給白底，
     配上吃 --ink（深色主題下是淺色字）的選項文字，就是使用者看到的那種「全白看不到字」。這裡改成
     跟 10-tokens.css 的 --bg 等 token 同一套判斷（prefers-color-scheme 加 data-theme 覆寫），
     color-scheme 才會真的跟著頁面本身的主題走，不是跟 OS。 */
  html{ color-scheme:light; scrollbar-gutter:stable; }
  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]){ color-scheme:dark; }
  }
  html[data-theme="dark"]{ color-scheme:dark; }
  /* 2026-09-15 重設計收尾：全站內文基準字級 14→13px（設計稿字階「內文與表格 13 / 400」）。
     真的需要 14px 的地方（面板標題、端點名、toast）本來就各自寫了 var(--fs-lg)，不受影響。
     :focus-visible 的圓角同批改成 --r-md（6px），跟設計稿控制項圓角同一階，不然焦點框比元件本身方。 */
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,-apple-system,sans-serif;
    font-size:var(--fs-md); line-height:1.55; -webkit-font-smoothing:antialiased;
    word-break:keep-all; overflow-wrap:break-word;
  }
  ul,ol{ list-style:none; margin:0; padding:0; }
  button{ font:inherit; color:inherit; }
  input,select{ font:inherit; color:inherit; }
  h1,h2,h3,h4{ margin:0; text-wrap:balance; font-weight:600; }
  p{ margin:0; }
  .mono{ font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-variant-numeric:tabular-nums; }
  .display{ font-family:'Noto Sans TC',sans-serif; font-weight:600; letter-spacing:.01em; }
  .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; }
  :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-md); }
  .skip-link{
    position:absolute; left:8px; top:-48px; z-index:100;
    background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
    padding:8px 16px; border-radius:var(--r-sm); font-size:var(--fs-md); font-weight:600; transition:top .15s ease;
  }
  .skip-link:focus{ top:8px; }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }