[hidden] { display: none !important; }
:root {
  --primary: #2BB299;
  --primary-dark: #1E9C86;
  --accent: #F7D400;
  --accent-soft: #FFF9D6;
  --sky: #35A7E0;
  --ink: #1F332E;
  --muted: #6C817B;
  --bg: #F3FBF8;
  --card: #ffffff;
  --line: #DCEBE6;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(31, 51, 46, 0.08);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.topbar { background: var(--primary-dark); color: #eafff9; font-size: 13px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 12px; }
.topbar-right { opacity: 0.85; white-space: nowrap; }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand-logo { height: 52px; width: auto; }
nav.main { display: flex; gap: 2px; flex-wrap: wrap; }
nav.main a { padding: 8px 12px; border-radius: 999px; font-size: 15px; color: var(--ink); font-weight: 500; }
nav.main a:hover { background: var(--bg); color: var(--primary-dark); }
nav.main a.active { background: var(--primary); color: #fff; }

.hero {
  background: linear-gradient(135deg, #1E9C86 0%, #2BB299 60%, #46C6AC 100%);
  color: #fff; padding: 78px 0 70px; position: relative; overflow: hidden;
}
.hero:before {
  content: ""; position: absolute; left: -60px; bottom: -120px; width: 360px; height: 360px;
  border-radius: 50%; background: rgba(247, 212, 0, 0.16);
}
.hero:after {
  content: ""; position: absolute; right: -70px; top: -80px; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(53, 167, 224, 0.20);
}
.hero-inner { position: relative; z-index: 1; }
.hero-kicker { display: inline-block; font-size: 13px; letter-spacing: 2px; background: rgba(255,255,255,0.18); padding: 5px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: 52px; margin: 0 0 14px; line-height: 1.15; letter-spacing: 2px; }
.hero p { font-size: 19px; opacity: 0.94; max-width: 640px; margin: 0 0 28px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-types { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-types span { border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 5px 16px; font-size: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px;
  font-weight: 700; border: 2px solid transparent; cursor: pointer; font-size: 15px;
}
.btn-accent { background: var(--accent); color: #3a3000; box-shadow: 0 8px 20px rgba(247,212,0,0.35); }
.btn-primary-btn, .btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,0.75); color: #fff; }
.btn-outline { border-color: var(--primary); color: var(--primary); background: #fff; }
.btn-block { width: 100%; justify-content: center; }

.section { padding: 58px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
.section-head h2 { font-size: 28px; margin: 0; }
.section-head .sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.section-head a.more, a.more { color: var(--primary-dark); font-weight: 700; white-space: nowrap; }
.badge {
  display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: #9a7b00; font-weight: 700;
}
.badge.source-mp { background: #E4F7F2; color: #1E9C86; }
.badge.source-video { background: #E4F1FB; color: #1c72a8; }
.badge.source-miniprogram { background: #FFF9D6; color: #9a7b00; }
.badge.status-on { background: #E4F7F2; color: #1E9C86; }
.badge.status-off { background: #F1F1F1; color: #888; }

/* 营种活动卡片 */
.qr-mini { position: absolute; right: 10px; bottom: 10px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); background: #fff; }
.qr-mini img { width: 100%; height: 100%; object-fit: contain; }
.product-card.hide { display: none; }
/* 营种活动：按分类 Tab 分组展示 */
.product-group { margin-bottom: 38px; }
.product-group:last-child { margin-bottom: 0; }
.product-group.hide { display: none; }
.product-group .group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.product-group .group-head h2 { font-size: 22px; margin: 0; }
.product-group .group-head .muted { font-size: 13px; color: var(--muted); }
.product-group .group-more { display: flex; justify-content: center; margin-top: 20px; }
.product-card.extra-hide { display: none; }
.kv .price { color: #E8613C; font-weight: 800; font-size: 16px; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease;
}
.card:hover { transform: translateY(-4px); }
.card .thumb { aspect-ratio: 16 / 10; background: #E4F1EC center/cover no-repeat; position: relative; }
.card .thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 34px;
  background: rgba(30, 156, 134, 0.28);
}
.card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { margin: 0; font-size: 17px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card .price { color: #E8613C; font-weight: 800; font-size: 20px; }
.card .price small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }

.trust { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.trust .item { background: #fff; border-radius: var(--radius); padding: 22px 10px; text-align: center; box-shadow: var(--shadow); }
.trust .num { font-size: 26px; font-weight: 800; color: var(--primary-dark); }
.trust .label { color: var(--muted); font-size: 13px; }

/* 2026-09-18 按需求：首页「课程体系」卡片取消顶部 4px 主色横条，只保留白底 + 圆角 + 阴影 */
.product { background: #fff; border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); }
.product .p-icon { font-size: 30px; }
.product h3 { margin: 10px 0 8px; font-size: 19px; color: var(--primary-dark); }
.product p { margin: 0; color: var(--muted); font-size: 14px; }

.about-brief { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: start; }
.about-brief-text h2 { font-size: 28px; margin: 0 0 14px; }
.about-brief-text p { color: #33473f; }
.value-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.value-chip { background: var(--accent); color: #3a3000; font-weight: 700; border-radius: 999px; padding: 6px 18px; font-size: 14px; }
.highlight-card { background: linear-gradient(160deg, #1E9C86, #2BB299); color: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.highlight-card .hc-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.highlight-card ul { margin: 0; padding-left: 18px; }
.highlight-card li { margin: 7px 0; font-size: 14px; opacity: 0.96; }

.page-head { background: #fff; border-bottom: 1px solid var(--line); padding: 44px 0 32px; }
.page-head h1 { margin: 0 0 8px; font-size: 32px; }
.page-head p { margin: 0; color: var(--muted); }

.article-layout, .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.prose { background: #fff; border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow); }
.prose h1.title { font-size: 27px; margin: 0 0 14px; }
.prose .article-meta { color: var(--muted); font-size: 13px; margin-bottom: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.prose img { border-radius: 12px; margin: 14px auto; }
.prose p { margin: 1em 0; }
.prose h2 { font-size: 21px; margin: 1.4em 0 .6em; color: var(--primary-dark); }
.prose blockquote { border-left: 4px solid var(--primary); margin: 1em 0; padding: 6px 16px; background: var(--bg); color: #3a4d46; }
.prose video { width: 100%; border-radius: 12px; background: #000; }

/* ==========================================================================
   富文本内容归一化 `.rich`（2026-09-21）
   --------------------------------------------------------------------------
   背景：后台富文本是从飞书 / 携程 / 公众号等**外部系统复制粘贴**进来的 HTML，
   自带一大堆内联样式（单条最长 110 字符）：
     position:absolute; top:-50px;  zoom:1;  font-size:22px/24px/12px;
     line-height:1.5em/1.8/2.5em;  font-family:微软雅黑/宋体/Helvetica;  margin:0 0 15px;
   **内联样式优先级高于任何类选择器**，所以站点的 .prose 排版规则全被压掉 →
   表现就是「编辑器里看着还行，一发到官网就乱」（字号忽大忽小、段距不齐、元素飞出容器）。

   修法：给富文本内容单独包一层 `.rich`，用 !important 把「结构性」样式强行归零、再按站点规则重建；
   同时**保留「轻量格式」**（颜色 / 加粗 / 倾斜 / 对齐 / 列表 / 链接），让用户有意设置的格式不丢。

   ⚠️ 两条铁律，动这块务必遵守：
   1. **作用域只能到 `.rich`，绝不能写成 `.prose xxx`**。`.prose` 下还有 .qual / .stat-inline /
      .mvv-item / .coach-chip / .case-period 等站点自有组件，它们靠 padding/margin 成形，
      被 `padding:0!important` 一锅端会直接改坏版式。
   2. 后台编辑器的 `.rte` 里有一份**等价副本**（src/admin/public/index.html 的内嵌 style），
      保证「编辑时看到的 = 官网上看到的」。改这里要同步改那边，否则又会出现所见非所得。
   ========================================================================== */
/* ===== 原有版式板块区（关于我们 / 导师团队 / 家长好评 / 定制服务） =====
   板块间距统一由「相邻兄弟」规则负责 —— 板块可以自由上下排序，
   所以模板里**不能再写死 margin-top / margin-bottom**（否则首块多、末块少）。 */
.base-blocks > * + * { margin-top: 22px; }

/* ① 兜底（作用于任意标签）：定位 / 浮动 / 缩放 / 字体系列 —— 这些属性不管加在什么标签上都会破坏版面，
      必须无条件清掉。用 `*` 是为了**防止漏标签**（本轮就漏过 <a>：8 个 position:absolute 全在 <a> 上）。 */
.rich * {
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  inset: auto !important;
  float: none !important;
  zoom: normal !important;
  transform: none !important;
  text-indent: 0 !important;
  -webkit-text-size-adjust: auto !important;
  text-size-adjust: auto !important;
  background-image: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.rich :is(pre, code, kbd, samp) { font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace !important; }
/* ② 块级归零：margin / padding / 宽度 / 边框 —— 只对块级与容器类标签做（img 除外，它的 width 要留给内联样式） */
.rich :is(article, section, aside, header, footer, main, div, span, p, li, td, th,
          h1, h2, h3, h4, h5, h6, blockquote, figure, figcaption, font, center, a) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* —— 归零之后，按站点规则把语义排版重建回来（写在后面 + 选择器更具体，才能压住上面那条） —— */
.rich :is(p, div) { margin: 1em 0 !important; }
.rich :is(h1, h2, h3, h4, h5, h6) { margin: 1.4em 0 .6em !important; color: var(--primary-dark); }
.rich h1 { font-size: 26px !important; }
.rich h2 { font-size: 21px !important; }
.rich h3 { font-size: 18px !important; }
.rich :is(h4, h5, h6) { font-size: 16px !important; }
.rich :is(ul, ol) { margin: 1em 0 !important; padding-left: 1.6em !important; }
.rich ul { list-style: disc !important; }
.rich ol { list-style: decimal !important; }
.rich li { margin: .35em 0 !important; }
.rich blockquote { margin: 1em 0 !important; padding: 8px 16px !important; border-left: 4px solid var(--primary) !important; background: var(--bg) !important; }
.rich hr { margin: 1.6em 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; }
.rich :is(strong, b) { font-weight: 700 !important; }
.rich :is(em, i) { font-style: italic !important; }
.rich :is(u) { text-decoration: underline !important; }
.rich :is(s, del) { text-decoration: line-through !important; }
.rich a { color: var(--primary-dark) !important; text-decoration: underline !important; }
.rich table { margin: 1em 0 !important; width: 100% !important; border-collapse: collapse !important; }
.rich :is(th, td) { padding: 9px 12px !important; border: 1px solid var(--line) !important; text-align: left !important; }
.rich th { background: var(--bg) !important; font-weight: 700 !important; }
/* 图片：只锁 max-width 与高度，**width 留给内联样式**（编辑器里调的大小才会生效）。
   ⚠️ 不要把 width 写成 !important，否则「图片大小调整」会全部失效。
   缺省居中（与老版 .prose img{margin:14px auto} 一致，也是用户对"插入一张图"的预期），
   需要贴边时由编辑器写 data-align="left" / "right"。 */
.rich img { display: block !important; max-width: 100% !important; height: auto !important; margin: 14px auto !important; border-radius: 12px !important; }
.rich img[data-align="center"] { margin-left: auto !important; margin-right: auto !important; }
.rich img[data-align="right"] { margin-left: auto !important; margin-right: 0 !important; }
.rich img[data-align="left"] { margin-left: 0 !important; margin-right: auto !important; }
/* 字号档位（用属性而不是内联 font-size，这样不会被上面的归零规则清掉） */
.rich [data-sz="s"] { font-size: .88em !important; }
.rich [data-sz="l"] { font-size: 1.15em !important; }
/* 空段落不留白（外部粘贴常见 `<p><br></p>` 空行，会撑出多余间距） */
.rich p:empty { display: none !important; }
.rich p:has(> br:only-child) { display: none !important; }
/* `.rich-block`：正文里含块级标签（粘贴过列表/表格/多段）时由 richOrPlain 生成的兜底容器。
   `.rich` 的归零规则只管后代、不管自己，所以这里按所在组件把「原来是 <p> 时的样式」补回来。 */
.rich-block { margin: 1em 0; }
.about-brief-text .rich-block { color: #33473f; }
.case .rich-block, .subsidiary .rich-block, .product .rich-block { margin: 0; color: var(--muted); font-size: 14px; }
.list-item .rich-block { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.cta-band .rich-block { margin: 0; opacity: 0.92; }
.sync-note .rich-block { margin: 0; }

/* ===== 公众号原文正文：`.rich-mp`（2026-09-21 新增）=====
   背景：`.rich` 那套规则是用 `!important` 把正文的行内样式**强制归零**再按站点风格重建的，
   它是为「后台手写/粘贴的富文本」做的（见上面 ② 块）。但公众号文章的排版**完全依赖行内样式**
   （实测一篇 361KB 的正文里有 110 处内联 font-size、1164 处内联 margin），套上去等于把所有
   字号/行距/段间距/背景色块/圆角全抹平 → 用户反馈「排版全乱了」。

   所以：**公众号正文一律用 `.rich-mp`，不套 `.rich`**；`.rich` 只留给后台手写内容。
   `.rich-mp` 本身只做两件事：
     ① 复刻微信阅读栏的基础排版（基准 = 微信 `#js_content` 的实测计算样式，
        fontSize 17px / lineHeight 1.6 / color rgba(0,0,0,.9) / letterSpacing .544px / textAlign justify）；
     ② 必要的兜底（图片不超宽、表格不撑破），**一律不用 `!important`**，
        这样文章自己的行内样式永远优先 —— 「一模一样」的关键就在这里。
   ⚠️ 不要往这里加 `!important`，也不要把它跟 `.rich` 混用。 */
.rich-mp {
  max-width: 677px;              /* 与微信阅读栏同宽（实测 #js_content 与 .rich_media_wrp 都是 677px） */
  margin: 0 auto;
  font-family: "PingFang SC NEW", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, .9);
  letter-spacing: .544px;
  text-align: justify;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
/* 微信是靠「删掉默认间距、一切由行内 margin 决定」来排版的（实测微信里段落的 margin 为 0），
   而浏览器 UA 默认给 p 1em 上下边距 —— 不归零的话段间距会比公众号大一倍。
   这几条只设「没有行内样式时的默认值」，行内样式依然优先。 */
.rich-mp :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure, table) { margin: 0; }
.rich-mp :is(ul, ol) { padding-left: 1.2em; }
.rich-mp ul { list-style: disc; }
.rich-mp ol { list-style: decimal; }
.rich-mp img { max-width: 100%; }
.rich-mp table { max-width: 100%; }
/* 微信自己对正文后代有一条 `*{max-width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important}`
   —— 靠它保证文章里任何固定宽度都撑不破阅读栏（实测微信里正文段落的 max-width 计算值就是 100%）。
   这里照搬，只把作用域限定在 .rich-mp 内。⚠️ 这条是**唯一**允许用 !important 的地方，
   因为它跟 WeChat 的行为一致，且不会覆盖任何影响「排版外观」的属性（只夹宽度和盒模型）。 */
.rich-mp * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}
.rich-mp { box-sizing: content-box; }
/* 中和站点全局与 `.prose` 带来的干扰（都用不带 `!important` 的高优先级选择器，行内样式依然优先）：
   · 全局 `img { display: block }` 会把图变成块级，而微信公众号的图是 inline（实测 computed display: inline）
     —— 图是 inline 时才会跟着 `<p style="text-align:center">` 居中，也才有正确的行内基线间距；
   · `.prose img { margin: 14px auto; border-radius: 12px }` 会给公众号的图强加外边距和圆角。 */
.prose .rich-mp img { display: inline; margin: 0; border-radius: 0; }
/* 编辑器给图片调大小/居中用的属性，在公众号正文里同样要生效 */
.rich-mp img[data-align="center"] { display: block; margin-left: auto; margin-right: auto; }
.rich-mp img[data-align="left"] { display: block; margin-left: 0; margin-right: auto; }
.rich-mp img[data-align="right"] { display: block; margin-left: auto; margin-right: 0; }
.rich-mp [data-sz="s"] { font-size: .88em; }
.rich-mp [data-sz="l"] { font-size: 1.15em; }
/* 微信图片有 #f7f7f7 占位底色（实测微信里 img 的 background-color 就是它），
   我们转存的是本地图，补上同样的观感 */
.rich-mp img { background-color: #f7f7f7; }
/* 小屏：微信在手机上是铺满阅读区的，这里也放开 677px 限制 */
@media (max-width: 740px) {
  .rich-mp { max-width: 100%; }
}
.aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 20px; }
.panel { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.panel h3 { margin: 0 0 14px; font-size: 17px; }
.panel .qrcode { width: 180px; height: 180px; margin: 0 auto 12px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12px; padding: 10px; background: var(--bg); }
.panel .qrcode img { width: 100%; height: 100%; object-fit: contain; }
.kv { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); gap: 12px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); flex-shrink: 0; }

.list-vertical { display: flex; flex-direction: column; gap: 16px; }
.list-item { display: grid; grid-template-columns: 200px 1fr; gap: 18px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.list-item .thumb { background: #E4F1EC center/cover no-repeat; min-height: 130px; }
.list-item .body { padding: 18px 20px 18px 0; }
.list-item h3 { margin: 8px 0; font-size: 18px; }
.list-item p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }

.mvv { display: grid; gap: 14px; margin-top: 18px; }
.mvv-item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; background: var(--bg); border-radius: 12px; padding: 12px 16px; }
.mvv-label { color: #fff; background: var(--primary); border-radius: 8px; text-align: center; font-weight: 700; font-size: 14px; padding: 4px 0; }
.mvv-text { color: #33473f; }
.stat-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.stat-inline > div { background: var(--bg); border-radius: 12px; padding: 16px; text-align: center; }
.stat-inline strong { display: block; font-size: 24px; color: var(--primary-dark); }
.stat-inline span { color: var(--muted); font-size: 13px; }
.check-list { margin: 10px 0 0; padding-left: 20px; }
.check-list li { margin: 6px 0; }
.subsidiary { border-left: 4px solid var(--accent); padding: 4px 0 4px 16px; margin: 14px 0; }
.subsidiary h3 { margin: 0 0 4px; font-size: 17px; }
.subsidiary p { margin: 0; color: var(--muted); font-size: 14px; }
.qual-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.qual { background: #E4F7F2; color: #1E7C69; border: 1px solid #BFE9DF; border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.coach-names { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.coach-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.rule-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rule-table th, .rule-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.rule-table th { background: var(--primary); color: #fff; font-weight: 600; }
.rule-table tr:nth-child(even) td { background: var(--bg); }
.rule-table td:first-child { white-space: nowrap; color: var(--primary-dark); }

.review-quote { background: #fff; border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); margin: 0; border-top: 4px solid var(--primary); font-size: 15px; }
.review-from { margin-top: 12px; color: var(--muted); font-size: 13px; }

.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.case { background: #fff; border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.case-period { display: inline-block; background: var(--accent); color: #3a3000; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.case h3 { margin: 0 0 8px; font-size: 17px; color: var(--primary-dark); }
.case p { margin: 0; color: var(--muted); font-size: 14px; }
/* 独立板块标题（如「合作案例」直接排在色底容器上，不套白卡） */
.block-title { font-size: 21px; margin: 0 0 16px; color: var(--primary-dark); }
/* 「合作案例」可配图（2026-09-18：案例卡片支持后台传图） */
.case-img { margin: -22px -24px 14px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: #E4F1EC; }
.case-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.cta-band {
  background: linear-gradient(135deg, #1E9C86, #2BB299); color: #fff;
  border-radius: var(--radius); padding: 34px 36px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; box-shadow: var(--shadow); flex-wrap: wrap;
}
.cta-band h2 { margin: 0 0 6px; font-size: 24px; }
.cta-band p { margin: 0; opacity: 0.92; }

.sync-note { background: #fff; border-left: 4px solid var(--primary); border-radius: 10px; padding: 14px 18px; color: var(--muted); font-size: 13px; box-shadow: var(--shadow); }
.empty { background: #fff; border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--muted); box-shadow: var(--shadow); }

footer.site { background: #16302A; color: rgba(255,255,255,0.8); margin-top: 40px; padding: 48px 0 26px; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 28px; }
footer.site h4 { color: #fff; margin: 0 0 12px; font-size: 15px; }
footer.site a { display: block; color: rgba(255,255,255,0.72); font-size: 14px; padding: 3px 0; }
footer.site a:hover { color: #fff; }
.footer-logo { height: 46px; width: auto; }
.foot-note { display: block; color: rgba(255,255,255,0.7); font-size: 13px; padding: 3px 0; }
footer.site .bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 30px; padding-top: 18px; font-size: 13px; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1024px) {
  .trust { grid-template-columns: repeat(3, 1fr); }
  .about-brief { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .article-layout, .detail-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .cases { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  nav.main { display: none; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .trust, .stat-inline { grid-template-columns: 1fr; }
  .list-item { grid-template-columns: 1fr; }
  .list-item .body { padding: 0 18px 18px; }
  .hero h1 { font-size: 34px; }
  .topbar-right { display: none; }
  footer.site .cols { grid-template-columns: 1fr; }
}

.badge.source-image { background: #EAF3FF; color: #2b6cb0; }

.hero-media { padding: 0; min-height: 540px; display: flex; align-items: center; background: #16302a; }
.hero-media:before, .hero-media:after { display: none; }
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; transform: scale(1.02); }
.hero-slide.active { opacity: 1; }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 56, 48, 0.86) 0%, rgba(14, 56, 48, 0.58) 55%, rgba(14, 56, 48, 0.35) 100%); }
.hero-media .hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 84px; padding-bottom: 84px; }
.hero-dots { display: flex; gap: 10px; margin-top: 30px; }
.hero-dot { width: 34px; height: 5px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; }
.hero-dot.active { background: var(--accent); }

.gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.gallery-grid.square { grid-template-columns: repeat(4, 1fr); }
.gallery-grid.gallery-grid-coach { grid-template-columns: repeat(auto-fill, 125px); align-content: start; justify-content: start; }
.gallery-grid-shots { grid-template-columns: repeat(3, 1fr); }
/* 证书图片集：宽固定 250px，横图高 167 / 竖图高 375（朝向由构建期读原图尺寸→ is-land / is-port） */
.gallery-grid.gallery-grid-cert { grid-template-columns: repeat(auto-fill, min(250px, 100%)); align-content: start; justify-content: start; align-items: start; }
.gallery-grid-cert .gallery-item img { width: 100%; height: 167px; object-fit: cover; margin: 0; }
.gallery-grid-cert .gallery-item.is-port img { height: 375px; }
.gallery-grid.logo-wall { grid-template-columns: repeat(auto-fill, 100px); align-content: start; justify-content: start; }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: auto; border-radius: 12px; display: block; background: #E4F1EC; }
.gallery-item.square img { aspect-ratio: 1 / 1; object-fit: cover; }
/* 教练风采：固定 125 x 262.5 px 图片框 */
.gallery-grid-coach .gallery-item img { aspect-ratio: 125 / 262.5; object-fit: cover; margin: 0; }
.gallery-item figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.gallery-masonry { display: block; columns: 3; column-gap: 16px; }
.gallery-masonry .gallery-item { margin-bottom: 16px; break-inside: avoid; }
.gallery-item a { display: block; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow); position: relative; }
.gallery-item img { transition: transform .25s ease; }
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-item .video-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.gallery-item .video-badge::before { content: ''; width: 52px; height: 52px; border-radius: 50%; background: rgba(14,56,48,.55); backdrop-filter: blur(2px); position: absolute; }
.gallery-item .video-badge::after { content: '▶'; color: #fff; font-size: 20px; margin-left: 3px; position: relative; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.album-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease; }
.album-card:hover { transform: translateY(-4px); }
.album-cover { aspect-ratio: 4 / 3; background: #E4F1EC center/cover no-repeat; position: relative; }
.album-count { position: absolute; right: 12px; bottom: 12px; background: rgba(14, 56, 48, 0.78); color: #fff; font-size: 12px; border-radius: 999px; padding: 3px 12px; }
.album-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.album-body h3 { margin: 0; font-size: 17px; }
.album-body p { margin: 0; color: var(--muted); font-size: 14px; }
.album-body .meta { color: var(--muted); font-size: 13px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 18px; font-size: 14px; cursor: pointer; }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.album-card.hide { display: none; }
.list-item.hide { display: none; }
.course-card.hide { display: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(9, 20, 17, 0.93); display: flex; align-items: center; justify-content: center; padding: 44px; }
.lightbox[hidden] { display: none; }
.lightbox .lb-img { max-width: 90vw; max-height: 84vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; background: rgba(255,255,255,0.14); color: #fff; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 999px; font-size: 26px; line-height: 1; display: grid; place-items: center;
}
.lightbox .lb-close { top: 22px; right: 24px; font-size: 30px; }
.lightbox .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: rgba(255,255,255,0.88); font-size: 14px; }

@media (max-width: 1024px) {
  .album-grid, .gallery-masonry { columns: 2; }
  .gallery-grid, .gallery-grid-shots { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.square { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .hero-media { min-height: 460px; }
  .album-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
  .gallery-grid, .gallery-grid.square, .gallery-grid-shots { grid-template-columns: repeat(2, 1fr); }
  .lightbox { padding: 12px; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
  .qr-pop img { width: 104px; height: 104px; }
}

/* ===== 课程体系（自定义图片） ===== */
.product-media { padding: 0; overflow: hidden; }
.product-media .product-img { height: 150px; background: #E4F1EC center/cover no-repeat; }
.product-media h3, .product-media p { padding: 0 24px; }
.product-media h3 { margin-top: 16px; }
.product-media p { padding-bottom: 24px; }

/* ===== 王牌课程 / 营种活动 卡片 + 悬停二维码 ===== */
.course-card.has-qr .thumb::after {
  content: "扫码"; position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(31,51,46,.72); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px;
}
.qr-pop {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(23, 56, 49, 0.9); color: #fff; opacity: 0; transition: opacity .25s ease;
  text-align: center; padding: 12px;
}
.course-card.has-qr:hover .qr-pop { opacity: 1; }
.qr-pop img { width: 128px; height: 128px; background: #fff; padding: 6px; border-radius: 10px; }
.qr-pop span { font-size: 12px; line-height: 1.4; }
.featured-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: var(--accent); color: #5a4a00; border: 0;
}

/* ===== 后台新增内容模块（富文本） ===== */
.module-block { background: #fff; border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); }
.module-block + .module-block { margin-top: 18px; }
.module-block img { border-radius: 12px; margin: 14px 0; }
.module-emphasis {
  background: linear-gradient(120deg, #E9F8F4, #F3FBF8);
  border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0;
  padding: 12px 16px; font-weight: 600; color: var(--primary-dark); margin: 14px 0;
}

/* ===== 自定义内容页：Tab 分组（关于我们 / 导师团队 / 家长好评 / 定制服务） ===== */
.tab-group { margin-bottom: 34px; }
.tab-group:last-child { margin-bottom: 0; }
.tab-group.hide { display: none; }
.tab-group .group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.tab-group .group-head h2 { font-size: 22px; margin: 0; color: var(--primary-dark); }
.tab-group .group-head .muted { font-size: 13px; color: var(--muted); }
.tab-cover { border-radius: var(--radius); overflow: hidden; margin: 0 0 20px; box-shadow: var(--shadow); }
.tab-cover img { display: block; width: 100%; height: auto; }
.module-head { margin-bottom: 12px; }
.module-head h2 { font-size: 20px; margin: 0 0 6px; color: var(--primary-dark); }
.module-head .sub { color: var(--muted); font-size: 14px; }
.module-image { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 16px; }
.module-html p { margin: 1em 0; }
.module-gallery { margin: 16px 0 4px; }

/* 图片集：自适应列数，图片保持原比例 */
.module-gallery.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.module-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.module-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* 模块里同时带 .prose（继承富文本排版），而 .prose img 会给 img 加 margin:14px auto，
   图集里必须抹掉，否则每张图上下多出空白、网格被撑歪 */
.module-gallery .gallery-item img, .logo-wall .gallery-item img { margin: 0; }
.module-gallery .gallery-item figcaption { margin-top: 8px; }

/* 图文卡片：导师 / 服务项 / 案例 */
.module-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.module-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.module-card .mc-img { aspect-ratio: 4 / 3; overflow: hidden; background: #E4F1EC; }
.module-card .mc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0; }
.module-card .mc-icon { font-size: 34px; line-height: 1; padding: 20px 20px 0; }
.module-card .mc-body { padding: 16px 18px 20px; }
.module-card .mc-name { margin: 0 0 6px; font-size: 17px; color: var(--primary-dark); }
.module-card .mc-meta { font-size: 12px; color: var(--primary-dark); background: var(--accent); border-radius: 999px; padding: 2px 10px; display: inline-block; margin-bottom: 8px; }
.module-card .mc-desc { margin: 0; font-size: 14px; color: #4a5b56; }

/* 评价 / 引言：家长好评 */
.module-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.module-quote .mq-shot { display: block; border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); }
.module-quote .mq-shot img { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; }
.module-quote .mq-icon { font-size: 26px; margin-bottom: 8px; }
.module-quote .mq-text { font-size: 15px; line-height: 1.75; color: #33443f; }
.module-quote .review-from { margin-top: 10px; }

@media (max-width: 960px) {
  .module-cards, .module-quotes { grid-template-columns: repeat(2, 1fr); }
  .module-gallery.gallery-grid, .module-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .module-cards, .module-quotes { grid-template-columns: 1fr; }
  .module-gallery.gallery-grid, .module-gallery.cols-2, .module-gallery.cols-4 { grid-template-columns: 1fr; }
  .module-block { padding: 20px 18px; }
}

/* ===== 封面统一用 <img referrerpolicy="no-referrer"> 渲染 =====
   信多帮封面 CDN(prod.xdbcdn.cn) 带 Referer 会 403；文档级 meta referrer 对 CSS 背景图不生效，
   故封面一律用 <img>（见 templates.js 的 thumbImg）。容器保持 aspect-ratio，图片绝对定位铺满。 */
.thumb, .album-cover, .product-media .product-img { position: relative; }
.thumb-img, .album-cover-img, .hero-slide-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; max-width: none;
}
.album-cover .album-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; }