/* =============================================================
   网校前台样式
   改了主色调的话，只需要改下面 :root 里的 --brand 一个值
   ============================================================= */

:root {
  --brand: #1fb469;
  --brand-dark: #149252;
  --brand-light: #e7f7ee;
  --text: #1f2329;
  --text-2: #4e5969;
  --text-3: #86909c;
  --line: #e8eaef;
  --bg: #f5f6f8;
  --white: #fff;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(31, 35, 41, .05);
  --shadow-lg: 0 10px 32px rgba(31, 35, 41, .11);
  --radius-sm: 8px;
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #dc2626;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* 页面外壳：内容不够高时，页脚也永远贴在视口最底部（sticky footer） */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-shell > .footer { margin-top: auto; }

/* 协议文档排版 */
.agreement-body { font-size: 14px; color: var(--text-2); }
.agreement-body h1, .agreement-body h2, .agreement-body h3 { color: var(--text); margin: 18px 0 8px; font-size: 16px; }
.agreement-body p { margin: 8px 0; }
.agreement-body ul, .agreement-body ol { padding-left: 22px; margin: 8px 0; }
/* 协议里贴的图片（第 57 轮）：不许撑破版面 */
.agreement-body img { max-width: 100%; height: auto; display: inline-block; }
input, textarea, select { font-family: inherit; font-size: 14px; }

[v-cloak] { display: none !important; }

/* 内容容器：PC 上居中固定宽度，行宽舒适；宽屏不再无限拉长 */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1680px) { .wrap { max-width: 1400px; } }
/* 页面主体与页脚之间留出呼吸空间（只作用于页面根容器，不影响顶栏/页脚里的 .wrap） */
.app-shell > .wrap { padding-bottom: 44px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; } .flex1 { flex: 1; }
.center { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-brand { color: var(--brand); }
.text-err { color: var(--err); }
.text-ok { color: var(--ok); }
.price { color: #f5222d; font-weight: 700; }
.price .unit { font-size: 13px; font-weight: 500; }
.price .old { color: var(--text-3); font-weight: 400; text-decoration: line-through; margin-left: 6px; font-size: 12px; }
.free-tag { color: var(--ok); font-weight: 700; }

/* ---------------- 顶栏 ---------------- */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.header-inner { height: 68px; display: flex; align-items: center; gap: 30px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; flex-shrink: 0; letter-spacing: .2px; }
.logo img { width: 34px; height: 34px; }
.nav { display: flex; gap: 26px; flex-shrink: 0; }
.nav a { color: var(--text-2); font-weight: 500; font-size: 15px; padding: 8px 0; border-bottom: 2px solid transparent; transition: .18s; }
.nav a:hover { color: var(--brand); }
.nav a.router-link-active, .nav a.active { color: var(--brand); border-bottom-color: var(--brand); }
.header-search { flex: 1; max-width: 300px; position: relative; }
.header-search input {
  width: 100%; height: 36px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--bg); padding: 0 40px 0 16px; outline: none; transition: .18s;
}
.header-search input:focus { border-color: var(--brand); background: #fff; }
.header-search .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); cursor: pointer; }
.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: .18s; white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--text-2); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn.plain { background: transparent; color: var(--text-2); padding: 0 10px; }
.btn.plain:hover { color: var(--brand); background: transparent; }
.btn.sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 6px; }
.btn.lg { height: 46px; padding: 0 32px; font-size: 15px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.danger { background: var(--err); }
.btn.danger:hover { background: #b91c1c; }
.btn.gray { background: #e5e6eb; color: var(--text-2); }
.btn.gray:hover { background: #d8dae0; }

.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-light); color: var(--brand);
          display: flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.avatar.xl { width: 80px; height: 80px; font-size: 28px; }

/* 下拉 */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); min-width: 168px; padding: 6px; z-index: 200;
}
.dropdown-menu a { display: block; padding: 9px 14px; border-radius: 6px; color: var(--text-2); font-size: 13px; }
.dropdown-menu a:hover { background: var(--bg); color: var(--brand); }
.dropdown-menu .divider { height: 1px; background: var(--line); margin: 5px 0; }
/* 双列下拉：菜单项一行两个，缩短整栏高度 */
.dropdown-menu.grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 300px; }
.dropdown-menu.grid a { text-align: center; padding: 9px 8px; white-space: nowrap; }
.dropdown-menu.grid .divider,
.dropdown-menu.grid a.wide { grid-column: 1 / -1; }

/* ---------------- 卡片 ---------------- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px 26px; }
.section-title { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: .2px; }
.section-title .bar { width: 4px; height: 21px; border-radius: 2px; background: var(--brand); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 38px 0 18px; }

/* ---------------- 轮播 ---------------- */
.banner-box { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.banner-box img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.banner-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; display: flex; gap: 8px; z-index: 5; }
.banner-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: .2s; }
.banner-dots i.on { background: #fff; width: 22px; border-radius: 4px; }

/* ---------------- 课程卡片 ---------------- */
.grid-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; }
.course-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
               transition: .2s; cursor: pointer; display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.course-card .cover { position: relative; aspect-ratio: 16 / 10; background: #eef0f4; }
.course-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.course-card .badge { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff;
                      font-size: 12px; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px); }
.course-card .badge.free { background: rgba(22,163,74,.9); }
.course-card .badge.book { background: rgba(245,158,11,.92); left: auto; right: 10px; }
.course-card .body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.course-card .title { font-size: 15.5px; font-weight: 600; line-height: 1.5; min-height: 46px; }
.course-card .meta { color: var(--text-3); font-size: 12.5px; display: flex; gap: 12px; margin-top: auto; padding-top: 10px; }
.course-card .foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }

/* ---------------- 列表行 ---------------- */
.list-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: none; }
.list-row .thumb { width: 180px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: #eef0f4; flex-shrink: 0; }
.list-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .list-row .thumb { width: 110px; } }

/* ---------------- 分类 ---------------- */
.cat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cat-chip { padding: 6px 16px; border-radius: 18px; background: #fff; color: var(--text-2);
            border: 1px solid var(--line); cursor: pointer; font-size: 13px; transition: .18s; }
.cat-chip:hover { border-color: var(--brand); color: var(--brand); }
.cat-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }

/* ---------------- 做题 ---------------- */
.q-layout { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: start; }
.q-stem { font-size: 16px; line-height: 1.8; font-weight: 500; }
.q-stem .idx { color: var(--brand); font-weight: 700; margin-right: 6px; }
.q-type-tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 4px;
              background: var(--brand-light); color: var(--brand); margin-right: 8px; font-weight: 500; }
.opt { display: flex; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
       margin-bottom: 10px; cursor: pointer; transition: .16s; background: #fff; align-items: flex-start; }
.opt:hover { border-color: #b9cdfb; background: #fafcff; }
.opt.on { border-color: var(--brand); background: var(--brand-light); }
.opt.right { border-color: var(--ok); background: #f0fdf4; }
.opt.wrong { border-color: var(--err); background: #fef2f2; }
.opt .k { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: flex;
          align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--text-3); flex-shrink: 0; }
.opt.on .k { background: var(--brand); border-color: var(--brand); color: #fff; }
.opt.right .k { background: var(--ok); border-color: var(--ok); color: #fff; }
.opt.wrong .k { background: var(--err); border-color: var(--err); color: #fff; }
.opt .v { flex: 1; line-height: 1.6; }
.analysis { background: #f7f9fc; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
            padding: 14px 16px; margin-top: 14px; font-size: 13.5px; line-height: 1.8; }
.analysis .t { font-weight: 700; margin-bottom: 6px; color: var(--brand); }

.answer-sheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.answer-sheet .cell { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: #fff;
                      display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: .15s; }
.answer-sheet .cell:hover { border-color: var(--brand); }
.answer-sheet .cell.done { background: #e7f7ee; border-color: #9adfba; color: var(--brand); font-weight: 600; }
.answer-sheet .cell.right { background: #f0fdf4; border-color: #a7e8c0; color: var(--ok); font-weight: 600; }
.answer-sheet .cell.wrong { background: #fef2f2; border-color: #fbc4c4; color: var(--err); font-weight: 600; }
.answer-sheet .cell.cur { outline: 2px solid var(--brand); outline-offset: 1px; }

.q-side { position: sticky; top: 84px; }
.side-block + .side-block { margin-top: 14px; }

/* ---------------- 统计块 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-box { background: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat-box .n { font-size: 26px; font-weight: 700; line-height: 1.3; }
.stat-box .l { color: var(--text-3); font-size: 13px; }

.rate-bar { height: 8px; background: #eef0f4; border-radius: 4px; overflow: hidden; }
.rate-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); transition: width .4s; }
.rate-bar i.ok { background: var(--ok); }
.rate-bar i.warn { background: var(--warn); }
.rate-bar i.err { background: var(--err); }

/* ---------------- 空状态 / 加载 ---------------- */
.empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty .ico { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.loading { text-align: center; padding: 50px; color: var(--text-3); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand);
           border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #eef0f4 25%, #f6f7f9 37%, #eef0f4 63%);
            background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- 表单 ---------------- */
.form-item { margin-bottom: 16px; }
.form-item label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.input, .textarea, .select {
  width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px;
  outline: none; transition: .18s; background: #fff;
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; line-height: 1.7; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,109,246,.1); }
.input[readonly] { background: var(--bg); color: var(--text-3); }

/* ---------------- 标签页 ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { padding: 10px 18px; cursor: pointer; color: var(--text-2); font-weight: 500; white-space: nowrap;
             border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .18s; }
.tabs .tab:hover { color: var(--brand); }
.tabs .tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .tab .badge-n { display: inline-block; background: var(--err); color: #fff; font-size: 11px;
                      padding: 0 6px; border-radius: 9px; margin-left: 5px; line-height: 17px; }

/* ---------------- 提示 ---------------- */
.toast-wrap { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 9999;
              display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { background: rgba(31,35,41,.92); color: #fff; padding: 10px 20px; border-radius: 8px;
         font-size: 14px; box-shadow: var(--shadow-lg); animation: toastIn .22s; max-width: 80vw; }
.toast.err { background: rgba(220,38,38,.95); }
.toast.ok { background: rgba(22,163,74,.95); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000;
              display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 480px; max-height: 86vh;
         overflow: auto; box-shadow: var(--shadow-lg); animation: mIn .2s; }
.modal.wide { max-width: 720px; }
@keyframes mIn { from { opacity: 0; transform: scale(.96); } }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------------- 页脚 ---------------- */
.footer { background: #fff; border-top: 1px solid var(--line); margin-top: 60px; padding: 18px 0; color: var(--text-3); font-size: 13px; }
.footer-line { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; text-align: center; line-height: 1.8; }
.footer-line a { color: var(--text-3); }
.footer-line a:hover { color: var(--brand); }

/* ---------------- 播放页 ---------------- */
.learn-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.player-box { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; }
.player-box video { width: 100%; height: 100%; display: block; background: #000; }
/* 课时标题下面的资料附件 */
.lesson-files { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lf-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; transition: .15s; max-width: 560px; }
.lf-item:hover { background: var(--bg); }
.lf-item + .lf-item { margin-top: 2px; }
.lf-ico { flex-shrink: 0; }
.lf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-size { color: var(--muted, #86909c); font-size: 12px; flex-shrink: 0; }
.lf-down { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand, #2f6df6); font-size: 12.5px; }
.chapter-list { max-height: 620px; overflow-y: auto; }
/* 学习页：右侧课程目录高度跟随视频框（JS 同步写入行内高度），装不下就内部滚动 */
.learn-stage { min-width: 0; }
.learn-side-card { display: flex; flex-direction: column; overflow: hidden; }
.learn-side-card .chapter-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.chapter-group .c-title { font-weight: 600; padding: 12px 16px 8px; font-size: 14px; }
.lesson-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; transition: .15s; font-size: 13px; }
.lesson-item:hover { background: var(--bg); }
.lesson-item.on { background: var(--brand-light); color: var(--brand); font-weight: 500; }
.lesson-item .no { color: var(--text-3); flex-shrink: 0; }
.lesson-item.on .no { color: var(--brand); }
.lesson-item .lock { color: var(--text-3); margin-left: auto; flex-shrink: 0; }
.lesson-item .fin { color: var(--ok); margin-left: auto; flex-shrink: 0; }

/* 课时资料：显示在课程目录的课时下面（跟小截图一致的样式） */
.ls-files { padding: 0 16px 8px 42px; }
.ls-file { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-top: 6px;
           font-size: 12.5px; color: var(--text-2); background: var(--bg); border-radius: 8px;
           cursor: pointer; transition: .15s; }
.ls-file:hover { background: var(--brand-light); color: var(--brand); }
.ls-file .ico { flex-shrink: 0; }
.ls-file .name { min-width: 0; }
.ls-file .size { color: var(--text-3); font-size: 11.5px; flex-shrink: 0; }
.ls-file .dl { color: var(--brand); flex-shrink: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 免费课「输入手机号观看」弹窗 */
.qw-mask { position: fixed; inset: 0; background: rgba(17, 24, 39, .5); z-index: 90;
           display: flex; align-items: center; justify-content: center; padding: 20px; }
.qw-box { width: 400px; max-width: 100%; background: #fff; border-radius: 14px; padding: 26px 26px 20px;
          box-shadow: 0 18px 60px rgba(0, 0, 0, .22); }
.qw-title { font-size: 18px; font-weight: 600; color: var(--text); }
.qw-desc { font-size: 13px; color: var(--text-3); line-height: 1.8; margin-top: 10px; }
.qw-input { width: 100%; box-sizing: border-box; margin-top: 16px; padding: 11px 14px; font-size: 15px;
            border: 1px solid #dfe3e8; border-radius: 9px; outline: none; transition: .15s; }
.qw-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.qw-err { color: #e54d42; font-size: 12.5px; margin-top: 8px; }
.qw-foot { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }

/* ---------------- 自研视频播放器（绿色进度条 / 章节 / 倍速 / 快退快进） ---------------- */
.vp { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9;
      user-select: none; -webkit-tap-highlight-color: transparent; }
.vp:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.vp video { width: 100%; height: 100%; display: block; background: #000; cursor: pointer; }
/* 中间大播放按钮 */
.vp-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
             background: rgba(0, 0, 0, .18); transition: opacity .2s; z-index: 2; }
.vp-center.hide { opacity: 0; pointer-events: none; }
.vp-big { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #1f2329;
          display: flex; align-items: center; justify-content: center; font-size: 30px; padding-left: 7px;
          box-shadow: 0 8px 30px rgba(0, 0, 0, .38); transition: transform .15s; }
.vp-center:hover .vp-big { transform: scale(1.07); }
/* 章节按钮 + 章节浮层 */
.vp-chap-btn { position: absolute; right: 14px; top: 14px; z-index: 4; background: rgba(0, 0, 0, .55); color: #fff;
               border: none; border-radius: 16px; padding: 6px 14px; font-size: 14px; cursor: pointer;
               backdrop-filter: blur(4px); }
.vp-chap-btn:hover { background: rgba(0, 0, 0, .78); }
.vp-chap-list { position: absolute; right: 14px; top: 52px; z-index: 5; width: 260px; max-height: 62%;
                overflow-y: auto; background: rgba(20, 22, 26, .96); border-radius: 10px; padding: 6px;
                box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.vp-chap-head { padding: 7px 10px 5px; color: #8b93a1; font-size: 12px; }
.vp-chap { display: flex; gap: 9px; padding: 8px 10px; border-radius: 6px; color: #d6dae0; font-size: 13.5px;
           cursor: pointer; line-height: 1.45; }
.vp-chap:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.vp-chap.on { color: var(--brand); font-weight: 600; }
.vp-chap .t { color: #8b93a1; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.vp-chap.on .t { color: var(--brand); }
.vp-chap .x { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vp-chap .x em { font-style: normal; font-size: 12px; color: #8b93a1; font-weight: 400;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 底部控制条 */
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; z-index: 3;
          background: linear-gradient(transparent, rgba(0, 0, 0, .74)); opacity: 0; transition: opacity .2s; }
.vp:hover .vp-bar, .vp.paused .vp-bar, .vp.bar-off .vp-bar { opacity: 1; }
.vp-progress { position: relative; height: 6px; background: rgba(255, 255, 255, .26); border-radius: 3px;
               cursor: pointer; transition: height .12s; }
.vp-progress:hover { height: 8px; }
.vp-buffer { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .3); border-radius: 3px; }
.vp-played { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); border-radius: 3px; z-index: 1; }
.vp-knob { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff;
           transform: translate(-50%, -50%); box-shadow: 0 1px 6px rgba(0, 0, 0, .55); opacity: 0;
           transition: opacity .15s; z-index: 2; }
.vp-progress:hover .vp-knob { opacity: 1; }
.vp-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255, 255, 255, .88);
           border-radius: 1px; z-index: 2; }
.vp-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #eef0f4; font-size: 14px; }
.vp-ctrl button { background: none; border: none; color: #eef0f4; cursor: pointer; padding: 6px 10px;
                  border-radius: 6px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px;
                  white-space: nowrap; }
.vp-ctrl button:hover { background: rgba(255, 255, 255, .15); }
.vp-time { margin-left: 6px; font-variant-numeric: tabular-nums; color: #cfd4dc; font-size: 13.5px; }
.vp-spacer { flex: 1; }
.vp-rate { font-weight: 700; min-width: 54px; justify-content: center; }
.vp-speed { position: relative; }
.vp-speed-list { position: absolute; right: 0; bottom: 42px; background: rgba(20, 22, 26, .97); border-radius: 8px;
                 padding: 5px; min-width: 86px; box-shadow: 0 8px 26px rgba(0, 0, 0, .55); }
.vp-speed-item { padding: 7px 12px; border-radius: 5px; color: #d6dae0; cursor: pointer; font-size: 13.5px;
                 text-align: center; }
.vp-speed-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vp-speed-item.on { color: var(--brand); font-weight: 700; }
/* 播放器下方：章节条（可在播放器外快速跳章） */
.vp-chapters-bar { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; }
.vp-chapters-bar .cc { flex-shrink: 0; font-size: 13px; padding: 5px 12px; border-radius: 14px;
                       background: var(--bg); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.vp-chapters-bar .cc:hover { background: var(--brand-light); color: var(--brand); }
.vp-chapters-bar .cc.on { background: var(--brand); color: #fff; }
/* 手机端：控制条常显（触屏没有 hover），按钮更紧凑 */
@media (max-width: 768px) {
  .vp-bar { opacity: 1; padding: 20px 10px 8px; }
  .vp-ctrl { gap: 2px; }
  .vp-ctrl button { padding: 6px 6px; font-size: 14px; }
  .vp-big { width: 60px; height: 60px; font-size: 24px; }
  .vp-chap-list { width: 210px; }
  .vp-chapters-bar .cc { font-size: 12.5px; }
}

/* ---------------- 登录 ---------------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
             background: linear-gradient(135deg, #eef3ff 0%, #f7f9fc 60%, #eef7f4 100%); padding: 24px; }
.auth-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; padding: 34px 30px; }
.auth-card h2 { margin: 0 0 6px; font-size: 22px; }
.auth-card .sub { color: var(--text-3); font-size: 13px; margin-bottom: 24px; }
.code-row { display: flex; gap: 10px; }
.code-row .input { flex: 1; }
.code-row .btn { flex-shrink: 0; width: 118px; }

/* ---------------- 进度 ---------------- */
.progress-line { height: 6px; background: #eef0f4; border-radius: 3px; overflow: hidden; }
.progress-line i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* ---------------- 状态标签（题库/订单/首页公用） ---------------- */
.live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 9px;
              border-radius: 4px; background: #eef0f4; color: var(--text-2); }
/* ---------------- 分页 ---------------- */
.pager { display: flex; justify-content: flex-end; gap: 6px; margin: 24px 0 12px; flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
                cursor: pointer; color: var(--text-2); transition: .15s; }
.pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- 响应式（手机 H5） ---------------- */
@media (max-width: 1100px) {
  .grid-courses { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .q-layout { grid-template-columns: 1fr; }
  .q-side { position: static; }
  .learn-layout { grid-template-columns: 1fr; }
  .learn-side-card { height: auto !important; }   /* 手机端上下堆叠，目录恢复自适应高度 */
  .footer-line { gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .wrap { width: 100%; max-width: none; padding: 0 14px; }
  .grid-courses { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .header-inner { height: 56px; gap: 12px; }
  .nav { display: none; }
  .header-search { max-width: none; }
  .course-card .title { font-size: 14px; min-height: 42px; }
  .section-title { font-size: 17px; }
  .banner-box { aspect-ratio: 21/9; }
  .answer-sheet { grid-template-columns: repeat(5, 1fr); }
  .modal { max-width: none; }
  .auth-card { padding: 26px 20px; }
}
@media (max-width: 480px) {
  .grid-courses { grid-template-columns: 1fr; }
}

/* ---------------- 学习中心 ---------------- */
.study-btn { background: var(--brand); color: #fff; border-radius: 20px; padding: 7px 20px;
             font-weight: 600; flex-shrink: 0; transition: .18s; }
.study-btn:hover { background: var(--brand-dark); color: #fff; }
.study-layout { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 40px; }
.study-side { width: 320px; flex-shrink: 0; }
.study-main { flex: 1; min-width: 0; }
.study-course { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
                padding: 16px 18px; margin-bottom: 12px; cursor: pointer; border: 2px solid transparent;
                transition: .15s; }
.study-course:hover { box-shadow: var(--shadow-lg); }
.study-course.on { border-color: var(--brand); }
.study-course .t { font-weight: 600; font-size: 15px; }
.study-bar { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.study-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; }
.study-chapter { font-weight: 700; font-size: 15px; padding: 14px 0 6px; }
.study-lesson { display: flex; align-items: center; gap: 12px; padding: 12px 0;
                border-top: 1px dashed var(--line); cursor: pointer; }
.study-lesson:hover .study-lesson-title { color: var(--brand); }
.study-lesson-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-lesson-title.off { color: var(--text-3); }
.study-tag { flex-shrink: 0; font-size: 12px; padding: 2px 10px; border-radius: 4px;
             background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.study-go { flex-shrink: 0; font-size: 12px; color: var(--brand); border: 1px solid var(--brand);
            border-radius: 14px; padding: 3px 12px; }
.study-go.off { color: var(--text-3); border-color: var(--line); }
.mt4 { margin-top: 4px; }
@media (max-width: 768px) {
  .study-layout { flex-direction: column; }
  .study-side { width: 100%; }
}

/* =============================================================
   商城
   ============================================================= */
.mall-wrap { padding-bottom: 30px; }
.mall-top { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.mall-search { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
               border-radius: 22px; padding: 9px 16px; }
.mall-search .ico { opacity: .5; }
.mall-search input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
.mall-search .go { color: var(--brand); font-size: 14px; font-weight: 600; cursor: pointer; }
.mall-cart-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff;
                 border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
                 font-size: 19px; }
.mall-cart-btn .dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
                      background: #f5484d; color: #fff; border-radius: 9px; font-size: 11px; line-height: 18px;
                      text-align: center; }

.mall-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mall-cat { text-align: center; padding: 12px 6px; border-radius: 12px; cursor: pointer; transition: .15s; }
.mall-cat:hover { background: var(--brand-light); }
.mall-cat .ico { font-size: 26px; }
.mall-cat .t { font-size: 13px; font-weight: 600; margin-top: 6px; }
.mall-cat .s { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.goods-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
              cursor: pointer; transition: .18s; display: flex; flex-direction: column; }
.goods-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.goods-card .cover { position: relative; aspect-ratio: 1/1; background: #f4f6f8; overflow: hidden; }
.goods-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.goods-card .body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.goods-card .name { font-size: 14px; font-weight: 600; line-height: 1.45; min-height: 40px; }
.goods-card .sub { font-size: 12px; color: var(--text-3); }
.goods-card .foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.goods-card .presale-date { font-size: 12px; color: #b45309; background: #fff7e6; border-radius: 4px; padding: 2px 6px; }
.tag-type { position: absolute; left: 8px; top: 8px; font-size: 11px; padding: 2px 8px; border-radius: 4px;
            background: rgba(31,180,105,.92); color: #fff; }
.tag-type.t2 { background: rgba(64,128,255,.92); }
.tag-type.t3 { background: rgba(240,150,30,.94); }
.tag-presale { position: absolute; left: 8px; top: 8px; font-size: 11px; padding: 2px 8px; border-radius: 4px;
               background: rgba(240,150,30,.94); color: #fff; }
.tag-hot { position: absolute; right: 8px; top: 8px; font-size: 11px; padding: 2px 8px; border-radius: 4px;
           background: rgba(245,72,77,.92); color: #fff; }
.sold-out { position: absolute; inset: 0; background: rgba(0,0,0,.42); color: #fff; font-size: 15px;
            display: flex; align-items: center; justify-content: center; }
.mini-tag { display: inline-block; font-size: 12px; color: var(--brand-dark); background: var(--brand-light);
            border-radius: 4px; padding: 2px 8px; margin-left: 6px; }
.gd-detail img { max-width: 100%; border-radius: 8px; }

/* 商品详情（左图右信息，图片略小并与右侧底部对齐） */
.goods-detail { display: flex; gap: 26px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
                padding: 22px; margin-top: 18px; flex-wrap: wrap; align-items: stretch; }
.gd-gallery { width: 320px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; }
.gd-gallery .main { flex: 1; min-height: 300px; border-radius: 12px; overflow: hidden; background: #f4f6f8; }
.gd-gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gd-gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gd-gallery .thumbs img { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; cursor: pointer;
                          border: 2px solid transparent; flex-shrink: 0; }
.gd-gallery .thumbs img.on { border-color: var(--brand); }
.gd-info { flex: 1; min-width: 280px; }
/* 宽屏（流式布局）下把左图和标题放大，避免大屏里显得空 */
@media (min-width: 1440px) {
  .gd-gallery { width: 420px; }
  .gd-gallery .main { min-height: 380px; }
  .gd-info h1 { font-size: 25px; }
}

/* 课程详情（与商品详情同思路：流式布局下内容占满，宽屏放大封面和标题） */
.cd-cover { width: 400px; max-width: 100%; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.cd-title { font-size: 23px; }
@media (min-width: 1440px) {
  .cd-cover { width: 480px; }
  .cd-title { font-size: 27px; }
}
.gd-info h1 { font-size: 22px; margin: 10px 0 8px; line-height: 1.4; }
.price-box { display: flex; align-items: baseline; gap: 10px; margin: 16px 0; }
.price-box .price { font-size: 28px; }
.presale-box { background: #fff7e6; color: #b45309; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.virtual-box { background: #eef4ff; color: #2b5fd6; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.gd-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--line); }
.gd-row label { width: 52px; color: var(--text-3); font-size: 13px; flex-shrink: 0; }
.sku-list { display: flex; gap: 8px; flex-wrap: wrap; }
.sku-chip { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 6px 16px; font-size: 13px;
            cursor: pointer; transition: .15s; }
.sku-chip.on { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); font-weight: 600; }
.sku-chip.dis { opacity: .45; }
.sku-chip .none { font-style: normal; font-size: 11px; margin-left: 4px; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty-box button { width: 34px; height: 34px; border: none; background: #f7f8fa; font-size: 16px; cursor: pointer; }
.qty-box input { width: 52px; height: 34px; border: none; text-align: center; font-size: 14px; outline: none; }
.gd-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.gd-actions .btn.plain { background: #fff; border: 1px solid var(--line); color: var(--text-2); }

/* 评价 */
.comment-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.comment-head .score { text-align: center; min-width: 90px; }
.comment-head .score .n { font-size: 26px; font-weight: 700; color: #f7ba2a; }
.comment-item { display: flex; gap: 12px; padding: 16px 0; border-top: 1px dashed var(--line); }
.stars { color: #f7ba2a; margin-left: 8px; font-size: 13px; }
.reply-box { background: #f7f8fa; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 8px; color: var(--text-2); }

/* 购物车 */
.cart-item { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: var(--radius);
             box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.cart-item.off { opacity: .6; }
.cart-item .thumb { width: 86px; height: 86px; border-radius: 8px; overflow: hidden; background: #f4f6f8; flex-shrink: 0; }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .name { font-size: 14px; font-weight: 600; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); color: transparent;
         display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; cursor: pointer;
         margin-top: 32px; }
.check.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cart-bar { position: sticky; bottom: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
            padding: 12px 16px; display: flex; align-items: center; margin-top: 16px; }
.cart-bar .check { margin-top: 0; }
.star-pick { font-size: 28px; color: #dcdfe6; cursor: pointer; letter-spacing: 4px; }
.star-pick .on { color: #f7ba2a; }
.upload-btn { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
              border: 1px dashed var(--line); border-radius: 6px; color: var(--text-3); font-size: 12px; cursor: pointer; }
.btn.sm.danger.ghost { border-color: #f5484d; color: #f5484d; background: #fff; }

/* 手机端底部操作条（商品详情）—— 只在小屏出现 */
.mall-bar { display: none; }
.mall-bar .mb-item { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--text-3);
                     min-width: 46px; }
.mall-bar .mb-item span { font-size: 18px; }
.mall-bar .mb-item em { font-style: normal; }
.mall-bar .btn { height: 40px; }
.mall-bar .btn.buy { background: #ff6a00; }

/* =============================================================
   手机端底部菜单（App 风格）
   ============================================================= */
.tabbar { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .header { position: sticky; top: 0; z-index: 70; }
  .header-inner { gap: 8px; padding: 10px 12px; }
  .header .nav { display: none; }
  .header-search { display: none; }
  .header .logo span { font-size: 16px; }
  .footer { margin-top: 24px; }
  .footer-line { font-size: 12px; gap: 10px; }
  .wrap { width: 100%; max-width: none; padding: 0 12px; }

  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
            background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
            border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 gap: 2px; padding: 7px 0 6px; color: var(--text-3); position: relative; }
  .tabbar-item .ico { font-size: 20px; line-height: 1; }
  .tabbar-item .t { font-size: 11px; }
  .tabbar-item.on { color: var(--brand); }
  .tabbar-item.on .t { font-weight: 600; }
  .tabbar-item .badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px;
                        padding: 0 4px; background: #f5484d; color: #fff; border-radius: 8px; font-size: 10px;
                        line-height: 16px; text-align: center; font-style: normal; }

  /* 商城 / 商品详情在手机上的适配 */
  .mall-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mall-cat .ico { font-size: 22px; }
  .goods-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .goods-card .name { font-size: 13px; min-height: 36px; }
  .goods-detail { padding: 14px; gap: 14px; }
  .gd-gallery { width: 100%; }
  .gd-gallery .main { flex: none; min-height: 0; aspect-ratio: 1/1; }
  .gd-info h1 { font-size: 18px; }
  .price-box .price { font-size: 24px; }
  .gd-actions { display: none; }
  .mall-bar { display: flex; position: fixed; left: 0; right: 0;
              bottom: calc(58px + env(safe-area-inset-bottom));
              background: #fff; border-top: 1px solid var(--line);
              padding: 8px 12px; gap: 8px; align-items: center; z-index: 60; }
  .goods-detail { margin-bottom: 64px; }
  .cart-item .thumb { width: 74px; height: 74px; }
  .mall-wrap { padding-bottom: 72px; }
  .cart-bar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom));
              border-radius: 0; margin: 0; z-index: 60; }
  .cart-item .check { margin-top: 26px; }
}

/* 英语刷词相关样式（.wp-* / .word-* / .wr-*）第 51 轮随前台刷词板块一起删除 */

/* =============================================================
   素材库（列表 / 详情 / 下载）
   ============================================================= */
/* 素材列表工具栏里的紧凑搜索框 */
.mat-search { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.mat-search input { height: 32px; width: 200px; border: 1px solid var(--line); border-radius: 16px;
                    padding: 0 14px; outline: none; font-size: 13px; background: #fff; }
.mat-search input:focus { border-color: var(--brand); }
.mat-search .btn { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; }

.mat-layout { display: flex; gap: 20px; margin-top: 20px; align-items: flex-start; }
.mat-side { width: 222px; flex-shrink: 0; padding: 14px; position: sticky; top: 80px; }
.ms-title { font-weight: 600; margin: 4px 6px 10px; }
.ms-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--text-2); }
.ms-item:hover { background: var(--bg); color: var(--brand); }
.ms-item.on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.ms-ico { width: 20px; text-align: center; }
.ms-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-cnt { color: var(--text-3); font-size: 12px; }
.ms-tip { margin: 14px 6px 4px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.8; }
.mat-main { flex: 1; min-width: 0; }

.mat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mt-right { display: flex; gap: 8px; flex-wrap: wrap; }

.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.mat-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; transition: .16s; }
.mat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.mat-thumb { position: relative; background: #f2f4f7; }
.mat-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.mat-badge { position: absolute; left: 10px; top: 10px; background: rgba(17,24,39,.72); color: #fff;
  font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: 600; letter-spacing: .5px; }
.mat-lock { position: absolute; right: 10px; top: 10px; background: rgba(17,24,39,.62); color: #fff;
  font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.mat-free { position: absolute; right: 10px; top: 10px; background: rgba(16,185,129,.92); color: #fff;
  font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.mat-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mat-title { font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 45px; }
.mat-spec { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-3); font-size: 12px; }
.mat-spec span { background: var(--bg); border-radius: 5px; padding: 2px 7px; }
.mat-foot { margin-top: auto; display: flex; justify-content: space-between; color: var(--text-3); font-size: 12px; }

/* 详情 */
.mat-crumb { display: flex; gap: 8px; align-items: center; color: var(--text-3); font-size: 13px;
  margin: 20px 0 14px; flex-wrap: wrap; }
.mat-crumb a:hover { color: var(--brand); }
.mat-crumb .cur { color: var(--text-2); }
.mat-detail { display: flex; gap: 28px; padding: 24px; }
.md-gallery { width: 46%; flex-shrink: 0; }
.md-main { border-radius: 12px; overflow: hidden; background: #f2f4f7; }
.md-main img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.md-thumbs { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
.md-thumb { width: 78px; height: 54px; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; flex-shrink: 0; }
.md-thumb.on { border-color: var(--brand); }
.md-thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-info { flex: 1; min-width: 0; }
.md-title { font-size: 23px; line-height: 1.4; margin: 0 0 10px; }
.md-tagline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mat-tag { background: var(--bg); color: var(--text-2); font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.mat-tag.rec { background: #fff7e6; color: #b45309; }
.md-brief { color: var(--text-2); line-height: 1.8; margin: 0 0 16px; }
.md-spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 22px;
  background: var(--bg); border-radius: 12px; padding: 16px 18px; }
.spec-row { display: flex; gap: 10px; font-size: 14px; }
.spec-row .k { color: var(--text-3); width: 66px; flex-shrink: 0; }
.spec-row .v { color: var(--text); font-weight: 500; word-break: break-all; }
.md-actions { margin-top: 18px; }
.md-hint { margin-top: 10px; color: var(--text-3); font-size: 13px; }
.md-hint.ok { color: var(--ok); }
.md-notice { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #fffaf0;
  border: 1px solid #fde9c8; color: #92610f; font-size: 13px; line-height: 1.8; }
.md-content { line-height: 1.9; color: var(--text-2); }
.md-thumb-sm { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

/* 下载弹窗 */
.link-label { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }
.link-box { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.link-text.code { font-weight: 700; letter-spacing: 2px; font-size: 17px; }

/* 手机端 */
@media (max-width: 768px) {
  .mat-search input { width: 130px; }
  .mat-layout { flex-direction: column; }
  .mat-side { width: 100%; position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .ms-title { width: 100%; margin: 0 0 6px; }
  .ms-item { width: auto; background: var(--bg); }
  .ms-tip { display: none; }
  .mat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mat-title { font-size: 13px; min-height: 39px; }
  .mat-badge { font-size: 11px; padding: 1px 6px; }
  .mat-detail { flex-direction: column; padding: 14px; gap: 16px; }
  .md-gallery { width: 100%; }
  .md-title { font-size: 19px; }
  .md-spec { grid-template-columns: 1fr 1fr; padding: 12px; }
  .md-thumb-sm { width: 72px; height: 48px; }
  .wp-list-row { align-items: flex-start; }
}

/* =============================================================
   题库中心（做题 / 刷词 双标签）
   ============================================================= */
.qb-tabs { margin: 4px 0 20px; }
.qb-tab-badge { display: inline-block; margin-left: 6px; background: var(--brand-light);
  color: var(--brand-dark); font-size: 12px; padding: 0 7px; border-radius: 10px; line-height: 18px; }

.qb-word-tip { line-height: 1.9; color: var(--text-2); font-size: 14px; }
.qb-word-tip .wt-item { display: block; margin-top: 6px; }

.qb-word-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.qws-item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; text-align: center; }
.qws-item .n { font-size: 22px; font-weight: 700; color: var(--brand-dark); line-height: 1.4; }
.qws-item .l { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.qws-item.link { text-decoration: none; }
.qws-item.link:hover { box-shadow: var(--shadow-lg); }
.qws-item.link .n { color: var(--text-3); font-size: 18px; }

@media (max-width: 768px) {
  .qb-word-stat { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qws-item { padding: 10px 8px; }
  .qws-item .n { font-size: 18px; }
  .qws-item.link { display: none; }
}

/* 课程详情：讲师介绍（放在课程介绍最上面） */
.cd-teacher { background: linear-gradient(120deg, #f6fbf8, #eef7f2); border: 1px solid #e2f0e8;
  border-radius: var(--radius); padding: 18px 20px; }
.cdt-head { display: flex; gap: 16px; align-items: flex-start; }
.cdt-name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdt-title { font-size: 12px; font-weight: 500; color: var(--brand-dark); background: var(--brand-light);
  border-radius: 20px; padding: 2px 10px; }
.cdt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cdt-tag { font-size: 12px; color: #4b5563; background: #fff; border: 1px solid #e3ebe6;
  border-radius: 20px; padding: 2px 10px; }
.cdt-intro { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d8e8df;
  color: var(--text-2); line-height: 1.9; font-size: 14px; }
.cdt-intro p { margin: 0 0 8px; }
.cd-sec-title { font-size: 16px; font-weight: 600; padding-left: 10px; border-left: 3px solid var(--brand); }

@media (max-width: 768px) {
  .cd-teacher { padding: 14px; }
  .cdt-intro { font-size: 13px; }
}

/* 我的反馈（勘误建议列表） */
.me-item { margin-bottom: 12px; }
.me-tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; line-height: 1.7; }
.me-tag.err { background: #fdecec; color: var(--err); }
.me-tag.ok { background: #e8f6ee; color: var(--ok); }
.me-st-wait { color: var(--warn); }
.me-reply { background: var(--bg); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.8; color: var(--text-2); }

/* 刷词卡片上的「纠错/建议」小链接 */
.wp-tools-link { font-size: 12px; color: var(--text-3); cursor: pointer; user-select: none; }
.wp-tools-link:hover { color: var(--brand); }

/* 纠错/建议入口：统一放在翻页条下方居中 */
.wp-errata-row { text-align: center; margin-top: 14px; }
.wp-errata-row .wp-tools-link { font-size: 13px; }

/* 个人中心快捷入口（原顶部下拉里的商城类入口整合到这里） */
.mine-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mine-links a {
  display: block; text-align: center; padding: 12px 8px; border-radius: 8px;
  background: var(--bg); color: var(--text-2); font-size: 13.5px; text-decoration: none;
  transition: background .15s, color .15s; white-space: nowrap;
}
.mine-links a:hover { background: #e8f6ee; color: var(--brand); }
@media (max-width: 560px) { .mine-links { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   首页（PC 版，第 28 轮重做）
   ============================================================= */

/* ---- 首屏 HERO ---- */
.hero {
  position: relative; overflow: hidden;
  margin-top: 24px; border-radius: 20px;
  background: #0f9d58;
  background-image: linear-gradient(118deg, #17a862 0%, #0e8f52 52%, #0b7d47 100%);
  color: #fff; padding: 46px 48px;
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -90px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.hero::before {
  content: ''; position: absolute; right: 120px; bottom: -140px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; }
.hero-main { flex: 1; min-width: 0; }
.hero-tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: 13px; margin-bottom: 16px;
}
.hero-title { font-size: 34px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; letter-spacing: .5px; }
.hero-sub { font-size: 15px; line-height: 1.8; opacity: .9; margin: 0 0 26px; max-width: 620px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions .btn { height: 44px; padding: 0 26px; font-size: 15px; border-radius: 10px; }
.hero-actions .btn.white { background: #fff; color: #0e8f52; }
.hero-actions .btn.white:hover { background: #f2fbf6; }
.hero-actions .btn.outline { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; }
.hero-actions .btn.outline:hover { background: rgba(255,255,255,.22); }
.hero-search {
  position: relative; max-width: 520px; margin: 0 0 22px;
}
.hero-search input {
  width: 100%; height: 46px; border-radius: 23px; border: none; outline: none;
  padding: 0 108px 0 20px; font-size: 14.5px; color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.hero-search .go {
  position: absolute; right: 5px; top: 5px; height: 36px; padding: 0 22px;
  border-radius: 18px; border: none; background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.hero-search .go:hover { background: #0e8f52; }
.hero-stats {
  width: 300px; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hero-stat {
  display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px; padding: 16px 18px; transition: .2s;
}
.hero-stat:hover { background: rgba(255, 255, 255, .22); }
.hero-stat .n { font-size: 19px; line-height: 1; opacity: .95; }
.hero-stat .l { font-size: 13.5px; }

/* ---- 快捷入口 ---- */
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.quick-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 16px; text-align: center; cursor: pointer; transition: .2s;
  display: block;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.quick-card .qc-ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand); font-size: 22px;
}
.quick-card .qc-t { font-size: 14.5px; font-weight: 600; }
.quick-card .qc-d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

/* ---- 分类条 ---- */
.home-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-cat {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; cursor: pointer; transition: .2s; border: 1px solid transparent;
}
.home-cat:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.home-cat .hc-t { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.home-cat .hc-n { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.home-cat .hc-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.home-cat .hc-tags span {
  font-size: 12px; color: var(--text-2); background: var(--bg);
  padding: 2px 9px; border-radius: 999px;
}

/* ---- 题库科目 ---- */
.subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.subject-card {
  display: flex; align-items: center; gap: 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
  cursor: pointer; transition: .2s;
}
.subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.subject-card .sc-cover {
  width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #eef0f4;
}
.subject-card .sc-cover img { width: 100%; height: 100%; object-fit: cover; }
.subject-card .sc-t { font-size: 15.5px; font-weight: 600; }
.subject-card .sc-b { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.6; }

/* 首页空态（全新空库时到处都没有数据） */
.home-empty {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px 24px; text-align: center; color: var(--text-3); font-size: 14px;
}

@media (max-width: 1200px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { width: 260px; }
  .hero-title { font-size: 30px; }
}
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero-stats { width: auto; }
  .home-cats { grid-template-columns: repeat(2, 1fr); }
  .subject-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding: 28px 22px; border-radius: 16px; }
  .hero-title { font-size: 24px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   直播课（第 31 轮）：直播中标记 / 未开播倒计时卡片 / 目录标签
   ============================================================ */

/* 直播中的红色 LIVE 标记（左上角） */
.vp-live {
  position: absolute; left: 14px; top: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(229, 46, 46, .94); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .5px;
  padding: 4px 11px; border-radius: 999px;
}
.vp-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* 直播时右侧章节按钮让位给 LIVE 标记，底部控制条不需要进度条也可以（进度条 v-if 掉了） */
.vp.live .vp-chap-btn { display: none; }

/* 未开播：倒计时卡片（和播放器同高，切换时版面不跳） */
.live-wait {
  aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #14312a 0%, #0e1f1b 60%, #08110f 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 20px; color: #eaf6f1;
}
.live-wait .lw-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  background: var(--brand); color: #fff; border-radius: 999px; padding: 4px 12px;
}
.live-wait .lw-title { font-size: 20px; font-weight: 700; margin-top: 14px; max-width: 80%; }
.live-wait .lw-time { font-size: 13.5px; color: #a9c6bd; margin-top: 10px; }
.live-wait .lw-count { font-size: 16px; margin-top: 14px; color: #d6e9e3; }
.live-wait .lw-count b { color: #5ee0a8; font-size: 20px; margin: 0 3px; }
.live-wait .lw-tip { font-size: 12.5px; color: #86a49b; margin-top: 16px; line-height: 1.8; max-width: 460px; }
/* 开播前 >5 分钟：全屏沉浸倒计时（右侧栏整个隐藏），版面更高 */
.live-wait.far { aspect-ratio: auto; min-height: 74vh; }
.live-wait.far .lw-count b { font-size: 30px; }

/* 课程目录里：直播中的那一节标红 */
.lesson-item .live-now { color: #e52e2e; font-weight: 600; }

@media (max-width: 900px) {
  .live-wait .lw-title { font-size: 17px; }
  .live-wait .lw-count { font-size: 14.5px; }
  .live-wait .lw-count b { font-size: 17px; }
}

/* ---------------- 题库刷题（第 44 轮恢复） ---------------- */
/* 收藏按钮（题干右上角） */
.fb-btn {
  flex-shrink: 0; background: #fff; border: 1px solid var(--line); color: var(--text-2);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: .16s;
}
.fb-btn:hover { border-color: var(--brand); color: var(--brand); }
.fb-btn.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* 选项已判定后不再有 hover 反馈，避免误以为还能改 */
.opt.locked { cursor: default; }
.opt.locked:hover { border-color: var(--line); background: #fff; }
.opt.locked.on:hover { border-color: var(--brand); background: var(--brand-light); }
.opt.locked.right:hover { border-color: var(--ok); background: #f0fdf4; }
.opt.locked.wrong:hover { border-color: var(--err); background: #fef2f2; }

/* 卡片内的浅色虚线分隔（一列里排多个操作项时用） */
.dashed-line { height: 1px; margin: 14px 0; border-top: 1px dashed var(--line); }

/* 题库列表行里的题目选项紧凑一点 */
.list-row .opt { padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }

/* ============================================================
   全局登录弹窗（第 45 轮）
   以前登录是跳一整页，现在统一弹出这个小框：验证码登录 / 密码登录。
   配色跟随站点主色（--brand），改主题只要改 :root 里的 --brand。
   ============================================================ */

/* 弹窗打开时锁住背后的页面滚动 */
.no-scroll { overflow: hidden; }

.auth-mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .42);
  z-index: 9100;                       /* 高于普通 modal-mask(9000)，低于 toast */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: authFade .16s ease-out;
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }

.auth-box {
  position: relative;
  width: 100%; max-width: 382px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
  animation: authUp .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes authUp {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.auth-x {
  position: absolute; top: 10px; right: 11px;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; border-radius: 50%;
  font-size: 21px; line-height: 1; color: var(--text-3);
  cursor: pointer; transition: .15s;
}
.auth-x:hover { background: var(--bg); color: var(--text); }

.auth-hd { padding: 25px 26px 13px; text-align: center; }
.auth-logo {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); overflow: hidden;
}
.auth-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-title { font-size: 19px; font-weight: 600; color: var(--text); }
.auth-sub { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }

.auth-tabs {
  display: flex; gap: 24px; padding: 0 26px;
  border-bottom: 1px solid var(--line);
}
.auth-tab {
  position: relative; padding: 0 2px 11px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  text-decoration: none; transition: .15s;
}
.auth-tab:hover { color: var(--brand); }
.auth-tab.on { color: var(--brand); font-weight: 600; }
.auth-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--brand);
}

.auth-body { padding: 20px 26px 24px; }

.auth-field {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; transition: .15s;
}
.auth-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 180, 105, .12);
}
.af-ico { flex: none; font-size: 15px; opacity: .75; }
.af-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font-size: 14.5px; color: var(--text);
}
.af-input::placeholder { color: #b6bcc6; }
.af-code {
  flex: none; padding: 6px 2px; border: 0; background: transparent;
  color: var(--brand); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.af-code:disabled { color: var(--text-3); font-weight: 400; cursor: not-allowed; }
.af-eye { flex: none; font-size: 12.5px; color: var(--text-3); text-decoration: none; }
.af-eye:hover { color: var(--brand); }

.auth-tip { margin: -4px 0 12px; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.auth-tip b { color: var(--brand); letter-spacing: 1px; cursor: pointer; }

.auth-err {
  margin-bottom: 12px; padding: 8px 11px;
  background: #fff1f0; border: 1px solid #ffd6d3; border-radius: 8px;
  font-size: 12.5px; line-height: 1.6; color: #d4380d;
}

.auth-submit {
  width: 100%; height: 46px;
  border: 0; border-radius: 10px; background: var(--brand);
  color: #fff; font-size: 15.5px; font-weight: 600;
  cursor: pointer; transition: .16s;
}
.auth-submit:hover:not(:disabled) { background: var(--brand-dark); }
.auth-submit:disabled { opacity: .65; cursor: not-allowed; }

.auth-agree { margin-top: 14px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.auth-agree a { color: var(--brand); text-decoration: none; }

/* 手机上从底部升起，更像原生 App 的登录层 */
@media (max-width: 480px) {
  .auth-mask { align-items: flex-end; padding: 0; }
  .auth-box {
    max-width: none; border-radius: 16px 16px 0 0;
    animation: authUpMobile .24s cubic-bezier(.2, .8, .3, 1);
  }
  @keyframes authUpMobile { from { transform: translateY(100%); } to { transform: none; } }
  .auth-body { padding-bottom: 28px; }
}

/* =============================================================
   学习页全新版式（第 46 轮）：深色沉浸式顶栏 + 左视频 + 右侧目录栏
   参考主流视频课播放页：返回 / 课程名 ｜ 意见反馈 / 分享 / 手机观看 / 用户信息
   ============================================================= */
.lp { min-height: 100vh; background: #0f1216; color: #dfe3e8; display: flex; flex-direction: column; }
.lp-loading { min-height: 60vh; }

/* ---- 顶栏 ---- */
.lp-top { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: #161b22; border-bottom: 1px solid rgba(255,255,255,.06); }
.lp-top-l { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.lp-back { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16); background: transparent; color: #dfe3e8; border-radius: 16px;
  font-size: 13px; cursor: pointer; transition: .15s; }
.lp-back:hover { border-color: var(--brand); color: var(--brand); }
.lp-back .arr { font-size: 18px; line-height: 1; margin-top: -1px; }
.lp-crumb { min-width: 0; line-height: 1.4; }
.lp-crumb .t { font-size: 14.5px; font-weight: 600; color: #fff; max-width: 42vw; }
.lp-crumb .s { font-size: 12px; color: #8b93a1; max-width: 42vw; }
.lp-top-r { flex: none; display: flex; align-items: center; gap: 6px; }
.lp-act { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px;
  background: transparent; border: none; color: #c6ccd6; font-size: 13px; border-radius: 8px; cursor: pointer; transition: .15s; }
.lp-act:hover { background: rgba(255,255,255,.08); color: #fff; }
.lp-act.lp-login { border: 1px solid var(--brand); color: var(--brand); }
.lp-act.lp-login:hover { background: var(--brand); color: #fff; }

/* 右上角用户信息 */
.lp-user { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px;
  border-radius: 18px; cursor: pointer; transition: .15s; }
.lp-user:hover { background: rgba(255,255,255,.08); }
.lp-ava { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.lp-ava img { width: 100%; height: 100%; object-fit: cover; }
.lp-name { font-size: 13px; color: #dfe3e8; max-width: 110px; }
.lp-user-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 150px; background: #fff; color: var(--text);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 100; }
.lp-user-menu a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.lp-user-menu a:hover { background: var(--bg); color: var(--brand); }
.lp-user-menu .divider { height: 1px; background: var(--line); margin: 4px 6px; }

/* ---- 主体：左视频 + 右目录栏 ---- */
.lp-main { flex: 1; min-height: 0; display: flex; align-items: flex-start; padding: 14px 16px 22px; }
.lp-left { flex: 1; min-width: 0; }
.lp-stage { position: relative; }
.lp-stage .player-box, .lp-stage .vp { border-radius: 10px; }

/* 收起 / 展开目录栏（贴在视频区右缘的竖排小标签） */
.lp-fold { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 30;
  writing-mode: vertical-rl; letter-spacing: 3px; padding: 14px 6px; border: none;
  background: rgba(13,17,23,.72); color: #cfd4db; font-size: 12.5px; border-radius: 8px 0 0 8px; cursor: pointer; transition: .15s; }
.lp-fold:hover { background: rgba(13,17,23,.92); color: #fff; }

/* 本节资料提示 pill（视频右上角） */
.lp-filepill { position: absolute; top: 12px; right: 12px; z-index: 20; display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px; border: none; border-radius: 14px; background: rgba(13,17,23,.6);
  color: #e6e9ee; font-size: 12.5px; cursor: pointer; transition: .15s; }
.lp-filepill:hover { background: rgba(13,17,23,.85); color: #fff; }

/* 图文课时正文 */
.lp-doc { max-width: 1080px; margin-top: 14px; background: #fff; color: var(--text); border-radius: 10px; padding: 20px 24px; }
.lp-doc img { max-width: 100%; }

/* ---- 右侧目录栏（白底面板，高度跟随视频框） ---- */
.lp-side { flex: none; width: 392px; margin-left: 14px; background: #fff; color: var(--text);
  border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.lp-tabs { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.lp-tabs > button { border: none; background: transparent; font-size: 14px; color: var(--text-2);
  padding: 8px 14px 10px; cursor: pointer; position: relative; }
.lp-tabs > button.on { color: var(--text); font-weight: 600; }
.lp-tabs > button.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px;
  border-radius: 2px; background: var(--brand); }
.lp-prog { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); padding-bottom: 8px; }
.lp-prog .pct { color: var(--brand); font-weight: 700; font-size: 13px; }
.lp-prog .txt { white-space: nowrap; }
.lp-bar { display: block; width: 88px; height: 6px; border-radius: 3px; background: #eef0f3; overflow: hidden; }
.lp-bar b { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .3s; }

/* 章节筛选 */
.lp-filter { flex: none; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lp-select { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
  font-size: 13px; color: var(--text); background: #fff; outline: none; }
.lp-select:focus { border-color: var(--brand); }

/* 目录列表 */
.lp-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.lp-group-t { font-size: 12.5px; color: var(--text-3); padding: 12px 14px 6px; }
.lp-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px; cursor: pointer;
  font-size: 13px; transition: background .12s; }
.lp-row:hover { background: #f5f7f9; }
.lp-row.on { background: #edfaf3; box-shadow: inset 3px 0 0 var(--brand); }
.lp-row .lp-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 9px; display: flex; align-items: center; justify-content: center; }
.lp-row .lp-no { flex: none; width: 20px; text-align: center; color: var(--text-3); font-size: 12px; }
.lp-row .lp-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-row.on .lp-row-t { color: var(--brand-dark); font-weight: 600; }
.lp-row.off .lp-row-t { color: var(--text-3); }
.lp-meta { flex: none; display: flex; align-items: center; gap: 8px; }
.lp-meta .m { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: 12px; }
.lp-tag { flex: none; font-size: 11px; padding: 1px 7px; border-radius: 9px; }
.lp-tag.no  { background: #f2f3f5; color: var(--text-3); }
.lp-tag.ing { background: #fff4e5; color: #b4650a; }
.lp-tag.fin { background: #e7f7ee; color: var(--brand-dark); }
.lp-row .lock { font-size: 12px; }
.lp-empty { padding: 44px 0; text-align: center; color: var(--text-3); font-size: 13px; }

/* 课时信息页签 */
.lp-info { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }
.lp-info-t { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.lp-info-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-2); }
.lp-kind { background: #eef2f7; border-radius: 6px; padding: 1px 8px; }
.lp-kind.live { background: #fdecec; color: #d4380d; }
.lp-info-prog { margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.lp-info-prog .pct { color: var(--brand); font-weight: 700; }
.lp-info-prog .lp-bar { width: 100%; margin-top: 6px; }
.lp-info-sec { margin-top: 18px; }
.lp-info-h { font-size: 13px; font-weight: 600; padding-bottom: 8px; }
.lp-file { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-size: 13px; transition: .12s; }
.lp-file:hover { border-color: var(--brand); color: var(--brand); }
.lp-file .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-file .s { color: var(--text-3); font-size: 12px; flex: none; }
.lp-file .dl { flex: none; font-size: 12px; }
.lp-brief { font-size: 13px; color: var(--text-2); line-height: 1.8; }
.lp-brief.dim { color: var(--text-3); }
.lp-teacher { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }

/* 分享 / 手机观看弹窗 */
.lp-share-link { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px;
  color: var(--text-2); background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-qr-empty { padding: 26px 0; color: var(--text-2); font-size: 14px; }
.lp-qr-empty .ico { font-size: 40px; margin-bottom: 8px; }

/* ---- 直播间聊天（第 49 轮：直播课右侧面板，左推流 + 右聊天） ---- */
.lp-chat { overflow: hidden; }
.lp-chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lp-chat-head b { font-size: 14px; }
.lp-chat-head .n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.live-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c9ced6; }
.live-dot.on { background: #f04438; box-shadow: 0 0 0 3px rgba(240,68,56,.15); animation: lpLivePulse 1.6s ease-out infinite; }
@keyframes lpLivePulse { 50% { box-shadow: 0 0 0 6px rgba(240,68,56,.06); } }
.lp-chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.lp-chat-empty { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 13px; }
.lp-chat-msg { display: flex; gap: 9px; padding: 7px 0; }
.lp-chat-msg .av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eef2f7; color: #86909c;
  font-size: 13px; display: flex; align-items: center; justify-content: center; object-fit: cover; }
.lp-chat-msg .body { flex: 1; min-width: 0; }
.lp-chat-msg .who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.lp-chat-msg .who em { font-style: normal; margin-left: auto; font-size: 11px; color: #c2c7cf; }
.lp-chat-msg .who i { font-style: normal; font-size: 10.5px; color: #fff; background: var(--brand);
  border-radius: 4px; padding: 0 5px; line-height: 16px; }
.lp-chat-msg .txt { font-size: 13.5px; color: var(--text); line-height: 1.6; word-break: break-word; margin-top: 2px; }
.lp-chat-msg.me .who { color: var(--brand-dark); }
.lp-chat-msg.tch .av { background: #e7f7ee; color: var(--brand-dark); }
.lp-chat-msg.tch .txt { background: #f2fbf6; border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
.lp-chat-foot { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fafbfc; }
.lp-chat-in { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 12px; font-size: 13px; outline: none; background: #fff; color: var(--text); }
.lp-chat-in:focus { border-color: var(--brand); }
.lp-chat-send { flex: none; height: 36px; padding: 0 18px; border: none; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: 13px; cursor: pointer; }
.lp-chat-send:disabled { opacity: .6; cursor: default; }
.lp-chat-send.wide { flex: 1; background: #eef2f7; color: var(--text-2); }
.lp-chat-send.wide:hover { background: var(--brand); color: #fff; }

/* ---- 小屏适配 ---- */
@media (max-width: 1100px) {
  .lp-act { padding: 0 8px; }
  .lp-act svg { display: none; }
}
@media (max-width: 900px) {
  .lp-top { padding: 0 10px; height: 50px; }
  .lp-crumb .t, .lp-crumb .s { max-width: 40vw; }
  .lp-main { flex-direction: column; padding: 10px; }
  .lp-side { width: 100%; margin-left: 0; margin-top: 12px; height: auto !important; max-height: 62vh; }
}

/* =============================================================
   学习中心一体化改版（第 47~48 轮）：
   左侧「我的课程」卡片列表 + 右侧一张大卡片
   （课程头 / 带数量页签 / 可折叠章节 / 课时行带时间与资料下载）
   ============================================================= */
.sc2-layout { display: flex; gap: 16px; align-items: flex-start; }

/* 左侧课程卡片 */
.sc2-side { flex: none; width: 292px; display: flex; flex-direction: column; gap: 12px; }
.sc2-course { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px 12px;
  cursor: pointer; border: 1px solid transparent; transition: .15s; }
.sc2-course:hover { border-color: var(--brand); }
.sc2-course.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.sc2-course .t { font-size: 14px; font-weight: 600; line-height: 1.55; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc2-cbar { height: 6px; border-radius: 3px; background: #eef0f3; overflow: hidden; }
.sc2-cbar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .3s; }
.sc2-course .pct { font-size: 12.5px; color: var(--brand-dark); font-weight: 600; }

/* 右侧大卡片 */
.sc2-main { flex: 1; min-width: 0; }
.sc2-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
  border-top: 3px solid var(--brand); }
.sc2-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 26px 16px; }
.sc2-head-l { min-width: 0; }
.sc2-head-l .t { font-size: 18px; font-weight: 700; }
.sc2-head-l .s { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.sc2-head-r { flex: none; display: flex; align-items: center; gap: 14px; }
.sc2-prog { display: inline-flex; align-items: center; gap: 8px; }
.sc2-prog em { font-style: normal; font-size: 12.5px; color: var(--brand-dark); font-weight: 600; white-space: nowrap; }
.sc2-bar { display: block; width: 110px; height: 6px; border-radius: 3px; background: #eef0f3; overflow: hidden; }
.sc2-bar b { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .3s; }
.sc2-act { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 16px; border-radius: 17px;
  background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.sc2-act:hover { background: var(--brand-dark); color: #fff; }
.sc2-act.ghost { background: #fff; color: var(--text-2); border: 1px solid var(--line); font-weight: 500; }
.sc2-act.ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }

/* 页签（带数量） */
.sc2-tabs { display: flex; gap: 6px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.sc2-tabs button { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent;
  font-size: 14.5px; color: var(--text-2); padding: 10px 4px 12px; margin-right: 26px; cursor: pointer; position: relative; }
.sc2-tabs button em { font-style: normal; font-size: 12px; background: #f2f3f5; color: var(--text-3);
  border-radius: 9px; padding: 0 7px; line-height: 18px; }
.sc2-tabs button.on { color: var(--brand-dark); font-weight: 700; }
.sc2-tabs button.on em { background: var(--brand-light); color: var(--brand-dark); }
.sc2-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 2px; background: var(--brand); }

/* 课时行：圆点 + 类型标签 + 标题 + 时间行 + 资料行 + 右侧操作 */
.sc2-body { padding: 4px 26px 22px; }
.sc2-ch { display: flex; align-items: center; gap: 8px; padding: 14px 2px 10px; cursor: pointer; user-select: none; }
.sc2-ch .arr { flex: none; font-size: 10px; color: var(--text-3); transition: transform .15s; }
.sc2-ch .arr.open { transform: rotate(90deg); }
.sc2-ch:hover .t { color: var(--brand); }
.sc2-ch .t { font-size: 14.5px; font-weight: 700; color: var(--text); }
.sc2-ch .n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.sc2-ch-body { padding: 0 2px; }
.sc2-lesson { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0 12px;
  border-bottom: 1px dashed var(--line); }
.sc2-lesson:last-child { border-bottom: none; }
.sc2-lesson .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d5d9df; margin-top: 9px; }
.sc2-lesson .dot.fin { background: var(--brand); }
.sc2-lesson .tag { flex: none; font-size: 11.5px; border-radius: 4px; padding: 1px 7px; }
.sc2-lesson .tag.t1 { background: #e7f7ee; color: var(--brand-dark); }
.sc2-lesson .tag.t2 { background: #fdecec; color: #d4380d; }
.sc2-lesson .tag.t3 { background: #e8f4ff; color: #1677ff; }
.sc2-lesson .main { flex: 1; min-width: 0; }
.sc2-lesson .lt-row { display: flex; align-items: center; gap: 8px; }
.sc2-lesson .lt { font-size: 15px; color: var(--text); cursor: pointer; }
.sc2-lesson .lt:hover { color: var(--brand); }
.sc2-lesson .lt.off { color: var(--text-3); }
.sc2-lesson .sub { display: flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12.5px; color: var(--text-3); }
.sc2-lesson .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 2px; }
.sc2-lesson .go-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 15px;
  border: 1px solid var(--brand); border-radius: 15px; font-size: 12.5px; color: var(--brand);
  background: #fff; cursor: pointer; white-space: nowrap; transition: .15s; }
.sc2-lesson .go-btn:hover { background: var(--brand); color: #fff; }
.sc2-lesson .go-btn.off { border-color: var(--line); color: var(--text-3); cursor: default; }
.sc2-lesson .side .pct { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.sc2-lesson .side .pct.fin { color: var(--brand-dark); font-weight: 600; }
.sc2-lesson .side .pct.ing { color: #b4650a; }

/* 课时行内的资料行（像参考图那种「文件名 + 下载」） */
.sc2-files { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sc2-file { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2);
  cursor: pointer; width: fit-content; max-width: 100%; padding: 2px 0; }
.sc2-file:hover { color: var(--brand); }
.sc2-file .ico { font-size: 14px; }
.sc2-file .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc2-file .size { font-size: 12px; color: var(--text-3); flex: none; }
.sc2-file .dl { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px;
  color: var(--brand); }
.sc2-file .dl.lock { color: var(--text-3); }
.sc2-nofile { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 13.5px; }

@media (max-width: 1000px) {
  .sc2-layout { flex-direction: column; }
  .sc2-side { width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .sc2-course { min-width: 250px; }
}
@media (max-width: 760px) {
  .sc2-head { flex-direction: column; align-items: flex-start; }
  .sc2-tabs button { margin-right: 16px; }
}

/* =============================================================
   我的面授（第 55 轮）
   一对一课程 + 腾讯会议码 + 课时回放（章节跳转）
   ============================================================= */
.of-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; border-bottom: 1px solid var(--line); }
.of-head:hover { background: var(--brand-light); }
.of-head .t { font-size: 16px; font-weight: 700; }
.of-head .s { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.of-head .act { flex: none; font-size: 13px; color: var(--brand); }

.of-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.of-table th, .of-table td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.of-table th { background: #fafbfc; color: var(--text-3); font-weight: 400; font-size: 13px; }
.of-table tbody tr:last-child td { border-bottom: none; }
.of-table tbody tr:hover { background: #fafbfc; }

/* 腾讯会议码：点一下复制 */
.of-code { display: inline-block; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  background: var(--brand-light); color: var(--brand-dark); font-weight: 700;
  letter-spacing: 1px; font-size: 13.5px; }
.of-code:hover { background: var(--brand); color: #fff; }

/* 回放弹窗 */
.of-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 3000;
  background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.of-player { width: 100%; max-width: 860px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.of-player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; font-size: 15px; border-bottom: 1px solid var(--line); }
.of-close { cursor: pointer; color: var(--text-3); font-size: 16px; line-height: 1; padding: 4px; }
.of-close:hover { color: var(--err); }
.of-player video { display: block; max-height: 62vh; }
.of-chapters { padding: 14px 18px 18px; }
.of-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.of-ch:hover { background: var(--brand-light); color: var(--brand-dark); }
.of-ch + .of-ch { margin-top: 2px; }

@media (max-width: 760px) {
  .of-head { padding: 14px 16px; }
  .of-table th, .of-table td { padding: 10px 14px; font-size: 13px; }
  .of-mask { padding: 12px; }
}

/* =============================================================
   M豆（第 56 轮）
   个人中心小卡 / M豆中心 / 商城兑换标
   ============================================================= */
.pt-mini { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: linear-gradient(120deg, #e8f8ee 0%, #f6fdf9 60%, #ffffff 100%);
  border: 1px solid #d5efe2; }
.pt-mini:hover { border-color: var(--brand); }
.pt-mini .l { font-size: 13px; color: var(--text-3); }
.pt-mini .n { font-size: 26px; font-weight: 800; color: var(--brand-dark); line-height: 1.2; }
.pt-mini .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pt-mini .pt-mini-r { font-size: 34px; color: var(--brand); opacity: .35; flex: none; }

.pt-wrap { padding-top: 20px; padding-bottom: 40px; }
.pt-loading { padding: 80px 0; text-align: center; color: var(--text-3); font-size: 14px; }
.pt-empty { padding: 70px 20px; text-align: center; background: #fff; border-radius: var(--radius); }
.pt-empty .e-ico { font-size: 42px; color: var(--brand); opacity: .5; }
.pt-empty .e-t { font-size: 17px; font-weight: 700; margin-top: 10px; }
.pt-empty .e-s { font-size: 13px; color: var(--text-3); margin: 6px 0 18px; }

.pt-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: var(--radius);
  background: linear-gradient(120deg, #1fa46a 0%, #34c383 55%, #6bd6a5 100%);
  color: #fff; box-shadow: 0 10px 26px rgba(31, 164, 106, .22); }
.pt-hero .pt-label { font-size: 13px; opacity: .9; }
.pt-hero .pt-num { font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: 1px; }
.pt-hero .pt-sub { font-size: 13px; opacity: .92; margin-top: 4px; }
.pt-hero .pt-sub b { font-weight: 700; }
.pt-hero-r { text-align: right; }
.pt-sign { border: 0; cursor: pointer; padding: 11px 26px; border-radius: 999px;
  background: #fff; color: var(--brand-dark); font-size: 15px; font-weight: 700; }
.pt-sign:disabled { background: rgba(255,255,255,.35); color: #fff; cursor: default; }
.pt-streak { font-size: 12.5px; opacity: .9; margin-top: 8px; }

.pt-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.pt-en { padding: 16px 20px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  cursor: pointer; transition: .15s; }
.pt-en:hover { border-color: var(--brand); transform: translateY(-2px); }
.pt-en .i { font-size: 22px; }
.pt-en .t { font-size: 15px; font-weight: 700; margin-top: 4px; }
.pt-en .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

.pt-sec-title { font-size: 15px; font-weight: 700; margin: 24px 0 10px; }
.pt-rules, .pt-logs { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.pt-rule { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pt-rule:last-child { border-bottom: none; }
.pt-rule .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.pt-rule .tx { flex: 1; min-width: 0; }
.pt-rule .n { font-size: 14.5px; font-weight: 600; }
.pt-rule .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pt-rule .st { font-size: 12.5px; color: var(--text-3); flex: none; }
.pt-rule .st.done { color: var(--brand-dark); }

.pt-log { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--line); }
.pt-log:last-child { border-bottom: none; }
.pt-log .n { font-size: 14px; }
.pt-log .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pt-log .v { font-size: 16px; font-weight: 700; flex: none; }
.pt-log .v.in { color: var(--brand-dark); }
.pt-log .v.out { color: var(--err); }
.pt-none { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; }
.pt-more { padding: 13px; text-align: center; font-size: 13px; color: var(--brand); cursor: pointer;
  border-top: 1px solid var(--line); }
.pt-more:hover { background: var(--brand-light); }

/* =============================================================
   九宫格抽奖（第 56 轮）
   ============================================================= */
.lot-wrap { padding-top: 20px; padding-bottom: 40px; max-width: 720px; }
.lot-loading { padding: 80px 0; text-align: center; color: var(--text-3); }
.lot-head { text-align: center; padding: 10px 0 18px; }
.lot-title { font-size: 24px; font-weight: 800; color: var(--brand-dark); }
.lot-brief { font-size: 13.5px; color: var(--text-3); margin-top: 6px; }
.lot-chances { font-size: 14px; margin-top: 10px; }
.lot-chances b { color: var(--brand-dark); font-size: 20px; }

.lot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 14px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .04); }
.lot-cell { min-height: 108px; border-radius: 12px; background: #f7fbf9; border: 2px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; text-align: center; transition: .1s; }
.lot-cell.empty { background: #fafafa; }
.lot-cell.on { background: var(--brand-light); border-color: var(--brand); transform: scale(1.03);
  box-shadow: 0 0 0 3px rgba(52, 195, 131, .18); }
.lot-img { width: 42px; height: 42px; object-fit: contain; }
.lot-ico { font-size: 26px; color: var(--brand); line-height: 1; }
.lot-name { font-size: 13px; color: var(--text-2); }
.lot-center { background: linear-gradient(140deg, #1fa46a, #34c383); color: #fff; cursor: pointer; border: 0; }
.lot-center.busy { opacity: .7; cursor: default; }
.lot-center-t { font-size: 16px; font-weight: 800; }
.lot-center-s { font-size: 12px; opacity: .9; }

.lot-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.lot-btn { flex: 1; min-width: 200px; padding: 12px 16px; border-radius: 999px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--brand); background: #fff; color: var(--brand-dark); }
.lot-btn:hover { background: var(--brand-light); }
.lot-btn .sub { font-size: 12px; color: var(--text-3); }

.lot-feed { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.lot-feed-h { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.lot-feed-b { display: flex; flex-wrap: wrap; gap: 8px; }
.lot-feed-i { font-size: 12.5px; color: var(--text-2); background: var(--brand-light);
  padding: 4px 10px; border-radius: 999px; }
.lot-feed-i b { color: var(--brand-dark); }

.lot-sec-title { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.lot-rec { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lot-rec + .lot-rec { margin-top: 8px; }
.lot-rec .n { font-size: 14px; }
.lot-rec .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.lot-rec .st { font-size: 12.5px; color: var(--brand-dark); flex: none; }
.lot-rule-t { white-space: pre-wrap; font-size: 13px; color: var(--text-3); line-height: 1.9;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0;
  font-family: inherit; }

/* 中奖 / 兑换弹窗（两个页面共用） */
.lot-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 3000;
  background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lot-dialog { width: 100%; max-width: 420px; max-height: 88vh; overflow: auto; background: #fff;
  border-radius: 16px; padding: 24px 22px 18px; text-align: center; }
.lot-dialog-h { font-size: 15px; color: var(--text-3); }
.lot-dialog-p { font-size: 26px; font-weight: 800; color: var(--brand-dark); margin: 6px 0 4px; }
.lot-dialog-s { font-size: 13px; color: var(--text-3); }
.lot-addr { margin-top: 16px; text-align: left; }
.lot-addr-t { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.lot-addr input { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px; outline: none; }
.lot-addr input:focus { border-color: var(--brand); }
.lot-dialog-act { display: flex; gap: 10px; margin-top: 18px; }
.lot-dialog-act .btn { flex: 1; }

/* 商城：M豆价 */
.gd-points { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--brand-light); border: 1px dashed var(--brand); }
.gd-points .n { font-size: 17px; font-weight: 800; color: var(--brand-dark); }
.gd-points .s { font-size: 12.5px; color: var(--text-3); }
.gc-points { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--brand-dark);
  background: var(--brand-light); border-radius: 999px; padding: 2px 9px; }

@media (max-width: 760px) {
  .pt-hero { padding: 20px; }
  .pt-hero .pt-num { font-size: 38px; }
  .pt-entry { grid-template-columns: 1fr; }
  .lot-cell { min-height: 92px; }
  .lot-name { font-size: 12px; }
  .lot-center-t { font-size: 14px; }
}

/* 微信绑定说明页（第 57 轮） */
.wxbind-tip {
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; margin-bottom: 16px;
}
.wxbind-step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); margin: 10px 0; }
.wxbind-step b {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 3px;
}
.wxbind-token {
  margin-top: 18px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #f7f8fa; color: var(--text-2); font-size: 12px; word-break: break-all;
}
.wxbind-token .muted { margin-left: 6px; }