/* ============================================================
   壁纸站 · 样式（v2 参照 haowallpaper.com/homeView 的设计语言）
   ------------------------------------------------------------
   设计参数全部按参考站实测值落地：
     · 根字号 54px（参考站在 1280~2560 视口下均为 54px）
     · 卡片 21.5% 宽 / aspect-ratio 1:0.7 / 圆角 15px
       background rgba(255,255,255,.10) + 上·左 1px 亮边（玻璃质感）
       box-shadow 20px 20px 50px rgba(0,0,0,.5)
     · 入场 animation: slideTop（从右下 10%/50% 缩小浮现）
     · hover：图片放大 + 卡片 3D 透视倾斜 + 白色信息面板自下滑入
     · 顶栏 = 毛玻璃胶囊 + 白色滑块，transition 用带过冲的
       cubic-bezier(.98,-.65,.265,1.55)，这就是那个「弹一下」的手感
     · 底部 = 悬浮筛选胶囊 + 分页
   ============================================================ */

/* ---------------- 设计变量 ---------------- */
:root {
  --rd: 54px;

  /* ============ 内容宽度：全站唯一一把尺子 ============
     2026-09-29 老板定：内容固定 1440px，超过 1440 的屏两边留白、窄于 1440 按满宽自适应
     （统一写成 min(100%, --cw)）。
     ⚠️ 用 px 不用 rem —— 根字号 54px 下 100rem = 5400px 等于没限制，
        这就是原来「宽屏铺满」的根因（详情页 09-26、软件页 09-28 先后栽过同一件事）。 */
  --cw: 1440px;

  /* ============ 配色 ============
     下面全部是**黑夜模式**的值（默认）。白天模式集中在文件末尾覆盖
     （html[data-theme="light"]）—— 这里改一个颜色，两个主题都要核一遍。 */
  --bg-0: #0a0a0c;
  --bg-1: #131316;
  --bg-2: #1b1b20;
  /* 背景那几团光斑 + 底色渐变（原来写死在 .bg 里，白天模式整组换掉） */
  --bg-glow:
    radial-gradient(1100px 620px at 18% -6%, #2c2c34 0%, transparent 62%),
    radial-gradient(900px 520px at 86% 4%, #232329 0%, transparent 58%),
    radial-gradient(800px 700px at 50% 120%, #1a1a20 0%, transparent 60%);
  --bg-grad: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 46%, #070709 100%);
  --noise: .035;                        /* 背景噪点强度，白天模式归零 */

  --glass: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .26);
  --card-bg: rgba(255, 255, 255, .10);
  --card-edge: rgba(255, 255, 255, .50);
  /* hover 信息面板 / 卡片底条：**黑玻璃**（2026-09-27 老板：「鼠标移动上去不好看，
     要么弄成黑色带透明的」—— 原来是白玻璃 rgba(255,255,255,.62)，hover 一上去整张壁纸
     被"洗白"，既看不清图也压掉了标签。改黑之后壁纸透出来、标签反而更跳。
     ⚠️ 这两个变量只被 .info / .card-bottom 用，改这里等于同时改这两处。 */
  --card-info: rgba(10, 10, 14, .64);
  --card-bar: rgba(10, 10, 14, .74);

  --text: #fff;
  --text-2: rgba(255, 255, 255, .68);
  --text-3: rgba(255, 255, 255, .42);
  --text-dark: #2c3e50;
  --text-dark-2: #5d5d5d;

  --pill: #f5f5f5;
  --accent: #6f8bbe;
  --line: rgba(255, 255, 255, .12);
  --line-hi: rgba(255, 255, 255, .28);  /* 虚线边（「更多分类」按钮） */
  --glass-2: rgba(255, 255, 255, .07);  /* 分类导航条那一层底 */
  --glass-3: rgba(255, 255, 255, .06);  /* 分类胶囊那一层底 */
  --sb: rgba(255, 255, 255, .16);       /* 滚动条滑块 */
  --sb-hi: rgba(255, 255, 255, .28);
  --shadow-card: 20px 20px 50px rgba(0, 0, 0, .5);   /* 卡片投影 */
  --shadow-bar: 0 6px 24px rgba(0, 0, 0, .28);       /* 顶栏胶囊投影 */
  --shadow-pill: 0 0 10px rgba(255, 255, 255, .35);  /* 选中滑块的光晕 */
  --shadow-card-hi: 24px 24px 60px rgba(0, 0, 0, .62); /* 卡片 hover 抬起 */
  --panel: rgba(18, 18, 22, .68);         /* 悬浮面板底：底部筛选条 / 右上圆钮 */
  --panel-solid: rgba(20, 20, 26, .94);   /* 更实的浮层：下拉面板 / 贴底推广条 */
  --input-bg: rgba(0, 0, 0, .32);         /* 搜索框内部 */
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, .45);      /* 悬浮面板投影 */
  /* 「次要按钮」的底。
     ★ 2026-09-29 加这个变量是因为：推广条上「看看软件」那个按钮原来用 --glass 当底、
       字写死 #fff。黑夜模式没问题，白天模式 --glass 变成浅灰 #f1f3f7、
       而推广条底是白玻璃 —— **浅灰底上白字**，老板截图里那行字基本看不见。
       按钮底和「玻璃叠层」不是一回事：按钮要跟**自己的容器**拉开差距，
       所以单独一个变量，白天给一档更明显的浅灰蓝。 */
  --btn-soft: rgba(255, 255, 255, .16);

  --r-card: 15px;
  --r-pill: 50px;

  /* 详情页的内容宽度上限 = **全站那把尺子 `--cw`（1440px）**。
     历史（别照着写）：
       · 最早写 100rem —— 根字号 54px，100rem = 5400px，2560 宽屏上**等于没限制**，
         手机框和右侧信息卡被拉得老远；
       · 2026-09-26 老板要求「宽屏下别铺满」⇒ 改成 min(上限, 1400px)；
       · 2026-09-29 全站统一尺子 ⇒ 并进 --cw（1440px），不再单独一个数。
     现在：1440 屏内容 1440 居中、往上不再变宽；<1440 本来就更窄，这个上限不生效。
     （验收脚本靠一个探针 div 现读这个解析值，所以以后改数不用再去改脚本。） */
  --cw-detail: var(--cw);

  /* 内容页（桌面软件页）的宽度上限。
     ⚠️ 原来是 60rem = 3240px —— 根字号 54px，比任何屏幕都宽，等于**没限制**：
        1920 / 2560 的屏上软件截图被拉成一整面墙，右边那列文字被推到屏幕最边上。
     老板 2026-09-28：「宽度拉宽到一定程度就固定两边留空背景就行，不要两边铺满了」。
     改成 min(上限, 1600px)：1600 以下按满宽，往上就定住、两边留背景。
     2026-09-29 再改：并进全站那把尺子 —— 直接等于 --cw（1440px）。 */
  --cw-page: var(--cw);

  /* 展示台上下留白（px，不跟根字号走 —— 见 .stage 的说明）。
     换壳排 / 填充排是 px 固定尺寸，这一段是给它们让位的。
     ★ 2026-09-29 第七波：58 → 84。换壳排这轮从「一行：图标 + 屏名」（30px 高）
       变成「两行：图标 + 屏名 + 会导出多少像素」（宽屏实测 52.6px 高）。
       旧的 58px 是照 50px 算的 ⇒ 新按钮排底部 12px + 52.6px = 64.6px，
       **会压住设备壳顶边**。84px 是实量出来的：72px 时只剩 2.4px 余量（壳体顶边
       比理论位置还低 5px），涨到 84 才有 14px 的干净间隙。
     ⚠️ 右侧信息栏的 margin-top 也引用它，靠它把顶边对齐到设备壳的顶边 ——
        改这一个数两边一起动，别只改一边。 */
  --stage-pad: 84px;

  --ease-spring: cubic-bezier(.98, -.65, .265, 1.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 截图 / 验收专用：网址带 ?noanim 时把所有过渡与动画关掉。
   ★ 无头截图跑在虚拟时间里，CSS 过渡会「冻」在**起始帧** ——
     元素明明已经切好了（类名都对），截出来却还是「没开始动」的样子，
     看着像功能坏了，其实只是动画没播完。（头像裁剪面板、顶栏滑块都踩过） */
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  transition: none !important;
  animation: none !important;
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

html { font-size: var(--rd); }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  background: var(--bg-0);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  /* 图片防盗（2026-10-17）：禁原生拖拽影身（拖去 Eagle/PS 等素材软件的主通道）、
     禁选中（防框选拖动）、禁移动端长按呼出「存储图像」；事件层拦截见 theme.js bindProtect */
img, video { display: block; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-hi); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 背景层 ---------------- */
.bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* 光斑与底色渐变都走变量 —— 白天模式整组换成纯白 */
  background: var(--bg-glow), var(--bg-grad);
}
.bg::after {              /* 细噪点，避免大面积渐变出现色带 */
  content: ''; position: absolute; inset: 0; opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 底部留出贴底推广条的高度，否则滚到底时推广条会压住分页 */
.shell { min-height: 100vh; padding-bottom: calc(var(--promo-h) + .3rem); }

/* ------------------------------------------------------------
   ★ 2026-09-29 老板：「列表根据高度排满，然后把页码放在最底下。
      如果没有铺满，页码也是在最底下。」
   —— 列表页整页改成「至少一屏高的竖排」，余量全部灌进「网格 ↔ 页码」之间：
      · .shell 本来就是 min-height:100vh，加上 flex 竖排之后，
        页面再短也是**满一屏**，不会出现「下半屏一片黑」；
      · .page-main 的 margin-top:auto 会把余量全吃掉 ⇒ 页码被顶到最底，
        正好落在 .shell 给推广条预留的那条空白带的上沿；
      · 列表长到超过一屏时余量是 0，margin-top:auto 自动失效 ——
        跟改之前的表现完全一样，不会把内容顶出滚动条。
   ⚠️ 只挂列表页（data-page="list"）：头像页也有一个 .page-main，
      那边的分页是紧跟着裁剪台往下走的，不能跟着沉底。
   ⚠️ WordPress 版的页脚（.wpl-footer 那行版权 + 两个文档链接）排在 .page-main 之后，
      跟页码是同一个「底块」—— 余量给到 .page-main，页脚自然一起落到底，
      不用再单独推它（静态站没有这个元素，也不受影响）。
   ⚠️⚠️ .grid 那句 `width:100%` **不能省**：flex 里子项只要沾了跨轴的
      `margin:auto`（网格和页脚都是 `margin:0 auto` 居中），就**不再拉伸**、
      按内容收缩 —— 实测卡片当场塌成 3×2 px、整片网格缩成中间一小撮
      （2026-09-29 上线后自查抓到，已补进测布局.py 的硬判据）。 */
body[data-page="list"] .shell { display: flex; flex-direction: column; }
body[data-page="list"] .grid { width: 100%; }
body[data-page="list"] .page-main { margin-top: auto; }

/* ============================================================
   顶栏：常规通栏 head（2026-10-13 老板定）
   ------------------------------------------------------------
   老板原话：「把pc端顶栏做成常规的head 带高度条的那种简约质感的，
   左边是logo标题 右边是搜索 日间模式 个人中心头像」。
   ⇒ 悬浮胶囊（logo 一颗、tab 胶囊居中飘着）退场，改成常规网站头部：
     · .topbar = 通栏横条：半透明底 + 毛玻璃 + 一条下边线，吸顶；
     · .tb-in  = 条内那把 1440 尺子（logo / tabs / navend 一行排开，
       tab 不再居中、就站在 logo 旁边 —— 常规站的排法）。
   ※ 分类导航条 2026-10-13 下午起**独立**出头部：头部只管吸顶，
     分类导航在内容区顶上跟着滚走，各是各的模块（见下面 .catnav 段）。
   底色用 --panel（黑夜深玻璃 / 白天白玻璃），两个主题自动成立。
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
/* 条内 1440 容器：左右 padding 跟 .grid 一致 ⇒ logo 左缘与首卡左缘对齐 */
.tb-in {
  max-width: var(--cw);
  margin: 0 auto;
  height: 1.15rem;
  display: flex; align-items: center;
  gap: .3rem;
  padding: 0 .3rem;
}

.logo {
  display: flex; align-items: center; gap: .12rem;
  flex: none;
}
.logo i {
  width: .56rem; height: .56rem; border-radius: 50%;
  display: block; flex: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .6), transparent 46%),
    conic-gradient(from 210deg, #7ea0e8, #c79ae8, #6fbcd6, #7ea0e8);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .32), 0 0 16px rgba(150, 175, 235, .55);
}
/* 手机档把这个圆标换成「首页」房子钮（SVG 在模板的 <i> 里，桌面不显示） */
.logo i svg { display: none; }
.logo span { font-size: .28rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

/* tab 导航：直接站在条上（常规 head 的排法），不再包胶囊。
   高度钉 .68rem 是给白色滑块当定位基准：滑块 top:0、高 .68rem，
   整排靠 .tb-in 的 align-items:center 在条内垂直居中。 */
.tabs {
  position: relative;
  display: flex; align-items: center;
  gap: .2rem;                          /* 2026-10-13 老板：条目间隔拉开一点，别挨太近 */
  height: .68rem;
  /* 不能写 flex:1 —— 按内容定宽，别把每个 tab 压扁（滑块只剩 31px 宽） */
  flex: none;
  margin-left: .06rem;
}

.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 2.1rem;                       /* 2026-10-13 老板：每个导航等宽（最宽的「头像制作」绰绰有余） */
  height: .68rem;
  padding: 0;
  border-radius: 1rem;
  font-size: .28rem; font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color .35s;
}
.tab:hover { color: var(--text); }
/* 选中项自带白底（参考站也是这样两层：active 底色 + 会滑动的那个白块）。
   这样就算滑块量不到宽度，高亮也不会丢。 */
.tab.active {
  /* ★ 2026-10-16 老板钦点：导航选中态 = 「保存资料」那颗金橙渐变胶囊（两主题同款）。
     文字转白（金橙底上白字才够跳），背景与滑块同渐变（滑块量不到宽时兜底不丢高亮）。 */
  color: #fff;
  background: linear-gradient(135deg, #f7b733 0%, #ee8f1a 58%, #e07c0a 100%);
  transition: color .35s, background-color .4s;
}

/* 金橙滑块：带过冲的弹性曲线，这就是参考站「弹一下」的手感
   （top:0 —— .tabs 自身高 .68rem，滑块贴着它顶端走，整排在条内居中） */
.slider {
  position: absolute; z-index: 0; top: 0; left: 0;
  height: .68rem; width: 0;
  background: linear-gradient(135deg, #f7b733 0%, #ee8f1a 58%, #e07c0a 100%);
  border-radius: 1rem;
  box-shadow: 0 3px 14px rgba(238, 143, 26, .40);
  transition: left .9s var(--ease-spring), width .9s var(--ease-spring);
}

/* 右侧功能钮区：常规 head 的「搜索 / 日夜 / 个人」全在这，
   margin-left:auto 把整组推到条的最右端 */
.navend { display: flex; align-items: center; gap: .12rem; padding-right: .08rem; flex: none; margin-left: auto; }

.ricon {
  width: .56rem; height: .56rem; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text); flex: none;
  transition: background-color .3s, color .3s;
}
.ricon:hover { background: var(--glass-hi); }
.ricon svg { width: .3rem; height: .3rem; }

/* 「回到顶部」小浮钮：2026-10-13 老板定从导航条搬出来 ——
   浮在**内容列（--cw 那把尺子）右下角**，滚动超过一屏头才出现。
   right 用 max()：窗口比内容列宽时贴内容列右缘内缩 .3rem，
   窗口窄于内容列时退到离屏幕右缘 .3rem，永远看得见点得着。 */
.totop-float {
  position: fixed; z-index: 60;
  right: max(calc((100vw - var(--cw)) / 2 + .3rem), .3rem);
  bottom: .5rem;
  width: .56rem; height: .56rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(.2rem);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  transition: opacity .3s, transform .3s, background-color .3s, color .3s;
}
.totop-float.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.totop-float:hover { background: var(--glass-hi); color: var(--text); }
.totop-float svg { width: .28rem; height: .28rem; }
/* 贴底推广条还在时，浮钮坐在它上沿，别压到推广内容上 */
body:not(.promo-off) .totop-float { bottom: calc(var(--promo-h) + .4rem); }

/* ---------------- tab 图标（源站每个 tab 都是「图标 + 文字」） ---------------- */
.tab .ti { display: inline-flex; flex: none; }
.tab .ti svg { width: .3rem; height: .3rem; }
.tab.active .ti { opacity: 1; }

/* 软件 tab 的小角标：绝对定位，**不占宽度**（否则会把胶囊撑长、滑块跟着错） */
.tab .tbadge {
  position: absolute; top: -.05rem; right: -.04rem;
  min-width: .26rem; height: .26rem;
  padding: 0 .07rem;
  border-radius: 50px;
  display: grid; place-items: center;
  font-size: .16rem; font-weight: 600; line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #7ea0e8, #b98ad6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  pointer-events: none;
}

/* ---------------- 分类导航条 ----------------
   2026-10-13 下午老板定：它是**独立的导航模块**，不在头部里 ——
   头部（topbar）自己吸顶，这条导航跟着内容一起滚走，各是各的。
   原来那颗玻璃胶囊底（--glass-2 + 边框 + 圆角）早已撤掉，
   透明轻装；条目、筛选组、展开逻辑全部照旧。
   分类条目由清单决定，多建几个分类文件夹它就自己长出来。 */
.catnav {
  width: 100%;
  max-width: var(--cw);
  margin: .14rem auto 0;              /* 独立模块：与吸顶头部之间留一口气 */
  min-width: 0;
  position: relative; z-index: 90;    /* 独立出去后自带层级：筛选下拉面板要压过下面的卡片
                                         （以前靠吸顶头部的 z-100 语境，现在得自己带） */
  display: flex; align-items: center; gap: .1rem;
  flex-wrap: wrap;                    /* 有二级细分时要能换到第二行 */
  min-height: .62rem;
  padding: 0 .3rem .14rem;            /* 左右与 .tb-in 同值 ⇒ 「分类」与 logo 对齐 */
  background: transparent;
}

/* 换行顺序（DOM 里 cn-sub 排在 cn-more 前面，不管它的话「更多分类」会被挤到二级行下面）：
   第一行 = 分类 + 一级胶囊 + 更多分类 + ｜ + 筛选组；第二行 = 二级细分。
   ★ 筛选组（.cn-div 竖线 + .filterbar）排在二级细分**前面** ——
     二级细分是 flex-basis:100% 的整行，排在它后面的话筛选组会被顶到第三行去。
     （这两条的 order 写在下面 .filterbar 那段里，就近看着好改。） */
.catnav .cn-lead { order: 0; }
.catnav .cn-strip { order: 1; }
.catnav .cn-more { order: 2; }
.catnav .cn-sub { order: 5; }

.cn-lead {
  display: flex; align-items: center; gap: .06rem;
  flex: none;
  padding-left: .1rem;
  font-size: .2rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-3);
}
.cn-lead i { display: inline-flex; }
.cn-lead svg { width: .24rem; height: .24rem; }

/* 横排、可横滑；滚动条藏掉（分类再多也不难看） */
.cn-strip {
  display: flex; align-items: center; gap: .06rem;
  min-width: 0; flex: 0 1 auto;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .04rem 0;
}
.cn-strip::-webkit-scrollbar { display: none; }

.cn-item {
  flex: none;
  display: inline-flex; align-items: center; gap: .05rem;
  height: .42rem;
  padding: 0 .16rem;
  border-radius: 50px;
  border: 1px solid transparent;
  background: var(--glass-3);
  font-family: inherit;
  font-size: .22rem; color: var(--text-2);
  white-space: nowrap; cursor: pointer;
  transition: background-color .3s, color .3s, transform .3s;
}
.cn-item b { font-size: .17rem; font-weight: 500; opacity: .55; transition: opacity .3s; }
.cn-item:hover { background: var(--glass-hi); color: var(--text); transform: translateY(-1px); }
.cn-item:hover b { opacity: .8; }
/* 当前分类：白底深字 —— 和顶栏 tab 的选中态是同一套语言 */
/* ★ 2026-10-16 选中态统一金口音（两主题）：金玻璃底 + 亮金字 —— 跟金橙导航一个体系 */
.cn-item.on { background: rgba(240, 167, 46, .16); color: #f5cd8a; font-weight: 600; text-shadow: 0 1px 2px rgba(120, 60, 0, .25); }
.cn-item.on b { opacity: .5; }

.cn-more {
  flex: none;
  display: inline-flex; align-items: center; gap: .04rem;
  height: .42rem; padding: 0 .16rem;
  border-radius: 50px;
  border: 1px dashed var(--line-hi);
  background: transparent;
  font-family: inherit; font-size: .2rem; color: var(--text-2);
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.cn-more:hover { background: var(--glass-hi); color: var(--text); border-color: transparent; }
/* ★ 2026-09-29 第七波抓到的真 bug：**[hidden] 被上面那句 display: inline-flex 顶掉了**。
   浏览器默认样式里那条 `[hidden] { display: none }` 属于「UA 样式表」，
   优先级低于作者写的任何 display —— 所以只要这里显式写了 display，
   `more.hidden = !need` 就完全失效，按钮**永远挂在那儿**。
   （症状：分类只有 6 个、按 CN_INLINE 算明明不该出现「更多分类」，它还是显示。）
   第七波分类从 5 个涨到 6~7 个之后才露馅 —— 以前它也一直在，只是没人盯它。 */
.cn-more[hidden] { display: none; }
.cn-more .caret { width: .18rem; height: .18rem; transition: transform .35s; }
.cn-more.on .caret { transform: rotate(180deg); }

/* 展开态：分类铺成多行，一次看全（2026-10-13 起无胶囊壳，只留布局行为） */
.catnav.expanded {
  flex-wrap: wrap;
  height: auto;
  padding: .1rem .3rem .14rem;
}
.catnav.expanded .cn-lead { order: 1; }
.catnav.expanded .cn-more { order: 2; margin-left: auto; margin-right: .04rem; }
.catnav.expanded .cn-strip {
  order: 3;
  flex: 0 0 100%;
  flex-wrap: wrap;
  overflow: visible;
  justify-content: center;
}
/* 展开时：分类铺成多行 → 筛选组一行 → 二级行，都在最下面 */
.catnav.expanded .cn-div { order: 4; }
.catnav.expanded .filterbar { order: 5; }
.catnav.expanded .cn-sub { order: 6; }

/* ---------------- 二级分类（细分）----------------
   老板 2026-09-29：「风景下面还有细分，比如山川湖泊 / 海浪沙滩 / 雨雾风雪 …」。
   规则跟一级**完全一样** —— 在本地分类文件夹里再建一层子文件夹、跑一次发布工具，
   这行胶囊就自己长出来，不需要改任何代码。
   只在「选中了某个一级分类、且它确实有细分」时才出现 —— 二级是跟着一级走的。 */
.cn-sub {
  flex: 0 0 100%;
  display: flex; align-items: center; gap: .06rem;
  min-width: 0;
  margin-top: .06rem;
  padding: .08rem 0 0 .1rem;
  border-top: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cn-sub::-webkit-scrollbar { display: none; }
.cn-sub[hidden] { display: none; }
.cn-sub .cn-lead { font-size: .18rem; }

/* 二级胶囊比一级小一号；选中态用**描边**而不是实底 ——
   这样一级（实底白胶囊）和二级（描边）一眼分得清，不会两个都亮。 */
.cn-item.sub {
  height: .36rem;
  padding: 0 .13rem;
  font-size: .2rem;
}
.cn-item.sub.on {
  background: transparent;
  color: var(--text);
  border-color: var(--accent);
  font-weight: 600;
}
.cn-item.sub.on b { opacity: .5; }

/* 小屏：分类条要**按像素**可用。
   注意本站小屏把根字号压到 26px（为了塞下顶栏），
   所以这里不能沿用大屏的 rem 数值 —— 会比大屏还矮。
   用「更大的 rem」换回真实像素：条目 ≈ 24px 高、字 ≈ 11px，手指点得到。 */
@media (max-width: 800px) {
  /* 高度不能再写死：有二级细分时要长出第二行，写死 1.3rem 会把二级行挤出去 */
  .catnav { height: auto; min-height: 1.3rem; padding: .06rem .2rem; }
  .cn-lead { display: none; }
  .cn-item { height: .92rem; padding: 0 .28rem; font-size: .42rem; }
  .cn-item b { display: none; }
  .cn-more { height: .92rem; padding: 0 .28rem; font-size: .4rem; }
  /* 二级行：手机上比一级再小一号，并且自己一行横滑 */
  .cn-item.sub { height: .72rem; padding: 0 .24rem; font-size: .38rem; }
  .cn-sub { margin-top: .06rem; padding-top: .1rem; }

  /* ── 2026-10-12 老板定：手机端顶部轻量化 ─────────────────
     · 左上角圆标从渐变球换成明确的「首页」房子钮（品牌名手机上本来就藏着）；
     · 分类导航那个大玻璃框整个去壳 —— 框住两行胶囊显得又重又挤，
       手机上让它就是两行轻快的胶囊（筛选下拉面板的锚点不受影响，
       .catnav 的 position:relative 在上面保留着）。 */
  .logo i {
    background: var(--glass-3, rgba(255, 255, 255, .09));
    box-shadow: none;
    display: grid; place-items: center;
  }
  .logo i svg { display: block; width: .3rem; height: .3rem; }
  .catnav,
  .catnav:hover {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* 搜索：点图标展开 */
.searchwrap { position: relative; display: flex; align-items: center; }
.searchbox {
  width: 0; opacity: 0; overflow: hidden;
  display: flex; align-items: center;
  transition: width .45s var(--ease-spring), opacity .3s;
}
.searchwrap.open .searchbox { width: 2.9rem; opacity: 1; }
.searchbox input {
  width: 100%; height: .56rem;
  border-radius: 50px; border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--text); font-size: .24rem;
  padding: 0 .5rem 0 .22rem; outline: none;
}
.searchbox input::placeholder { color: var(--text-3); }
.searchbox .clr {
  position: absolute; right: .14rem; top: 50%; transform: translateY(-50%);
  width: .34rem; height: .34rem; border-radius: 50%;
  display: none; place-items: center;
  color: var(--text-2); font-size: .2rem;
}
.searchbox .clr:hover { background: var(--glass-hi); color: var(--text); }

/* ============================================================
   卡片网格
   ============================================================ */
.grid {
  /* ★ 这里从「flex + 算宽度」换成了 grid（2026-09-29）。
     原来那套是每个卡片 width: calc((100% - (列-1)*间距) / 列)，
     算出来**恰好等于一行**，亚像素误差会让第 5 张掉到第二行 ——
     表现就是「明明设了 5 列，页面上只有 4 列」（当时量出来卡片 323.8px、一屏 4 个）。
     grid 的 1fr 是布局引擎自己均分，不存在这个边界问题。 */
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* 一屏几个（老板 2026-09-30 定：改回 4 个 —— 5 个有点挤） */
  --cols: 4;
  --gap: 20px;
  gap: var(--gap);
  padding: .28rem .3rem .2rem;
  /* 内容宽度固定在 1440（超过就两边留白）；窄屏满宽自适应 */
  max-width: min(100%, var(--cw));
  margin: 0 auto;
}
/* 「没有符合条件的壁纸」那种整块提示要横跨所有列 */
.grid > .empty { grid-column: 1 / -1; }

/* 预留空位（.card.slot 虚线格子）已按老板 2026-09-29 的要求**整个撤掉**：
   每页 = 列 × 按屏高算出的行（4 列 × N 行），最后一行永远是满的，不再补空格子。
   （他说「底下空那么多干啥」—— 空框比空屏更难看。） */

/* 列数档位：默认 4 列，往下逐档降 —— 不然小屏上卡片会被压成细条 */
@media (max-width: 1200px) { .grid { --cols: 3; --gap: 16px; } }
@media (max-width: 940px)  { .grid { --gap: 14px; } }
@media (max-width: 640px)  { .grid { --cols: 2; --gap: 12px; } }

/* ---------------- 卡片比例 ----------------
   ★ 2026-09-29 第七波：两个栏目合并成一个「壁纸」、横竖混排 ⇒
     原来那套「同一个页面切栏目、靠 body 上的 data-device 换卡片比例」
     （电脑壁纸 1:0.7 横卡 / 手机壁纸 9:16 立卡）整个退场。
     现在 body 上的 data-device 恒为 all，不再影响任何外观。

   ⚠️ 混排要不要改成方形？**没改**。理由：
     老板刚认可过「五列简约卡片」这个观感；方形会把卡片撑高一倍、
     一屏从四行掉到两行（他之前明确说过「放两行有点少」）。
     竖图在横卡里被 cover 裁掉上下，是缩略图的常态 ——
     点进详情页本来就能按任意比例预览和下载，那才是这次真正要做的事。
     哪天真要改，只动下面 .card 的 aspect-ratio 一个数。 */

.card {
  position: relative;
  /* 宽度不用自己算 —— .grid 是 grid 布局，卡片会被自动拉伸填满列宽 */
  width: auto;
  aspect-ratio: 1 / .7;
  border-radius: var(--r-card);
  background: var(--card-bg);
  /* ★ 2026-09-29 老板：「不要右上描边」——原来是 border-top + border-left 两道 1px 亮边
     （模仿参考站的玻璃高光），去掉之后卡片靠投影和圆角定边界，就是「简约卡片」。
     想找回玻璃感的那道边，把这两行加回来即可：
       border-top: 1px solid var(--card-edge); border-left: 1px solid var(--card-edge); */
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: slideTop .55s cubic-bezier(.2, .7, .3, 1) both;
  will-change: transform;
}
/* 入场结束后交棒给 3D 倾斜：animation 去掉不会跳变（动画终态就是 transform:none） */
.card.ready { animation: none; transition: transform .22s ease-out, box-shadow .3s; }
/* hover：只轻微抬起 + 投影加深 —— 3D 倾斜和图片放大都去掉了（老板 2026-09-29「简约」） */
.card.ready:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hi); }

@keyframes slideTop {
  0% { opacity: 0; transform: translate(10%, 50%) scale(.8); }
  to { opacity: 1; transform: translate(0); }
}

.card .shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  /* 原站这里是「常态推近 1.1 倍、hover 再推到 1.15 倍」那套。
     老板 2026-09-29 要简约 ⇒ 常态不放大（object-fit: cover 本来就会裁），hover 也不放大。
     想找回那个「推近」的手感：把下面那行 transform 从 none 换回放大倍数，
     并加回一条 .card:hover .shot 的放大规则即可。
     （这行注释刻意**不写死那两个倍数** —— 上线复验拿它当「已删」的哨兵，
      注释里出现同样的字符串会把复验搞成假红。） */
  transform: none;
  transition: opacity .25s ease-in;
  background: #7f7f7f1f;
}

/* 视频角标 */
.card .vtag {
  position: absolute; top: .12rem; left: .12rem; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  height: .38rem; padding: 0 .16rem;
  border-radius: 50px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .18rem; color: #fff;
}
.card .vtag svg { width: .2rem; height: .2rem; }

/* 收藏星标（卡片右上角，与左上角的「动态」角标左右对称）
   ★ 这里原来**一条样式都没有** —— 收藏按钮的 HTML 早就渲染出来了，
     但没尺寸、没定位、没底色，等于隐身。个人中心还写着「点卡片右上角的
     星标可以取消收藏」，用户根本找不到那个星标。
   ★ z-index 必须压过 .info(3)：面板 hover 浮起来时星标要露在最上面，
     否则一 hover 收藏按钮就被盖住，变成「不 hover 才点得到」。
   ★ 位置钉在右上角：个人中心那句提示语是按这个位置写的。 */
.card .favbtn {
  position: absolute; top: .12rem; right: .12rem; z-index: 4;
  width: .46rem; height: .46rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: transform .25s var(--ease-spring), background-color .25s, color .25s;
}
.card .favbtn svg { width: .26rem; height: .26rem; pointer-events: none; }
.card .favbtn:hover { transform: scale(1.14); background: rgba(0, 0, 0, .74); }
/* 已收藏：描边星变实心金（svg 上写的是 fill="none"，CSS 的 fill 能盖掉属性） */
.card .favbtn.on { color: #f0d9a8; }
.card .favbtn.on svg { fill: currentColor; }

/* hover 信息面板：**黑玻璃**，自下滑入
   （原来是白玻璃，hover 一上去壁纸被"洗白"；2026-09-27 老板改黑）
   ★ 2026-09-30 老板报「信息都没显示完全」（150% DPI 下首尾文字贴着圆角被削）：
     面板从 90%×80% 放大到 94%×84%，给底下信息条腾地方；滑入距离从 150px
     收到 46px、缓动换 ease-out —— 长距离滑入显得肉，短滑入更利落。 */
.info {
  position: absolute; z-index: 3;
  width: 94%; height: 84%; left: 3%; top: 8%;
  background: var(--card-info);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border-radius: 1.6vw;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .35s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1);
  /* 白辉光换成暗投影 + 一圈极淡内描边（黑面板靠这圈边"浮"起来） */
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.card:hover .info { opacity: 1; transform: translateY(0); }

/* ★ 高度千万别给大：容器一高，flex 多行的 align-content 默认是 **stretch**，
   会把「第二排标签」整排拉到容器下沿 —— 于是 8 个标签被拆成
   「上面 5 个 + 下面 3 个」隔着半个面板遥遥相望。
   （老板 2026-09-27 报的「标签不要离太开，正常一排二排排就行」就是这个。）
   正解：高度收成 auto + align-content:flex-start —— 一行挨一行自然往下排。 */
.labelDiv {
  width: 90%; height: auto;
  max-height: 52%;
  margin-top: 6%;
  display: flex; flex-wrap: wrap;
  align-content: flex-start;
  align-items: center; justify-content: center;
  overflow: hidden; gap: 5px;
}
/* 标签：黑底上的**金色玻璃胶囊**。站里 .gobtn 本来就是金边，标签跟着走同一套语言，
   比原来"灰字 + 灰边"醒目得多（老板：「上面的标签要醒目」）。 */
.labelDiv span {
  display: inline-flex; align-items: center; justify-content: center;
  color: #f6e6bd;
  border: 1px solid rgba(240, 217, 168, .55);
  background: rgba(240, 217, 168, .14);
  border-radius: 50px;          /* 原站写的是 50%，长标签会变成难看的椭圆 —— 改成胶囊 */
  padding: .04rem .16rem;
  font-size: .21rem; font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .70);   /* 浅色壁纸那一角也读得清 */
  white-space: nowrap;
  line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.labelDiv::-webkit-scrollbar { width: 0; }

.card--button {
  position: absolute; bottom: 16%; left: 0;
  width: 100%; display: flex; justify-content: center;
}
.gobtn {
  width: 3rem; height: .78rem;
  display: flex; align-items: center; justify-content: center; gap: .08rem;
  border-radius: 50px;
  /* 黑面板上原来是"黑底 + 淡金边"，边界糊在一起 ⇒ 改成金玻璃，指上去变实金 */
  background: rgba(240, 217, 168, .16);
  color: #f8eed6; font-size: .26rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(240, 217, 168, .72), 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .3s var(--ease-spring), background-color .3s, color .3s;
}
.gobtn:hover { transform: scale(1.06); background: #f0d9a8; color: #17171c; }
.gobtn svg { width: .26rem; height: .26rem; }

/* 底部信息条：**悬浮胶囊**（2026-09-30 重构）。
   原来是贴满面板底边的直角通条 + 四格 width:24% + nowrap + overflow:hidden
   —— 文字长的（大 MB 数、六字分类）会被**拦腰硬切、连省略号都没有**；
   150% DPI 下首尾两格更是直接贴进圆角被削（老板截图里「蓝」只剩半边）。
   改法：条本身左右留 4% 悬浮成胶囊（离圆角远远的），格子改 flex 均分 +
   min-width:0 + ellipsis —— 再长的信息也是「…」收尾，不再是切一半。 */
.card-bottom {
  position: absolute; bottom: 3.5%; left: 4%; z-index: 4;
  width: 92%; height: 11.5%;
  border-radius: 50px;
  background: var(--card-bar);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  padding: 0 .12rem; gap: .08rem;
  display: flex; justify-content: space-around; align-items: center;
  color: var(--text-2);            /* 底条跟着面板一起黑 ⇒ 深灰字换成亮字 */
  font-size: .2rem;
}
.card-bottom > div {
  flex: 1 1 0; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-align: center;
  line-height: 1.2;
}
.card-bottom svg { width: .2rem; height: .2rem; flex: none; opacity: .75; }

/* ============================================================
   筛选组（排序 / 种类 / 分辨率 / 色系 / 收起展开）
   ★ 2026-09-29 第六波：老板「这个底部导航跟上面顶部导航合并，底下给我弄成翻页的页码」。
     原来它是一条**吸在屏幕底部**的独立胶囊（带自己的毛玻璃底、阴影、贴底定位，
     外面还套了一层负责定位的外壳）。问题有两个：
       ① 宽屏上它长得像第二条导航，跟顶栏那条抢戏（老板连着两轮都在纠这件事）；
       ② 吸底的时候会**压住最后一行卡片**，页面越长越明显（自动加载之后更严重）。
     ⇒ 现在整组搬进顶栏那条分类导航胶囊内部（见模板里的 .catnav），
       所以这一层**不再是自己一张皮**：底色 / 圆角 / 阴影 / 定位全部交给 .catnav，
       这里只留「横排 + 间距」。
   ★ 换行顺序：.catnav 那组 order 把筛选组排在「更多分类」右边、二级细分上面。
   ============================================================ */
.filterbar {
  display: flex; align-items: center; gap: .04rem;
  flex: none;
  pointer-events: auto;
}

/* 「分类 … ｜ 筛选 …」中间那条竖线。窄屏筛选组会自己另起一行，
   行首再挂一根竖线很怪，所以小屏里把它藏掉（见页面底部的自适应档）。 */
.cn-div {
  flex: none; order: 3;
  width: 1px; height: .3rem;
  margin: 0 .08rem;
  /* 用「看得见的那条线」（--line-hi）：分组靠它一眼分得开，
     用 --line 那条更淡的，白底上几乎看不见，分组就白分了。 */
  background: var(--line-hi);
}
.catnav .filterbar { order: 4; }

/* 快捷标签组
   ⚠️ 2026-09-29：下面这组样式**目前没有使用者** —— 老板让把筛选条最左边那三颗
   标签胶囊撤掉（一串没图标没箭头的圆角胶囊，看着像一排导航按钮，跟顶栏重复）。
   元素连同它的空容器、渲染逻辑都已删（静态站 + 主题模板 + app.js 三处）。
   样式先留着：哪天想把这排标签找回来，补回模板容器与渲染即可，不用重写外观。 */
.tagstrip { display: flex; align-items: center; gap: .08rem; }
.tagchip {
  height: .52rem; padding: 0 .2rem;
  display: flex; align-items: center;
  border-radius: 50px;
  background: var(--glass);
  font-size: .2rem; color: var(--text);
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.tagchip:hover { background: var(--glass-hi); }
.tagchip.on { background: var(--pill); color: var(--text-dark); }

.fdiv { width: 1px; height: .38rem; background: var(--line); flex: none; }

/* 下拉触发器
   ★ 2026-09-29 第六波：尺寸/外形对齐左边的分类胶囊（.cn-item）——
     搬进同一条导航之后，两者高度/字号/圆角不一致会显得整条散架。
     （分类胶囊：height .42rem / padding 0 .16rem / font-size .22rem） */
.dd { position: relative; }
.dd-trigger {
  height: .42rem; padding: 0 .16rem;
  display: flex; align-items: center; gap: .05rem;
  border-radius: 50px;
  border: 1px solid transparent;
  background: var(--glass-3);
  font-size: .22rem; color: var(--text);
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.dd-trigger:hover { background: var(--glass-hi); }
.dd-trigger svg { width: .22rem; height: .22rem; flex: none; opacity: .9; }
.dd-trigger .caret { width: .18rem; height: .18rem; opacity: .55; transition: transform .35s; }
.dd.open .dd-trigger { background: var(--pill); color: var(--text-dark); }
.dd.open .dd-trigger svg { opacity: 1; }
.dd.open .caret { transform: rotate(180deg); }
.dd.on .dd-trigger { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }

/* 下拉面板
   ★ 2026-09-29 第六波：**改成向下展开**。以前筛选条吸在屏幕底部，面板只能往上弹；
     现在它挂在顶栏上，再往上弹就顶出屏幕了。 */
.dd-panel {
  position: absolute; top: calc(100% + .18rem); left: 50%;
  transform: translate(-50%, -10px) scale(.96);
  transform-origin: top center;
  min-width: 3.4rem;
  padding: .18rem;
  border-radius: .32rem;
  background: var(--panel-solid);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  opacity: 0; pointer-events: none;
  transition: opacity .28s, transform .35s var(--ease-spring);
}
.dd.open .dd-panel { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.dd-list { display: flex; flex-wrap: wrap; gap: .1rem; max-width: 5.2rem; }
.dd-item {
  height: .52rem; padding: 0 .2rem;
  display: flex; align-items: center; gap: .08rem;
  border-radius: 50px;
  background: var(--glass);
  font-size: .2rem;
  /* ★ 条目里的字**绝不折行**。药丸是 flex 容器，里面那串字是「匿名 flex 项」，
     默认 flex-shrink:1、最小宽度又只有 1 个字 —— 面板一被挤窄，
     「最新」就会变成「最」上「新」下。nowrap 之后最小宽度 = 整串字宽，挤不动。 */
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.dd-item:hover { background: var(--glass-hi); }
.dd-item.on { background: var(--pill); color: var(--text-dark); font-weight: 500; }
.dd-item i {
  width: .28rem; height: .28rem; border-radius: 50%; display: block; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.dd-title {
  font-size: .18rem; color: var(--text-3); margin-bottom: .1rem;
  letter-spacing: .04em; white-space: nowrap;
}

/* ---- 分类面板：竖排列表（照源站「一行一个分类」的写法）----
   源站的分类是「动漫｜二次元」这种双词写法，一行一个、往下滚：
   比一片小药丸好扫，也不会冒出「两个字就折行」的难堪。
   行沿用 .dd-item 类名（点击绑定、选中态跟别的面板一套），
   这里只把「横排药丸」改成「竖排长条」。 */
.dd-list.as-list {
  display: block;
  width: 4.7rem;
  max-width: calc(100vw - 1.6rem);
  max-height: min(7.4rem, 40vh);
  overflow-y: auto; overflow-x: hidden;
  padding-right: .06rem;
}
.dd-item.catrow {
  width: 100%;
  height: .76rem;
  padding: 0 .18rem;
  border-radius: .18rem;
  background: transparent;          /* 竖排不要药丸底，靠 hover / 选中出底色 */
  justify-content: space-between;
  gap: .24rem;
  font-size: .26rem; color: var(--text-2);
  text-align: left;
}
.dd-item.catrow + .dd-item.catrow { margin-top: .04rem; }
.dd-item.catrow:hover { background: var(--glass-hi); color: var(--text); }
.dd-item.catrow.on { background: var(--pill); color: var(--text-dark); font-weight: 600; }
.dd-item.catrow svg { width: .26rem; height: .26rem; flex: none; }

/* 调试态（网址带 ?dd=xxx）把过渡全关掉。
   为什么需要：无头浏览器截图时会把 CSS 过渡冻在起点，面板只拍到一层透明影子 ——
   有了这条，?dd=xxx 截出来的就是**终态**，能直接拿来看。 */
html.no-fx *,
html.no-fx *::before,
html.no-fx *::after {
  transition: none !important;
  animation: none !important;
}

/* 收起 / 展开筛选项的那个 ＋（跟着上面一起缩到导航条的尺度） */
.collapse-btn {
  width: .42rem; height: .42rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: background-color .3s, transform .4s var(--ease-spring);
}
.collapse-btn:hover { background: var(--glass-hi); transform: rotate(90deg); }
.collapse-btn svg { width: .22rem; height: .22rem; }

/* 收起状态：只留核心几项 */
.filterbar.mini .tagstrip,
.filterbar.mini .dd-optional { display: none; }

/* ============================================================
   分页
   ============================================================ */
.page-main { display: flex; justify-content: center; padding: .3rem 0 .1rem; }
.pagination {
  display: flex; align-items: center; gap: .16rem;
  padding: .16rem .3rem;
  border-radius: var(--r-pill);
  /* ★ 2026-09-29 第六波：底色原来是**写死的深色** ——
     白天模式整页是白的，这条深胶囊浮在白底上像贴了块补丁；
     更糟的是页码字用 --text-2（白天 = 深灰），深灰压深色 = 基本看不见，
     正是老板说的「白色模式下字的对比要能看清」那一类。
     改用跟筛选条 / 右上圆钮同一套的 --panel（白天自动变白玻璃）+ --shadow-panel。 */
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.page-content { display: flex; align-items: center; gap: .1rem; }
.pg {
  min-width: .68rem; height: .62rem; padding: 0 .2rem;
  display: grid; place-items: center;
  border-radius: 50px;
  font-size: .24rem; color: var(--text-2);
  transition: background-color .3s, color .3s, transform .3s var(--ease-spring);
}
.pg:hover { background: var(--glass-hi); color: var(--text); transform: translateY(-2px); }
.pg.current { background: var(--pill); color: var(--text-dark); font-weight: 600; }
.pg.disabled { opacity: .3; pointer-events: none; }
.pg.ellipsis { pointer-events: none; }
.pg.go { padding: 0 .22rem; }
/* 页码右边那句「共 N 张 · M 页」——纯说明，不可点（内容由 app.js 填） */
.pgnum {
  padding-left: .08rem;
  font-size: .19rem; color: var(--text-3);
  white-space: nowrap; user-select: none;
}
/* 手机档专用的「第 X / Y 页」——手机上数字条和跳页框都藏（见 ≤800 块），只留它 */
.pgcur { display: none; font-size: .24rem; color: var(--text-2); white-space: nowrap; user-select: none; }
/* 「到第 [ ] 页」直接跳（2026-09-29 老板要的：几百页光点页码翻不过来） */
.pgjump {
  display: inline-flex; align-items: center; gap: .06rem;
  padding-left: .12rem;
  font-size: .19rem; color: var(--text-3);
  white-space: nowrap; user-select: none;
}
.pg-input {
  width: .56rem; height: .56rem; padding: 0 .08rem;
  text-align: center; font-size: .22rem; color: var(--text);
  background: transparent;
  border: 1px solid var(--line); border-radius: 50px;
  outline: none;
  transition: border-color .3s, background-color .3s;
  -moz-appearance: textfield; appearance: textfield;
}
.pg-input::-webkit-outer-spin-button,
.pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-input::placeholder { color: var(--text-3); opacity: .55; }
.pg-input:focus { border-color: var(--line-hi); background: var(--glass-hi); }
.pg-go { font-size: .19rem; }

/* ---------------- 自动加载的收尾条（**目前没有使用者**） ----------------
   ★ 2026-09-29 第六波：老板「底下给我弄成翻页的页码」——
     上面那套页码翻页就是现在的做法，这里这几条（滚到底自动接下一批用的
     哨兵 + 收尾提示 + 去掉胶囊皮的变体）随之**退场**：
     ·  不可见的哨兵元素（1px，app.js 盯着它，一进视野就接下一批）
     · 「已经到底啦 · 共 N 张」那句收尾提示
     · 列表页专用的 .pagination 变体（把胶囊皮去掉，只留一句提示）
     样式**留着**：哪天想改回自动加载，补回渲染逻辑即可，不用重写外观；删除的只是
     app.js 里那套监听（定时器 + 事件监听留在代码里才是真风险）。
   ⚠️ 这几条不能加在裸 .pagination 上 —— 头像页（avatar.js）用的是老的分页器。 */
.pagination.loadmore {
  padding: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pagination.loadmore:empty { display: none; }
.lm-sentinel { display: block; width: 100%; height: 1px; }
.lm-done {
  display: inline-block;
  padding: .1rem .3rem;
  font-size: .22rem;
  color: var(--text-3);
  letter-spacing: .02em;
  user-select: none;
}

/* ============================================================
   贴屏幕底边的软件推广条
   —— 平时是贴底窄条，鼠标移上去向上展开三条卖点
   —— 高度写进 --promo-h，底部筛选胶囊靠它上移，不会被压住
   ============================================================ */
:root { --promo-h: 1.06rem; }

.promobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; justify-content: center;
  padding: 0 .3rem .14rem;
  pointer-events: none;
}
body.promo-off .promobar { display: none; }

.promo-in {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: .22rem;
  /* 原来写的是 100rem 宽 —— 根字号 54px 时是 5400px，
     比任何屏幕都宽，等于**没限制**，宽屏上这条推广条会一路铺到屏幕两边。
     改成全站那把尺子（1440），跟顶栏、网格、页脚对齐。 */
  width: 100%;
  max-width: var(--cw);
  padding: .16rem .52rem .16rem .2rem;
  border-radius: .28rem;
  background: var(--panel-solid);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.pm-badge {
  flex: none;
  height: .56rem; padding: 0 .22rem;
  display: flex; align-items: center;
  border-radius: 50px;
  background: linear-gradient(120deg, rgba(240, 167, 46, .95), rgba(232, 120, 30, .95));
  color: #fff; font-size: .21rem; font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(238, 143, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.pm-txt { display: flex; align-items: baseline; gap: .18rem; min-width: 0; flex: 1; }
.pm-txt b { font-size: .26rem; font-weight: 600; white-space: nowrap; }
.pm-sub {
  font-size: .21rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 悬停展开的三条卖点：浮在条上方，不改变条高 */
.pm-points {
  position: absolute; left: .2rem; bottom: calc(100% + .12rem);
  list-style: none;
  display: flex; flex-direction: column; gap: .08rem;
  padding: .2rem .3rem;
  border-radius: .24rem;
  background: rgba(24, 24, 30, .95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .28s, transform .4s var(--ease-spring);
}
.pm-points li { font-size: .21rem; color: var(--text-2); white-space: nowrap; }
.pm-points li::before { content: '· '; color: var(--accent); }
.promo-in:hover .pm-points { opacity: 1; transform: translateY(0); }

.pm-acts { display: flex; gap: .12rem; flex: none; }
.pmb {
  height: .6rem; padding: 0 .26rem;
  display: flex; align-items: center;
  border-radius: 50px; font-size: .22rem; font-weight: 500;
  white-space: nowrap;
  transition: transform .3s var(--ease-spring), background-color .3s;
}
.pmb:hover { transform: translateY(-2px); }
.pmb.primary { background: var(--pill); color: var(--text-dark); }
.pmb:not(.primary) { background: var(--btn-soft); color: var(--text); }

.pm-x {
  position: absolute; top: .08rem; right: .1rem;
  width: .4rem; height: .4rem; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-3);
  transition: background-color .3s, color .3s;
}
.pm-x:hover { background: var(--glass-hi); color: var(--text); }
.pm-x svg { width: .22rem; height: .22rem; }

/* ============================================================
   空状态 / 提示
   ============================================================ */
.empty {
  grid-column: 1 / -1; width: 100%;
  padding: 1.2rem 0; text-align: center; color: var(--text-2);
}
.empty .big { font-size: .9rem; margin-bottom: .16rem; opacity: .5; }
.empty b { display: block; font-size: .3rem; color: var(--text); margin-bottom: .12rem; }

.toast {
  position: fixed; left: 50%; transform: translate(-50%, 20px);
  bottom: calc(var(--promo-h) + .7rem);
  padding: .18rem .34rem; border-radius: 50px;
  background: rgba(24, 24, 30, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .24rem; color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .4s var(--ease-spring);
  z-index: 500;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   详情页
   ============================================================ */
/* 内容宽度统一走 --cw-detail（宽屏下不再铺满，见 :root 里的说明）
   --stage-pad 是展示台上下留白（给换壳/填充按钮排让位的 84px），
   右侧信息栏靠它把顶边对齐到设备壳的顶边（见 .side 的 margin-top）。 */
.detail { display: flex; gap: .4rem; padding: .3rem; max-width: var(--cw-detail); margin: 0 auto;
  align-items: flex-start; }

/* ---- 展示台：设备本身就是主角，这里只铺一层很淡的舞台光 ----
   ⚠️ 上下留白**必须用 px**，不能跟根字号走：
   换壳排（.devpick）与填充排（.fillpick）都是 px 固定尺寸 + px 定位。
   以前这里写 .82rem —— 根字号 54px 时是 44px（就差 6px 顶上去），
   到 ≤1100px 根字号掉成 34px 只剩 27.8px ⇒ **按钮排直接压到设备壳上**（老板圈出来了）。
   现在固定走 :root 的 --stage-pad（第七波 58 → 84px，理由见那里的注释）。
   ⚠️ 这个数同时被右侧信息栏引用（.side 的 margin-top）—— 两边必须一致，
   否则信息栏的顶边就跟设备壳对不齐。所以提到 :root 的 --stage-pad 上。 */
.stage {
  flex: 1; min-width: 0; position: relative;
  display: grid;
  justify-items: center;
  /* ⭐ 纵向**贴内容区顶**，不居中：设备壳与右侧信息栏共用同一条起跑线
     （老板 2026-09-26：「手机端 高度不能超过手机」）。
     以前是 place-items:center —— 一旦信息栏比壳高（宽屏/超宽屏那种很扁的显示器壳，
     内容必然装不下），壳会浮在中间、信息栏上下都冒出去，两列看着就散了。 */
  align-items: start;
  min-height: 5rem;
  padding: var(--stage-pad) .5rem var(--stage-pad);
}
.stage:before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 42%, rgba(255, 255, 255, .075), transparent 72%);
}
.stage img, .stage video { display: block; }

/* ---- 换壳与填充开关
        换壳：手机壁纸只列「手机」这一个（那一排整个不出现）；
              电脑壁纸列 笔记本 / 通用屏 / 宽屏 / 超宽屏。
        填充：铺满 / 完整 / 原图（脱壳）三选一。
   这里刻意用 px 而不是 rem：站点的根字号在小屏会掉到 26px，
   用 rem 的话这几个字会缩成 5px 看不见。 */
.devpick, .fillpick {
  position: absolute; z-index: 9;
  display: flex; gap: 6px; padding: 6px;
  border-radius: 50px;
  background: rgba(16, 16, 20, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  opacity: .52; transition: opacity .3s;    /* 平时半显，让人看得见有这个东西 */
}
/* ★ top:4px（2026-10-16 加宽键后从 12px 上移）：按钮排变高 ~12px，
   不上移的话底边压到设备壳顶（测布局「重叠 2px / 间隙 -2px」）。 */
.devpick { top: 4px; right: 14px; max-width: calc(100% - 28px); flex-wrap: wrap; justify-content: flex-end; }
.fillpick { bottom: 12px; left: 50%; transform: translateX(-50%); }
.stage:hover .devpick, .devpick:focus-within,
.stage:hover .fillpick, .fillpick:focus-within { opacity: 1; }
.devpick button, .fillpick button {
  height: 30px; padding: 0 11px; border: 0; cursor: pointer;
  border-radius: 50px; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 14px; line-height: 1;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background-color .28s, color .28s;
}
.devpick button svg { width: 16px; height: 16px; flex: none; }
.devpick button:hover, .fillpick button:hover { color: var(--text); background: var(--glass-hi); }
.devpick button.on, .fillpick button.on { background: rgba(240, 167, 46, .16); color: #f5cd8a; font-weight: 500; text-shadow: 0 1px 2px rgba(120, 60, 0, .25); }
/* ---- 屏型按钮改成「图标 + 名字 + 输出尺寸」三行（2026-09-29 第七波）----
   ★ 这一排从此一物两用：选哪台屏，左边就预览哪台、下载就出那个尺寸。
     所以把「这种屏会导出多少像素」直接写在按钮上，不用点开才知道。
   ⚠️ 只覆盖 .devpick，不碰 .fillpick —— 铺满/完整/原图那排是纯文字，别跟着变高。 */
.devpick button { flex-direction: column; gap: 0; height: auto; padding: 7px 18px 6px; }
.devpick button svg { width: 15px; height: 15px; }
.devpick button span { font-size: 13.5px; line-height: 1.35; }
.devpick button em {
  font-style: normal; font-size: 10.5px; line-height: 1.35;
  opacity: .66; letter-spacing: .1px;
}
.devpick button.on em { opacity: .76; }

/* ============================================================
   设备外框 · 线条版（2026-09-26）
   ------------------------------------------------------------
   设计意图：**外壳退成一层线，壁纸当主角**。
   所以这一版把所有「像真机的」东西都拿掉了 —— 金属渐变、银色高光、
   厚下巴、立体立柱、宽出屏幕的键盘，全换成同一根细线描边：
     · 一根线宽 --ln（1~1.75px，随尺寸走），一个线色 --lc
     · 边框留白收窄（手机 2.1% → 1.2% → .9%），屏幕更大
     · 影子只留一层柔和的浮起感，不抢眼
   变量仍由 JS 写在外层 .devinner 上：
     --dw / --dh  屏幕的宽高（按 9:19.5 / 16:10 / 16:9 / 21:9 / 32:9 钉死）
     --du         装饰基准 = min(屏宽, 1.78×屏高)（线宽、圆角、支架都按它换算）
   ============================================================ */
.devinner {
  display: grid; place-items: center;
  /* 第二轮弱化（老板：「再弱化一点 边框」）：线宽降约 30%、线色透明度 .70 → .42。
     原则还是「一根线」——但现在这根线要退到「描个边」的程度，
     眼睛先看到壁纸，再看到壳。再淡就得靠 hover 才看得见了，到此为止刚好。 */
  --ln: clamp(1px, calc(var(--du, 600px) * .0026), 1.75px);   /* 线宽 */
  --lc: rgba(255, 255, 255, .42);                      /* 主轮廓线 */
  --lc2: rgba(255, 255, 255, .20);                     /* 细节线（按键 / 摄像头点） */
  --shadow: 0 20px 50px rgba(0, 0, 0, .46), 0 4px 12px rgba(0, 0, 0, .26);
}
.dev { position: relative; }

.scr {
  box-sizing: content-box;          /* padding / border 算额外的，别把屏幕尺寸吃掉 */
  position: relative; overflow: hidden;
  width: var(--dw); height: var(--dh);   /* ★ 只有屏幕本身用 --dw，装饰件一律 --du */
  background: #05070b;
  /* 纯黑壁纸上也要看得见屏幕边界，所以给一层极淡的内衬线 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.scr img, .scr video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 「完整」模式：整张图都看得见，多出来的地方留黑（想看不裁的图切这个） */
.devinner.fit .scr img, .devinner.fit .scr video { object-fit: contain; }

/* ---------- 视频自动播放被拦时的兜底按钮（2026-10-07） ----------
   手机浏览器（省流 / 低电量 / 微信内置）经常拦 autoplay，视频停在封面一动不动，
   看着就像「视频壁纸不显示」。真被拦时露出这颗按钮，点一下手动播；
   autoplay 放行（桌面端、大多数手机）它永远不会出现。 */
.vplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .1rem;
  padding: .14rem .3rem; border: 0; border-radius: 50px;
  background: rgba(0, 0, 0, .58); color: #fff;
  font-size: .2rem; line-height: 1; cursor: pointer; z-index: 3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.vplay svg { width: .24rem; height: .24rem; }
.vplay:active { transform: translate(-50%, -50%) scale(.94); }
/* ⚠️ [hidden] 会被上面的 display:flex 顶掉 —— 必须显式压一条（老坑） */
.vplay[hidden] { display: none; }
@media (max-width: 800px) { .vplay { font-size: 13px; padding: 10px 20px; } .vplay svg { width: 15px; height: 15px; } }

/* ---------- 铺满模式：按住拖动摆位置（2026-09-29 第十二波） ----------
   老板：「手机端能不能改为可以拖动图片自己调整好位置 然后下载」。
   拖的是「窗」：cover 下图比屏大一圈，按住挪一挪 = 决定看哪一块，
   object-position 跟着变，下载裁切走同一口径 —— 预览什么样下下来就什么样。
   touch-action:none 是触摸端的关键：不写的话手指一动就成了滚动页面，永远进不了拖动。 */
.scr.drag { cursor: grab; touch-action: none; }
.scr.drag.dragging { cursor: grabbing; }
.scr.drag.dragging img { pointer-events: none; }   /* 拖动中屏蔽图片原生拖拽幽灵 */

/* ---------- ① 手机 · 轮廓线 + 侧键短线 + 灵动岛 ---------- */
/* 边框只是一根线 + 一圈很窄的留白，屏占比尽量大 */
.dev.k-phone {
  padding: calc(var(--du) * .009);
  border: var(--ln) solid var(--lc);
  border-radius: calc(var(--du) * .119);
  box-shadow: var(--shadow);
}
/* 屏幕圆角跟着机身一起收（机身圆角 − 边框厚度） */
.dev.k-phone .scr { border-radius: calc(var(--du) * .111); }

/* 侧边按键：只露机外一小截短线（真机就是这样）。
   位置按真机 147.5mm 机身量：静音键 19.5%、音量键 37.5% / 51%、电源键 49%。
   宽度给到 3.2 倍线宽是故意的 —— 落在屏幕里的那截会被 .scr 盖住，
   露在外面的正好是一小段。 */
.dev.k-phone .pk {
  position: absolute; width: calc(var(--ln) * 3.2);
  border-radius: 30px;
  background: var(--lc);
}
.dev.k-phone .pk.mute  { height: calc(var(--du) * .07); top: 19.5%; left: calc(var(--ln) * -1.8); }
.dev.k-phone .pk.vup   { height: calc(var(--du) * .12); top: 37.5%; left: calc(var(--ln) * -1.8); }
.dev.k-phone .pk.vdown { height: calc(var(--du) * .12); top: 51%;   left: calc(var(--ln) * -1.8); }
.dev.k-phone .pk.pwr   { height: calc(var(--du) * .22); top: 49%;   right: calc(var(--ln) * -1.8); }

/* 灵动岛：真机 125×37pt，距屏顶 11pt（都是相对屏幕，不是相对图）。
   线条版用「半透明黑 + 一圈极淡的边」，不糊成一块死黑。 */
.dev.k-phone .island {
  position: absolute; z-index: 4; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  /* 定位基准是 padding box（= 边框内缘），所以只补内边距、不再补线宽 */
  top: calc(var(--du) * .009 + var(--dh) * .0129);
  width: calc(var(--dw) * .30); height: calc(var(--dh) * .040);
  border-radius: 50px;
  background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}
/* 底部小白条：用 difference 混合 —— 深浅壁纸上都看得见，不用去猜图片亮度 */
.dev.k-phone .hbar {
  position: absolute; z-index: 4; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  width: calc(var(--dw) * .34); height: max(1.2px, calc(var(--ln) * .9));
  border-radius: 30px; background: #fff;
  mix-blend-mode: difference;
  bottom: calc(var(--du) * .009 + var(--dh) * .0094);
  transition: bottom .38s;
}
.dev.k-phone:hover .hbar { bottom: calc(var(--du) * .009 + var(--dh) * .026); }
/* 鼠标进到机身上，灵动岛像收到通知一样轻轻长开一点 */
.dev.k-phone .island { transition: width .45s cubic-bezier(.22, 1, .36, 1); }
.dev.k-phone:hover .island { width: calc(var(--dw) * .38); }

/* ---------- 手机屏上的锁屏时间（2026-09-26 老板提的） ----------
   「手机框里预览的时候能不能也加个数字时间显示，显得更逼真」。
   位置照 iOS 锁屏来：灵动岛下方居中，第一行日期小字、第二行时间大字。
   ★ 尺寸一律按 --dw / --dh 换算 —— 手机壳缩放多少，字就跟着缩多少，
     换分辨率、换壳大小都不会错位。
   ★ 时间是 JS 填的真实当前时间（见 app.js 的 startClock），不是写死的。
   想临时关掉：给 body 加 .no-lkclock 就行（留个钩子，免得以后加开关要动结构）。 */
.dev.k-phone .lkclock {
  position: absolute; z-index: 5; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  width: calc(var(--dw) * .86);
  top: calc(var(--du) * .009 + var(--dh) * .082);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--dh) * .007);
  text-align: center; color: #fff;
}
.dev.k-phone .lkclock em {
  font-style: normal; order: 1;
  font-size: calc(var(--dw) * .049); font-weight: 500;
  color: rgba(255, 255, 255, .93); letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .52);
}
.dev.k-phone .lkclock b {
  order: 2;
  font-size: calc(var(--dw) * .215); font-weight: 600;
  line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;      /* 数字等宽，跳分钟时不会左右抖 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42), 0 4px 16px rgba(0, 0, 0, .32);
}
body.no-lkclock .dev.k-phone .lkclock { display: none; }

/* ---------- ② 笔记本 · 屏幕描边 + 刘海凹槽 + 一条键盘弧线 ---------- */
.dev.k-mac { display: flex; flex-direction: column; align-items: center; }
.dev.k-mac .lid {
  box-sizing: content-box;
  position: relative;
  padding: calc(var(--du) * .0065);
  border: var(--ln) solid var(--lc);
  border-radius: calc(var(--du) * .016) calc(var(--du) * .016) 2px 2px;
  box-shadow: var(--shadow);
}
.dev.k-mac .scr { border-radius: calc(var(--du) * .01); }
/* 刘海：一个向下的 U 形凹槽（三边线），比方块黑条更像「画」出来的。
   尺寸要克制 —— 第一版按真机 13% × 4.2% 画，在 16:10 屏上像挂了块门牌，
   现在收到 10.5% × 3%，线也降一档，退成「细节」而不是「主体」。 */
.dev.k-mac .mnotch {
  position: absolute; z-index: 5;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 10.5%; height: calc(var(--dh) * .03);
  border: var(--ln) solid var(--lc2);
  border-top: 0;
  border-radius: 0 0 calc(var(--ln) * 3) calc(var(--ln) * 3);
  display: flex; align-items: center; justify-content: center;
}
.dev.k-mac .mnotch:after {
  content: ''; width: calc(var(--ln) * 1.7); height: calc(var(--ln) * 1.7);
  border-radius: 50%; background: var(--lc2);
  transition: background-color .4s, box-shadow .4s;
}
.dev.k-mac:hover .mnotch:after { background: #4ade80; box-shadow: 0 0 calc(var(--ln) * 3) rgba(74, 222, 128, .8); }
/* 键盘面：比屏幕宽一圈的一道弧形线（底边不封口，MacBook 正面就是这个轮廓） */
.dev.k-mac .base {
  flex: none; position: relative;
  width: 113%;
  height: calc(var(--du) * .018);
  border: var(--ln) solid var(--lc);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* 键盘面上沿不画「开合缝」：它和屏幕底边线重叠，加一条同色短线等于白加噪点 */
.dev.k-mac .base:after { content: none; }

/* ---------- ③ 显示器 · 屏幕描边 + 细下巴（只有一颗指示灯）+ 线条支架 ----------
   不加 rotateX 透视倾斜：那 1.5° 肉眼几乎看不出，
   却会让 getBoundingClientRect 变成变换后的包围盒（实测偏 2%），
   把「有没有把图裁掉」这条验收断言搞成误报。 */
.dev.k-disp { display: flex; flex-direction: column; align-items: center; }
.dev.k-disp .scr {
  padding: calc(var(--du) * .005);
  border: var(--ln) solid var(--lc);
  border-radius: calc(var(--du) * .012);
  box-shadow: var(--shadow);
}
.dev.k-disp .scr img, .dev.k-disp .scr video { border-radius: calc(var(--du) * .006); }
/* 下巴：屏幕正下方一条窄边，中间一颗指示灯。不放品牌字 —— 线条版要的是干净 */
.dev.k-disp .chin {
  position: relative; z-index: 3;
  width: 100%; height: calc(var(--du) * .018);
  margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  border: var(--ln) solid var(--lc);
  border-top: 0;
  border-radius: 0 0 calc(var(--ln) * 2) calc(var(--ln) * 2);
}
.dev.k-disp .chin .led {
  flex: none; width: calc(var(--ln) * 2.4); height: calc(var(--ln) * 2.4);
  border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 calc(var(--ln) * 3.2) rgba(74, 222, 128, .75);
}
/* 立柱：只留左右两条竖线（上下不封口） */
.dev.k-disp .neck {
  position: relative; z-index: 2;
  width: calc(var(--du) * .026); height: calc(var(--du) * .08);
  margin-top: 0;
  border: var(--ln) solid var(--lc);
  border-top: 0; border-bottom: 0;
}
/* 底座：一道很扁的弧线 */
.dev.k-disp .foot {
  position: relative; z-index: 1;
  width: calc(var(--du) * .155); height: calc(var(--du) * .012);
  margin-top: 0;
  border: var(--ln) solid var(--lc);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ---------- ④ 原图（不套壳，只给它一个「浮起来」的影子） ---------- */
.dev.k-none .scr {
  border-radius: calc(var(--du) * .014);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .34);
}

/* ⚠️ 这三档**必须从宽到窄排**：它们选择器特异性一样，靠后者覆盖前者。
   以前是 800 在前、1360 在后 ⇒ 手机档刚设好的 padding 又被 1360 档改回去。

   ---- 中屏（≤1360）：字号收一点，别让换壳条压到展示台上半截 ----
   ⚠️ 28px 高**只给 .fillpick**（铺满/完整/原图那排是纯文字、单行）。
      .devpick 从第七波起是「图标 + 屏名 + 尺寸」三行结构，锁 28px 会把内容顶出去
      （实测窄屏下按钮被锁成 28px、内容实需 31px）。 */
@media (max-width: 1360px) {
  .devpick button, .fillpick button { font-size: 12.5px; padding: 0 9px; height: 28px; }
  .devpick button { height: auto; padding: 4px 9px 3px; }
  .devpick button svg { width: 15px; height: 15px; }
}
/* ---- 窄屏（≤800）：整体收一号，屏名**不再藏** ----
   ★ 2026-09-29 第七波重写。旧这段是「按方向分栏目、窄屏最多 4 个按钮」时代写的
     （手机壁纸只列手机 1 个、电脑壁纸列 4 个），写法是 flex-wrap: nowrap + 右对齐 + 藏屏名。
     合并栏目后这一排**恒为 5 个**（手机/笔记本/通用屏/宽屏/超宽屏）。实测：
     390 宽第一个按钮 left = -1.4、360 宽 left = **-31.4** —— 整个「手机」跑到屏幕外，
     而手机上没有横向滚动条 ⇒ **那个按钮根本点不到**。
     现在：不藏名（图标本身太像、光看图标认不出「宽屏 / 超宽屏」），居中排；≤440 换等分铺满。 */
@media (max-width: 800px) {
  .devpick { flex-wrap: nowrap; justify-content: center; }
  .devpick button svg { width: 16px; height: 16px; }
  .devpick button span { font-size: 11.5px; }
  .devpick button em { font-size: 9px; letter-spacing: 0; }
  /* ★ 手机上永远没有 hover —— 而这两排按钮的基础不透明度是 .52（「平时半显、
     hover 全显」，宽屏鼠标一进展示台就亮起来）。窄屏没有这个救命动作，
     按钮排就永远半显 ⇒ 新加的「选尺寸」入口在手机上等于藏起来。
     窄屏干脆全显。 */
  .devpick, .fillpick { opacity: 1; }
}
/* ---- 手机档（≤440）：等分铺满 ----
   5 个按钮按内容排要 372px，这个宽度已经放不下了。
   改成「左右都钉住 + 每格 flex:1」—— 宽度由容器算出来，**不可能溢出**，且永远是一排。
   440 这个断点是算出来的：按钮排可用宽 ≈ 视口 - 44，要 ≥ 372 才排得下 ⇒ 视口 ≥ 416，
   取 440 留 24px 余量。 */
@media (max-width: 440px) {
  .devpick { left: 10px; right: 10px; max-width: none; }
  .devpick button { flex: 1 1 0; min-width: 0; padding: 4px 1px 3px; }
}

.navarrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: .8rem; height: .8rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 12, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .4rem; color: #fff;
  opacity: 0; transition: opacity .3s, background-color .3s;
}
.stage:hover .navarrow { opacity: 1; }
.navarrow:hover { background: rgba(30, 30, 36, .9); }
.navarrow.prev { left: .18rem; }
.navarrow.next { right: .18rem; }

.side {
  width: 5.4rem; flex: none;
  padding: .34rem;
  border-radius: .3rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  /* ⭐ 与设备壳**顶边对齐、并在装得下时严格等高**（老板 2026-09-26：
     「手机端 高度不能超过手机」）。
     ⚠️ 这里绝不能写 align-self: stretch —— 它跟的是整个 .detail 列的高度，
     而列高 = 设备壳高 + 展示台上下各 58px 留白（那 58px 是给换壳/填充按钮排让位的），
     结果卡片比手机壳上下各冒出一截（老板圈了红线）。
     ⚠️ 也不能用 align-self: center 硬居中 —— 遇到宽屏/超宽屏那种很扁的显示器壳，
     信息栏的内容天然装不下，居中就变成「上下都冒出去」。贴顶才是一致的行为。
     现在三件套：
       · align-self: flex-start    与 .stage 同一条起跑线
       · margin-top: var(--stage-pad)  让过展示台的顶部留白 ⇒ **顶边与壳齐平**
       · min-height: var(--devh)    装得下时高度被撑到与壳等高 ⇒ **底边也齐平**
     配合下面 .hint 的 margin-top:auto，说明段贴到底（老板上一轮的要求，仍然有效）。 */
  align-self: flex-start;
  margin-top: var(--stage-pad);
  min-height: var(--devh, 0px);
  display: flex; flex-direction: column;
}
/* 直系子项一律不缩不放：主轴多余的空间全部留给 .hint 的 margin-top:auto 去吃掉，
   内容超高时也不会把参数行 / 按钮排压扁。 */
.side > * { flex: none; }
.side h1 { font-size: .42rem; line-height: 1.28; margin-bottom: .1rem; }
.side .who { font-size: .22rem; color: var(--text-2); margin-bottom: .2rem; }
.tags { display: flex; flex-wrap: wrap; gap: .08rem; margin-bottom: .24rem; }
.tag {
  height: .46rem; padding: 0 .18rem;
  display: flex; align-items: center;
  border-radius: 50px;
  background: var(--glass);
  font-size: .2rem; color: var(--text);
  transition: background-color .3s;
}
.tag:hover { background: var(--glass-hi); }

.kv { border-top: 1px solid var(--line); padding-top: .18rem; margin-bottom: .26rem; }
.kv > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: .1rem 0; font-size: .22rem;
}
.kv span { color: var(--text-3); }
.kv b { font-weight: 500; }

.btnrow { display: flex; flex-direction: column; gap: .12rem; }
.btn {
  height: .76rem; border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: .24rem; font-weight: 500;
  transition: transform .3s var(--ease-spring), background-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--pill); color: var(--text-dark); }
.btn.line { background: var(--btn-soft); color: var(--text); }

/* ---- 下载区（2026-09-29 第七波；2026-10-10 老板二改）----
   尺寸牌 .dlsize 只**显示当前选的屏的输出尺寸**，不再承担下载动作；
   真正的下载只有下面 btnrow 里那颗「立即下载」。
   视觉沿用主按钮的胶囊（--pill 底 + 深字），但去掉 hover 浮动/可点手感，
   明确告诉用户它不是按钮。下面那行小字把「源图 → 裁出 → 输出」的账
   算给老板看 —— 下之前就知道会得到多大一张。 */
.dlbox { margin-bottom: .12rem; }
.dlbox .btn { width: 100%; }
.dlsize {
  width: 100%; height: .76rem; border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: .24rem; font-weight: 600;
  background: var(--pill); color: var(--text-dark);
  user-select: none; -webkit-user-select: none;
}
.detail.side-tight .dlsize { height: .66rem; font-size: .22rem; }
.dlnote {
  margin-top: .1rem;
  font-size: .17rem; line-height: 1.55; color: var(--text-3);
}
/* 网页下载限额（2026-10-10）：.dlq 是按钮下那条「今日还剩几次」小字；
   .dlgate 是超限后的引导弹层（主推：安装桌面软件并激活；次位：注册 / 登录）。
   颜色全走变量 —— 黑夜/白天两套主题自动适配，不用各写一份。 */
.dlq {
  margin-top: .06rem;
  font-size: .17rem; line-height: 1.5; color: var(--text-3);
}
.dlq b { color: var(--text-2); font-weight: 600; }
.dlgate-mask {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 5, 8, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: .4rem;
}
.dlgate {
  width: min(92vw, 5.8rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: .24rem;
  padding: .36rem .32rem .28rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.dlgate h3 { font-size: .26rem; margin: 0 0 .12rem; color: var(--text); }
.dlgate p  { font-size: .18rem; line-height: 1.7; color: var(--text-2); margin: 0 0 .22rem; }
/* 副行（2026-10-10）：「已有激活码？注册/登录绑码…」—— 比正文淡一档、小一号，
   跟主段落拉开层级：主推装软件激活，绑码是平行路径。 */
.dlgate p.dlgate-sub { font-size: .16rem; color: var(--text-3); margin: -.1rem 0 .22rem; }
.dlgate .btnrow { display: flex; gap: .12rem; flex-wrap: wrap; }
.dlgate .btnrow .btn { flex: 1 1 auto; height: .64rem; margin: 0; white-space: nowrap; }
/* 详情页右上那一列里的收藏按钮：跟卡片上的星标是**同一个开关、同一个 data-id**，
   只是这里排进按钮列，所以要把卡片那套「绝对定位 + 圆形小角标」整个关掉。 */
#side .favbtn {
  position: static; z-index: auto;
  width: 100%; height: .76rem;
  gap: .1rem; border-radius: 50px;
  background: var(--btn-soft); color: var(--text);
}
#side .favbtn svg { width: .26rem; height: .26rem; }
#side .favbtn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); }
#side .favbtn.on {
  color: #f0d9a8;
  box-shadow: inset 0 0 0 1px rgba(240, 217, 168, .62);
}
#side .favbtn.on svg { fill: currentColor; }
/* 说明段（老板说的「介绍」）：上一条分隔线 + margin-top:auto 贴到信息栏底部 ——
   于是右侧那一列变成「上面看参数、下面读介绍」（老板红框圈的就是这一列）。
   窄屏时 .side 高度=内容高度、没有多余空间可分，auto 自动退化成 0，全靠 padding-top 留白。 */
.hint {
  margin-top: auto; padding-top: .3rem;
  border-top: 1px solid var(--line);
  font-size: .19rem; color: var(--text-3); line-height: 1.6;
}

/* ---- 装不下时的收紧档（.detail.side-tight，由 app.js 的 syncSide 挂上）----
   什么时候会触发：视口又宽又矮（比如 1280×563）时，手机壳被视口高度夹到 560px，
   而右侧信息栏的内容天然要 591px —— 光靠 min-height 根本压不住，卡片照样比壳高。
   这里把信息栏里的**固定间距**各收一点（内边距 / 参数行距 / 按钮高度 / 介绍段留白），
   总共能挤出约 90px，够把 31px 的缺口盖住，而且不动字号层级、不影响可读性。
   ⚠️ 正常情况（内容装得下）**不会**挂这个 class —— 老板确认过的观感原样保留。 */
.detail.side-tight .side { padding: .34rem .34rem .2rem; }
.detail.side-tight .side h1 { font-size: .38rem; margin-bottom: .06rem; }
.detail.side-tight .side .who { margin-bottom: .12rem; }
.detail.side-tight .tags { margin-bottom: .14rem; }
.detail.side-tight .kv { padding-top: .12rem; margin-bottom: .16rem; }
.detail.side-tight .kv > div { padding: .055rem 0; }
.detail.side-tight .btnrow { gap: .08rem; }
.detail.side-tight .btn { height: .66rem; font-size: .22rem; }
.detail.side-tight .hint { padding-top: .16rem; font-size: .18rem; line-height: 1.5; }

.crumb { display: flex; align-items: center; gap: .1rem; padding: .24rem .3rem 0; font-size: .22rem; color: var(--text-2); max-width: var(--cw-detail); margin: 0 auto; }
.crumb a:hover { color: var(--text); }
.crumb span { opacity: .4; }

.relwrap { padding: 0 .3rem .4rem; max-width: var(--cw-detail); margin: 0 auto; }
.relwrap h3 { font-size: .34rem; margin: .2rem 0; }

.ph { padding: 1.4rem; text-align: center; color: var(--text-2); font-size: .26rem; line-height: 1.8; }

/* ============================================================
   自适应
   ============================================================ */
@media (max-width: 1500px) {
  /* ★ 2026-09-29：这里原来用 `.card { width: 23% }` 做响应式，现在列数统一由
     .grid 的 --cols 管（见「列数档位」那段）。留着它的后果很隐蔽 ——
     1440 屏上它把卡片压成 23%（= 323.8px），一行只放得下 4 个，
     表现就是「明明设了 5 列，页面上只有 4 列」。宽度的事从此只归 --cols。 */
  .side { width: 4.9rem; }
}

@media (max-width: 1100px) {
  html { font-size: 34px; }
  .logo span { display: none; }
  /* 堆叠布局：宽屏那套「与设备壳对齐」的规则全部撤掉 ——
     column 方向下 align-items:flex-start 会让展示台/信息栏按内容宽度收缩，
     margin-top 又把信息栏往下推 58px。--devh 只服务左右并排那种布局。 */
  .detail { flex-direction: column; align-items: stretch; }
  .side { width: 100%; align-self: stretch; margin-top: 0; min-height: 0; }
  .pm-sub, .pm-points { display: none; }       /* 中屏起：推广条只留一行 */
  .pm-acts .pmb:not(.primary) { display: none; }
}

@media (max-width: 800px) {
  html { font-size: 26px; }
  .card-bottom > div:nth-child(3), .card-bottom > div:nth-child(4) { display: none; }
  .card--button { bottom: 30%; }
  .tagstrip { display: none; }
  .dd-optional { display: none; }          /* 小屏只留 排序/种类/色系，否则筛条会挤出屏幕 */
  /* 筛选组并进顶栏之后的手机档 —— 本站小屏根字号压到 26px，
     照抄大屏那套 rem 会缩成 14px 高的小药丸，手指点不到。
     尺寸跟着左边那排分类胶囊（.cn-item 在同一个断点里的值）走。 */
  .dd-trigger { height: .86rem; padding: 0 .24rem; font-size: .4rem; }
  .dd-trigger svg { width: .4rem; height: .4rem; }
  .dd-trigger .caret { width: .32rem; height: .32rem; }
  /* ★ 手机上筛选组**固定另起一行**（flex-basis:100% 让它独占一行）。
     为什么不靠「装不下才换行」：换不换行取决于分类条目的**字数** ——
     线上是「风景/光效」这种两个字的短名，凑一凑就"刚好装得下"，
     于是筛选被挤到屏幕外，最右边那个「色系」在手机上根本点不到
     （2026-09-29 线上 390 宽实测到的真 bug）。
     固定一行之后：第一行分类、第二行筛选，跟数据无关，永远不会漏。 */
  .filterbar { gap: .1rem; flex-wrap: wrap; flex-basis: 100%; }
  /* ＋ 那个收起按钮在手机上**空转**（它只隐藏「分辨率」，而小屏本来就不显示），藏掉 */
  .collapse-btn { display: none; }
  /* 竖线：筛选组会自己另起一行，行首顶一根竖线看着像打错了 ⇒ 藏 */
  .cn-div { display: none; }
  /* 下拉面板：把锚点从「某个触发器」改成「整条导航」。
     触发器贴着屏幕边的时候，以它为中心弹出来的面板会顶出屏幕外；
     挂到导航上则永远居中、算得准。 */
  .catnav { position: relative; }
  .dd { position: static; }
  .dd-panel { min-width: 0; width: calc(100vw - 1.2rem); padding: .2rem; }
  .dd-list { max-width: 100%; }
  .dd-list.as-list { width: 100%; max-width: 100%; max-height: min(9rem, 46vh); }
  .dd-item { height: .84rem; padding: 0 .26rem; font-size: .38rem; }
  .dd-title { font-size: .34rem; margin-bottom: .16rem; }
  /* 页码同理：原尺寸在 26px 根字号下只有 14px 高，点起来费劲 */
  .pagination { gap: .08rem; padding: .14rem .18rem; }
  .pg { min-width: .92rem; height: .92rem; padding: 0 .18rem; font-size: .38rem; }
  .pgnum { display: none; }                /* 手机上位置不够，「共 N 张 · M 页」让位给页码 */
  /* ★ 2026-10-12 老板定：手机上翻页就一条细行 ——
     数字条（1 2 3 … 81）和「到第 [ ] 页 跳」整块占两行还誊不下，全藏掉；
     只留 ⇠ 「第 X / Y 页」 ⇢，点箭头翻页足够（pgcur 由 app.js 输出）。 */
  .page-content, .pgjump { display: none; }
  .pgcur { display: inline; }
  .topbar { padding: .16rem .18rem; gap: .1rem; }
  /* .tb-in 的桌面尺寸（高 1.15rem）在手机上会顶出一条空白，收掉；
     手机头部 = 分类导航浮层，条底/边线在下面第四轮那块整体撤 */
  .topbar .tb-in { height: auto; padding: 0; }
  .tab { padding: 0 .12rem; font-size: .24rem; }
  .promobar { padding: 0 .12rem .1rem; }
  .promo-in { gap: .12rem; padding: .12rem .42rem .12rem .14rem; }
  .pm-badge { display: none; }
  .pm-txt b { font-size: .3rem; }
}

/* ============================================================
   头像制作页
   ============================================================ */
/* ★ 2026-09-29：原来是 100rem 宽 —— 根字号 54px 时 = 5400px，
   比任何屏幕都宽，等于**没限制**：宽屏上头像页的大标题会一路顶到屏幕左边。
   并进全站那把尺子（1440），跟顶栏 / 网格 / 页脚对齐。 */
.av-head { padding: .34rem .3rem .1rem; max-width: var(--cw); margin: 0 auto; }
.av-head h1 { font-size: .56rem; font-weight: 600; margin-bottom: .1rem; }
.av-head p { font-size: .24rem; color: var(--text-2); line-height: 1.6; max-width: 24rem; }

.av-tabs { display: flex; align-items: center; gap: .1rem; margin-top: .22rem; flex-wrap: wrap; }
.avfilter {
  height: .62rem; padding: 0 .26rem;
  display: flex; align-items: center;
  border-radius: 50px; font-size: .22rem;
  background: var(--glass); color: var(--text);
  transition: background-color .3s, color .3s;
}
.avfilter:hover { background: var(--glass-hi); }
.avfilter.on { background: rgba(240, 167, 46, .16); color: #f5cd8a; font-weight: 500; text-shadow: 0 1px 2px rgba(120, 60, 0, .25); }
.avup {
  margin-left: auto;
  height: .62rem; padding: 0 .26rem;
  display: flex; align-items: center; gap: .08rem;
  border-radius: 50px; font-size: .22rem; font-weight: 500;
  color: #fff;
  background: linear-gradient(120deg, #f7b733, #e07c0a);
  transition: transform .3s var(--ease-spring);
}
.avup:hover { transform: translateY(-2px); }
.avup svg { width: .26rem; height: .26rem; }

/* 选图墙：方卡，鼠标移上去图片自己变圆 —— 直接预览「它当头像什么样」 */
.avgrid {
  /* ★ 2026-09-29 修：这里原来用 vw 做间距，卡片自己写死一个百分比宽度
     来硬算出「一行 7 个」——那是 flex 时代的做法。
     全站改成 grid（见 .grid 那段）之后，卡片宽度已经由列宽（1fr）决定，
     那个百分比就把卡片压成列宽的一小截（1920 屏上 264px 的格子 → 卡片只剩 37px），
     表现是头像页整片变成一排小圆点。
     ⇒ 宽度的事从此只归 --cols，一行 7 个靠 --cols 表达。
     （注释刻意不写那两个百分比数字 —— 上线复验拿它们当「已删」的哨兵，
       注释里出现同样的串会把复验搞成假红。） */
  --cols: 7;
  gap: var(--gap);
  padding-top: .3rem;
}
/* 头像墙列数档位：跟 .grid 同频，只是每档多两列（小方卡密一点更像个选图墙）。
   这一块必须写在 .avgrid 规则之后 —— 两边特异性相同（都是单个类），
   靠「后出现的胜」压过 .grid 那三档，否则窄屏会被打回 5/4/3/2 列。 */
@media (max-width: 1200px) { .avgrid { --cols: 6; } }
@media (max-width: 940px)  { .avgrid { --cols: 5; } }
@media (max-width: 640px)  { .avgrid { --cols: 4; } }

.avgrid .card {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06);
  overflow: visible;
  animation: none;
  perspective: none;
}
.avgrid .card .shot {
  position: static;
  width: 70%; height: 70%;
  border-radius: .26rem;
  transform: none;
  box-shadow: 10px 22px 26px rgba(0, 0, 0, .35);
  transition: border-radius .55s, transform .55s, box-shadow .55s;
}
.avgrid .card:hover .shot {
  border-radius: 50%;
  transform: translateY(-56%);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .45);
}
.avgrid .card .avgo {
  position: absolute; bottom: 13%;
  display: flex; align-items: center; gap: .06rem;
  font-size: .2rem; color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.avgrid .card .avgo svg { width: .24rem; height: .24rem; }
.avgrid .card:hover .avgo { opacity: 1; transform: translateY(0); }
.avgrid .card .avlab {
  position: absolute; top: 7%;
  font-size: .17rem; color: var(--text-3);
  opacity: 0; transition: opacity .35s;
  pointer-events: none; white-space: nowrap;
}
.avgrid .card:hover .avlab { opacity: 1; }

/* ---------------- 裁剪面板 ---------------- */
.avmodal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: .3rem;
  background: rgba(6, 6, 9, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.avmodal.on { opacity: 1; pointer-events: auto; }

.avbox {
  position: relative;
  display: flex; gap: .5rem;
  width: min(21rem, 94vw);
  max-height: 90vh; overflow: auto;
  padding: .44rem;
  border-radius: .36rem;
  background: rgba(20, 20, 26, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  transform: translateY(18px) scale(.97);
  transition: transform .45s var(--ease-spring);
}
.avmodal.on .avbox { transform: none; }

.avx {
  position: absolute; top: .16rem; right: .16rem; z-index: 3;
  width: .56rem; height: .56rem; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-2);
  transition: background-color .3s, color .3s;
}
.avx:hover { background: var(--glass-hi); color: var(--text); }
.avx svg { width: .26rem; height: .26rem; }

.av-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .16rem; }
/* 取景框：**正方形，四边一样长、直角**。
   ⚠️ 以前这里是 border-radius:50%（圆形取景），老板 2026-09-26 定：
      取景就是裁方的，导出也是正方形 —— 圆形那套只留在右侧做预览。 */
.avstage {
  position: relative;
  /* 边长取「容器宽」和「58vh」里的小者 —— 保证整块面板不用滚动就能看全。
     （写 width:100% 的话，矮屏上正方形会顶出去，得滚着才能看到下半截） */
  width: min(100%, 58vh);
  align-self: center;
  aspect-ratio: 1;
  border-radius: .1rem; overflow: hidden;
  background: #101014;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .22);
  cursor: grab;
}
.avstage.sq { border-radius: .1rem; }      /* 兼容旧类：现在无论哪种形状都是方的 */
.avstage.grab { cursor: grabbing; }
.avstage img {
  position: absolute; left: 50%; top: 50%;
  max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none;
}
.avmask {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
/* 取景框四角：四个 L 形小角，让人一眼看出「这是框，框内就是要导出的部分」 */
.avcnr {
  position: absolute; z-index: 2; pointer-events: none;
  width: .3rem; height: .3rem;
  border: 0 solid rgba(255, 255, 255, .5);
}
.avcnr.tl { top: .08rem;    left: .08rem;  border-top-width: 2px;    border-left-width: 2px; }
.avcnr.tr { top: .08rem;    right: .08rem; border-top-width: 2px;    border-right-width: 2px; }
.avcnr.bl { bottom: .08rem; left: .08rem;  border-bottom-width: 2px; border-left-width: 2px; }
.avcnr.br { bottom: .08rem; right: .08rem; border-bottom-width: 2px; border-right-width: 2px; }

.avhint { font-size: .22rem; color: var(--text-2); text-align: center; }
.avhint b { color: var(--text); font-weight: 600; }

/* 面板里直接换本地图片（不用退回去再传） */
.avlocal {
  height: .68rem; border-radius: 50px;
  display: flex; align-items: center; justify-content: center; gap: .1rem;
  font-size: .22rem; font-weight: 500; color: var(--text);
  background: var(--btn-soft);
  border: 1px solid var(--line);
  transition: background-color .3s, transform .3s var(--ease-spring);
}
.avlocal:hover { background: var(--glass-hi); transform: translateY(-2px); }
.avlocal svg { width: .26rem; height: .26rem; }
.avfoot { font-size: .18rem; color: var(--text-3); text-align: center; }

.av-right { width: 9.2rem; flex: none; display: flex; flex-direction: column; gap: .22rem; }
.av-right h3 { font-size: .3rem; font-weight: 600; }

.av-sizes { display: flex; align-items: flex-start; gap: .26rem; }
.avpcell { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.avpcell em { font-style: normal; font-size: .17rem; color: var(--text-3); }

.avprev {
  position: relative;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.avprev.sq { border-radius: 18%; }
.avprev.flat { width: 1.5rem; height: 1.5rem; border-radius: 0; }   /* 方形 = 下载下来的样子 */
.avprev.hl { box-shadow: inset 0 0 0 2px var(--pill), 0 0 16px rgba(255, 255, 255, .3); }
.avprev img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; }

/* 「圆形/圆角方只是预览」这句必须显眼 —— 不然用户会以为下载下来就是圆的 */
.avnote {
  font-size: .2rem; line-height: 1.6; color: var(--text-3);
  padding: .15rem .2rem;
  border-radius: .18rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  margin-top: -.06rem;
}
.avnote b { color: var(--text); font-weight: 600; }

.av-row { display: flex; align-items: center; gap: .16rem; }
.av-lab { width: 1.1rem; flex: none; font-size: .2rem; color: var(--text-3); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: .1rem; border-radius: 50px;
  background: rgba(255, 255, 255, .16);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--pill); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.avshapes, .avout { display: flex; gap: .1rem; }
.avshapes button, .avout button {
  height: .56rem; padding: 0 .22rem;
  display: flex; align-items: center;
  border-radius: 50px; font-size: .2rem;
  background: var(--glass); color: var(--text);
  transition: background-color .25s, color .25s;
}
.avshapes button:hover, .avout button:hover { background: var(--glass-hi); }
.avshapes button.on, .avout button.on { background: var(--pill); color: var(--text-dark); font-weight: 500; }

.av-btns { display: flex; flex-direction: column; gap: .12rem; margin-top: auto; }

/* ============================================================
   桌面软件介绍页
   ------------------------------------------------------------
   ★ 2026-09-28 重排。老板原话：「布局不好看，再优化一下，该对齐对齐」。
     上一版"不好看"不是审美问题，是量出来的一堆偏差（用 _工具\_布局体检\量.js
     取的真盒子数据，不是盯着截图猜的）：
       ① 右栏第一个元素比左图顶边低 37.5px
          ← .sw-tag 是 inline-flex，站在一个 line box 里；父级 line-height:normal
            + 字号 54px ⇒ 上方凭空多出半行距。⇒ 改成 display:flex 块级化。
       ② 四条特性每条高 87.2px，其中 46px 是"看不见的空行"
          ← .sw-feats li 和它里面的 div 都没设字号，继承了根字号 54px，
            line box 被撑到约 64px。⇒ 在 .sw-right 上压一个 .24rem 字号。
       ③ 特性说明的文字列只有 308px 宽（可用其实有 717px），句子被折断
          ← flex item 默认按内容宽收缩。⇒ 文字列 flex:1 + min-width:0。
       ④ 左列 611.6px、右栏 778.8px，差 167px，左侧下方空一大块
          ← 前三条的水分挤掉之后两边自然就齐了。
       ⑤ 卡片间距 9.7px < 卡片内边距 18.4px，三张卡糊成一坨
          ⇒ 卡片间距统一 .24rem。
       ⑥ 实测区内部左右不齐：指标卡内容 x=191.5、对比条内容 x=194.8
          ← .sw-metric 左右内边距是 .34rem、.sw-versus 是 .4rem
          ⇒ 全页卡片统一「上下 .32rem / 左右 .34rem」。

   统一后的栅格（改这一页照着用，别再各写各的）：
     · 内容左右边缘     → .sw-hero / .sw-block 的 padding 左右 = .3rem
     · 卡片内边距       → 上下 .32rem、左右 .34rem
     · 卡片与卡片间距   → .24rem
     · 卡片内段落间距   → .06rem ~ .12rem
     · 圆角             → 卡片 .3rem、药丸 50px
   ============================================================ */
body[data-page="software"] .shell { padding-bottom: .8rem; }

.sw-hero {
  /* ★ 用**比例**分栏，不给右栏写死宽度：
     写死 14rem(756px) 时，右栏在 1280 窗口下会吃掉一大半，
     左图只剩 423px 宽 —— 看着像张缩略图，左右完全失衡。
     1.1 : 0.9 让 1600 下是「845 / 692」、1280 下是「648 / 530」，两边都站得住。
   ★ 交叉轴不写 align-items（= stretch）：两栏等高，
     右栏最后那张提示卡用 margin-top:auto 沉到底 ——
     结果就是「右下角的提示卡与左侧产品图的底边齐平」（参考图也是这个构图）。 */
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: .56rem;
  padding: .44rem .3rem .1rem; max-width: var(--cw-page); margin: 0 auto;
}
.sw-left { min-width: 0; }
/* 右栏。★ 三处都不能省：
     · font-size —— 不写就继承根字号 54px，每一行的 line box 被撑到约 64px（见 ②）；
     · min-width:0 —— 不给的话 grid item 不会收缩到内容宽度以下；
     · flex 列 —— 子元素一律占满栏宽，且被块级化
       （.sw-tag 那种 inline 元素不再产生半行距，见 ①）。 */
.sw-right {
  min-width: 0;
  display: flex; flex-direction: column;
  font-size: .24rem; line-height: 1.5;
}

.sw-shot img {
  width: 100%; display: block;
  border-radius: .3rem;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  transition: opacity .18s;
}

/* 界面图切换：左边四个药丸，右边一句"还有几张、怎么切"。
   两端对齐 —— 原来整行只有四个药丸杵在左边，右半边空一大截。 */
.sw-thumbs {
  display: flex; align-items: center; justify-content: space-between;
  gap: .2rem; margin-top: .18rem; flex-wrap: wrap;
}
.sw-thumbs-btns { display: flex; gap: .1rem; flex-wrap: wrap; }
.sw-thumbs-note { font-size: .18rem; color: var(--text-3); letter-spacing: .04em; }
.sw-thumbs button {
  height: .58rem; padding: 0 .24rem;
  display: flex; align-items: center;
  border-radius: 50px; font-size: .2rem;
  background: var(--glass); color: var(--text);
  transition: background-color .25s, color .25s;
}
.sw-thumbs button:hover { background: var(--glass-hi); }
.sw-thumbs button.on { background: var(--pill); color: var(--text-dark); font-weight: 500; }

/* ★ 必须是块级（display:flex + width:max-content），别改回 inline-flex：
   inline 元素站在 line box 里，父级 line-height:normal + 字号 54px
   ⇒ 上方凭空多出 37.5px，整栏比左图低一截（"没对齐"的头号来源）。 */
.sw-tag {
  display: flex; width: max-content; align-items: center;
  height: .5rem; padding: 0 .2rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .18rem; color: var(--text-2);
  letter-spacing: .06em;
}
.sw-right h1 {
  font-size: .72rem; line-height: 1.16; font-weight: 700;
  margin: .24rem 0 0;
  background: linear-gradient(100deg, #fff 30%, #b9c7e8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sw-sub { margin: .16rem 0 0; font-size: .26rem; line-height: 1.62; color: var(--text-2); }

/* 一行硬信息，用 · 分隔。
   原来这里挂五个并列药丸（静态/动态、多显示器、本地导入…），
   说的和下面四条特性是同一批卖点 —— 重复讲一遍，还把版面切碎、
   白占一整行纵向空间。 */
.sw-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 .14rem;
  margin: .2rem 0 0;
  font-size: .2rem; color: var(--text-3); letter-spacing: .02em;
}
.sw-meta i { font-style: normal; opacity: .55; }

/* 特性条目：图标块 + 标题 + 说明，条目之间用一条细线分隔。
   用"线"而不是"更大的留白"，是因为四条说明长短不一，
   只靠留白分不出"新的一条开始了"，有线一眼就数得清。
   ★ li 内那个 div 必须 flex:1 + min-width:0，否则它按内容宽收缩
     （实测只有 308px），说明文字全被折断（见 ③）。 */
.sw-feats {
  list-style: none; margin: .3rem 0 0;
  border-top: 1px solid var(--line);
}
.sw-feats li {
  display: flex; gap: .18rem; align-items: flex-start;
  padding: .22rem 0;
  border-bottom: 1px solid var(--line);
}
.sw-feats li > div { flex: 1 1 auto; min-width: 0; }
.sw-feats i {
  width: .54rem; height: .54rem; flex: none;
  display: grid; place-items: center;
  border-radius: .16rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #a9bce0;
}
.sw-feats i svg { width: .28rem; height: .28rem; }
.sw-feats b { display: block; font-size: .24rem; line-height: 1.4; font-weight: 600; }
.sw-feats span { display: block; margin-top: .06rem; font-size: .2rem; line-height: 1.6; color: var(--text-2); }

/* margin-bottom 是给下面那张提示卡留的"最小间距"：
   flex 里相邻 margin 不会塌陷，所以 .sw-tip 的 margin-top:auto
   只会在这 .3rem 之上再加余量 —— 保证任何情况下都不断开也不贴死。 */
.sw-acts { display: flex; gap: .12rem; flex-wrap: wrap; margin: .32rem 0 .3rem; }
.sw-acts .btn { width: auto; padding: 0 .3rem; }

/* 「第一次打开会弹蓝色提示」的说明。
   ★ 为什么放在下载按钮旁边、而不是只写在安装向导里：
     那个蓝框出现在**双击刚下载的 exe 的那一刻**，比安装向导还早一步 ——
     只在向导里写，用户根本看不到就被拦住了。这里先说一句最管用。 */
.sw-tip {
  position: relative;
  /* ★ 让它"吃掉"右栏的剩余高度：
       左列高度 = 图宽 ÷ 1.376 + 切换行，随窗口变；右栏内容高度基本恒定。
       所以宽屏（1920）下右栏会多出 100px 左右、窄屏（1280）下几乎正好。
       如果只写 margin-top:auto，那 100px 就摊在按钮和卡片之间，像断开的两块；
       改成 flex:1 让**卡片自己变高**、文字垂直居中 ——
       空隙没了，而且卡片底边照样与左图底边齐平（对齐依然成立）。
     ★ flex-shrink 必须是 0：右栏装不下时宁可让左列多留一点白，
       也不能把这张卡压扁。 */
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  margin-top: .3rem;
  padding: .2rem .24rem .2rem .32rem;
  border-radius: .16rem;
  font-size: .19rem; line-height: 1.72; color: var(--text-2);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
}
/* 左侧那条竖线：一眼看出"这是附注、不是正文"，又不用多一级标题。
   （`.sw-tip` 原来的 `max-width: 30rem` = 1620px 比右栏还宽，等于没写，去掉了。） */
.sw-tip::before {
  content: ''; position: absolute; left: 0; top: .18rem; bottom: .18rem;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f7b733, #e07c0a);
}
.sw-tip b { display: block; color: var(--text); font-weight: 600; line-height: 1.5; }
.sw-tip p { margin: .12rem 0 0; }

.sw-block { padding: .5rem .3rem .1rem; max-width: var(--cw-page); margin: 0 auto; }
.sw-block h2 { font-size: .44rem; font-weight: 600; margin-bottom: .12rem; }
.sw-lead { font-size: .24rem; line-height: 1.66; color: var(--text-2); max-width: 42rem; }
.sw-lead code {
  font-size: .22rem; padding: .02rem .1rem;
  border-radius: .08rem;
  background: rgba(255, 255, 255, .08);
}

/* ---------- 实测数据区（2026-09-28 重做：原来只是四张"数字卡"，太像报表） ----------
   改法：① 上面加一个「本机实测」的章，先把"这数字可信"这件事说掉；
        ② 三张指标卡，每张是「指标名 → 大数字 → 一句人话」；
        ③ 底下一根**自身内存条**（2026-10-07 老板令：不对比竞品）——
           只画自己 29 MB 一小格，文案只强调自身轻，不提任何同类软件。
   ★ 内边距一律「上下 .32rem / 左右 .34rem」（原来 .sw-versus 的左右是 .4rem，
     结果它的内容比上面三张卡往右偏 3.3px，一行行看下来就是"没对齐"）。 */
.sw-eyebrow {
  display: flex; width: max-content; align-items: center; gap: .1rem;
  height: .46rem; padding: 0 .22rem;
  border-radius: 50px;
  font-size: .18rem; letter-spacing: .08em;
  color: #9fd8b4;
  background: rgba(87, 201, 138, .12);
  border: 1px solid rgba(87, 201, 138, .34);
  margin-bottom: .18rem;
}
.sw-eyebrow i { display: grid; place-items: center; width: .26rem; height: .26rem; }
.sw-eyebrow i svg { width: .24rem; height: .24rem; }

.sw-metrics { display: flex; flex-wrap: wrap; gap: .24rem; margin-top: .3rem; }
.sw-metric {
  /* ★ 基准宽度按「容器三等分」算，别写成固定 rem：
     写 `8.5rem`（≈459px）时，只要容器落在「放得下两张、放不下三张」的那段宽度
     （约 918~1377px），第三张就被挤到第二行**孤零零一行**，右边空一大块
     —— 本机 390 宽的手机上就是这么显示的（真踩过，2026-09-28）。
     `calc((100% - 两处间隙) / 3)` 让它在任何宽度下都保持三列，直到
     ≤800px 那条断点把它改成单列。 */
  flex: 1 1 0;
  flex-basis: calc((100% - .48rem) / 3);
  min-width: 5.5rem;
  padding: .32rem .34rem;
  border-radius: .3rem;
  background:
    radial-gradient(420px 200px at 88% -10%, rgba(140, 160, 220, .18), transparent 72%),
    rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.sw-metric .k { display: block; font-size: .2rem; color: var(--text-3); letter-spacing: .06em; }
.sw-metric em {
  display: block; font-style: normal;
  font-size: .84rem; font-weight: 700; line-height: 1.08;
  margin: .12rem 0 .14rem;
  background: linear-gradient(100deg, #fff 20%, #a9bce0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sw-metric em i {
  font-style: normal; font-weight: 600;
  font-size: .3rem; margin-left: .06rem; letter-spacing: .02em;
}
.sw-metric p { font-size: .2rem; line-height: 1.6; color: var(--text-2); }

/* 对比条 */
.sw-versus {
  margin-top: .24rem; padding: .34rem;
  border-radius: .3rem;
  background:
    linear-gradient(120deg, rgba(240, 167, 46, .13), rgba(232, 120, 30, .08)),
    rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.sw-vs-head { font-size: .22rem; color: var(--text-2); letter-spacing: .06em; margin-bottom: .26rem; }
.sw-vs-row { margin-bottom: .24rem; }
.sw-vs-row .top { display: flex; align-items: baseline; justify-content: space-between; gap: .2rem; margin-bottom: .1rem; }
.sw-vs-row .nm { font-size: .2rem; color: var(--text-2); }
.sw-vs-row .num { font-size: .28rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-vs-row .num.ok { color: #8fd8ad; }
.sw-vs-row .track { height: .3rem; border-radius: 50px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.sw-vs-row .track i { display: block; height: 100%; border-radius: 50px; }
.sw-vs-row .track i.mine { background: linear-gradient(90deg, #f0a72e, #e07c0a); }
.sw-vs-foot { font-size: .19rem; line-height: 1.62; color: var(--text-3); }
.sw-vs-foot b { color: var(--text); font-weight: 600; }

.sw-steps { display: flex; flex-wrap: wrap; gap: .24rem; margin-top: .3rem; }
.sw-steps > div {
  /* ★ 和指标卡同一个道理：按容器三等分，别写死基准宽（9rem=486px 时，
     1100px 窗口下会变成「两张一行 + 一张孤行」）。 */
  flex: 1 1 0;
  flex-basis: calc((100% - .48rem) / 3);
  min-width: 0;
  padding: .32rem .34rem;
  border-radius: .3rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.sw-steps b {
  display: grid; place-items: center;
  width: .7rem; height: .7rem; margin-bottom: .16rem;
  border-radius: 50%;
  background: var(--pill); color: var(--text-dark);
  font-size: .3rem; font-weight: 700;
}
.sw-steps h4 { font-size: .26rem; font-weight: 600; margin-bottom: .08rem; }
.sw-steps p { font-size: .2rem; line-height: 1.58; color: var(--text-2); }

.sw-tie { padding-bottom: .5rem; }
.sw-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: .14rem;
  margin-top: .3rem;
}
.sw-flow span {
  height: .66rem; padding: 0 .28rem;
  display: flex; align-items: center;
  border-radius: 50px; font-size: .22rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}
.sw-flow i { font-style: normal; color: var(--text-3); font-size: .24rem; }
.sw-flow span:first-child { background: var(--pill); color: var(--text-dark); font-weight: 500; }
.sw-flow span.two {
  background: linear-gradient(120deg, rgba(240, 167, 46, .92), rgba(232, 120, 30, .92));
  border-color: transparent; color: #fff; font-weight: 500;
}
.sw-flow span.two b { font-weight: 400; opacity: .6; margin: 0 .06rem; }

@media (max-width: 1100px) {
  /* 窄到放不下两栏：产品图在上、说明在下。间距要比两栏时小一点，
     否则图下面空一大段才开始说事。 */
  .sw-hero { grid-template-columns: 1fr; gap: .4rem; }
  .sw-hero, .sw-block { padding-left: 16px; padding-right: 16px; }

  /* ---------- 小屏字号补丁（重要，别删） ----------
     本站 ≤1100px 会把 html 字号压到 34px、≤800px 压到 26px（为了塞下顶栏），
     而这一页所有尺寸都是按 54px 的根字号配的。不补的话实测是：
         1100 宽 → 特性说明 6.8px、蓝框提示 6.46px
          800 宽 → 特性说明 5.2px、蓝框提示 4.94px
     —— 整段直接看不清。所以这两档把**字号**按桌面实际像素写死回来；
     内边距、圆角继续跟着根字号缩，小屏本来也该更紧凑。 */
  .sw-tag { font-size: 10px; }
  .sw-right { font-size: 13px; }
  .sw-right h1 { font-size: 39px; }
  .sw-sub { font-size: 14px; }
  .sw-meta { font-size: 11px; }
  .sw-thumbs button { font-size: 11px; min-height: 32px; padding: 0 14px; }
  .sw-thumbs-note { font-size: 10px; }
  .sw-feats li { padding: 14px 0; }
  .sw-feats li b { font-size: 13px; }
  .sw-feats li span { font-size: 11px; }
  .sw-feats i { width: 34px; height: 34px; border-radius: 10px; }
  .sw-feats i svg { width: 18px; height: 18px; }
  /* 根字号缩小后按钮会矮到点不着，给可点区域一个下限 */
  .sw-acts .btn { font-size: 13px; min-height: 42px; padding: 0 18px; }
  .sw-tip { font-size: 10.5px; }
  .sw-block h2 { font-size: 24px; }
  .sw-lead { font-size: 13px; }
  .sw-lead code { font-size: 12px; }
  .sw-eyebrow { font-size: 10px; }
  /* 三列块的间距也写回像素 —— 注意 flex-basis 里的减项要跟着改，
     否则「减 12.5px、实际间隙 28px」会让三张卡一起挤出容器。 */
  .sw-metrics, .sw-steps { gap: 14px; }
  .sw-metric, .sw-steps > div { flex-basis: calc((100% - 28px) / 3); }
  .sw-metric, .sw-versus, .sw-steps > div { padding: 18px; }
  .sw-metric .k { font-size: 11px; }
  .sw-metric em { font-size: 45px; }
  .sw-metric em i { font-size: 16px; }
  .sw-metric p { font-size: 11px; }
  .sw-vs-head { font-size: 12px; }
  .sw-vs-row .nm { font-size: 11px; }
  .sw-vs-row .num { font-size: 15px; }
  .sw-vs-foot { font-size: 10.5px; }
  .sw-steps b { font-size: 16px; }
  .sw-steps h4 { font-size: 14px; }
  .sw-steps p { font-size: 11px; }
  .sw-flow span { font-size: 12px; }
  .sw-flow i { font-size: 13px; }
}
/* 调试/预览用：网址带 ?demo 时把 hover 状态静态展开，方便截图核对 */
body.demo-hover .card .info { opacity: 1; transform: translateY(0); }
body.demo-hover .card .shot { transform: scale(1.15); }
body.demo-hover .avgrid .card .shot { border-radius: 50%; transform: translateY(-56%); }
body.demo-hover .avgrid .card .avgo { opacity: 1; transform: none; }
body.demo-hover .avgrid .card .avlab { opacity: 1; }

@media (max-width: 1100px) {
  .avbox { flex-direction: column; width: min(26rem, 94vw); }
  .av-right { width: 100%; }
  /* 这两档原来在 .avgrid .card 上写死百分比宽度（flex 时代算列数用的），
     2026-09-29 全站改 grid 后已失效且有害 —— 列数改由上面的
     「头像墙列数档位」那段管，这里不要再碰卡片宽度。 */
}
@media (max-width: 800px) {
  .av-head h1 { font-size: .72rem; }
  .av-head p { font-size: .3rem; }
  .avup { margin-left: 0; }
  /* 软件页的三列块（实测指标卡、三步说明）：窄屏改单列 ——
     强行三列会挤成一团，两列又会剩一张孤行，单列读起来最顺。 */
  .sw-metric { flex-basis: 100%; min-width: 0; }
  .sw-steps > div { flex-basis: 100%; }
  /* 手机档（根字号 26px）：正文再抬一档，11px 在真机上是"眯着眼看"那种 */
  .sw-right h1 { font-size: 30px; }
  .sw-sub { font-size: 15px; }
  .sw-meta { font-size: 12px; }
  .sw-feats li b { font-size: 15px; }
  .sw-feats li span { font-size: 13px; }
  .sw-tip { font-size: 12.5px; }
  .sw-lead { font-size: 14px; }
  .sw-metric .k, .sw-metric p { font-size: 13px; }
  .sw-metric em { font-size: 40px; }
  .sw-steps h4 { font-size: 16px; }
  .sw-steps p { font-size: 13px; }
  .sw-vs-row .nm, .sw-vs-foot { font-size: 12px; }
  .sw-acts .btn { font-size: 14px; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   文档页（用户协议 / 隐私政策）
   ------------------------------------------------------------
   ★ 这一页的字号**一律写 px，不写 rem** —— 本站唯一这么干的地方，
     故意的，别"顺手统一"回去。
     原因：根字号有三档缩放（54px / ≤1100px 的 34px / ≤800px 的 26px），
     而全站 rem 是按 54px 配的 ⇒ 手机上 .2rem 只剩 5.2px。
     文档页是「拿来读的正文」，不该跟着屏幕变小，所以用真实像素写死，
     三档下一样大。（2026-09-28 修软件页时踩到的同一个坑。）

   ★ 文档页**刻意不加载业务脚本**（import 不动：它没有网格可填，
     加载 app.js 只会因为找不到 #grid 报错）。所以顶栏那几个
     「要 JS 才活」的东西在这里是死的 —— 与其留着点了没反应，
     不如直接收起来：搜索框、悬浮回顶钮、贴底推广条。
     回顶改用页面底部一个普通锚点链接（纯 HTML，不需要 JS）。
   ============================================================ */
body[data-page="doc"] .searchwrap,
body[data-page="doc"] #totop,
body[data-page="doc"] #slider,
body[data-page="doc"] .promobar { display: none; }

html { scroll-behavior: smooth; }

.doc-wrap {
  /* 正文行宽上限 940px：再宽，眼睛扫一行要转头（参考站也是这个量级）。
     ⚠️ 不能借 --cw-page（那个是 1600px），那是给产品图 / 卡片网格用的。 */
  width: min(940px, 100% - 32px);
  margin: 0 auto;
  padding: 44px 0 90px;
}

/* ---------- 标题区：居中大标题 + 生效/修改日期 ---------- */
.doc-head { text-align: center; margin-bottom: 26px; }
.doc-head h1 {
  font-size: 32px; font-weight: 700; letter-spacing: .06em;
  color: var(--text); margin-bottom: 12px;
}
.doc-dates {
  font-size: 13px; color: var(--text-3); letter-spacing: .02em;
  display: inline-flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
}
.doc-dates i { font-style: normal; opacity: .5; }

/* ---------- 条款卡：一整块玻璃，条目用圆点分列 ---------- */
.doc-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(680px 260px at 82% -12%, rgba(140, 160, 220, .16), transparent 70%),
    rgba(255, 255, 255, .05);
  padding: 26px 30px 10px;
}
.doc-lead {
  font-size: 14px; line-height: 1.9; color: var(--text-2);
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 17px;
  font-size: 14px; line-height: 1.9; color: var(--text-2);
}
.doc-list > li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .34);
}
.doc-list b { color: var(--text); font-weight: 600; }
.doc-list em {
  font-style: normal; font-weight: 600; color: #ffd9a8;
  background: rgba(255, 190, 110, .1);
  padding: 1px 5px; border-radius: 5px;
}
.doc-list a { color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .3); }
.doc-list a:hover { border-bottom-color: rgba(255, 255, 255, .7); }

/* 结尾那句（"访问本站即表示同意…"） */
.doc-end {
  margin-top: 22px; padding: 20px 30px 24px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, .03);
  font-size: 14px; line-height: 1.9; color: var(--text-2);
  text-align: center;
}

/* ---------- 联系方式一行 ---------- */
.doc-contact {
  display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center;
  margin-top: 24px; font-size: 13.5px; color: var(--text-3);
}
.doc-contact a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); text-decoration: none;
}
.doc-contact a:hover { color: var(--text); }
.doc-contact svg { width: 16px; height: 16px; opacity: .7; }

/* 文档之间互链（页脚那行） */
.doc-nav {
  display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center;
  margin-top: 30px; font-size: 13.5px;
}
.doc-nav a, .doc-nav span {
  color: var(--text-3); text-decoration: none;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
}
.doc-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .09); }

@media (max-width: 800px) {
  .doc-wrap { width: calc(100% - 24px); padding: 26px 0 64px; }
  .doc-head h1 { font-size: 24px; }
  .doc-dates { font-size: 12px; }
  .doc-card { padding: 20px 18px 6px; border-radius: 14px; }
  .doc-lead, .doc-list > li { font-size: 13.5px; }
  .doc-end { padding: 18px 18px 22px; font-size: 13.5px; border-radius: 0 0 14px 14px; }
}

/* ============================================================
   主题切换按钮（太阳 / 月亮）
   ------------------------------------------------------------
   按钮本身是 .ricon（跟搜索、随机、回顶同一套）；
   这里只管「哪个图标该露脸」—— 太阳只在白天模式显示，月亮只在黑夜。
   ============================================================ */
#theme .ico-sun { display: none; }
html[data-theme="light"] #theme .ico-sun { display: block; }
html[data-theme="light"] #theme .ico-moon { display: none; }

/* ============================================================
   白天模式（纯白极简）  ← 2026-09-29 老板要求可手动切换
   ------------------------------------------------------------
   调性是他自己挑的：「纯白极简 + 卡片式带轻阴影」。

   实现上只有一条纪律：**这一段只覆盖颜色变量**，上面那些黑夜样式一行都不动 ——
   所以白天模式出问题，只可能出在这一段里，排查范围是封闭的。

   ⚠️ 压在图片上的东西（视频角标 / hover 信息面板 / 卡片底条）**故意不跟着变**：
      它们底下是照片，浅色玻璃压上去字会看不清，黑玻璃在两种主题下都稳。
      这就是 --card-info / --card-bar 没有白天版本的原因。
   ============================================================ */
html[data-theme="light"] {
  /* ★ 2026-10-16 视觉升级（老板：「配色太丑…要有视觉冲击力」）：
     死白 → 瓷白渐变 + 顶部两团淡靛蓝晨光晕（呼应黑夜模式的光斑概念，
     白天用「晨光」表达）；浮层（--bg-2）改纯白 —— 白卡浮在微灰底上层次立现。
     品牌色收敛成唯一主角：靛蓝 #ee8f1a（CTA / 选中态 / 分页全是它）。 */
  --bg-0: #eef0f4;
  --bg-1: #f7f8fb;
  --bg-2: #ffffff;
  --bg-glow:
    radial-gradient(1200px 520px at 20% -8%, rgba(240, 167, 46, .11) 0%, transparent 62%),
    radial-gradient(980px 460px at 82% -6%, rgba(232, 120, 30, .07) 0%, transparent 58%);
  --bg-grad: linear-gradient(180deg, #f8f9fc 0%, #eef0f4 54%, #e9ecf2 100%);
  --noise: .012;                       /* 一点点噪点防色带，比黑夜轻 */

  --glass: #f1f3f7;
  --glass-2: #f4f6f9;
  --glass-3: #eef1f5;
  --glass-hi: #e6eaf0;

  --card-bg: #ffffff;
  --card-edge: rgba(16, 24, 40, .10);
  --line: rgba(16, 24, 40, .10);
  --line-hi: rgba(16, 24, 40, .22);

  --text: #1a1d21;
  /* ★ 2026-09-29 老板：「白色模式下注意字的对比要能看清」。
     原来 --text-2 是 .62、--text-3 是 .42 —— 在白底上算下来只有 4:1 / 2.3:1，
     页脚、推广条副标题、分类导航那个「分类」小标都显得发灰。
     ★ 2026-10-10 老板再提「日间模式很多字看不清」，整体再提一档：
       .76 ≈ 6.4:1（正文次级），.62 ≈ 4.6:1（次要信息，过 WCAG AA 4.5:1 线）。
       别再往深调 —— --text-3 再深就要跟 --text-2 抡戏了。 */
  --text-2: rgba(26, 29, 33, .76);
  --text-3: rgba(26, 29, 33, .62);
  --text-dark: #1a1d21;                /* 压在 --pill（白）上的字 */
  --text-dark-2: #5d5d5d;

  --pill: #ffffff;                     /* 选中块：白块浮在浅灰底上 */
  --accent: #ee8f1a;

  --sb: rgba(16, 24, 40, .18);
  --sb-hi: rgba(16, 24, 40, .32);

  /* 阴影是白天模式的主角 —— 白卡片没有描边，边界全靠它撑。
     ★ 2026-10-16：双层柔和投影（贴地一层 + 漂浮一层），冷调墨蓝灰；
       hover 那档掺一点品牌蓝 —— 卡片抬起时带出「苏醒感」。 */
  --shadow-card: 0 1px 2px rgba(23, 32, 62, .05), 0 10px 30px rgba(23, 32, 62, .10);
  --shadow-card-hi: 0 4px 10px rgba(224, 130, 12, .10), 0 22px 48px rgba(23, 32, 62, .17);
  --shadow-bar: 0 4px 18px rgba(23, 32, 62, .08);
  --shadow-pill: 0 2px 12px rgba(238, 143, 26, .26);   /* 选中滑块带蓝晕 */

  --panel: rgba(255, 255, 255, .88);   /* 底部筛选条 / 右上圆钮：白玻璃 */
  --panel-solid: rgba(255, 255, 255, .97); /* 下拉面板 / 贴底推广条 */
  --input-bg: rgba(16, 24, 40, .05);   /* 搜索框内部：浅灰 */
  --shadow-panel: 0 10px 30px rgba(23, 32, 62, .12);
  /* 次要按钮：白玻璃上再浅灰一点点就看不出来了，所以比 --glass 深一档 */
  --btn-soft: #e8ecf2;
}

/* 2026-10-13：顶栏胶囊与分类导航胶囊壳已撤（常规通栏 head）——
   白天模式条底自动是白玻璃（--panel）、下边线走 --line，无需额外补边 */
html[data-theme="light"] .catnav { border: 0; }

/* 白天模式：详情页换壳排 / 填充排换白玻璃（2026-09-30 第十五波）。
   这两条的底原本**硬编码成深色玻璃** rgba(16,16,20,.72)，白天模式下按钮文字
   （--text-2）自动变成深色 ⇒ 深字压深底，老板截图里「手机/笔记本…」「完整/原图」
   全糊了。文字色本来就是变量、白天会自己变深，所以只要把**底**换掉即可；
   选中块是白底(--pill)浮在白玻璃上，补一圈细边才分得出来。 */
html[data-theme="light"] .devpick,
html[data-theme="light"] .fillpick {
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-pill);
}
html[data-theme="light"] .devpick button.on,
html[data-theme="light"] .fillpick button.on { box-shadow: inset 0 0 0 1px var(--line); }

/* 选中态统一金口音（2026-10-16）：日间=淡金底 + 金字 —— 跟金橙导航一个体系 */
html[data-theme="light"] .cn-item.on {
  background: #fdf3e2;
  box-shadow: inset 0 0 0 1px rgba(224, 130, 12, .38), 0 1px 4px rgba(224, 130, 12, .12);
}

/* 二级细分行和一级之间的分隔线，浅色下要更淡 */
html[data-theme="light"] .cn-sub { border-top-color: rgba(16, 24, 40, .08); }

/* 筛选条里「这一项已经筛上了」的那圈描边：黑夜用的是白描边，
   白底上等于没有 —— 白天换成深色描边（老板第六波：「白色模式下注意字的对比」）。 */
html[data-theme="light"] .dd.on .dd-trigger { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .26); }

/* 当前页那个白块：黑夜是「白块浮在深玻璃上」，一眼看得出；
   白天分页器本身已经是白玻璃了，白块压白底 = 只剩加粗，等于丢了「我在第几页」。
   换一档浅灰底表述同一件事（跟 .cn-item.on 在白天靠阴影浮起来是同一个思路）。 */
html[data-theme="light"] .pg.current {
  background: var(--glass-3);
  color: var(--text);
}

/* 文档页（用户协议 / 隐私政策）：原来是黑玻璃卡片，白天换成白卡 + 淡边 */
html[data-theme="light"] .doc-card { background: #ffffff; border: 1px solid var(--line); }
html[data-theme="light"] .doc-nav a,
html[data-theme="light"] .doc-nav span { background: #ffffff; }
html[data-theme="light"] .doc-nav a:hover { background: var(--glass-hi); }

/* logo 那个彩色球在黑底上靠发光浮起来，白底上要把外发光收掉、改用淡投影 */
html[data-theme="light"] .logo i {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .18), 0 2px 8px rgba(110, 140, 205, .35);
}

/* ============================================================
   日间模式补丁（2026-10-10 老板：「日间模式下有很多字看不清晰」）
   ------------------------------------------------------------
   病灶全是**写死的黑夜专用色没走变量**，白底上直接隐形：
     · .sw-right h1 / .sw-metric em —— 渐变字起点是 #fff，白底上整段消失；
     · .sw-tag / .sw-feats i —— 白玻璃底 + 白描边，白底上等于没有；
     · .doc-list em —— 浅橙 #ffd9a8（黑夜高亮色），白底上看不见；
     · .doc-list 的圆点 / 虚线链接下划线 —— 白色系，白底上消失。
   修法照旧：只在这段里覆盖颜色，不动上面的黑夜样式。
   ============================================================ */

/* 软件页：顶部「自桌面软件 · Windows」小胶囊 —— 换浅灰底 + 深描边 */
html[data-theme="light"] .sw-tag {
  background: var(--glass);
  border-color: var(--line);
}

/* 软件页：大标题与指标大数字的渐变字 —— 白底上改「深墨 → 品牌蓝」渐变
   （2026-10-16 终点色跟全站新品牌蓝 #ee8f1a 对齐） */
html[data-theme="light"] .sw-right h1 {
  background-image: linear-gradient(100deg, #23272e 30%, #ee8f1a 100%);
}
html[data-theme="light"] .sw-metric em {
  background-image: linear-gradient(100deg, #23272e 20%, #ee8f1a 100%);
}

/* 软件页：特性条目的图标底座 —— 白玻璃换浅灰底、图标换品牌蓝 */
html[data-theme="light"] .sw-feats i {
  background: var(--glass-2);
  border-color: var(--line);
  color: var(--accent);
}

/* 协议/隐私页：琥珀高亮（em）—— 浅橙字换深琥珀，底色也加浓一档才托得住 */
html[data-theme="light"] .doc-list em {
  color: #8a5a17;
  background: rgba(255, 190, 110, .24);
}

/* 协议/隐私页：条目圆点与链接虚线下划线 —— 白色系换深色系 */
html[data-theme="light"] .doc-list > li::before { background: rgba(16, 24, 40, .30); }
html[data-theme="light"] .doc-list a { border-bottom-color: rgba(16, 24, 40, .35); }
html[data-theme="light"] .doc-list a:hover { border-bottom-color: rgba(16, 24, 40, .75); }

/* 推广条悬停面板（三条卖点）：底是**写死的深玻璃**（跟照片上的黑玻璃同一个道理，
   故意不随主题变）—— 但里面的字走 --text-2，白天会变深 ⇒ 深字压深底。
   面板保持深色、把字钉回浅色（同 --card-info 不做白天版本的逻辑）。 */
html[data-theme="light"] .pm-points li { color: rgba(255, 255, 255, .82); }
html[data-theme="light"] .pm-points li::before { color: #f5cd8a; }

/* 软件页对比条：「占优」的绿色数字与轨道底 —— 都是黑夜专用色 */
html[data-theme="light"] .sw-vs-row .num.ok { color: #1e7f52; }
html[data-theme="light"] .sw-vs-row .track { background: rgba(16, 24, 40, .08); }

/* ============================================================
   日间模式视觉升级（2026-10-16 老板：「配色太丑…要有视觉冲击力」）
   ------------------------------------------------------------
   设计语言一句话：**大面积安静的瓷白 + 唯一的主角靛蓝**。
   冲击力不靠堆颜色，靠「全页只有一颗蓝按钮 + 一条深色横条」的对比：
   ① 主 CTA：详情页「立即下载」/ 软件页「下载安装包」—— 白块压白卡
      等于隐形（--pill 白底在白天模式），改成靛蓝渐变实底+白字+蓝晕，
      成为整页最强的视觉焦点；
   ② 推广条反转成深靛蓝渐变 —— 白页上唯一一条深色横条 = 强对比锚点，
      顺手治掉浅紫徽章+浅灰按钮那股廉价感；
   ③ 选中态统一品牌口音：分页当前页实心蓝、tab/分类选中蓝字、
      筛选选中蓝描边 —— 「我在哪」一眼可读。
   纪律照旧：只在这一段里覆盖，上面黑夜样式一行不动。
   ============================================================ */

/* ① 主 CTA —— 全站最亮的那颗蓝 */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .pmb.primary {
  background: linear-gradient(135deg, #f7b733 0%, #ee8f1a 58%, #e07c0a 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(238, 143, 26, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
html[data-theme="light"] .btn.primary:hover {
  box-shadow: 0 10px 28px rgba(238, 143, 26, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* 详情页「立即下载」（#quickdl）：全站下载的**唯一主入口**，JS 里却挂的是
   次要按钮类 .btn.line（白玻璃浅灰底）—— 黑夜模式深底上还算醒目，
   白天浅灰压白卡直接塌掉。它是这一页的主角，单独提上来跟 .btn.primary
   同一套蓝（其余 .btn.line：收藏/绿色版/复位…是真次要，不动）。 */
html[data-theme="light"] #quickdl {
  background: linear-gradient(135deg, #f7b733 0%, #ee8f1a 58%, #e07c0a 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(238, 143, 26, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
html[data-theme="light"] #quickdl:hover {
  box-shadow: 0 10px 28px rgba(238, 143, 26, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ② 推广条：白天反转成深咖金（原条底 --panel-solid 白玻璃，这里整条换装） */
html[data-theme="light"] .promobar .promo-in {
  background: linear-gradient(115deg, #2e1f0a 0%, #4a2f0f 55%, #8a5410 135%);
  border: 1px solid rgba(240, 180, 80, .30);
  box-shadow: 0 -10px 44px rgba(74, 47, 15, .40), inset 0 1px 0 rgba(255, 255, 255, .14);
}
html[data-theme="light"] .pm-txt b { color: #fff; }
html[data-theme="light"] .pm-sub { color: rgba(255, 255, 255, .74); }
/* 徽章在深底上换「白玻璃」——原来的蓝紫渐变埋进深蓝里 */
html[data-theme="light"] .pm-badge {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
/* 深条上的按钮反转：主按钮=白底蓝字（跟整页的蓝 CTA 互为镜像），副按钮=白玻璃白字 */
html[data-theme="light"] .promobar .pmb.primary {
  background: #fff; color: #a05a08;
  box-shadow: 0 4px 14px rgba(46, 28, 8, .38);
}
html[data-theme="light"] .promobar .pmb:not(.primary) {
  background: rgba(255, 255, 255, .16); color: #fff;
}
html[data-theme="light"] .promobar .pm-x { color: rgba(255, 255, 255, .72); }
html[data-theme="light"] .promobar .pm-x:hover { color: #fff; }

/* ③ 选中态的品牌口音 */
/* 分页当前页：原来的浅灰块换实心靛蓝白字（覆盖上面那条 glass-3 的旧补丁） */
html[data-theme="light"] .pg.current {
  background: var(--accent); color: #fff;
  box-shadow: 0 3px 12px rgba(238, 143, 26, .34);
}
/* 顶栏 tab 选中：金橙渐变底自带白字（基础段已改，日间不再叠金字 —— 2026-10-16） */
/* 分类导航选中项：字上蓝 */
html[data-theme="light"] .cn-item.on { color: #a05a08; }
/* 筛选条「已筛上」描边：深灰描边换品牌蓝（覆盖上面那条旧补丁） */
html[data-theme="light"] .dd.on .dd-trigger { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* 详情页换壳排/填充排选中块：淡金底 + 金描边金字（白卡上「选了谁」一眼可读） */
html[data-theme="light"] .devpick button.on,
html[data-theme="light"] .fillpick button.on {
  background: #fdf3e2;
  box-shadow: inset 0 0 0 1.5px rgba(224, 130, 12, .50);
  color: #a05a08;
  text-shadow: none;
}
/* 头像页筛选选中：同款淡金 */
html[data-theme="light"] .avfilter.on {
  background: #fdf3e2;
  box-shadow: inset 0 0 0 1px rgba(224, 130, 12, .38);
  color: #a05a08;
  text-shadow: none;
}

/* ④ logo 彩色球：白瓷底上的投影掺品牌蓝，跟全页口音对齐 */
html[data-theme="light"] .logo i {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .16), 0 3px 12px rgba(240, 167, 46, .38);
}

/* ⑤ 详情页「收藏」长按钮：原来 --btn-soft 浅灰底压白卡 = 看不出来在哪。
   换白底 + 描边 + 品牌蓝字（次要但必须**看得见**）；已收藏态白天用深金。 */
html[data-theme="light"] #side .favbtn {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent);
  box-shadow: var(--shadow-bar);
}
html[data-theme="light"] #side .favbtn:hover {
  background: #fff;
  border-color: rgba(224, 130, 12, .50);
  box-shadow: 0 6px 18px rgba(238, 143, 26, .26);
}
html[data-theme="light"] #side .favbtn.on {
  color: #a8721e;
  border-color: rgba(212, 164, 76, .65);
  background: #fffdf5;
}

/* ============================================================
   手机端详情/列表专项（2026-10-12 老板定：这轮只动 ≤800，桌面不碰）
   ------------------------------------------------------------
   ① 列表缩略图直接出「手机预览」—— 卡片从 1:0.7 横卡改成 9:19.8 竖卡
      （与详情页手机壳同一比例）；.shot 本来就是 absolute + object-fit:cover，
      改卡片比例这一个数，缩略图就变成居中裁切的手机预览。
   ② 详情页手机上钉死手机壳 —— 手机/笔记本/通用屏/宽屏/超宽屏切换排整排
      隐藏（JS 侧同步钉 DVM.k='phone'，尺寸牌/下载口径跟它一致）。
   ③ 「完整」档手机上不提供（只要 铺满 / 原图）—— 按钮藏掉，
      JS 把历史存的 fit 并进 cover，不会出现「藏了但还停在完整」。
   ④ 「立即下载 / 收藏」钉成底部固定操作条 —— 图和按钮永远同屏，
      调完位置不用再下滑找按钮。
      ⚠️ 限定 #side：限额引导弹层 .dlgate 里也有 .btnrow，
         不加前缀会把弹层里的按钮排一起钉到屏幕底下。
   ============================================================ */
@media (max-width: 800px) {
  .card { aspect-ratio: 9 / 19.8; }

  .devpick { display: none; }
  .fillpick button[data-f="fit"] { display: none; }
  /* 铺满/原图排原本挂在展示台底部 —— 底部现在被固定操作条占了，
     不挪就是「半截埋在条底下」（实测 390：fillpick 768-806 vs 条 775 起）。
     设备排藏掉后展示台顶上空着，挪到顶上正合适。 */
  .fillpick { top: 12px; bottom: auto; }

  #side .btnrow {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    flex-direction: row; gap: 10px; width: auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2);
    border-top: 1px solid var(--line);
  }
  #side .btnrow .btn,
  #side .btnrow .favbtn { flex: 1 1 0; width: auto; height: 48px; font-size: 15px; }
  /* 过程提示从操作条上沿弹出来，别被条盖住 */
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* 信息栏滚到底也别钻进固定条底下 */
  .detail { padding-bottom: 92px; }
}

/* ============================================================
   手机端第二轮（2026-10-12 老板定，仍只动 ≤800，桌面零触碰）
   ------------------------------------------------------------
   ① 头部重做：搜索钮在左、日夜切换在右；首页圆标/顶部页签/
      随便一张/回顶/个人入口 全撤 —— 页签进底部标签栏，个人进中央。
   ② 列表卡片 9:19.8 → 9:16（老板：预览图太长了）。
   ③ 翻页重做：上一页/下一页 大按钮 + 中间页码，一排等分，手指点得到。
   ④ 页脚（说明/协议/备案）手机上撤下 —— 搬进个人中心页（account 保留），
      底部标签栏「个人」进去就能看。
   ⑤ 底部标签栏：壁纸 / 个人(中央圆钮) / 头像制作。
   ⑥ 详情：收藏/立即下载 条做小；手机壳 cap 收一档，缩略图完整露出。
   ============================================================ */

/* 基础（桌面）：标签栏整个不存在 */
.tabbar { display: none; }

@media (max-width: 800px) {
  /* ---- ① 头部 ---- */
  .topbar .logo, .topbar .tabs, #meBtn { display: none; }
  /* 回顶浮钮手机档不出现（2026-10-12 老板定：手机撤回顶） */
  .totop-float { display: none; }
  .topbar .navend { flex: 1 1 auto; justify-content: space-between; }
  /* theme.js 把日夜钮插在 navend **最前面** —— space-between 后它跑到左边去了，
     手机上要求搜索在左、日夜在右，把搜索排提到最前 */
  .topbar .searchwrap { order: -1; }
  /* ★ 顶栏图标真实像素：.ricon 是 .56rem，26px 根字号下只剩 15px ——
     「头部导航太小」的根就是它。38px 触控标准。 */
  .topbar .ricon { width: 38px; height: 38px; }
  .topbar .ricon svg { width: 20px; height: 20px; }

  /* ---- ② 列表卡片 9:16 ---- */
  .card { aspect-ratio: 9 / 16; }

  /* ---- ③ 翻页重做：⇠ 上一页 | 第 X / Y 页 | 下一页 ⇢ ----
     .page-main 是 justify-content:center，#pg 会被收成内容宽 ——
     按钮永远只有箭头那么宽（实测 33px），这就是「点不到」的根。
     撑满一行 + 按钮等分，目标 46px 高、小半屏宽，怎么都点得着。 */
  body[data-page="list"] .page-main { justify-content: stretch; }
  .pagination { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .pagination > .pgcur {
    order: 1; flex: 0 0 auto; padding: 0 4px;
    font-size: 14px; color: var(--text-2); white-space: nowrap;
  }
  .pagination > button.pg.nav:nth-of-type(2) { order: 2; }
  .pagination > button.pg.nav {
    flex: 1 1 0; min-width: 0; height: 46px;
    border-radius: 12px; background: var(--btn-soft);
    font-size: 15px; padding: 0 10px;
  }
  .pagination > button.pg.nav.disabled { opacity: .35; }

  /* ---- ④ 页脚搬家：个人中心页保留，其余页面撤 ---- */
  body[data-page="account"] .wpl-footer { display: block; }
  .wpl-footer { display: none; }

  /* ---- ⑤ 底部标签栏 ---- */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-2); border-top: 1px solid var(--line);
  }
  .tabbar .tb {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 11px; color: var(--text-3);
  }
  .tabbar .tb svg { width: 22px; height: 22px; }
  .tabbar .tb.on { color: var(--text); }
  /* 中央「个人」：抬高圆钮（常规 APP 的中央大键） */
  .tabbar .tb-me .tbc {
    width: 48px; height: 48px; border-radius: 50%; margin-top: -24px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pill); color: var(--text-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  }
  .tabbar .tb-me .tbc svg { width: 24px; height: 24px; }
  /* 详情页有自己的固定操作条；文档页是阅读页；软件页手机上没入口 —— 都不出栏 */
  body[data-page="detail"] .tabbar,
  body[data-page="doc"] .tabbar,
  body[data-page="software"] .tabbar { display: none; }
  /* 内容给栏让位（88px：翻页按钮 46 高，中心要在 56px 的栏之上——70 不够，实测被盖） */
  body[data-page="list"] .shell,
  body[data-page="avatar"] .shell { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body[data-page="account"] .wpl-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* ---- ⑥ 详情操作条做小 + 壳让位 ---- */
  #side .btnrow { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  #side .btnrow .btn,
  #side .btnrow .favbtn { height: 40px; font-size: 14px; }
  .toast { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .detail { padding-bottom: 64px; }
  .fillpick { top: 4px; }
}

/* ============================================================
   手机端第三轮（2026-10-12 老板定，仍只动 ≤800，桌面零触碰）
   ① 搜索/日夜彻底分开：搜索图标钉死左缘，点击后输入框从图标右侧
      向右展开（row-reverse —— 图标不再被展开的输入框顶着往中间漂）；
      展开宽度放大到 min(56vw, 236px)，日夜切换独占右上角。
   ② 卡片悬浮信息层（「前往」那层玻璃）手机上整个不要 —— 手指按住
      就弹纯属多此一举，点卡片本来就直接进详情。
   ③ 列表收藏星标做大：44px 触控热区（原 .46rem≈12px 根本点不到）。
   ④ 缩略图纵向裁切重心 26% 偏上（脸在上三分之一保得住）；
      横向焦点由 app.js 的能量窗（smartThumb）按图算，见那边。
   ============================================================ */
@media (max-width: 800px) {
  /* ① 头部：搜索左、日夜右，中间留白。
     2026-10-13 下午分类导航独立出头部后：手机档头部本来就全藏了
     （logo / tabs / navend / 个人 全是 none）⇒ 空壳整个撤掉；
     分类导航自己顶上去继续当「头部浮层」，吸顶行为和原来一模一样。 */
  .topbar { display: none; }
  .catnav { position: sticky; top: 0; z-index: 100; }
  .searchwrap { flex-direction: row-reverse; min-width: 0; }
  .searchwrap.open .searchbox { width: min(56vw, 236px); }
  .searchbox input { height: 38px; font-size: 14px; }

  /* ② 悬浮信息层撤掉 */
  .card .info { display: none; }

  /* ③ 收藏星标做大 */
  .card .favbtn { width: 44px; height: 44px; top: 6px; right: 6px; }
  .card .favbtn svg { width: 22px; height: 22px; }

  /* ④ 缩略图重心偏上保人脸 */
  .card .shot { object-position: 50% 26%; }
}

/* ============================================================
   手机端第四轮（2026-10-12 老板定，仍只动 ≤800，桌面零触碰）
   ① 日/夜切换撤掉 —— 手机固定夜间（theme.js 已配合钉死，按钮不插）；
      搜索也整个撤掉 —— navend 空了，整块拿掉。
   ② 列表收藏星标 44px 回调到 34px（老板：太大了）。
   ③ 分类导航规整成 app 式三行：
        第一行  一级分类横滑（不换行）+ 行尾固定「更多分类」
        第二行  筛选（排序/种类/分辨率/色系）横滑
        第三行  二级分类（选中一级且它有细分时）横滑
      胶囊统一 32px 高 / 13px 字，真·手指尺寸；滚动条全藏。
   ============================================================ */
@media (max-width: 800px) {
  /* ① 头部只剩内容本身：搜索/日夜整块撤（navend 塌掉）；
     2026-10-13 顶栏改通栏条之后，手机上把条底/边线/毛玻璃一并还原成透明 ——
     手机头部就是那条分类导航浮层，不要「一根深色横条」。 */
  .topbar .navend { display: none; }
  .topbar { background: transparent; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* ② 星标 34px */
  .card .favbtn { width: 34px; height: 34px; top: 8px; right: 8px; }
  .card .favbtn svg { width: 18px; height: 18px; }

  /* ③ 分类导航三行。
     ⚠️ catnav 必须保持 wrap（筛选行靠 flex-basis:100% 换行）——设 nowrap 会把
        筛选行也摁进第一行（1.0.73 首测翻车）；一级分类不换行由 cn-strip 自己的
        nowrap + 横滑保证，跟容器无关。 */
  .topbar .catnav {
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 0;
    padding: 4px 0 2px;
    background: transparent;
    border-color: transparent;
  }
  .cn-strip {
    order: 1;
    /* ★ basis 必须 0：basis=auto（内容宽）会把行尾的「更多分类」挤下去独行；
       basis=0 时 strip 跟更多分类同排，strip 占剩余宽、内部横滑。 */
    flex: 1 1 0%;
    min-width: 0;
    flex-wrap: nowrap; gap: 8px;
    padding: 4px 0;
  }
  .cn-more {
    order: 2; flex: 0 0 auto;
    height: 32px; padding: 0 12px; font-size: 13px;
    background: var(--glass-3);
  }
  .cn-div { display: none; }
  .filterbar {
    order: 3; flex: 1 1 100%; min-width: 0;
    flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0 4px;
  }
  .filterbar::-webkit-scrollbar { display: none; }
  .cn-sub { order: 4; flex: 1 1 100%; }
  .cn-item {
    height: 32px; padding: 0 13px; font-size: 13px;
    border-radius: 16px; background: var(--glass-3);
  }
  .cn-item.on { background: rgba(240, 167, 46, .16); }
  .dd .dd-trigger { height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; }
}

/* ============================================================
   手机端第五轮（2026-10-12 老板定，仍只动 ≤800，桌面零触碰）
   ① 「更多分类」撤掉 —— 会把一级分类盖住，手机上没它更好
      （一级分类本来就横滑，分类没藏在深处）。
   ② 头像制作的 全部/竖图/横图 筛选撤掉 —— 默认全部就够，
      「传自己的图」保留。桌面两个都原样。
   ============================================================ */
@media (max-width: 800px) {
  .cn-more { display: none; }
  .av-tabs .avfilter { display: none; }
}


/* ══════════ 手机端下载弹窗（2026-10-21）══════════
   只在手机端被 openDlModal() 拉起；桌面端永远不渲染这个节点。
   黑夜/白天两个主题都走 var() —— 跟着全站主题走，不单独写死颜色。 */
#dlmodal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: dlm-in .18s ease-out;
}
@keyframes dlm-in { from { opacity: 0; } to { opacity: 1; } }
#dlmodal .dlm-box {
  width: min(92vw, 420px);
  margin-bottom: max(4vh, env(safe-area-inset-bottom, 0px));
  background: var(--bg-2, #1b1b20);
  border: 1px solid var(--card-edge, rgba(255,255,255,.5));
  border-radius: 20px;
  padding: 22px 18px 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  animation: dlm-up .22s ease-out;
}
@keyframes dlm-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#dlmodal .dlm-title {
  text-align: center; font-weight: 700;
  margin-bottom: 16px; color: var(--text, #fff);
}
#dlmodal .dlm-btn {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 15px 18px; margin-bottom: 10px;
  background: var(--card-bg, rgba(255,255,255,.10));
  border: 1px solid var(--card-edge, rgba(255,255,255,.5));
  border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text, #fff);
  transition: transform .12s ease, background .12s ease;
}
#dlmodal .dlm-btn:active { transform: scale(.97); }
#dlmodal .dlm-btn.main {
  background: linear-gradient(135deg, #f7b733 0%, #ee8f1a 58%, #e07c0a 100%);
  border-color: transparent; color: #fff;
}
#dlmodal .dlm-btn b { font-size: 1.05em; }
#dlmodal .dlm-btn span { font-size: .82em; opacity: .82; }
#dlmodal .dlm-cancel {
  display: block; width: 100%; padding: 12px;
  background: none; border: none; color: var(--text-2, #999);
  font: inherit; cursor: pointer;
}