/* ==========================================================
   圆佑圆学堂 · 应用补充样式（依赖 public/train.css）
   本文件承载样机中各页面级样式（播放器/购买卡/学习中心/充值/
   讲师表单/后台单元格等），train.css 保持与设计文档同源
   ========================================================== */

/* ---------- 通用补充 ---------- */
.bgc{position:absolute;inset:0}
.flash{margin:14px auto 0;max-width:var(--maxw);padding:0 22px}
.flash .in{background:linear-gradient(90deg,#e9f7ee,#f3fbf5);border:1px solid #c4e8d3;color:#16794a;border-radius:var(--r-md);padding:11px 18px;font-size:13.5px;display:flex;align-items:center;gap:9px}
.flash.err .in{background:#fdf0ee;border-color:#f2cfc9;color:#b03a2e}
/* 未解锁内容点击提示（浮层 toast，不用 alert，也不会被顶栏压住） */
.nb-toast{position:fixed;left:50%;top:78px;transform:translate(-50%,-12px);z-index:9999;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #f2cfc9;color:#b03a2e;box-shadow:0 12px 34px rgba(13,63,43,.18);border-radius:999px;
  padding:10px 20px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(560px,92vw)}
.nb-toast.on{opacity:1;transform:translate(-50%,0)}
.nb-toast .ic{font-size:14px}
.crumb{font-size:12px;color:var(--muted);margin:18px 0 10px}
.crumb b{color:var(--ink);font-weight:500}
.page-h{display:flex;align-items:baseline;gap:14px;margin:4px 0 18px;flex-wrap:wrap}
.page-h h1{font-size:23px;color:var(--g-dark);letter-spacing:.5px}
.page-h .cnt{font-size:12.5px;color:var(--muted)}
.page-h .ops{margin-left:auto;display:flex;gap:8px}
.empty-box{text-align:center;color:var(--muted);padding:52px 20px;background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg);font-size:13px}
.empty-box .ic{font-size:30px;margin-bottom:10px}
.cover-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:22px;background:rgba(8,46,31,.18);letter-spacing:2px}
/* 表单错误提示（注册/登录/提现等用 ?err= 回填的场景）——之前只有 div.msg 没有样式，看起来像正文 */
.msg{display:none;font-size:13px;line-height:1.7;border-radius:var(--r-sm);padding:10px 13px}
.msg.err{background:#fdf0ee;border:1px solid #f2cfc9;color:#a8362a;display:flex;gap:7px;align-items:flex-start}
.msg.err::before{content:"⚠";flex:0 0 auto;font-size:13px;line-height:1.6}
.msg.ok{background:#e9f7ee;border:1px solid #c4e8d3;color:#16794a}
/* 无封面时的课程名底纹：让渐变封面看起来是「为这门课生成」的，而不是系统自带空模板 */
.cstencil{position:absolute;inset:0;overflow:hidden;display:flex;align-items:flex-end;padding:10px 12px 26px;pointer-events:none}
.cstencil .cst-t{font-size:15px;line-height:1.45;font-weight:800;color:rgba(255,255,255,.30);letter-spacing:.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 0 rgba(0,0,0,.06)}
.cc-row .cstencil{padding:8px 9px 20px}
.cc-row .cstencil .cst-t{font-size:11px;-webkit-line-clamp:4}

/* ---------- 提现：金额换算卡 / 工单表 ---------- */
.wd-calc{display:flex;gap:22px;flex-wrap:wrap;align-items:center;background:var(--cream2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;margin-top:6px}
.wd-calc .row{display:flex;flex-direction:column;gap:3px}
.wd-calc .row span{font-size:11.5px;color:var(--muted)}
.wd-calc .row b{font-size:15px;color:var(--g-dark)}
.wd-calc .row b.cut{color:var(--red)}
.wd-calc .row b.big{font-size:20px;color:var(--orange)}
.wd-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.wd-sum .bx{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh1)}
.wd-sum .bx .k{font-size:11.5px;color:var(--muted)}
.wd-sum .bx .v{font-size:19px;font-weight:800;color:var(--g-dark);margin-top:4px}
.wd-sum .bx .s{font-size:11px;color:var(--muted2);margin-top:2px}
@media (max-width:760px){.wd-sum{grid-template-columns:repeat(2,1fr)}}

/* ---------- 播放页：播放器 / 空态 / 文稿台 / 倍速 ---------- */
.vp-wrap{position:relative}
.vp-loading{position:absolute;left:0;right:0;top:0;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.85);background:linear-gradient(180deg,rgba(4,20,13,.75),transparent);display:none;pointer-events:none}
.vp-empty{aspect-ratio:16/9;border-radius:var(--r-md);background:radial-gradient(900px 420px at 70% 10%,#123a2b 0%,#0a241a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:20px}
.vp-empty .ic{font-size:40px;opacity:.85}
.vp-empty .t{font-size:15px;font-weight:600}
.vp-empty .s{font-size:12px;color:rgba(255,255,255,.55)}
.doc-stage{aspect-ratio:16/9;max-height:460px;border-radius:var(--r-md);background:linear-gradient(135deg,#123a2b,#0a241a);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.doc-stage .ic{font-size:44px}
.doc-stage .t{font-size:16px;font-weight:700}
.doc-stage .s{font-size:12.5px;color:rgba(255,255,255,.6)}
.doc-stage .ops{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.vp-rate{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}
.vp-rate button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:3px 12px;font-size:12px;color:var(--ink2);cursor:pointer;font-family:inherit}
.vp-rate button.on{background:var(--g);border-color:var(--g);color:#fff;font-weight:700}

/* ---------- 网页确认弹窗（替代原生 confirm） ---------- */
.cf-dlg{border:none;padding:0;background:transparent;overflow:visible}
.cf-dlg::backdrop{background:rgba(8,46,31,.45);backdrop-filter:blur(2px)}
.pv-dlg::backdrop{background:rgba(4,20,13,.72)}
.cf-box{width:min(430px,92vw);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh2);padding:26px 26px 20px;text-align:center}
.cf-box .cf-ic{font-size:34px;line-height:1}
.cf-box .cf-tx{margin:12px 0 20px;font-size:14px;line-height:1.95;color:var(--ink2);text-align:left;white-space:pre-wrap}
.cf-box .cf-bt{display:flex;gap:10px;justify-content:center}
.cf-box .cf-bt .btn{min-width:96px}

/* ---------- 媒体预览弹窗（视频/音频/文稿） ---------- */
.pv-dlg{border:none;padding:0;background:transparent;overflow:visible}
.pv-box{width:min(880px,94vw);background:#0a241a;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pv-box .pv-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;font-size:13px;background:rgba(255,255,255,.07)}
.pv-box .pv-hd .pv-x{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.85);font-size:16px;cursor:pointer;line-height:1}
.pv-box .pv-vp{width:100%;max-height:68vh;display:block;background:#000}
.pv-box .pv-au{padding:44px 24px;text-align:center;color:#fff}
.pv-box .pv-if{width:100%;height:68vh;border:0;background:#fff;display:block}
.pv-box .pv-txt{margin:0;padding:18px 20px;max-height:68vh;overflow:auto;background:#fff;color:#1d2b24;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.pv-box .pv-noinline{padding:56px 28px;text-align:center;color:#fff;background:#0a241a}
.pv-box .pv-noinline .ic{font-size:44px;line-height:1;margin-bottom:14px;opacity:.9}
.pv-box .pv-noinline b{display:block;font-size:15.5px;margin-bottom:9px}
.pv-box .pv-noinline .sub{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.75;max-width:430px;margin:0 auto}
.pv-box .pv-ft{padding:10px 14px;background:rgba(255,255,255,.07);text-align:right}

/* ---------- 顶栏补充 ---------- */
.tb .pts-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.4);color:var(--gold-light);font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:16px}
.tb .pts-pill:hover{background:rgba(245,166,35,.24)}
.tb .lk{font-size:13px;padding:6px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.35);color:#fff}
.tb .lk:hover{border-color:var(--orange-soft);color:var(--orange-soft)}

/* ---------- 首页 ---------- */
/* 首页区块：一律正常流式排列，不做负 margin 上浮。
   原因：区块容器本身没有背景，上浮不会产生「卡片浮起」的层次感，
   只会把标题顶到 hero 底边上（首块标题深色压深绿，视觉上就是被遮挡）。 */
.home-sec{padding:34px 0 6px;margin-top:0;position:relative;z-index:2}
.home-sec + .home-sec{margin-top:10px}
.home-sec .sec-hd{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.home-sec .sec-hd h2{font-size:20px;color:var(--g-dark);letter-spacing:1px;margin:0}
.home-sec .sec-hd .line{width:44px;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:2px;align-self:center;flex:none}
.home-sec .sec-hd .more{margin-left:auto;font-size:12.5px;color:var(--muted);flex:none}
.home-sec .sec-hd .more:hover{color:var(--g)}
.cta-band{background:linear-gradient(120deg,var(--g-deep),#0f4a33);border-radius:var(--r-lg);color:#fff;padding:34px 38px;display:flex;align-items:center;gap:30px;position:relative;overflow:hidden;margin:38px 0 10px}
.cta-band .rings{position:absolute;right:-50px;top:-50px;width:240px;height:240px;opacity:.5}
.cta-band h3{font-size:22px;letter-spacing:1px}
.cta-band p{margin-top:8px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.8;max-width:560px}
.cta-band .btn{margin-left:auto;flex-shrink:0}

/* ---------- 课程详情 ---------- */
/* 顶部「课程介绍视频」舞台：有视频就真播，没有就显示封面 + 明确提示（不再放点不动的假播放条） */
.dt-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:radial-gradient(900px 420px at 70% 10%,#123a2b 0%,#0a241a 70%);box-shadow:var(--sh2)}
.dt-stage .dt-video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.dt-stage .trial{position:absolute;left:14px;top:14px;display:flex;gap:6px;pointer-events:none}
.dt-stage-empty .mask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,rgba(4,20,13,.28),rgba(4,20,13,.72));text-align:center;padding:20px}
.dt-stage-empty .mask .ic{font-size:30px;line-height:1;opacity:.92;filter:grayscale(.15)}
.dt-stage-empty .mask .t{color:#fff;font-size:15px;font-weight:700}
.dt-stage-empty .mask .s{color:rgba(255,255,255,.82);font-size:12.5px}
.dt-stage-tip{margin-top:8px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
/* 目录：章节可折叠 + 「进入本章」入口；课时整行可点 */
.chapter .ch-bd{display:block}
.chapter.fold .ch-bd{display:none}
/* 折叠箭头用 CSS 画（▾ 字形在部分 Windows 字体下会缩成一个点）；整行可点进本章，折叠只认这个 26px 圆角热区 */
.ch-h{transition:background .15s}
.ch-h:hover{background:#f0f5f1}
.ch-h .ar-w{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;flex-shrink:0;margin-left:2px;cursor:pointer}
.ch-h .ar-w:hover{background:rgba(13,63,43,.09)}
.ch-h .ar{width:7px;height:7px;border-right:1.7px solid #7c8d85;border-bottom:1.7px solid #7c8d85;transform:rotate(45deg);transition:transform .18s;margin-top:-4px}
.chapter.fold .ch-h .ar{transform:rotate(-45deg);margin-top:2px}
.ch-h .ch-go{margin-left:12px;font-size:11.5px;color:var(--g);background:var(--g-light);border:1px solid rgba(13,63,43,.14);border-radius:999px;padding:3px 11px;white-space:nowrap;flex-shrink:0}
.ch-h .ch-go:hover{background:var(--g);color:#fff;text-decoration:none}
.ch-h .ch-go.lock{color:var(--muted);background:var(--cream2);border-color:var(--line);cursor:pointer}
.dt-main .lesson{cursor:pointer}
.dt-main .lesson.open:hover{background:var(--g-ll)}
.dt-main .lesson.lock{opacity:.72;cursor:pointer}
.dt-main .lesson.lock:hover{background:var(--cream2)}
.dt-main .lesson .go{font-size:10px;color:var(--g);opacity:0;transition:.18s;flex-shrink:0}
.dt-main .lesson.open:hover .go{opacity:1}
.dt-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.dt-main{min-width:0}
.dt-title{font-size:21px;font-weight:700;line-height:1.4;margin-top:16px}
.dt-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted)}
.dt-meta b{color:var(--gold-deep)}
.dt-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:18px 0 16px;font-size:14px;flex-wrap:wrap}
.dt-tabs a{padding:0 2px 10px;cursor:pointer;color:var(--muted)}
.dt-tabs a.on{color:var(--g-dark);font-weight:700;border-bottom:2.5px solid var(--orange)}
.dt-body{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;font-size:13.5px;color:var(--ink2);line-height:1.9}
.dt-side{position:sticky;top:78px}
.buy-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh2);border:1px solid rgba(13,63,43,.06);overflow:hidden}
.buy-card .bp{padding:20px;text-align:center;border-bottom:1px dashed var(--line)}
.buy-card .bp .pv{font-size:26px}
.buy-card .bp .op{font-size:12px;color:var(--muted2);margin-top:2px}
.buy-card .bb{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.buy-card .bb .row2{display:flex;gap:10px}
.tcher-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh1);border:1px solid var(--line);padding:18px;margin-top:16px;text-align:center}
.tcher-card .ava{width:58px;height:58px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,var(--purple),#8f76f0);color:#fff;font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tcher-card h4{margin-top:10px;font-size:15px;font-weight:700}
.tcher-card .ttl{font-size:11.5px;color:var(--muted);margin-top:2px}
.tcher-card .exp{font-size:12px;color:var(--ink2);line-height:1.75;margin-top:10px;text-align:left;background:var(--cream2);border-radius:var(--r-sm);padding:10px 12px}

/* ---------- 播放页 ---------- */
.lp-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.lp-main{min-width:0}
.lp-title{font-size:17px;font-weight:700;margin:14px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-sub{font-size:12px;color:var(--muted)}
.lp-side{position:sticky;top:78px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.lp-side .hd{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--g-dark);display:flex;justify-content:space-between;align-items:center}
.lp-side .ls{overflow-y:auto;flex:1}
.lp-side .ls .lesson{cursor:pointer}
.lp-side .ls .lesson:hover{background:var(--cream2)}
.lp-side .ls .lesson.lock{opacity:.55}
.lp-side .ft{padding:11px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
video.vp{width:100%;aspect-ratio:16/9;background:#0a241a;display:block;border-radius:var(--r-md)}
.vp-note{margin-top:10px;font-size:12px;color:var(--muted);background:var(--gold-l);border:1px solid #efe3c2;border-radius:var(--r-sm);padding:9px 13px;line-height:1.7}

/* ---------- 学习中心 ---------- */
.lc-grid{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}
.lc-menu{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh1);border:1px solid var(--line);padding:10px 0;position:sticky;top:78px}
.lc-menu .it{display:flex;align-items:center;gap:9px;padding:10px 18px;font-size:13px;color:var(--ink2);cursor:pointer;border-left:2.5px solid transparent}
.lc-menu .it:hover{background:var(--g-ll);color:var(--g)}
.lc-menu .it.on{background:var(--g-ll);border-left-color:var(--g);color:var(--g);font-weight:700}
.lc-menu .it .bd{margin-left:auto;background:var(--orange);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:0 6px;line-height:1.7}
.course-prog{display:flex;gap:16px;background:#fff;border-radius:var(--r-md);border:1px solid var(--line);padding:14px;align-items:center;margin-bottom:12px;box-shadow:var(--sh1)}
.course-prog .cov{flex:0 0 150px;aspect-ratio:16/10;border-radius:var(--r-sm);position:relative;overflow:hidden}
.course-prog .info{flex:1;min-width:0}
.course-prog h4{font-size:14.5px;font-weight:600}
.course-prog .sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.course-prog .prog{margin-top:10px}
.course-prog .pv{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}

/* ---------- 充值中心 ---------- */
/* ---------- 提示条内的按钮 / 开关文字不被拆行 ---------- */
.d-note .btn.line,.d-note .btn.line:hover{background:#fff;color:var(--g-dark);border-color:var(--g)}
.sw{white-space:nowrap}

/* ---------- 登录/注册：身份切换提示条 ---------- */
.as-sw{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--cream2);font-size:12px;color:var(--ink2);text-align:center;line-height:1.8}
.as-sw a{color:var(--g);font-weight:700;text-decoration:none}
.as-sw a:hover{text-decoration:underline}

/* ---------- 顶栏搜索框（可输入） ---------- */
.tb-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:0 5px 0 12px;height:34px;width:200px;margin-left:auto;transition:.18s}
.tb-search:focus-within{border-color:rgba(245,166,35,.65);background:rgba(255,255,255,.15);width:236px}
.tb-search .ts-ic{font-size:12px;opacity:.75;flex:none;line-height:1}
.tb-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-size:12.5px;font-family:inherit;padding:0}
.tb-search input::placeholder{color:rgba(255,255,255,.5)}
.tb-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* 搜索按钮：必须看得见，否则用户不知道怎么触发搜索 */
.tb-search .ts-btn{flex:none;height:26px;padding:0 13px;border:none;border-radius:14px;font-family:inherit;font-size:12.5px;font-weight:700;line-height:1;color:#fff;background:linear-gradient(90deg,var(--orange),#e88b1e);cursor:pointer;transition:.15s}
.tb-search .ts-btn:hover{filter:brightness(1.08);box-shadow:0 2px 8px rgba(245,166,35,.45)}
.tb-search .ts-btn:active{transform:translateY(1px)}

/* ---------- 课程卡「可试听 N 讲」徽标 ---------- */
.trial-flag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--g);background:var(--g-light);border:1px solid rgba(20,86,60,.16);border-radius:20px;padding:1px 8px;line-height:1.6;white-space:nowrap}

.rc-top{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:stretch;margin-bottom:18px}
.bal-card{background:linear-gradient(135deg,var(--g-deep),#0f4a33);border-radius:var(--r-lg);color:#fff;padding:22px 24px;position:relative;overflow:hidden}
.bal-card .rings{position:absolute;right:-40px;bottom:-60px;width:200px;height:200px;opacity:.45}
.bal-card .l{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:1px}
.bal-card .v{margin-top:8px;display:flex;align-items:baseline;gap:8px}
.bal-card .d{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.55)}
.bal-card .btn{margin-top:14px}
.payways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.payw{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px;display:flex;gap:14px;align-items:center;cursor:pointer;transition:.15s}
.payw:hover,.payw.on{border-color:var(--g);box-shadow:var(--sh2)}
.payw .qr{flex:0 0 84px;height:84px;border-radius:8px;background:repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%) 0 0/12px 12px;border:4px solid #fff;box-shadow:0 0 0 1px var(--line);position:relative}
.payw .qr::after{content:"";position:absolute;inset:26px;background:#fff;border:2px solid var(--ink);border-radius:3px}
.payw .t{font-size:14px;font-weight:700}
.payw .s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pay-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-bottom:18px}
.qr-box{background:#fff;border:1px solid #e6ddd0;border-radius:var(--r-md);padding:14px;text-align:center}
.qr-box img{width:100%;max-width:248px;display:block;margin:0 auto;border-radius:8px}
.qr-nm{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.note-guide{margin-top:14px;border:1px solid #e6ddd0;border-radius:var(--r-md);overflow:hidden;background:#faf8f3}
.ng-t{padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--g-dark);background:var(--gold-l);border-bottom:1px solid #efe3c2}
.note-guide img{display:block;width:100%;border-bottom:1px solid #eee5d6}
.ng-f{padding:8px 12px;font-size:11.5px;line-height:1.7;color:var(--ink2)}
.ng-f b{color:var(--g-dark)}
.hint-inline{font-size:11px;font-weight:400;color:var(--ink3);margin-left:4px}
@media (max-width:900px){.pay-grid{grid-template-columns:1fr}}
.wecom-box{background:#f0faf3;border:1px solid #c8e8d2;border-radius:var(--r-md);padding:16px 18px}
.wecom-box .qr-box{border-color:#d8ecdd;background:#fff}
.wecom-tip{font-size:12.5px;line-height:1.75;color:var(--ink2)}
.wecom-tip b{color:var(--g-dark)}
/* 企业微信客服：二维码与说明并排（充值流程卡内的补充通道） */
.wecom-inline{display:flex;gap:18px;align-items:center}
.wecom-inline .qr-box{flex:0 0 168px;padding:10px}
.wecom-inline .qr-box img{max-width:132px}
.wecom-inline .wecom-tip{flex:1;min-width:0}
@media (max-width:640px){.wecom-inline{flex-direction:column;align-items:stretch}.wecom-inline .qr-box{flex:none;max-width:220px;margin:0 auto}}
.steps{display:flex;gap:0;margin:16px 0}
.steps .st{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--muted)}
.steps .st .n{width:24px;height:24px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-bottom:5px;position:relative;z-index:1}
.steps .st.on{color:var(--g);font-weight:700}
.steps .st.on .n{background:var(--g);border-color:var(--g);color:#fff}
.steps .st::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:1.5px;background:var(--line);z-index:0}
.steps .st:first-child::before{display:none}
.shot-prev{max-width:180px;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:8px}

/* ---------- 登录 / 注册 ---------- */
.auth-wrap{max-width:860px;margin:36px auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh2);border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;min-height:440px}
.auth-wrap .left{position:relative;background:radial-gradient(900px 420px at 80% -10%, #1d7a52 0%, transparent 60%),linear-gradient(150deg,var(--g-deep),#0f4a33);color:#fff;padding:38px 34px;overflow:hidden}
.auth-wrap .left .rings{position:absolute;right:-50px;bottom:-70px;width:230px;height:230px;opacity:.5}
.auth-wrap .left h3{font-size:22px;font-weight:800;letter-spacing:1px;position:relative}
.auth-wrap .left p{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.7);line-height:2;position:relative}
.auth-wrap .left .pts{margin-top:26px;position:relative}
.auth-wrap .left .pts span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gold-light);border:1px solid rgba(232,200,138,.4);border-radius:14px;padding:3px 12px;margin:0 6px 6px 0}
.auth-wrap .right{background:#fff;padding:32px 34px}
.auth-wrap .right h4{font-size:18px;color:var(--g-dark)}
.auth-wrap .right .sub{font-size:12px;color:var(--muted);margin:6px 0 20px}
.auth-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:20px;font-size:14.5px}
.auth-tabs a{padding:0 2px 10px;color:var(--muted)}
.auth-tabs a.on{color:var(--g-dark);font-weight:700;border-bottom:2.5px solid var(--orange)}

/* ---------- 讲师主页 ---------- */
.tp-hero{background:linear-gradient(135deg,var(--g-deep),#0f4a33);border-radius:var(--r-lg);color:#fff;padding:34px 38px;display:flex;gap:26px;align-items:center;position:relative;overflow:hidden}
.tp-hero .rings{position:absolute;right:-40px;top:-60px;width:220px;height:220px;opacity:.45}
.tp-hero .ava{flex:0 0 88px !important;width:88px !important;min-width:88px !important;max-width:88px !important;height:88px !important;min-height:88px !important;max-height:88px !important;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--purple),#8f76f0);display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;font-weight:800;position:relative;z-index:1}
.tp-hero .ava img{width:100% !important;height:100% !important;object-fit:cover;border-radius:50%;display:block}
.tp-hero h1{font-size:22px;font-weight:800;position:relative;z-index:1}
.tp-hero .ttl{font-size:12.5px;color:var(--gold-light);margin-top:5px;position:relative;z-index:1}
.tp-hero .bio{margin-top:12px;font-size:13px;color:rgba(255,255,255,.75);line-height:1.9;max-width:640px;position:relative;z-index:1}
.tp-hero .stt{margin-left:auto;display:flex;gap:22px;position:relative;z-index:1}
.tp-hero .stt b{display:block;font-size:20px;font-weight:800}
.tp-hero .stt span{font-size:11px;color:rgba(255,255,255,.55)}
/* 讲师主页区块：不能用 .sec（首页 .sec 有 margin-top:-52px 的重叠设计，会把标题拉进 hero 被遮挡） */
.tp-sec{padding:32px 0 6px}
.tp-sec .sec-hd{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.tp-sec .sec-hd h2{font-size:20px;color:var(--g-dark);letter-spacing:1px;margin:0}
.tp-sec .sec-hd .line{width:44px;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:2px;align-self:center}
.tp-sec .sec-hd .more{margin-left:auto;font-size:12.5px;color:var(--muted)}
/* 讲师风采相册（前台讲师主页） */
.tp-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tp-gal .gi{border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh1)}
.tp-gal .gi img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--g-ll);cursor:zoom-in;transition:.2s}
.tp-gal .gi img:hover{transform:scale(1.03)}
.tp-gal .gi img.big{position:fixed;left:0;right:0;top:0;bottom:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:rgba(0,0,0,.86);z-index:999;cursor:zoom-out;padding:40px}
.tp-gal .gi .cap{font-size:11.5px;color:var(--muted);padding:8px 10px;line-height:1.6;border-top:1px solid var(--line)}

/* ---------- 老师端 / 后台补充 ---------- */
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rule{background:var(--cream2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.rule .k{font-size:11.5px;color:var(--muted)}
.rule .v{font-size:15px;font-weight:700;color:var(--g-dark);margin-top:3px}
.rule .s{font-size:11px;color:var(--muted2);margin-top:3px;line-height:1.6}
.todo-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.todo-item:last-child{border-bottom:none}
.todo-item .shot{flex:0 0 52px;height:40px;border-radius:6px;background:repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%) 0 0/8px 8px;border:1px solid var(--line);position:relative;overflow:hidden}
.todo-item .shot img{width:100%;height:100%;object-fit:cover}
.todo-item .info{flex:1;min-width:0}
.todo-item .t{font-size:13px;font-weight:600;color:var(--ink)}
.todo-item .s{font-size:11px;color:var(--muted);margin-top:2px}
.chart-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh1)}
.up-chap{display:flex;gap:10px;align-items:center;border:1px dashed #d8e2dc;border-radius:var(--r-sm);padding:10px 14px;margin-bottom:8px;background:var(--g-ll)}
.up-chap .dh{color:var(--muted2);cursor:grab;font-size:13px}
.up-chap .t{flex:1;font-size:13px;color:var(--ink2)}
.up-chap .acts{display:flex;gap:6px;align-items:center}
.form-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tx-amt.in{color:var(--red);font-weight:700}
.tx-amt.out{color:var(--g);font-weight:700}

/* ---------- 后台讲师单元格（格式修复版） ---------- */
.t-cell{display:flex;align-items:center;gap:11px;min-width:0}
.t-cell .ava{flex:0 0 36px;width:36px;height:36px;border-radius:50%;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.t-cell .meta{min-width:0;line-height:1.5}
.t-cell .nm{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:6px}
.t-cell .nm .vf{font-size:9.5px;font-weight:700;color:var(--g);background:var(--g-light);border:1px solid #cfe8d9;border-radius:8px;padding:0 6px;line-height:1.7;white-space:nowrap}
.t-cell .ttl{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* ---------- 顶栏通知铃铛 ---------- */
.tb .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.32);color:#fff;font-size:14px;flex:none}
.tb .bell:hover{border-color:var(--orange-soft);background:rgba(255,255,255,.12);text-decoration:none}
.tb .bell .bdg{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e2493a;color:#fff;font-size:10px;font-weight:700;font-style:normal;line-height:16px;text-align:center;border:1.5px solid var(--g-deep)}
.tb-ava{overflow:hidden}
.tb-ava img{width:100%;height:100%;object-fit:cover;display:block}
.sb .foot .ava{overflow:hidden}
.sb .foot .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---------- 账号设置 · 头像上传 ---------- */
.av-block{display:flex;gap:18px;align-items:flex-start;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.av-box{flex:0 0 108px;width:108px;height:108px;border-radius:var(--r-md);overflow:hidden;background:var(--g-ll);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.av-box img{width:100%;height:100%;object-fit:cover;display:block}
.av-ph{font-size:11.5px;color:var(--muted2);text-align:center;line-height:1.7}
.av-side{flex:1;min-width:0}
.av-side h3{font-size:14.5px;color:var(--g-dark);margin:0 0 4px}
@media (max-width:560px){.av-block{flex-direction:column;align-items:center;text-align:center}.av-side .flex{justify-content:center}}

/* ---------- 平台通知 ---------- */
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12.5px;color:var(--muted)}
.nt-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh1)}
.nt-item.un{border-left:3px solid var(--orange);background:linear-gradient(90deg,#fffaf1,#fff 120px)}
.nt-item .nt-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--g-dark)}
.nt-item .nt-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.nt-item .nt-bd{margin-top:8px;font-size:13px;color:var(--ink2);line-height:1.85;word-break:break-word}
.nt-item .nt-ft{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted2)}
.msg-item.hid{opacity:.62;background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(13,63,43,.03) 8px,rgba(13,63,43,.03) 16px)}
.sw .lb{font-size:12px;color:var(--ink2);white-space:nowrap}
.nt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

/* ---------- 响应式（真实站点） ---------- */
@media (max-width:1100px){
  .dt-grid,.lp-grid{grid-template-columns:1fr}
  .nt-grid{grid-template-columns:1fr}
  .dt-side,.lp-side{position:static;max-height:none}
  /* 窄屏章头放不下「N 讲 · 含试听 + 进入本章 + 箭头」三件套，让「进入本章」换行到下一行右对齐 */
  .chapter .ch-h{flex-wrap:wrap}
  .chapter .ch-h .ch-go{margin-left:auto}
  .rc-top{grid-template-columns:1fr}
  .tp-hero{flex-direction:column;text-align:center}
  .tp-hero .stt{margin-left:0}
  .tp-hero .bio{text-align:left}
}
@media (max-width:960px){
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .tc-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .auth-wrap{grid-template-columns:1fr}
  .auth-wrap .left{display:none}
  .lc-grid{grid-template-columns:1fr}
  .lc-menu{position:static;display:flex;overflow-x:auto}
  .lc-menu .it{white-space:nowrap;border-left:none;border-bottom:2.5px solid transparent}
  .lc-menu .it.on{border-left:none;border-bottom-color:var(--g)}
  .shell{flex-direction:column}
  .sb{width:100%;flex-direction:row;overflow-x:auto;min-height:auto}
  .sb .logo,.sb .grp,.sb .foot{display:none}
  .sb .list{display:flex;padding:0}
  .sb .it{padding:11px 13px;white-space:nowrap;border-left:none;border-bottom:2.5px solid transparent}
  .sb .it.on{border-left:none;border-bottom-color:var(--orange);background:rgba(245,166,35,.1)}
  .mbar .bc{display:none}
}
/* 1280 以下顶栏换成两行：第一行品牌+导航+账号按钮，第二行全宽搜索框。
   原因：一行排布（品牌+副标题+4 项导航+搜索框+积分/充值/后台/头像）实测要约 1235px，
   窗口小于 1280 时内容区不足会把搜索框压到几十像素，等于没有搜索入口。
   搜索入口绝不能隐藏，也不能把 body 撑宽导致整页被顶偏 */
@media (max-width:1280px){
  .tb .in{flex-wrap:wrap;height:auto;padding:8px 14px;gap:8px 14px}
  .tb .brand .s{display:none}
  .tb nav{gap:14px;font-size:13px}
  .tb-search{order:9;flex:1 1 100%;width:auto;max-width:700px;margin-left:0;height:38px;border-radius:19px}
  .tb-search:focus-within{width:auto}
  .tb-search .ts-btn{height:30px;padding:0 18px;border-radius:15px}
  .tb .right{margin-left:auto}
}
@media (max-width:760px){
  .tb nav{display:none}
  .tb .tch-in{display:none}
  /* 窄屏顶栏：隐藏副标题英文、收窄内边距与按钮，
     否则顶栏内容宽于视口会把 body 撑宽，整页内容被顶偏/右侧被裁 */
  .tb .in{gap:8px 10px;padding:8px 12px;height:auto}
  .tb .brand{font-size:15.5px;gap:7px;min-width:0}
  .tb .brand .s{display:none}
  .tb .brand img{height:26px}
  .tb .right{gap:6px}
  .tb .lk{padding:5px 10px;font-size:12.5px}
  .tb .pts-pill{padding:4px 10px;font-size:12px}
  /* 手机端多了通知铃铛后，右侧「充值」按钮会和头像挤重叠；
     积分胶囊本身就是 /recharge 链接，这里只隐藏重复的充值按钮（「老师工作台」必须保留，那是讲师进老师端的唯一入口） */
  .tb .right > a.btn.pri{display:none}
  .tb .bell{width:30px;height:30px;font-size:13px}
  /* 老师端/后台顶栏（.mbar）：窄屏右侧提示文字+两个按钮挤成多行，这里让副标题让位、右侧整行右对齐 */
  .mbar{height:auto;min-height:44px;padding:8px 12px;flex-wrap:wrap;gap:4px 10px}
  .mbar .tt{flex:1 1 auto;min-width:0}
  .mbar .right{margin-left:0;width:100%;justify-content:flex-end;flex-wrap:wrap}
  /* 手机端隐藏顶栏右侧的状态文字（待回复数、问候语），只留两个按钮，否则按钮会被挤到多行 */
  .mbar .mb-hint{display:none}
  .cc-grid{grid-template-columns:1fr}
  .tc-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .pk-grid{grid-template-columns:repeat(2,1fr)}
  .payways{grid-template-columns:1fr}
  .manual-grid{grid-template-columns:1fr}
  .form-cols,.frow{grid-template-columns:1fr}
  .rule-grid{grid-template-columns:1fr}
  .cc-row{flex-direction:column}
  .cc-row .cover{flex:none;width:100%}
  .cc-row .buy{flex:none;border-left:none;border-top:1px dashed var(--line);padding:14px 0 0;flex-direction:row;justify-content:space-between;width:100%}
  .hero h1{font-size:26px;letter-spacing:1px}
  .cta-band{flex-direction:column;align-items:flex-start;gap:16px}
  .cta-band .btn{margin-left:0}
  .course-prog{flex-direction:column;align-items:stretch}
  .course-prog .cov{flex:none;width:100%}
}
/* 小屏（≤520）品牌只留 logo：铃铛 + 积分 + 工作台 + 头像已经占满，再放「圆佑圆学堂」四个字会把右侧挤重叠 */
@media (max-width:520px){
  .tb .brand{font-size:0;gap:0}
  .tb .brand img{height:24px}
  .tb .right{gap:5px}
}