/*! v7工作室AI版 · [R32] 首页/设备列表 对齐原版「墨影v7」界面（纯皮肤层）
 * ---------------------------------------------------------------------------
 * 爹的诉求：「首页改成跟他一样」+ 参考图 whh666.com/devices（原版墨影v7 / 01_前端源码）
 *
 * 目标版式（对照原版截图）：
 *   ┌ 顶栏(46px)：[◆V7 标] [设备列表 用户管理 APK构建 注入规则 设置 ……] [●在线] [账号] [→退出账号]
 *   ├ 工具条：[12 当前设备][刷新状态][清理离线][刷新后更新列表][·在线][·无障碍]…[日期][分组][搜索框]
 *   ├ 表格  ：白底细线、浅灰表头、12.5px、行分隔线
 *   └ 分页  ：居中 共N台 [1]
 *   （原版没有：左侧「设备分组」大侧栏、顶部 8 个统计卡片、时钟/时区/主题/测速等杂项）
 *
 * 做法：零 DOM 搬动，纯 CSS
 *   · .sidebar            -> 收成 0 宽（只把里面的 .mk-brand 标搬到顶栏左侧 fixed 显示）
 *   · .mk-statrow         -> 隐藏（原版无统计卡片）
 *   · .header             -> 单行 flex：nav(order1) / 搜索框(fixed 到工具条右侧) / 右侧状态
 *   · .mk-topnav          -> 一行 tabs（去图标、发丝线、选中蓝色下划线）
 *   · .table-toolbar      -> 线条化：主按钮蓝色实心、其余白底细边、筛选 chip 变灰字+小圆点
 *   · .fgp-root(fixed)    -> 从悬浮侧栏改成工具条下面一条「设备分组」横条
 *   · 表格/分页            -> 白底细线、紧凑字号
 *
 * 回退：删掉 index.html 里本文件那一行，原版式原样恢复。
 * 版本：r32a   作用域：仅设备列表页（.app:has(.table-area) 的页面）
 * ========================================================================== */
:root{
  --r32-accent:#1a73e8;
  --r32-accent-2:#2f6bd8;
  --r32-line:#e8ebf0;
  --r32-line-2:#dfe3ea;
  --r32-ink:#1f2937;
  --r32-muted:#6b7280;
  --r32-muted-2:#9aa4b2;
  --r32-head:46px;
}

/* ---------- ① 顶栏：单行 46px ---------- */
html body .app.app:has(.table-area) .header.header{
  height: var(--r32-head) !important;
  min-height: var(--r32-head) !important;
  max-height: var(--r32-head) !important;
  padding: 0 18px !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--r32-line) !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 30 !important;
}
/* 原版顶栏没有的东西：时钟芯片 / 时区 / 时钟 / 主题开关 / 测速 / 头像圆点 */
html body .app.app:has(.table-area) .header .mk-clockchip,
html body .app.app:has(.table-area) .header .mk-top-tz,
html body .app.app:has(.table-area) .header .mk-top-clock,
html body .app.app:has(.table-area) .header .theme-switch,
html body .app.app:has(.table-area) .header .header-speed,
html body .app.app:has(.table-area) .header .mk-top-avatar{ display: none !important; }
html body .app.app:has(.table-area) .header .app-brand{ display: none !important; }

/* ---------- ② 左栏收成 0 宽，只把「V7」标搬到顶栏最左 ---------- */
html body .app.app:has(.table-area) .main.main > .sidebar{
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .app.app:has(.table-area) .sidebar .mk-brand{
  position: fixed !important;
  left: 18px !important;
  top: 7px !important;
  z-index: 40 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: 32px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .sidebar .mk-brand .mkv3-mark{
  width: 30px !important; height: 30px !important;
  min-width: 30px !important; flex: 0 0 30px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .sidebar .mk-brand .mkv3-mark svg{ width: 19px !important; height: 19px !important; }
html body .app.app:has(.table-area) .sidebar .mk-brand > div{ display: flex !important; flex-flow: row nowrap !important; align-items: baseline !important; gap: 4px !important; }
html body .app.app:has(.table-area) .sidebar .mk-brand .mk-brand-name{
  font-size: 15px !important; font-weight: 700 !important; color: #233a69 !important; letter-spacing: 0 !important; line-height: 1 !important;
}
html body .app.app:has(.table-area) .sidebar .mk-brand .mk-brand-sub{
  font-size: 10.5px !important; font-weight: 500 !important; color: var(--r32-muted-2) !important; line-height: 1 !important;
}
html body .app.app:has(.table-area) .sidebar .fgp-root,
html body .app.app:has(.table-area) .sidebar .mk-brand + div,
html body .app.app:has(.table-area) .sidebar .header-logout{ display: none !important; }

/* ---------- ③ 主导航 -> 顶栏一行 tabs ---------- */
html body .app.app:has(.table-area) .header .mk-topnav{
  order: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  height: var(--r32-head) !important;
  min-height: 0 !important;
  margin: 0 0 0 128px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn{
  position: relative !important;
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  height: var(--r32-head) !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #56637a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn .mk-i,
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn svg{ display: none !important; }
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn .nav-label{
  font-size: 13px !important; font-weight: 500 !important; color: inherit !important; letter-spacing: 0 !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn:hover{
  background: transparent !important;
  color: var(--r32-accent) !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn::after{
  content: '' !important;
  position: absolute !important;
  left: 10px !important; right: 10px !important; bottom: 0 !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn.active{
  color: var(--r32-accent) !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn.active .nav-label{ color: var(--r32-accent) !important; font-weight: 600 !important; }
html body .app.app:has(.table-area) .header .mk-topnav .nav-btn.active::after{ background: var(--r32-accent) !important; }
/* 「退出」贴到顶栏最右（原版是 退出账号） */
html body .app.app:has(.table-area) .header .mk-topnav .header-logout{
  order: 9 !important;
  position: absolute !important;
  right: 18px !important;
  top: 8px !important;
  height: 30px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .header .mk-topnav .header-logout:hover{ border-color: #b9c2d0 !important; color: #111827 !important; }
html body .app.app:has(.table-area) .header .mk-topnav .header-logout svg{ display: inline-block !important; width: 14px !important; height: 14px !important; }

/* ---------- ④ 顶栏右侧：在线药丸 + 账号 ---------- */
html body .app.app:has(.table-area) .header .header-right{
  order: 3 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  height: var(--r32-head) !important;
  width: auto !important;
  margin: 0 92px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html body .app.app:has(.table-area) .header .header-right .mk-top-online{
  order: 0 !important;
  height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(16,163,74,.10) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #0f9d58 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .header .header-right .account-card{
  height: 30px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .header .header-right .account-card .account-avatar{
  display: inline-flex !important;
  width: 18px !important; height: 18px !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: var(--r32-accent) !important;
  color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important;
}
html body .app.app:has(.table-area) .header .header-right .account-card .account-copy{
  font-size: 12.5px !important; color: #374151 !important; font-weight: 500 !important;
}
html body .app.app:has(.table-area) .header .header-right .account-card .account-expiry{ display: none !important; }

/* ---------- ⑤ 搜索框：从顶栏搬到工具条右侧（原版就在这一行最右） ---------- */
html body .app.app:has(.table-area) .header .header-center{
  position: fixed !important;
  top: 99px !important;
  right: 24px !important;
  left: auto !important;
  order: 4 !important;
  width: 240px !important;
  height: 34px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  z-index: 25 !important;
}
html body .app.app:has(.table-area) .header .header-center input.search-box{
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px 0 30px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  color: var(--r32-ink) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

/* ---------- ⑥ 主体：去掉统计卡片，拉满宽度 ---------- */
html body .app.app:has(.table-area) .main.main{ align-items: flex-start !important; }
/* [R208] 修「设备界面鼠标滚轮不能上下」（爹：设备界面无法鼠标滚动上下）
   根因：上一行 align-items:flex-start 让 .table-area 的交叉轴不再 stretch -> 高度=auto 被内容（设备行）撑到 4600+px，
   而 .main{height:954px;overflow:hidden} 与 body{overflow:hidden} 把它直接裁掉 -> .table-wrap 自身 sh==ch 永远没有可滚区域 -> 滚轮完全失效（设备少时看不出）。
   修法：只让 .table-area 重新拉伸填满 .main（侧栏保持 flex-start，不动原设计），内层 .table-wrap{flex:1;overflow:auto} 就能真正滚。
   回退：删掉本行即可。 */
html body .app.app:has(.table-area) .main.main > .table-area{ align-self: stretch !important; }

html body .app.app:has(.table-area) .main .mk-statrow{ display: none !important; }
html body .app.app:has(.table-area) .main .table-area{
  position: relative !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 20px 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* ---------- ⑦ 工具条 ---------- */
html body .app.app:has(.table-area) .main .table-toolbar{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 300px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .app.app:has(.table-area) .main .toolbar-primary{
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html body .app.app:has(.table-area) .main .device-count-card{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  height: 32px !important;
  padding: 0 4px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .device-count-card strong{
  font-size: 15px !important; font-weight: 700 !important; color: var(--r32-accent) !important;
}
html body .app.app:has(.table-area) .main .device-count-card span{
  font-size: 12px !important; color: var(--r32-muted) !important; font-weight: 500 !important;
}
html body .app.app:has(.table-area) .main .toolbar-refresh{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 14px !important;
  background: var(--r32-accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .toolbar-refresh span{ color: #fff !important; font-size: 12.5px !important; }
html body .app.app:has(.table-area) .main .toolbar-refresh svg{ width: 14px !important; height: 14px !important; stroke: #fff !important; color: #fff !important; }
html body .app.app:has(.table-area) .main .toolbar-refresh:hover{ background: #1667cf !important; }
html body .app.app:has(.table-area) .main .toolbar-clean-offline{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .toolbar-clean-offline span{ color: #374151 !important; font-size: 12.5px !important; }
html body .app.app:has(.table-area) .main .toolbar-clean-offline svg{ width: 13px !important; height: 13px !important; }
html body .app.app:has(.table-area) .main .toolbar-clean-offline:hover{ border-color: #b9c2d0 !important; background: #fafbfc !important; }
html body .app.app:has(.table-area) .main .snapshot-hint{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 32px !important;
  font-size: 11.5px !important;
  color: var(--r32-muted-2) !important;
  white-space: nowrap !important;
}
html body .app.app:has(.table-area) .main .filter-chips{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 0 6px !important;
  border-left: 1px solid var(--r32-line) !important;
  background: transparent !important;
}
html body .app.app:has(.table-area) .main .filter-chips .filter-chip{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 30px !important;
  padding: 0 9px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #4b5563 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body .app.app:has(.table-area) .main .filter-chips .filter-chip:hover{ background: #f4f6f9 !important; }
html body .app.app:has(.table-area) .main .filter-chips .filter-chip .filter-indicator{
  width: 6px !important; height: 6px !important;
  min-width: 6px !important; flex: 0 0 6px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html body .app.app:has(.table-area) .main .filter-chips .filter-chip:has(input:checked){
  color: var(--r32-accent) !important;
  background: rgba(26,115,232,.07) !important;
}
html body .app.app:has(.table-area) .main .filter-chips .filter-chip:has(input:checked) .filter-indicator{ background: var(--r32-accent) !important; }
html body .app.app:has(.table-area) .main .date-filter-control{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  color: #374151 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .date-filter-control input{
  background: transparent !important;
  border: 0 !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  width: 104px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .date-filter-control svg{ width: 14px !important; height: 14px !important; color: var(--r32-muted) !important; }

/* 视图切换（列表/卡片/表格）钉在工具条右侧、搜索框左边 */
html body .app.app:has(.table-area) .main .table-area > .mk-viewtoggle{
  position: absolute !important;
  top: 14px !important;
  right: 274px !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 20 !important;
}
html body .app.app:has(.table-area) .main .table-area > .mk-viewtoggle > button{
  width: 34px !important;
  height: 32px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .table-area > .mk-viewtoggle > button.is-active{
  background: rgba(26,115,232,.09) !important;
  color: var(--r32-accent) !important;
}

/* ---------- ⑧ 设备分组：从悬浮侧栏 -> 工具条下面一条横排 ---------- */
html body .app.app:has(.table-area) .fgp-root{
  position: static !important;
  left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--r32-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: auto !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-panel{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-head{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px 0 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--r32-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-head .fgp-head-actions{ display: none !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-head-left{ display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: auto !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-grip{ display: none !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-head-left > div,
html body .app.app:has(.table-area) .fgp-root .fgp-head-left span{
  font-size: 12.5px !important; font-weight: 600 !important; color: #374151 !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-list{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-item-wrap{ width: auto !important; height: auto !important; margin: 0 !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-item{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line) !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-item:hover{ border-color: #b9c2d0 !important; background: #fafbfc !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-item.is-active{
  background: rgba(26,115,232,.08) !important;
  border-color: rgba(26,115,232,.28) !important;
  color: var(--r32-accent) !important;
  font-weight: 600 !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-item .fgp-item-name{ font-size: 12.5px !important; color: inherit !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-item .fgp-count{ font-size: 11px !important; color: var(--r32-muted-2) !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-dot{ width: 6px !important; height: 6px !important; border-radius: 50% !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-item .fgp-item-actions,
html body .app.app:has(.table-area) .fgp-root .fgp-item .fgp-more{ display: none !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-foot{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-hint{ display: none !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-create{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 28px !important;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line-2) !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .fgp-root .fgp-create svg{ width: 13px !important; height: 13px !important; }
html body .app.app:has(.table-area) .fgp-root .fgp-create:hover{ border-color: #b9c2d0 !important; background: #fafbfc !important; }

/* ---------- ⑨ 表格：白底细线 / 浅灰表头 / 12.5px ---------- */
html body .app.app:has(.table-area) .main .table-wrap{
  background: #fff !important;
  border: 1px solid var(--r32-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: auto !important;
}
html body .app.app:has(.table-area) .main .table-wrap table{ border-collapse: collapse !important; }
html body .app.app:has(.table-area) .main .table-wrap thead th{
  height: 38px !important;
  padding: 0 12px !important;
  background: #fafbfc !important;
  border: 0 !important;
  border-bottom: 1px solid var(--r32-line) !important;
  color: #67788f !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
html body .app.app:has(.table-area) .main .table-wrap tbody td{
  height: 46px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f3f7 !important;
  color: var(--r32-ink) !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}
html body .app.app:has(.table-area) .main .table-wrap tbody tr:hover td{ background: #f8fafc !important; }
html body .app.app:has(.table-area) .main .table-wrap tbody tr:last-child td{ border-bottom: 0 !important; }
/* 单元格里的药丸：原版是浅底小圆角（不是全圆） */
html body .app.app:has(.table-area) .main .table-wrap td .tag,
html body .app.app:has(.table-area) .main .table-wrap td .battery,
html body .app.app:has(.table-area) .main .table-wrap td .mk-adb-badge{
  border-radius: 6px !important;
  border-width: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .table-wrap td .dev-id-stack{ font-size: 12.5px !important; font-weight: 600 !important; color: #1f2937 !important; }
html body .app.app:has(.table-area) .main .table-wrap td .status-dot{
  width: 7px !important; height: 7px !important;
  margin-right: 5px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .table-wrap td .mk-appdl-btn{
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .table-wrap td select.fgp-row-select{
  height: 26px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  background: #fff !important;
  border: 1px solid var(--r32-line) !important;
  color: #4b5563 !important;
}
html body .app.app:has(.table-area) .main .table-wrap td input[type="checkbox"]{
  width: 14px !important; height: 14px !important;
  border-radius: 3px !important;
  accent-color: var(--r32-accent) !important;
}

/* ---------- ⑩ 分页：居中 + 页码方框 ---------- */
html body .app.app:has(.table-area) .main .dev-pagination{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 10px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .app.app:has(.table-area) .main .dev-pagination > span{
  font-size: 12px !important;
  color: var(--r32-muted) !important;
  font-weight: 500 !important;
}
html body .app.app:has(.table-area) .main .dev-pagination .refresh-btn{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--r32-accent) !important;
  border-radius: 6px !important;
  color: var(--r32-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ---------- ⑪ 窄屏兜底 ---------- */
@media (max-width: 1280px){
  html body .app.app:has(.table-area) .header .header-center{ position: static !important; width: 180px !important; height: 30px !important; }
  html body .app.app:has(.table-area) .header .header-center input.search-box{ height: 30px !important; }
  html body .app.app:has(.table-area) .main .table-toolbar{ padding-right: 0 !important; }
  html body .app.app:has(.table-area) .main .table-area > .mk-viewtoggle{ position: static !important; margin: 0 0 8px auto !important; float: right !important; }
  html body .app.app:has(.table-area) .header .mk-topnav{ margin-left: 118px !important; overflow-x: auto !important; }
}


/* ==========================================================================
 * [R32b] 实测修正（第一版实测发现 7 处被旧皮肤/内联风格抢走）
 *   ① .mk-brand 用 fixed 时受祖先 transform 影响 -> 改用 absolute 相对左栏
 *   ② 搜索框错位到 y=99（工具条实际在 y=60）-> 对齐到工具条
 *   ③ header-right 右边距不足 -> 让出搜索框位置（避免和账号卡重叠）
 *   ④ 账号卡/退出按钮宽度高度被旧规则撑开 -> 压回
 *   ⑤ .fgp-root 宽度仍是旧值 168px -> 强制拉满
 * ========================================================================== */
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand{
  position: absolute !important;
  left: 18px !important;
  top: -38px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
}
html body .app.app.app:has(.table-area) .header.header .header-center{
  top: 60px !important;
  height: 34px !important;
  max-height: 34px !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html body .app.app.app:has(.table-area) .header.header .header-center input.search-box{
  height: 34px !important;
  max-height: 34px !important;
  line-height: 34px !important;
}
html body .app.app.app:has(.table-area) .header.header .header-right{
  margin-right: 274px !important;
  padding-right: 0 !important;
}
html body .app.app.app:has(.table-area) .header.header .header-right .account-card{
  width: auto !important;
  min-width: 0 !important;
  max-width: 200px !important;
}
html body .app.app.app:has(.table-area) .header.header .mk-topnav .header-logout{
  height: 30px !important;
  max-height: 30px !important;
  min-height: 0 !important;
}
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-panel{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
 * [R32c] 第二轮实测修正
 *   ① 标(logo)：.mkv3-mark 的底色被旧规则清成透明 -> 显式补深蓝底；文字块改竖排两行
 *   ② 顶栏 tabs 之间的 2px 蓝色分组竖线（R30 留的）-> 去掉
 *   ③ 设备分组横条：内层面板宽度被旧规则压成 168px -> 拉满 + 强制横排
 *   ④ 表格：单元格内边距收窄，尽量少横向滚动
 * ========================================================================== */
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mkv3-mark{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #233a69 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mkv3-mark svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: #fff !important;
  color: #fff !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand > div{
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  height: 30px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mk-brand-name{
  display: block !important;
  position: static !important;
  font-size: 14px !important;
  line-height: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  color: #233a69 !important;
  font-weight: 700 !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mk-brand-sub{
  display: block !important;
  position: static !important;
  font-size: 10px !important;
  line-height: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  color: #9aa4b2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
/* ② 去掉 tabs 之间的蓝色分组竖线 */
html body .app.app.app:has(.table-area) .header.header .mk-topnav .nav-btn::before,
html body .app.app.app:has(.table-area) .header.header .mk-topnav .nav-btn + .nav-btn::before{
  display: none !important;
  content: none !important;
  background: transparent !important;
  width: 0 !important;
}
/* ③ 设备分组横条：内层拉满 + 横排 */
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-panel,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-panel.mk-dark{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-list,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-list.mk-dark{
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  width: auto !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-item-wrap,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-item,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-foot,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-head,
html body .app.app.app:has(.table-area) .main.main .table-area .fgp-root .fgp-head-left{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* ④ 表格更紧凑一点（少一点横向滚动） */
html body .app.app.app:has(.table-area) .main.main .table-wrap thead th{ padding: 0 8px !important; font-size: 12px !important; }
html body .app.app.app:has(.table-area) .main.main .table-wrap tbody td{ padding: 5px 8px !important; font-size: 12px !important; }
html body .app.app.app:has(.table-area) .main.main .table-wrap tbody td .dev-id-stack{ font-size: 12px !important; }


/* ==========================================================================
 * [R32d] 标(logo) 文字被挤成 1 字 1 行（absolute + width:auto 时按 0 宽栏 shrink-to-fit）
 *   -> 给标固定宽度 + 文字 nowrap
 * ========================================================================== */
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand{
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mk-brand-name,
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand .mk-brand-sub{
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand > div{
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}


/* ==========================================================================
 * [R32e] 两处实测修正
 *   ① 顶栏 z-index:30 -> 2：.sidebar/.main 的层叠上下文低于顶栏，导致搬上来的
 *      「V7」标被顶栏白底盖住（DOM 在 .main 里，z-index 40 也压不过顶栏 30）
 *   ② 标宽度改 max-content（此前硬给 210px，会压住第一个 tab）
 * ========================================================================== */
html body .app.app.app:has(.table-area) .header.header{ z-index: 2 !important; }
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand{
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
}


/* ==========================================================================
 * [R32f] 标(logo) 改「CSS 伪元素画」——彻底绕开层叠/裁剪问题
 *   实测根因：.main 有 overflow:hidden（裁掉搬到顶栏的标）+ .main(z-index:1) < .header(z-index:2)
 *             且 .sidebar 有 backdrop-filter（当 fixed 包含块）-> 真标怎么搬都被盖/被裁。
 *   做法：真标 display:none，改用 .header::before 画方块标 + ::after 写「V7」。
 * ========================================================================== */
html body .app.app.app:has(.table-area) .main.main > .sidebar .mk-brand{ display: none !important; }
html body .app.app.app:has(.table-area) .header.header::before{
  content: '' !important;
  order: -2 !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  background-color: #233a69 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='2' y='2' width='44' height='44' rx='12' fill='%23233A69'/%3E%3Cpath d='M12 13h24v6H27L17.2 35h-7.1l9.9-16H12v-6Z' fill='%23fff'/%3E%3Cpath d='M29.3 21h6.1l-8.6 14h-6.3l8.8-14Z' fill='%23A8C5FF'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 19px 19px !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html body .app.app.app:has(.table-area) .header.header::after{
  content: "V7" !important;
  order: -1 !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #233a69 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 10px 0 0 !important;
  position: static !important;
  transform: none !important;
}
html body .app.app.app:has(.table-area) .header.header .mk-topnav{ margin-left: 2px !important; }