/* ============================================================================
 * [R116] 控制页顶栏「设备控制中心」重构
 *   爹的要求：这一块区域 UI 布局重构（素材上网找）
 *   结构（DOM 一个字没动，纯 CSS + order 重排）：
 *     第 1 行  ● 设备控制中心   [状态芯片组]                     [CN 中国时间]
 *     第 2 行  [←][机型][Android] [备注输入|保存][主题]
 *              | [快捷注入应用][银行卡相册扫描][实时键盘监听][ADB匹配]
 *              | [重要][待跟进]   ┃   [取消注入][一键拉黑][彻底删除][删除App]
 *   素材：Lucide 图标（ISC 许可，自托管 panel/skin/assets/icons/）
 *   纯皮肤层：删除本文件 + index.html 里那一行 <link> 即完全回退
 * ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1) 顶栏容器：玻璃卡片条                                            */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar {
  padding: 10px 16px 12px !important;
  gap: 8px !important;
  row-gap: 10px !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 248, 253, .94)) !important;
  border-bottom: 1px solid rgba(24, 43, 77, .10) !important;
  box-shadow: 0 16px 34px -30px rgba(20, 40, 80, .75) !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar {
  background: linear-gradient(180deg, rgba(10, 17, 30, .96), rgba(9, 15, 26, .84)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ------------------------------------------------------------------ */
/* 2) 第 1 行：品牌 + 状态芯片 + 时钟                                  */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-brand {
  order: 0 !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff, #eef3fa) !important;
  border: 1px solid rgba(24, 43, 77, .12) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 6px 14px -12px rgba(20, 40, 80, .8) !important;
  color: #23304c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-brand {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #e6eefc !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-brand > i {
  width: 8px !important; height: 8px !important;
  background: linear-gradient(180deg, #4ade80, #16a34a) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16), 0 0 10px rgba(34, 197, 94, .55) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags {
  order: 1 !important;
  margin: 0 0 0 8px !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > * {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  height: 26px !important; padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important; font-weight: 600 !important;
  background: rgba(24, 43, 77, .04) !important;
  border: 1px solid rgba(24, 43, 77, .10) !important;
  color: #46587a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.green {
  background: rgba(34, 197, 94, .10) !important;
  border-color: rgba(34, 197, 94, .30) !important;
  color: #15803d !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.blue {
  background: rgba(47, 107, 255, .09) !important;
  border-color: rgba(47, 107, 255, .26) !important;
  color: #2f5cad !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.gray {
  background: rgba(24, 43, 77, .045) !important;
  border-color: rgba(24, 43, 77, .12) !important;
  color: #5b6b87 !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag:not(.green):not(.blue):not(.gray) {
  font-family: ui-monospace, Consolas, monospace !important;
  font-size: 11.5px !important;
  color: #3f5273 !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > * {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #c3d4ea !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-clock {
  order: 2 !important;
  margin-left: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 30px !important; padding: 0 12px !important;
  border-radius: 10px !important;
  background: rgba(47, 107, 255, .07) !important;
  border: 1px solid rgba(47, 107, 255, .18) !important;
  color: #2f5cad !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-clock::before {
  content: '' !important; display: block !important;
  width: 13px !important; height: 13px !important; flex: 0 0 13px !important;
  background: currentColor !important;
  -webkit-mask: url("/panel/skin/assets/icons/clock.svg") center / contain no-repeat !important;
  mask: url("/panel/skin/assets/icons/clock.svg") center / contain no-repeat !important;
  opacity: .85 !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-ctl-break {
  order: 3 !important;
  flex: 0 0 100% !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* 3) 第 2 行：设备身份组                                              */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-back {
  order: 4 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff, #eef3fa) !important;
  border: 1px solid rgba(24, 43, 77, .12) !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
  font-size: 0 !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-back:hover {
  background: linear-gradient(180deg, #eef4ff, #dde8fb) !important;
  border-color: rgba(47, 107, 255, .35) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-back .mk-i { color: #3f6ecb !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-dev-name {
  order: 5 !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: #1f2b45 !important; letter-spacing: .01em !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-dev-meta {
  order: 6 !important;
  display: inline-flex !important; align-items: center !important;
  height: 24px !important; padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important; font-weight: 600 !important;
  background: rgba(24, 43, 77, .05) !important;
  border: 1px solid rgba(24, 43, 77, .10) !important;
  color: #5b6b87 !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-dev-meta {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #9fb3d0 !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-note-box {
  order: 7 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 32px !important; min-width: 250px !important;
  padding: 0 4px 0 11px !important;
  border-radius: 10px !important;
  background: rgba(24, 43, 77, .035) !important;
  border: 1px solid rgba(24, 43, 77, .10) !important;
  box-shadow: inset 0 1px 2px rgba(20, 40, 80, .06) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-note-box::before {
  content: '' !important; display: block !important;
  width: 13px !important; height: 13px !important; flex: 0 0 13px !important;
  background: #8ba0bd !important;
  -webkit-mask: url("/panel/skin/assets/icons/sticky-note.svg") center / contain no-repeat !important;
  mask: url("/panel/skin/assets/icons/sticky-note.svg") center / contain no-repeat !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar .ctrl-note-input {
  flex: 1 1 auto !important; min-width: 0 !important;
  height: 26px !important; font-size: 12px !important;
  background: transparent !important; border: none !important; outline: none !important;
  color: #23304c !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar .ctrl-note-input { color: #e6eefc !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar .ctrl-note-save {
  height: 24px !important; padding: 0 12px !important;
  border-radius: 8px !important; border: none !important;
  background: linear-gradient(180deg, #6ea8ff, #4676d8) !important;
  color: #fff !important; font-size: 11.5px !important; font-weight: 600 !important;
  box-shadow: 0 6px 14px -10px rgba(47, 107, 255, .9) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .theme-switch {
  order: 9 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 10px !important;
  background: rgba(24, 43, 77, .035) !important;
  border: 1px solid rgba(24, 43, 77, .10) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .theme-switch:hover {
  border-color: rgba(47, 107, 255, .35) !important;
  background: rgba(47, 107, 255, .08) !important;
}

/* ------------------------------------------------------------------ */
/* 4) 第 2 行：功能开关 chips + 标记 chips                              */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb {
  order: 10 !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 30px !important; padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  background: rgba(24, 43, 77, .035) !important;
  border: 1px solid rgba(24, 43, 77, .10) !important;
  color: #46587a !important;
  cursor: pointer !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb:hover {
  background: rgba(47, 107, 255, .08) !important;
  border-color: rgba(47, 107, 255, .30) !important;
  color: #2f5cad !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb:has(> input:checked) {
  background: rgba(47, 107, 255, .12) !important;
  border-color: rgba(47, 107, 255, .42) !important;
  color: #2350a8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -12px rgba(47, 107, 255, .9) !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb .mk-i { color: #7f95b5 !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb:has(> input:checked) .mk-i { color: #2f6bd8 !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-flag-box {
  order: 11 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: auto !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .mk-flag-box > .mk-flag {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 30px !important; padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid rgba(24, 43, 77, .12) !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar > .mk-flag-box > .mk-flag {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

/* ------------------------------------------------------------------ */
/* 5) 第 2 行：危险操作组（右贴边 + 竖分隔线）                          */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger {
  order: 12 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 30px !important; padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 0 !important;
  background: rgba(239, 68, 68, .06) !important;
  border: 1px solid rgba(239, 68, 68, .22) !important;
  color: #c2453f !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger::after {
  font-size: 11.5px !important; font-weight: 600 !important; line-height: 1 !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger .mk-i { color: #dd6c66 !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger:hover {
  background: rgba(239, 68, 68, .13) !important;
  border-color: rgba(239, 68, 68, .45) !important;
  color: #a92f2a !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger:nth-last-child(2),
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger:last-child {
  background: rgba(220, 38, 38, .11) !important;
  border-color: rgba(220, 38, 38, .32) !important;
  color: #b3251f !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger.mk-ctl-danger-first {
  margin-left: auto !important;
  position: relative !important;
  overflow: visible !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger.mk-ctl-danger-first::before {
  content: '' !important; position: absolute !important;
  left: -9px !important; top: -5px !important;
  width: 1px !important; height: 40px !important;
  background: rgba(24, 43, 77, .12) !important;
}
html[data-theme="dark"] .ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger.mk-ctl-danger-first::before {
  background: rgba(255, 255, 255, .12) !important;
}
/* ------------------------------------------------------------------ */
/* 7) 修正：顶栏第 2 行宽度收敛（1700 宽一行放得下 4 个危险按钮）        */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb[title="锁屏密码浮窗"] {
  display: none !important;               /* 保持原生隐藏（浮窗另有入口） */
}
.ctrl-page .ctrl-topbar.ctrl-topbar {
  column-gap: 7px !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-note-box {
  min-width: 205px !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-ai-cb {
  padding: 0 10px !important;
  font-size: 11px !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-topbar-btn.danger {
  padding: 0 11px !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-dev-meta {
  padding: 0 8px !important;
}

/* ------------------------------------------------------------------ */
/* 8) 状态芯片：去 emoji，换成自托管矢量图标（mk-ctlbar.js 打标记）      */
/* ------------------------------------------------------------------ */
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-ico {
  padding-left: 27px !important;
  position: relative !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-ico::before {
  content: '' !important; position: absolute !important;
  left: 10px !important; top: 50% !important; margin-top: -6.5px !important;
  width: 13px !important; height: 13px !important;
  background: currentColor !important;
  opacity: .85 !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-size: contain !important; mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-online::before { -webkit-mask-image: url("/panel/skin/assets/icons/activity.svg") !important; mask-image: url("/panel/skin/assets/icons/activity.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-batt::before   { -webkit-mask-image: url("/panel/skin/assets/icons/battery-charging.svg") !important; mask-image: url("/panel/skin/assets/icons/battery-charging.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-wifi::before   { -webkit-mask-image: url("/panel/skin/assets/icons/wifi.svg") !important; mask-image: url("/panel/skin/assets/icons/wifi.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-acc::before    { -webkit-mask-image: url("/panel/skin/assets/icons/accessibility.svg") !important; mask-image: url("/panel/skin/assets/icons/accessibility.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-screen::before { -webkit-mask-image: url("/panel/skin/assets/icons/monitor-smartphone.svg") !important; mask-image: url("/panel/skin/assets/icons/monitor-smartphone.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-inst::before   { -webkit-mask-image: url("/panel/skin/assets/icons/clock.svg") !important; mask-image: url("/panel/skin/assets/icons/clock.svg") !important; }
.ctrl-page .ctrl-topbar.ctrl-topbar > .ctrl-tags > .ctrl-tag.mk-tag-apk::before    { -webkit-mask-image: url("/panel/skin/assets/icons/app-window.svg") !important; mask-image: url("/panel/skin/assets/icons/app-window.svg") !important; }

/* 阅读器/投屏框头部：皮肤已注入矢量图标，去掉重复的圆点图标           */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-dot {
  display: none !important;
}