/* 配色与尺寸对齐参考站 shop.qinameng.com：主橙 #ec7043、正文灰 #666、边框 #c6c6c6。
   1rem = 屏宽/6.4（设计稿按 640 宽），所以这里的数值就是设计稿像素除以 100。 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 必须留着：.mask/.layer 用了 display:flex，会盖掉 hidden 属性的 display:none，
   少了这一行页面一打开弹窗就直接糊在脸上。 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: light only; }
body {
  margin: 0; padding: 0 0 1.2rem; background: #f4f5f7; color: #333;
  font: 0.30rem/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: #ec7043; text-decoration: none; }
button { font-family: inherit; }

/* 顶栏两行：logo 和"领取记录查询"一行，标题独占一行。
   一行塞三样会把标题挤成省略号，而标题正是员工判断"来对地方了吗"的第一线索。 */
.hd { background: #fff; padding: 0.22rem 0.3rem 0.26rem; border-bottom: 1px solid #eee; }
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; }
.hd .logo { height: 0.44rem; width: auto; }
.hd-t { margin: 0.2rem 0 0; font-size: 0.42rem; font-weight: 600; color: #333; line-height: 1.25; }
.linkq {
  font-size: 0.26rem; color: #666; white-space: nowrap;
  border-bottom: 1px solid #ec7043; padding-bottom: 0.02rem;
}

main { padding: 0 0.24rem; }
.card { background: #fff; border-radius: 0.16rem; padding: 0.28rem 0.3rem; margin-top: 0.24rem; }

/* 活动说明区已按老板要求整块去掉，所以这里的 .notice 样式一并删除，不留死代码。 */

.sec { font-size: 0.30rem; color: #666; font-weight: 400; margin: 0.4rem 0.06rem 0.18rem; }

/* 权益网格：4 列，和参考站一致 */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.14rem; }
.box {
  background: #fff; border-radius: 0.12rem; padding: 0.16rem 0.08rem 0.2rem; text-align: center;
  border: 1px solid transparent; display: flex; flex-direction: column; align-items: center;
}
.box.on { border-color: #ec7043; background: #fff7f4; }
.box img { width: 1.16rem; height: 1.16rem; object-fit: cover; border-radius: 0.1rem; display: block; }
.box h4 {
  margin: 0.12rem 0 0; font-weight: 400; font-size: 0.22rem; line-height: 1.25; color: #666;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 其它学习权益：低调，不占网格、不给图、不用主色 */
.other { display: flex; align-items: center; flex-wrap: wrap; gap: 0.16rem; color: #999; }
/* 标题自己一行，下拉框下一行占满。原来两个挤一行，剩下的宽度装不下
   "哔哩哔哩电视大会员12个月"这种 14 字长名字，浏览器截尾、箭头正好压在截断处上。
   标签放上方也和领取弹窗里"卡密/手机号"的做法一致。 */
.other-h { font-size: 0.28rem; width: 100%; }
/* 自绘下拉。展开的列表是网页的一部分，所以能截图、能录屏、样式也管得住。 */
.pk { width: 100%; }
.pk-cur {
  border: 1px solid #ddd; border-radius: 0.08rem; background: #fafafa; color: #666;
  font-size: 0.28rem; padding: 0.16rem 0.6rem 0.16rem 0.2rem; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pk-cur.ph { color: #999; }
.pk-cur::after {
  content: ""; position: absolute; right: 0.2rem; top: 0.3rem;
  border: 0.08rem solid transparent; border-top-color: #999;
}
.pk-list {
  width: 100%; margin-top: 0.1rem; background: #fff; border: 1px solid #e6e6e6;
  border-radius: 0.1rem; overflow: hidden; box-shadow: 0 0.06rem 0.22rem rgba(0, 0, 0, .1);
}
.pk-op { padding: 0.22rem 0.24rem; font-size: 0.28rem; color: #333; border-bottom: 1px solid #f2f2f2; }
.pk-op:last-child { border-bottom: 0; }
.pk-op.on { color: #ec7043; background: #fff7f4; }
/* 名字自己一行、按钮自己一行。原来两个挤一行，长名字折出个孤零零的"月"字，
   按钮还被两行文字顶得忽上忽下。 */
.other-go { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 0.16rem; }
.other-go span { font-size: 0.28rem; color: #333; align-self: stretch; text-align: left; line-height: 1.5; }
.other-go button {
  background: #ec7043; color: #fff; border: 0; border-radius: 0.3rem; padding: 0.16rem 0.44rem; font-size: 0.28rem;
}
.tip { font-size: 0.24rem; color: #999; margin: 0.24rem 0.06rem 0; }
.ft { text-align: center; font-size: 0.24rem; color: #999; padding: 0.4rem 0.4rem 0; }
/* 备案号悬挂。字号可以小，但颜色不能淡到看不见——管局核查时要能一眼看到并点开。
   链接必须指向工信部备案官网首页，只写号码不合规。 */
.icp { margin: 0.2rem 0 0; font-size: 0.22rem; line-height: 1.7; color: #767d87; }
.icp a { color: #767d87; text-decoration: none; border-bottom: 1px solid #c3c8ce; padding-bottom: 0.02rem; }
.icp:last-child { padding-bottom: 0.5rem; }

/* 领取弹窗 */
.mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 0 0.5rem;
}
.sheet {
  background: #fff; border-radius: 0.18rem; padding: 0.44rem 0.4rem 0.3rem; width: 100%;
  max-width: 5.6rem; text-align: center; max-height: 88vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sel { margin: 0 0 0.28rem; font-size: 0.28rem; color: #666; font-weight: 400; line-height: 1.5; text-align: left; }
/* 权益名独占一行并左对齐：居中排版下"电子报刊杂志权益12个月（三联中读数字刊＋南方周末）"
   会折成三行橙色大字糊在中间，看着像报错信息。左对齐才像在读一个标签。 */
.sel b { display: block; margin-top: 0.06rem; font-size: 0.32rem; color: #ec7043; font-weight: 600; line-height: 1.45; }
/* 跟在权益名下面自己一行。原来 #999 + 0.24rem 在白色弹窗上几乎看不见，
   而这是员工判断"我能不能先看看这东西是什么"的唯一入口。 */
.dlink {
  display: inline-block; margin-top: 0.14rem; font-size: 0.27rem; color: #666;
  font-weight: 400; border-bottom: 1px solid #bbb; padding-bottom: 0.02rem; white-space: nowrap;
}
.input {
  display: block; width: 100%; border: 1px solid #c6c6c6; border-radius: 0.08rem; height: 0.86rem;
  padding: 0 0.24rem; font-size: 0.30rem; margin-bottom: 0.24rem; outline: none; background: #fff;
  letter-spacing: 0.04rem;
}
.input:focus { border-color: #ec7043; }
/* align-items 必须是 flex-start：输入框带 margin-bottom，默认的 stretch 会把
   按钮拉成"输入框+间距"那么高，看起来就像比旁边矮一格的框多出一截。 */
.row { display: flex; gap: 0.18rem; align-items: flex-start; }
.row .input { flex: 1; }
.sms {
  border: 1px solid #ec7043; background: #fff; color: #ec7043; border-radius: 0.08rem;
  height: 0.86rem; padding: 0 0.16rem; font-size: 0.24rem; white-space: nowrap; min-width: 1.5rem;
}
.sms[disabled] { border-color: #ddd; color: #aaa; }
/* 三个控件同高（0.86rem），弹窗里才有节奏感；确认键再大就成了色块压人 */
.buy-btn {
  display: block; width: 100%; background: #ec7043; color: #fff; border: 0; border-radius: 0.10rem;
  height: 0.86rem; font-size: 0.32rem; font-weight: 500; letter-spacing: 0.04rem; margin-top: 0;
}
.buy-btn[disabled] { background: #d9d9d9; color: #fff; }
/* 取消只有两个字，但点击区域要撑到 44px 以上，否则手指粗的按不准 */
.close { display: block; width: 100%; background: none; border: 0; color: #999; font-size: 0.26rem; padding: 0.26rem 0 0.12rem; }

/* 字段标签放输入框上方，不靠 placeholder。
   placeholder 一输入就消失，老人填到一半会忘了这栏本来要填什么。 */
.fld { text-align: left; }
.fld label { display: block; font-size: 0.26rem; color: #666; margin: 0 0 0.1rem 0.04rem; }
.fld .input { margin-bottom: 0.2rem; }

/* 二次确认压在领取弹窗之上（20 → 25），取消后能回到原弹窗、不用重填 */
.mask.cfm { z-index: 25; }
.cfm-line { margin: 0 0 0.18rem; font-size: 0.28rem; color: #666; line-height: 1.5; }
.cfm-line b { display: block; margin-top: 0.04rem; font-size: 0.34rem; color: #333; }
.cfm-line b.num { font-size: 0.46rem; font-weight: 700; letter-spacing: 0.03rem; }
.cfm-warn { margin: 0.26rem 0 0.32rem; font-size: 0.26rem; color: #e64340; line-height: 1.75; }

/* 领取成功页：整屏，方便员工截图留底 */
.layer.okpage { z-index: 40; justify-content: center; }
.ok-body { padding: 0.6rem 0.5rem; text-align: center; }
.ok-mark {
  width: 1.2rem; height: 1.2rem; line-height: 1.14rem; border-radius: 50%; margin: 0 auto 0.3rem;
  background: #1aad19; color: #fff; font-size: 0.62rem; font-weight: 700;
}
.ok-t { margin: 0 0 0.34rem; font-size: 0.44rem; font-weight: 600; }
.ok-b { margin: 0 0 0.12rem; font-size: 0.32rem; color: #333; font-weight: 600; }
.ok-s { margin: 0 0 0.42rem; font-size: 0.32rem; color: #ec7043; font-weight: 600; }
.ok-n { margin: 0 0 0.5rem; font-size: 0.24rem; color: #999; line-height: 1.8; }

/* 详情浮层 */
.layer { position: fixed; inset: 0; background: #fff; z-index: 30; display: flex; flex-direction: column; }
.layer-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 0.24rem 0.3rem;
  border-bottom: 1px solid #eee; font-size: 0.30rem;
}
.layer-bar button { background: none; border: 0; color: #ec7043; font-size: 0.28rem; }
.layer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.3rem; font-size: 0.28rem; color: #555; line-height: 1.8; }
.layer-body img { display: block; width: 100%; height: auto; }
.layer-body .ph { color: #bbb; text-align: center; padding: 1rem 0; font-size: 0.26rem; }
.layer-body .from { margin: 0 0 0.24rem; font-size: 0.26rem; color: #666; }

/* 提示条 */
.toast {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50;
  background: rgba(0, 0, 0, .78); color: #fff; padding: 0.22rem 0.4rem; border-radius: 0.1rem;
  font-size: 0.28rem; max-width: 78%; text-align: center; line-height: 1.5;
}

/* 图片缺失时的文字兜底（4 个视频权益无缩略图，也防图挂掉开天窗） */
.box .nt {
  width: 1.16rem; height: 1.16rem; border-radius: 0.1rem; background: #f2f3f5; color: #888;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.22rem; font-style: normal; padding: 0.06rem; line-height: 1.3;
}

/* 记录查询 */
.layer-body .input { margin-top: 0.24rem; }
.layer-body .fld { margin-top: 0.24rem; }
/* 间距只由 .fld 给一次。同一行里输入框带 margin-top 而按钮不带，
   「获取验证码」就会往上飘出去，看起来像贴歪了；
   输入框自己再带个 margin-bottom 的话，行距会变成别人的两倍。 */
.layer-body .fld .input, .layer-body .row .input { margin-top: 0; margin-bottom: 0; }
.layer-body .row { margin-top: 0; }
.layer-body .buy-btn { margin-top: 0.3rem; }
.qtab { display: flex; gap: 0.16rem; margin-bottom: 0.1rem; }
.qtab button {
  flex: 1; border: 1px solid #ddd; background: #fafafa; color: #666; border-radius: 0.3rem;
  padding: 0.16rem 0; font-size: 0.28rem;
}
.qtab button.on { border-color: #ec7043; color: #ec7043; background: #fff7f4; }
.rl { margin-top: 0.24rem; }
.ri {
  border: 1px solid #eee; border-radius: 0.12rem; padding: 0.22rem 0.24rem; margin-bottom: 0.18rem;
  display: flex; flex-wrap: wrap; align-items: center;
}
.ri b { width: 100%; font-size: 0.30rem; font-weight: 500; color: #333; }
.ri span { flex: 1; font-size: 0.24rem; color: #999; margin-top: 0.1rem; }
.ri em { font-style: normal; font-size: 0.26rem; }
.ri .ok { color: #1aad19; }
.ri .no { color: #e64340; }
/* 处理中不是失败，给它橙色；给红色等于告诉员工出事了 */
.ri .mid { color: #ec7043; }