/* ══════════════════════════════════════════════════════════════════════
   正式版清理 + UI 一致性修补（纯 CSS 覆盖层，最后加载）
   ══════════════════════════════════════════════════════════════════════

   本文件处理用户本轮明确提出的三类问题：

   ① 【删掉失效的顶栏工具条】
      用户原话：「灵感库最上面那一条，3:4、9:16，每行 3 列、4 列、5 列、6 列，
                那个都不起作用了，你把它都给我删掉」
      这两个切换组（.ratio-switch / .grid-column-switch）在
      .panel-heading-tools 里，点了不生效 —— 直接隐藏它们。
      用 display:none 隐藏而不是 removeChild：这些是 React 渲染的节点，
      删掉会让 React 之后 removeChild 找不到而整树卸载（血泪铁律）。

   ② 【统一配色，消掉刺眼的红色】
      用户原话：「采集里按手机内容流查看，图片下面那些红色和其他展示方式的颜色都不一样，
                把这个颜色修改一下」
      theme-day-night.css 里给 .ratio-switch/.grid-column-switch 用了品牌红
      （#8e1d0b / #cd3319 / rgba(205,51,25,...)），与工作台的青绿强调色不是一套，
      视觉上很跳。这里统一收敛到工作台的中性灰蓝体系。

   ③ 通用：把覆盖层里遗留的红色强调统一成中性色（不动内容，只动颜色）
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 删掉不生效的比例 / 列数工具条（整组隐藏） ── */
.panel-heading-tools > .ratio-switch,
.panel-heading-tools > .grid-column-switch,
.panel-heading-tools > .ratio-switch *,
.panel-heading-tools > .grid-column-switch * {
  display: none !important;
}
/* 工具条里那个「7 条」计数也一并去掉（它属于这套失效控件的一部分） */
.panel-heading-tools > .count,
.panel-heading-tools > .item-count {
  display: none !important;
}

/* ── ② 收起那套红强调，统一到工作台的中性灰蓝 ── */
.ratio-switch,
.grid-column-switch {
  color: #85929d;
}
.ratio-switch button,
.grid-column-switch button {
  color: #9aa6b2;
  background: #161c22;
  border: 1px solid #27313a;
}
.ratio-switch button:hover,
.grid-column-switch button:hover {
  color: #dce4ea;
  border-color: #4a5560;
  background: #1b232b;
}
.ratio-switch button.active,
.grid-column-switch button.active {
  color: #e9fcff;
  background: #17313a;
  border-color: #7adbe9;
}

/* ── ③ 手机内容流（采集/灵感库预览栏）里的红色强调统一 ──
   实测 theme-day-night.css 里这些类用的是品牌红，和别处不一致。
   这里统一成同一套浅色/深色令牌，只改颜色不改结构。 */
html[data-vr-theme="light"] .ratio-switch button,
html[data-vr-theme="light"] .grid-column-switch button {
  color: #5d6167;
  background: #fbf0f1;
  border: 1px solid #f2dade;
}
html[data-vr-theme="light"] .ratio-switch button.active,
html[data-vr-theme="light"] .grid-column-switch button.active {
  color: #e8452f;
  background: rgba(232, 69, 47, 0.10);
  border-color: rgba(232, 69, 47, 0.45);
}

/* ── ④ 手机内容流卡片：图片下方文字统一色（去掉偏红的那套） ──
   预览流里的标题/作者/互动数原来各用各的颜色，这里收敛为一套。 */
html[data-vr-theme="light"] .preview-phone .xhs-note-card-title,
html[data-vr-theme="light"] .preview-phone .collection-card-title {
  color: #2a2c31;
}
html[data-vr-theme="light"] .preview-phone .xhs-note-card-meta,
html[data-vr-theme="light"] .preview-phone .collection-card-meta {
  color: #8d9099;
}

/* ── ⑦ 采集/灵感库「手机内容流」里的红色按钮统一 ──
   用户原话：「采集里按手机内容流查看，图片下面那些红色和其他展示方式的颜色都不一样，
              把这个颜色修改一下」（本轮再次强调：「那个底色红色还是没给我改」）
   实测定位（探针读真实 DOM）：
     那个红色的按钮是【关注】，它自己【没有 class】，
     父级是 .xhs-author-row，再往上是 .phone-preview-list / .panel.preview-phone。
     所以必须用「结构位置」定位，不能靠类名。 */
.phone-preview-list .xhs-author-row button,
.phone-preview .xhs-author-row button,
.preview-phone .xhs-author-row button,
.xhs-author-row > button {
  background: #232b33 !important;
  color: #cfdae2 !important;
  border: 1px solid #3a4756 !important;
}
.phone-preview-list .xhs-author-row button:hover,
.phone-preview .xhs-author-row button:hover,
.preview-phone .xhs-author-row button:hover {
  background: #2b353f !important;
  border-color: #4a5560 !important;
  color: #eef4f7 !important;
}
/* 兜底：不管它在哪儿，只要落在手机内容流里，红底白字的关注按钮都收敛 */
.phone-preview button[style*="255, 36, 66"],
.preview-phone button[style*="255, 36, 66"] {
  background: #232b33 !important;
  color: #cfdae2 !important;
  border: 1px solid #3a4756 !important;
}
/* 浅色主题 */
html[data-vr-theme="light"] .phone-preview-list .xhs-author-row button,
html[data-vr-theme="light"] .phone-preview .xhs-author-row button,
html[data-vr-theme="light"] .preview-phone .xhs-author-row button,
html[data-vr-theme="light"] .xhs-author-row > button {
  background: #fbf0f1 !important;
  color: #e8452f !important;
  border-color: #f2dade !important;
}

/* ── ⑧ 图文二创里的「半透明白」小按钮 → 统一到工作台控件色 ──
   用户原话：「图文二创里，参加素材库参考图、AI优化提示词这些白色按钮，
              和整体 UI 不太搭，重新配一下」
   实测：这些按钮是 rgba(255,255,255,.043~.06) 的半透明白，
   在深底上发"灰白"，跟工作台其它控件（#1b2027 系）不是一个体系。
   统一成同一个 surface + 描边 + 文字色。 */
.xhs-asset-tab-wrap,
.reference-upload-box button,
.content-prompt-box button,
.image-remix-settings button,
button.xhs-ai-prompt-btn {
  background: #1b2027 !important;
  border: 1px solid #2c313c !important;
  color: #cfdae2 !important;
  border-radius: 6px !important;
}
.xhs-asset-tab-wrap:hover,
.reference-upload-box button:hover,
.content-prompt-box button:hover,
.image-remix-settings button:hover,
button.xhs-ai-prompt-btn:hover {
  background: #232b33 !important;
  border-color: #4a5560 !important;
  color: #eef4f7 !important;
}
.xhs-asset-tab-wrap.active,
.xhs-asset-tab-wrap.is-active,
.image-remix-settings button.active,
.image-remix-settings button.is-active {
  background: #17313a !important;
  border-color: #7adbe9 !important;
  color: #e9fcff !important;
}
.ratio-option-grid button {
  background: #1b2027 !important;
  border: 1px solid #2c313c !important;
  color: #cfdae2 !important;
}
.ratio-option-grid button.active,
.ratio-option-grid button.is-active {
  background: #17313a !important;
  border-color: #7adbe9 !important;
  color: #e9fcff !important;
}
/* 浅色主题 */
html[data-vr-theme="light"] .xhs-asset-tab-wrap,
html[data-vr-theme="light"] .reference-upload-box button,
html[data-vr-theme="light"] .content-prompt-box button,
html[data-vr-theme="light"] .image-remix-settings button,
html[data-vr-theme="light"] button.xhs-ai-prompt-btn,
html[data-vr-theme="light"] .ratio-option-grid button {
  background: #ffffff !important;
  border-color: #f0dade !important;
  color: #5d6167 !important;
}
html[data-vr-theme="light"] .xhs-asset-tab-wrap.active,
html[data-vr-theme="light"] .xhs-asset-tab-wrap.is-active,
html[data-vr-theme="light"] .ratio-option-grid button.active,
html[data-vr-theme="light"] .image-remix-settings button.active {
  background: rgba(232, 69, 47, .10) !important;
  border-color: #e8452f !important;
  color: #e8452f !important;
}

/* ── ⑤ 设置页：创建用户压成一行、运行日志改成满宽 ──
   用户原话：「设置里的『创建用户』占位太大，就那四项，一行就能搞定」
            「运行日志的比例和其他地方不一致，也做成满屏，宽度要和上面保持一致」

   实测的真实类名（从运行中的 DOM 里量出来的，不是猜的）：
     · 用户管理区 = .settings-section.user-management.settings-section-card
     · 配置区块   = .input-grid.api-settings-grid.xhs-set-block
   两者父容器都是 .settings-console（宽 1401），所以用 100% 就能对齐。 */

/* 创建用户：把「登录名 / 姓名 / 初始密码 / 角色」四项压成一行。
   实测真实锚点（探针读 DOM）：.user-create-row.xhs-set-block
     宽 1351 × 高 85 —— 虽然已经是 flex row，但每个 label 是竖排
     （标签一行、输入框一行），四项叠加起来仍占 85px 的块。
   改成：标签与输入框同行的内联布局，整体高度收到 ~40px。
   ⚠️ 上一轮我按 .settings-section.user-management 定位 —— 那是外层大容器，
     根本不匹配这个表单，所以改动没有生效。 */
.user-create-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  padding: 8px 10px !important;
}
.user-create-row > label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 150px !important;
  min-width: 0 !important;
}
.user-create-row > label > span,
.user-create-row > label > b,
.user-create-row > label > small {
  flex: 0 0 auto !important;
  white-space: nowrap;
  font-size: 12px !important;
}
.user-create-row input:not([type="checkbox"]),
.user-create-row select {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  width: auto !important;
  height: 32px !important;
  box-sizing: border-box !important;
}
.user-create-row > button,
.user-create-row .xhs-set-save {
  flex: 0 0 auto !important;
  height: 32px !important;
  white-space: nowrap;
}
/* 浅色主题 */
html[data-vr-theme="light"] .user-create-row input:not([type="checkbox"]),
html[data-vr-theme="light"] .user-create-row select {
  background: #ffffff;
  border-color: #f2dade;
  color: #2a2c31;
}

/* 运行日志：与上面所有配置卡片同宽（.settings-console 的 100%），不再窄一截 */
.settings-console > .settings-section,
.settings-console > .xhs-set-block,
.input-grid.api-settings-grid {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
/* 日志正文：满宽 + 等宽字体，长行可横向滚动 */
.settings-section textarea,
.settings-section pre,
.xhs-set-log textarea,
[class*="run-log"] textarea,
[class*="run-log"] pre {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  overflow-x: auto !important;
}

/* ── ⑥ 图文二创工作台：把「按人物批量」这类自建按钮与原生按钮统一 ──
   用户原话：「图文二创里，『按人物批量』那个按钮和其他的都不太一致。
              你把图文二创工作台的那些按钮 UI 都统一一下」
   自建按钮类名是 .bba-inline-btn（batch-by-asset.js 里创建的），
   统一成和 .generate-image-button / 原生按钮同一套外观：同高、同圆角、同字号、同配色。 */
.bba-inline-btn,
.bba-inline-btn.is-strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid #2c313c !important;
  border-radius: 7px !important;
  background: #1b2027 !important;
  color: #d7e0e6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transform: none !important;
  box-shadow: none !important;
}
.bba-inline-btn:hover:not(:disabled) {
  border-color: #4a5560 !important;
  background: #232b33 !important;
  color: #eef4f7 !important;
}
.bba-inline-btn:active:not(:disabled) { background: #1a2028 !important; }
.bba-inline-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
/* 浅色主题 */
html[data-vr-theme="light"] .bba-inline-btn,
html[data-vr-theme="light"] .bba-inline-btn.is-strong {
  border-color: #f0dade !important;
  background: #ffffff !important;
  color: #2a2c31 !important;
}
html[data-vr-theme="light"] .bba-inline-btn:hover:not(:disabled) {
  border-color: #e8452f !important;
  background: #fbf0f1 !important;
  color: #e8452f !important;
}

/* ── ⑥b 浅色模式下这两个自建按钮的「纯白块」问题（用户反馈）──
   用户原话：「特别是那个白色的『标签关联素材库参考图按人物批量生成』，
              改得和整体 UI 更协调一点」。
   实测：日间模式下 .bba-inline-btn 是 background:#ffffff 纯白，
        周围是浅粉面（--l-bg #fdf3f4 / --l-inset #fbf0f1）+ 浅暖描边，
        纯白块在浅底上「跳出来」，和整体不搭。
   修法：换成和日间其它次级控件同一套「浅粉面 + 暖描边 + 主色字」，
        不再是死白；hover 才给红调。这样和「保存到模板库」等次级按钮同一体系。 */
html[data-vr-theme="light"] .bba-inline-btn,
html[data-vr-theme="light"] .bba-inline-btn.is-block,
html[data-vr-theme="light"] .bba-inline-btn.is-strong {
  border-color: #f2dade !important;
  background: #fbf0f1 !important;
  color: #b03523 !important;
  font-weight: 500 !important;
}
html[data-vr-theme="light"] .bba-inline-btn:hover:not(:disabled),
html[data-vr-theme="light"] .bba-inline-btn.is-block:hover:not(:disabled),
html[data-vr-theme="light"] .bba-inline-btn.is-strong:hover:not(:disabled) {
  border-color: rgba(232, 69, 47, .55) !important;
  background: rgba(232, 69, 47, .10) !important;
  color: #e8452f !important;
}
html[data-vr-theme="light"] .bba-inline-btn:active:not(:disabled) {
  background: rgba(232, 69, 47, .16) !important;
}
/* 深色模式下也给这两个按钮一点统一的暖调（原本 #1b2027 偏冷灰） */
:root:not([data-vr-theme="light"]) .bba-inline-btn.is-block,
html:not([data-vr-theme="light"]) .bba-inline-btn.is-block {
  border-color: #2f353f !important;
  background: #1e242c !important;
  color: #cfdae2 !important;
}

/* ── ⑥c 底部批量行紧凑化：「批量数量输入框 + 批量生成 N 份 + 按人物批量」一行 ──
   用户原话：「把『按人物批量生成』放在『批量生成两份』的后面，这样它就可以更紧凑一些」。
   实测结构：这一行是 2 列 grid（332.67px 332.69px）
      ① <label>          批量数量输入框（原本独占 332px 一整格，太宽）
      ② <button.xhs-batch-clone> 批量生成 N 份
      ③ <label.xhs-remake-toolbar-hide> （隐藏）
   我们要变成：输入框（窄）+ 批量生成 + 按人物批量，三个并排一行。
   ⚠️ 不能直接改 .input-grid.compact-remix-settings —— 那个类在页面上是多处共用的
      （顶部工具栏也是它），一动会连带改到别处。所以用我们自己打的 .xhs-cl-batch-tight
      （只加在【含 .xhs-batch-clone 的那个 grid】上，见 batch-by-asset.js）。
   ⚠️ 排序用 CSS `order`，绝不用 insertBefore 搬 React 节点（会导致状态回滚，铁律）。 */
.xhs-cl-batch-tight {
  display: grid !important;
  grid-template-columns: 84px 132px auto !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: start !important;
}
/* 批量数量输入框：收窄，把空间让出来 */
.xhs-cl-batch-tight:not(.input-grid) > input[type="number"],
.xhs-cl-batch-tight > label:not([class*="hide"]) {
  min-width: 0 !important;
}
.xhs-cl-batch-tight input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  text-align: center !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}
.xhs-cl-batch-tight button {
  height: 36px !important;
  white-space: nowrap !important;
  justify-self: stretch !important;
  width: 100% !important;
}
/* 视觉顺序：批量数量(1) → 批量生成 N 份(2) → 按人物批量(3) */
.xhs-cl-batch-tight > button.xhs-batch-clone { order: 2 !important; }
.xhs-cl-batch-tight > .bba-inline-btn { order: 3 !important; height: 36px !important; }
.xhs-cl-batch-tight > label[class*="hide"] { order: 9 !important; display: none !important; }


/* ── 团队协作面板（团队同步 P0-b · 方式 A：登录即进团队）──
   用户原话：「一个团队下载一个版本，团队内所有人共享内容，数据互通」
             「不想让客户填团队码/邀请码，想更简单」→ 登录即绑定，
             所以这里只给一个按钮/一段说明，不暴露任何技术名词。
   ⚠️ 契约：每个深色底都要配一条浅色规则。 */
.xhs-ua-team {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #2c313c;
  border-radius: 10px;
  background: #1b2027;
}
.xhs-ua-team-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.xhs-ua-team-head b { font-size: 13px; color: #e6eef4; }
.xhs-ua-team-head span { font-size: 11.5px; color: #8d99a3; }
.xhs-ua-team-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #9aa6b0;
}
.xhs-ua-team-note.is-sub { color: #7d8891; }
.xhs-ua-team > .xhs-ua-btn { margin-top: 9px; }
/* 已开启：左侧一条青绿提示条 */
.xhs-ua-team.is-on { border-color: #2b4a44; background: #16221f; }
.xhs-ua-team.is-on .xhs-ua-team-head b { color: #7fd6b4; }
/* 未开启：稍暗，引导点击 */
.xhs-ua-team.is-off { border-color: #3a3242; background: #201b26; }
.xhs-ua-team.is-off .xhs-ua-team-head b { color: #c9a6e0; }

/* 浅色主题 */
html[data-vr-theme="light"] .xhs-ua-team,
.vr-shell[data-theme="light"] .xhs-ua-team {
  border-color: #f2dade;
  background: #fbf0f1;
}
html[data-vr-theme="light"] .xhs-ua-team-head b,
.vr-shell[data-theme="light"] .xhs-ua-team-head b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-ua-team-head span,
.vr-shell[data-theme="light"] .xhs-ua-team-head span { color: #6d7278; }
html[data-vr-theme="light"] .xhs-ua-team-note,
.vr-shell[data-theme="light"] .xhs-ua-team-note { color: #5d6167; }
html[data-vr-theme="light"] .xhs-ua-team-note.is-sub,
.vr-shell[data-theme="light"] .xhs-ua-team-note.is-sub { color: #8d9099; }
html[data-vr-theme="light"] .xhs-ua-team.is-on,
.vr-shell[data-theme="light"] .xhs-ua-team.is-on { border-color: #cfe9de; background: #f1faf6; }
html[data-vr-theme="light"] .xhs-ua-team.is-on .xhs-ua-team-head b,
.vr-shell[data-theme="light"] .xhs-ua-team.is-on .xhs-ua-team-head b { color: #1f7d5c; }
html[data-vr-theme="light"] .xhs-ua-team.is-off,
.vr-shell[data-theme="light"] .xhs-ua-team.is-off { border-color: #ecdfe4; background: #fdf6f8; }
html[data-vr-theme="light"] .xhs-ua-team.is-off .xhs-ua-team-head b,
.vr-shell[data-theme="light"] .xhs-ua-team.is-off .xhs-ua-team-head b { color: #8b4fa8; }


/* ── 团队云同步面板（团队同步 P0-c）──
   用户思路：「小数据上传服务器，图片视频下载到本地」。
   ⚠️ 契约：每个深色底都要配一条浅色规则。 */
.xhs-ua-sync {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #2c313c;
  border-radius: 10px;
  background: #1b2027;
}
.xhs-ua-sync.is-on { border-color: #2b4a44; background: #16221f; }
.xhs-ua-sync.is-on .xhs-ua-team-head b { color: #7fd6b4; }
.xhs-ua-sync.is-off { border-color: #3a3242; background: #201b26; }
.xhs-ua-sync.is-off .xhs-ua-team-head b { color: #c9a6e0; }
.xhs-ua-sync .xhs-ua-team-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.xhs-ua-sync .xhs-ua-team-head b { font-size: 13px; color: #e6eef4; }
.xhs-ua-sync .xhs-ua-team-head span { font-size: 11.5px; color: #8d99a3; }
.xhs-ua-sync .xhs-ua-team-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: #9aa6b0; }
.xhs-ua-sync-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.xhs-ua-sync-row input[type="password"] {
  flex: 1 1 220px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #2c313c;
  border-radius: 7px;
  background: #141a20;
  color: #d7e0e6;
  font-size: 12px;
}
.xhs-ua-sync-row input[type="password"]::placeholder { color: #6b767f; }
.xhs-ua-sync-err { display: block; margin: 6px 0 0; font-size: 11.5px; color: #e8a08a; }

/* 浅色主题 */
html[data-vr-theme="light"] .xhs-ua-sync,
.vr-shell[data-theme="light"] .xhs-ua-sync { border-color: #f2dade; background: #fbf0f1; }
html[data-vr-theme="light"] .xhs-ua-sync.is-on,
.vr-shell[data-theme="light"] .xhs-ua-sync.is-on { border-color: #cfe9de; background: #f1faf6; }
html[data-vr-theme="light"] .xhs-ua-sync.is-on .xhs-ua-team-head b,
.vr-shell[data-theme="light"] .xhs-ua-sync.is-on .xhs-ua-team-head b { color: #1f7d5c; }
html[data-vr-theme="light"] .xhs-ua-sync.is-off,
.vr-shell[data-theme="light"] .xhs-ua-sync.is-off { border-color: #ecdfe4; background: #fdf6f8; }
html[data-vr-theme="light"] .xhs-ua-sync .xhs-ua-team-head b,
.vr-shell[data-theme="light"] .xhs-ua-sync .xhs-ua-team-head b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-ua-sync .xhs-ua-team-head span,
.vr-shell[data-theme="light"] .xhs-ua-sync .xhs-ua-team-head span { color: #6d7278; }
html[data-vr-theme="light"] .xhs-ua-sync .xhs-ua-team-note,
.vr-shell[data-theme="light"] .xhs-ua-sync .xhs-ua-team-note { color: #5d6167; }
html[data-vr-theme="light"] .xhs-ua-sync-row input[type="password"],
.vr-shell[data-theme="light"] .xhs-ua-sync-row input[type="password"] {
  border-color: #f2dade; background: #fff; color: #2a2c31;
}
html[data-vr-theme="light"] .xhs-ua-sync-err,
.vr-shell[data-theme="light"] .xhs-ua-sync-err { color: #c0392b; }

.xhs-ua-sync-warn { color: #e8b06a; }
html[data-vr-theme="light"] .xhs-ua-sync-warn,
.vr-shell[data-theme="light"] .xhs-ua-sync-warn { color: #b06a1f; }

.xhs-ua-sync-ok { color: #7fd6b4; }
html[data-vr-theme="light"] .xhs-ua-sync-ok,
.vr-shell[data-theme="light"] .xhs-ua-sync-ok { color: #1f7d5c; }

/* ── 团队状态总览（客户端自己也能看 + 一键操作本机）──
   用户原话：「我在 mac 版里面怎么没看到一键点击、一键更新、一键团队更新？」
   ⚠️ 契约：每个深色底都要配一条浅色规则（本仓库硬要求）。 */
.xhs-ua-tov {
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid #2c313c;
  border-radius: 10px;
  background: #1b2027;
}
.xhs-ua-ttable {
  width: 100%;
  border-collapse: collapse;
  margin: 9px 0 0;
  font-size: 11.5px;
}
.xhs-ua-ttable th {
  text-align: left;
  font-weight: 500;
  color: #7d8891;
  padding: 4px 8px 5px 0;
  border-bottom: 1px solid #2c313c;
  white-space: nowrap;
}
.xhs-ua-ttable td {
  padding: 6px 8px 6px 0;
  color: #c2ccd4;
  vertical-align: top;
  border-bottom: 1px solid #23282f;
}
.xhs-ua-ttable tr:last-child td { border-bottom: none; }
.xhs-ua-ttable tr.is-me td { background: rgba(90, 160, 220, 0.07); }
.xhs-ua-ttable td b { color: #e6eef4; font-weight: 600; }
.xhs-ua-tmono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: #8d99a3;
  word-break: break-all;
}
/* 状态小标签 */
.xhs-ua-tchip {
  display: inline-block;
  font-size: 10.5px;
  line-height: 1.5;
  padding: 1px 7px;
  margin: 0 4px 3px 0;
  border: 1px solid #333a44;
  border-radius: 20px;
  color: #8d99a3;
  white-space: nowrap;
}
.xhs-ua-tchip.is-on { color: #7fd6b4; border-color: rgba(127, 214, 180, 0.35); background: rgba(127, 214, 180, 0.08); }
.xhs-ua-tchip.is-warn { color: #e8b06a; border-color: rgba(232, 176, 106, 0.32); background: rgba(232, 176, 106, 0.08); }
.xhs-ua-tchip.is-me { color: #9ec9f0; border-color: rgba(158, 201, 240, 0.35); background: rgba(158, 201, 240, 0.08); }
.xhs-ua-tchip.is-primary { color: #f0cd7a; border-color: rgba(240, 205, 122, 0.4); background: rgba(240, 205, 122, 0.1); }

/* 浅色主题 */
html[data-vr-theme="light"] .xhs-ua-tov,
.vr-shell[data-theme="light"] .xhs-ua-tov { border-color: #f2dade; background: #fbf0f1; }
html[data-vr-theme="light"] .xhs-ua-ttable th,
.vr-shell[data-theme="light"] .xhs-ua-ttable th { color: #8d9099; border-bottom-color: #f2dade; }
html[data-vr-theme="light"] .xhs-ua-ttable td,
.vr-shell[data-theme="light"] .xhs-ua-ttable td { color: #5d6167; border-bottom-color: #f7e6e8; }
html[data-vr-theme="light"] .xhs-ua-ttable td b,
.vr-shell[data-theme="light"] .xhs-ua-ttable td b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-ua-ttable tr.is-me td,
.vr-shell[data-theme="light"] .xhs-ua-ttable tr.is-me td { background: rgba(90, 160, 220, 0.09); }
html[data-vr-theme="light"] .xhs-ua-tmono,
.vr-shell[data-theme="light"] .xhs-ua-tmono { color: #8d9099; }
html[data-vr-theme="light"] .xhs-ua-tchip,
.vr-shell[data-theme="light"] .xhs-ua-tchip { color: #8d9099; border-color: #f2dade; background: #ffffff; }
html[data-vr-theme="light"] .xhs-ua-tchip.is-on,
.vr-shell[data-theme="light"] .xhs-ua-tchip.is-on { color: #1f7d5c; border-color: rgba(31, 125, 92, 0.3); background: rgba(31, 125, 92, 0.08); }
html[data-vr-theme="light"] .xhs-ua-tchip.is-warn,
.vr-shell[data-theme="light"] .xhs-ua-tchip.is-warn { color: #b06a1f; border-color: rgba(176, 106, 31, 0.28); background: rgba(176, 106, 31, 0.08); }
html[data-vr-theme="light"] .xhs-ua-tchip.is-me,
.vr-shell[data-theme="light"] .xhs-ua-tchip.is-me { color: #2a6ca8; border-color: rgba(42, 108, 168, 0.28); background: rgba(42, 108, 168, 0.08); }
html[data-vr-theme="light"] .xhs-ua-tchip.is-primary,
.vr-shell[data-theme="light"] .xhs-ua-tchip.is-primary { color: #8a6414; border-color: rgba(138, 100, 20, 0.3); background: rgba(200, 160, 40, 0.12); }

/* 团队状态表：列宽与标签间距收紧（实测视觉反馈：状态列太挤） */
.xhs-ua-ttable th:nth-child(1), .xhs-ua-ttable td:nth-child(1) { width: 20%; min-width: 110px; }
.xhs-ua-ttable th:nth-child(2), .xhs-ua-ttable td:nth-child(2) { width: 26%; min-width: 140px; }
.xhs-ua-ttable th:nth-child(3), .xhs-ua-ttable td:nth-child(3) { width: 34%; }
.xhs-ua-ttable th:nth-child(4), .xhs-ua-ttable td:nth-child(4) { width: 20%; min-width: 110px; }
.xhs-ua-ttable td { line-height: 1.75; }
/* 提示文字与表格/按钮留出呼吸空间 */
.xhs-ua-tov .xhs-ua-hint { margin-top: 10px; }
.xhs-ua-tov .xhs-ua-sync-row { margin-top: 11px; }

/* ── 「加入团队」：团队码主入口 + 进阶折叠 ──
   用户原话：「做成「团队码」：同事只输 6 位短码（如 BEILEYE），不用粘 32 位长的令牌」 */
.xhs-ua-sync-row input[data-ua-sync-code] { text-transform: uppercase; letter-spacing: 1.5px; }
.xhs-ua-adv { margin-top: 10px; }
.xhs-ua-adv summary {
  cursor: pointer;
  font-size: 11.5px;
  color: #7d8891;
  padding: 4px 0;
  list-style: none;
}
.xhs-ua-adv summary::-webkit-details-marker { display: none; }
.xhs-ua-adv summary::before { content: '▸ '; }
.xhs-ua-adv[open] summary::before { content: '▾ '; }
.xhs-ua-adv summary:hover { color: #9aa6b0; }
.xhs-ua-adv .xhs-ua-sync-row { margin-top: 8px; }

/* 浅色主题 */
html[data-vr-theme="light"] .xhs-ua-adv summary,
.vr-shell[data-theme="light"] .xhs-ua-adv summary { color: #8d9099; }
html[data-vr-theme="light"] .xhs-ua-adv summary:hover,
.vr-shell[data-theme="light"] .xhs-ua-adv summary:hover { color: #2a2c31; }