/* 学个明白 · 口语精听　会员站
   令牌真源 = WeixinK12/miniapp/prototype/v8.html 的 :root（px 手机稿，H5 直接用不换算）
   规范 = WeixinK12/miniapp/design/SPEC.md

   ⚠️ 故意没有照搬的三样（它们是 K12 产品语义，成人站用了串味）：
      明白卡金色体系 --gold/--y ｜ 学科识别色 --sub-* ｜ 恐龙 IP
      本站的付费门叫「访问码」，不是明白卡。
   ⚠️ 字号十档、字重两档(600/700，800 一处不许有)、圆角四档、间距四档、阴影四档 —— 照守。
      正文取 18px/14px 两档（阅读型页面，正文就是主体），都在十档之内。 */
:root{
  --g:#1E7B4E; --gd:#16543C; --gl:#EBF3EE;
  --ink:#14261F; --ink2:#3C4E45; --ink3:#4E6B5C; --mut:#6E8078;
  --note:#8A9A92; --dim:#98A2AE; --faint:#A6B3AC;
  --line:#E4EAE6; --line2:#F0F4F2;
  --bg:#F3F5F2; --card:#fff;
  --paper:#FEFEFC; --pedge:#E7E3D8; --cream:#FFFDF6; --cream2:#FBF3DF; --cedge:#E7DCBE;
  --r-lg:10px; --r-md:6px; --r-sm:3px; --r-pill:999px;
  --sp-1:6px; --sp-2:13px; --sp-3:20px; --sp-4:28px;
  --sh-0:none;
  --sh-1:0 1px 2px rgba(20,38,31,.06);
  --sh-2:0 2px 8px rgba(20,38,31,.07);
  --sh-3:0 8px 24px rgba(20,38,31,.10);
  --cjk:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --en:Georgia,"Times New Roman",serif;
  /* 字号十档（rpx/2） */
  --t8:8px; --t9:9.5px; --t11:11px; --t12:12.5px; --t14:14px;
  --t15:15.5px; --t18:18px; --t21:21px; --t26:26px; --t31:31px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--cjk);background:var(--bg);color:var(--ink);
     font-size:var(--t14);line-height:1.6;
     padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* 宽屏时内容居中不拉满（胡飞定：手机竖屏优先） */
.wrap{max-width:560px;margin:0 auto;padding:0 var(--sp-3)}

/* ── 头部 ───────────────────────────── */
.hd{background:var(--gd);color:#fff;padding:var(--sp-4) 0 var(--sp-3)}
.hd .wrap{display:flex;align-items:center;gap:var(--sp-2)}
.hd .bk{font-size:var(--t18);width:28px;margin-left:-6px;opacity:.9}
.hd .tt{font-size:var(--t18);font-weight:600}
.hd .sb{font-size:var(--t11);color:#A9C7B7;margin-top:2px}
.brand{font-size:var(--t11);color:#A9C7B7;letter-spacing:.06em;margin-bottom:var(--sp-1)}
.brand b{color:#fff;font-weight:600}

/* ── 卡片 ───────────────────────────── */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
      padding:var(--sp-3);margin-bottom:var(--sp-2)}
.sec{margin:var(--sp-3) 0 var(--sp-2);display:flex;align-items:baseline;justify-content:space-between}
.sec .t{font-size:var(--t14);font-weight:600}
.sec .m{font-size:var(--t11);color:var(--g)}

/* ── 按钮（三档高度，颜色必须显式给类，见 SPEC §3） ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
     height:44px;padding:0 var(--sp-3);border:0;border-radius:var(--r-md);
     font-family:inherit;font-size:var(--t15);font-weight:600;cursor:pointer;
     line-height:1;white-space:nowrap}  /* line-height:1 必须有——中文字体基线会把文字顶出按钮框 */
.btn.lg{height:48px;width:100%;font-size:var(--t15)}
.btn.sm{height:30px;padding:0 var(--sp-2);font-size:var(--t11)}
.btn.g{background:var(--g);color:#fff}
.btn.ln{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.btn.dis{background:var(--line2);color:var(--dim);pointer-events:none}

/* ── 等级列表 ───────────────────────── */
.lv{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;
    border-bottom:1px solid var(--line2)}
.lv:last-child{border-bottom:0}
.lv .id{width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-md);
        background:var(--gl);color:var(--gd);font-weight:700;font-size:var(--t15);
        display:flex;align-items:center;justify-content:center}
.lv.soon .id{background:var(--line2);color:var(--dim)}
.lv .bd{flex:1;min-width:0}
.lv .n{font-size:var(--t14);font-weight:600}
.lv .n span{font-weight:400;color:var(--mut);margin-left:6px;font-size:var(--t11)}
.lv .d{font-size:var(--t11);color:var(--note);margin-top:2px}
.lv .go{font-size:var(--t11);color:var(--g);font-weight:600}
.lv .go.soon{color:var(--dim);font-weight:400}

/* ── 篇目行 ─────────────────────────── */
.it{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;
    border-bottom:1px solid var(--line2)}
.it:last-child{border-bottom:0}
.it .no{width:22px;font-size:var(--t11);color:var(--dim);font-variant-numeric:tabular-nums}
.it .bd{flex:1;min-width:0}
.it .t{font-family:var(--en);font-size:var(--t14);font-weight:600}
.it .z{font-size:var(--t11);color:var(--mut);margin-top:1px}
.it .m{font-size:var(--t9);color:var(--note);margin-top:2px;font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:var(--t9);padding:1px 5px;border-radius:var(--r-sm);
      background:var(--gl);color:var(--gd);font-weight:600;margin-left:5px;vertical-align:1px}
.chip.lock{background:var(--line2);color:var(--dim)}
.it .ck{font-size:var(--t11);color:var(--g)}

/* ── 播放器 ─────────────────────────── */
.pl{position:sticky;top:0;z-index:9;background:var(--card);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-1);padding:var(--sp-2) 0}
.pl .row{display:flex;align-items:center;gap:var(--sp-2)}
.pl .play{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:0;
          background:var(--g);color:#fff;font-size:var(--t15);cursor:pointer}
.pl .tm{font-size:var(--t11);color:var(--mut);font-variant-numeric:tabular-nums;min-width:74px}
.bar{height:4px;background:var(--line);border-radius:var(--r-pill);flex:1;position:relative;cursor:pointer}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--g);border-radius:var(--r-pill)}
.pl .ops{display:flex;gap:var(--sp-1);margin-top:var(--sp-2);flex-wrap:wrap}

/* ── 正文对照 ─────────────────────────
   ⚠️ 类名叫 .dlg 不叫 .ln —— `.ln` 是 SPEC §3 规定的**描边按钮**颜色类
      （.btn 的 g/pr/gold/or/ln/dis 之一）。这里原来也叫 .ln，结果
      `<button class="btn ln">` 同时命中两条，正文行的 padding:13px 0
      把按钮的 padding:0 20px 覆盖掉，按钮被压成只有文字宽（09-21 踩到）。
      这就是 SPEC §9 说的「最后一个类不许撞全局类」，加前缀防撞。 */
.dlg{padding:var(--sp-2) 0;border-bottom:1px solid var(--line2);display:flex;gap:var(--sp-2)}
.dlg:last-child{border-bottom:0}
.dlg .no{width:20px;flex:0 0 20px;font-size:var(--t9);color:var(--dim);padding-top:4px;
        font-variant-numeric:tabular-nums}
.dlg .en{font-family:var(--en);font-size:var(--t18);line-height:1.55;color:var(--ink)}
.dlg .zh{font-size:var(--t14);line-height:1.6;color:var(--mut);margin-top:4px}
.dlg .sp{color:var(--g);font-weight:600}
.dlg .zh .sp{color:var(--note)}
.gq{border-bottom:1px dotted var(--faint)}

/* ── 重点 / 语法点 ──────────────────── */
.box{background:var(--cream);border:1px solid var(--cedge);border-radius:var(--r-lg);
     padding:var(--sp-3);margin-top:var(--sp-2)}
.box .h{font-size:var(--t14);font-weight:600;margin-bottom:var(--sp-2)}
.box .h span{font-size:var(--t9);font-weight:400;color:var(--note);margin-left:6px}
.pt{padding:var(--sp-2) 0;border-bottom:1px solid var(--cedge)}
.pt:last-child{border-bottom:0;padding-bottom:0}
.pt .w{font-family:var(--en);font-size:var(--t15);font-weight:600;color:var(--g)}
.pt .z{font-size:var(--t12);margin-left:6px}
.pt .n{font-size:var(--t11);color:var(--mut);line-height:1.6;margin-top:3px}
.gr .q{font-family:var(--en);font-size:var(--t15);font-weight:600;color:var(--g)}
.gr .p{font-size:var(--t12);margin-top:3px}
.gr .y{font-size:var(--t11);color:var(--mut);line-height:1.6;margin-top:3px}
.gr .sm{margin-top:var(--sp-1);padding-left:var(--sp-2);border-left:2px solid var(--cedge)}
.gr .sm div{font-size:var(--t11);line-height:1.7}
.gr .sm b{font-family:var(--en);font-weight:600}
.gr .sm i{font-style:normal;color:var(--mut);margin-left:6px}

/* ── 访问码 ─────────────────────────── */
.gate{text-align:center;padding:var(--sp-4) var(--sp-3)}
.gate h2{font-size:var(--t18);font-weight:600;margin-bottom:var(--sp-1)}
.gate p{font-size:var(--t12);color:var(--mut);margin-bottom:var(--sp-3);line-height:1.7}
.gate input{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-md);
            text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:var(--t18);
            letter-spacing:.14em;text-transform:uppercase;background:var(--card);color:var(--ink)}
.gate input:focus{outline:0;border-color:var(--g)}
.gate .err{font-size:var(--t11);color:#C0392B;margin-top:var(--sp-2);min-height:16px}

/* ── 分级说明 ───────────────────────── */
.lvrow{padding:var(--sp-2) 0;border-bottom:1px solid var(--line2)}
.lvrow:last-child{border-bottom:0}
.lvrow .hd2{display:flex;align-items:baseline;gap:var(--sp-1)}
.lvrow .b{font-size:var(--t15);font-weight:700;color:var(--gd)}
.lvrow .band{font-size:var(--t9);color:var(--note)}
.lvrow .can{font-size:var(--t12);line-height:1.7;margin-top:3px}
.lvrow .us{font-size:var(--t11);color:var(--mut);line-height:1.6;margin-top:4px;
           padding-left:var(--sp-2);border-left:2px solid var(--gl)}
.flagbox{background:var(--cream2);border:1px solid var(--cedge)}
.note{font-size:var(--t11);color:var(--note);line-height:1.7}

.ft{text-align:center;font-size:var(--t9);color:var(--note);padding:var(--sp-4) var(--sp-3);line-height:1.8}
.empty{text-align:center;color:var(--note);font-size:var(--t12);padding:var(--sp-4) 0}

/* ── 图标：形制照搬小程序（24×24 白 glyph + 圆角渐变底砖，SPEC §7a） ──
   ⚠️ 底色只许三种：绿=内容与免费 / 蓝=打印 / 金=明白卡。
      成人站没有「明白卡」，所以只用绿 + 未开放的灰。 */
.ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
    background:linear-gradient(135deg,#2A9163,#16543C)}
.ic.off{background:linear-gradient(135deg,#C8D2CC,#9AA8A0)}
.ic.sm{width:26px;height:26px;border-radius:7px}
.ic svg{display:block}

/* ── 六级 3+3 网格 ─────────────────────────── */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.lvc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-2) 4px;
     border-radius:var(--r-md);background:var(--card);border:1px solid var(--line2)}
.lvc.on{border-color:var(--g);background:var(--gl)}
.lvc .k{font-size:var(--t15);font-weight:700;color:var(--gd);letter-spacing:.04em}
.lvc.soon .k{color:var(--dim)}
.lvc .nm{font-size:var(--t11);color:var(--ink2)}
.lvc .st{font-size:var(--t9);color:var(--note)}
.lvc.soon .nm,.lvc.soon .st{color:var(--dim)}

/* ── 分段按钮（两个并排，默认选中第一个） ───── */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.seg .btn{width:100%}

/* ── 弹层 ──────────────────────────────────── */
.mask{position:fixed;inset:0;background:rgba(20,38,31,.45);z-index:40;
      display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;
       max-width:560px;padding:var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
       box-shadow:var(--sh-3);max-height:88vh;overflow:auto;text-align:center}
.sheet h3{font-size:var(--t18);font-weight:600}
.sheet .s{font-size:var(--t12);color:var(--mut);line-height:1.75;margin-top:var(--sp-1)}
.sheet .qr{width:210px;height:210px;margin:var(--sp-3) auto;border:1px solid var(--line);
           border-radius:var(--r-md);padding:8px;background:#fff}
.sheet .tip{font-size:var(--t11);color:var(--note);line-height:1.7;margin-bottom:var(--sp-3)}

/* ── 底部 tabbar（小程序式） ────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
        grid-template-columns:repeat(4,1fr);background:var(--card);
        border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:grid;justify-items:center;gap:3px;font-size:var(--t9);color:var(--faint)}
.tabbar a[aria-current="page"]{color:var(--g);font-weight:600}
.tabbar svg{display:block}
body.hastab{padding-bottom:74px}

/* ── 品牌头（带 logo） ─────────────────────── */
.hd .lg{width:34px;height:34px;border-radius:8px;flex:none}
.hd .wrap{gap:var(--sp-2)}