/* ==========================================================
   一和在线 · 一站式数智化学习服务平台
   移动端首页样式
   主色：教育蓝
   ========================================================== */

/* ---------- 设计变量 ---------- */
:root {
  --c-primary: #1A6AFF;
  --c-primary-d: #0E3E96;
  --c-primary-l: #5AA4FF;
  --c-primary-soft: #E8F1FF;
  --c-accent: #ffb020;
  --c-accent-soft: #fff5e2;

  --c-text: #0E1A2B;
  --c-text-2: #5B6B82;
  --c-text-3: #8A99AC;

  --c-bg: #EEF3FA;
  --c-card: #ffffff;
  --c-line: #EDF1F7;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --sd-card: 0 2px 12px rgba(18, 55, 110, .07);
  --sd-float: 0 6px 22px rgba(18, 55, 110, .16);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 54px;
  --tabbar-h: 58px;
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  max-width: 750px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
svg { display: block; width: 100%; height: 100%; }
img { display: block; max-width: 100%; }

/* ==========================================================
   顶部标头
   ========================================================== */
/* ==========================================================
   头部（静态大图，LOGO 悬浮其上）
   ========================================================== */
.hero {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 顶部轻微压暗，保证白色 LOGO 与铃铛可读 */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--safe-top) + var(--header-h) + 6px);
  background: linear-gradient(180deg, rgba(8, 24, 66, .38), rgba(8, 24, 66, 0));
  pointer-events: none;
}

.app-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding-top: var(--safe-top);
  background: none;
  box-shadow: none;
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

/* --- 品牌区 --- */
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.brand-logo {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-text strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(8, 24, 66, .35);
}

.brand-text em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.3;
  white-space: nowrap;
}

/* --- 头部右侧按钮 --- */
.header-actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  position: relative;
  width: 36px; height: 36px;
  padding: 8px;
  border-radius: 50%;
  color: #fff;
  transition: background .2s;
}
.icon-btn:active { background: rgba(255, 255, 255, .18); }

.icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff4d4f;
  border: 1.5px solid #1A6AFF;
}

/* --- 子页面头部变体：固定蓝色头部（无 hero 大图时使用） --- */
.app-header.app-header--fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  max-width: 750px;
  margin: 0 auto;
  background: linear-gradient(160deg, #2b76ee 0%, var(--c-primary) 60%, #1d63d8 100%);
  box-shadow: 0 2px 14px rgba(14, 62, 150, .28);
}

.app-header--fixed + .app-main,
main.app-main.has-fixed-header {
  padding-top: calc(var(--header-h) + var(--safe-top));
}

/* ==========================================================
   主体
   ========================================================== */
.app-main { padding-top: 0; }

.main-bottom-space { height: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }

/* ==========================================================
   卡片通用区块
   ========================================================== */
.card-section {
  margin: 12px 12px 0;
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 14px 14px 6px;
  box-shadow: var(--sd-card);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  position: relative;
  padding-left: 11px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: .3px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3.5px; height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-primary-l), var(--c-primary));
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  color: var(--c-text-3);
}
.section-more svg { width: 13px; height: 13px; }

/* ==========================================================
   功能模块九宫格
   ========================================================== */
.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 14px;
  column-gap: 4px;
  padding-bottom: 10px;
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: transform .16s;
}
.module-item:active { transform: scale(.92); }

.module-icon {
  width: 46px; height: 46px;
  padding: 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  line-height: 1.25;
  letter-spacing: .2px;
}

/* 图标配色：四色纯色底 + 白色图标，循环使用 */
.module-icon { color: #fff; }

.mi-blue   { background: #1A6AFF; }
.mi-green  { background: #2E86FF; }
.mi-orange { background: #5AA4FF; }
.mi-purple { background: #1B63E0; }

/* ==========================================================
   咨询动态（单条滚动播放）
   ========================================================== */
.news-thumb {
  flex: 0 0 86px;
  width: 86px; height: 62px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.news-thumb svg { width: 30px; height: 30px; }

.thumb-1 { background: linear-gradient(135deg, #1A6AFF, #4a8bf5); color: #fff; }
.thumb-2 { background: linear-gradient(135deg, #2E86FF, #7CC0FF); color: #fff; }
.thumb-3 { background: linear-gradient(135deg, #1B63E0, #6FB6FF); color: #fff; }
.thumb-4 { background: linear-gradient(135deg, #0E3E96, #5AA4FF); color: #fff; }

.news-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 62px;
}

.news-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.news-date {
  font-size: 11px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.news-tag {
  font-size: 10px;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1.5px 7px;
  border-radius: 4px;
}

.news-flash {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: transform .16s, opacity .16s;
}
.news-flash:active { transform: scale(.98); opacity: .85; }

.news-flash .news-thumb {
  flex: 0 0 78px;
  width: 78px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
}
.news-flash .news-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.news-flash .news-body { min-height: 56px; }

.news-flash .news-title { font-size: 13px; }

.news-arrow {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  color: var(--c-text-3);
}

/* 纵向轮换动画 */
.news-flash.is-out { animation: nfOut .32s ease forwards; }
.news-flash.is-in  { animation: nfIn .32s ease; }

@keyframes nfOut {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes nfIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   优秀项目展示（热门专业方向）
   ========================================================== */
.major-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 10px;
}

.major-item { transition: transform .16s; }
.major-item:active { transform: scale(.97); }

.major-cover {
  height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  background: var(--c-primary-soft);
}
.major-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.major-item:active .major-cover img { transform: scale(1.05); }

.major-name {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  text-align: center;
  letter-spacing: .5px;
  padding-bottom: 2px;
}

/* ==========================================================
   底部功能键 TabBar
   ========================================================== */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 14px rgba(18, 55, 110, .06);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--c-text-3);
  transition: color .2s;
}

.tab-icon {
  width: 23px; height: 23px;
  transition: transform .22s;
}

.tab-text {
  font-size: 10.5px;
  letter-spacing: .3px;
}

.tab-item.is-active { color: var(--c-primary); }
.tab-item.is-active .tab-icon { transform: translateY(-1px) scale(1.06); }
.tab-item:active .tab-icon { transform: scale(.9); }

/* ==========================================================
   子页面通用样式
   ========================================================== */
.page-wrap { padding: 14px 12px 0; }

.page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--c-text);
}

.page-sub {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--c-text-3);
}

/* --- 招聘列表 --- */
.job-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.job-item {
  background: var(--c-card);
  border-radius: var(--r-md);
  padding: 13px 14px;
  box-shadow: var(--sd-card);
}

.job-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.job-name { font-size: 15px; font-weight: 700; color: var(--c-text); }

.job-salary {
  font-size: 13.5px;
  font-weight: 700;
  color: #e0356f;
  white-space: nowrap;
}

.job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.job-tags span {
  font-size: 10.5px;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

.job-desc {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-2);
}

.empty-tip {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--c-text-3);
}

/* --- 服务九宫 --- */
.serv-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.serv-card {
  background: var(--c-card);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sd-card);
}

.serv-card h3 {
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
}

.serv-card p {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--c-text-2);
}

/* --- 我的 --- */
.mine-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(120deg, var(--c-primary-d), var(--c-primary-l));
  border-radius: var(--r-lg);
  padding: 16px;
  color: #fff;
  box-shadow: var(--sd-float);
}

.mine-avatar {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  padding: 9px;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.mine-info { flex: 1; min-width: 0; }
.mine-info h2 { font-size: 17px; font-weight: 700; }
.mine-info p  { margin-top: 3px; font-size: 11.5px; color: rgba(255, 255, 255, .8); }

.mine-login {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary-d);
  background: #fff;
  padding: 7px 13px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.mine-login:active { transform: scale(.95); }

.mine-stats {
  display: flex;
  margin-top: 12px;
  background: var(--c-card);
  border-radius: var(--r-md);
  padding: 14px 0;
  box-shadow: var(--sd-card);
}

.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-item + .stat-item { border-left: 1px solid var(--c-line); }
.stat-item strong { font-size: 17px; font-weight: 700; color: var(--c-primary); }
.stat-item span   { font-size: 11px; color: var(--c-text-3); }

.mine-menu {
  margin-top: 12px;
  background: var(--c-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sd-card);
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  font-size: 13.5px;
  color: var(--c-text);
}
.menu-row + .menu-row { border-top: 1px solid var(--c-line); }
.menu-row:active { background: #f7f9fd; }

.menu-row .arrow {
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--c-text-3);
  border-bottom: 1.6px solid var(--c-text-3);
  transform: rotate(-45deg);
}

/* --- 详情页（模块 / 项目） --- */
.detail-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sd-card);
}

.detail-hero .module-icon { width: 54px; height: 54px; flex: 0 0 54px; padding: 12px; border-radius: 17px; }

.detail-title { font-size: 18px; font-weight: 700; color: var(--c-text); letter-spacing: .3px; }
.detail-sub   { margin-top: 4px; font-size: 12px; color: var(--c-text-3); }

.detail-body {
  margin-top: 12px;
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sd-card);
}

.detail-h2 {
  position: relative;
  padding-left: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 9px;
}
.detail-h2:not(:first-child) { margin-top: 18px; }

.detail-h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  border-radius: 3px;
  background: var(--c-primary);
}

.detail-p {
  font-size: 13px;
  line-height: 1.78;
  color: var(--c-text-2);
  text-align: justify;
}

.detail-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--c-text-2);
}

.detail-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary-l);
}

.detail-cta {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.btn-primary, .btn-ghost {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .16s;
}
.btn-primary:active, .btn-ghost:active { transform: scale(.97); }

.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--c-primary-d), var(--c-primary-l));
  box-shadow: 0 4px 14px rgba(18, 55, 110, .3);
}

.btn-ghost {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

/* --- 项目详情 --- */
.proj-cover {
  position: relative;
  height: 148px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--sd-float);
}

.proj-cover-text {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.proj-badge {
  position: absolute;
  left: 12px; top: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-primary-d);
  background: rgba(255, 255, 255, .93);
  padding: 3px 10px;
  border-radius: 6px;
}

.proj-stats {
  display: flex;
  margin-top: 13px;
  background: var(--c-card);
  border-radius: var(--r-md);
  padding: 14px 0;
  box-shadow: var(--sd-card);
}

/* --- 专业详情页 --- */
.major-hero {
  height: 168px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-primary-soft);
  box-shadow: var(--sd-float);
}

.major-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 资讯详情 --- */
.article {
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sd-card);
}

.article-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-text);
  letter-spacing: .3px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--c-line);
  font-size: 11.5px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.article-source {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1.5px 8px;
  border-radius: 4px;
}

.article-cover {
  height: 132px;
  border-radius: var(--r-md);
  margin-top: 14px;
}

.article-content { margin-top: 4px; }

.article-content p {
  font-size: 13.5px;
  line-height: 1.85;
  color: #3c465c;
  margin-top: 13px;
  text-align: justify;
  text-indent: 2em;
}

/* ==========================================================
   模块详情页：子分类宫格 + 课程列表
   ========================================================== */
/* 顶部标头：整幅图片头部（展示形式对齐首页 .hp-hero）
   —— 图片铺满整块标头、底边圆角下沉，顶部栏（返回 + 品牌）叠加在图片之上，
      不再是「独立蓝色条 + 下面另起一块图」的分离结构。 */
.module-hero {
  position: relative;
  height: 198px;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  background: linear-gradient(160deg, #2b76ee 0%, var(--c-primary) 60%, #1d63d8 100%);
}

.module-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 顶部压暗（保证白色文字可读）+ 底部与页面背景柔和衔接 */
.module-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background:
    linear-gradient(180deg, rgba(8, 28, 72, .5) 0%, rgba(8, 28, 72, .14) 32%, rgba(8, 28, 72, 0) 58%),
    linear-gradient(180deg, rgba(238, 243, 250, 0) 80%, var(--c-bg) 100%);
  pointer-events: none;
}

/* 顶部栏：叠加在图片上（返回键 + 品牌），布局与首页 brand 一致 */
.module-hero-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(var(--safe-top) + 10px) 14px 0;
}

/* 图片上的返回键：半透明毛玻璃圆钮 */
.mh-back {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .18s;
}
.mh-back svg { width: 19px; height: 19px; }
.mh-back:active { background: rgba(255, 255, 255, .34); }

/* 图片上的品牌字：与首页白字一脉相承，再加一层投影保证浅色图上也清晰 */
.module-hero .brand-text strong { text-shadow: 0 1px 8px rgba(8, 24, 66, .55); }
.module-hero .brand-text em { color: rgba(255, 255, 255, .82); }
.module-hero .brand-logo { box-shadow: 0 2px 10px rgba(8, 24, 66, .42); }

/* 滚动后浮现的吸顶条：图片滚出视野后仍能返回 */
.sub-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  max-width: 750px;
  margin: 0 auto;
  padding-top: var(--safe-top);
  background: linear-gradient(160deg, #2b76ee 0%, var(--c-primary) 60%, #1d63d8 100%);
  box-shadow: 0 2px 14px rgba(14, 62, 150, .28);
  transform: translateY(-102%);
  transition: transform .26s ease;
  will-change: transform;
}
.sub-sticky.is-on { transform: translateY(0); }
.sub-sticky-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.sub-sticky .mh-back {
  background: rgba(255, 255, 255, .16);
  width: 30px; height: 30px; flex-basis: 30px;
}
.sub-sticky .mh-back svg { width: 17px; height: 17px; }
.sub-sticky-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-section { margin-top: 0; }

/* 分类选中态（按方向筛选课程时） */
.cat-item.is-active .module-icon {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(18, 55, 110, .3);
  outline: 2px solid rgba(18, 55, 110, .35);
  outline-offset: 2px;
}
.cat-item.is-active .module-name { color: var(--c-primary); }
.cat-item .module-icon { transition: transform .18s, box-shadow .18s; }

/* 课程列表（主流教育网站风格：图标 + 名称 + 副标题） */
.course-section { margin-top: 12px; }

.course-list { padding-bottom: 8px; }

.course-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  transition: opacity .16s;
}
.course-item:active { opacity: .66; }
.course-item + .course-item { border-top: 1px solid var(--c-line); }

.course-item .module-icon {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  padding: 11px;
  border-radius: 14px;
}

.course-body {
  flex: 1;
  min-width: 0;
}

.course-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-meta {
  display: inline-block;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1.5px 8px;
  border-radius: 4px;
}

.course-arrow {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  color: var(--c-text-3);
}

/* ==========================================================
   课程详情页（三级页面）
   ========================================================== */
/* 视频播放器 */
.video-section {
  position: relative;
  background: #0a1526;
}

.video-player {
  display: block;
  width: 100%;
  max-height: 240px;
  background: #0a1526;
}

/* 课程信息卡 */
.course-info { padding-bottom: 12px; }

.course-info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.course-info-head .module-icon {
  width: 50px; height: 50px;
  flex: 0 0 50px;
  padding: 11px;
  border-radius: 15px;
}

.course-info-body { flex: 1; min-width: 0; }

.course-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
}

.course-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.course-actions {
  display: flex;
  gap: 10px;
  margin-top: 13px;
}

.course-actions .btn-primary,
.course-actions .btn-ghost { height: 40px; font-size: 13px; }

/* 课程列表项点击态 */
.course-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.course-link .course-body { flex: 1; min-width: 0; }

/* 章节小节列表：按顺序排列，点开为视频 + 文本 */
.section-list { padding-bottom: 8px; }

.sec-item + .sec-item { border-top: 1px solid var(--c-line); }

.sec-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
}

.sec-no {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background .18s, color .18s;
}
.sec-item.is-open .sec-no {
  background: var(--c-primary);
  color: #fff;
}

.sec-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-arrow {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  color: var(--c-text-3);
  transition: transform .25s;
}
.sec-item.is-open .sec-arrow { transform: rotate(180deg); }

/* 小节内容：视频在上，文本在下 */
.sec-body { display: none; padding: 0 0 15px; }
.sec-item.is-open .sec-body { display: block; }

.sec-video {
  display: block;
  width: 100%;
  max-height: 200px;
  border-radius: var(--r-sm);
  background: #0a1526;
}

/* 后台上传的音频课时 */
.sec-audio {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-bg);
}

/* 课程在线人数（后台可编辑的文字+数字） */
.pch-online {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--c-text-3);
}

.pch-online::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #12a05a;
  vertical-align: 1px;
}

/* 后台上传的图文课时（文本 + 图片） */
.sec-pics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-pic {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
  background: var(--c-bg);
}

.sec-dur {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: var(--c-text-3) !important;
  background: transparent !important;
  padding: 0 !important;
}

.sec-text { margin-top: 10px; }

.sec-text p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-2);
  text-align: justify;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}

/* 底部学习栏 */
.study-bar {
  position: fixed;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  left: 0; right: 0;
  z-index: 99;
  max-width: 750px;
  margin: 0 auto;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}

.study-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 600;
}
.study-btn.primary {
  color: #fff;
  background: linear-gradient(120deg, var(--c-primary-d), var(--c-primary-l));
  box-shadow: 0 4px 14px rgba(18, 55, 110, .3);
}
.study-btn:active { transform: scale(.98); }

/* 课程页底部留白（学习栏 + tabbar） */
.has-study-bar .main-bottom-space {
  height: calc(var(--tabbar-h) + 66px + var(--safe-bottom));
}

/* ==========================================================
   个人中心：会员卡片
   ========================================================== */
.vip-card {
  position: relative;
  margin-top: 12px;
  border-radius: var(--r-lg);
  padding: 15px;
  color: #fff;
  background: linear-gradient(125deg, #3a3320 0%, #6b5620 45%, #a8842e 100%);
  box-shadow: 0 6px 20px rgba(168, 132, 46, .35);
  overflow: hidden;
}

.vip-card::after {
  content: "";
  position: absolute;
  right: -34px; top: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 130, .28), rgba(255, 216, 130, 0) 70%);
}

.vip-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.vip-card-icon {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255, 216, 130, .18);
  color: #ffd982;
}

.vip-card-info h3 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 1px;
}

.vip-card-info p {
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .78);
}

/* 身份标识：代理商会员 / 普通会员（个人中心一眼可辨） */
.vip-lv-tag {
  display: inline-block;
  margin: 5px 0 0 !important;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .4px;
}
.vip-lv-tag.is-agent {
  background: linear-gradient(135deg, #ffd76a, #ffab1f);
  color: #5a3a00 !important;
  box-shadow: 0 2px 8px rgba(255, 171, 31, .45);
}
.vip-lv-tag.is-normal {
  background: rgba(255, 255, 255, .22);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35);
}

.vip-card-perks {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.vip-card-perks li {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}

.vip-card-btn {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #6b5620;
  background: linear-gradient(120deg, #ffe3a3, #ffd15c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.vip-card-btn:active { transform: scale(.98); }

/* 菜单内小注释 */
.menu-note {
  font-style: normal;
  font-size: 10.5px;
  color: #a8842e;
  background: #fff6e2;
  padding: 1.5px 8px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ==========================================================
   课程页：按月课程月份选择条
   ========================================================== */
.month-bar {
  margin: -2px -6px 12px;
}

.month-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 6px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.month-scroll::-webkit-scrollbar { display: none; }

.month-chip {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-bg);
  padding: 7px 15px;
  border-radius: 18px;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}

.month-chip.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--c-primary-d), var(--c-primary-l));
  box-shadow: 0 3px 10px rgba(18, 55, 110, .28);
}

/* 小节已学标记 */
.sec-done {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: #12a05a;
  background: #e8f7ee;
  padding: 2px 8px;
  border-radius: 4px;
}

.sec-item.is-learned .sec-no {
  background: #e8f7ee;
  color: #12a05a;
}

/* ==========================================================
   会员弹窗
   ========================================================== */
.vip-mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 18, 36, .55);
  backdrop-filter: blur(3px);
}
.vip-mask.is-show { display: flex; }

.vip-modal {
  position: relative;
  width: 100%;
  max-width: 750px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(20px + var(--safe-bottom));
  animation: vipUp .28s cubic-bezier(.4, 0, .2, 1);
}

@keyframes vipUp { from { transform: translateY(40px); opacity: 0; } }

.vip-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--c-text-3);
  border-radius: 50%;
}
.vip-close:active { background: var(--c-bg); }

.vip-crown {
  width: 52px; height: 52px;
  margin: 0 auto;
  color: var(--c-accent);
  filter: drop-shadow(0 3px 8px rgba(255, 176, 32, .45));
}

.vip-title {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
}

.vip-desc {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
  color: var(--c-text-3);
}

.vip-perks {
  margin: 14px auto 0;
  max-width: 280px;
}

.vip-perks li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--c-text-2);
}

.vip-perks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 10px; height: 6px;
  border-left: 2px solid #12a05a;
  border-bottom: 2px solid #12a05a;
  transform: rotate(-45deg);
}

.vip-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}

.vip-price { font-size: 34px; font-weight: 800; color: #e0356f; }
.vip-price i { font-style: normal; font-size: 18px; }

.vip-unit { font-size: 13px; color: var(--c-text-3); }

.vip-tip {
  margin-left: 10px;
  font-size: 11px;
  color: #e0356f;
  background: #ffeef1;
  padding: 3px 9px;
  border-radius: 4px;
}

.vip-btn {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 15px;
  border-radius: 23px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, #f0744a, #e0356f);
  box-shadow: 0 5px 16px rgba(224, 53, 111, .32);
}
.vip-btn:active { transform: scale(.98); }

.vip-note {
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px;
  color: var(--c-text-3);
}

/* ==========================================================
   试看门槛：收费引导层 / 试看提示条 / 列表锁角标
   ========================================================== */
.pay-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 18, 36, .55);
  backdrop-filter: blur(3px);
}
.pay-mask.is-show { display: flex; }

.pay-modal {
  position: relative;
  width: 100%;
  max-width: 750px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(20px + var(--safe-bottom));
  animation: payUp .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes payUp { from { transform: translateY(40px); opacity: 0; } }

.pay-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--c-text-3);
  border-radius: 50%;
}
.pay-close:active { background: var(--c-bg); }

.pay-lock {
  width: 50px; height: 50px;
  margin: 0 auto;
  color: var(--c-primary);
  opacity: .9;
}
.pay-lock svg { width: 100%; height: 100%; display: block; }

.pay-title {
  margin-top: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
}
.pay-desc {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-2);
}
.pay-desc strong { color: var(--c-primary); font-weight: 700; }

.pay-course {
  margin: 12px auto 0;
  padding: 8px 12px;
  max-width: 320px;
  text-align: center;
  font-size: 12.5px;
  color: var(--c-primary);
  background: var(--c-primary-light);
  border-radius: 8px;
}

.pay-perks {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.pay-perks li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: 13px;
  color: var(--c-text-2);
}
.pay-perks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.pay-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.pay-price { font-size: 32px; font-weight: 800; color: #e0356f; }
.pay-price i { font-style: normal; font-size: 17px; }
.pay-unit { font-size: 13px; color: var(--c-text-3); }
.pay-tip { margin-left: 4px; font-size: 11.5px; color: var(--c-text-3); }

.pay-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--c-primary);
  border: 0;
  border-radius: 12px;
}
.pay-btn:active { transform: scale(.98); }

.pay-later {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 0;
  font-size: 13.5px;
  color: var(--c-text-3);
  background: transparent;
  border: 0;
}

/* 试看提示条 */
.try-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: #fff7e8;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  font-size: 12.5px;
  color: #8a5a10;
}
.try-banner.is-open {
  background: var(--c-primary-light);
  border-color: #cddcfb;
  color: var(--c-primary);
}
.try-tag {
  flex: none;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #f0a13c;
  border-radius: 5px;
}
.try-banner.is-open .try-tag { background: var(--c-primary); }
.try-text { line-height: 1.6; }
.try-text strong { font-weight: 700; }

/* 列表中需开通的项 */
.sec-lock {
  flex: none;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #e0356f;
  background: #fdeef3;
  border-radius: 5px;
}
.sec-item.is-locked .sec-title { color: var(--c-text-3); }

/* 开通课程页 */
.unlock-hero {
  padding: 18px 16px;
  background: linear-gradient(160deg, #2f6ce0 0%, #1A6AFF 100%);
  color: #fff;
}
.unlock-hero h2 { margin: 0; font-size: 19px; font-weight: 700; }
.unlock-hero p { margin: 8px 0 0; font-size: 13px; opacity: .88; line-height: 1.7; }
.unlock-course {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .16);
  border-radius: 10px;
  font-size: 13px;
}

/* 开通方案选择 */
.pay-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  cursor: pointer;
}
.pay-plan.is-sel {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
}
.pay-plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-plan-main { flex: 1; min-width: 0; }
.pay-plan-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.pay-plan-desc { display: block; margin-top: 3px; font-size: 12px; color: var(--c-text-3); }
.pay-plan-price { flex: none; font-size: 22px; font-weight: 800; color: #e0356f; }
.pay-plan-price i { font-style: normal; font-size: 13px; }

/* ==========================================================
   大屏：以手机版尺寸画框居中展示
   ========================================================== */
@media (min-width: 600px) {
  body {
    min-height: 100vh;
    background: linear-gradient(160deg, #dfe8f7 0%, #c6d5f0 100%);
    border-radius: 0;
    box-shadow: none;
  }

  /* 手机画框：带圆角边框 + 顶部听筒，尺寸符合手机版比例 */
  .phone-frame {
    position: relative;
    width: 390px;
    min-height: calc(100vh - 48px);
    margin: 24px auto;
    background: var(--c-bg);
    border-radius: 38px;
    border: 10px solid #17233a;
    box-shadow: 0 24px 60px rgba(23, 35, 58, .35), inset 0 0 0 2px #3c4a66;
    overflow: hidden;
    /* 关键：transform 使内部 fixed 元素以画框为定位基准，
       标头/底部导航严格收在画框内，不超出展示空间 */
    transform: translateZ(0);
  }

  .phone-frame::before {
    content: "";
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 22px;
    border-radius: 12px;
    background: #17233a;
    z-index: 1000;
    pointer-events: none;
  }

  /* 固定元素：宽度=画框内宽，顶部贴画框上沿、底部贴画框下沿 */
  .phone-frame .app-header--fixed,
  .phone-frame .tabbar,
  .phone-frame .study-bar {
    left: 0;
    right: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }

  /* 弹窗在画框模式下同样收窄居中，与画框视觉协调 */
  .vip-modal { max-width: 430px; margin: 0 auto; border-radius: 20px 20px 0 0; }
  @media (min-width: 600px) and (min-height: 700px) {
    .vip-mask { display: flex; align-items: flex-end; }
  }
}

/* ==========================================================
   小屏适配
   ========================================================== */
@media (max-width: 340px) {
  .module-icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; }
  .module-name { font-size: 10.5px; }
  .slide-title  { font-size: 19px; }
  .swiper-slide { height: 158px; }
  .news-thumb   { flex-basis: 74px; width: 74px; height: 56px; }
  .news-body    { min-height: 56px; }
}

/* 大屏（平板）居中收窄留白 */
@media (min-width: 750px) {
  body { box-shadow: 0 0 40px rgba(18, 55, 110, .08); }
}

/* ==========================================================
   认证类课程详情页（pro-course.html）
   八大功能：专业介绍/考评介绍/学习重点/思维导图/
             记忆卡片/章节题库/在线测评/智能问答
   ========================================================== */

/* 课程信息头 */
.pc-info { display: flex; align-items: center; gap: 14px; }
.pc-info .module-icon { width: 54px; height: 54px; flex: 0 0 auto; }
.pc-info-body { flex: 1; min-width: 0; }
.pc-name { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--c-text); }
.pc-sub  { margin: 0 0 8px; font-size: 12px; color: var(--c-text-3); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-tag  { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
           background: #fff4de; color: #b07800; }

/* 返回链接 */
.pc-back { display: inline-block; margin: 0 16px 12px; padding: 8px 14px;
           background: var(--c-card); border-radius: 999px; font-size: 13px;
           font-weight: 600; color: var(--c-primary); box-shadow: 0 2px 8px rgba(18,55,110,.08); }

/* 图文混排 */
.pc-rich { font-size: 14px; line-height: 1.9; color: var(--c-text-2); }
.pc-rich p { margin: 0 0 12px; }
.pc-rich strong { color: var(--c-text); }
.pc-figure { margin: 16px 0; }
.pc-figbox { background: var(--c-card); border-radius: 14px; padding: 10px; overflow: hidden; }
.pc-figbox svg { display: block; width: 100%; height: auto; }
.pc-figcap { margin-top: 6px; text-align: center; font-size: 11px; color: var(--c-text-3); }

/* 阅读器（学习重点 / 思维导图） */
.pc-pageno { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c-text-3); }
.pv-wrap { position: relative; margin: 4px 0 14px; border-radius: 14px;
           background: var(--c-card); overflow: auto;
           box-shadow: 0 2px 10px rgba(18,55,110,.06); }
.pv-page { padding: 16px; font-size: 14px; line-height: 1.9; color: var(--c-text-2);
           transform-origin: top center; transition: transform .18s ease; }
.pv-page strong { color: var(--c-text); }
.mm-wrap { overflow: hidden; }
.mm-page { padding: 6px; }
.mm-svg { display: block; width: 100%; height: auto; }
.pv-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pv-btn { min-width: 44px; padding: 8px 14px; border: none; border-radius: 10px;
          background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700; }
.pv-btn:disabled { opacity: .35; }
.pv-scale { min-width: 44px; text-align: center; font-size: 12px; font-weight: 700;
            color: var(--c-text-3); }
.pv-gap { flex: 1; }

/* 章节列表 */
.ch-list { margin: 0; padding: 0; list-style: none; }
.ch-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px;
           background: var(--c-card); border-radius: 12px; margin-bottom: 10px;
           cursor: pointer; transition: transform .12s ease; }
.ch-item:active { transform: scale(.98); }
.ch-no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
         background: #e8f0fe; color: var(--c-primary); font-size: 14px; font-weight: 800;
           display: flex; align-items: center; justify-content: center; }
.ch-body { flex: 1; min-width: 0; }
.ch-body h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.ch-body p  { margin: 0; font-size: 12px; color: var(--c-text-3); }

/* 记忆卡片（3D 翻转） */
.fc-wrap { perspective: 1000px; margin: 10px 0 14px; }
.fc-card { position: relative; width: 100%; min-height: 210px;
           transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,.1,.2,1);
           cursor: pointer; }
.fc-card.is-flip { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden;
           border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 14px; text-align: center; }
.fc-front { background: linear-gradient(135deg, #1A6AFF, #5AA4FF); color: #fff; }
.fc-back  { background: linear-gradient(135deg, #1B63E0, #5AA4FF); color: #fff;
            transform: rotateY(180deg); }
.fc-face p { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.7; }
.fc-label { position: absolute; top: 12px; left: 14px; padding: 2px 10px;
            border-radius: 999px; font-size: 11px; font-weight: 800;
            background: rgba(255,255,255,.22); }
.fc-hint { font-size: 11px; opacity: .75; }

/* 题库 / 测评 */
.qx-rule { margin: -6px 0 12px; font-size: 12px; color: var(--c-text-3); }
.q-card { background: var(--c-card); border-radius: 14px; padding: 16px 14px;
          margin-bottom: 12px; box-shadow: 0 2px 8px rgba(18,55,110,.05); }
.q-card.q-right { outline: 2px solid #12a05a; }
.q-card.q-wrong { outline: 2px solid #e5484d; }
.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-type { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; }
.q-type--single { background: #1A6AFF; }
.q-type--multi  { background: #2E86FF; }
.q-type--judge { background: #1B63E0; }
.q-no { font-size: 12px; color: var(--c-text-3); }
.q-text { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--c-text);
          line-height: 1.7; }
.q-opts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.qo-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
           border: 1.5px solid #e3e9f2; border-radius: 10px; font-size: 13.5px;
           color: var(--c-text-2); cursor: pointer; transition: all .12s ease; }
.qo-item.is-sel { border-color: var(--c-primary); background: #eef4fe; color: var(--c-primary); font-weight: 700; }
.qo-item.is-ans { border-color: #12a05a; background: #e7f7ee; color: #0d7a45; }
.qo-item.is-wrong { border-color: #e5484d; background: #fdecec; color: #c3353a; }
.qo-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
          border: 1.5px solid currentColor; font-size: 11px; font-weight: 800;
          display: flex; align-items: center; justify-content: center; }
.q-submit { margin-top: 12px; padding: 8px 22px; border: none; border-radius: 10px;
           background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700; }
.q-explain { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
             font-size: 12.5px; line-height: 1.7; background: #f5f7fb; color: var(--c-text-2); }
.q-explain strong { color: var(--c-text); display: block; margin-bottom: 3px; }

/* 成绩单 */
.qx-score-card { border-radius: 18px; padding: 30px 20px; text-align: center;
                 margin-bottom: 14px; color: #fff; }
.qx-score-card.is-pass { background: linear-gradient(135deg, #12a05a, #2ec27e); }
.qx-score-card.is-fail { background: linear-gradient(135deg, #e5484d, #f0715a); }
.qx-score-num { font-size: 52px; font-weight: 900; line-height: 1.1; }
.qx-score-num small { font-size: 16px; font-weight: 600; opacity: .8; }
.qx-score-state { margin-top: 6px; font-size: 16px; font-weight: 800; }
.qx-score-detail { margin-top: 10px; font-size: 12.5px; opacity: .85; }

/* 智能问答 */
.qa-list { margin-bottom: 6px; }
.qa-item { background: var(--c-card); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.qa-q { display: flex; align-items: center; gap: 8px; padding: 13px 12px; font-size: 14px;
        font-weight: 700; color: var(--c-text); cursor: pointer; }
.qa-arrow { margin-left: auto; width: 16px; height: 16px; flex: 0 0 auto;
            color: var(--c-text-3); transition: transform .2s ease; }
.qa-item.is-open .qa-arrow { transform: rotate(180deg); }
.qa-a { display: none; padding: 0 12px 13px 12px; font-size: 13px; line-height: 1.8;
        color: var(--c-text-2); }
.qa-item.is-open .qa-a { display: flex; }
.qa-badge { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; font-size: 11px;
            font-weight: 800; background: #e8f0fe; color: var(--c-primary);
            display: inline-flex; align-items: center; justify-content: center; }
.qa-badge--a { background: #e7f7ee; color: #12a05a; }
.qa-form, .qa-mine { margin-top: 14px; }
.qa-form-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.qa-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #e3e9f2;
                     border-radius: 12px; padding: 12px; font-size: 13px; resize: none;
                     background: var(--c-card); color: var(--c-text); }
.qa-form textarea:focus { outline: none; border-color: var(--c-primary); }
.qa-submit-btn { margin-top: 10px; }

.qa-text { flex: 1; }

/* ==========================================================
   统一头部返回键（绝对定位在最左侧，不挤占 LOGO）
   ========================================================== */
.header-back { position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
               width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
               background: rgba(255,255,255,.18); color: #fff;
               display: inline-flex; align-items: center; justify-content: center;
               cursor: pointer; z-index: 2; }
.header-back svg { width: 19px; height: 19px; }
.header-back:active { background: rgba(255,255,255,.32); }
/* 带返回键的头部：内容整体右移，LOGO 保持原有视觉位置 */
.header-inner:has(.header-back) { padding-left: 50px; }

/* ==========================================================
   缴费流程（三步弹窗） + 全站统一缴费通道
   ========================================================== */
.vip-step { animation: vipStepIn .22s ease; }
@keyframes vipStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 订单确认 */
.vip-order { margin: 6px 0 14px; border-radius: 12px; background: #f5f7fb; padding: 4px 14px; }
.vip-order-row { display: flex; align-items: center; justify-content: space-between;
                 padding: 10px 0; font-size: 13px; color: #5a6b85;
                 border-bottom: 1px solid #e8edf5; }
.vip-order-row:last-child { border-bottom: none; }
.vip-order-row strong { color: var(--c-text); font-weight: 700; }
.vip-order-price { color: #e6822a !important; font-size: 17px !important; }
.vip-order-price i { font-style: normal; font-size: 12px; margin-right: 1px; }
.vip-pay-title { margin: 4px 0 8px; font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.vip-pay-list { display: grid; gap: 8px; margin-bottom: 14px; }
.vip-pay-item { display: flex; align-items: center; gap: 10px; padding: 12px;
                border: 1.5px solid #e3e9f2; border-radius: 12px; font-size: 14px;
                font-weight: 600; color: var(--c-text); cursor: pointer; }
.vip-pay-item.is-sel { border-color: var(--c-primary); background: #eef4fe; }
.vip-pay-item input { display: none; }
.vip-pay-ic { width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 13px;
              font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vip-pay-ic--wx { background: #09bb07; }
.vip-pay-ic--ali { background: #1677ff; }
.vip-radio { margin-left: auto; width: 17px; height: 17px; border-radius: 50%;
             border: 2px solid #c8d2e3; }
.vip-pay-item.is-sel .vip-radio { border-color: var(--c-primary);
             background: radial-gradient(circle at center, var(--c-primary) 0 4.5px, #fff 5px); }
.vip-back-link { display: block; margin: 10px auto 0; border: none; background: none;
                 color: #5a6b85; font-size: 13px; }

/* 支付中 / 成功 */
.vip-paying { text-align: center; padding: 26px 0; }
.vip-spin { display: inline-block; width: 36px; height: 36px; border-radius: 50%;
            border: 3.5px solid #dbe6f8; border-top-color: var(--c-primary);
            animation: vipSpin .8s linear infinite; }
@keyframes vipSpin { to { transform: rotate(360deg); } }
.vip-paying p { margin: 14px 0 0; font-size: 13.5px; color: #5a6b85; }
.vip-ok { text-align: center; }
.vip-crown--ok { color: #ffb020; }

/* 全站统一缴费通道按钮 */
.vip-channel { display: block; width: 100%; padding: 11px 14px; border: none;
               border-radius: 12px; cursor: pointer;
               background: linear-gradient(135deg, #f5c15c, #e8a02c);
               color: #5c3a00; font-size: 13.5px; font-weight: 800;
               box-shadow: 0 3px 10px rgba(232,160,44,.35); }
.vip-channel:active { transform: scale(.985); }
.vip-channel.is-open { background: linear-gradient(135deg, #bfe8cd, #8fd8a8); color: #0d5c30; }

/* ==========================================================
   模块标头（module.html）：悬浮压在展示图下沿的模块信息卡
   ========================================================== */
.mod-head { position: relative; z-index: 3;
            margin: -34px 12px 12px; padding: 15px 16px;
            background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
            border: 1px solid #e4ebf6;
            border-radius: 16px;
            box-shadow: 0 6px 20px rgba(18, 55, 110, .12); }
.mod-head-row { display: flex; align-items: center; gap: 13px; }
.mod-head .module-icon { width: 52px; height: 52px; flex: 0 0 auto;
                         border-radius: 14px; box-shadow: 0 4px 12px rgba(18, 55, 110, .25); }
.mod-head-body { flex: 1; min-width: 0; }
.mh-title { margin: 0 0 4px; font-size: 19px; font-weight: 900; color: var(--c-text);
            letter-spacing: .5px; }
.mh-sub { margin: 0; font-size: 12.5px; color: var(--c-text-3); overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.mh-stats { display: flex; align-items: center; gap: 7px; margin-top: 13px;
            padding-top: 11px; border-top: 1px dashed #e4ebf6;
            font-size: 12px; color: var(--c-text-2); }
.mh-stat strong { color: var(--c-primary); font-size: 15px; font-weight: 900; }
.mh-dot { width: 3px; height: 3px; border-radius: 50%; background: #c3cfe3; }
.mod-head + .cat-section { margin-top: 12px; }

/* ==========================================================
   课程内容八大功能（pro-course.html）：横排卡片
   图标在左 · 名称在右 · 箭头靠最右，两列网格
   ========================================================== */
.fn-grid { display: grid; grid-template-columns: repeat(2, 1fr);
           gap: 10px; padding-bottom: 10px; }
.fn-item { display: flex; align-items: center; gap: 10px;
           padding: 12px 11px; background: #f6f8fc;
           border: 1px solid #e7edf6; border-radius: 13px;
           transition: transform .14s ease, background .14s ease; }
.fn-item:active { transform: scale(.97); background: #eef4fe; }
.fn-item .module-icon { width: 38px; height: 38px; flex: 0 0 38px;
                        padding: 8px; border-radius: 11px; }
.fn-item .module-icon svg { width: 21px; height: 21px; }
.fn-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800;
           color: var(--c-text); letter-spacing: .3px; }
.fn-item .course-arrow { flex: 0 0 auto; width: 14px; height: 14px; color: #b9c5d8; }

@media (max-width: 359px) {
  .fn-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   认证课程内容标头（pro-course.html）
   左图标 · 右上课程名 / 下说明 · 底部会员开通按钮
   ========================================================== */
.pch { padding-bottom: 14px; }
.pch-row { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.pch .course-icon.module-icon { width: 56px; height: 56px; flex: 0 0 56px;
                                padding: 12px; border-radius: 15px;
                                box-shadow: 0 4px 12px rgba(18, 55, 110, .22); }
.pch-body { flex: 1; min-width: 0; }
.pch-name { margin: 0 0 5px; font-size: 18px; font-weight: 900; color: var(--c-text);
            line-height: 1.35; }
.pch-sub { margin: 0; font-size: 12px; color: var(--c-text-3); line-height: 1.6;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; }

/* 专业介绍：直接展示在课程内容八宫格下方 */
.pc-direct { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--c-line); }
.pc-direct .section-head { margin-bottom: 9px; }

/* ==========================================================
   移动端全面适配增强
   ========================================================== */
/* 动态视口高度：解决移动端地址栏收起/展开导致的跳动 */
body { min-height: 100dvh; }
.phone-frame { min-height: calc(100dvh - 48px); }

/* 中小屏手机（≤400px）：收紧留白，内容更饱满 */
@media (max-width: 400px) {
  .card-section { margin: 10px 10px 0; padding: 12px 12px 5px; }
  .hero { height: 184px; }
  .module-hero { height: 178px; }
  .module-grid { row-gap: 12px; }
  .module-icon { width: 44px; height: 44px; }
  .section-title { font-size: 15px; }
  .mod-head { margin: -30px 10px 10px; padding: 13px 14px; }
  .mh-title { font-size: 17.5px; }
  .pch-name { font-size: 17px; }
  .pch .course-icon.module-icon { width: 52px; height: 52px; flex-basis: 52px; }
  .course-item { gap: 10px; padding: 12px 0; }
  .course-item .module-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .vip-channel { font-size: 12.5px; }
  .q-text { font-size: 14px; }
  .qo-item { padding: 9px 10px; font-size: 13px; }
}

/* 超小屏（≤340px）已有基础规则，此处补充新组件 */
@media (max-width: 340px) {
  .fn-grid { gap: 8px; }
  .pv-btn { min-width: 40px; padding: 7px 12px; font-size: 12px; }
  .vip-price-row .vip-price { font-size: 34px; }
}

/* 触控目标：可点击元素至少 40px 高，便于手指操作 */
.tab-item { min-height: 50px; }
.qo-item { min-height: 40px; }
.fn-item { min-height: 54px; }
.ch-item { min-height: 56px; }
.header-back { width: 36px; height: 36px; }
.vip-pay-item { min-height: 50px; }

/* 大屏手机 / 小平板（481-599px）：保持 100% 宽度自然铺满，无需额外处理 */

/* ==========================================================
   分类展开面板（module.html）：点击科目后在其宫格正下方直接展开课程
   ========================================================== */
.cat-panel { margin-top: 14px; padding: 12px; border-radius: 14px;
             background: #f6f8fc; border: 1px solid #e7edf6;
             animation: catPanelIn .22s ease; }
@keyframes catPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cat-panel-head { margin-bottom: 4px; }
.cat-panel-close { font-size: 12px; font-weight: 600; color: var(--c-primary);
                   padding: 4px 8px; cursor: pointer; }
.cat-panel .course-list { padding-bottom: 4px; }
.cat-panel .course-item:first-child { border-top: none; }
.cat-panel .course-item { padding: 11px 2px; }

/* ==========================================================
   视图滚动定位：避开固定标头，顶部不被遮挡
   ========================================================== */
#pcView, .cat-panel, .pc-direct, .ch-list, .mod-head {
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 8px);
}

/* 视图内容底部留出底部导航高度，避免最后一段被遮住 */
#pcView { padding-bottom: 8px; margin-bottom: 4px; }

/* ==========================================================
   模块图标配色打乱：位置仍严格对齐（不位移、不缩放），
   仅让相邻/上下图标颜色不重复，避免出现整行整列同色。
   手法：nth-child 覆写背景色，压过HTML/JS 上的 mi-* 类。
   ========================================================== */

/* --- 宫格统一按 8 项一循环配色---
   4 列布局下前4 项一行、后 4 项一行，两行同列不同色；
   7 项分类时第 3/5 项虽有同色但不同行不同列，不影响观感。
   位置严格对齐（无位移、无缩放），只打乱颜色。 */
.module-grid > .module-item:nth-child(8n + 1) .module-icon { background: #1A6AFF; }
.module-grid > .module-item:nth-child(8n + 2) .module-icon { background: #5AA4FF; }
.module-grid > .module-item:nth-child(8n + 3) .module-icon { background: #2E86FF; }
.module-grid > .module-item:nth-child(8n + 4) .module-icon { background: #1B63E0; }
.module-grid > .module-item:nth-child(8n + 5) .module-icon { background: #2E86FF; }
.module-grid > .module-item:nth-child(8n + 6) .module-icon { background: #1A6AFF; }
.module-grid > .module-item:nth-child(8n + 7) .module-icon { background: #1B63E0; }
.module-grid > .module-item:nth-child(8n + 8) .module-icon { background: #5AA4FF; }

/* --- 非 module-grid 场景的图标（课程列表行等）--- */
.course-item .module-icon,
.cat-panel .module-icon { background: #1A6AFF; }
.course-item:nth-child(4n + 2) .module-icon,
.cat-panel .course-item:nth-child(4n + 2) .module-icon { background: #5AA4FF; }
.course-item:nth-child(4n + 3) .module-icon { background: #1B63E0; }
.course-item:nth-child(4n + 4) .module-icon { background: #2E86FF; }

/* 课程列表图标在展开面板内同样打乱 */
.cat-panel .course-item:nth-child(4n + 1) .module-icon { background: #1A6AFF; }
.cat-panel .course-item:nth-child(4n + 2) .module-icon { background: #5AA4FF; }
.cat-panel .course-item:nth-child(4n + 3) .module-icon { background: #1B63E0; }
.cat-panel .course-item:nth-child(4n + 4) .module-icon { background: #2E86FF; }

/* ==========================================================
   首页头部轮播图：LOGO 与名称叠加在轮播图之上
   ========================================================== */
.hero {
  position: relative;
  height: 216px;
  overflow: hidden;
}

/* --- 轮播轨道 --- */
.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 6s linear;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 底部渐变压暗，保证文案与指示点可读 --- */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(8, 24, 66, .42) 0%, rgba(8, 24, 66, 0) 30%),
    linear-gradient(0deg, rgba(8, 24, 66, .58) 0%, rgba(8, 24, 66, 0) 42%);
  pointer-events: none;
  z-index: 1;
}

/* --- 轮播文案（随图切换，位于 LOGO 下方） --- */
.hero-cap {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 18px;
  z-index: 3;
  pointer-events: none;
}
.hero-cap-t {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  line-height: 1.3;
}
.hero-cap-s {
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .34);
  line-height: 1.3;
}
.hero-cap-t.cap-in { animation: capIn .5s ease; }
@keyframes capIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- 指示点 --- */
.hero-dots {
  position: absolute;
  right: 14px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero-dot {
  width: 6px; height: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .48);
  transition: width .24s, background .24s;
}
.hero-dot.is-active {
  width: 16px;
  border-radius: 3px;
  background: #fff;
}

/* LOGO / 头部在轮播之上 */
.app-header { z-index: 10; }

/* 画框模式下轮播高度略收，避免头部过高 */
@media (min-width: 600px) {
  .hero { height: 224px; }
}

/* ==========================================================
   一和书院研修课程：章节 / 小课 / 播放器 / 盖章讲义 / 书单
   ========================================================== */
.ac-intro {
  font-size: 12.5px;
  line-height: 1.7;
  color: #5b6b86;
  background: #f6f8fc;
  border: 1px solid #e7edf6;
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.ac-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; margin-top: 8px;
  font-size: 12px; color: #5b6b86;
}

/* --- 章节列表 --- */
.ac-chapters, .ac-lessons, .ac-books { list-style: none; }
.ac-chapter { border-bottom: 1px solid #eef2f8; }
.ac-chapter:last-child { border-bottom: none; }
.ac-chapter > a {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px; color: inherit;
}
.ac-ch-no {
  flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 9px; background: #E8F1FF; color: #1A6AFF;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ac-ch-body { flex: 1; min-width: 0; }
.ac-ch-body h4 {
  font-size: 14px; font-weight: 600; color: #1c2b45; line-height: 1.4;
}
.ac-ch-body p {
  margin-top: 3px; font-size: 11.5px; color: #8494ac; line-height: 1.4;
}

/* --- 小课列表 --- */
.ac-lesson { border-bottom: 1px solid #eef2f8; }
.ac-lesson:last-child { border-bottom: none; }
.ac-lesson > a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px; color: inherit;
}
.ac-ls-no {
  flex: 0 0 38px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: #eef3fb; color: #5b6b86;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ac-ls-no.is-done { background: #e6f7ee; color: #12a05a; }
.ac-ls-body { flex: 1; min-width: 0; }
.ac-ls-body h4 { font-size: 13.5px; font-weight: 500; color: #1c2b45; line-height: 1.45; }
.ac-ls-body p { margin-top: 2px; font-size: 11px; color: #9aa8bd; }
.ac-ls-play {
  flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%; background: #E8F1FF;
  display: flex; align-items: center; justify-content: center;
}
.ac-ls-play svg { width: 15px; height: 15px; color: #1A6AFF; }

/* --- 书单 --- */
.ac-book { border-bottom: 1px solid #eef2f8; }
.ac-book:last-child { border-bottom: none; }
.ac-book > a { display: flex; align-items: center; gap: 11px; padding: 12px 2px; color: inherit; }
.ac-book-cover {
  flex: 0 0 42px; width: 42px; height: 56px;
  border-radius: 5px 8px 8px 5px;
  background: linear-gradient(135deg, #5AA4FF, #1A6AFF);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(18, 55, 110, .24);
}
.ac-book-cover svg { width: 22px; height: 22px; color: #fff; }
.ac-book-body { flex: 1; min-width: 0; }
.ac-book-body h4 { font-size: 14px; font-weight: 600; color: #1c2b45; line-height: 1.4; }
.ac-book-a { margin-top: 3px; font-size: 11.5px; color: #8494ac; }
.ac-book-k {
  margin-top: 3px; font-size: 11.5px; color: #5b6b86; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 语音播放器 --- */
.aplayer {
  background: #f6f8fc; border: 1px solid #e7edf6;
  border-radius: 12px; padding: 12px;
}
.aplayer-top { display: flex; align-items: center; gap: 10px; }
.aplayer-btn {
  flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 50%; border: none;
  background: #1A6AFF; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(18, 55, 110, .3);
  transition: transform .15s;
}
.aplayer-btn:active { transform: scale(.93); }
.aplayer-btn svg { width: 19px; height: 19px; }
.aplayer-mid { flex: 1; min-width: 0; }
.aplayer-t {
  font-size: 13.5px; font-weight: 600; color: #1c2b45; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aplayer-sub {
  margin-top: 2px; font-size: 11px; color: #8494ac;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aplayer-rate {
  flex: 0 0 auto; height: 26px; padding: 0 9px;
  border-radius: 13px; border: 1px solid #d7e2f4;
  background: #fff; color: #1A6AFF;
  font-size: 11.5px; font-weight: 600;
}
.aplayer-track {
  position: relative; height: 4px; margin-top: 12px;
  border-radius: 2px; background: #dfe7f3; cursor: pointer;
}
.aplayer-bar {
  display: block; height: 100%; width: 0;
  border-radius: 2px; background: #1A6AFF;
  transition: width .25s linear;
}
.aplayer-time {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: #8494ac;
}
.aplayer-tip { margin-top: 7px; font-size: 10.5px; color: #a8b4c8; line-height: 1.5; }

/* --- 盖章讲义文本 --- */
.seal-text { padding-top: 2px; }
.seal-text h4 {
  margin: 14px 0 6px;
  font-size: 14px; font-weight: 700; color: #1A6AFF;
  padding-left: 9px; border-left: 3px solid #1A6AFF;
  line-height: 1.5;
}
.seal-text p {
  font-size: 13.5px; line-height: 1.9;
  color: #33455f; margin: 5px 0;
}

/* 印章 */
.seal-wrap {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px dashed #dbe4f2;
  display: flex; align-items: center; gap: 12px;
}
.seal {
  width: 62px; height: 62px;
  border: 2.2px solid #c62f2f; border-radius: 50%;
  color: #c62f2f;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transform: rotate(-11deg);
  opacity: .84;
  flex: 0 0 62px;
}
.seal-t { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.seal-s { font-size: 8.5px; letter-spacing: .5px; margin-top: 1px; }
.seal-note { font-size: 11.5px; color: #8494ac; line-height: 1.6; }

/* --- 移动端小屏适配 --- */
@media (max-width: 400px) {
  .ac-chapter > a, .ac-lesson > a, .ac-book > a { gap: 9px; }
  .ac-book-cover { flex-basis: 38px; width: 38px; height: 50px; }
  .aplayer-btn { flex-basis: 38px; width: 38px; height: 38px; }
  .seal { width: 54px; height: 54px; flex-basis: 54px; }
  .seal-t { font-size: 11.5px; }
}

/* 轮播：小屏收紧高度 */
@media (max-width: 400px) {
  .hero { height: 198px; }
  .hero-cap-t { font-size: 15.5px; }
}

/* ==========================================================
   一和书院三级界面：小节平铺列表（按章分组，48 节逐一展示）
   ========================================================== */
.ac-ch-group { margin-bottom: 6px; }
.ac-ch-group:last-child { margin-bottom: 0; }

.ac-ch-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px;
  padding: 7px 10px;
  background: linear-gradient(90deg, #eef4ff, #f7faff);
  border-left: 3px solid #1A6AFF;
  border-radius: 0 8px 8px 0;
}
.ac-ch-bar .ac-ch-no {
  flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 6px; background: #1A6AFF; color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ac-ch-bar h4 {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: #1c2b45; line-height: 1.4;
}
.ac-ch-n { flex: 0 0 auto; font-size: 10.5px; color: #8494ac; }

/* 小节行：图标 + 标题 */
.ac-lesson { border-bottom: 1px solid #f0f3f9; }
.ac-lesson:last-child { border-bottom: none; }
.ac-lesson > a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: inherit; }
.ac-lesson > a:active { background: #f7faff; }

.ac-ls-ico {
  flex: 0 0 34px; width: 34px; height: 34px;
  padding: 7px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.ac-ls-ico svg { width: 18px; height: 18px; color: #fff; }

.ac-ls-body { flex: 1; min-width: 0; }
.ac-ls-body h4 {
  font-size: 13.5px; font-weight: 500; color: #1c2b45; line-height: 1.45;
  display: flex; align-items: baseline; gap: 6px;
}
.ac-ls-idx {
  flex: 0 0 auto; font-style: normal;
  font-size: 10.5px; font-weight: 700; color: #1A6AFF;
  background: #E8F1FF; border-radius: 5px; padding: 1px 5px;
}
.ac-ls-body p {
  margin-top: 3px; font-size: 11px; color: #9aa8bd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ac-ls-play {
  flex: 0 0 22px; width: 22px; height: 22px;
  color: #b9c6da;
  display: flex; align-items: center; justify-content: center;
}
.ac-ls-play svg { width: 15px; height: 15px; }
.ac-ls-play.is-done { color: #12a05a; }

@media (max-width: 400px) {
  .ac-ls-ico { flex-basis: 30px; width: 30px; height: 30px; border-radius: 10px; }
  .ac-ls-body h4 { font-size: 13px; }
  .ac-ch-bar h4 { font-size: 13px; }
}

/* ==========================================================
   第33轮新增：证书查询 / 微信授权登录 / 个人中心扩展
   ========================================================== */

/* —— 个人中心补充 —— */
.vip-card-tip { margin: 8px 0 0; text-align: center; font-size: 11px; color: rgba(255,255,255,.82); letter-spacing: .3px; }
.module-note { display: block; margin-top: 2px; font-size: 10px; color: var(--c-text-3); line-height: 1.4; }
.mine-head.is-login { background: linear-gradient(135deg, #1e6ae6, #1A6AFF); }
.mine-avatar { color: rgba(255,255,255,.9); }
.mine-avatar svg { width: 100%; height: 100%; }

/* —— 证书查询表单 —— */
.cert-form { padding: 2px 0 4px; }
.cert-field { display: block; margin-bottom: 12px; }
.cert-field span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--c-text-2); }
.cert-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--c-line, #e6ebf5);
  border-radius: 12px; background: #f7f9fd; font-size: 14px; color: var(--c-text); outline: none; transition: border-color .2s, background .2s; }
.cert-field input:focus { border-color: var(--c-primary); background: #fff; }
.cert-form .cert-tip { margin: 10px 0 0; font-size: 11px; color: var(--c-text-3); line-height: 1.6; text-align: center; }

/* —— 证书卡片 —— */
.cert-card { border: 1.5px solid #e3ecff; border-radius: 16px; padding: 14px 14px 12px; background:
  linear-gradient(160deg, #f6f9ff, #ffffff 55%, #f4f8ff); margin-bottom: 12px; position: relative; overflow: hidden; }
.cert-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1A6AFF, #5AA4FF, #ffb020); }
.cert-card--mine { border-color: #cfe0ff; box-shadow: 0 6px 18px rgba(18,55,110,.08); }
.cert-card-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.cert-badge { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.cert-badge svg { width: 24px; height: 24px; }
.cert-card-t { flex: 1; min-width: 0; }
.cert-card-t h4 { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-card-t p  { margin: 0; font-size: 11px; color: var(--c-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cert-state { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cert-state--ok { background: #e3f7ea; color: #0d7a3c; }
.cert-card-rows { list-style: none; margin: 0; padding: 0; border-top: 1px dashed #dbe5f8; }
.cert-card-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px 0; }
.cert-card-rows li + li { border-top: none; }
.cert-card-rows span { font-size: 12px; color: var(--c-text-3); flex: 0 0 auto; }
.cert-card-rows strong { font-size: 12.5px; font-weight: 700; color: var(--c-text-2); text-align: right; word-break: break-all; }
.cert-score { color: var(--c-primary); }
.cert-card-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid #eef2fb; font-size: 10.5px; color: var(--c-text-3); text-align: center; }

/* —— 查询为空 —— */
.cert-empty { padding: 22px 8px 18px; text-align: center; }
.cert-empty-ico { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; background: #f0f4fc; color: #9aa8c4;
  display: flex; align-items: center; justify-content: center; }
.cert-empty-ico svg { width: 28px; height: 28px; }
.cert-empty h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--c-text); }
.cert-empty p  { margin: 0 auto 14px; max-width: 300px; font-size: 12px; line-height: 1.7; color: var(--c-text-3); }
.cert-empty-btn { display: inline-block; padding: 9px 22px; border-radius: 999px; background: var(--c-primary); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none; }
.cert-empty-btn:active { transform: scale(.96); }

/* —— 个人中心 · 我的证书入口 —— */
.cert-entry { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.cert-entry-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: linear-gradient(135deg, #6FB6FF, #2E86FF);
  color: #fff; display: flex; align-items: center; justify-content: center; }
.cert-entry-ico svg { width: 26px; height: 26px; }
.cert-entry-body { flex: 1; min-width: 0; }
.cert-entry-body h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.cert-entry-body p  { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--c-text-3); }
.cert-entry-btn { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: #fff2e0; color: #c46a00;
  font-size: 12.5px; font-weight: 700; text-decoration: none; }
.cert-entry-btn:active { transform: scale(.95); }

/* —— 测评成绩单 · 申请认证证书 —— */
.pv-cert { background: linear-gradient(135deg, #6FB6FF, #2E86FF) !important; color: #fff !important; border: none !important; }
.cert-tip-x, .cert-tip { font-size: 11.5px; color: var(--c-text-3); }
.pv-bar .cert-tip { flex: 1 1 100%; text-align: center; margin: 0 0 4px; }

/* —— 微信授权登录弹层 —— */
.wx-modal { text-align: center; }
.wx-icon { width: 64px; height: 64px; margin: 4px auto 10px; }
.wx-icon svg { width: 100%; height: 100%; }
.wx-scope { margin: 14px 0 4px; border: 1px solid #eef2fb; border-radius: 12px; background: #f8faff; padding: 4px 0; text-align: left; }
.wx-scope li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12.5px; color: var(--c-text-2); }
.wx-scope li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex: 0 0 6px; }
.wx-btn { background: linear-gradient(135deg, #26c957, #16a34a) !important; }

/* —— 小屏适配 —— */
@media (max-width: 400px) {
  .cert-entry-ico { width: 40px; height: 40px; flex-basis: 40px; }
  .cert-entry-btn { padding: 7px 12px; font-size: 11.5px; }
  .cert-card-rows strong { font-size: 12px; }
  .cert-badge { width: 36px; height: 36px; flex-basis: 36px; }
}

/* ==========================================================
   智慧学堂 / 助力计划：图文混排项目介绍（rich-body）
   ========================================================== */
.rich-body { margin-top: 14px; }
.rich-lead { border-radius: 16px; padding: 16px 16px 15px; background:
  linear-gradient(150deg, #f2f7ff, #ffffff 70%); border: 1px solid #e3ecff; }
.rich-lead p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--c-text-2, #4a5678); }
.rich-lead strong { color: var(--c-primary); font-weight: 800; }

.rich-stats { display: flex; flex-wrap: wrap; margin: 14px 0 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #1A6AFF, #2f74ec); color: #fff; padding: 4px 0; }
.rich-stat { flex: 1 1 25%; min-width: 70px; text-align: center; padding: 13px 4px 11px; }
.rich-stat strong { display: block; font-size: 19px; font-weight: 900; letter-spacing: .3px; }
.rich-stat span { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(255,255,255,.82); }

.rich-h3 { position: relative; margin: 24px 2px 12px; font-size: 15.5px; font-weight: 900; color: var(--c-text, #1c2333); padding-left: 11px; }
.rich-h3::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--c-primary); }

.rich-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rich-card { border-radius: 14px; padding: 13px 12px 12px; border: 1px solid #eef2fb; background: #fff;
  box-shadow: 0 3px 10px rgba(28,45,90,.04); }
.rich-card--green { background: linear-gradient(165deg, #f0faf4, #ffffff 65%); border-color: #d9f0e2; }
.rich-card--orange { background: linear-gradient(165deg, #fff6ec, #ffffff 65%); border-color: #ffe4c7; }
.rich-ico { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 12px; color: #fff; margin-bottom: 9px; }
.rich-ico svg { width: 22px; height: 22px; }
.rich-card--green .rich-ico { background: linear-gradient(135deg, #5AA4FF, #1A6AFF); }
.rich-card--orange .rich-ico { background: linear-gradient(135deg, #6FB6FF, #2E86FF); }
.rich-card h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 800; color: var(--c-text, #1c2333); }
.rich-card p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--c-text-3, #7a86a1); }

.rich-steps { list-style: none; margin: 0; padding: 0; }
.rich-step { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.rich-step:last-child { padding-bottom: 2px; }
.rich-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e6ebf5; }
.rich-step:last-child::before { display: none; }
.rich-step-no { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary);
  color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rich-step h4 { margin: 3px 0 3px; font-size: 13.5px; font-weight: 800; color: var(--c-text, #1c2333); }
.rich-step p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--c-text-3, #7a86a1); }

.rich-quote { margin: 18px 0 0; border-radius: 16px; padding: 16px 18px; text-align: center;
  background: linear-gradient(140deg, #16336b, #1d4bb3); color: #fff; position: relative; overflow: hidden; }
.rich-quote::before { content: "“"; position: absolute; top: -6px; left: 10px; font-size: 64px; font-family: Georgia, serif; opacity: .18; }
.rich-quote p { position: relative; margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: .5px; }
.rich-quote span { position: relative; font-size: 11px; color: rgba(255,255,255,.72); }

.rich-timeline { margin: 0; }
.rich-tl-item { display: flex; gap: 12px; padding-bottom: 15px; position: relative; }
.rich-tl-item:last-child { padding-bottom: 0; }
.rich-tl-item::before { content: ""; position: absolute; left: 5px; top: 15px; bottom: 0; width: 2px; background: #ffe0bd; }
.rich-tl-item:last-child::before { display: none; }
.rich-tl-dot { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%;
  background: #2E86FF; box-shadow: 0 0 0 3px #D9E8FF; }
.rich-tl-item strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--c-text, #1c2333); margin-bottom: 2px; }
.rich-tl-item p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--c-text-3, #7a86a1); }

.rich-note { margin: 18px 0 0; border-radius: 14px; background: #f7f9fd; border: 1px dashed #ccd8f0; padding: 13px 14px; }
.rich-note h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--c-primary); }
.rich-note h4 svg { width: 17px; height: 17px; }
.rich-note p { margin: 0; font-size: 11.8px; line-height: 1.85; color: var(--c-text-2, #4a5678); }
.rich-note strong { color: var(--c-text, #1c2333); }

.rich-cta { display: flex; gap: 10px; margin: 18px 0 4px; }
.rich-cta-btn { flex: 1; display: block; text-align: center; padding: 12px 8px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; text-decoration: none; transition: transform .12s; }
.rich-cta-btn:active { transform: scale(.96); }
.rich-cta-btn--green { background: linear-gradient(135deg, #5AA4FF, #1A6AFF); color: #fff; }
.rich-cta-btn--orange { background: linear-gradient(135deg, #6FB6FF, #2E86FF); color: #fff; }
.rich-cta-btn--ghost { flex: 0 0 38%; background: #fff; color: var(--c-text-2, #4a5678); border: 1.5px solid #dde5f5; }

@media (max-width: 400px) {
  .rich-grid { grid-template-columns: 1fr; }
  .rich-stat strong { font-size: 16px; }
  .rich-cta-btn--ghost { flex: 0 0 34%; }
}

/* 轻提示 toast（登录成功等短反馈） */
.yh-toast { position: fixed; left: 50%; top: 42%; z-index: 9999; transform: translate(-50%, -6px);
  display: flex; align-items: center; gap: 8px; max-width: 78vw; padding: 11px 18px; border-radius: 999px;
  background: rgba(22,33,56,.92); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.yh-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.yh-toast-ic { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.yh-toast-ic svg { width: 12px; height: 12px; }

/* 企业服务模块：紫色系（rich 组件扩展） */
.rich-card--purple { background: linear-gradient(165deg, #f4f1ff, #ffffff 65%); border-color: #e0d9fb; }
.rich-card--purple .rich-ico { background: linear-gradient(135deg, #5AA4FF, #1B63E0); }
.rich-cta-btn--purple { background: linear-gradient(135deg, #5AA4FF, #1B63E0); color: #fff; }
.rich-body--purple .rich-tl-dot { background: #1B63E0; box-shadow: 0 0 0 3px #E2ECFF; }
.rich-body--purple .rich-tl-item::before { background: #e0d9fb; }

/* ==========================================================
   个人中心扩展：证书申请 / 资料 / 订单 / 卡券 / 代理商 / 问答
   ========================================================== */

/* 流程步骤 */
.flow-steps { display: flex; gap: 6px; }
.flow-step { flex: 1; text-align: center; padding: 10px 2px; border-radius: 12px; background: #f4f8ff;
  border: 1px solid #e3ecff; font-size: 11px; color: var(--c-text-2); font-weight: 600; }
.flow-step span { display: block; width: 18px; height: 18px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 11px; line-height: 18px; font-weight: 800; }

/* 测评合格记录 */
.pass-item { display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 13px;
  background: #f8faff; border: 1px solid #e6edfb; margin-bottom: 9px; }
.pass-item.is-pick { border-color: var(--c-primary); background: #eef4ff; }
.pass-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--c-primary);
  color: #fff; display: flex; align-items: center; justify-content: center; }
.pass-ico svg { width: 21px; height: 21px; }
.pass-body { flex: 1; min-width: 0; }
.pass-body h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.pass-body p { margin: 0; font-size: 11.5px; color: var(--c-text-3); }
.pass-body strong { color: #12a05a; }
.pass-btn { flex: 0 0 auto; padding: 7px 14px; border: none; border-radius: 999px; background: var(--c-primary);
  color: #fff; font-size: 12px; font-weight: 700; }
.pass-tag { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pass-tag--done { background: #e3f7ea; color: #0d7a3c; }

/* 快捷入口行 */
.quick-row { display: flex; gap: 8px; margin-top: 10px; }
.quick-row a { flex: 1; text-align: center; padding: 9px 4px; border-radius: 11px; background: #f5f8fd;
  font-size: 11.5px; font-weight: 600; color: var(--c-text-2); text-decoration: none; }
.quick-row a:active { background: #e9effa; }

/* 个人资料 */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.profile-avatar { position: relative; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%;
  background: linear-gradient(135deg, #dbe7fb, #c9dcff); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.profile-avatar svg { width: 100%; height: 100%; }
.profile-avatar-tip { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px;
  background: rgba(0,0,0,.45); color: #fff; padding: 2px 0; }
.profile-id h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--c-text); }
.profile-id p { margin: 0; font-size: 11.5px; color: var(--c-text-3); }

.id-upload { display: flex; gap: 10px; }
.id-box { flex: 1; position: relative; height: 92px; border-radius: 13px; border: 1.5px dashed #cfd9ef;
  background: #f8faff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.id-box img { width: 100%; height: 100%; object-fit: cover; }
.id-ph { text-align: center; color: #9dabc8; font-size: 11px; }
.id-ph svg { width: 26px; height: 26px; display: block; margin: 0 auto 4px; }

/* 代理商中心 */
.agent-card { border-radius: 16px; padding: 14px; background: linear-gradient(135deg, #1B63E0, #5AA4FF); color: #fff; }
.agent-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.agent-badge { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center; }
.agent-badge svg { width: 25px; height: 25px; }
.agent-card h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 900; }
.agent-card p { margin: 0; font-size: 11.5px; color: rgba(255,255,255,.82); }
.agent-card .vip-card-btn { background: #fff; color: #5a37d6; }

.agent-wallet { display: flex; gap: 10px; align-items: stretch; }
.agent-wallet-main { flex: 1.1; border-radius: 14px; padding: 14px 12px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #1A6AFF, #2f74ec); }
.agent-wallet-main strong { display: block; font-size: 24px; font-weight: 900; letter-spacing: .5px; }
.agent-wallet-main span { font-size: 11px; color: rgba(255,255,255,.8); }
.agent-wallet-side { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.agent-wallet-side div { flex: 1; border-radius: 12px; background: #f5f8fd; padding: 8px 10px; text-align: center; }
.agent-wallet-side strong { display: block; font-size: 15px; font-weight: 800; color: var(--c-primary); }
.agent-wallet-side span { font-size: 10.5px; color: var(--c-text-3); }

.agent-invite { display: flex; gap: 13px; align-items: center; }
.agent-qr { width: 108px; height: 108px; flex: 0 0 108px; border-radius: 12px; border: 1px solid #e3ecff; background: #fff; }
.agent-invite-info { flex: 1; min-width: 0; }
.agent-invite-info h4 { margin: 0 0 3px; font-size: 13px; font-weight: 800; color: var(--c-text); }
.agent-code { margin: 0 0 3px; font-size: 17px; font-weight: 900; color: var(--c-primary); letter-spacing: 1px; }
.agent-link { margin: 0 0 9px; font-size: 10.5px; color: var(--c-text-3); word-break: break-all; }
.agent-invite-btns { display: flex; gap: 8px; }
.agent-invite-btns .rich-cta-btn { padding: 8px 6px; font-size: 12px; }

/* 记录卡片（推广 / 订单 / 提现 共用） */
.ref-item { border: 1px solid #e9eef8; border-radius: 13px; padding: 11px 12px; margin-bottom: 10px; background: #fff; }
.ref-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ref-nick { font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.ref-type { font-size: 11px; font-weight: 700; color: var(--c-primary); background: #eef4ff;
  padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }
.ref-rows { list-style: none; margin: 0; padding: 0; }
.ref-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.ref-rows span { font-size: 11.5px; color: var(--c-text-3); flex: 0 0 auto; }
.ref-rows strong { font-size: 11.8px; font-weight: 700; color: var(--c-text-2); text-align: right; word-break: break-all; }
.ref-cms { color: #2E86FF; }

/* 进度条 */
.prog { height: 6px; border-radius: 3px; background: #eef2fb; overflow: hidden; margin: 4px 0 8px; }
.prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1A6AFF, #5AA4FF); }

/* 标签切换 */
.tab-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-sw { flex: 1; padding: 8px 4px; border: 1.5px solid #e3ecff; border-radius: 999px; background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--c-text-2); }
.tab-sw.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 优惠券 */
.coupon { display: flex; align-items: stretch; gap: 10px; border-radius: 14px; overflow: hidden;
  border: 1px solid #e3ecff; background: linear-gradient(120deg, #fff5e8, #ffffff 60%); margin-bottom: 10px; }
.coupon.is-used, .coupon.is-expired { background: #f5f6f8; border-color: #e5e7eb; filter: grayscale(1); opacity: .8; }
.coupon-l { flex: 0 0 92px; background: linear-gradient(135deg, #6FB6FF, #2E86FF); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 4px; }
.coupon-l strong { font-size: 15px; font-weight: 900; }
.coupon-l em { font-style: normal; font-size: 24px; font-weight: 900; }
.coupon-l span { font-size: 10.5px; color: rgba(255,255,255,.85); margin-top: 2px; }
.coupon-c { flex: 1; min-width: 0; padding: 11px 2px; }
.coupon-c h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.coupon-c p { margin: 0 0 3px; font-size: 11.5px; color: var(--c-text-3); }
.coupon-c span { font-size: 10.5px; color: #9aa8c4; }
.coupon-r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 12px 8px 4px; }
.coupon-use { padding: 6px 13px; border: none; border-radius: 999px; background: var(--c-primary); color: #fff;
  font-size: 12px; font-weight: 700; }
.coupon-state { font-size: 11.5px; color: #9aa8c4; font-weight: 700; }
.coupon-code { font-size: 10px; color: #b3bee0; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* 收货地址 */
.addr-item { border: 1px solid #e9eef8; border-radius: 13px; padding: 11px 12px; margin-bottom: 9px; }
.addr-body h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.addr-body h4 span { font-weight: 600; font-size: 12px; color: var(--c-text-3); }
.addr-def { font-style: normal; font-size: 10.5px; font-weight: 700; color: #2E86FF; background: #E8F1FF;
  padding: 2px 7px; border-radius: 999px; margin-left: 5px; }
.addr-body p { margin: 0; font-size: 11.8px; color: var(--c-text-2); line-height: 1.6; }
.addr-ops { display: flex; gap: 10px; margin-top: 8px; justify-content: flex-end; }
.addr-ops button { padding: 5px 12px; border: 1px solid #dde5f5; border-radius: 999px; background: #fff;
  font-size: 11.5px; color: var(--c-text-2); }

/* 提问与回复 */
.qa-item { border: 1px solid #e9eef8; border-radius: 13px; padding: 11px 12px; margin-bottom: 10px; background: #fff; }
.qa-q p, .qa-a p { margin: 6px 0 5px; font-size: 12.5px; line-height: 1.75; color: var(--c-text-2); }
.qa-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #eef4ff; color: var(--c-primary);
  font-size: 11px; font-weight: 700; }
.qa-a { margin-top: 9px; padding: 10px 11px; border-radius: 11px; background: #f6f9ff; border-left: 3px solid var(--c-primary); }
.qa-a--wait { background: #fffaf0; border-left-color: #f5a623; }
.qa-a-tag { font-size: 11px; font-weight: 700; color: var(--c-primary); }
.qa-a--wait .qa-a-tag { color: #c46a00; }
.qa-time { font-size: 10.5px; color: #9aa8c4; }

.faq-item { padding: 11px 2px; border-bottom: 1px dashed #e6ebf5; }
.faq-item:last-child { border-bottom: none; }
.faq-item h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--c-text); }
.faq-item p { margin: 0; font-size: 11.8px; line-height: 1.75; color: var(--c-text-3); }

/* 开关 */
.switch { position: relative; width: 42px; height: 23px; flex: 0 0 42px; border-radius: 999px; background: #d9e0ee; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s; }
.switch.is-on { background: #16b364; }
.switch.is-on::after { transform: translateX(19px); }

@media (max-width: 400px) {
  .agent-qr { width: 92px; height: 92px; flex-basis: 92px; }
  .coupon-l { flex-basis: 78px; }
  .coupon-l em { font-size: 20px; }
  .flow-step { font-size: 10px; }
}

/* ==========================================================
   登录注册 / 协议勾选 / 支付方式
   ========================================================== */
.login-logo { text-align: center; padding: 12px 0 16px; }
.login-logo-ic { display: inline-block; width: 62px; height: 62px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(18,55,110,.18); }
.login-logo-ic svg { width: 100%; height: 100%; display: block; }
.login-logo h1 { margin: 12px 0 4px; font-size: 19px; font-weight: 900; color: var(--c-text); }
.login-logo p { margin: 0; font-size: 12px; color: var(--c-text-3); }

/* 验证码行 */
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row input { flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid #e6ebf5; border-radius: 12px;
  background: #f7f9fd; font-size: 14px; color: var(--c-text); outline: none; }
.code-btn { flex: 0 0 auto; padding: 11px 14px; border: 1.5px solid var(--c-primary); border-radius: 12px;
  background: #fff; color: var(--c-primary); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.code-btn:disabled { color: #9aa8c4; border-color: #dde5f5; }

/* 协议勾选 */
.agree-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px 2px; font-size: 11.8px;
  line-height: 1.7; color: var(--c-text-2); }
.agree-row input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; accent-color: #1A6AFF; }
.agree-row a { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.agree-row--light, .agree-row--light a { color: rgba(255,255,255,.92); }
.agree-row--light a { font-weight: 800; text-decoration: underline; }
.agree-row.is-warn { animation: agreeWarn .35s ease 3; border-radius: 10px; }
@keyframes agreeWarn { 50% { background: rgba(255,255,255,.22); } }

/* 微信一键登录按钮（登录页底部） */
.wx-login-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 13px 0; border: none; border-radius: 999px; background: linear-gradient(135deg, #26c957, #16a34a);
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.wx-login-btn:active { transform: scale(.97); }
.wx-login-ic { width: 26px; height: 26px; }
.wx-login-ic svg { width: 100%; height: 100%; display: block; }

/* 支付方式 */
.pay-way { display: flex; align-items: center; gap: 6px; color: #0d7a3c; }
.pay-way-ic { width: 18px; height: 18px; border-radius: 5px; background: #22c55e; color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* 首页头部 · 会员入口 */
.header-vip { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 5px 11px;
  border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 700;
  text-decoration: none; backdrop-filter: blur(4px); }
.header-vip svg { width: 15px; height: 15px; }
.header-vip:active { transform: scale(.95); }

/* ==========================================================
   资讯动态：列表页 + 详情页图文混排
   ========================================================== */

/* ---------- 列表页头部 ---------- */
.nl-head { padding: 2px 2px 12px; }
.nl-title { font-size: 20px; font-weight: 800; letter-spacing: .4px; color: var(--c-text); }
.nl-sub { margin-top: 5px; font-size: 11.5px; color: var(--c-text-3); }

/* ---------- 分类筛选 ---------- */
.nl-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 2px 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nl-tabs::-webkit-scrollbar { display: none; }
.nl-tab { flex: 0 0 auto; padding: 6px 13px; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-card); color: var(--c-text-2); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; }
.nl-tab.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff;
  box-shadow: 0 3px 10px rgba(18,55,110,.22); }

/* ---------- 列表条目 ---------- */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-row { display: flex; gap: 11px; padding: 11px; border-radius: var(--r-md);
  background: var(--c-card); box-shadow: var(--sd-card); text-decoration: none; color: inherit; }
.news-row:active { transform: scale(.985); opacity: .92; }

.nr-pic { position: relative; flex: 0 0 104px; width: 104px; height: 74px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--c-primary-soft); }
.nr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nr-top { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: var(--r-sm) 0 8px 0;
  background: linear-gradient(135deg, #ff6a3d, #ffb020); color: #fff; font-size: 10px; font-weight: 700; }

.nr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nr-t { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nr-sum { margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--c-text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nr-meta { margin-top: auto; padding-top: 7px; display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.nr-tag { padding: 1.5px 6px; border-radius: 4px; background: var(--c-primary-soft);
  color: var(--c-primary); font-weight: 700; }
.nr-ago { margin-left: auto; }

.nl-end { margin: 16px 0 4px; text-align: center; font-size: 11px; color: var(--c-text-3); letter-spacing: 1px; }
.nl-empty { padding: 40px 0; text-align: center; font-size: 12.5px; color: var(--c-text-3); }

/* ---------- 详情页封面 + 图注 ---------- */
.article-cover { position: relative; overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-cover-tag { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0,0,0,.42); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(3px); }

/* ---------- 正文图文混排 ---------- */
.ab-h { margin: 20px 0 2px; padding-left: 10px; border-left: 3.5px solid var(--c-primary);
  font-size: 15.5px; font-weight: 800; line-height: 1.5; color: var(--c-text); }
.ab-p { margin-top: 13px; font-size: 14px; line-height: 1.9; color: #3c465c;
  text-align: justify; text-indent: 2em; }

.ab-fig { margin: 16px 0 6px; }
.ab-fig img { width: 100%; border-radius: var(--r-md); display: block; box-shadow: var(--sd-card); }
.ab-fig figcaption { margin-top: 7px; text-align: center; font-size: 11px; color: var(--c-text-3); }

.ab-quote { margin: 18px 0 4px; padding: 13px 15px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #f2f6ff, #E8F1FF);
  border-left: 3px solid var(--c-primary); font-size: 13.5px; line-height: 1.8;
  color: var(--c-primary-d); font-weight: 600; }

.ab-ul { margin: 12px 0 4px; padding: 13px 14px 13px 12px; border-radius: var(--r-md);
  background: #f8fafd; border: 1px solid var(--c-line); list-style: none; }
.ab-ul li { position: relative; padding-left: 16px; margin-top: 8px; font-size: 13px;
  line-height: 1.75; color: #47536b; }
.ab-ul li:first-child { margin-top: 0; }
.ab-ul li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-primary); }

.ab-stat { margin: 16px 0 4px; display: flex; gap: 8px; }
.ab-stat-i { flex: 1; padding: 12px 6px; border-radius: var(--r-md); text-align: center;
  background: linear-gradient(160deg, #ffffff, #f5f8ff); border: 1px solid var(--c-line); }
.ab-stat-i strong { display: block; font-size: 16px; font-weight: 800; color: var(--c-primary);
  font-variant-numeric: tabular-nums; }
.ab-stat-i span { display: block; margin-top: 4px; font-size: 10.5px; color: var(--c-text-3); }

.ab-tip { margin: 16px 0 4px; display: flex; gap: 9px; padding: 12px 13px; border-radius: var(--r-md);
  background: #fff8ea; border: 1px solid #ffe6b8; }
.ab-tip-ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.ab-tip p { font-size: 12.5px; line-height: 1.75; color: #8a6420; text-indent: 0; margin: 0; }

/* ---------- 文末 ---------- */
.article-end { margin: 26px 0 18px; display: flex; align-items: center; gap: 10px; }
.ae-line { flex: 1; height: 1px; background: var(--c-line); }
.ae-txt { font-size: 10.5px; color: var(--c-text-3); }

/* ---------- 上一条 / 下一条 ---------- */
.article-nav { display: flex; flex-direction: column; gap: 8px; }
.an-item { padding: 11px 13px; border-radius: var(--r-md); background: #f7f9fd;
  border: 1px solid var(--c-line); text-decoration: none; color: inherit; }
.an-item:active { transform: scale(.985); }
.an-lab { display: inline-block; margin-right: 8px; padding: 1.5px 7px; border-radius: 4px;
  background: var(--c-primary-soft); color: var(--c-primary); font-size: 10.5px; font-weight: 700; }
.an-t { font-size: 12.5px; line-height: 1.6; color: var(--c-text-2); }

/* ---------- 相关推荐 ---------- */
.art-rel { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.art-rel-title { font-size: 14.5px; font-weight: 800; color: var(--c-text); margin-bottom: 10px; }
.ar-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--c-line);
  text-decoration: none; color: inherit; }
.ar-item:last-child { border-bottom: none; }
.ar-item:active { opacity: .8; }
.ar-pic { flex: 0 0 62px; width: 62px; height: 46px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--c-primary-soft); }
.ar-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ar-t { font-size: 12.8px; font-weight: 600; line-height: 1.5; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-d { margin-top: 5px; font-size: 10.5px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }

/* ---------- 小屏适配 ---------- */
@media (max-width: 340px) {
  .nr-pic { flex: 0 0 88px; width: 88px; height: 64px; }
  .nr-t { font-size: 13px; }
  .nr-sum { -webkit-line-clamp: 1; }
  .ab-stat-i strong { font-size: 14.5px; }
}