/* 由 cardMini/pages/rating/index.wxss 移植（rpx → rem；2026-10-22）—— 改样式请与本文件为准，勿回改小程序 */
/**
 * 筛选行（2026-10-13 需求）：**选择评分 + 选择分类 + 最新/高分/热门** 同一行。
 * 两个下拉都是自绘「按钮 + 三角箭头」，点击弹出 `.pmask/.ppanel` 面板。
 */
.filters {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin: 0.18rem 0.28rem 0;
}

.pick {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  flex: none;
  max-width: 1.68rem;
  height: 0.52rem;
  padding: 0 0.14rem;
  font-size: 0.26rem;
  color: var(--text-2);
  background: var(--brand-soft-2);
  border-radius: 0.08rem;
}

.pick--cat {
  max-width: 1.86rem;
}

/** 重置（2026-10-13 需求：放在「选择分类」旁边；纯文字、无底色，避免这一行被挤爆） */
.pick-reset {
  flex: none;
  height: 0.52rem;
  padding: 0 0.04rem;
  font-size: 0.25rem;
  line-height: 0.52rem;
  color: var(--brand);
}

.pick__text {
  font-size: 0.26rem;
  line-height: 1;
  color: var(--text-2);
}

/** 三角箭头（纯 WXSS，不用字符 / 图片） */
.pick__chev {
  flex: none;
  width: 0;
  height: 0;
  margin-top: 0.04rem;
  border-left: 0.08rem solid transparent;
  border-right: 0.08rem solid transparent;
  border-top: 0.09rem solid var(--text-3);
}

/* ---------------- 下拉面板（评分 / 分类共用） ---------------- */
.pmask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.4);
}

.ppanel {
  position: absolute;
  left: 0.28rem;
  right: 0.28rem;
  top: 26%;
  display: flex;
  flex-direction: column;
  max-height: 62vh;
  background: #ffffff;
  border-radius: 0.2rem;
  overflow: hidden;
}

.ppanel__title {
  flex: none;
  padding: 0.26rem 0.28rem 0.1rem;
  font-size: 0.26rem;
  font-weight: 700;
  color: var(--text);
}

.ppanel__list {
  flex: 1;
  min-height: 0;
  max-height: 52vh;
}

.pitem {
  display: flex;
  align-items: center;
  min-height: 0.86rem;
  padding: 0 0.28rem;
  font-size: 0.27rem;
  color: var(--text-2);
  border-top: 0.01rem solid var(--brand-soft);
}

/* 选中态：主题色 + 加粗 + 左侧竖条（**不用字符图标**） */
.pitem.is-active {
  padding-left: 0.22rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft-2);
  border-left: 0.06rem solid var(--brand);
}

.pitem__text {
  font-size: 0.27rem;
}

/* 品牌文字（2026-10-13 需求：**不加粗**，改主题橙红） */
.brand__p,
.brand__a {
  color: #e60012;
}

.brand__c {
  color: #ff8c00;
}

.brand__rest {
  margin-left: 0.08rem;
  /* 2026-10-13 需求：RATING 改为**灰色**（与 P/C/A 的红橙区分开） */
  color: var(--text-3);
}

.brand__cn {
  /* 2026-10-13 需求：**黑色文字、不加粗**（上一批曾改主题橙红，本轮改回黑色） */
  font-size: 0.38rem;
  font-weight: 400;
  color: var(--text);
}

/**
 * 列表里的**卡牌编号 tag**（2026-10-13 需求：PCA 评级编号不再显示，改显示编号如 `109/399`）。
 */
.citem__cardno {
  /* 与操作栏同一行（`.citem__foot`），本身不再留上下间距 */
  flex: none;
  min-width: 0;
}

.citem__cardno-v {
  display: inline-block;
  padding: 0.02rem 0.12rem;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #cf1322;
  background: #fff1f0;
  border-radius: 0.06rem;
}

/** 列表编号左段（`109`）—— 橙色 */
.citem__cardno-l {
  color: #ff8c00;
}

/** 列表编号分隔符 `/` —— 橙色 */
.citem__cardno-s {
  color: #ff8c00;
}

/** 列表编号右段（`399`）—— 橙色 */
.citem__cardno-r {
  color: #ff8c00;
}

/**
 * 评级**社区页**样式（2026-10-13 新增，多次迭代）—— 只保留「社区列表 + 查编号弹层」的样式。
 *
 * ⚠️ **详情已拆到独立页** `pages/rating-detail/index`（2026-10-13：手机返回要能回到社区、不退出小程序）：
 *    分数 / 等级 / 星级 / 四维分 / 评级编号 / 持有人 / 图片 / 点赞条 等样式都在
 *    `pages/rating-detail/index.wxss` 里 —— 改详情外观请改那个文件（两页的星级/心形画法保持同源）。
 *
 * ## 主题（2026-10-13 按需求改为「橙红 + 白」）
 * 在页面级覆盖 `app.wxss` 的品牌变量（**只作用于本页**，不影响发售日历 / 产品库）：
 *   - 主色 **橙红 `#E8451F`**，亮一档 `#FF7A45`；
 *   - **底色改为白**（`--bg: #ffffff`，原来是微灰），卡片靠阴影与浅灰块区分层次。
 * ⚠️ 若要把整端（日历/产品库/详情/投稿）也换成橙红，改 `app.wxss` 的 `page` 变量即可，别逐页硬编码。
 *
 * ## 图标
 * 点赞心形、扫码图标**全部纯 WXSS 绘制**（不许换 emoji / 字符 / 图片资源）。
 */


/* 本页没有 tabBar（非 tab 页），底部留白比其它页小 */
.rp {
  padding-bottom: 0.6rem;
}

/* 左上角 logo 已按需求隐藏（2026-10-13）—— 去掉全局 `.brand__text` 的左缩进，避免品牌文字左缩 */
.brand__text {
  margin-left: 0;
}

/* ---------------- 社区：搜索 ---------------- */
/**
 * 吸顶区（2026-10-13 需求）：**搜索栏 + 筛选栏固定钉在顶部**。
 * ⚠️ `top` 由 wxml 内联给出（= 状态栏高度），本文件不要写死；祖先链不能有 `overflow: hidden`（否则 sticky 失效）。
 * 背景必须是实色，否则列表内容会从下面透上来。
 */
.stickybar {
  /* 2026-10-13 需求：**CARD RATING 也一起固定**（nav 已移进本容器）—— 所以吸顶位置就是屏幕顶 `top: 0`，
     nav 自身的 `padding-top = 状态栏高度` 正好把品牌字顶到状态栏下方。 */
  position: sticky;
  top: 0;
  z-index: 30;
  padding-bottom: 0.12rem;
  /* 需求：背景色写死 #FFF */
  background: #ffffff;
  box-shadow: 0 0.06rem 0.16rem rgba(232, 69, 31, 0.06);
}

.rp-search {
  margin: 0.2rem 0.28rem 0;
}

.rp-search__row {
  display: flex;
  align-items: center;
  gap: 0.12rem;
}

/**
 * 搜索框（2026-10-13 需求：**不要圆角**、**不要搜索按钮** —— 用系统键盘的「搜索」键触发）。
 * 页面底色已改白，故输入框用浅灰底 + 直角，保证能看出输入区域。
 */
.rp-search__input {
  flex: 1;
  min-width: 0;
  height: 0.76rem;
  padding: 0 0.2rem;
  font-size: 0.27rem;
  color: var(--text);
  background: var(--soft);
  border-radius: 0;
}

.rp-search__ph {
  color: var(--text-3);
  font-size: 0.26rem;
}

/* 搜索框右侧的清除 ×（2026-10-13 需求：**用主题色**，不再是灰色）
   ⚠️ 只改颜色，不改 `.xmark` 的尺寸 —— 它的两条斜线用 `top: 0.09rem` 居中，改宽高会让线略偏。 */
.rp-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.44rem;
  height: 0.44rem;
  color: var(--brand);
}

/**
 * 搜索行右侧：「查编号」+ 扫码（2026-10-13 需求：查编号在搜索栏同一行，右侧是扫码图标）。
 * 两者都 `flex: none`，保证搜索框被压缩而不是按钮被挤掉。
 * 圆角按需求**只留一点点**（`0.08rem`，不是胶囊）—— 与直角搜索框形成「方框 + 微圆角按钮」的层次。
 */
.rp-search__byno {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 0.76rem;
  padding: 0 0.2rem;
  font-size: 0.24rem;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 0.08rem;
}

.rp-search__scan {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.76rem;
  height: 0.76rem;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 0.08rem;
}

/**
 * 扫码图标 = 扫描框 + 四条长短不一的竖条（形如 `[IIII]`，2026-10-13 需求）。
 * ⚠️ 纯 WXSS，勿换成字符 / emoji / 图片。
 */
.ico-scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  width: 0.4rem;
  height: 0.28rem;
  border: 0.03rem solid currentColor;
  border-radius: 0.04rem;
  box-sizing: border-box;
}

.ico-scan__bar {
  width: 0.03rem;
  background: currentColor;
  border-radius: 0.01rem;
}

.ico-scan__bar--1 {
  height: 0.16rem;
}

.ico-scan__bar--2 {
  height: 0.1rem;
}

.ico-scan__bar--3 {
  height: 0.18rem;
}

.ico-scan__bar--4 {
  height: 0.08rem;
}

/* ---------------- 社区：排序（最新 / 高分 / 热门，纯文字 + 下划线） ---------------- */
.sorts {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
}

.sort {
  flex: none;
  margin-right: 0.2rem;
  height: 0.52rem;
  line-height: 0.52rem;
  font-size: 0.25rem;
  color: var(--text-3);
}

.sort:last-child {
  margin-right: 0;
}

.sort.is-active {
  color: var(--brand);
  font-weight: 700;
}

/* ---------------- 社区：列表 ---------------- */
.clist {
  margin: 0.2rem 0.28rem 0;
}

/* 页面底色是白（见顶部 `page` 变量覆盖），卡片用「白底 + 橙红淡阴影」区分层次 */
.card {
  box-shadow: 0 0.04rem 0.2rem rgba(232, 69, 31, 0.08);
}

.citem {
  display: flex;
  align-items: stretch;
  /* 2026-10-13 需求：**item 高度改小** —— 内边距 20→0.12rem、间距 20→0.14rem、卡片间距 18→0.12rem */
  gap: 0.14rem;
  margin-bottom: 0.12rem;
  padding: 0.12rem 0.14rem;
  background: var(--card);
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.2rem rgba(232, 69, 31, 0.08);
}

.citem__cover {
  flex: none;
  width: 1.16rem;
  /* 2026-10-13 需求：**恢复固定高度**（上一批改成 `align-self: stretch` 会让图片被拉高变形，用户已要求改回） */
  height: 1.16rem;
  border-radius: 0.16rem;
  overflow: hidden;
  background: var(--soft-deep);
  font-size: 0.22rem;
  /* 「暂无图片」占位居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  text-align: center;
}

/**
 * 列表项上半区（2026-10-13 需求）：左 = **品牌 / 分类 上下两行**；右 = **分数 / 等级词 上下两行、靠右**。
 * 两侧同属一个 flex 行（`align-items: stretch` + 各自 `space-between`）⇒ 两列**等高**。
 */
.citem__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.12rem;
}

.citem__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.citem__brand {
  /* 2026-10-13 需求：品牌**不加粗**（分类才是加粗那行） */
  margin-top: 0.04rem;
  font-size: 0.22rem;
  font-weight: 400;
  color: var(--text-3);
}

.citem__cat {
  /* 2026-10-13 需求：分类**加粗**（上行） */
  font-size: 0.25rem;
  font-weight: 700;
  color: var(--text);
}

.citem__right {
  flex: none;
  display: flex;
  flex-direction: column;
  /* 评分栏：分数 / 等级词 两行（操作栏不在这里，避免撑宽挤压左侧） */
  align-items: flex-end;
  justify-content: space-between;
}

.citem__score {
  font-size: 0.34rem;
  font-weight: 700;
  line-height: 1.1;
  /* 2026-10-13 需求：评分字体改**橙色**（10.0 分例外，由 `.citem__score.is-perfect` 覆盖成黑底金字） */
  color: #ff8c00;
  white-space: nowrap;
}

.citem__unit {
  margin-left: 0.02rem;
  font-size: 0.2rem;
  font-weight: 400;
  /* 「分」跟随数字一起变橙（10.0 时被 .is-perfect 覆盖） */
  color: #ff8c00;
}

.citem__level {
  margin-top: 0.04rem;
  padding: 0.02rem 0.1rem;
  font-size: 0.19rem;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 0.08rem;
}

/** 满分时等级词（PERFECT）也黑底金字（2026-10-13 需求） */
.citem__level.is-perfect {
  color: #f5c542;
  background: #111111;
}

/** 10.0 分（2026-10-13 需求）：**黑底 + 金色字**（社区列表） */
.citem__score.is-perfect {
  /* 2026-10-13 需求：黑底块**上方要有留白**（原来 `padding: 0.02rem` 太薄、黑底紧贴卡片顶边）；
     外侧 `margin-top` 拉开与上一行的距离，内侧 `padding-top` 让「10.0」不顶格 */
  margin-top: 0.02rem;
  padding: 0.04rem 0.12rem 0.03rem;
  line-height: 1.2;
  color: #f5c542;
  background: #111111;
  border-radius: 0.1rem;
}

.citem__score.is-perfect .citem__unit {
  color: #f5c542;
}

/* 评级编号（与「品牌/分类」互换位置后落在下面一行） */

/**
 * 点赞图标 = **爱心**（纯 WXSS，2026-10-13 需求：手指改回爱心）。
 * 与详情页同一套画法（`.like__heart`），改一处要同步另一处。
 */
/**
 * 列表底部右侧的三个计数（2026-10-13 需求）：**点赞 → 留言数 → 观看数**。
 * 留言图标只在「留言模块开启」时渲染（wxml 里 `wx:if`），观看数**始终显示**。
 */
.citem__stats {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  flex: none;
  /* 编号为空（wx:if 不渲染）时也保证操作栏贴右 */
  margin-left: auto;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  font-size: 0.22rem;
  color: var(--text-3);
}

.stat__n {
  font-size: 0.22rem;
  color: var(--text-3);
}

/** 留言图标 = 气泡（圆角矩形 + 左下小尾巴），纯 WXSS */
.ico-bubble {
  position: relative;
  width: 0.22rem;
  height: 0.17rem;
  flex: none;
  background: transparent;
  border: 0.02rem solid currentColor;
  border-radius: 0.05rem;
}

.ico-bubble__tail {
  position: absolute;
  left: 0.03rem;
  bottom: -0.05rem;
  width: 0;
  height: 0;
  border-left: 0.05rem solid transparent;
  border-right: 0.05rem solid transparent;
  border-top: 0.06rem solid currentColor;
}

/** 观看图标 = 眼睛（椭圆轮廓 + 圆瞳），纯 WXSS */
.ico-eye {
  position: relative;
  width: 0.24rem;
  height: 0.16rem;
  flex: none;
  border: 0.02rem solid currentColor;
  border-radius: 50%;
}

.ico-eye__pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.07rem;
  height: 0.07rem;
  margin-left: -0.035rem;
  margin-top: -0.035rem;
  background: currentColor;
  border-radius: 50%;
}

.like__heart {
  position: relative;
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.08rem;
  flex: none;
  background: currentColor;
  transform: rotate(-45deg);
}

.like__heart::before,
.like__heart::after {
  content: '';
  position: absolute;
  width: 0.18rem;
  height: 0.18rem;
  background: currentColor;
  border-radius: 50%;
}

.like__heart::before {
  top: -0.09rem;
  left: 0;
}

.like__heart::after {
  top: 0;
  left: 0.09rem;
}

.citem__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}


/**
 * 底部一行（2026-10-13 需求）：**左 = 卡牌编号 tag，右 = 操作栏（♥ 💬 👁）**，两端对齐。
 * `margin-top: auto` 贴底 —— 封面固定 1.16rem、`.citem__main` 被 stretch 拉高，所以贴底不会撑出空白。
 */
.citem__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.12rem;
  margin-top: auto;
  padding-top: 0.08rem;
}

/* ---------------- 点赞（心形，纯 WXSS） ---------------- */
.like {
  display: flex;
  align-items: center;
  height: 0.48rem;
  padding: 0 0.18rem;
  color: var(--text-3);
  background: var(--soft);
  border-radius: 0.24rem;
}

.like.is-on {
  color: #e64545;
  background: #fdecec;
}

/**
 * 点赞图标 = **大拇指（简笔，纯 WXSS）**（2026-10-13 需求：原爱心换成手指）。
 * 与详情页同一套画法（`.ico-thumb__thumb` 拇指 + `.ico-thumb__palm` 拳），改一处要同步另一处。
 */
.ico-thumb {
  position: relative;
  width: 0.24rem;
  height: 0.24rem;
  margin-right: 0.08rem;
  flex: none;
}

.ico-thumb__thumb {
  position: absolute;
  top: 0;
  left: 0.03rem;
  width: 0.09rem;
  height: 0.13rem;
  background: currentColor;
  border-radius: 0.05rem 0.05rem 0.02rem 0.02rem;
  transform: rotate(-12deg);
}

.ico-thumb__palm {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.18rem;
  height: 0.14rem;
  background: currentColor;
  border-radius: 0.05rem 0.06rem 0.04rem 0.04rem;
}

.like__n {
  font-size: 0.22rem;
}

/** 列表点赞的**图片图标**（`utils/icons.js` 填了 URL 才渲染；留空回退 `.ico-thumb` 手绘） */
.like__ico {
  width: 0.22rem;
  height: 0.22rem;
  margin-right: 0.08rem;
  flex: none;
}

.clist__tip {
  padding: 0.24rem 0 0.4rem;
  text-align: center;
  font-size: 0.23rem;
  color: var(--text-3);
}

/* ---------------- 按编号查询弹层（固定 PCA 前缀 + 模拟数字键盘） ---------------- */
.qmask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.45);
}

.qsheet {
  width: 100%;
  /* 小屏兜底：键盘 + 展示 + 按钮整体可能接近满屏，超出时在弹层内部滚动（不顶出屏幕） */
  max-height: 92vh;
  overflow-y: auto;
  padding: 0.28rem 0.28rem 0.4rem;
  background: var(--card);
  border-radius: 0.28rem 0.28rem 0 0;
}

/* 弹层只有右上 ✕（标题/说明/手动输入入口已按需求隐藏），故用 flex-end 让 ✕ 靠右 */
.qsheet__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0.44rem;
}

.qsheet__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.48rem;
  height: 0.48rem;
  color: var(--text-3);
}

/** 输入展示：`PCA`（固定，不可编辑）+ 已输入数字 + 位数 */
.qsheet__display {
  display: flex;
  align-items: center;
  margin-top: 0.22rem;
  padding: 0 0.24rem;
  height: 1.12rem;
  background: var(--soft);
  border-radius: 0.16rem;
}

.qsheet__prefix {
  flex: none;
  font-size: 0.34rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  color: var(--brand);
}

.qsheet__digits {
  flex: 1;
  min-width: 0;
  margin-left: 0.12rem;
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.qsheet__digits.is-empty {
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: 0.04rem;
}

.qsheet__count {
  flex: none;
  margin-left: 0.12rem;
  font-size: 0.22rem;
  color: var(--text-3);
}

/** 「粘贴」按钮（2026-10-13 需求）：读剪贴板 → 解析编号 → 填满即自动查询 */
.qsheet__paste {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 0.52rem;
  padding: 0 0.22rem;
  font-size: 0.24rem;
  color: var(--brand);
  background: #ffffff;
  border: 0.01rem solid var(--brand-soft);
  border-radius: 0.08rem;
}

/**
 * 数字键盘：**3 列 × 4 行**。
 * ⚠️ 宽度必须是 `calc((100% - 0.4rem) / 3)`（两列间距 0.2rem × 2 = 0.4rem）——
 *    写成 `calc(33.33% - 0.13rem)` 会因「33.33% × 3 + 0.4rem > 100%」导致**每行只放得下 2 个**（2026-10-13 修）。
 */
.keys {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.24rem;
}

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 0.4rem) / 3);
  height: 0.96rem;
  margin: 0 0.2rem 0.16rem 0;
  font-size: 0.36rem;
  font-weight: 600;
  color: var(--text);
  background: var(--soft);
  border-radius: 0.16rem;
}

.key:nth-child(3n) {
  margin-right: 0;
}

.key--fn {
  font-size: 0.27rem;
  font-weight: 400;
  color: var(--text-2);
}

/**
 * 按键**按下反馈**（2026-10-13 需求）：用 `hover-class` 触发，背景明显变深 + 文字转主题色。
 * ⚠️ 小程序里 `:active` 对 `view` 不可靠，必须用 `hover-class`（见 wxml 上的 `hover-stay-time`）。
 */
.key--press {
  background: #d9dee7;
  color: var(--brand);
}

/* ==================== 以下是 **H5 专属**差异（2026-10-22 新建项目时补） ==================== */

/**
 * 社区页顶栏（替代小程序的 `.nav` + `.nav__bar`）。
 * H5 没有「状态栏高度」，也没有微信右上角胶囊按钮 ⇒ 不需要 `padding-right: menuReserve`，
 * 只用 `env(safe-area-inset-top)` 顶出刘海即可。
 * ⚠️ 它放在 `.stickybar` 内部 ⇒ 品牌字随搜索栏 / 筛选栏一起吸顶（与小程序一致）。
 */
.rp-nav {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: 0.88rem;
  padding: env(safe-area-inset-top, 0px) 0.28rem 0;
}

/* 搜索框在 H5 里是原生 <input>：去掉 iOS 的内阴影 / 圆角，保证与小程序一致 */
.rp-search__input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/**
 * ⚠️ iOS Safari 对字号 < 16px 的输入框会在聚焦时**自动放大整页** ⇒ 小屏固定 16px。
 * 这里用媒体查询而不是 `max()`（避免旧浏览器不支持 CSS 值函数）。
 */
@media (max-width: 640px) {
  .rp-search__input {
    font-size: 16px;
  }
}

/** 数字键盘按下反馈：H5 用 `:active`（小程序是 `hover-class`，等价） */
.key:active {
  background: #d9dee7;
  color: var(--brand);
}

/** 可点元素统一手型 + 禁止长按选中（H5 需要显式声明，小程序不需要） */
.like,
.stat,
.pick,
.pick-reset,
.sort,
.rp-search__byno,
.rp-search__scan,
.citem,
.key,
.pitem,
.qsheet__paste,
.qsheet__x {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/** 宽屏下查编号弹层与内容同宽居中（`100%` 在手机上等价，不影响小屏） */
.qmask {
  justify-content: center;
}

.qsheet {
  max-width: 640px;
}

/** 列表封面图：小程序 `mode="aspectFill"` ⇒ CSS `object-fit: cover` */
img.citem__cover {
  display: block;
  object-fit: cover;
}

/**
 * 扫码弹层（**H5 专属**：小程序用 `wx.scanCode`）。
 * 只在浏览器支持 `BarcodeDetector` 时才会出现，否则点扫码直接 toast 降级提示。
 */
.scanmask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 320;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  background: rgba(0, 0, 0, 0.86);
}

.scanmask__video {
  width: 78vw;
  max-width: 5.2rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.16rem;
  background: #000000;
}

.scanmask__tip {
  padding: 0 0.48rem;
  font-size: 0.26rem;
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
}

.scanmask__x {
  position: absolute;
  top: calc(0.4rem + env(safe-area-inset-top, 0px));
  right: 0.32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.64rem;
  height: 0.64rem;
  color: #ffffff;
}