/**
 * app.css —— 全站共用视觉底座（照搬小程序 v2.2 英伦学院风）
 *
 * ── rpx 怎么变成 CSS ──────────────────────────────────────────
 * 小程序 750rpx = 屏宽。这里把 html 的 font-size 设成 100vw/7.5，
 * 于是 1rem = 100rpx，所有尺寸【除以 100 换成 rem】即可 1:1 照搬 WXSS：
 *     72rpx → .72rem      36rpx → .36rem      3rpx → .03rem
 * 大屏（老郑用电脑预览时）封顶 56px，否则字会大到离谱。
 *
 * 配色/字号全部取自 miniprogram/pages/{index,words,learn,profile}/*.wxss，
 * 含微调 A~F 的成果，改动前先回去对一眼源文件。
 */

:root {
  --navy: #1B2A4A;          /* 主色 深蓝 */
  --navy-deep: #0D1735;
  --navy-hero: #0F1B3D;
  /* 🔵 08-18 金色分工（体检发现同一个"金"在各页深浅不一，且好几处压白底看不清）。
     不是"减少金色"，是**给每种金定死岗位**——混用才是乱的根源：
       --gold      装饰：描边 / 分隔线 / 渐变端点。**不承载文字**（压白底只有 2.86）
       --gold-lt   渐变高光端、深底上的金字（深底上它很亮，没问题）
       --gold-ink  **文字专用金**：任何压在白/奶油底上的金色文字一律用它（≥4.9）
     判据是对比度，不是手感：#B8943A 压白底 2.86 ❌ / #8A6014 压白底 5.58 ✅ */
  --gold: #B8943A;          /* 主色 金（装饰用·别拿它写小字） */
  --gold-lt: #D4AF37;
  --gold-ink: #8A6014;      /* 浅底上的金字专用（08-18） */
  --cream: #F5F0E8;         /* 米白（深底上的字） */
  --paper: #FBF9F4;         /* 页面底色 羊皮纸暖调 */
  --line: #E8E0D0;
  --ink: #1B2A4A;
  --gray: #6B6B6B;
  --gray-lt: #8C8C8C;

  /* 衬线字（数字/英文/标题）——老郑指定 Baskerville 系。
     ⚠️ 不列 iOS 原生 'Baskerville'：它超细身小 x 高度，单词在 iPhone 上显得被压扁
     （08-10 老郑真机反馈·安卓无此字体走 Noto 衬线所以正常）→ iOS 落 'Palatino'（同系、骨架敦实）。 */
  --serif: 'Libre Baskerville', 'Palatino Linotype', 'Palatino', 'Book Antiqua',
           'Times New Roman', 'STSong', 'Songti SC', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html {
  /* 🔴 两行缺一不可：min() 要 Chrome 79+/iOS 11.4+，老安卓微信内核不认这条会整条丢弃，
     根字号退回 16px，而全站尺寸都是 rem —— 正文会从 16px 缩成 5px，页面等于废掉。
     所以先用 vw 打底（支持面广得多），再用 min() 覆盖上去封顶大屏。 */
  font-size: 13.333vw;                       /* = 100vw/7.5，1rem = 100rpx */
  font-size: min(13.333vw, 56px);            /* 大屏封顶，不支持 min() 的内核忽略此行 */
  -webkit-text-size-adjust: 100%;            /* 防 iOS 自动放大字体打乱版式 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .32rem;
  line-height: 1.6;
  /* 底部给 tabbar 让位（tabbar 高 .98rem + iPhone 安全区） */
  padding-bottom: calc(.98rem + env(safe-area-inset-bottom, 0px));
}

/* 隐藏滚动条（同 words.wxss） */
::-webkit-scrollbar { display: none; width: 0; height: 0; }

img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; }

/* hidden 属性必须赢过类里的 display:flex/block（UA 的 [hidden] 会被作者样式压掉，
   学习页 .wi-emoji、我的页 .pcs-desc 等都靠 hidden 开关） */
[hidden] { display: none !important; }

/* ─── 顶部导航条（小程序的 navigationBar 在 H5 得自己画）─── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  color: #fff;
  height: .88rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .34rem; letter-spacing: .02rem;
}
.navbar .nav-back {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 .3rem; font-size: .44rem; color: #fff;
  background: none; line-height: 1;
}

/* ─── 底部 tabBar（同 app.json：首页/学习/我的）─── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex;
  background: #FAF7F2;
  border-top: 1px solid rgba(27,42,74,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: .98rem;
  text-decoration: none;
  /* 🔵 08-18 可读性体检：原 #8C8C8C/.22rem 压页面底色只有 3.15。
     #6B6B6B 就是本文件已有的 --gray，不是新造色；字号 .22→.24rem。 */
  color: #6B6B6B;                 /* app.json tabBar.color（08-18 压深一档） */
  font-size: .24rem;
}
.tabbar a.on { color: var(--navy); }   /* app.json tabBar.selectedColor */
.tabbar img { width: .44rem; height: .44rem; margin-bottom: .04rem; }

/* ─── 通用卡片/区块（index.wxss .section）─── */
.section {
  margin: .28rem .3rem;
  background: #fff;
  border-radius: .12rem;
  padding: .4rem .36rem;
  box-shadow: 0 .01rem .06rem rgba(27,42,74,.04);
  overflow: hidden;
}
.section-title {
  font-family: var(--serif);
  font-size: .44rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .32rem;
  padding-bottom: .2rem;
  border-bottom: .02rem solid var(--gold);
}
.section-title.noline { border-bottom: none; padding-bottom: 0; margin-bottom: .28rem; }

/* ─── 金色主按钮（index.wxss .buy-btn）─── */
.btn-gold {
  display: block; width: 100%;
  height: 1rem; line-height: 1rem; padding: 0;
  background: linear-gradient(135deg, #B8943A 0%, #D4AF37 100%);
  color: var(--navy);
  font-size: .4rem;              /* 微调C④：核心 CTA 强化 */
  font-weight: 700;
  border-radius: .08rem;
  letter-spacing: .04rem;
  box-shadow: 0 .02rem .08rem rgba(184,148,58,.35);
}
.btn-gold:disabled { opacity: .6; }
.btn-navy {
  display: block; width: 100%;
  height: .92rem; line-height: .92rem;
  background: var(--navy); color: var(--cream);
  font-size: .38rem; border-radius: .08rem; letter-spacing: .03rem;
}

/* ─── 进度条（index/profile 共用）─── */
.progress-bar-bg {
  height: .12rem; background: #E8E0D0;
  border-radius: .06rem; overflow: hidden; margin-bottom: .2rem;
}
.progress-bar-fill {
  height: 100%; background: var(--gold);
  border-radius: .06rem; transition: width .5s ease;
}

/* ─── 购买态门控（守铁律#1）──────────────────────────────────
 * 购买相关的块默认 display:none，等 h5app.js 同步读完本地缓存、给 <html> 加上
 * data-buy="yes"/"no" 才显示。写在 <html> 上是为了能在 <head> 里就生效——
 * 首帧既不闪购买卡、也不闪已购横幅。没缓存的新用户两块都不渲染，
 * 等云端 checkBuy 回来才定，对应小程序 isPurchased:true + purchaseChecked:false 的效果。 */
[data-when] { display: none !important; }
html[data-buy="no"]  [data-when="unpaid"] { display: block !important; }
html[data-buy="yes"] [data-when="paid"]   { display: block !important; }
html[data-buy="no"]  [data-when="unpaid"].flexrow,
html[data-buy="yes"] [data-when="paid"].flexrow { display: flex !important; }

/* ─── 轻提示条（错误/加载）─── */
.tip {
  margin: .24rem .3rem; padding: .24rem .3rem;
  background: #fff; border-radius: .12rem;
  border-left: .06rem solid var(--gold);
  font-size: .3rem; color: var(--gray);
  box-shadow: 0 .01rem .06rem rgba(27,42,74,.04);
}
.tip.err { border-left-color: #C0392B; color: #C0392B; }
.loading { text-align: center; padding: .8rem; font-size: .32rem; color: var(--gray); }

/* ─── 轻 toast ─── */
.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: rgba(13,23,53,.9); color: #fff;
  font-size: .3rem; padding: .2rem .4rem; border-radius: .5rem;
  z-index: 900; max-width: 80vw; text-align: center;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── 领券弹窗（金色·照搬小程序 index.wxss 领券弹窗·rpx÷100 换算）───────────────
   🔵 08-21 从 index.html 的内联 <style> 搬到这里：老郑要「词表页领券跟主页一样」，
      而"一样"只能靠**同一份实现**——照抄一份到词表页，两边一定会飘。
      DOM 由 js/h5land.js 注入（两页共用），样式住在这个两页都引的文件里。
   ⚠️ 别把它改回某一页的内联样式。 */
/* ── 领券弹窗（金色·照搬 index.wxss 领券弹窗·rpx÷100 换算）── */
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmPop { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.coupon-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4,8,18,.74);
  z-index: 800;                       /* 盖过 navbar(100)/tabbar(200)，低于 toast(900) */
  display: flex; align-items: center; justify-content: center;
  animation: cmFadeIn .25s ease;
}
.coupon-modal { position: relative; width: 5.92rem; animation: cmPop .35s ease; }
.cm-card {
  background: linear-gradient(160deg, #F0DC96 0%, #D4AF37 60%, #B8912E 100%);
  border-radius: .36rem;
  padding: .52rem .44rem .4rem;
  text-align: center;
  color: #2C2106;
  box-shadow: 0 .16rem .5rem rgba(0,0,0,.5);
}
.cm-eyebrow { font-size: .28rem; font-weight: 700; letter-spacing: .04rem; opacity: .85; }
.cm-amount {
  font-family: 'Baskerville', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  font-size: 1.12rem; font-weight: 800; line-height: 1.1; margin-top: .12rem;
  font-variant-numeric: tabular-nums;
}
.cm-symbol { font-size: .52rem; font-weight: 700; vertical-align: .3rem; margin-right: .04rem; }
.cm-label { display: block; font-size: .3rem; font-weight: 700; margin-top: .04rem; }
.cm-divider { border-top: .02rem dashed rgba(44,33,6,.35); margin: .3rem .12rem .24rem; }
.cm-note { display: block; font-size: .3rem; opacity: .85; line-height: 1.7; }
.cm-btn {
  /* 08-21 老郑「全站统一用首页那个蓝」：原来这里是 #1A2547，与主色 --navy #1B2A4A
     只差 1~3 个色阶、肉眼分不出，却是第四个深蓝值。归一到 --navy。 */
  margin-top: .32rem; background: var(--navy); color: #F0DC96;
  font-size: .34rem; font-weight: 800; padding: .26rem 0;
  border-radius: .48rem; letter-spacing: .04rem;
}
.cm-btn:active { opacity: .94; }
.cm-btn-disabled { opacity: .6; }
.cm-close {
  position: absolute; left: 50%; bottom: -.92rem; transform: translateX(-50%);
  width: .6rem; height: .6rem; border-radius: 50%;
  border: .02rem solid rgba(255,255,255,.5); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; font-size: .28rem;
}

/* ── 优惠券条（三态·08-21 从 index.html 内联搬到这里）─────────────────────────
   老郑 08-21：「词表页领优惠券，未领/已领都做成跟首页一样」——"一样"只能靠**同一份**：
   样式住在这个两页都引的文件里，DOM 由 js/h5land.js 注入到页面给的容器（.hp-couponbar）里，
   显隐/文案/倒计时/点击也都在 h5land。页面只负责「把这个容器放在哪」。
   态①已领=金胶囊+倒计时脉冲 / 态②关过弹窗未领=虚线「可领」条 / 态③=两个都 hidden 只剩加老师 */
@keyframes couponPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.5); }
  50%      { box-shadow: 0 0 0 .14rem rgba(212,175,55,0); }
}
.hp-couponbar {
  margin: .18rem .3rem 0;
  background: linear-gradient(160deg, #1B2A3A 0%, #16212E 100%);
  border-radius: .16rem; padding: .2rem .22rem;
  box-shadow: 0 .02rem .12rem rgba(13,23,53,.12);
}
.hpcb-row { display: flex; align-items: center; }
/* 我的页面价格卡里的券条容器（老郑 09-14）：同一份 BAR_HTML，只是摆在价格下面、留一点上边距 */
.pf-couponbar { margin-top: .16rem; }
.pf-couponbar .hpcb-row { flex-wrap: wrap; gap: .12rem; }
/* 10-18 老郑截图：价格卡里胶囊 + 「＋加老师」挤不进一行，按钮掉到第二行右边、悬在半空。
   这张卡下面两行就是「联系老师」入口，卡里那颗按钮是重复的 ⇒ 我的页不显示它，券条自己占一行。 */
.pf-couponbar .hpcb-teacher { display: none; }
.pf-couponbar .hpc { max-width: 100%; }
.hpc { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; padding: .1rem .18rem; border-radius: .28rem; }
/* 态①已领：金渐变实心胶囊 + 脉冲（index.wxss .hpc-active） */
.hpc-active {
  background: linear-gradient(90deg, #E9D17C 0%, #C9A13B 100%);
  box-shadow: 0 .02rem .12rem rgba(184,148,58,.3);
  animation: couponPulse 2s infinite;
}
.hpc-amt { font-size: .3rem; font-weight: 800; color: #3A2C07; flex: none; }
.hpc-sep { flex: none; width: .02rem; height: .28rem; background: rgba(58,44,7,.35); margin: 0 .1rem; }
.hpc-status {
  font-size: .28rem; color: #3A2C07; letter-spacing: .003rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* 态②未领·关过弹窗：虚线「可领」条（点击重新弹窗） */
.hpc-hint { background: rgba(212,175,55,.16); border: .02rem dashed rgba(227,199,102,.7); }
.hpc-hint:active { opacity: .85; }
.hpc-hint .hpc-tx {
  font-size: .28rem; font-weight: 700; color: #E8CF8A; letter-spacing: .005rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hpcb-teacher {
  flex: none; margin-left: auto;
  background: linear-gradient(135deg, #E3C766 0%, #C19B35 100%);
  color: var(--navy); font-size: .28rem; font-weight: 700;   /* 08-21 归一：原 #1A2547 */
  padding: .16rem .22rem; border-radius: .3rem;
  white-space: nowrap; line-height: 1.2;
  box-shadow: 0 .02rem .08rem rgba(184,148,58,.3);
}

/* 「◀ 返回单词卡」（08-19 老郑：图标和文字大小样式做成跟学习页左上角一样）──
   🔴 光挂 .nav-back 是不够的：学习页那个用的是 learn.css 里自己的 .nav-back（.3rem / #F5F0E8），
      而首页 .navbar 里的是 app.css 那条 ".navbar .nav-back"（.44rem / #fff）—— 两套同名不同值，
      实测下来一个 16.8px 一个 24.6px，差了一大截。这里按学习页的值覆盖。
   ⚠️ 定位仍保持 absolute：首页标题是居中的，返回键必须脱离文档流压在左边，
      否则标题会被挤得不居中（学习页那条 .nav 是 space-between，结构本来就不同）。 */
#nav-back-wc { font-size: .3rem; color: #F5F0E8; letter-spacing: .01rem; }