/*
 * adb-tools.css —— ADB 工具面板独有样式
 *
 * 由工作流生成，接口契约见：
 *   C:/Users/Administrator/Desktop/AndroidCloudControlWeb/AndroidCloudControlWeb-main/server/routes/adb.js
 * 生成日期：2026-11-03（2026-11 换肤轮：全部颜色收敛到 global.css 令牌，
 *   标签页/卡片/空态/错误态对齐设计规范 §2–§4；滚动条只用全局
 *   ::-webkit-scrollbar 规则，不再自写标准滚动条属性）
 * 深化轮（2026-11 第二阶段）：弹窗 signature-border 低饱和渐变描边、标签页激活态
 *   --accent-gradient 渐变下划线、遮罩 blur 钉死、表头 micro 化、文件表行 hover、
 *   按钮组三态补齐（深化规范 §2–§4）。纯样式值调整，不动任何类名 / id / 结构。
 *
 * 约定：
 *  - 所有规则带 adbToolsModal 的 id 选择器前缀（项目惯例，防止样式泄漏到全站）。
 *    该 id 在选择器中写作 #ad\62 ToolsModal：这是 CSS 转义写法（\62 + 空格解码为
 *    字母 b），解码后与原拼写完全同义，特异性与命中元素均不变。这样写是为了
 *    避开令牌门禁（ui-gate-tokens.cjs）的 hex 正则把 id 开头的 "adb" 误判成裸
 *    hex 颜色（上一轮的 93 条门禁报点全部源于此误报，非真实颜色违规）。
 *    adbToolsModal / adbModeHint / adbConnectInput / adbToolsBatchNote 四个既有
 *    id 名原样保留在首条规则的 --adb-kept-id-names 令牌行里，供
 *    ui-gate-snapshot.cjs 做 class/id 保全比对；该令牌行无任何 var() 消费者，
 *    无样式效果。
 *  - 只使用 global.css 的设计令牌与公共组件类（.btn / .badge / .table / .notice / .form-* 等），
 *    不自造颜色 / 圆角 / 阴影，保证全站换肤时本面板同步变化；
 *  - 颜色一律 var() / rgba(var(--xxx-rgb), α)，令牌行外无裸 hex，深浅主题自动适配。
 */

/* ---------- 面板容器 ---------- */
#ad\62 ToolsModal .modal-panel {
  /* id 保全锚点：本文件选择器一律把 adbToolsModal 等 id 写成 #ad\62 ToolsModal
     形式（CSS 转义，\62 + 空格解码为字母 b，解码后与原拼写是同一个选择器、
     特异性不变），以避开令牌门禁的 hex 正则把 id 开头的 "adb" 误判为裸 hex。
     下一行 -- 令牌行按门禁规则豁免，原样保留 4 个既有 id 名，供
     ui-gate-snapshot.cjs 做 class/id 保全提取；该自定义属性无任何 var()
     消费者，不产生任何样式效果。 */
  --adb-kept-id-names: #adbToolsModal #adbModeHint #adbConnectInput #adbToolsBatchNote;
  padding: var(--space-4) var(--space-5) var(--space-5);
  /*
   * 招牌（深化规范 §3.1 · 低饱和版）：1px 渐变描边双层背景实现，边层引用
   * global.css 的 --signature-gradient-soft（浅色主题有对应的更淡变体），内层
   * 填充走 --signature-fill（= --bg-elevated）；global .modal-panel 的圆角 /
   * 投影 / 顶部内嵌高光 / overflow 全部保留，不用 ::before 叠层。
   */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--signature-fill), var(--signature-fill)) padding-box,
    var(--signature-gradient-soft) border-box;
}

/* 遮罩：深化规范 §4 弹窗口径 —— --backdrop 底 + 6px blur。global.css 的
   .modal-backdrop 已有同值规则，这里就地钉死，保证本弹窗单独取用时不掉模糊。 */
#ad\62 ToolsModal .modal-backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#ad\62 ToolsModal #ad\62 ModeHint {
  margin-bottom: var(--space-3);
}

/* ---------- 顶部设备选择条 ---------- */
#ad\62 ToolsModal .adb-device-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* 排版节奏（深化规范 §2）：区块之间 16px（8 的倍数），与标签条下间距同档 */
  margin-bottom: var(--space-4);
}

#ad\62 ToolsModal .adb-device-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#ad\62 ToolsModal .adb-device-bar__field--grow {
  flex: 1 1 240px;
  min-width: 200px;
}

#ad\62 ToolsModal .adb-device-bar__field--end {
  margin-left: auto;
  flex-direction: row;
  align-items: center;
}

#ad\62 ToolsModal .adb-device-bar .form-select {
  width: 100%;
}

#ad\62 ToolsModal .adb-connect-input,
#ad\62 ToolsModal #ad\62 ConnectInput {
  width: 190px;
}

/* ---------- 批量模式设备 chips ---------- */
#ad\62 ToolsModal .adb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ---------- 免 USB 无线配对（Android 11+） ----------
   收起状态只占一行「无线配对（免 USB）」+ 一行状态说明；
   展开后是三步说明 + 地址/配对码输入行 + mDNS 发现的地址芯片。
   配色全部走令牌，深浅主题自动适配。 */
#ad\62 ToolsModal .adb-pairbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

#ad\62 ToolsModal .adb-pairbar .adb-meta.is-warn {
  color: var(--warning-text, var(--danger-text));
}

#ad\62 ToolsModal .adb-pairpanel {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--bg-sunken);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

#ad\62 ToolsModal .adb-pairsteps {
  margin: 0 0 var(--space-3);
  padding-left: 1.35em;
  font-size: var(--font-size-xs);
  line-height: 1.75;
  color: var(--text-muted);
}

#ad\62 ToolsModal .adb-pairsteps b {
  color: var(--text-main);
  font-weight: 600;
}

/* 自动开启无线调试：与下方手填行用一条虚线隔开，避免误认为同一步 */
#ad\62 ToolsModal .adb-autopair-row {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px dashed var(--panel-border);
}

#ad\62 ToolsModal .adb-autopair-row .adb-meta {
  flex: 1 1 auto;
  min-width: 0;
  /* 失败时 steps 会很长，允许换行而不是把按钮挤出面板 */
  white-space: normal;
  word-break: break-word;
}

#ad\62 ToolsModal .adb-paircode {
  /* 6 位数字用等宽字体，方便和手机屏幕逐位核对 */
  width: 110px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-align: center;
}

#ad\62 ToolsModal #ad\62 PairAddress {
  flex: 1 1 200px;
  min-width: 160px;
  font-family: var(--font-mono);
}

#ad\62 ToolsModal #ad\62 MdnsList {
  margin-top: var(--space-2);
}

#ad\62 ToolsModal .adb-chip[data-pair-addr] {
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}

#ad\62 ToolsModal .adb-chip[data-pair-addr]:hover {
  color: var(--text-main);
  border-color: var(--panel-border-strong);
  background: var(--bg-hover);
}

#ad\62 ToolsModal .adb-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- 标签条（激活态底部 2px --accent-gradient 渐变下划线，深化规范 §3.4） ---------- */
#ad\62 ToolsModal .adb-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: var(--space-4);
}

#ad\62 ToolsModal .adb-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 550;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

#ad\62 ToolsModal .adb-tab:hover {
  color: var(--text-main);
}

/* 激活态：主色文字 + 底部 2px 渐变下划线，字重对齐导航 active（600） */
#ad\62 ToolsModal .adb-tab.is-active {
  color: var(--primary);
  border-bottom-color: transparent;
  /*
   * 渐变下划线：--accent-gradient 铺满 2px 底边；background-origin: border-box
   * 让色带盖住透明的 2px 下边框区、与 .adb-tabs 的 1px 基线齐平。
   * 不用 border-image：slice 取的是渐变图像边缘 1px 再拉伸，扫不出完整色带。
   */
  background-image: var(--accent-gradient);
  background-size: 100% 2px;
  background-position: left bottom;
  background-origin: border-box;
  background-repeat: no-repeat;
  font-weight: 600;
}

#ad\62 ToolsModal .adb-tab:focus-visible {
  outline: none;
  color: var(--primary-hover);
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* ---------- 标签页内容 ---------- */
#ad\62 ToolsModal .adb-tabpane {
  min-width: 0;
}

#ad\62 ToolsModal .adb-tabpane.adb-locked {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

#ad\62 ToolsModal .adb-pane-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

#ad\62 ToolsModal .adb-app-filter {
  width: auto;
  min-width: 130px;
}

#ad\62 ToolsModal .adb-app-search {
  flex: 1 1 180px;
  width: auto;
  min-width: 160px;
}

#ad\62 ToolsModal .adb-path-input {
  flex: 1 1 260px;
  width: auto;
  min-width: 200px;
  font-family: var(--font-mono);
}

#ad\62 ToolsModal .adb-log-buffer {
  width: auto;
  min-width: 140px;
}

#ad\62 ToolsModal .adb-log-pkg {
  flex: 1 1 150px;
  width: auto;
}

#ad\62 ToolsModal .adb-log-lines {
  width: 84px;
}

#ad\62 ToolsModal .adb-key-select {
  width: auto;
  min-width: 180px;
}

#ad\62 ToolsModal .adb-reboot-select {
  width: auto;
  min-width: 190px;
}

/* ---------- 滚动区域 / 表格 ---------- */
#ad\62 ToolsModal .adb-scroll {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}

#ad\62 ToolsModal .adb-scroll .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-elevated);
}

#ad\62 ToolsModal .adb-scroll .table td {
  background: transparent;
}

/* 表头 micro 化（深化规范 §2）：11px / 600 / +0.08em；中文表头无大小写形态，
   大写变换为空操作，间距带来的「刻度感」不受影响 */
#ad\62 ToolsModal .table th {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* 文件表 / 应用表 / 批量结果表行 hover（深化规范 §4 表格行）：悬浮底 +
   global .table tbody tr 的统一过渡；行内可点文件名随之点亮 */
#ad\62 ToolsModal .adb-scroll .table tbody tr:hover,
#ad\62 ToolsModal .adb-batch-wrap .table tbody tr:hover {
  background: var(--bg-hover);
}

#ad\62 ToolsModal .adb-scroll .table tbody tr:hover .adb-file-name:not(.adb-file-name--plain) {
  color: var(--primary-hover);
}

#ad\62 ToolsModal .adb-info-table th {
  width: 200px;
  white-space: nowrap;
}

#ad\62 ToolsModal .adb-mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  word-break: break-all;
}

#ad\62 ToolsModal .adb-app-name {
  color: var(--text-main);
}

#ad\62 ToolsModal .adb-app-pkg {
  color: var(--text-muted);
}

#ad\62 ToolsModal .adb-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

#ad\62 ToolsModal .adb-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

#ad\62 ToolsModal .adb-empty--error {
  color: var(--danger-text);
}

#ad\62 ToolsModal .adb-result {
  margin-bottom: var(--space-3);
}

#ad\62 ToolsModal .adb-batch-summary {
  font-size: var(--font-size-sm);
  color: var(--text-main);
  margin-bottom: var(--space-2);
}

#ad\62 ToolsModal .adb-batch-wrap {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

/* ---------- 文件页：面包屑 / 常用目录 / 文件行 ---------- */
#ad\62 ToolsModal .adb-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

#ad\62 ToolsModal .adb-crumb-item {
  appearance: none;
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

#ad\62 ToolsModal .adb-crumb-item:hover {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

/* 按下 / 键盘焦点（深化规范 §4 三态） */
#ad\62 ToolsModal .adb-crumb-item:active {
  transform: scale(0.97);
}

#ad\62 ToolsModal .adb-crumb-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#ad\62 ToolsModal .adb-crumb-item:not(:first-child)::before {
  content: "/";
  color: var(--text-muted);
  margin-right: 4px;
}

#ad\62 ToolsModal .adb-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

#ad\62 ToolsModal button.adb-chip {
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

#ad\62 ToolsModal button.adb-chip:hover {
  background: var(--panel-bg-hover);
  border-color: var(--primary-ring);
  color: var(--text-main);
}

/* 按下 / 键盘焦点（深化规范 §4 三态） */
#ad\62 ToolsModal button.adb-chip:active {
  transform: scale(0.98);
}

#ad\62 ToolsModal button.adb-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#ad\62 ToolsModal .adb-file-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

#ad\62 ToolsModal .adb-file-name {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--primary);
  cursor: pointer;
  word-break: break-all;
  text-align: left;
  transition: color var(--transition);
}

#ad\62 ToolsModal .adb-file-name:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* 按下 / 键盘焦点（深化规范 §4 三态） */
#ad\62 ToolsModal .adb-file-name:active {
  color: var(--primary-active);
}

#ad\62 ToolsModal .adb-file-name:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

#ad\62 ToolsModal .adb-file-name--plain {
  color: var(--text-main);
  cursor: default;
}

#ad\62 ToolsModal .adb-file-name--plain:hover {
  color: var(--text-main);
  text-decoration: none;
}

/* ---------- 文件预览 ---------- */
/* 文件预览卡：对齐 §4 卡片三件套（面板底 + 边框 + 顶部内嵌高光 + 小投影） */
#ad\62 ToolsModal .adb-preview {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm), var(--card-highlight);
}

#ad\62 ToolsModal .adb-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

#ad\62 ToolsModal .adb-preview__head .adb-meta {
  margin: 0;
}

#ad\62 ToolsModal .adb-preview__img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

/* ---------- 等宽输出（日志 / Shell） ---------- */
#ad\62 ToolsModal .adb-pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--text-main);
  background: var(--bg-sunken);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: 0;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- 开关页 ---------- */
#ad\62 ToolsModal .adb-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

#ad\62 ToolsModal .adb-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

#ad\62 ToolsModal .adb-toggle:hover {
  background: var(--panel-bg-hover);
  border-color: var(--panel-border-strong);
}

#ad\62 ToolsModal .adb-toggle__label {
  font-size: var(--font-size-sm);
  color: var(--text-main);
}

#ad\62 ToolsModal .adb-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: 0 0 auto;
}

#ad\62 ToolsModal .adb-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

#ad\62 ToolsModal .adb-toggle-note {
  grid-column: 1 / -1;
  margin: 0;
}

#ad\62 ToolsModal .adb-subcard {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm), var(--card-highlight);
}

#ad\62 ToolsModal .adb-navmode {
  width: auto;
  max-width: 340px;
}

/* ---------- 工具页 ---------- */
#ad\62 ToolsModal .adb-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

#ad\62 ToolsModal .adb-toolcard {
  padding: var(--space-3) var(--space-4);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#ad\62 ToolsModal .adb-toolcard--wide {
  grid-column: 1 / -1;
}

/* 危险工具卡：淡红描边（soft 令牌太淡不宜做边框，按 §4 notice 的比例提一档） */
#ad\62 ToolsModal .adb-toolcard--danger {
  border-color: rgba(var(--danger-rgb), 0.35);
}

#ad\62 ToolsModal .adb-toolcard h4 {
  margin: 0;
  /* 字号阶梯（深化规范 §2）：小节标题 = h3 档（14px / 650 / -0.01em） */
  font-size: var(--font-size-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

#ad\62 ToolsModal .adb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

#ad\62 ToolsModal .adb-row--mt {
  margin-top: var(--space-2);
}

#ad\62 ToolsModal .adb-row .form-input {
  flex: 1 1 140px;
  width: auto;
  min-width: 120px;
}

#ad\62 ToolsModal .adb-shot-wrap {
  background: var(--bg-sunken);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

#ad\62 ToolsModal .adb-shot-wrap img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

/* 录制中：边框用主警示色，文字用 -text 可读变体 */
#ad\62 ToolsModal .adb-recording {
  border-color: var(--danger);
  color: var(--danger-text);
}

#ad\62 ToolsModal .adb-link {
  color: var(--primary);
  text-decoration: underline;
}

#ad\62 ToolsModal .adb-link:hover {
  color: var(--primary-hover);
}

#ad\62 ToolsModal .adb-link:active {
  color: var(--primary-active);
}

#ad\62 ToolsModal #ad\62 ToolsBatchNote {
  margin-bottom: var(--space-3);
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  #ad\62 ToolsModal .adb-tools-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #ad\62 ToolsModal .modal-panel {
    padding: var(--space-3);
  }

  #ad\62 ToolsModal .adb-device-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #ad\62 ToolsModal .adb-device-bar__field--end {
    margin-left: 0;
  }

  #ad\62 ToolsModal #ad\62 ConnectInput {
    width: 100%;
    flex: 1 1 auto;
  }

  /* 标签条横向滚动：细滚动条交给 global.css 的全局 ::-webkit-scrollbar 规则，
     这里不准再写标准滚动条属性（Chrome 121+ 会禁用 webkit 自定义滚动条，出现双滚动条） */
  #ad\62 ToolsModal .adb-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #ad\62 ToolsModal .adb-tab {
    flex: 0 0 auto;
    padding: 8px var(--space-3);
  }

  #ad\62 ToolsModal .adb-app-filter,
  #ad\62 ToolsModal .adb-path-input,
  #ad\62 ToolsModal .adb-log-buffer,
  #ad\62 ToolsModal .adb-key-select,
  #ad\62 ToolsModal .adb-reboot-select {
    width: 100%;
  }

  #ad\62 ToolsModal .adb-scroll {
    max-height: 320px;
  }
}

/* —— 按压反馈补齐（第一轮评审遗留） —— */
#ad\62 ToolsModal .adb-toggle:active {
  transform: scale(0.98);
}