/* ============================================================
   角色卡 + 主题色卡 · 共享样式（v1.1.0.140，v1.1.0.178 扩为三处共用）
   ------------------------------------------------------------
   角色卡面板的三处宿主 —— 后台（admin.php）、前台默认/指挥工作台模板（index.php）、
   前台指挥调度中心（app/frontend-tech.php）—— **共用本文件 + assets/js/user-panel.js**，
   确保「DOM 结构 / 布局 / 字段顺序 / 样式 / 交互完全一致」。

   ⚠ 这是这些类的**唯一来源**：common.css 中的弹窗外壳（.mask / .modal*）与
   admin.css 中的 .user-chip / .up-* / .theme-card* 均已迁出，避免两处各写一套、
   改一处漏一处。三个宿主页面都加载本文件。
   ⚠ 指挥调度中心模板（tech）**不加载 common.css**（自包含设计），因此本文件
   不得依赖 common.css 的变量以外的类；所需变量在 tech.css 里做了别名映射
   （--acc / --sub / --panel-2 / --panel-3 / --line-2）。
   配色一律取 CSS 变量（--acc / --txt / --ct / --cs …），无一硬编码色值。
   ============================================================ */

/* ============================================================
   弹窗外壳 · 全项目统一规范（v1.1.0.181）
   ------------------------------------------------------------
   本文件是 **.mask / .modal*** 的唯一来源（v1.1.0.178 由 common.css 迁入），
   后台（admin.php）、前台（index.php）、指挥调度中心（app/frontend-tech.php）
   三处宿主都加载本文件 → 全站弹窗外观一致。

   规范要点：
   ① 遮罩   —— 深色实底 + 轻模糊，背景内容退到后面但不喧宾夺主；
   ② 尺寸   —— 三档宽度（默认 560 / wide 880 / full 1180），高度随视口自适应；
   ③ 层级   —— 标题（16px 强调）→ 正文（13.5px）→ 底部按钮区，三段用分隔线切分；
   ④ 圆角阴影 —— 14px 圆角 + 两段式阴影（近处贴地 + 远处弥散），浮起感更强；
   ⑤ 关闭键 —— 右上角独立圆形按钮，hover 有底色，键盘可达；
   ⑥ 滚动   —— 只有正文区滚动，标题与按钮始终可见（长内容不顶飞布局）；
   ⑦ 响应式 —— ≤768px 改为近全屏 + 底部按钮铺满宽度（拇指可达）。
   ============================================================ */

/* ---- 遮罩 ---- */
.mask {
  position: fixed; inset: 0; z-index: 1000;
  /* v1.1.0.171：遮罩加深 —— 原 62% 半透明 + blur(2px) 会让背景表格内容透进弹窗，
     弹窗内容（尤其小字表格）与背景叠在一起难以辨读（用户截图实证）。
     现为 88% 不透明 + blur(8px)：弹窗与背景明确分层，弹窗内文字清晰。 */
  background: color-mix(in srgb, var(--panel-3) 88.0%, transparent);
  /* ⚠ 居中 + 可滚动 的经典坑：用 align-items:center 时，内容比容器高会**顶部被裁掉**
     且滚不回来。故这里不用居中对齐，改由 .modal 的 margin:auto 居中 ——
     内容矮时仍居中，内容高时从顶部开始、完整可滚。 */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* ⚠ 小屏上遮罩自身也要能滚动：弹窗很高时遮罩不能把内容截断 */
  overflow: auto;
  animation: xffa-mask-in .16s ease;
}
.mask[hidden] { display: none; }
@keyframes xffa-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 面板本体 ---- */
.modal {
  width: 100%; max-width: 560px;
  /* margin:auto 而非 align-items:center —— 内容超高时顶部不会被裁掉（见 .mask 注释） */
  margin: auto;
  /* 高度自适应：内容短时贴合内容，内容长时不超过视口留出上下呼吸位 */
  max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  /* ⚠ min-height:0 —— flex 子项默认 min-height:auto，
     正文过长时会把整个面板撑出 max-height（弹窗溢出屏幕的经典成因） */
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  /* 两段式阴影：近处一层贴地 + 远处一层弥散，比单层更像"浮起"
     ⚠ 阴影色必须用**三处宿主都成立**的变量：
       --shadow-color 由主题下发（后台/前台），指挥调度中心模板自包含 → 用 rgba 兜底。
       ⚠ 不能用 var(--txt-2)：tech 模板里是 --txt2（无连字符），
         color-mix() 拿到未定义变量会让**整条 box-shadow 声明作废**（实测阴影全丢）。 */
  box-shadow:
    0 2px 6px var(--shadow-color, rgba(0, 0, 0, .26)),
    0 22px 60px var(--shadow-color, rgba(0, 0, 0, .46));
  color: var(--txt);
  overflow: hidden;
  animation: xffa-modal-in .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes xffa-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal.wide { max-width: 880px; }
.modal.full { max-width: 1180px; }

/* ---- 标题区 ---- */
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--line);
  /* 标题区不参与滚动 → 长内容时始终可见 */
  flex: none;
  background: color-mix(in srgb, var(--panel-2) 42.0%, transparent);
}
.modal-head h3 {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--txt);
  line-height: 1.4; min-width: 0;
  /* 长标题省略而不是撑破弹窗 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 关闭键：右上角独立小圆钮，hover 有底色，键盘可达 */
.modal-close {
  flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--sub); font-size: 20px; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.modal-close:hover {
  background: color-mix(in srgb, var(--txt-2) 12.0%, transparent);
  border-color: var(--line-2); color: var(--txt);
}
.modal-close:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---- 正文区（唯一滚动区）---- */
.modal-body {
  padding: 18px 20px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  /* 长内容（长表格 / 长文本）在正文内滚动，不顶飞标题与按钮 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  line-height: 1.7;
}

/* ---- 底部按钮区 ---- */
.modal-foot {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  flex: none;
  background: color-mix(in srgb, var(--panel-2) 30.0%, transparent);
}
/* 底部按钮：统一高度与最小宽度，按钮文字不因长短而参差
   ⚠ 指挥调度中心模板自带 `body.tpl-tech .btn{padding:9px 16px}`（页面内按钮样式，
     特异性高于裸 .btn）→ 弹窗按钮必须再带一层作用域前缀才能拿到统一规格。 */
.modal-foot .btn,
body.tpl-tech .modal-foot .btn { min-width: 72px; }

/* ---- 移动端 / 小屏自适应 ---- */
@media (max-width: 768px) {
  /* 小屏贴底弹出：用 align-items:flex-end + margin:auto 仍能居中（auto 外边距优先） */
  .mask { padding: 12px; align-items: flex-end; }
  .modal {
    /* 小屏近全屏：内容区留出足够高度 */
    max-width: none; max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
  .modal.wide, .modal.full { max-width: none; }
  .modal-head { padding: 13px 14px 12px; }
  .modal-head h3 { font-size: 15px; }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 11px 14px; }
  /* 底部按钮铺满宽度 → 拇指可达（单按钮时占满，多按钮时等分） */
  .modal-foot .btn { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 420px) {
  .mask { padding: 0; }
  .modal { max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
  .modal-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   弹窗按钮的基础样式（v1.1.0.181）
   ------------------------------------------------------------
   ⚠ .btn 的主定义在 common.css，而**指挥调度中心模板（tech）不加载 common.css**
     → 那里弹窗底部按钮（.btn / .btn-primary）没有外观。
     故在此补齐一份（与 common.css 同规格），三处宿主一致。
   ============================================================ */
/* ⚠ 作用域必须限定在 tech —— 本文件在 admin.php / index.php 里都排在 common.css **之后**
   （admin.php 第 92 行 vs 第 90 行），若在这里定义裸 .btn 会**覆盖全局按钮样式**，
   波及整个后台。故只给「不加载 common.css 的 tech 模板」补一份。 */
body.tpl-tech .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  background: var(--panel-3, var(--panel-2));
  border: 1px solid var(--line-2);
  color: var(--ctrl-text, var(--txt));
  border-radius: 7px;
  font-size: 13px; cursor: pointer;
  font-family: var(--font, var(--fz));
  transition: all .16s;
  white-space: nowrap;
}
body.tpl-tech .btn:hover { background: var(--bg-2, var(--panel-2)); border-color: var(--c-luodian, var(--acc)); }
body.tpl-tech .btn:active { transform: translateY(1px); }
body.tpl-tech .btn:disabled { opacity: .6; cursor: default; }
body.tpl-tech .btn-primary {
  background: var(--acc); border-color: color-mix(in srgb, var(--acc) 72%, var(--txt));
  color: var(--acc-text); font-weight: 700;
}
body.tpl-tech .btn-primary:hover { background: color-mix(in srgb, var(--acc) 84%, var(--txt)); }
body.tpl-tech .btn-blue {
  background: var(--blue); border-color: var(--blue); color: var(--acc-text);
}
body.tpl-tech .btn-blue:hover { background: color-mix(in srgb, var(--blue) 84%, var(--txt)); }
body.tpl-tech .btn-danger {
  background: color-mix(in srgb, var(--c-xiafei) 15.0%, transparent);
  border-color: color-mix(in srgb, var(--c-xiafei) 50.0%, transparent); color: var(--tx-coral);
}
body.tpl-tech .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ============================================================
   弹窗内部在 tech 模板下的样式还原（v1.1.0.181）
   ------------------------------------------------------------
   ⚠ 指挥调度中心模板（tech.css）有一句高特异性通配重置：
        body.tpl-tech, body.tpl-tech *{margin:0;padding:0;box-sizing:border-box}
      它的特异性**高于**裸的 .modal-head / .modal-body / .modal-foot
      → 那张模板下弹窗的**所有内边距被清零**，正文与标题、按钮挤成一团
      （用户截图实证：折叠行文字贴边、按钮浮在最后一行右侧）。
      故这里为 tech 模板补一份带前缀的等价声明，把内边距还回来。

   ⚠ 注意：只还原**弹窗自身**的间距，不动页面其它元素 ——
      通配重置对整页是有意为之（自包含模板的布局基线）。
   ============================================================ */
body.tpl-tech .modal-head { padding: 15px 18px 14px; }
body.tpl-tech .modal-body { padding: 18px 20px; }
body.tpl-tech .modal-foot { padding: 13px 20px; }
body.tpl-tech .modal-close { padding: 0; }
body.tpl-tech .modal-head h3 { margin: 0; }
/* 折叠筐的间距同样被通配重置清零 → 文字贴边、行高被压扁（用户截图实证）。
   这里一并还原，弹窗内的观感与后台 / 前台完全一致。 */
/* ⚠ 通配重置把 margin 也清零了 → 三个折叠筐会**首尾相接**挤在一起。
   这里用「除第一个外都加 margin-top」的方式还原（与 common.css 口径一致：
   .xf-collapse 的 margin-top:10px 是「相邻两块之间 10px」）。 */
body.tpl-tech .xf-collapse { margin-top: 0; }
body.tpl-tech .xf-collapse + .xf-collapse { margin-top: 10px; }
body.tpl-tech .xf-collapse-head { padding: 9px 12px; }
body.tpl-tech .xf-collapse-body { padding: 10px 12px; }
@media (max-width: 768px) {
  body.tpl-tech .modal-head { padding: 13px 14px 12px; }
  body.tpl-tech .modal-body { padding: 14px; }
  body.tpl-tech .modal-foot { padding: 11px 14px; }
}

/* ---- 右上角角色卡（与后台完全一致）---- */
.user-chip {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--txt-2);
  cursor: pointer; padding: 4px 9px 4px 5px; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  transition: background .16s ease, border-color .16s ease;
}
.user-chip:hover { background: var(--panel-2); border-color: var(--line-2); }
.user-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.user-chip .av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  /* 头像底用 --acc-deep（深色主题保留色相），文字取其对比色 → 任意主题清晰可读 */
  background: var(--acc-deep); color: var(--acc-deep-text); font-size: 12px; font-weight: 700;
}

/* ---- 个人资料 / 个性化设置面板专属（.xf-collapse 折叠样式由 common.css 提供）---- */
.up-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.up-info b { font-size: 15px; color: var(--txt); }
.up-sub { font-size: 12px; color: var(--sub); margin-top: 3px; }
.up-actions { margin-top: 12px; display: flex; gap: 8px; }
.up-follow { margin-bottom: 12px; }
.up-follow-item {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--panel-2); transition: border-color .16s ease, background .16s ease;
}
.up-follow-item:hover { border-color: var(--acc); }
.up-follow-item.sel { border-color: var(--acc); background: var(--panel-3); }
.up-follow-item input { width: 15px; height: 15px; accent-color: var(--acc); flex: none; }
.up-follow-txt { display: flex; flex-direction: column; gap: 2px; }
.up-follow-txt b { font-size: 13px; color: var(--txt); font-weight: 600; }
.up-follow-txt i { font-size: 11.5px; color: var(--sub); font-style: normal; }

/* ---- 主题色卡：区块标题（设置模块 + 角色卡共用）---- */
.theme-block-title {
  font-size: 13px; font-weight: 700; color: var(--txt); margin-bottom: 10px;
  padding-left: 9px; border-left: 4px solid var(--acc);
}

/* ---- 配色家族分组（v1.1.0.151：主维度 = 4 大色系家族）----
   一族一行 = 家族名 + 该族深浅构成 + 该族色卡（auto-fit 自适应列数）。
   v1.1.0.151 由「浅色/深色两栏」改为「4 大色系家族」（朱漆鎏金 / 黑漆螺钿 /
   栗漆秋叶 / 犀皮流霞），标题不再与实际观感脱节 —— v150 之后所有方案的卡片面
   都渲染成同色系浅色玻璃，「深浅」只剩「实色底上用白字还是深墨字」这一含义，
   故深浅信息改为**每张卡的角标**，族标题只给出该族的深浅构成。
   家族名与深浅判定均由后端 cat.* 下发（前端不推断，避免两端口径漂移）。
   本段放在公共样式里：后台设置模块与前台个人面板共用同一套分类。 */
.theme-fam-row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px; align-items: start; margin-bottom: 12px;
}
.theme-fam-row:last-child { margin-bottom: 0; }
.theme-family-title {
  font-size: 12.5px; color: var(--sub); margin-bottom: 0;
  padding: 6px 0 0 9px; border-left: 3px solid var(--line-2);
  line-height: 1.5;
}
.theme-family-title b { display: block; font-size: 13px; font-weight: 700; color: var(--txt); }
.theme-family-mix { display: block; font-size: 11px; color: var(--sub); margin-top: 2px; }

/* 窄容器（前台个人面板弹窗实测约 558px 宽）：家族标题移到上方横排，
   把宽度让给色卡（否则每族 4 张被挤成 2×2，右侧还空一列）。
   用**容器查询**而非媒体查询 —— 判据是容器实际宽度，与浏览器窗口宽度无关
   （前台大屏窗口很宽但弹窗很窄，媒体查询会失效）。
   阈值取 640px：覆盖弹窗实测宽度 558px，后台设置模块容器远大于此、不受影响。 */
.modal-body { container-type: inline-size; }
@container (max-width: 640px) {
  .theme-fam-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .theme-family-title {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0 0 8px; border-left-width: 3px;
  }
  .theme-family-title b { display: inline; font-size: 12.5px; }
  .theme-family-mix { display: inline; margin-top: 0; }
  /* 窄容器下色卡更紧凑，4 张一行铺满 */
  .theme-cards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
}

/* ---- 单张方案色卡：卡片底色 = 该卡自己的主题色（--cb），文字 = 该底色上的可读色（--ct/--cs） ---- */
.theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
/* v1.1.0.140：卡片底色 = **该卡片自己的主题色本体**（swatch.bg = 精确 hex，与色卡色号严格一致）。
   用户诉求：「朱漆红的背景色应该是红色的」+「渲染色与色卡色号消除色差」。
   --cb = 主题色本体（swatch.bg = 精确 hex，零调整）
   --ca = 色卡主题色本体（p.hex）—— 与 --cb 同值，仅作语义标注
   --ct = 该精确底色上动态可读的正文色（swatch.ink：白/深墨取优）—— 边框/选中光晕用它，
          因 --cb==--ca，若仍用 --ca 做光晕会与底色同色不可见；--ct 与之高对比，选中态清晰。
   --cs = 该底色上的辅助色（swatch.ink2）
   ⚠ 布局、间距、圆角、阴影、文字层级均未改动；缺主题色时 var() fallback 退回中性样式。 */
.theme-card {
  display: grid; gap: 4px; padding: 8px 9px 10px; cursor: pointer;
  background: var(--cb, var(--panel));
  border: 1px solid color-mix(in srgb, var(--ct, var(--line)) 32%, var(--line));
  border-radius: 9px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.theme-card:hover { border-color: var(--ct, var(--acc)); transform: translateY(-2px); }
.theme-card.sel {
  border-color: var(--ct, var(--acc)); font-weight: 600;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct, var(--acc)) 45%, transparent);
}
.theme-card input { display: none; }
.theme-card-main {
  display: block; height: 42px; border-radius: 6px; margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--ct, #999) 26%, transparent);
}
.theme-card-bar { display: flex; gap: 0; height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ct, #999) 20%, transparent); }
.theme-card-bar i { flex: 1; display: block; }
.theme-card-cn { flex: 1; min-width: 0; font-size: 13px; color: var(--ct, var(--txt)); }
.theme-card-hex { font-size: 11px; color: var(--cs, var(--sub)); font-variant-numeric: tabular-nums; }
.theme-card-en { font-size: 9.5px; color: var(--cs, var(--sub)); opacity: .72; letter-spacing: .3px; word-break: break-word; }

/* v1.1.0.151：卡面「实际明暗」角标
   标注该色作为整站实色底时，界面文字用白字还是深墨字
   （判定由后端按对比度算出，与站点真实渲染一致；不暴露内部 mode 字段名）。
   角标配色统一取 --ct（= 该卡底色上的实际文字色），故深浅两态自动正确。 */
.theme-card-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.theme-card-tone {
  flex: none;
  font-size: 9.5px; line-height: 1; padding: 3px 6px; border-radius: 999px;
  letter-spacing: .3px; font-weight: 600; pointer-events: none;
  background: color-mix(in srgb, var(--ct, #999) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ct, #999) 40%, transparent);
  color: var(--ct, var(--txt));
}

/* 面板内的独立提示语（与后台角色卡一致；.field .hint 在 common.css 另有定义，此处补独立形态） */
.hint { margin-top: 8px; font-size: 11.5px; color: var(--sub); line-height: 1.6; }

/* ---- 角色卡面板主体（v1.1.0.180：折叠列表形态） ----
   结构：标题「个人资料与个性化设置」→ 三个横向折叠筐
   （① 个人资料设置 ② 个性化设置·主题色 ③ 账号安全·修改密码），
   每筐默认收起、点标题展开、底部用实心主按钮收尾。
   ⚠ v1.1.0.178 曾用「.up-sec 三段平铺 + 强调色标签按钮」形态，现已改回折叠列表，
     故 .up-sec / .up-field / .up-tag 三组样式随之下线（避免两套形态并存）。 */
/* 操作结果提示（就地显示在按钮右侧） */
.up-msg { min-height: 16px; margin-left: 8px; font-size: 11.5px; color: var(--sub); }
.up-msg.err { color: var(--acc); }

/* ============================================================
   角色面板的折叠组件与表单字段（v1.1.0.180）
   ------------------------------------------------------------
   角色弹窗改为「折叠列表」形态后，需要 .xf-collapse（折叠筐）与 .field（表单字段）。
   ⚠ 这两套类原本定义在 common.css，但**指挥调度中心模板（tech）不加载 common.css**
     （自包含设计）→ 那里折叠筐会完全没有样式。故在此**补齐一份**，
     三处宿主（后台 / 前台 / 指挥调度中心）都加载本文件 → 外观必然一致。

   ⚠ 与 common.css 的定义是**同规格的两份**，不是冲突：
     同一页面里两份同规则 CSS，后加载者覆盖前者、结果一致。
     之所以不直接从 common.css 删 —— 那里还有大量其它模块（重点单位、附件、
     部署模板等）在用 .field / .xf-collapse，删了会波及一片。
   ============================================================ */

/* ---- 折叠筐（与 common.css 同规格）---- */
.xf-collapse {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-top: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-2) 4.0%, transparent);
}
.xf-collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; cursor: pointer; user-select: none;
  font-weight: 600; font-size: 13px; color: var(--txt);
}
.xf-collapse-head:hover { background: color-mix(in srgb, var(--panel-2) 8.0%, transparent); }
.xf-collapse-head .xf-caret {
  display: inline-block; flex: none; margin-left: 6px; font-size: 11px;
  color: var(--sub); transition: transform .15s ease; transform: rotate(0deg);
}
.xf-collapse.open .xf-collapse-head .xf-caret { transform: rotate(90deg); }
.xf-collapse-body { display: none; padding: 10px 12px; border-top: 1px solid var(--line); }
.xf-collapse.open .xf-collapse-body { display: block; }

/* ---- 表单字段（与 common.css 同规格）----
   ⚠ 指挥调度中心模板（tech.css）有一句高特异性通配重置：
        body.tpl-tech, body.tpl-tech *{margin:0;padding:0;box-sizing:border-box}
      它的特异性**高于**裸的 .field → 直接写 .field 会被清零（实测 margin-bottom 变 0）。
      故这里加 body.tpl-tech 前缀把特异性提上来，保证三处宿主表现一致。 */
.field { margin-bottom: 13px; }
.field > label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--txt-2); }
.field .hint { margin-top: 4px; font-size: 11.5px; color: var(--sub); }
body.tpl-tech .field { margin-bottom: 13px; }
body.tpl-tech .field > label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--txt-2); }
body.tpl-tech .field .hint { margin-top: 4px; font-size: 11.5px; color: var(--sub); }