/* ============================================================
 * 马后炮化工众筹培训平台 — PC 端前台主题皮肤
 * theme.css  v2.0  (2026-09-29)
 * ------------------------------------------------------------
 * 设计方向：方案 B「转化优先」 + 布局体系重构
 * 加载位置：/public/new_mulitpc/css/theme.css
 * 引入方式：template/mulit/pc/common/header.html 与 common/head.html
 *           各追加一行 link（两处都要，否则会漏页面）
 * 回滚方式：删除这两行 link 即可完全恢复原样
 * ------------------------------------------------------------
 * v2.0 相较 v1.0 的增补：
 *   · 布局层：用 CSS Grid 替代原 flex+margin 网格，卡片宽度严格对齐
 *   · 区块节奏：统一 section 间距与标题行高度
 *   · 资讯区：修复内联绝对定位导致的脆弱布局
 *   · 套餐区：修复内联样式造成的价格排版不一致
 *   · 导航/页脚：结构层次的统一
 * ------------------------------------------------------------
 * 原则：
 *   1. 纯叠加式覆盖，不修改任何原有 CSS 文件
 *   2. 配色/间距/圆角全部走 CSS 变量，换肤只改 :root
 *   3. 仅在「布局必需」处使用 !important，并逐条注明原因
 *   4. 尊重 prefers-reduced-motion
 * ============================================================ */

/* ── 1. 设计 token ───────────────────────────────────────── */
:root {
  /* 主色：品牌红橙，用于价格 / 报名 CTA / 选中态 */
  --mp-primary:        #E8503A;
  --mp-primary-hover:  #D1412D;
  --mp-primary-soft:   #FDEEEB;
  /* 强调金：热销 / 套餐 */
  --mp-gold:           #D98A28;
  --mp-gold-soft:      #FDF4E6;
  /* 功能色 */
  --mp-success:        #0F6E56;
  --mp-info:           #185FA5;

  /* 中性色阶 */
  --mp-bg:             #F7F8FA;
  --mp-surface:        #FFFFFF;
  --mp-fill:           #EEF0F4;
  --mp-line:           #E6E9EF;
  --mp-line-soft:      #F0F2F6;

  /* 文字 */
  --mp-text:           #1F2430;
  --mp-text-sub:       #646A78;
  --mp-text-mute:      #98A0B0;

  /* 页脚 */
  --mp-footer:         #242A39;

  /* 圆角 */
  --mp-r-sm:  6px;
  --mp-r:     12px;
  --mp-r-lg:  16px;

  /* 阴影 */
  --mp-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --mp-shadow-2: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 24px rgba(16, 24, 40, .08);

  /* 动效 */
  --mp-ease: cubic-bezier(.22, .61, .36, 1);
  --mp-dur:  .22s;

  /* 容器宽度 —— 全站统一 */
  --mp-container: 1280px;

  /* 区块垂直节奏 */
  --mp-gap-section: 48px;
  --mp-gap-card:    20px;

  /* 字体栈：中文优先，杜绝 Arial 回退 */
  --mp-font: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN",
             "Noto Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
             -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 数字字体：价格 / 统计，等宽对齐 */
  --mp-font-num: "DIN Alternate", "Barlow Semi Condensed", "SF Pro Display",
                 -apple-system, "Helvetica Neue", "Arial Narrow", sans-serif;
}

/* ── 2. 全局基调 ─────────────────────────────────────────── */
/* 2026-09-29 教训：body 的 font-size/line-height 全局改动会把原站
   大量固定高度元素（如下拉菜单 height:20px）撑爆导致文字截断。
   body 恢复原站默认（14px/normal），美化一律在组件级显式设置。 */
body {
  font-family: var(--mp-font) !important;
  color: var(--mp-text);
  background-color: var(--mp-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 首页分类下拉项：原站固定 height:20px，显式放开为自适应防截断 */
.coursex .coursex-level a {
  height: auto !important;
  line-height: 20px;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mp-font);
  color: var(--mp-text);
  letter-spacing: -.01em;
}

/* 无障碍：可见焦点态 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mp-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--mp-primary-soft); color: var(--mp-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 3. 容器宽度统一 ─────────────────────────────────────── */
/* 2026-09-29 用户定版：全站容器统一 1280px（去掉 16px 内边距，
   原来的 1148 = 1180 - 2×16）。广告 banner 1180 宽在 1280 容器中自适应拉伸 */
.ct1180,
.w1180,
.content-box,
.page-box > .ct1180 {
  width: var(--mp-container) !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* ── 4. 顶部导航（#head）─────────────────────────────────── */
/* 2026-09-29 用户要求恢复 fixed 固定顶端（此前被我误改为 relative）。
   bass.css 原始定义即 fixed + left:0 + top:0 + width:100%，
   fixed 后导航脱离文档流，由下方 body padding-top 统一腾位。 */
#head {
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* fixed 导航腾位：body 统一下移 70px，保持各页现有视觉间距不变 */
body {
  padding-top: 70px !important;
  box-sizing: border-box;
}

#head .logo img { max-height: 48px; width: auto; }

/* 主导航项 */
#head .top-nav ul li a,
#head .head-nav ul li a,
#head .top-nav a,
#head .head-nav a {
  position: relative;
  color: var(--mp-text-sub);
  font-size: 16px;
  padding-bottom: 4px;
  transition: color var(--mp-dur) var(--mp-ease);
}
#head .top-nav ul li a:hover,
#head .head-nav ul li a:hover,
#head .top-nav a:hover,
#head .head-nav a:hover { color: var(--mp-primary); }

/* 选中态：底部主色条 */
#head .top-nav ul li.top-nav-active a,
#head .head-nav ul li.top-nav-active a { color: var(--mp-primary); }
#head .top-nav ul li.top-nav-active i,
#head .head-nav ul li.top-nav-active i,
#head .top-nav ul li.top-nav-active::after,
#head .head-nav ul li.top-nav-active::after {
  background: var(--mp-primary);
  height: 3px;
  border-radius: 2px;
  width: 20px;
  display: block;
  margin: 6px auto 0;
  border: none;
}

/* 搜索框 */
#head .head-search input,
#head .searchText,
#head .search-box input,
#head .head-search2 input {
  background: var(--mp-fill);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--mp-text);
  transition: all var(--mp-dur) var(--mp-ease);
  box-sizing: border-box;
}
#head .head-search input:focus,
#head .searchText:focus,
#head .search-box input:focus,
#head .head-search2 input:focus {
  background: var(--mp-surface);
  border-color: var(--mp-primary);
  outline: none;
}
#head .head-search input::placeholder,
#head .searchText::placeholder { color: var(--mp-text-mute); }

/* 登录区 */
#head .head-login,
#head .top-login {
  color: var(--mp-text-sub);
  transition: color var(--mp-dur) var(--mp-ease);
}
#head .head-login:hover,
#head .top-login:hover { color: var(--mp-primary); }

/* ── 5. 课程分类导航条（.coursex）────────────────────────── */
.coursex {
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-line);
}
.coursex ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

/* ── 5.1 固定导航腾位收紧（2026-09-29 用户要求，二次收紧）────
   实测（诊断页）：#head 在各页面均为 relative 占流 70px。
   原站 margin-top:90px 是配合旧 fixed 导航的腾位，现已多余。
   收紧为 16px 呼吸（导航底 → 内容顶）。 */
.filterx,
.topFixed,
.user-info-box,
.courseSearch {
  margin-top: 16px !important;
}
/* 资讯子页 banner 的 padding 腾位（实测 pt=82） */
.sub-banner {
  padding-top: 16px !important;
}
/* 内页 banner 图：按容器宽度（1280）强制满宽拉伸（2026-09-29 用户要求） */
.sub-banner img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* 工具类 pt-90：仅用于导航下首个内容腾位（面包屑/直播页签，共 5 处模板），
   实测套餐页空白 90px 即来自它 */
.pt-90 {
  padding-top: 16px !important;
}
/* 首页/个人中心 banner 的 relative 偏移（实测 top:70px，导航占流后为纯空白） */
#banner-box {
  top: 0 !important;
}
/* 首页分类导航面板：原 left:50%; margin-left:-590px（配旧 1180 容器），
   改为 -640（=1280/2）与底部容器左对齐；轮播图保持居中全屏不动（23:15 用户澄清） */
.coursex {
  margin-left: calc(var(--mp-container) / -2) !important;
}
/* banner 下方内容容器的内联 margin-top:70px（原 fixed 导航补偿，现为多余空白） */
#banner-box ~ .ct1180 {
  margin-top: 0 !important;
}
/* 筛选栏内部收紧 */
.filterx .filterx-type ul {
  margin-top: 0 !important;
  padding-bottom: 10px !important;
}
.filterx .filterx-type li {
  margin-top: 8px !important;
}
.filterx .filterx-other {
  margin-top: 10px !important;
}
.coursex .coursex-item1 a,
.coursex .coursex-item1 > .shuang,
.coursex a.coursex-item1 {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--mp-text);
  padding: 8px 16px;
  border-radius: 8px;
  transition: all var(--mp-dur) var(--mp-ease);
}
.coursex .coursex-item1:hover a,
.coursex .coursex-item1:hover > .shuang,
.coursex a.coursex-item1:hover {
  background: var(--mp-primary-soft);
  color: var(--mp-primary);
}

/* 二级下拉浮层 */
.coursex-level .course-level-box {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-2);
  padding: 16px;
}
.coursex-level .coursex-item2,
.coursex-level .coursex-item3 {
  color: var(--mp-text-sub);
  border-radius: var(--mp-r-sm);
  padding: 6px 12px;
  transition: all var(--mp-dur) var(--mp-ease);
}
.coursex-level .coursex-item2:hover,
.coursex-level .coursex-item3:hover {
  background: var(--mp-primary-soft);
  color: var(--mp-primary);
}

/* ── 6. 区块节奏与标题行（布局层核心）───────────────────── */
.course-box,
.bundle-box,
.consultation-box,
.advisory-box,
.live-box {
  padding: var(--mp-gap-section) 0 0;
}

/* 标题行：统一基线、统一分隔线、统一「更多」位置 */
.live-title,
.course-title,
.bundle-title,
.consultation-title,
.advisory-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--mp-line-soft);
  margin-bottom: 24px;
  height: auto;
  min-height: 34px;
}

/* 区块主标题：左侧主色标记条 */
.live-title-msg,
.course-title-msg,
.bundle-title-msg,
.consultation-title-msg,
.advisory-title-msg {
  position: relative;
  display: inline-block;
  padding-left: 14px;
  font-size: 22px;
  font-weight: 500;
  color: var(--mp-text);
  letter-spacing: -.02em;
  line-height: 1.3;
  border-left: none !important;  /* 清除原「精品课程」的内联 border-left */
}
.live-title-msg::before,
.course-title-msg::before,
.bundle-title-msg::before,
.consultation-title-msg::before,
.advisory-title-msg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--mp-primary);
}

/* 「更多」入口 */
.live-title-more a,
.course-title-more a,
.bundle-title-more a,
.consultation-title-more a,
.advisory-title-more a {
  font-size: 14px;
  color: var(--mp-text-sub);
  transition: color var(--mp-dur) var(--mp-ease);
}
.live-title-more a:hover,
.course-title-more a:hover,
.bundle-title-more a:hover,
.consultation-title-more a:hover,
.advisory-title-more a:hover { color: var(--mp-primary); }
.live-title-more a::after,
.course-title-more a::after,
.bundle-title-more a::after {
  content: "›";
  margin-left: 4px;
  font-size: 16px;
}

/* ── 7. 课程网格（CSS Grid 替代原 flex+margin）──────────── */
/* 原实现：.course-box .course-list { display:flex; flex-wrap:wrap }
   卡片靠 margin:20px 20px 0 0 撑开，末位 nth-child(5n+5) 去右距，
   导致窄屏换行时右侧留白、卡片宽度受 margin 影响。
   改为 Grid 后：列宽严格等分，间距由 gap 统一控制。 */
.course-box .course-list,
.course-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mp-gap-card);
  /* 模板内联 min-height:400px：grid 默认 stretch 会把单行卡片拉高到 400px
     （筛选后只剩 1 行时中间大空白）。start = 内容顶排、行高按内容算 */
  align-content: start !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 8. 课程卡片（核心组件 · 方案 B）─────────────────────── */
.course-item {
  background: var(--mp-surface) !important;
  border-radius: var(--mp-r) !important;   /* 对抗 bass.css 二次加载的 border-radius:4px */
  box-shadow: var(--mp-shadow-1) !important;
  height: auto !important;                 /* 清除原固定 height:236px */
  min-height: 0;
  margin: 0 !important;                    /* 清除原 margin（改由 grid gap 控制） */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
/* 清除原 nth-child 的 margin 规则 */
.course-item:nth-child(5n + 5) { margin: 0 !important; }

.course-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--mp-shadow-2);
}

.course-item > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100% !important;   /* 原站写死 width:220px，卡片加宽后右侧露底（2026-09-29 用户反馈） */
  text-decoration: none;
  color: inherit;
}

/* 封面图：恢复原站显示方法（2026-09-29 用户反馈图片被放大裁切）
   原站 bass.css：object-fit:cover + height:124px。保持一致，不再放大。 */
.course-item-banner,
.course-item > a > img {
  width: 100%;
  height: 124px !important;
  object-fit: cover;
  display: block;
  background: var(--mp-fill);
  flex: none;
}

/* 封面遮罩 + 播放按钮（高度跟随封面 124px） */
.course-item-mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 36, 48, .34);
  opacity: 0;
  transition: opacity var(--mp-dur) var(--mp-ease);
}
.course-item:hover .course-item-mask { opacity: 1; }

/* 类型角标（原 .course-tag 内的图标） */
.course-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.course-tag img {
  height: 22px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28));
}

/* 卡片内容区：flex 撑满，价格行贴底 */
.course-item-content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
}

/* 课程标题 —— 两行截断 */
.course-item-title {
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mp-text) !important;
  margin: 0 0 6px;
  min-height: 43px;                /* 稳定两行高度，避免卡片高低不齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mp-dur) var(--mp-ease);
}
.course-item:hover .course-item-title { color: var(--mp-primary) !important; }

/* 分类 */
.course-item-type {
  font-size: 12px;
  color: var(--mp-text-mute) !important;
  margin: 0 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 价格行：贴到卡片底部 */
.course-item-price {
  position: static !important;
  width: 100% !important;
  bottom: auto !important;
  margin: auto 0 0 !important;      /* 推到卡片底部 */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--mp-line-soft);
  line-height: 1.2;
}

/* 价格数字 —— 主色 + 数字字体 + 放大 */
.course-item-price span:nth-child(1) {
  color: var(--mp-primary) !important;   /* 对抗 bass.css 二次加载的 #0088ff */
  font-family: var(--mp-font-num);
  font-size: 20px !important;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* 在学人数 —— 胶囊标签 */
.course-item-price span:nth-child(2) {
  color: var(--mp-text-sub) !important;
  font-size: 12px !important;
  background: var(--mp-fill);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}

/* 小班标签 */
.small-class-tag {
  background: var(--mp-primary) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin-right: 5px;
  vertical-align: 1px;
}

/* ── 9. 直播卡片 ─────────────────────────────────────────── */
.live-box .live-list,
.live-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mp-gap-card);
  list-style: none;
  margin: 0;
  padding: 0;
}
.live-item {
  background: var(--mp-surface);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-1);
  overflow: hidden;
  margin: 0 !important;
  position: relative;
  transition: transform var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
.live-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--mp-shadow-2);
}
.live-item-banner {
  width: 100%;
  height: 124px !important;   /* 恢复原站 124px（原为 158px 裁切过多） */
  object-fit: cover;
  background: var(--mp-fill);
  display: block;
}

/* 直播状态标签 */
.live-item-status {
  font-size: 12px;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.3;
  font-weight: 500;
  display: inline-block;
}
.live-item-status.living   { background: var(--mp-primary);   color: #fff; }
.live-item-status.wait     { background: var(--mp-gold);      color: #fff; }
.live-item-status.playback { background: var(--mp-info);      color: #fff; }
.live-item-status.end      { background: var(--mp-text-mute); color: #fff; }

.live-item-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-item-price span:first-child {
  color: var(--mp-primary);
  font-family: var(--mp-font-num);
  font-size: 18px;
  font-weight: 500;
}

/* ── 10. 精品套餐（列表页 + 首页通用，全面接管 2026-09-29）── */
/* 注意：首页套餐容器是 .bundle-list，套餐列表页容器是 #list_body（无 class，JS 渲染） */
.bundle-box .bundle-list,
.bundle-list,
#list_body {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mp-gap-card);
  align-content: start !important;   /* 防单行拉伸（同课程列表） */
  list-style: none;
  margin: 0;
  padding: 0;
}
#list_body > .bundle-item { width: auto !important; }
.bundle-item {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-r) !important;
  overflow: hidden;
  margin: 0 !important;
  height: auto !important;           /* 原站 height:236px 锁高 → 标题价格重叠 */
  transition: transform var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
  display: flex;
  flex-direction: column;
}
.bundle-item:nth-child(4n + 4) { margin: 0 !important; }
.bundle-item:hover {
  border-color: var(--mp-gold);
  box-shadow: 0 4px 12px rgba(217, 138, 40, .12);
  transform: translateY(-3px);
}
.bundle-item > a {
  display: flex; flex-direction: column;
  height: 100%; width: 100% !important;   /* 原站可能写死宽度 */
  text-decoration: none; color: inherit;
}
.bundle-item-banner {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover;
  background: var(--mp-fill);
  display: block;
  flex: none;
}
.bundle-item-mask { height: 150px !important; }
.bundle-item-content {
  padding: 13px 15px 15px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  height: auto;
}
/* 套餐标题：接管 .bundle-item-title-course（原 height:20px + span float:66% → 溢出重叠） */
.bundle-item-title-course {
  height: auto !important;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundle-item-title-course span:first-child,
.bundle-item-content > span:first-child {
  width: auto !important;
  float: none !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 500;
  color: var(--mp-text) !important;   /* 去除红色异常字色 */
  line-height: 1.45 !important;
  white-space: normal !important;
}
.bundle-item-title-course span:nth-child(2) {
  width: auto !important;
  float: none !important;
  display: block !important;
  font-size: 12px !important;
  color: var(--mp-text-mute) !important;
  text-align: left !important;
  margin-top: 4px;
}
/* 套餐价格行：清除原内联 float/width，改 flex 对齐、贴卡片底部
   ⚠️ 必须用 :not(.bundle-item-title-course) —— 标题容器也是 content>div，
   否则标题会被当成价格染成金色（2026-09-29 踩坑） */
.bundle-item-content > div:not(.bundle-item-title-course) {
  margin-top: auto !important;
  padding-top: 10px;
  border-top: 1px solid var(--mp-line-soft);
  display: flex !important;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  height: auto;
}
.bundle-item-content > div:not(.bundle-item-title-course) > span:nth-child(1) {
  color: var(--mp-gold) !important;
  font-family: var(--mp-font-num);
  font-size: 20px !important;
  font-weight: 500;
  letter-spacing: -.02em;
}
.bundle-item-content > div:not(.bundle-item-title-course) > span:nth-child(2) {
  color: var(--mp-text-mute) !important;
  font-size: 12px !important;
  text-decoration: line-through;
}
.bundle-item-content > div:not(.bundle-item-title-course) > span:nth-child(3) {
  color: var(--mp-text-mute) !important;
  font-size: 12px !important;
  width: auto !important;
  text-align: right !important;
  float: none !important;
  margin-left: auto;
}

/* ── 11. 资讯区（修复内联绝对定位）──────────────────────── */
.consultation-box .consultation-list,
.consultation-list,
.advisory-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.consultation-item,
.advisory-item {
  position: static !important;      /* 清除内联 position:relative 依赖 */
  padding: 0;
  border-bottom: 1px solid var(--mp-line-soft);
  transition: border-color var(--mp-dur) var(--mp-ease);
}
.consultation-item > a,
.advisory-item > a {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  text-decoration: none;
}
.consultation-item:hover,
.advisory-item:hover { border-bottom-color: var(--mp-primary); }

.consultation-item-banner {
  width: 132px;
  height: 84px;
  flex: none;
  object-fit: cover;
  border-radius: var(--mp-r-sm);
  background: var(--mp-fill);
}
.consultation-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.consultation-item-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mp-text);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mp-dur) var(--mp-ease);
}
.consultation-item:hover .consultation-item-title { color: var(--mp-primary); }
.consultation-item-price {
  font-size: 13px;
  color: var(--mp-text-sub);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 时间/浏览量行：清除内联绝对定位 */
.consultation-item-time {
  position: static !important;
  bottom: auto !important;
  width: auto !important;
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--mp-text-mute);
}
.consultation-item-img {
  display: flex;
  align-items: center;
  gap: 4px;
}
.consultation-item-img img { width: 14px; height: 14px; opacity: .5; }

/* ── 12. 通用按钮 ────────────────────────────────────────── */
.mp-btn,
.mp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--mp-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: var(--mp-r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--mp-dur) var(--mp-ease),
              transform .1s var(--mp-ease);
}
.mp-btn:hover,
.mp-btn-primary:hover { background: var(--mp-primary-hover); color: #fff; }
.mp-btn:active,
.mp-btn-primary:active { transform: scale(.98); }

.mp-btn-ghost {
  background: transparent;
  color: var(--mp-primary);
  border: 1px solid var(--mp-primary);
}
.mp-btn-ghost:hover { background: var(--mp-primary-soft); color: var(--mp-primary); }

/* ── 13. 表单控件 ────────────────────────────────────────── */
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: var(--mp-font);
  font-size: 15px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-sm);
  padding: 10px 14px;
  min-height: 44px;
  background: var(--mp-surface);
  color: var(--mp-text);
  box-sizing: border-box;
  transition: border-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px var(--mp-primary-soft);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--mp-text-mute); }

/* ── 14. 弹层（登录 / 绑定手机）─────────────────────────── */
.weixin_QRcord_alert,
.bind-box,
.weixin_QRcord_alert_outside .weixin_QRcord_alert {
  border-radius: var(--mp-r-lg);
  box-shadow: var(--mp-shadow-2);
  border: none;
}
.bind-caption,
.weixin_QRcord_top h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--mp-text);
}
/* 错误提示 —— 保留用户输入，仅高亮 */
.error-alert { color: var(--mp-primary); font-size: 13px; }

/* ── 15. 页脚 ────────────────────────────────────────────── */
.footer {
  background: var(--mp-footer);
  padding: 32px 0 24px;
  margin-top: var(--mp-gap-section);
}
.footer .footer-words,
.footer .three {
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
}
.footer .footer-words a,
.footer .three a {
  color: rgba(255, 255, 255, .78);
  transition: color var(--mp-dur) var(--mp-ease);
}
.footer .footer-words a:hover,
.footer .three a:hover { color: #fff; }

/* 简易页脚（#foot）*/
#foot {
  padding: 24px 0;
  font-size: 13px;
  color: var(--mp-text-mute);
  text-align: center;
  border-top: 1px solid var(--mp-line);
  margin-top: var(--mp-gap-section);
}
#foot a { color: var(--mp-text-mute); }
#foot a:hover { color: var(--mp-primary); }

/* ── 16. 右侧浮动工具条 ──────────────────────────────────── */
.floatad-item {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-sm);
  box-shadow: var(--mp-shadow-1);
  transition: all var(--mp-dur) var(--mp-ease);
}
.floatad-item:hover {
  border-color: var(--mp-primary);
  transform: translateX(-2px);
}

/* ── 17. 滚动条 ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mp-bg); }
::-webkit-scrollbar-thumb {
  background: #C9CED8;
  border-radius: 5px;
  border: 2px solid var(--mp-bg);
}
::-webkit-scrollbar-thumb:hover { background: #A8AFBC; }

/* ── 18. 遗留页面视觉对齐 ────────────────────────────────── */
/* public/mulitpc 与 public/pc 驱动页面：补齐字体与基调落差 */
.page-wrap,
.main-wrap,
.content-wrap {
  background: var(--mp-bg);
  font-family: var(--mp-font);
  color: var(--mp-text);
}
.card-box,
.panel,
.list-box,
.table-box {
  background: var(--mp-surface);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-1);
}

/* 面包屑 */
.breadcrumb, .crumb, .position {
  font-size: 13px;
  color: var(--mp-text-sub);
}
.breadcrumb a, .crumb a, .position a { color: var(--mp-text-sub); }
.breadcrumb a:hover, .crumb a:hover, .position a:hover { color: var(--mp-primary); }

/* ── 19. 响应式降级（PC 为主，向下平滑过渡）────────────── */
@media (max-width: 1320px) {
  .ct1180, .w1180, .content-box {
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }
  .course-box .course-list, .course-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .course-box .course-list, .course-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-box .live-list, .live-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundle-box .bundle-list, .bundle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consultation-box .consultation-list, .consultation-list,
  .advisory-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 20. 帮助中心 article.html（info.css DOM，左图右文两列卡片） ─── */
/* 2026-09-30 用户反馈：右侧空白、右对齐、一行 2 个，卡片圆角美化 */
/* info.css 原写死 li{width:580px;margin-right:20px;height:188px;padding:20px} → 1180 容器 */
/* 现统一 1280：改为 Grid 2 列自适应，gap 16，padding 收紧，圆角阴影 */

.tab-content > ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0;
  margin: 0;
  list-style: none;
}
.tab-content > ul > li.border-bg {
  width: auto !important;
  height: auto !important;          /* 改掉写死的 188px，让内容撑开 */
  min-height: 152px;
  margin: 0 !important;              /* gap 接管间距 */
  padding: 16px !important;          /* 改掉写死的 20px，留给图片更高精度 */
  border-radius: var(--mp-r-md) !important;   /* 12px */
  background: #fff !important;
  box-shadow: var(--mp-shadow-1) !important;
  border: 1px solid var(--mp-line-soft);
  transition: transform .25s var(--mp-ease), box-shadow .25s var(--mp-ease), border-color .25s var(--mp-ease);
  overflow: hidden;
}
.tab-content > ul > li.border-bg:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-2) !important;
  border-color: rgba(232,80,58,.35);
}
.tab-content > ul > li.border-bg > a {
  display: flex !important;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.tab-content > ul > li.border-bg .item-img {
  width: 220px !important;
  height: 120px !important;
  flex: 0 0 220px;
  margin-right: 0 !important;
  border-radius: var(--mp-r-sm) !important;
  overflow: hidden;
  background: var(--mp-fill);
}
.tab-content > ul > li.border-bg .item-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .35s var(--mp-ease);
}
.tab-content > ul > li.border-bg:hover .item-img img { transform: scale(1.04); }

.tab-content > ul > li.border-bg .item-content {
  width: auto !important;            /* 改掉写死 270px → flex:1 自适应 */
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding-right: 32px;                /* 给浏览量图标留位 */
}
.tab-content > ul > li.border-bg .item-content .item-title h1 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  line-height: 1.45;
  margin: 0 0 8px !important;
  transition: color .25s var(--mp-ease);
}
.tab-content > ul > li.border-bg:hover .item-content .item-title h1 {
  color: var(--mp-primary);
}
.tab-content > ul > li.border-bg .item-content .item-detail p {
  font-size: 13px !important;
  color: var(--mp-text-sub) !important;
  line-height: 1.6;
  margin: 0 0 8px;
  -webkit-line-clamp: 2;
}
.tab-content > ul > li.border-bg .item-content .item-other {
  position: static !important;        /* 改掉绝对定位，避免被 height:188 限制 */
  bottom: auto !important;
  width: auto !important;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--mp-line-soft);
  color: var(--mp-text-mute);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-content > ul > li.border-bg .item-content .item-other .item-time { color: var(--mp-text-mute); }
.tab-content > ul > li.border-bg .item-content .item-other .item-visit .eye-icon {
  filter: grayscale(1);
  opacity: .65;
}

/* 资讯 banner：info.css 给 sub-banner 设了 padding-top:90px + height:240px（与详情页共用） */
/* 帮助中心 banner 我们用 project 提供的子页 banner 图，宽度跟随 1280 容器铺满 */
.tab-content ~ .page,
.content-box > .page {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 32px;
}
.tab-content ~ .page .layui-laypage a,
.tab-content ~ .page .layui-laypage span,
.content-box > .page .layui-laypage a,
.content-box > .page .layui-laypage span {
  border-radius: var(--mp-r-sm) !important;
  background: #fff !important;
}
.tab-content ~ .page .layui-laypage .layui-laypage-curr em,
.content-box > .page .layui-laypage .layui-laypage-curr em {
  background: var(--mp-primary) !important;
  color: #fff !important;
  border-radius: var(--mp-r-sm) !important;
}

/* 响应式降级（与全站一致） */
@media (max-width: 1320px) {
  .tab-content > ul { gap: 14px !important; }
  .tab-content > ul > li.border-bg .item-img { flex-basis: 200px !important; width: 200px !important; }
}
@media (max-width: 760px) {
  .tab-content > ul { grid-template-columns: minmax(0, 1fr) !important; }
  .tab-content > ul > li.border-bg .item-img { flex-basis: 140px !important; width: 140px !important; height: 90px !important; }
  .tab-content > ul > li.border-bg .item-content { padding-right: 0; }
}

/* ── 21. 套餐详情页 packages/detail/*.html（bundle.css DOM 接管） ─── */
/* 2026-09-30 用户反馈：热门课程卡片右对齐，左边宽度调整可放 2 个卡片 */
/* bundle.css 原 .content-left 700px + .course-item 210x228 上下结构，浪费空间 */
/* bundle.css 原 .content-right 460px + .course-item-h 横向卡片左对齐，右侧空白 51px */
/* 方案：双栏改 Grid，左侧 1fr 弹性 + 右侧 460px 固定；左侧卡片改横向 2 列；右侧卡片右对齐 */

/* 21.1 双栏布局（去 float，改 grid） */
.bundle-detail-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 460px !important;
  gap: 20px !important;
  align-items: start;
  overflow: visible !important;
}
.bundle-detail-content .content-left,
.bundle-detail-content .content-right {
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
}

/* 21.2 左侧「包含课程」卡片改横向 + 2 列均布铺满 */
.bundle-detail-content .content-left .detail-course ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px;
  flex-wrap: nowrap !important;
}
.bundle-detail-content .content-left .detail-course .course-item {
  margin: 0 !important;
  width: auto !important;
  border: 1px solid var(--mp-line-soft) !important;
  border-radius: var(--mp-r-md) !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: var(--mp-shadow-1);
  transition: transform .25s var(--mp-ease), box-shadow .25s var(--mp-ease), border-color .25s var(--mp-ease);
}
.bundle-detail-content .content-left .detail-course .course-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-2);
  border-color: rgba(232,80,58,.35);
}
.bundle-detail-content .content-left .detail-course .course-item > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: 100% !important;
  height: auto !important;
  min-height: 140px;
  padding: 12px !important;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.bundle-detail-content .content-left .detail-course .course-item-banner {
  width: 160px !important;
  height: 91px !important;
  flex: 0 0 160px;
  border-radius: var(--mp-r-sm) !important;
  object-fit: cover !important;
  transition: transform .35s var(--mp-ease);
}
.bundle-detail-content .content-left .detail-course .course-item:hover .course-item-banner { transform: scale(1.04); }
.bundle-detail-content .content-left .detail-course .course-item-mask,
.bundle-detail-content .content-left .detail-course .course-tag {
  display: none !important;
}
.bundle-detail-content .content-left .detail-course .course-item-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  position: static !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bundle-detail-content .content-left .detail-course .course-item-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  line-height: 1.5;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s var(--mp-ease);
}
.bundle-detail-content .content-left .detail-course .course-item:hover .course-item-title {
  color: var(--mp-primary);
}
.bundle-detail-content .content-left .detail-course .course-item-type {
  display: none !important;
}
.bundle-detail-content .content-left .detail-course .course-item-price {
  width: auto !important;
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px !important;
}
.bundle-detail-content .content-left .detail-course .course-item-price span:first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--mp-primary) !important;
}
.bundle-detail-content .content-left .detail-course .course-item-price span:last-child {
  font-size: 12px;
  color: var(--mp-text-mute);
  background: var(--mp-fill);
  padding: 2px 8px;
  border-radius: 999px;
}

/* 21.3 右侧「热门课程」sidebar 卡片右对齐（卡片本身贴右边） */
.bundle-detail-content .content-right {
  background: #fff !important;
  border-radius: var(--mp-r-md) !important;
  padding: 18px !important;
  box-shadow: var(--mp-shadow-1);
}
.bundle-detail-content .content-right .right-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  line-height: 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mp-primary);
  margin-bottom: 10px;
  display: inline-block;
  border-radius: 0;
}
.bundle-detail-content .content-right .course-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* 卡片宽 100%，右缘贴 sidebar 右缘 */
  gap: 0;
  margin-top: 0 !important;
}
.bundle-detail-content .content-right .course-items > a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.bundle-detail-content .content-right .course-item-h {
  display: flex !important;
  align-items: stretch;
  border-bottom: 1px dashed var(--mp-line-soft) !important;
  padding: 12px 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  transition: background .2s var(--mp-ease);
  border-radius: var(--mp-r-sm);
}
.bundle-detail-content .content-right .course-items > a:hover .course-item-h {
  background: var(--mp-fill);
}
.bundle-detail-content .content-right .course-item-h:last-child {
  border-bottom: none !important;
}
.bundle-detail-content .content-right .course-item-h .img {
  width: 150px !important;
  height: 85px !important;
  flex: 0 0 150px !important;
  border-radius: var(--mp-r-sm);
  overflow: hidden;
}
.bundle-detail-content .content-right .course-item-h .img > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .35s var(--mp-ease);
}
.bundle-detail-content .content-right .course-items > a:hover .img > img { transform: scale(1.04); }
.bundle-detail-content .content-right .course-item-h .info {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  padding: 0 0 0 12px !important;
  position: relative !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bundle-detail-content .content-right .course-item-h .info .title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--mp-text) !important;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s var(--mp-ease);
}
.bundle-detail-content .content-right .course-items > a:hover .info .title {
  color: var(--mp-primary);
}
.bundle-detail-content .content-right .course-item-h .info .price {
  margin-top: 8px !important;
  color: var(--mp-primary) !important;
  font-weight: 600;
  font-size: 15px !important;
}
.bundle-detail-content .content-right .course-item-h .info .num {
  font-size: 12px !important;
  color: var(--mp-text-mute) !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
}

/* 21.4 响应式 */
@media (max-width: 1320px) {
  .bundle-detail-content { grid-template-columns: minmax(0,1fr) 380px !important; gap: 16px !important; }
  .bundle-detail-content .content-right .course-item-h .img { flex-basis: 160px !important; width: 160px !important; height: 92px !important; }
}
@media (max-width: 960px) {
  .bundle-detail-content { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 640px) {
  .bundle-detail-content .content-left .detail-course ul { grid-template-columns: minmax(0,1fr) !important; }
  .bundle-detail-content .content-left .detail-course .course-item-banner { flex-basis: 140px !important; width: 140px !important; height: 80px !important; }
}
/* ============================================================
   22. 文章详情页 article/detail/*.html（info.css DOM）
   ============================================================ */
/* 2026-09-30 用户反馈：宽度没有 1280px，进行调整
   原 info.css 写死 .newslist-left 780px + .newslist-right 380px + float → 总 1180 容器
   现统一 1280：双栏改 Grid（1fr + 360px 固定 sidebar），sidebar 卡片圆角阴影
   同时升级详情区排版（标题/段落/图/列表），与全站主题一致 */

/* 22.1 容器扩到 1280 + 居中（覆盖 detail.html 模板内联 margin:90px auto 0） */
.content-box.body,
.newslist-content {
  max-width: var(--mp-container, 1280px) !important;
  width: var(--mp-container, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.newslist-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 20px !important;
  align-items: start;
  padding-top: 24px;
  overflow: visible !important;
}
.newslist-content::after { content: none !important; }

/* 22.2 左主区 */
.newslist-content .newslist-left,
.newslist-content .newsdetail-left {
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
  background: #fff;
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-md);
  box-shadow: var(--mp-shadow-1);
  overflow: hidden;
}
.newsdetail-left .detail-header {
  padding: 24px 28px 16px !important;
  border-bottom: 1px solid var(--mp-line-soft) !important;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}
.newsdetail-left .detail-header .detail-title h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mp-text) !important;
  line-height: 1.4;
  margin-bottom: 14px !important;
  -webkit-line-clamp: 3 !important;
}
.newsdetail-left .detail-header .detail-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mp-text-mute);
}
.newsdetail-left .detail-header .detail-sub .detail-time { display: flex; align-items: center; gap: 12px; }
.newsdetail-left .detail-header .detail-sub .detail-time p { color: var(--mp-text-mute); }
.newsdetail-left .detail-header .detail-sub .detail-look span {
  margin-left: 0 !important;
  color: var(--mp-text-mute);
}
.newsdetail-left .detail-header .detail-sub .detail-look span .eye-icon {
  filter: grayscale(1); opacity: .65;
}

.newsdetail-left .detail-content {
  padding: 24px 28px 32px !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--mp-text) !important;
}
.newsdetail-left .detail-content p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--mp-text) !important;
  margin-bottom: 14px;
}
.newsdetail-left .detail-content p img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--mp-r-sm);
  display: block;
  margin: 12px auto;
  box-shadow: var(--mp-shadow-1);
}
.newsdetail-left .detail-content h1,
.newsdetail-left .detail-content h2,
.newsdetail-left .detail-content h3 {
  font-weight: 700;
  color: var(--mp-text);
  margin: 24px 0 12px;
  line-height: 1.4;
  position: relative;
  padding-left: 12px;
}
.newsdetail-left .detail-content h1 { font-size: 22px; }
.newsdetail-left .detail-content h2 { font-size: 19px; }
.newsdetail-left .detail-content h3 { font-size: 17px; }
.newsdetail-left .detail-content h2::before,
.newsdetail-left .detail-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--mp-primary);
  border-radius: 2px;
}
.newsdetail-left .detail-content ul,
.newsdetail-left .detail-content ol {
  margin: 12px 0 16px 24px;
}
.newsdetail-left .detail-content li { margin-bottom: 6px; line-height: 1.8; }
.newsdetail-left .detail-content a { color: var(--mp-primary); text-decoration: none; }
.newsdetail-left .detail-content a:hover { text-decoration: underline; }
.newsdetail-left .detail-content strong { color: var(--mp-text); font-weight: 600; }

.newsdetail-left .detail-page {
  padding: 20px 28px !important;
  height: auto !important;
  border-top: 1px dashed var(--mp-line-soft);
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.newsdetail-left .detail-page > div { font-size: 14px; color: var(--mp-text-sub); }
.newsdetail-left .detail-page > div a {
  color: var(--mp-primary) !important;
  text-decoration: none;
}
.newsdetail-left .detail-page > div a:hover { text-decoration: underline; }
.newsdetail-left .detail-page .prev-page { margin-bottom: 0 !important; }

/* 22.3 右侧 sidebar */
.newslist-content .newslist-right {
  float: none !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-info {
  width: auto !important;
  margin-bottom: 0 !important;
  background: #fff;
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-md);
  box-shadow: var(--mp-shadow-1);
  overflow: hidden;
  transition: transform .25s var(--mp-ease), box-shadow .25s var(--mp-ease);
}
.news-info:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-2);
}
.news-info .news-info-title {
  height: auto !important;
  line-height: 1 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--mp-line-soft) !important;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  display: flex;
  align-items: center;
}
.news-info .news-info-title h1 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
  position: relative;
  padding-left: 10px;
}
.news-info .news-info-title h1::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--mp-primary);
  border-radius: 2px;
}
.news-info .news-info-detail { padding: 8px 12px !important; }
.news-info .news-info-detail ul li {
  margin-bottom: 0 !important;
  border-bottom: 1px dashed var(--mp-line-soft);
}
.news-info .news-info-detail ul li:last-child { border-bottom: none; }
.news-info .news-info-detail ul li a {
  display: block !important;
  padding: 10px 12px 10px 22px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mp-text) !important;
  font-size: 13px !important;
  line-height: 1.6;
  position: relative;
  transition: color .2s var(--mp-ease), background .2s var(--mp-ease);
  border-radius: var(--mp-r-sm);
}
.news-info .news-info-detail ul li a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--mp-text-mute);
  border-radius: 50%;
  transition: background .2s var(--mp-ease), transform .2s var(--mp-ease);
}
.news-info .news-info-detail ul li a:hover {
  color: var(--mp-primary) !important;
  background: var(--mp-fill);
}
.news-info .news-info-detail ul li a:hover::before {
  background: var(--mp-primary);
  transform: translateY(-50%) scale(1.3);
}
.news-info .news-info-detail ul li .icon-item { display: none !important; }

/* 22.4 面包屑：与全站一致 */
.breadcrumb-box {
  max-width: var(--mp-container, 1280px);
  margin: 0 auto;
  padding: 12px 0 0;
}
.breadcrumb-box ul {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mp-text-mute);
}
.breadcrumb-box ul li a {
  color: var(--mp-text-sub);
  text-decoration: none;
  transition: color .2s var(--mp-ease);
}
.breadcrumb-box ul li a:hover { color: var(--mp-primary); }
.breadcrumb-box ul li i {
  color: var(--mp-text-mute);
  margin: 0 4px;
}
.breadcrumb-box ul li.active { color: var(--mp-primary); }
.breadcrumb-box ul li.active i { display: none; }

/* 22.5 响应式 */
@media (max-width: 1320px) {
  .newslist-content { gap: 16px !important; grid-template-columns: minmax(0,1fr) 320px !important; }
}
@media (max-width: 960px) {
  .newslist-content { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 640px) {
  .newsdetail-left .detail-header { padding: 18px 16px 12px !important; }
  .newsdetail-left .detail-header .detail-title h1 { font-size: 19px !important; }
  .newsdetail-left .detail-content { padding: 18px 16px 24px !important; }
}/* ============================================================
 * 23. 全站面包屑美化（覆盖 bass.css + 22.4）
 * ------------------------------------------------------------
 * 目标：告别胶囊感；斜杠 → chevron ›；当前页主色高亮
 * 适用范围：template/mulit/pc 下使用 .breadcrumb-box 的 8 个模板
 * 实现方式：纯 CSS，不动模板；用 !important 覆盖 bass.css/22.4
 * ============================================================ */
.breadcrumb-box {
  max-width: var(--mp-container, 1280px) !important;
  margin: 0 auto !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--mp-line-soft);
  background: transparent !important;
}
.breadcrumb-box ul {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--mp-text-sub);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-box ul li {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}
.breadcrumb-box ul li a {
  display: inline-block;
  color: var(--mp-text-sub) !important;
  font-weight: 400;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--mp-r-sm);
  transition: color .2s var(--mp-ease), background-color .2s var(--mp-ease);
}
.breadcrumb-box ul li a:hover {
  color: var(--mp-primary) !important;
  background-color: var(--mp-primary-soft);
}

/* 分隔符：原 <i>/</i> → chevron › （CSS-only） */
.breadcrumb-box ul li i {
  font-style: normal !important;
  color: var(--mp-text-mute) !important;
  font-size: 0;
  margin: 0 2px;
  user-select: none;
}
.breadcrumb-box ul li i::before {
  content: "\203A"; /* › */
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
  color: var(--mp-text-mute);
}

/* 当前页（最后一个 li / .active）：主色 + 字重 600 */
.breadcrumb-box ul li:last-child,
.breadcrumb-box ul li.active {
  color: var(--mp-primary);
  font-weight: 600;
}
.breadcrumb-box ul li:last-child a,
.breadcrumb-box ul li.active a {
  color: var(--mp-primary) !important;
  font-weight: 600;
  background: transparent;
  cursor: default;
}
.breadcrumb-box ul li:last-child i,
.breadcrumb-box ul li.active i { display: none !important; }

/* 23.1 响应式 */
@media (max-width: 960px) {
  .breadcrumb-box { padding: 12px 16px !important; }
  .breadcrumb-box ul { font-size: 13px; }
}
@media (max-width: 640px) {
  .breadcrumb-box ul li a { padding: 3px 5px; }
  .breadcrumb-box ul li i::before { font-size: 14px; }
}/* ============================================================
 * 24. 全站分页按钮美化（覆盖 TP8 默认 .pagination 垂直堆叠）
 * ------------------------------------------------------------
 * 目标：把 TP8 Bootstrap 风格 <ul class="pagination"> 重排为
 *       横向圆角按钮组；与主色 #E8503A 一致
 * 适用范围：template/mulit/pc 下使用 <div class="page"> 的 11 个模板
 * 触发：articlelist/1/10.html 等分页区域
 * 实现：纯 CSS（!important 覆盖 TP 内联样式）
 * ============================================================ */
.page {
  padding: 24px 0 40px !important;
}
.page .pagination {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1;
}
.page .pagination li {
  margin: 0 !important;
}
.page .pagination li > a,
.page .pagination li > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--mp-r-sm) !important;
  border: 1px solid var(--mp-line) !important;
  background: var(--mp-surface);
  color: var(--mp-text-sub);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s var(--mp-ease),
              background-color .2s var(--mp-ease),
              border-color .2s var(--mp-ease),
              box-shadow .2s var(--mp-ease);
}
/* hover：主色描边 + 浅橙底 */
.page .pagination li > a:hover {
  color: var(--mp-primary) !important;
  background-color: var(--mp-primary-soft) !important;
  border-color: var(--mp-primary) !important;
}
/* 当前页：主色填充 */
.page .pagination li.active > span,
.page .pagination li.active > a {
  color: #fff !important;
  background-color: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  font-weight: 600;
  cursor: default;
  box-shadow: 0 2px 6px rgba(232, 80, 58, .25);
}
/* 禁用页（上一页/下一页 已无页可去） */
.page .pagination li.disabled > span,
.page .pagination li.disabled > a {
  color: var(--mp-text-mute) !important;
  background: var(--mp-fill) !important;
  border-color: var(--mp-line) !important;
  cursor: not-allowed;
  opacity: .8;
}

/* 24.1 响应式 */
@media (max-width: 640px) {
  .page { padding: 18px 0 30px !important; }
  .page .pagination { gap: 4px; font-size: 13px; }
  .page .pagination li > a,
  .page .pagination li > span { min-width: 32px; height: 32px; padding: 0 8px; }
}
/* ============================================================
 * 25. 课程卡片播放图标全隐藏（首页 + course.html）
 * - .course-item-mask：hover 时中央 48×48 播放按钮
 * - .course-tag img：左下角 22px 视频类型角标
 * 用户反馈两处都是「播放器图片」，不需要，统一移除
 * CSS-only，不动模板（很多模板里有 <div class="course-item-mask">）
 * ============================================================ */
.course-item-mask { display: none !important; }
.course-tag img { display: none !important; }