/*! v7工作室AI版 · [R30] 顶栏/导航「简约线条」重排（纯皮肤层，零 React 产物改动）
 * ---------------------------------------------------------------------------
 * 爹的诉求：「这一块区域重构 UI 和布局，简约线条风格，排版重新排」
 *
 * 做法：只覆盖样式 + 用 flex order / ::before 分隔线重排，不搬任何 DOM 节点。
 *
 *   第一行（46px）  [ 中国时间 ] [ 搜索框 ] ............ [ 状态线条胶囊组 + 头像 ]
 *   第二行（38px）  [设备管理 用户管理] | [AI金融分析 AI助理] | [信息模板注入 构建APK 应用下载 TG信息推送]
 *                   | [拉黑设备 系统优化 全球语言翻译 公告] ......................... [退出]
 *
 * 设计令牌：1px 发丝线 + 无填充/无阴影/无渐变 + 主色仅用于选中态(2px 内底线)。
 * 回退：删掉 index.html 里本文件那一行即可（其余皮肤不受影响）。
 * ========================================================================== */
:root{
  --r30-line: rgba(24,43,77,.11);
  --r30-line-2: rgba(24,43,77,.20);
  --r30-ink: #2b3648;
  --r30-muted: #6b7788;
  --r30-accent: #2f5cad;
  --r30-hover: rgba(47,92,173,.05);
}

/* ---------- ① 顶栏容器：白底 + 发丝底线 + 双行 ---------- */
html body .app > .header{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  gap: 0 !important;
  row-gap: 0 !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  background: #fff !important;
  border-bottom: 1px solid var(--r30-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---------- ② 第一行三区块：等高、中线对齐 ---------- */
html body .app > .header > .app-brand,
html body .app > .header > .header-center,
html body .app > .header > .header-right{
  height: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .app > .header > .app-brand{ flex: 0 0 auto !important; margin: 0 14px 0 0 !important; order: 1 !important; }
html body .app > .header > .header-center{ flex: 1 1 auto !important; min-width: 0 !important; order: 2 !important; }
html body .app > .header > .header-right{
  flex: 0 0 auto !important; order: 3 !important;
  margin-left: auto !important; gap: 8px !important;
}

/* 中国时间牌：绝对定位 -> 普通流，改成线条胶囊 */
html body .app > .header > .app-brand > .mk-clockchip{
  position: static !important;
  top: auto !important;
  transform: none !important;
  height: 28px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--r30-line) !important;
  color: var(--r30-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* 搜索框：线条化，紧贴品牌区左侧 */
html body .app > .header > .header-center > .search-box{
  width: 100% !important;
  max-width: 460px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--r30-line) !important;
  background: #fff !important;
  color: var(--r30-ink) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html body .app > .header > .header-center > .search-box:focus{
  border-color: var(--r30-line-2) !important;
  box-shadow: 0 0 0 3px var(--r30-hover) !important;
}

/* ---------- ③ 右侧状态区：全部统一成 28px 线条胶囊 ---------- */
html body .app > .header > .header-right > *{
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--r30-line) !important;
  background: transparent !important;
  color: var(--r30-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html body .app > .header > .header-right > *:hover{ border-color: var(--r30-line-2) !important; background: var(--r30-hover) !important; }
/* 在线：只留绿字，不填充 */
html body .app > .header > .header-right > .mk-top-online{
  color: #0b7b52 !important;
  border-color: rgba(11,123,82,.30) !important;
  background: transparent !important;
}
/* 账号卡：去掉大字号/内层底色 */
html body .app > .header > .header-right > .account-card{
  padding: 0 10px !important;
  color: var(--r30-ink) !important;
  background: transparent !important;
}
html body .app > .header > .header-right > .account-card *{
  background: transparent !important;
  font-size: 12px !important;
  color: inherit !important;
  box-shadow: none !important;
}
/* 时钟：等宽数字，视觉上稳 */
html body .app > .header > .header-right > .mk-top-clock{
  color: var(--r30-accent) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .4px !important;
}
/* 头像：圆形发丝圈 */
html body .app > .header > .header-right > .mk-top-avatar{
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  border-color: var(--r30-line-2) !important;
  color: var(--r30-muted) !important;
}

/* ---------- ④ 第二行导航：无药丸、无底色，靠留白 + 细分隔线分组 ---------- */
html body .app > .header > .mk-topnav{
  flex: 0 0 100% !important;
  order: 9 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--r30-line) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html body .app > .header > .mk-topnav > .nav-btn,
html body .app > .header > .mk-topnav > .header-logout{
  order: 50 !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--r30-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: color .12s ease, background .12s ease !important;
}
html body .app > .header > .mk-topnav > .nav-btn svg{
  width: 15px !important; height: 15px !important; flex: 0 0 15px !important;
  opacity: .72 !important;
}
html body .app > .header > .mk-topnav > .nav-btn .nav-label,
html body .app > .header > .mk-topnav > .header-logout > span{
  font-size: 12.5px !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}
html body .app > .header > .mk-topnav > .nav-btn:hover{
  color: var(--r30-ink) !important;
  background: var(--r30-hover) !important;
}
/* 选中态 = 主色文字 + 2px 内底线（不占布局，无位移） */
html body .app > .header > .mk-topnav > .nav-btn.active{
  color: var(--r30-accent) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--r30-accent) !important;
}
html body .app > .header > .mk-topnav > .nav-btn.active svg{ opacity: 1 !important; }
html body .app > .header > .mk-topnav > .nav-btn.active:before{ display: none !important; }

/* 分组顺序（按 href/类名，稳定不依赖 nth-child） */
html body .app > .header > .mk-topnav > [href="/panel/devices"]{ order: 10 !important; }
html body .app > .header > .mk-topnav > [href="/panel/users"]{ order: 11 !important; }
html body .app > .header > .mk-topnav > [href="/panel/ai"]{ order: 20 !important; }
html body .app > .header > .mk-topnav > #mkAiNavBtn{ order: 21 !important; }
html body .app > .header > .mk-topnav > [href="/panel/inject"]{ order: 30 !important; }
html body .app > .header > .mk-topnav > .mk-build-entry{ order: 31 !important; }
html body .app > .header > .mk-topnav > .mk-appdl-nav{ order: 32 !important; }
html body .app > .header > .mk-topnav > [href="/panel/push"]{ order: 33 !important; }
html body .app > .header > .mk-topnav > [href="/panel/blacklist"]{ order: 40 !important; }
html body .app > .header > .mk-topnav > [href="/panel/speed"]{ order: 41 !important; }
html body .app > .header > .mk-topnav > [href="/panel/translate"]{ order: 42 !important; }
html body .app > .header > .mk-topnav > .nav-announcement{ order: 43 !important; }
html body .app > .header > .mk-topnav > .header-logout{
  order: 99 !important;
  margin-left: auto !important;
  padding: 0 14px !important;
  color: #b4453f !important;
  box-shadow: inset 1px 0 0 0 var(--r30-line) !important;
}
html body .app > .header > .mk-topnav > .header-logout:hover{
  background: rgba(180,69,63,.06) !important;
  color: #97362f !important;
}

/* 分组竖线：AI 组 / 信息推送组 / 运维组 之前各一条 1px 发丝线 */
html body .app > .header > .mk-topnav > [href="/panel/ai"]::before,
html body .app > .header > .mk-topnav > [href="/panel/inject"]::before,
html body .app > .header > .mk-topnav > [href="/panel/blacklist"]::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 14px !important;
  background: var(--r30-line-2) !important;
}

/* ---------- ⑤ 窄屏：导航横滚，别折叠成多行 ---------- */
@media (max-width: 1500px){
  html body .app > .header > .mk-topnav{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
  html body .app > .header > .mk-topnav > .nav-btn{ padding: 0 10px !important; }
}
@media (max-width: 1100px){
  html body .app > .header > .header-center > .search-box{ max-width: none !important; }
}

/* ---------- ⑥ 图标统一去色（线条风的灵魂：只用墨色/主色，不用彩色图标） ---------- */
html body .app > .header > .mk-topnav > .nav-btn svg,
html body .app > .header > .mk-topnav > .nav-btn i{
  filter: grayscale(1) brightness(.82) !important;
  transition: filter .12s ease !important;
}
html body .app > .header > .mk-topnav > .nav-btn:hover svg,
html body .app > .header > .mk-topnav > .nav-btn:hover i,
html body .app > .header > .mk-topnav > .nav-btn.active svg,
html body .app > .header > .mk-topnav > .nav-btn.active i{
  filter: grayscale(1) brightness(.45) !important;
}
/* 右侧状态区图标去色；「在线」的绿点是有意义的信号，保留原色 */
html body .app > .header > .header-right > *:not(.mk-top-online) svg,
html body .app > .header > .header-right > *:not(.mk-top-online) i{
  filter: grayscale(1) brightness(.82) !important;
}
/* 退出前的竖线：别和右侧留白打架 */
html body .app > .header > .mk-topnav > .header-logout{ box-shadow: inset 1px 0 0 0 var(--r30-line) !important; }