/* =========================================================
   手机端 · 现代编辑风设计系统
   基调：纸白灰背景 + 近黑文字 + 单一松绿点缀
   ========================================================= */
:root{
  --bg:#F4F3F1;            /* 页面底色（纸感） */
  --card:#FFFFFF;
  --ink:#1C1C1E;           /* 主文字 近黑 */
  --ink-2:#6F6F76;         /* 次级文字 */
  --ink-3:#A7A7AD;         /* 弱文字/图标 */
  --line:#E7E5E0;          /* 分隔线 */
  --accent:#0F6B54;        /* 单一主色 松绿 */
  --accent-deep:#0B4F3E;
  --accent-soft:#E8EFEA;
  --accent-bright:#35C692; /* 深底上的亮绿 */
  --gold:#B98B2F;          /* 仅钻石徽标点缀 */
  --danger:#C2413A;
  --black:#161618;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
    "Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(66px + env(safe-area-inset-bottom));
}
img{display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font-family:inherit}
input:focus,textarea:focus,button:focus{outline:none}

.wrap{max-width:620px;margin:0 auto;padding:0 16px}
.center{text-align:center}
.muted{color:var(--ink-2)}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------- 页面大标题 ---------------- */
.pt{padding:26px 0 2px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.pt .subt{font-size:12.5px;color:var(--ink-2);font-weight:400;letter-spacing:0;margin-top:4px}

/* ---------------- 首页顶栏 ---------------- */
.hdr{max-width:620px;margin:0 auto;padding:22px 16px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:20px;font-weight:800;letter-spacing:.01em;line-height:1.3}
.slogan{font-size:12px;color:var(--ink-2);margin-top:3px}
.hdr .brand{display:block}

/* ---------------- 胶囊 / 徽标 ---------------- */
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;
  padding:6px 12px;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap}
.pill.line{border:1px solid var(--line);color:var(--ink-2);background:var(--card)}
.pill.ink{background:var(--black);color:#fff}
.pill.green{background:var(--accent);color:#fff}
.pill.gray{background:#EEEDE9;color:#7A7A80}
.pill.gold{background:var(--black);color:#fff}
.pill.gold::before{content:"✦";color:var(--gold);margin-right:1px}

/* 权限标签：免费 / 会员 / 钻石 */
.ptag{display:inline-flex;align-items:center;gap:3px;border-radius:6px;
  padding:2.5px 7px;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.02em}
.ptag.p0{background:#EFEEE9;color:#7B7B82}
.ptag.p1{background:var(--accent-soft);color:var(--accent-deep)}
.ptag.p2{background:var(--black);color:#fff}
.ptag.p2::before{content:"✦";color:var(--gold);font-size:9px}

/* ---------------- 搜索条 ---------------- */
.searchbar{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;height:44px;padding:0 13px;
  box-shadow:0 1px 2px rgba(20,20,22,.03)}
.searchbar svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;font-size:14px}
.searchbar input::placeholder{color:var(--ink-3)}

/* ---------------- 分类胶囊（横滑） ---------------- */
.chips{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 0;
  padding:2px 16px 4px;scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;transition:all .15s}
.chip.on{background:var(--black);border-color:var(--black);color:#fff;font-weight:600}
.chip:active{transform:scale(.96)}

/* ---------------- 区块标题 ---------------- */
.sec{margin-top:26px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h .t{font-size:17px;font-weight:750;letter-spacing:-.01em}
.sec-h .more{display:inline-flex;align-items:center;gap:1px;font-size:12.5px;color:var(--ink-3)}
.sec-h .more svg{width:13px;height:13px}
.sec-h .num{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em}

/* ---------------- 封面占位 ---------------- */
.cov{position:relative;overflow:hidden;background:
  linear-gradient(152deg,#EFECE5 0%,#E4E0D4 100%);display:flex;
  align-items:center;justify-content:center}
.cov img{width:100%;height:100%;object-fit:cover}
.cov .wm{font-size:46px;font-weight:800;color:rgba(25,25,27,.12);line-height:1;user-select:none}
.cov .cnt{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(15,15,17,.6);backdrop-filter:blur(6px);color:#fff;border-radius:999px;
  padding:3.5px 9px;font-size:11px;font-weight:600;line-height:1}
.cov .cnt svg{width:10px;height:10px}
.cov .dur{position:absolute;right:6px;bottom:6px;background:rgba(10,10,12,.66);color:#fff;
  border-radius:5px;padding:1.5px 6px;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------- 首页横滑课程卡 ---------------- */
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:2px -16px 0;
  padding:0 16px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.hscroll::-webkit-scrollbar{display:none}
.scard{flex:0 0 148px;scroll-snap-align:start;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.scard .cov{width:100%;aspect-ratio:4/3}
.scard .cov .wm{font-size:38px}
.scard .tx{padding:9px 11px 12px}
.scard .tt{font-size:13.5px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .mm{margin-top:7px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3)}

/* ---------------- 首页系列课程 2列网格 ---------------- */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cgrid .scard{flex:none;width:100%}
.cgrid .scard .cov{aspect-ratio:3/2}
.cgrid .scard .cintro{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* ---------------- 视频行 ---------------- */
.vlist{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:0 14px;margin-top:0}
.vlist.plain{background:transparent;border:0;border-radius:0;padding:0}
.mrow{display:flex;gap:12px;padding:13px 0}
.vlist .mrow{border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow .th{position:relative;flex:0 0 124px;width:124px;aspect-ratio:16/10;
  border-radius:10px;overflow:hidden}
.mrow .th .wm{font-size:30px}
.mrow .bd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mrow .tt{font-size:14.5px;font-weight:600;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mrow .meta{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.mrow .meta .dot{opacity:.6}
.mrow .meta .src{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* ---------------- 大课程块 ---------------- */
.cblock{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;margin-bottom:16px}
.cblock .cov{width:100%;aspect-ratio:16/9}
.cblock .bd{padding:13px 15px 15px}
.cblock .tt{font-size:15.5px;font-weight:700;line-height:1.4}
.cblock .ds{font-size:12.5px;color:var(--ink-2);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cblock .mm{display:flex;align-items:center;gap:8px;margin-top:9px}
.cblock .mm .by{font-size:11.5px;color:var(--ink-3)}

/* ---------------- 课程搜索行 ---------------- */
.crow{display:flex;gap:12px;align-items:stretch;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px}
.crow .cv{position:relative;flex:0 0 112px;width:112px;aspect-ratio:16/10;
  border-radius:9px;overflow:hidden;align-self:center}
.crow .cv .wm{font-size:28px}
.crow .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.crow .tt{font-size:14px;font-weight:600;line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow .mm{margin-top:7px;font-size:11px;color:var(--ink-3);display:flex;gap:6px;align-items:center}

/* ---------------- 剧集行 ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.card.pad{padding:16px}
.epr{display:flex;align-items:center;gap:12px;padding:13px 15px}
.epr+.epr{border-top:1px solid var(--line)}
.epr .cv{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:12px;overflow:hidden;background:#ECEAE4}
.epr .cv img{width:100%;height:100%;object-fit:cover;display:block}
.epr .cv .wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#9A988F}
.epr .cv .idx{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;line-height:1;padding:2px 5px;border-top-right-radius:7px;font-style:normal;font-variant-numeric:tabular-nums}
.epr .bd{flex:1;min-width:0;display:flex;flex-direction:column}
.epr .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epr .m{font-size:11px;color:var(--ink-3);margin-top:2px}
.epr .pl{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center}
.epr .pl svg{width:19px;height:19px}
.epr .pl .ok{color:var(--accent)}
.epr .pl .no-ok{color:#C9C7C1}

/* ---------------- 按钮 ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:12px;height:48px;padding:0 20px;font-size:15px;font-weight:600;
  cursor:pointer;border:0;transition:transform .08s,opacity .15s;line-height:1}
.btn:active{transform:scale(.98);opacity:.9}
.btn.dark{background:var(--black);color:#fff}
.btn.green{background:var(--accent);color:#fff}
.btn.ghost{background:var(--card);border:1px solid var(--ink);color:var(--ink)}
.btn.soft{background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.btn.block{display:flex;width:100%}
.btn.sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:10px}

/* ---------------- 表单 ---------------- */
.field{margin-top:15px}
.field label{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-bottom:7px}
.field input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:11px;
  height:47px;padding:0 13px;font-size:15px;color:var(--ink);transition:border .15s}
.field input:focus{border-color:var(--ink)}
.flash{display:flex;gap:8px;align-items:center;border-radius:11px;padding:10px 13px;
  font-size:13px;line-height:1.4;margin-bottom:10px}
.flash.ok{background:var(--accent-soft);color:var(--accent-deep)}
.flash.error{background:#FBEAE8;color:var(--danger)}

/* ---------------- 底部导航 ---------------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav-in{max-width:620px;margin:0 auto;display:flex}
.nav .it{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:7px 0 6px;color:var(--ink-3);transition:color .15s}
.nav .it svg{width:23px;height:23px}
.nav .it span{font-size:10px;font-weight:600;letter-spacing:.03em}
.nav .it.on{color:var(--black)}

/* ---------------- 空状态 ---------------- */
.emptyp{text-align:center;color:var(--ink-3);padding:44px 0;font-size:13px}

/* ---------------- 视频页 ---------------- */
.player{background:#000}
.player video{width:100%;max-height:56vh;display:block;background:#000;margin:0 auto}
.pinfo-wrap{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px;margin-top:14px}
.pinfo-wrap h1{font-size:17px;font-weight:750;line-height:1.45;letter-spacing:-.01em}
.pinfo-wrap .meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;
  font-size:12px;color:var(--ink-3)}
.pinfo-wrap .link-line{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-2)}
.pinfo-wrap .link-line a{font-weight:600;color:var(--accent)}

/* 升级/开通引导大卡 */
.procard{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:20px;background:linear-gradient(135deg,#1E1E21,#2B2B2F);color:#fff;
  border-radius:18px;padding:17px 18px}
.procard .pt{font-size:15.5px;font-weight:700}
.procard .ps{font-size:12px;color:#A9A9AF;margin-top:4px}
.procard .ps b{color:var(--accent-bright);font-weight:800;font-size:14px}
.procard .go{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}

/* ---------------- 我的页 ---------------- */
.prof{display:flex;align-items:center;gap:14px;padding:24px 0 6px}
.avatar{flex:0 0 58px;width:58px;height:58px;border-radius:50%;background:#E9E7E1;
  color:#3A3A3E;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800}
.prof .who{flex:1;min-width:0}
.prof .nm{font-size:18px;font-weight:800;letter-spacing:-.01em}
.prof .sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:14px}
.mlist a{display:flex;align-items:center;gap:12px;padding:15px 16px;font-size:14.5px;font-weight:500}
.mlist a+a{border-top:1px solid var(--line)}
.mlist a .ar{margin-left:auto;color:var(--ink-3);font-size:18px;line-height:1}
.mlist a.danger{color:var(--danger)}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:5px 16px;margin-top:14px}
.info-card .rw{display:flex;justify-content:space-between;padding:11px 0;font-size:13px}
.info-card .rw+.rw{border-top:1px dashed var(--line)}
.info-card .k{color:var(--ink-2)}
.info-card .v{color:var(--ink);font-weight:500}

/* ---------------- 会员方案 ---------------- */
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:17px 18px;margin-top:14px;position:relative}
.plan .pl-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan .nm{font-size:16px;font-weight:750}
.plan .price{display:flex;align-items:baseline;gap:2px;color:var(--ink)}
.plan .price .rmb{font-size:14px;font-weight:700}
.plan .price b{font-size:29px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .price .per{font-size:11.5px;color:var(--ink-3);font-weight:400}
.plan ul{list-style:none;margin-top:12px}
.plan ul li{position:relative;padding-left:24px;font-size:12.8px;color:var(--ink-2);
  padding-top:3.5px;padding-bottom:3.5px;line-height:1.6}
.plan ul li::before{content:"✓";position:absolute;left:0;top:5.5px;width:16px;height:16px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:10px;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.plan .buy{margin-top:14px}
.plan.hot{border:1.6px solid var(--accent);box-shadow:0 6px 18px rgba(15,107,84,.08)}
.plan.hot .flag{position:absolute;top:-9px;left:16px;background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.04em}
.plan .cur-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:999px}
.plan .cur-tag.gold{color:var(--gold);background:#F3EAD8}
.steps{padding:2px 2px 0}
.steps ol{margin-left:18px}
.steps li{font-size:13.5px;color:var(--ink-2);line-height:2}
.steps b{color:var(--ink)}
.qr{width:136px;height:136px;object-fit:cover;border-radius:14px;
  border:1px solid var(--line);margin:12px auto 2px;display:block}

/* ---------------- 登录 / 注册 ---------------- */
.auth{max-width:400px;margin:0 auto;padding:60px 20px 20px}
.auth .brand{font-size:22px;font-weight:800;text-align:center}
.auth .sub{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:5px}
.auth form{margin-top:24px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:8px 18px 18px}
.auth .hint{font-size:13px;color:var(--ink-2);text-align:center;margin-top:14px}
.auth .hint a{color:var(--accent);font-weight:600}

/* ---------------- 无权限页 ---------------- */
.nope{max-width:400px;margin:0 auto;padding:70px 24px 20px;text-align:center}
.nope .ic{width:76px;height:76px;border-radius:24px;background:var(--card);
  border:1px solid var(--line);margin:0 auto;display:flex;align-items:center;justify-content:center}
.nope .ic svg{width:32px;height:32px;color:var(--ink)}
.nope h1{font-size:18px;font-weight:750;margin-top:18px}
.nope p{font-size:13px;color:var(--ink-2);margin-top:9px;line-height:1.8}

/* ---------------- 页脚 ---------------- */
.foot{padding:26px 0 8px;font-size:11px;color:var(--ink-3);text-align:center;letter-spacing:.02em}