/* ══════════════════════════════════════════════════════════════════════
   v0892_shell.css — v0.8.9.1 · Lead 负责的外壳层样式
   （设置页整体优化 item 14 / 更新日志弹窗可读性与分类 item 13）
   ⚠ 由 index.html 在 style.css 之后、m.html 在内联 <style> 之后挂载，
     因此同名权重下本文件获胜；仍建议只用 v92- 前缀类，避免与旧规则互踩。
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 零、全站弹窗材质统一（老板：「弹窗不是应该一致风格吗」） ───────────────
   ⚠️ 这里是踩过两次的坑，写清楚：
   ① 首版：弹窗用 `--glass-strong`（= downward alpha 渐变 rgba(255,255,255,.92)→.7）+ 深色模糊遮罩
      → 头部叠两层白（发白）、正文只剩 .7（**发灰**）→ 老板：「内容部分背景和标题不一致，灰不拉几」。
   ② 二版：我把弹窗改成**纯白不透明** → 灰是没了，但老板：「**全白的高级感也没了**」。
   正解 = **均匀玻璃**：alpha 全程一致（不做渐变），保留 backdrop-filter 模糊 → 既不发灰也有玻璃质感。
   同时把这一份材质应用到**所有浮层容器**上，解决"弹窗风格不一致"。
   ⚠️ 覆盖 .modal 等全局类是有意为之：这是"材质统一"，不是样式 hack；已列入审计复检项。 */
:root {
  /* v0.8.9.1(R2 审计 audit-ui 报 N5)：原写成 `color-mix(in srgb, var(--card) 88%, transparent)`，
     桌面 `--card:#ffffff` → alpha 0.88 ✓；但**手机端 `m.html` 的 `--card` 本身是
     `rgba(255,255,255,.82)`** → 0.82 × 0.88 = **0.7216**，alpha 被**二次乘算**，
     导致手机弹层比桌面更透（跨端不一致）。
     改为以**不透明基色** `#fff` 参与 mix → 两端严格 = 0.88。
     桌面端改动前后解析值完全相同（原本 --card 就是 #ffffff），故**桌面材质零变化**。 */
  --v92-popup-glass: color-mix(in srgb, #fff 88%, transparent);
  /* v0.8.9.2：**页面/子页切换专用 token（全站唯一真源）**。
     老板发现「导航切换与页面内子页切换不一致、页面内更快」——
     根因不是时长，而是缓动：导航用 `--ease-out`（无回弹），
     子页用 `--ease-spring`（cubic-bezier(.34,1.56,.64,1)，带回弹、起步快）。
     统一到无回弹的 `--ease-out`：页面切换是"内容替换"，回弹会显得界面在抖；
     `--ease-spring` 更适合弹窗/按钮这类"元素出现"。
     导航切换、页面内 tab/子页、版本日志 iframe 一律用这一对 + 同一关键帧 pageIn。 */
  --dur-page: var(--dur-base, .2s);
  --ease-page: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.version-changelog-box, .modal, .theme-sheet, .welcome-box, .feature-compare-box,
.qr-popover, .qr-popover-new, .ach-popup, .mini-card, .msg-float-panel,
/* v0.8.9.1(R2 审计 audit-ui 报「部分达标」)：`.mview`（看图器/分镜编辑）与 `.login-box`
   原先仍是 --glass-strong 的 alpha 渐变 → 与本规则其余浮层两套材质。补进清单统一。 */
.mview, .login-box {
  background: var(--v92-popup-glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  box-shadow: 0 16px 50px rgba(16, 24, 40, .18);
}
/* 手机端底部弹层同材质（m.html 内联样式先加载，本文件靠后 → 同权重可覆盖） */
.mask .sheet, .maskfix .sheet { background: var(--v92-popup-glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* 弹窗内部各分区一律透明，整卡只有**一种**底色（复盘根因：同一卡里出现第二种底色就是"不一致"） */
.v92-vc-box .version-changelog-head,
.v92-vc-box .version-changelog-body,
.v92-vc-box .version-changelog-actions { background: transparent; }
.v92-vc-box .version-changelog-head { border-bottom: 1px solid var(--hair); }

/* ─────────────── 一、更新日志弹窗（item 13：字体不够明显 + 自动分类） ─────────────── */

.v92-vc-box {                                   /* 挂在 .version-changelog-box 上 */
  max-width: 640px;
  width: min(92vw, 640px);
  /* v0.8.9.3（老板截图：「这个弹窗的布局明显有问题」）——
     基类 style.css 的 .version-changelog-box 是 **height:80vh 定高**，本文件又把正文
     max-height 封到 52vh → 卡片固定 80vh，可内容只占 head + 52vh + actions，
     余下的 `28vh − 207px` 全落在按钮**下方**成一片纯白死区。
     1311px 高窗口实测：按钮底 y≈887、卡片底 y≈1042 → **155px 死白**。
     改为高度自适应：内容少时卡片随内容收缩，超过 80vh 才由正文内部滚动
     （max-height:80vh 由基类继续提供，此处只需解除定高）。 */
  height: auto;
}
.v92-vc-box .version-changelog-head h2 { font-size: var(--fs-6); font-weight: 800; }
.v92-vc-box .vc-version {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: .2px;
}
.v92-vc-hf {                                    /* 热修编号：浅底 + 主题色字（原为高饱和渐变块，老板嫌"色块"） */
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-left: var(--sp-2); padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-1); font-weight: 700;
  /* 小字号的主题色文字必须用加深版（--primary-ink），直接用 --primary 只有 ≈3.9:1，不达 AA */
  color: var(--primary-ink);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.v92-vc-date { margin-left: 8px; font-size: var(--fs-2); color: var(--text-light); }

/* 弹窗正文：字号/行高/颜色整体加粗加深（原来 13px 灰字，老板反馈"字体不够明显"） */
.v92-vc-body {
  /* v0.8.9.3：高度交给卡片（80vh 上限）+ flex，正文自身不再封顶 52vh —— 那正是死白来源之一 */
  flex: 1 1 auto;
  min-height: 0;                 /* flex 子项必须可压缩，否则 overflow-y 不生效 */
  overflow-y: auto;
  /* v0.8.9.3：原为 `padding: 4px 2px 2px`，用简写把基类的横向 26px 一起覆盖掉了 →
     正文左右只剩 2px，文字贴到卡片边框（老板截图实测最左 x=138，卡片左边 123），
     而头部、底部按钮用 26px，三处内边距不齐。现在只调纵向，横向与头尾统一 26px。 */
  padding: 16px 26px 18px;
  text-align: left;
}
/* ── v0.8.9.1（老板：弹窗"怎么还分色块"）──────────────────────────────
   分类标题不再用四种彩色胶囊，改成「发丝竖条 + 深色类别名 + 弱化条数」：
   全站只有一个主题强调色，靠排版层级区分，而不是靠色块。 */
.v92-vc-cat {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.v92-vc-cat:last-child { margin-bottom: 2px; }
.v92-vc-cat::before {                 /* 分组发丝竖条：主题色 45% 透明，克制 */
  content: '';
  position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--primary) 42%, transparent);
}
.v92-vc-cat-h {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 5px;
}
.v92-vc-cat-t {                       /* 类别名：深色粗体小标，不用底色 */
  font-size: var(--fs-3); font-weight: 800;
  letter-spacing: .4px;
  color: var(--text);
}
.v92-vc-n { font-size: var(--fs-1); color: var(--text-light); font-weight: 600; letter-spacing: .2px; }

.v92-vc-list {
  margin: 0; padding: 0; list-style: none;
}
.v92-vc-list > li {
  position: relative;
  padding: 4px 0 4px 13px;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
  color: var(--text);
}
.v92-vc-list > li::before {
  content: '';
  position: absolute; left: 0; top: 12px;
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
}
/* 兼容旧版纯字符串条目（无分类） */
.v92-vc-plain { margin: 0; padding-left: 20px; }
.v92-vc-plain > li {
  font-size: 14px; line-height: 1.8; font-weight: 500; color: var(--text);
}
.v92-vc-empty { font-size: 14px; color: var(--text-sub); }

@media (max-width: 560px) {
  .v92-vc-list > li { font-size: var(--fs-3); line-height: 1.7; }
  .v92-vc-body { padding: 14px 18px 16px; }   /* v0.8.9.3：原 max-height:46vh（同属定高死白），改为收窄内边距 */
}

/* 手机端公告弹层（m/teach.js 生成的 .v92-mvc-*） */
.v92-mvc-head { text-align: center; margin-bottom: var(--sp-2); }
.v92-mvc-title { font-size: var(--fs-5); font-weight: 800; margin-top: 4px; }
.v92-mvc-hf {
  display: inline-block; margin-top: 6px; padding: 3px 11px;
  border-radius: var(--r-full); font-size: var(--fs-2); font-weight: 700;
  color: var(--primary-ink);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.v92-mvc-body { margin: 0 0 14px; max-height: 46vh; overflow-y: auto; text-align: left; }
.v92-mvc-cat { margin-bottom: 12px; }
.v92-mvc-list { margin: 0; padding-left: 18px; }
.v92-mvc-list > li {
  font-size: var(--fs-3); line-height: 1.75; font-weight: 500;
  color: var(--text); margin-bottom: 2px;
}

/* ─────────────── 二、设置页整体优化（item 14） ─────────────── */

/* 1) 页签：给激活项一条主题色下划线，比单纯变色更清楚 */
.st-tabs .tab {
  position: relative;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.st-tabs .tab.active::after {
  content: '';
  position: absolute; left: 50%; bottom: 2px;
  width: 18px; height: 2.5px; border-radius: 2px;
  transform: translateX(-50%);
  background: var(--primary);
}

/* 2) 卡片：统一内边距与标题节奏，标题左侧加主题色竖条 */
.mfx-body .st-frame { padding: var(--sp-4) var(--sp-5); }
.mfx-body .st-frame + .st-frame { margin-top: var(--sp-4); }
.mfx-body .st-frame > .card-title:first-child {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-left: 10px; position: relative;
  font-size: var(--fs-3); font-weight: 800;
}
.mfx-body .st-frame > .card-title:first-child::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 14px; border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 60%, #fff), var(--primary));
}

/* 3) 设置行：统一行距与分隔线，hover 有轻微反馈 */
.mfx-body .settings-item {
  padding: 12px 2px;
  border-radius: var(--r-s);
  transition: background-color var(--dur-fast) ease;
}
.mfx-body .settings-item:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.mfx-body .settings-item > div:first-child > div > b { font-size: var(--fs-3); font-weight: 700; }
.mfx-body .settings-item .si-desc {
  margin-top: 3px;
  font-size: var(--fs-2);
  line-height: 1.65;
  color: var(--text-sub);
}
.mfx-body .st-frame .field > label { font-weight: 700; }
.mfx-body .st-frame .hint { line-height: 1.7; }

/* 4) 窄屏（平板竖屏 / 手机浏览器开桌面端）：设置行改上下堆叠，按钮整行不挤压 */
@media (max-width: 720px) {
  .mfx-body .st-frame { padding: 15px 14px; }
  .mfx-body .settings-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .mfx-body .settings-item > div:last-child { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .mfx-body .settings-item .btn { flex: 1 1 auto; min-width: 104px; }
}

/* ─────────────── 三、导航栏「版本日志」入口高亮（item 12 后它成了唯一入口） ─────────────── */
.nav-item[data-module="changelog"] .nav-label { letter-spacing: .2px; }

/* ─────────────── 四、共创者名单（item 15：头像走用户自选 + 整行可点开名片） ─────────────── */
.co-creator-row[data-upuid] {
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.co-creator-row[data-upuid]:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.co-creator-row[data-upuid]:hover .co-creator-av {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.co-creator-av {
  transition: border-color var(--dur-fast) ease;
  font-size: var(--fs-7);
  line-height: 1;
}

/* ─────────────── 五、全局小修（Lead 收口） ─────────────── */

/* v0.8.9.2（老板：「必须在不同屏幕不同窗口下都是一个页面显示完整，而且卡片比例基本不变」）——
   个人页改为**固定设计画布 + 等比缩放**（见 js/v0892_fit.js）：
   无论窗口多大，内部按 1400×760 排版（比例天然恒定），再整体 scale 到恰好塞进可用区。
   这里只给容器定位与缩放后的抗锯齿提示。 */
#content { position: relative; }
.profile-layout[data-v92fit] {
  will-change: transform;
  backface-visibility: hidden;      /* 缩放后文字更清晰 */
}

/* v0.8.9.1（老板：「胶囊内换行丑不丑」）——
   身份选择胶囊（摄影/模特/化妆师/灯光师/后勤/后期/跟焦员/道具）里"化妆师"被折成两行。
   胶囊是**一个语义单元**，永远不该内部折行；容器是 flex-wrap，整颗换行才对。
   这条同时管住全站所有 `.chip`（筛选胶囊同理）。 */
.chip { white-space: nowrap; }
.chips > .chip { flex: 0 0 auto; }
/* 手机端底部弹层里的身份胶囊同理 */
.mask .chip, .maskfix .chip { white-space: nowrap; }

/* v0.8.9.2（老板：「版本日志不做动画？」）—— 更正（audit-ui L8 实测）：
   版本日志 iframe **已经在跑 `pageSwitch`**（与其它模块同一套 name+duration+timing）；
   我先前又叠了一条 `pageIn` → **同一个元素上跑两个动画**，正是"不一致"。
   故此处**撤回**，只保留 reduced-motion 兜底；动画由统一的那一套负责。 */
@media (prefers-reduced-motion: reduce) {
  .clg-frame { animation: none; }
}

.co-creator-meta { line-height: 1.6; }

/* v0.8.9.8（V1-11）：应用内「动效精简」开关 —— 与 @media (prefers-reduced-motion) 同口径。
   本文件桌面端与手机端（m.html）都加载，故两端共用；
   开关态由 js/app.js（桌面）与 js/m/me.js（手机）按 localStorage.wb_reduce_motion 给 <html>/<body> 挂 .reduce-motion。
   注意：`.xxx.closing`（0,2,0）比通配规则（0,1,1）更具体，必须单独再压一次，否则退场仍跑满。 */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .modal-mask.closing, html.reduce-motion .modal-mask.closing .modal,
html.reduce-motion .login-mask.closing, html.reduce-motion .theme-sheet-mask.closing,
html.reduce-motion .theme-sheet-mask.closing .theme-sheet, html.reduce-motion .toast.closing,
html.reduce-motion .msg-float-panel.closing, html.reduce-motion .mask.closing,
html.reduce-motion .mask.closing .sheet, html.reduce-motion .maskfix.closing,
html.reduce-motion .maskfix.closing .sheet {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
}