/* ============================================================================
 * [R149] 顶栏「设备控制中心」+「设备详细信息」融合去重
 *   爹：我截图的这个板块融合在一起啊。去除重复显示的信息。融合排版整合下
 *   背景：R145 已把两张卡在视觉上拼成一条，但内容仍重复：顶栏状态芯片已经显示
 *         在线 / 电量 / 网络 / 无障碍 / 前台应用(息屏·包名) / 安装日期 / 机型，
 *         下面的详情卡又原样再列一遍。
 *   做法：
 *     ① mk-barmix.js 把详情卡里与顶栏重复的「行」打上 .mk-barmix-dup → 本文件隐藏
 *     ② 详情卡内部改成「一条字段流」：分组不再各占一整块（display:contents），
 *        标签/值按需换行、自动铺满整行 → 和顶栏拼成同一块，不再像两个方块
 *     ③ 组名之间加竖向分隔线，头部去掉与顶栏重复的「在线」胶囊
 *   DOM 一个字节没动。回退：删掉 index.html 里 mk-barmix.css / mk-barmix.js 两行。
 * ========================================================================== */

/* ---- ① 与顶栏重复的行：隐藏（所有宽度都生效） ---- */
.mkdi-card .mkdi-row.mk-barmix-dup,
html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-row.mk-barmix-dup { display: none !important; }
.mkdi-card .mkdi-sec.mk-barmix-empty { display: none !important; }

/* ---- ② 头部：去掉与顶栏 ●在线 重复的胶囊，只留「设备详细信息 + 刷新」 ---- */
.mkdi-card .mkdi-head .mkdi-badge { display: none !important; }
.mkdi-card .mkdi-head .mkdi-logo { opacity: .92 !important; }
.mkdi-card .mkdi-head .mkdi-btn { height: 22px !important; font-size: 10.5px !important; padding: 0 7px !important; }
.mkdi-card .mkdi-head .mkdi-btn .mkdi-i { width: 11px !important; height: 11px !important; }

/* ---- ③ 三栏布局（>=1500px）：详情卡 = 一条连续字段流 ---- */
@media (min-width: 1500px) {
  /* 组 / 组内列表「透明化」，让每组的小标题和每一行都成为同一条横向流里的项，
     这样换行时是按「行」补位、铺满整行，而不是整组整体跳到下一行。 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec { display: contents !important; }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-list { display: contents !important; }

  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-body {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; gap: 3px 10px !important;
  }

  /* 组名 = 小标签 + 前面一条竖分隔线（第一组不要线） */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-h {
    display: flex !important; align-items: center !important; gap: 4px !important;
    padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-h::before {
    content: '' !important; width: 1px !important; height: 12px !important;
    background: rgba(24, 43, 77, .18) !important; border-radius: 1px !important;
    margin: 0 4px 0 1px !important; flex: 0 0 1px !important;
  }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-h::before {
    background: rgba(255, 255, 255, .17) !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-body > .mkdi-sec:first-child > .mkdi-sec-h::before { display: none !important; }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-t {
    color: #6b7d99 !important; font-weight: 700 !important; letter-spacing: .2px !important;
  }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-t { color: #93a6c4 !important; }

  /* 再省一点点宽度：标签 9px / 值 11px（密集信息条，肉眼几乎无感） */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-k { font-size: 9px !important; }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v { font-size: 11px !important; }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v.mono { font-size: 10px !important; }

  /* 每一行 = 一个不可拆的小项：标签 + 值，整体换行 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-row:not(.mk-barmix-dup) {
    display: flex !important; flex: 0 0 auto !important;
    align-items: baseline !important; justify-content: flex-start !important;
    gap: 3px !important; padding: 0 !important; margin: 0 !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v { justify-content: flex-start !important; text-align: left !important; }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-k { flex: 0 0 auto !important; }

  /* 空组（全部行都重复被隐藏时）整组收起：特异性要压过上面的 display:contents */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec.mk-barmix-empty { display: none !important; }
}


/* ============================================================================
 * [R151] 爹：「设备详细信息看的不清楚。加个背景框。然后整体美化下」
 *   做法（仍是纯皮肤层，DOM 未动）：
 *     ① 整条信息流加浅色玻璃底框（渐变 + 内高光 + 下沿细线），和上面的控制中心
 *        仍然连成一块，但信息区自己有一层底，不再糊在白底上
 *     ② 分组名 → 小圆角芯片（带图标），每组分隔线更清楚
 *     ③ 字段名更淡更小、字段值更大更深（对比度拉起来），行悬停有反馈
 *     ④ 锁屏密码 / API / 电量等已有芯片样式再收一收，整体更精致
 *   回退：删掉本段即可（与 [R149] 同一文件）
 * ========================================================================== */
@media (min-width: 1500px) {
  /* ① 信息条底框：仍是贴在控制中心下沿的一条，但有自己的浅底与边缘 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-card {
    padding: 7px 13px 8px !important;
    background:
      linear-gradient(180deg, rgba(241, 247, 255, 1) 0%, rgba(228, 238, 253, .96) 100%) !important;
    border: 0 !important;
    border-top: 1px solid rgba(47, 107, 255, .16) !important;
    border-bottom: 1px solid rgba(24, 43, 77, .10) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-card {
    background: linear-gradient(180deg, rgba(20, 29, 45, .95) 0%, rgba(16, 24, 39, .92) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  /* ② 分组名 → 小芯片 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-h {
    padding: 1px 7px 1px 5px !important;
    border-radius: 999px !important;
    background: rgba(47, 107, 255, .09) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .12) !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-t {
    color: #2f5fb8 !important; font-size: 10px !important; font-weight: 700 !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-ic .mkdi-i {
    width: 10px !important; height: 10px !important; color: #3f74d6 !important;
  }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-h {
    background: rgba(124, 160, 255, .16) !important; box-shadow: inset 0 0 0 1px rgba(124, 160, 255, .22) !important;
  }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-sec-t { color: #b9cdf2 !important; }

  /* ③ 字段：名淡、值深，读起来更清楚 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-k {
    font-size: 9.5px !important; color: #93a1b6 !important; font-weight: 600 !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v {
    font-size: 12px !important; color: #1e2f4d !important; font-weight: 700 !important;
    letter-spacing: .1px !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v.mono { font-size: 11px !important; }
  html[data-theme="dark"] body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-v { color: #e8eefc !important; }

  /* 行悬停：轻微底色 + 圆角，扫读更稳 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-row {
    padding: 1px 5px !important; border-radius: 6px !important;
    transition: background .12s ease !important;
  }
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-row:hover { background: rgba(47, 107, 255, .08) !important; }

  /* ④ 小芯片（API / 锁屏类型 / 电量）配色统一 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-chip {
    background: rgba(47, 107, 255, .10) !important;
    color: #2f5fb8 !important;
    border-radius: 5px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
  }
  /* 头部标题稍重一点，与信息条形成主次 */
  html body .ctrl-page .ctrl-layout.ctrl-layout.ctrl-layout > .ctrl-content > .mk-pin-info .mkdi-title { color: #33456b !important; font-weight: 800 !important; }
}