/* ============================================================
   心源 · 移动端 H5 课程平台 — 共享样式
   品牌系统：有欢喜金 × 暖白纸张 × 深棕黑文字
   ============================================================ */

:root {
  /* ─── Z 轴分层 ──────────────────────────────────────────────────── */
  --z-canvas:   0;   /* 页面底色层 */
  --z-surface:  10;  /* 内容卡片层 */
  --z-raised:   20;  /* 悬浮元素层：底部导航、CTA、悬浮卡 */
  --z-overlay:  40;  /* 遮罩、Sheet、Drawer */
  --z-toast:    60;  /* Toast */

  /* ─── Surface：纸张 / 画布 / 柔光 ─────────────────────────────── */
  --bg:           #f7f5f1;   /* 页面画布 — 暖灰，衬托白色卡片 */
  --surface:      #ffffff;   /* 卡片表面 */
  --surface-warm: #fcf8ef;   /* 信息背景、按压态 */
  --surface-soft: #faf6ed;   /* 次级底，用于纹理 */

  /* ─── Foreground：三层对比拉开 ──────────────────────────────────── */
  --fg:    #2b251d;   /* 标题 / 主文字 */
  --fg-2:  #655b4d;   /* 正文 / 次要信息 */
  --muted: #8b806f;   /* 辅助 / 说明 */
  --meta:  #b7ad9d;   /* 禁用 / placeholder */

  /* ─── Border：低存在感分隔线 ─────────────────────────────────────── */
  --border:      #e8e0d3;  /* 1px 分隔 */
  --border-soft: #f0e9de;  /* 内部细分 */
  --border-wash: #f5efe6;  /* 几乎不可见的结构线 */

  /* ─── Brand：亮金用于识别，深金用于可读交互 ─────────────────────── */
  --brand-gold:    #f2a000;
  --accent:        #965b08;    /* 主按钮与文字，白字对比度达标 */
  --accent-on:     #ffffff;
  --accent-hover:  #824c02;
  --accent-active: #6f4000;
  --accent-soft:   #fff4dc;
  --accent-wash:   #fffbf3;

  /* ─── Semantic：低饱和度，只在必要时出现 ─────────────────────────── */
  --success: #02b940;
  --success-bg: #eaf8ef;
  --warn:    #ff7d03;
  --warn-bg: #fff2e6;
  --danger:  #b63c3c;
  --wechat:  #07c160;
  --alipay:  #1677ff;

  /* ─── Typography：MiSans 优先，系统字体兜底 ─────────────────────── */
  --font-display: "MiSans", -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "MiSans", -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "MiSans", ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale：大中小三级，对比果断 */
  --text-xs:   12px;   /* 辅助 / 角标 / 数字 */
  --text-sm:   14px;   /* 正文标准 / 列表 */
  --text-base: 16px;   /* 正文大 / 卡片标题 */
  --text-lg:   18px;   /* 小节标题 / 价格主数字 */
  --text-xl:   20px;   /* 页面标题 / 大价格 */
  --text-2xl:  24px;   /* 强调标题 */
  --text-3xl:  28px;   /* 登录品牌名 */
  --text-4xl:  32px;   /* 封面超大标题（少用） */

  /* MiSans 字重映射：MiSans 使用非标准 font-weight 值，显式绑定避免浏览器近似出错 */
  --weight-regular:  330;  /* MiSans Regular */
  --weight-medium:   380;  /* MiSans Medium */
  --weight-semibold: 520;  /* MiSans Semibold */
  --weight-bold:     630;  /* MiSans Bold */

  /* Leading + tracking：中文舒适 */
  --leading-body:  1.65;   /* 中文正文 14/16 都需要宽松 */
  --leading-tight: 1.35;   /* 标题紧凑但不挤压 */
  --tracking-display: 0;
  --tracking-ui:      0.02em;   /* 小标签、按钮 */

  /* ─── Spacing：8pt 网格 ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── Radius：全站统一 ───────────────────────────────────────────── */
  --radius-sm:   8px;      /* 小标签、输入框 */
  --radius-md:   12px;     /* 卡片、封面 */
  --radius-lg:   16px;     /* 大卡片、登录面板 */
  --radius-pill: 9999px;  /* 按钮、标签 */

  /* ─── Elevation：三层柔和投影 ─────────────────────────────────────── */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  /* 卡片常态：极浅 1 层 + 边缘线 */
  --elev-card:   0 1px 0 rgba(0, 0, 0, 0.04),
                 0 1px 2px rgba(0, 0, 0, 0.04),
                 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* 卡片 hover / 继续学习：2 层 */
  --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08),
                 0 1px 2px rgba(0, 0, 0, 0.06);
  /* 浮起元素：导航/CTA：3 层 */
  --elev-float:  0 8px 24px rgba(0, 0, 0, 0.10),
                 0 2px 6px rgba(0, 0, 0, 0.06),
                 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* 悬浮卡：继续学习 */
  --elev-card-float: 0 6px 18px rgba(0, 0, 0, 0.09),
                     0 2px 4px rgba(0, 0, 0, 0.05),
                     0 0 0 1px rgba(0, 0, 0, 0.04);

  /* ─── Focus / Motion ─────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
  --motion-fast:   150ms;
  --motion-base:   220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --container-max:            1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet:  16px;
  --container-gutter-phone:   12px;
  --app-width: 375px;
}

[hidden] { display: none !important; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 设备外壳：375px 移动视口 ---------- */
.app {
  position: relative;
  width: var(--app-width);
  max-width: 100%;
  /* 固定一屏高度的 App 外壳：页面本身不滚动，内容在 .app-scroll 内滚动，
     tabbar / cta-bar 通过 absolute 钉在外壳底部，而不是长文档末尾。 */
  height: 100dvh;
  overflow: hidden;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--border);
  z-index: var(--z-canvas);
}

.app-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-scroll.has-tabbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.app-scroll.has-cta    { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---------- 顶部导航 ---------- */
.navbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
  flex: none;
  z-index: var(--z-surface);
}
.navbar .nav-title {
  flex: 1; text-align: center;
  font-size: var(--text-base); font-weight: var(--weight-bold);
  color: var(--fg);
  letter-spacing: var(--tracking-ui);
}
.navbar.on-dark .nav-title { color: rgba(255, 255, 255, 0.92); }
.nav-btn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--fg);
  text-decoration: none;
  background: transparent; border: none; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.nav-btn:active { background: rgba(48, 48, 52, 0.10); transform: translateY(1px); }
.nav-btn.on-dark { color: rgba(255, 255, 255, 0.92); }
.nav-btn.on-dark:active { background: rgba(255, 255, 255, 0.12); }
.nav-spacer { width: 36px; flex: none; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ui);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); }

.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-primary[disabled] { background: rgba(48, 48, 52, 0.10); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.btn-ghost:active { background: var(--surface-warm); }

.btn-wechat { background: var(--wechat); color: #fff; }
.btn-wechat:active { background: #06ad56; }

.btn-follow { background: var(--accent); color: var(--accent-on); }
.btn-follow[aria-pressed="true"] { background: rgba(48, 48, 52, 0.10); color: var(--muted); }

/* ---------- 标签 / 徽章 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  line-height: 1.5;
  background: rgba(48, 48, 52, 0.10);
  color: var(--fg-2);
}
.chip-trending { background: var(--accent); color: var(--accent-on); }
.chip-success  { background: var(--success-bg); color: var(--success); }
.chip-warn     { background: var(--warn-bg); color: var(--warn); }

/* ---------- 课程封面：统一比例 + 插画质感 ----------
   比例遵循课程主图技术规范：16:9（1600×900 设计，居中裁切，禁止拉伸）。
   全站所有课程封面位（卡片 / hero / 缩略图）必须使用 16:9，禁止私自改比例。 */
.cover {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  flex: none;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover .cover-label {
  position: absolute; left: var(--space-3); bottom: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ---------- 课程卡片：小红书瀑布 / 列表风格 ---------- */
.course-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
  box-shadow: var(--elev-card);
}
.course-card:hover { box-shadow: var(--elev-raised); }
.course-card:active { transform: scale(0.985); box-shadow: var(--elev-card); }
.course-card .cover { border-radius: 0; aspect-ratio: 16 / 9; }
.course-card-body { padding: var(--space-3) var(--space-3) var(--space-4); }
.course-card-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 信息行可能带"组合课"等小标签，用 flex 让标签与文字对齐并保持间距 */
.course-card-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--muted);
}
.course-card-action {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border-wash);
  font-size: var(--text-xs);
}
.course-card-action span { color: var(--muted); }
.course-card-action strong { flex: none; color: var(--accent); font-weight: var(--weight-semibold); }
.course-card-action.is-locked strong { color: var(--fg-2); }

/* ---------- 进度条：更厚重、明确 ---------- */
.progress-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
.progress-track {
  flex: 1; height: 5px; border-radius: var(--radius-pill);
  background: rgba(48, 48, 52, 0.10);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(242, 160, 0, 0.25);
}
.progress-num { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--accent); font-family: var(--font-mono); letter-spacing: 0.01em; }
.progress-num.muted { color: var(--muted); }

/* ---------- 分组标题：疏密节奏 ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--space-4);
  margin: var(--space-8) 0 var(--space-3);
}
.section-head:first-child { margin-top: var(--space-4); }
.section-title {
  font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1.4;
  letter-spacing: var(--tracking-ui);
  color: var(--fg);
}
.section-more {
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 2px;
  transition: color var(--motion-fast) var(--ease-standard);
}
.section-more:active { color: var(--fg-2); }

/* ---------- 底部 Tab：浮起层 ---------- */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: var(--z-raised);
  box-shadow: var(--elev-float);
}
.tab-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.tab-item:active { transform: translateY(1px); }
.tab-item.active { color: var(--accent); font-weight: var(--weight-semibold); }
.tab-item svg { color: currentColor; }

/* ---------- 底部 CTA 条：浮起层 ---------- */
.cta-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-raised);
  box-shadow: var(--elev-float);
}

/* ---------- 章节目录 ---------- */
.chapter-list { list-style: none; }
.chapter-subhead {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted);
}
.chapter-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit;
  min-height: 56px;
}
.chapter-item + .chapter-item { border-top: 1px solid var(--border-wash); }
.chapter-item:active { background: var(--surface-warm); }
.chapter-idx {
  width: 28px; flex: none;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.chapter-main { display: block; flex: 1; min-width: 0; overflow: hidden; }
.chapter-name {
  display: block;
  font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chapter-sub { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
.chapter-state { flex: none; display: flex; align-items: center; }
.chapter-item.is-locked .chapter-name { color: var(--muted); }
.chapter-item.current { background: var(--accent-soft); }
.chapter-item.current .chapter-name { color: var(--accent); font-weight: var(--weight-semibold); }
.chapter-item.current .chapter-idx { color: var(--accent); }

/* ---------- 底部弹层 / Sheet ---------- */
.sheet-mask {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard);
  z-index: var(--z-overlay);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.sheet-mask.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 0 calc(var(--space-5) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--motion-base) var(--ease-out);
  z-index: var(--z-overlay);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
}
.sheet.open { transform: translateY(0); }
.sheet-grip {
  width: 36px; height: 4px; border-radius: var(--radius-pill);
  background: #e0e0e0;
  margin: 6px auto 10px;
}
.sheet-title {
  text-align: center;
  font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-ui);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-wash);
  color: var(--fg);
}
.sheet-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--fg); text-align: left;
  min-height: 48px;
}
.sheet-option:active { background: var(--surface-warm); }
.sheet-option.selected { color: var(--accent); font-weight: var(--weight-semibold); }
.sheet-option .check { display: none; }
.sheet-option.selected .check { display: block; }

/* 右侧抽屉 */
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 84%;
  background: var(--surface);
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--ease-out);
  z-index: var(--z-overlay);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.14);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-wash);
  flex: none;
}
.drawer-title { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-ui); }
.drawer-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  border-radius: 50%; color: var(--muted);
  transition: background var(--motion-fast) var(--ease-standard);
}
.drawer-close:active { background: rgba(48, 48, 52, 0.10); }
.drawer-body { flex: 1; overflow-y: auto; }

/* ---------- 列表行 ---------- */
.row-list { background: var(--surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elev-card); }
.row-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit;
  min-height: 56px;
}
button.row-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row-item + .row-item { border-top: 1px solid var(--border-wash); }
.row-item:active { background: var(--surface-warm); }
.row-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(48, 48, 52, 0.08);
  color: var(--fg-2);
}
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.45; }
.row-sub { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.row-extra { flex: none; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-2); font-family: var(--font-mono); }
.row-arrow {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--muted);
}

/* ---------- 复选框（协议） ---------- */
.agree-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--muted); line-height: 1.6;
}
.agree-row a { color: var(--accent); text-decoration: none; font-weight: var(--weight-medium); }
.checkbox {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none;
  margin-top: 1px;
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.checkbox:checked { background: var(--accent); border-color: var(--accent); }
.checkbox:checked::after {
  content: "";
  position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ---------- 单选支付行 ---------- */
.pay-option {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg);
  text-align: left;
  min-height: 56px;
}
.pay-option + .pay-option { border-top: 1px solid var(--border-wash); }
.pay-option:active { background: var(--surface-warm); }
.pay-logo {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.pay-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pay-desc { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.radio-dot {
  width: 20px; height: 20px; flex: none; margin-left: auto;
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.pay-option.selected .radio-dot { border-color: var(--accent); border-width: 6px; }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; bottom: 120px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
  z-index: var(--z-toast);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 标签页 ---------- */
.topnav-tabs {
  display: flex; gap: var(--space-6);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-wash);
}
.topnav-tabs a {
  position: relative;
  padding: var(--space-3) 0;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-ui);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}
.topnav-tabs a:hover { color: var(--fg); }
.topnav-tabs a[aria-current="page"] {
  color: var(--fg); font-weight: var(--weight-bold);
}
.topnav-tabs a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-hover);
  border-radius: 2px 2px 0 0;
}

/* ============================================================
   质感深化补充工具类
   ============================================================ */

/* 价格展示：重字重、等宽数字、唯一红色强调 */
.price-display {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
}
.price-display small {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-right: 1px;
}
.price-display.sm { font-size: var(--text-xl); }
.price-display.lg { font-size: var(--text-3xl); }

/* 统计数字 */
.stat-num {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 通用白色卡片 */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-card);
}
.card-raised { box-shadow: var(--elev-raised); }
.card-float  { box-shadow: var(--elev-card-float); }

/* 封面插画辅助：确保 SVG 完整填充 */
.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 列表卡片通用 */
.list-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elev-card);
}

/* 更厚的进度条（用于卡片内） */
.progress-thick .progress-track { height: 6px; }

/* 悬浮安全区：用于底部 CTA / Tabbar 上方内容 */
.float-pad { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* 头像 */
.avatar {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--accent);
  font-size: 20px; font-weight: var(--weight-semibold);
}

/* 柔和标签 */
.tag-soft {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  color: var(--fg-2);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-ui);
}

/* 到期提示：倒计时用琥珀色提醒；已到期置灰 */
.tag-warn { background: #fdf3e3; color: #a86e14; }
.tag-expired { background: var(--surface-warm); color: var(--muted); }
.course-card.is-expired { opacity: .55; box-shadow: none; pointer-events: none; }
.expired-divider {
  margin: var(--space-4, 16px) 0 var(--space-2, 8px);
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
}

/* 文字层级快速类 */
.text-title { color: var(--fg); }
.text-body  { color: var(--fg-2); }
.text-muted { color: var(--muted); }

/* 分隔留白 */
.section-gap { margin-top: var(--space-8); }
.section-gap-sm { margin-top: var(--space-6); }

.api-state {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  background: var(--surface);
  box-shadow: var(--elev-card);
  line-height: 1.6;
}
.api-state strong { display: block; color: var(--fg); font-size: var(--text-sm); }
.api-state p { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.state-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.state-actions .btn { flex: 1; min-width: 0; }
.api-state.success { color: #287a59; }
.api-state.error { color: var(--accent); }
.live-course-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-4);
  min-height: 116px;
  color: #fff;
  background: linear-gradient(135deg, #222 0%, #73511f 60%, #f2a000 130%);
}
.live-course-cover span { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.live-course-cover small { opacity: 0.82; }
.live-course-cover.has-image { padding: 0; background: var(--surface-soft); }
.live-course-cover.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-course-cover.has-image small {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  padding: 3px 9px; border-radius: var(--radius-pill);
  color: var(--fg); background: rgba(255, 255, 255, 0.9);
}
button.chapter-item {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
}
.record-panel { margin: var(--space-4); padding: var(--space-4); }
.record-panel h3 { margin: var(--space-3) 0; font-size: var(--text-base); }
.record-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.record-row span { color: var(--muted); text-align: right; }
.media-grant-badge {
  position: absolute;
  z-index: 4;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: var(--text-xs);
  text-align: center;
}
.locked-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: #fff;
  background: #191919;
  text-align: center;
}
.locked-stage strong { font-size: var(--text-2xl); }
.locked-stage p, .locked-stage small { margin: 0; opacity: 0.72; }