/* ══════════════════════════════════════════════════════════════════════
   设置页 · 紧凑化 + 精致化（纯 CSS 覆盖层）
   ══════════════════════════════════════════════════════════════════════

   【用户要求】「优化整个设置的页面UI，让它更紧凑一点、更精致一些」

   【做法】纯 CSS，只调间距/字号/圆角/分隔线这类纯外观属性，
           绝不改 display/position/flex/grid 等结构属性，也不动任何 JS，
           保证所有设置项的功能与数据完全不受影响。

   【为什么用这些选择器】
     设置页主体是 React 渲染的、没有自有命名空间可依赖，
     但设置页优化覆盖层（dist/settings-polish.js）已经给自主创建的节点
     打了一套稳定的 xhs-set-* class，这里就以那套 class 为主锚点，
     再用元素级选择器兜住 React 原生渲染的部分。

     ⚠️ 项目硬性契约：新增的每个深色底规则都必须配一条浅色规则，
        缺了 tests/theme-app-wide.contract.mjs 会直接 fail。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 统一令牌（与视频工作台同一套取值，保证整站一致）──
   实测反馈：顶部状态栏与卡片右上角辅助说明偏小偏暗，调到 11.5 并提亮。 */
:root {
  --xhs-set-radius-sm: 6px;
  --xhs-set-radius-md: 9px;
  --xhs-set-radius-lg: 12px;
  --xhs-set-fs-xs: 11.5px;
  --xhs-set-fs-sm: 12.5px;
  --xhs-set-fs-md: 13.5px;
  --xhs-set-fs-lg: 15px;
}

/* 设置页顶部状态栏（夜间 / 当前登录 / 权限 / 退出）——原来字号过小且偏暗，读起来吃力。
   只针对带明确语义的容器，不用 `~ *` 这类过宽的组合器（会误伤别的模块）。 */
[class*="topbar"] small,
[class*="top-bar"] small,
[class*="status-bar"] small,
[class*="user-chip"],
[class*="account-chip"] {
  font-size: var(--xhs-set-fs-xs);
}

/* ── 覆盖层自己创建的设置块：紧凑 + 统一圆角 ── */
.xhs-set-block {
  border-radius: var(--xhs-set-radius-md);
  padding: 10px 12px;
  gap: 6px;
}
.xhs-set-block-head { margin-bottom: 2px; }
.xhs-set-block-head b,
.xhs-set-block-head strong { font-size: var(--xhs-set-fs-lg); }
.xhs-set-block-head small { font-size: var(--xhs-set-fs-xs); line-height: 1.45; }
.xhs-set-fields { gap: 8px; }
.xhs-set-field { gap: 4px; }
.xhs-set-label { font-size: var(--xhs-set-fs-sm); line-height: 1.3; }
.xhs-set-note,
.xhs-set-msg { font-size: var(--xhs-set-fs-xs); line-height: 1.5; }
.xhs-set-grid { gap: 8px; }

/* ── 设置页里的输入控件统一：高度/圆角/字号/内边距 ──
   解决「各子模块输入框宽度不一致、没有统一栅格」的老问题。 */
.xhs-set-input,
.xhs-set-input-wide,
.xhs-set-block input:not([type="checkbox"]):not([type="radio"]),
.xhs-set-block select,
.xhs-set-block textarea {
  border-radius: var(--xhs-set-radius-sm);
  font-size: var(--xhs-set-fs-md);
  min-height: 32px;
  padding: 6px 10px;
  box-sizing: border-box;
}
.xhs-set-input-wide { width: 100%; }

/* ── 按钮统一圆角与字号 ── */
.xhs-set-save,
.xhs-set-danger,
.xhs-set-block button {
  border-radius: var(--xhs-set-radius-sm);
  font-size: var(--xhs-set-fs-sm);
}

/* ── 开关行：收紧行高，整体更紧凑 ── */
.xhs-set-switch-row { gap: 8px; padding: 5px 0; }
.xhs-set-switch-text,
.xhs-set-switch-text b { font-size: var(--xhs-set-fs-sm); line-height: 1.35; }
.xhs-set-switch-text small { font-size: var(--xhs-set-fs-xs); line-height: 1.45; }

/* ── React 原生渲染的设置项：用元素级选择器兜住，统一字号层级 ──
   只调字号/行高，不碰布局属性。 */
.xhs-set-block small,
.xhs-set-block label > small { font-size: var(--xhs-set-fs-xs); line-height: 1.5; }
.xhs-set-block label > span { font-size: var(--xhs-set-fs-sm); line-height: 1.35; }

/* ── 分区之间的纵向间距收紧（原来留白偏大，显得松散）── */
.xhs-set-extra + .xhs-set-extra { margin-top: 10px; }
.xhs-set-extra > * + * { margin-top: 8px; }

/* ── 精致化：分隔线统一且弱化，层次靠留白而非重边框 ── */
.xhs-set-block hr { margin: 10px 0; border: 0; border-top: 1px solid #27313a; opacity: .7; }

/* ── 浅色主题（项目契约要求：每个深色底都要有浅色对应）── */
html[data-vr-theme="light"] .xhs-set-block hr { border-top-color: #f2dade; }
html[data-vr-theme="light"] .xhs-set-input,
html[data-vr-theme="light"] .xhs-set-input-wide,
html[data-vr-theme="light"] .xhs-set-block input:not([type="checkbox"]):not([type="radio"]),
html[data-vr-theme="light"] .xhs-set-block select,
html[data-vr-theme="light"] .xhs-set-block textarea {
  background: #ffffff;
  border-color: #f2dade;
  color: #2a2c31;
}