/* 由 cardMini/pages/rating-detail/index.wxss 移植（rpx → rem；2026-10-22）—— 改样式请与本文件为准，勿回改小程序 */
/* ==================== 2026-10-13 新增：导航分类 / 悬浮条 / 留言面板 ==================== */

/**
 * 10.0 分（2026-10-13 需求）：评分块**黑底**，**分数 / 等级词 / 星星全部金色**。
 * ⚠️ 星星是 CSS 画的三尖星（`.star` / `.star--on`），金色要同时覆盖底星与高亮星。
 */
.rd-score.is-perfect {
  /* ⚠️ 不要用负 margin 去贴边（上一版 `margin: -0.16rem -0.08rem 0 -0.2rem` 会把黑底挤偏、右侧缺一块） */
  box-sizing: border-box;
  padding: 0.14rem 0.12rem 0.12rem;
  margin: 0;
  background: #111111;
  border-radius: 0.16rem;
}

/* 满分时字数较大（如 10.0），字号略收 + 单位缩小，保证「10.0 分」整行落在黑底内 */
.rd-score.is-perfect .rd-score__num {
  font-size: 0.72rem;
}

.rd-score.is-perfect .rd-score__unit {
  margin-left: 0.04rem;
  font-size: 0.2rem;
}

.rd-score.is-perfect .rd-score__level {
  margin-top: 0.04rem;
  font-size: 0.22rem;
  letter-spacing: 0.01rem;
}

.rd-score.is-perfect .stars {
  margin-top: 0.08rem;
}

.rd-score.is-perfect .rd-score__num,
.rd-score.is-perfect .rd-score__unit,
.rd-score.is-perfect .rd-score__level {
  color: #f5c542;
}

/* ⚠️ 星星是「CSS 三角」（`border-bottom` / `::after` 的 `border-top`）画的，金色要改 border-color，改 background 无效 */
.rd-score.is-perfect .star {
  border-bottom-color: rgba(245, 197, 66, 0.3);
}

.rd-score.is-perfect .star::after {
  border-top-color: rgba(245, 197, 66, 0.3);
}

.rd-score.is-perfect .star--on {
  border-bottom-color: #f5c542;
}

.rd-score.is-perfect .star--on::after {
  border-top-color: #f5c542;
}

/** 评分规则链接（2026-10-13 新增）：说明脚注上方，整行可点 */
.rd-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  margin: 0.28rem 0.36rem 0;
  padding: 0.2rem 0;
}

.rd-rule__t {
  font-size: 0.25rem;
  color: var(--brand);
}

.rd-rule__chev {
  flex: none;
}

/** 留言图标 = 气泡（纯 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%;
}

/** 导航栏里的分类（靠左，紧挨返回箭头） */
.rd-navcat {
  /* 2026-10-13 需求：导航标题**居中显示**（绝对定位到导航栏正中） */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 3.4rem;
  margin-left: 0;
  overflow: hidden;
  font-size: 0.26rem;
  font-weight: 400;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/** 页面底部留白：给悬浮条让位（避免最后一行文字被盖住） */
/** .rd 底部留白：给**固定悬浮条**（`.rdbar`，1.28rem + 安全区）让位，避免最后一行被盖住。
 * ⚠️ 只允许**一条** `.rd` 规则 —— 之前这里有两条（2rem / 0.6rem）互相覆盖，0.6rem 那条赢了，底部会被挡。 */
.rd {
  /* 顶部：给**固定悬浮的导航**让位（H5 用 CSS 变量，不再由 JS 内联 padding-top） */
  padding-top: var(--nav-h);
  padding-bottom: 2rem;
}

/**
 * 底部悬浮条：**观看 → 点赞 → 留言**，固定屏幕底部。
 * ⚠️ z-index 要低于留言面板（`.cmask` 400）但高于页面内容。
 */
.rdbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* 2026-10-13 需求：**上内边距 +0.2rem**（内容整体下移，条也同步加高，内容区仍是 1.08rem） */
  height: 1.28rem;
  padding-top: 0.2rem;
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  border-top: 0.01rem solid var(--brand-soft);
  box-shadow: 0 -0.06rem 0.2rem rgba(232, 69, 31, 0.08);
}

.rdbar__item {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  height: 1.08rem;
  padding: 0 0.28rem;
  font-size: 0.26rem;
  color: var(--text-2);
}

.rdbar__item.is-on {
  color: #e64545;
}

.rdbar__n {
  font-size: 0.26rem;
  font-weight: 600;
}

.rdbar__ico {
  width: 0.34rem;
  height: 0.34rem;
  flex: none;
}

/* 悬浮条里图标比列表大一号 */
.rdbar .like__heart {
  width: 0.22rem;
  height: 0.22rem;
  margin-right: 0;
}

.rdbar .like__heart::before,
.rdbar .like__heart::after {
  width: 0.22rem;
  height: 0.22rem;
}

.rdbar .like__heart::before {
  top: -0.11rem;
}

.rdbar .like__heart::after {
  left: 0.11rem;
}

.rdbar .ico-bubble {
  width: 0.26rem;
  height: 0.2rem;
}

.rdbar .ico-eye {
  width: 0.3rem;
  height: 0.2rem;
}

/* ---------------- 留言面板（底部弹出） ---------------- */
.cmask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.45);
}

.csheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  border-radius: 0.24rem 0.24rem 0 0;
}

.csheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 0.26rem 0.28rem 0.12rem;
}

.csheet__t {
  font-size: 0.28rem;
  font-weight: 700;
  color: var(--text);
}

.csheet__x {
  padding: 0.08rem;
}

.csheet__list {
  flex: 1;
  min-height: 0;
  max-height: 46vh;
  padding: 0 0.28rem;
}

.csheet__tip {
  padding: 0.6rem 0;
  font-size: 0.25rem;
  color: var(--text-3);
  text-align: center;
}

.citem2 {
  padding: 0.18rem 0;
  border-bottom: 0.01rem solid var(--brand-soft);
}

.citem2__t {
  font-size: 0.27rem;
  line-height: 1.6;
  color: var(--text);
  word-break: break-all;
}

.citem2__time {
  margin-top: 0.08rem;
  font-size: 0.22rem;
  color: var(--text-3);
}

.csheet__form {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  flex: none;
  padding: 0.16rem 0.28rem 0.24rem;
  border-top: 0.01rem solid var(--brand-soft);
}

.csheet__input {
  flex: 1;
  height: 0.72rem;
  padding: 0 0.2rem;
  font-size: 0.26rem;
  color: var(--text);
  background: var(--brand-soft-2);
  border-radius: 0.08rem;
}

.csheet__ph {
  font-size: 0.25rem;
  color: var(--text-3);
}

.csheet__send {
  flex: none;
  height: 0.72rem;
  padding: 0 0.3rem;
  font-size: 0.27rem;
  line-height: 0.72rem;
  color: #ffffff;
  background: var(--brand);
  border-radius: 0.08rem;
}

.csheet__send.is-disabled {
  opacity: 0.45;
}

/**
 * 评级详情页样式（2026-10-13 新增）—— 与 `pages/rating` 的卡片样式**同源**（改这里时建议顺手看一眼那边）。
 *
 * 主题：与评级页一致用**橙红 + 白**（页面级覆盖品牌变量，只作用于本页）。
 * ⚠️ 星级（五角星）、心形、分享图标全部**纯 WXSS**绘制，禁用 emoji / 字符 / 图片。
 */



/**
 * 顶部导航（2026-10-13 需求）：**固定悬浮在顶部**，不随页面滚动。
 * ⚠️ 高度 = `padding-top(状态栏) + nav__bar` = `nav.navTotalHeight`，根节点用同名内联 `padding-top` 顶出等高的空间。
 * z-index 层级：导航 100 < 底部悬浮条 200 < 留言面板 400。
 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
}

/* 页面底色是白 → 卡片靠淡橙阴影分层 */
.card {
  box-shadow: 0 0.04rem 0.2rem rgba(232, 69, 31, 0.08);
}

/* ---------------- 导航：返回箭头 + 品牌（无 logo） ---------------- */
.nav__bar {
  display: flex;
  align-items: center;
  /* 2026-10-13 需求：标题改为**居中显示**（绝对定位居中，不受左侧返回箭头影响） */
  justify-content: flex-start;
  position: relative;
}

.rd-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.64rem;
  height: 0.64rem;
  color: var(--text-2);
}

/* ---------------- 主卡 ---------------- */
.rd-card {
  margin: 0.2rem 0.28rem 0;
  padding: 0.28rem;
}

/* ---------------- 分享按钮（2026-10-13 搬回右侧列；宽度大一倍 = 2.48rem） ---------------- */
.rd-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.12rem;
  flex: none;
}

.rd-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  /* ⚠️ button 自带 `width:100%` / `margin:0 auto` —— 四处宽度兜底 + margin 归零，否则真机会被撑开 */
  width: 1.24rem;
  min-width: 1.24rem;
  max-width: 1.24rem;
  flex: 0 0 1.24rem;
  box-sizing: border-box;
  height: 0.52rem;
  padding: 0;
  margin: 0;
  font-size: 0.2rem;
  line-height: 1;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 0.1rem;
}

.rd-act::after {
  border: none;
}

/* 分享按钮宽度**大一倍** */
.rd-act--wide {
  width: 2.48rem;
  min-width: 2.48rem;
  max-width: 2.48rem;
  flex: 0 0 2.48rem;
}

.rd-act--share {
  margin-left: 0;
  margin-right: 0;
  border: none;
  line-height: 1;
}

.rd-act--share::after {
  border: none;
}

/** 图片图标（`utils/icons.js` 填了 URL 才渲染） */
.rd-act__ico {
  width: 0.22rem;
  height: 0.22rem;
  flex: none;
}

.rd-act__t {
  font-size: 0.2rem;
}

/**
 * ① 分类（2026-10-13 需求：**导航栏靠左有一份**，右侧列里**编号上方再复制一份**，右对齐无外壳）
 */
.rd-cat {
  /* 2026-10-13 需求：字号加大（24 → 0.32rem）、**加粗** */
  font-size: 0.32rem;
  font-weight: 700;
  color: var(--text);
  /* 互换位置后分类在**左侧** ⇒ 左对齐 */
  text-align: left;
  word-break: break-all;
}

/**
 * ② 卡牌编号（2026-10-13 需求：紧贴分类下方、操作按钮上方，形如 `CardNumber: 123/399`，
 * 编号值用**红色 tag**（这里的红是「编号值」的语义色，不跟主题橙红混））。
 */
.rd-cardno {
  display: flex;
  align-items: center;
  /* 互换位置后编号在**左侧** ⇒ 左对齐 */
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.rd-cardno__v {
  /* 2026-10-13 需求：只显示编号 tag 本身、**字号改小**（0.52rem → 0.4rem）；
     内部三段分色：左段橙 / `/` 黑 / 右段红 */
  padding: 0.06rem 0.2rem;
  font-size: 0.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #cf1322;
  background: #fff1f0;
  border-radius: 0.12rem;
  white-space: nowrap;
}

/** 编号左段（`135`）—— 橙色 */
.rd-cardno__l {
  color: #ff8c00;
}

/** 编号分隔符 `/` —— 橙色 */
.rd-cardno__s {
  color: #ff8c00;
}

/** 编号右段（`399`）—— 橙色 */
.rd-cardno__r {
  color: #ff8c00;
}

.rd-top {
  /* 2026-10-13 需求：左右 **70% / 30%**（左 = 分类·编号·分享，右 = 评分），且**底部对齐** */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
}

/**
 * **左侧一列**（分类 / 卡牌编号 / 分享）：左对齐、纵向堆叠，占 70%；右侧评分块占 30%（2026-10-13 互换位置后）。
 */
.rd-side {
  display: flex;
  flex-direction: column;
  /* 2026-10-13 互换位置后，这一列在**左侧** ⇒ 内容左对齐 */
  align-items: flex-start;
  gap: 0.12rem;
  flex: none;
  /* 占 70%（评分列占 30%） */
  width: 70%;
}

.rd-score {
  /* 2026-10-13 需求：**左侧固定宽度**，不因右侧内容变化被挤压 */
  flex: none;
  /* 2026-10-13 需求：左侧占 **30%**（原来是 2.6rem 固定） */
  width: 30%;
  min-width: 0;
}

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

.rd-score__unit {
  margin-left: 0.06rem;
  font-size: 0.26rem;
  font-weight: 400;
  /* 「分」跟随数字一起变橙（10.0 时被 .is-perfect 覆盖成金色） */
  color: #ff8c00;
}

.rd-score__level {
  margin-top: 0.02rem;
  font-size: 0.24rem;
  letter-spacing: 0.02rem;
  color: var(--text-2);
}

/* ---------------- 原 logo 位置 → 点赞 + 分享（**同一行、等宽**） ---------------- */
/**
 * 点赞图标 = **爱心**（纯 WXSS，2026-10-13 需求：手指改回爱心）。
 * 与社区列表同一套画法（`.like__heart`），改一处要同步另一处。
 */
.like__heart {
  position: relative;
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.04rem;
  flex: none;
  background: currentColor;
  transform: rotate(-45deg);
}

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

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

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


.ico-share {
  position: relative;
  width: 0.22rem;
  height: 0.22rem;
}

.ico-share__stem {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.03rem;
  height: 0.13rem;
  margin-left: -0.015rem;
  background: currentColor;
}

.ico-share__head {
  position: absolute;
  top: 0.01rem;
  left: 50%;
  width: 0.09rem;
  height: 0.09rem;
  margin-left: -0.045rem;
  border-left: 0.03rem solid currentColor;
  border-top: 0.03rem solid currentColor;
  transform: rotate(45deg);
}

.ico-share__tray {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.1rem;
  border: 0.03rem solid currentColor;
  border-top: none;
  border-radius: 0 0 0.04rem 0.04rem;
}

/* ---------------- 星级（纯 WXSS；**进入页面逐个弹入**，2026-10-13 需求） ---------------- */
.stars {
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
}

.star-wrap {
  position: relative;
  width: 0.26rem;
  height: 0.34rem;
  margin-right: 0.06rem;
  flex: none;
  /* 每次进入详情页都是新的 Page 实例 ⇒ 这段动画天然每次播放 */
  animation: starIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: 50% 100%;
}

/* 5 颗星依次点亮（延迟逐颗递增） */
.star-wrap:nth-child(1) {
  animation-delay: 0.02s;
}

.star-wrap:nth-child(2) {
  animation-delay: 0.1s;
}

.star-wrap:nth-child(3) {
  animation-delay: 0.18s;
}

.star-wrap:nth-child(4) {
  animation-delay: 0.26s;
}

.star-wrap:nth-child(5) {
  animation-delay: 0.34s;
}

@keyframes starIn {
  from {
    opacity: 0;
    transform: scale(0.35);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0.13rem solid transparent;
  border-right: 0.13rem solid transparent;
  border-bottom: 0.26rem solid #dfe3ea;
}

.star::after {
  content: '';
  position: absolute;
  top: 0.08rem;
  left: -0.13rem;
  width: 0;
  height: 0;
  border-left: 0.13rem solid transparent;
  border-right: 0.13rem solid transparent;
  border-top: 0.24rem solid #dfe3ea;
}

.star--on {
  border-bottom-color: var(--brand);
}

.star--on::after {
  border-top-color: var(--brand);
}

.star-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.star-clip.is-half {
  width: 50%;
}

/* ---------------- 评级编号 / 分类 / 持有人 ---------------- */
.rd-no {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.18rem 0.24rem;
  background: var(--brand-soft-2);
  border-radius: 0.16rem;
}

/**
 * 卡片顶部那行「评级编号 + 复制」（2026-10-13 需求）：**横跨整卡**、**去掉上边距**、下边距加大。
 * ⚠️ 必须用**双类**（`.rd-no.rd-no--top`）—— 单类与 `.rd-no` 同权重，若写在前面就会被它的
 * `margin-top: 0.2rem` 覆盖（之前"上边距去不掉"就是这个原因）。
 */
.rd-no.rd-no--top {
  /* 2026-10-13 需求：上边距**再收紧一些**（用负 margin 抵消卡片 0.28rem 的 padding-top 一部分） */
  margin-top: -0.1rem;
  margin-bottom: 0.24rem;
  width: 100%;
  box-sizing: border-box;
}

.rd-no__k {
  flex: none;
  font-size: 0.24rem;
  color: var(--text-2);
}

.rd-no__v {
  flex: 1;
  min-width: 0;
  margin-left: 0.16rem;
  font-size: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.01rem;
  color: var(--brand);
  word-break: break-all;
}

.rd-no__c {
  flex: none;
  margin-left: 0.12rem;
  padding: 0.04rem 0.16rem;
  font-size: 0.22rem;
  color: var(--brand);
  background: #ffffff;
  border-radius: 0.2rem;
}

/* ---------------- 持有人 + 联系方式（2026-10-13 需求：**同一行**） ---------------- */
.rd-holders {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem 0.28rem;
  margin-top: 0.14rem;
}

.rd-holders__item {
  font-size: 0.23rem;
  color: var(--text-3);
  word-break: break-all;
}

/* ---------------- 四维分 ---------------- */
.rd-dims {
  margin-top: 0.22rem;
}

.dim {
  margin-bottom: 0.18rem;
}

.dim:last-child {
  margin-bottom: 0;
}

.dim__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dim__label {
  font-size: 0.25rem;
  color: var(--text-2);
}

.dim__val {
  font-size: 0.25rem;
  font-weight: 600;
  /* 2026-10-13 需求：四维分**评分数字**改为橙色 */
  color: #ff8c00;
}

.dim__bar {
  margin-top: 0.1rem;
  height: 0.12rem;
  background: var(--soft-deep);
  border-radius: 0.06rem;
  overflow: hidden;
}

/**
 * 四维分进度条（2026-10-13 需求：**进入页面时用动画从 0 长到目标值**）。
 * 配合 `index.js` 的做法：先把 `pct` 设 0，80ms 后再设真实百分比 → 触发这里的 `transition`。
 */
.dim__fill {
  height: 100%;
  /* 2026-10-13 需求：四维分**进度条**改为橙色（原 var(--brand) 橙红） */
  background: #ff8c00;
  border-radius: 0.06rem;
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------- 评级详情 / 说明 / 空态 ---------------- */
.rd-detail {
  margin: 0.2rem 0.28rem 0;
  padding: 0.28rem;
}

.rd-block-title {
  margin-bottom: 0.16rem;
  font-size: 0.3rem;
  font-weight: 700;
  color: var(--text);
}

.kv {
  display: flex;
  align-items: flex-start;
  padding: 0.14rem 0;
  /* 2026-10-13 需求：每一项加**浅色下划线**做分隔 */
  border-bottom: 0.01rem solid #f0f0f0;
}

/* 最后一项不要分隔线（避免与卡片底边叠成两条） */
.kv:last-child {
  border-bottom: none;
}

.kv--col {
  flex-direction: column;
}

.kv__k {
  flex: none;
  font-size: 0.25rem;
  font-weight: 600;
  /* 2026-10-13 需求：label 改为**浅一点的黑色**（原 var(--text) 纯黑 → var(--text-2) #5a5a5a） */
  color: var(--text-2);
}

.kv__v {
  flex: 1;
  min-width: 0;
  margin-left: 0.16rem;
  font-size: 0.25rem;
  /* 2026-10-13 需求：详情信息的 value 为**黑色**且**右对齐** */
  color: var(--text);
  text-align: right;
  word-break: break-all;
}

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  margin-top: 0.14rem;
  width: 100%;
}

.shots__img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.12rem;
  background: var(--soft-deep);
}

.rd-note {
  /* 2026-10-13 需求：**不要背景 / 卡片 / 标题**，作为页面最底部的纯文字脚注 */
  margin: 0.32rem 0.36rem 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.rd-note__p {
  font-size: 0.22rem;
  line-height: 1.7;
  color: var(--text-3);
  text-align: center;
}

.rd-empty {
  margin: 0.2rem 0.28rem 0;
  padding: 0.6rem 0.28rem;
  text-align: center;
  font-size: 0.26rem;
  color: var(--text-3);
}

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

/** ⚠️ iOS Safari 对字号 < 16px 的输入框会在聚焦时自动放大整页 ⇒ 小屏固定 16px（不用 `max()`） */
@media (max-width: 640px) {
  .csheet__input {
    font-size: 16px;
  }
}

/** 可点元素统一手型 + 禁止长按选中（H5 需要显式声明，小程序不需要） */
.rd-back,
.rd-no,
.rd-rule,
.rdbar__item,
.shots__img,
.csheet__x,
.csheet__send,
.rd-act {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/** 宽屏下留言面板与内容同宽居中（手机上 `100%` 等价，不影响小屏） */
@media (min-width: 640px) {
  .csheet {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 640px;
    transform: translateX(-50%);
  }
}