/* =========================================================
   企业管理培训官网 · 全局设计系统
   主色 科技蓝 var(--c-primary) · 政企稳重商务 · 禁用花哨动效
   严格对应《深度校验后最终交付版需求文档》第 1、10 节
   ========================================================= */

/* ---------- 1.1 色值体系 ----------
   设计令牌已迁至 css/tokens.css（全站变量唯一定义处，取值一字未改）。
   加载顺序：tokens.css → style.css → 页面 CSS。
   页面 CSS 后加载，其 :root 主题层覆盖照旧生效，故本次迁移不改变任何计算样式。
   ⚠ 新增变量一律写进 tokens.css；本文件只消费，不再定义 :root。 */

/* ---------- 1.2 字体层级 ---------- */
/* 页面大标题 / 模块标题 / 卡片标题 / 正文 / 标签 */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans-base);
  color: var(--c-text);
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* 语义化显隐：JS 以 el.hidden = true/false 控制，替代原 style="display:none"。
   加 !important 是为了压过 .grid 等类选择器声明的 display（同为 0,1,0 特异性）。*/
[hidden] { display: none !important; }

/* 无障碍：键盘聚焦可见轮廓（鼠标点击不显示，避免观感噪点）*/
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }

/* 无障碍 P3-3：顶部搜索框的 outline:none 会连键盘焦点一起吃掉。
   `.topbar__scope` / `.topbar__input`（0,1,0）晚于上面的全局 :focus-visible（0,1,0），
   故键盘 Tab 到搜索框时完全没有任何提示，违反 WCAG 2.4.7。
   这里只对 :focus-visible 补回轮廓，鼠标点击仍不显示；
   outline-offset 取负值让轮廓画在 38px 高的搜索框内部，不撑开布局。 */
.topbar__scope:focus-visible, .topbar__input:focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: -2px;
}

/* 无障碍 P3-3：跳转到主内容的跳转链接。
   常驻 DOM 但视觉上不可见（1px + clip，绝对定位脱离文档流，不影响任何布局），
   获得键盘焦点时才浮出 —— 供键盘与读屏用户跳过全站导航。 */
.skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1200;
  width: auto; height: auto; margin: 0; padding: 10px 16px;
  overflow: visible; clip: auto;
  background: var(--c-primary); color: #fff; font-size: 14px;
  border-radius: var(--radius-btn); text-decoration: none;
  box-shadow: 0 6px 18px rgba(22, 93, 255, .35);
}
.fz-title-mod { font-size: 22px; font-weight: 600; line-height: 1.4; }

/* ---------- 布局容器 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 模块上下外边距统一 60px */
.module { padding: var(--gap-module) 0; }
.module-soft { background: var(--c-bg-soft); }

/* 模块标题 + 科技蓝短装饰线（3.5 节通用约束） */
.mod-head { margin-bottom: var(--sp-3); }
.mod-head .mod-title { display: inline-block; position: relative; padding-left: var(--sp-4); }
.mod-head .mod-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 22px;
  background: var(--c-gradient);
  border-radius: 2px;
}
.mod-head .mod-sub { color: var(--c-text-sub); font-size: var(--fs-base); margin-top: var(--sp-1); }
.mod-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.mod-head-row .mod-title { margin-bottom: 0; }

/* ---------- 按钮（圆角6px，三态完整，无花哨动效） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 26px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-md); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); box-shadow: 0 6px 16px rgba(22,93,255,.22); }
.btn-primary:active { background: var(--c-primary-active); box-shadow: none; transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-outline:hover { background: rgba(22,93,255,.06); }
.btn-outline:active { background: rgba(22,93,255,.12); transform: translateY(1px); }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }
.btn-ghost-light:active { background: rgba(255,255,255,.22); }
.btn-sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* 深色导航态下的主按钮（白底蓝字，保证对比） */
.nav--dark .btn-primary { background: #fff; color: var(--c-primary); }
.nav--dark .btn-primary:hover { background: #f0f4ff; }
.nav--dark .btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.85); }

/* ---------- 卡片（圆角8px / 阴影 / hover 仅上浮3px+阴影加深） ---------- */
.card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

/* 标签 chip */
.chip {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.4;
  color: var(--c-primary-active); background: rgba(22,93,255,.08);
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.chip--plain { color: var(--c-text-sub); background: var(--c-bg-soft); }

/* 网格（PC 4 列 / 平板 2 列 / 移动 1 列，间距24px） */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); }
.benchmark-grid { grid-template-columns: repeat(5, 1fr); }
.topic-grid { grid-template-columns: repeat(5, 1fr); }

/* 文本省略 */
.ellipsis-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   1.x 顶部功能条（品牌标语、关键词标签、搜索、服务热线）
   ========================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: auto;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  transition: transform .3s ease;
}
/* 非首页下滑折叠：顶部条上滑隐藏（仅首页常驻，见 ui.js initTopbarAutoHide） */
html.topbar-collapsed { --topbar-effective: 0px; }
html.topbar-collapsed .topbar { transform: translateY(-100%); }
.topbar__inner {
  display: flex; align-items: stretch; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  height: var(--topbar-h);
  /* 兜底：窄屏断点把 height 改为 auto 后仍不得低于设计高度，避免内容塌陷 */
  min-height: var(--topbar-h);
}
/* r9：顶部欢迎条（细横幅）—— 左侧欢迎语 / 右侧咨询热线。
   底色用站内令牌 --c-bg-soft（而非参考站的中性灰 #F8F8F8），以沿用本站配色体系、
   保证整站统一；下边框与顶栏同用 --c-border，使条幅与功能条之间有明确分层。 */
.topbar__strip {
  /* ⚠ box-sizing: border-box 为必需项，不可删。本站未做全局 box-sizing 重置，
     .topbar__strip 默认 content-box → 高 = 32 + 1(下边框) = **33px**，
     而 --topbar-effective 叠加的是令牌值 32px → 让位比顶栏实际高度少 1px、
     导航会多盖 1px。声明 border-box 后「渲染高 == 令牌值 == 让位增量」。 */
  box-sizing: border-box;
  height: var(--topbar-strip-h);
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
}
.topbar__strip-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}
.topbar__welcome { font-size: var(--fs-sm); color: var(--c-text-sub); }
.topbar__strip-tel { font-size: var(--fs-sm); color: var(--c-text-sub); }
.topbar__strip-num { color: var(--c-primary); font-weight: 600; letter-spacing: .3px; transition: color var(--dur-fast) var(--ease-std); }
.topbar__strip-num:hover { color: var(--c-primary-hover); }
/* 极窄屏（≤479px）：字号降一档、间距收一档，确保「欢迎语 + 咨询热线」同行不折行、
   不产生横向溢出（320px 视口实测：内容 247px < 可用 280px）。
   ⚠ 断点覆盖必须紧随组件基础规则 —— 见上方说明。 */
@media (max-width: 479px) {
  .topbar__welcome, .topbar__strip-tel { font-size: var(--fs-xs); }
  .topbar__strip-inner { gap: var(--sp-3); }
}
/* r8：站标改为位图后，原「蓝色圆角色块」的基础样式已无元素引用，随元素一并移除。 */
.topbar__search {
  width: 100%; display: flex; align-items: center; box-sizing: border-box;
  border: 2px solid var(--c-primary); border-radius: var(--radius-btn); overflow: hidden;
  background: #fff; height: 38px;
}
.topbar__scope {
  height: 100%; border: none; border-right: 1px solid var(--c-border);
  padding: 0 10px; font-size: 14px; color: var(--c-text); background: #f8f9fb;
  outline: none; cursor: pointer;
}
.topbar__input {
  flex: 1 1 auto; height: 100%; border: none; padding: 0 14px;
  font-size: 14px; color: var(--c-text); outline: none;
}
.topbar__search-btn {
  height: 100%; padding: 0 22px; background: var(--c-primary); color: #fff;
  font-size: 15px; font-weight: 600; border: none; cursor: pointer;
}
.topbar__search-btn:hover { background: var(--c-primary-hover); }
.topbar__hotline strong { font-size: 18px; color: var(--c-primary); font-weight: 700; }

/* =========================================================
   2. 顶部导航栏
   ========================================================= */
.nav {
  position: fixed; top: var(--topbar-effective); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  transition: top .3s ease, background .25s ease, box-shadow .25s ease;
}
.nav__inner {
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center;
  flex-wrap: nowrap;
}

.nav__menu { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  height: auto; padding: 12px 10px;
  font-size: 16px; font-weight: 600; color: var(--c-text);
  transition: color .2s ease;
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-primary); }
.nav__item.is-active > .nav__link { color: var(--c-primary); font-weight: 700; background: rgba(22,93,255,.12); border-radius: 8px; }
.nav__link:hover { background: rgba(22,93,255,.06); border-radius: 8px; }

/* 下拉子菜单
   ⚠ 需求6（本轮）结构修复：原为 `top: var(--nav-h)`。
     .nav__sub 的定位包含块是 .nav__item，而 .nav__item 的高度 = .nav__link 的高度
     （面板是绝对定位、不撑开父项），所以把它推到 64px（--nav-h）实际是在导航项下沿
     再往下留出一段空档。实测该空档 桌面 12.8px / 平板 18.5px。
     空档是致命的：面板在收起态是 pointer-events: none，指针落在空档里既不在 .nav__link 上、
     也不在面板上 → .nav__item:hover 为假 → 面板立刻收起，指针永远追不上下拉菜单。
     改为 top: 100% 后二者严丝合缝，指针从导航项移动进面板的整个过程中
     .nav__item:hover 恒为真（hover 会沿 DOM 树向上传播，与是否超出父盒无关）。
   另：本节下方 JS（ui.js renderNav）还补了 3 秒宽限，用于兜住「斜向移动时先离开导航项
   横向范围、再落到面板」的路径。 */
.nav__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 160px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 8px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
/* is-open 由 ui.js 的悬停意图逻辑维护（鼠标离开导航项后仍保持 3 秒）；
   :hover 保留为无 JS / 键盘场景下的兜底。 */
.nav__item:hover .nav__sub,
.nav__item.is-open .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; }
.nav__sub a {
  display: block; padding: 10px 20px; font-size: 14px; color: var(--c-text-sub);
  white-space: nowrap;
}
.nav__sub a:hover { color: var(--c-primary); background: var(--c-bg-soft); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 10px; }
.nav__actions .btn { padding: 0 14px; } /* 导航栏按钮收窄，为主菜单留空间 */

/* 深色滚动态 */
.nav--dark {
  background: var(--c-gradient);
  border-bottom-color: transparent;
  box-shadow: 0 4px 18px rgba(14,66,193,.25);
}
.nav--dark .nav__logo .logo-text,
.nav--dark .nav__link { color: #fff; }
.nav--dark .nav__link:hover,
.nav--dark .nav__item.is-active > .nav__link { color: #fff; opacity: .85;  background: rgba(255,255,255,.18); border-radius: 8px;}
.nav--dark .nav__sub { background: #fff; }
.nav--dark .nav__sub a { color: var(--c-text-sub); }
.nav--dark .nav__sub a:hover { color: var(--c-primary); }

/* 汉堡（移动端） */
.nav__hamburger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; }
.nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: .2s; }
.nav--dark .nav__hamburger span { background: #fff; }

/* 移动端抽屉菜单 */
.mobile-menu {
  position: fixed; top: calc(var(--topbar-effective) + var(--nav-h)); left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 999;
  transform: translateX(100%);
  transition: transform .28s ease, top .3s ease;
  overflow-y: auto;
  padding: 8px 0 40px;
  display: none; /* 仅在移动端(<768)显示，避免离屏抽屉撑宽平板/PC 横向滚动 */
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__item { border-bottom: 1px solid var(--c-border); }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; font-size: 16px; color: var(--c-text);
}
.mobile-menu__link.is-active { color: var(--c-primary); font-weight: 600; }
.mobile-menu__sub { display: none; background: var(--c-bg-soft); }
.mobile-menu__sub.is-open { display: block; }
.mobile-menu__sub a { display: block; padding: 13px 36px; font-size: 14px; color: var(--c-text-sub); }
.mobile-menu__arrow { transition: transform .2s ease; font-size: 12px; color: var(--c-text-ph); }
.mobile-menu__arrow.is-open { transform: rotate(90deg); }
.mobile-menu .nav__actions { margin: 16px 20px 0; flex-direction: column; align-items: stretch; }
.mobile-menu .nav__actions .btn { width: 100%; }

/* body 滚动锁定（移动端菜单打开时） */
body.no-scroll { overflow: hidden; }

/* =========================================================
   3. 首页模块
   ========================================================= */
/* 3.1 Hero 轮播 */
.hero { margin-top: calc(var(--topbar-effective) + var(--nav-h)); transition: margin-top .3s ease; position: relative; height: 600px; overflow: hidden; }
.hero__mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.15) 100%);
}
.hero__bottom-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}
.hero__content { position: relative; max-width: 560px; color: #fff; z-index: 2; }
.hero__title { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.4; }
.hero__subtitle { font-size: 16px; color: rgba(255,255,255,.9); margin-top: 16px; line-height: 1.7; }
.hero__btns { display: flex; gap: 14px; margin-top: 30px; }
/* 轮播控件 */
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: background .2s ease; z-index: 3;
}
.hero__arrow:hover { background: rgba(255,255,255,.32); }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }
.hero__dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); transition: .2s; }
.hero__dot.is-active { background: #fff; width: 26px; border-radius: 6px; }
.hero__fade { opacity: 0; transition: opacity .6s ease; position: absolute; inset: 0; display: flex; align-items: center; }
.hero__fade.is-active { opacity: 1; }

/* 3.2 数据统计：深色背景+高亮文字，凸显内容 */
.stats { background: linear-gradient(135deg, var(--c-primary-active) 0%, var(--c-primary) 100%); position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='60' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 120px 120px; opacity: .8;
}
.stat { text-align: center; padding: 34px 16px; position: relative; }
.stat:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 48px; background: rgba(255,255,255,.18);
}
.stat__num { font-size: 40px; font-weight: 800; color: #FFD66B; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.18); }
.stat__label { font-size: 16px; color: rgba(255,255,255,.92); margin-top: 8px; font-weight: 500; }

/* 3.3 讲师卡片（统一小图网格：无大图，文字居中，无“查看详情”，分类加粗） */
/* 需求优化v8 第6条：首页「培训讲师」与讲师列表页的讲师网格，一行由 5 个调整为 6 个。
   正式版优化v3 第9条：一行再由 8 个调整为 10 个 —— 首页/列表页/讲师推荐三处口径统一。
   列数变多后卡片变窄，姓名与头衔字号同步下调一档（15/12 → 14/11），
   否则 10 列下头衔会先被省略号截断、姓名容易折行。
   窄屏降级列数仍在下方断点里逐级下调，保持原有的响应式节奏。 */
.trainer-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--gap-card); }
.trainer-list-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--gap-card); }
.trainer-mini { cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 10px; }
/* 优化000 第4条：讲师列表页卡片 —— 图片左右与边框间距、图片上边距、下方文字与下边框间距适度减小
   （卡片 18/14/16 → 10/8/12，封面内衬 16 → 8，文字区 14/6/4 → 10/4/2）。
   只作用于讲师列表页（.trainer-list-grid），首页讲师网格与跑马灯不受影响。 */
.trainer-list-grid .trainer-card { padding: 4px 4px 8px; }
.trainer-list-grid .trainer-card__cover { padding: 0; }
.trainer-list-grid .trainer-card__body { padding: 8px 2px 2px; }
/* 正式版优化v3 第9条：一行 10 个时卡片更窄，图片再收一档（96% → 88%），
   让头像与卡片边框之间留出呼吸感，避免小尺寸下头像顶到边框显得拥挤。
   第9条补充（用户确认）：一行 10 个定稿，但图片偏扁，高度需上调 10%~20%。
   取 +14.3% —— 宽高比 8/7（高 = 0.875×宽）改为 1/1（高 = 1×宽）：
   (1 − 0.875)/0.875 ≈ 14.3%，正落在区间中段，且 1/1 是最规整的取值，
   头像仍是竖构图，正方形比例观感更稳，不会因高度增加而显胖。
   三处讲师封面（首页网格 / 列表页卡片 / 推荐跑马灯）口径统一。 */
.trainer-mini__cover {
  width: 88%; aspect-ratio: 1/1; margin: 0 auto 8px;
  border-radius: 10px; overflow: hidden; background: var(--c-bg-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(22,93,255,.12);
}
.trainer-mini__cover img { width: 100%; height: 100%; object-fit: cover; }
/* 正式版优化v3 第9条：10 列下卡片变窄，字号下调一档，避免姓名折行 / 头衔过早截断 */
.trainer-mini__name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.trainer-mini__title { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trainer-card { cursor: pointer; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 4px 4px 10px; transition: box-shadow .2s ease, transform .2s ease; }
.trainer-card:hover { box-shadow: 0 8px 24px rgba(22,93,255,.12); transform: translateY(-3px); }
/* 正式版优化v3 第9条补充：与首页网格同步，8/7 → 1/1（高度 +14.3%） */
.trainer-card__cover {
  aspect-ratio: 1/1; overflow: hidden; background: var(--c-bg-soft);
  display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 10px;
}
.trainer-card__cover img { display: block; }
.trainer-card__avatar { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; box-shadow: none; }
.trainer-card__body { padding: 8px 2px 2px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 正式版优化v3 第9条：与 .trainer-mini 同步下调（10 列下避免折行 / 截断） */
.trainer-card__name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.trainer-card__title { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trainer-rec__head { margin-bottom: 26px; }
.trainer-rec__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trainer-rec__track { display: flex; gap: var(--gap-card); width: max-content; animation: recScroll 32s linear infinite; }
.trainer-rec__viewport:hover .trainer-rec__track { animation-play-state: paused; }
/* 无缝跑马灯：轨道内是「同一组卡片复制两份 + gap 间距 + width: max-content」。
   ⚠ 原写法 translateX(-50%) 回环时会有 0.5×gap 的可见跳动（实测 gap=18px → 9px）。
     推导：设每份 N 张卡、卡宽 cw、间距 G，则
       轨道总宽 = 2N·cw + (2N−1)·G   （gap 只在相邻子项之间，末尾没有）
       -50%     = N·cw + (N−0.5)·G   ← 实际位移
       应有位移 = N·cw +  N·G       ← 必须正好跨过「一份 + 它后面那个 gap」
     两者相差 0.5·G —— 这就是接缝的来源。
   修法：把位移补上这 0.5·G。用 var(--gap-card) 而非字面量，断点若改间距也自动跟随。
   注：该修法依赖「轨道恰好复制两份」，与现有 JS 生成方式（`${row}${row}`）一致。 */
@keyframes recScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap-card) / 2)); } }
/* 需求优化v8 第6条：讲师推荐一行由 5 位调整为 6 位。
   原先用固定 184px，一行能放几个随视口宽度漂移；改为按 6 等分取宽后，
   一行恒定为 6 位，超出 6 位的讲师由既有跑马灯（recScroll）循环展示。 */
/* 本站未做全局 box-sizing 重置，本卡片是 content-box —— 除 flex-basis 描述的内容宽以外，
   每卡还要额外占用 22px（左右 border 1px×2 + 左右 padding 10px×2）。
   若不在公式里扣除，6 张合计多出 132px，最后一张会被挤出视口（实测卡片 212px、一行只剩 5.8 个）。
   .course-rec__item 因为本身无 padding，故那边只需扣 2px。 */
/* 正式版优化v3 第9条：讲师推荐跑马灯与首页/列表页口径统一 —— 一行 8 个改为 10 个。
   写法不变：轨道宽度按「基准宽度 − (列数−1)×间距」等分，故只需把 7/8 换成 9/10。
   字号同步下调一档，与网格卡片保持一致。 */
.trainer-rec__item { box-sizing: border-box; flex: 0 0 calc((var(--rec-base, 100%) - 9 * var(--gap-card)) / 10); width: calc((var(--rec-base, 100%) - 9 * var(--gap-card)) / 10); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 10px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; transition: box-shadow .2s ease, transform .2s ease; }
.trainer-rec__item:hover { box-shadow: 0 8px 24px rgba(22,93,255,.12); transform: translateY(-3px); }
/* 正式版优化v3 第9条补充：与首页网格同步，8/7 → 1/1（高度 +14.3%） */
.trainer-rec__cover { width: 88%; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.trainer-rec__avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.trainer-rec__name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.trainer-rec__title { font-size: 11px; color: var(--c-text-sub); margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 断点沿用原降级节奏，但改为按等分取宽 —— 平板 4 列改为 5 列（与桌面 10 列等比缩放）。 */
@media (max-width: 1024px) { .trainer-rec__item { flex: 0 0 calc((var(--rec-base, 100%) - 4 * var(--gap-card)) / 5); width: calc((var(--rec-base, 100%) - 4 * var(--gap-card)) / 5); } }
/* P2 断点收敛：原为 768px，与全站主流移动端档位 767px 只差 1px，统一为 767px */
@media (max-width: 767px) { .trainer-rec__item { flex: 0 0 calc((var(--rec-base, 100%) - 2 * var(--gap-card)) / 3); width: calc((var(--rec-base, 100%) - 2 * var(--gap-card)) / 3); } }
.course-rec__head { margin-bottom: 22px; }
.course-rec__viewport { --n: 6; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.course-rec__track { display: flex; gap: var(--gap-card); width: max-content; animation: recScroll 30s linear infinite; }
.course-rec__viewport:hover .course-rec__track { animation-play-state: paused; }
.course-rec__item { flex: 0 0 calc((var(--rec-base, 100%) - (var(--n, 6) - 1) * var(--gap-card)) / var(--n, 6)); width: calc((var(--rec-base, 100%) - (var(--n, 6) - 1) * var(--gap-card)) / var(--n, 6)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.course-rec__item:hover { box-shadow: 0 8px 24px rgba(22,93,255,.12); transform: translateY(-3px); }
.course-rec__cover { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--c-bg-soft); }
.course-rec__cover img { width: 100%; height: 100%; object-fit: cover; }
.course-rec__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.course-rec__cat { font-size: 11px; color: var(--c-primary); background: rgba(22,93,255,.08); border-radius: 4px; padding: 2px 6px; width: fit-content; }
.course-rec__title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--c-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-rec__meta { font-size: 12px; color: var(--c-text-sub); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.course-rec__price { font-size: 14px; font-weight: 700; color: var(--c-primary); margin-top: auto; }
.course-rec--4 { --n: 4; }
.course-rec--5 { --n: 5; }
.course-rec--6 { --n: 6; }
@media (max-width: 1199px) {
  .course-rec__viewport { --n: 4; }
  .course-rec--4 { --n: 3; }
  .course-rec--5 { --n: 3; }
  .course-rec--6 { --n: 3; }
}
@media (max-width: 767px) {
  .course-rec__viewport { --n: 2; }
  .course-rec--4 { --n: 2; }
  .course-rec--5 { --n: 2; }
  .course-rec--6 { --n: 2; }
}

/* 企业内训模块：分类标签栏 */
.course-catbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 28px; }
.catbar__item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px;
  font-size: 14px; font-weight: 400; color: var(--c-text-sub); background: #fff;
  border: 1px solid var(--c-border); border-radius: 16px;
  transition: all .2s ease; cursor: pointer; white-space: nowrap;
}
.catbar__item:hover { color: var(--c-primary); border-color: var(--c-primary); }
.catbar__item.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.catbar__more { margin-left: auto; font-size: 14px; color: var(--c-text-sub); white-space: nowrap; }
.catbar__more:hover { color: var(--c-primary); }

/* 企业内训模块：课程卡片网格（大图 + 彩色小图） */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); }
.course-card { cursor: pointer; display: flex; flex-direction: column; }
.course-card__cover { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 5px; box-sizing: border-box; }
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.course-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.course-card__title { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--c-text); }
.course-card__meta { font-size: 13px; color: var(--c-text-sub); margin-top: 5px; }
.course-card__highlight { color: #C2410C; font-weight: 600; }
.course-card__foot { margin-top: auto; padding-top: 10px; }
.course-card__more { color: var(--c-primary); font-size: 14px; font-weight: 600; }
.course-card__cover { position: relative; }
/* 课程推荐模块：标题居中；企业内训卡片“主讲 / 课程时长”同行左右对齐 */
#courseRecommend .course-card__title { text-align: center; }
.course-card__meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 5px; }
.course-card__meta-row .course-card__meta { margin-top: 0; }

  /* 企业内训小图（5列×2行；图片满宽、外边框阴影、文字居中） */
  .internal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-card); }
  .internal-mini { cursor: pointer; display: flex; flex-direction: column; text-align: center; padding-bottom: 14px; }
  .internal-mini__cover { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
  .internal-mini__cover img { width: 100%; height: 100%; object-fit: cover; }
  .internal-mini__name { font-size: 15px; font-weight: 600; color: var(--c-text); margin-top: 6px; padding: 0 4px; }

/* 3.4 公开课排期：筛选栏 + 表格 */
.course-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 22px; padding: 18px 20px; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.course-filter__label { font-size: 14px; color: var(--c-text-sub); white-space: nowrap; }
.course-filter__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.course-filter__btn { height: 34px; padding: 0 14px; font-size: 14px; color: var(--c-text); background: #fff; border: 1px solid var(--c-border); border-radius: 17px; cursor: pointer; transition: all .2s ease; }
.course-filter__btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.course-filter__btn.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.course-filter__select { height: 36px; padding: 0 28px 0 12px; font-size: 14px; color: var(--c-text); background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-btn); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23606266' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.course-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.course-table th, .course-table td { padding: 16px 18px; font-size: 14px; border-bottom: 1px solid var(--c-border); }
.course-table th { background: var(--c-primary); color: #fff; font-size: 16px; font-weight: 700; text-align: center; }
.course-table td { text-align: left; }
/* R8：首页公开课表格 —— 除“课程名称”列外，其余列（主讲/地点/时间/费用/操作）内容居中；
   课程名称列内容保持左对齐（表头仍居中，与下方内容左对齐形成“标题居中、内容左齐”的对比） */
#courses .course-table td:not(.course-table__name) { text-align: center; }
/* R8：表头文字需大于下方内容 —— 首页内容 13px、表头 15px，层级清晰 */
#courses .course-table--compact td { font-size: 13px; }
.course-table tbody tr:nth-child(even) { background: var(--c-bg-soft); }
.course-table tbody tr:hover { background: rgba(22,93,255,.05); }
.course-table .badge-new { display: inline-block; margin-left: 8px; background: var(--c-gold); color: var(--c-text); font-size: 12px; padding: 1px 7px; border-radius: 3px; vertical-align: middle; }
.course-table .op-cell { display: flex; gap: 8px; justify-content: center; }
/* 移动端表格降级卡片 */
.course-cards { display: none; }
.course-cards .course-card { margin-bottom: var(--gap-card); }
#courses .course-cards .course-card__title { text-align: center; }
.course-cards .list-card { margin-bottom: var(--gap-card); }
.case-card__body { padding: var(--pad-card); }
.case-card__title { font-size: 18px; font-weight: 600; }

.adv-card { padding: var(--pad-card); display: flex; gap: 16px; align-items: flex-start; }
.adv-card__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; background: var(--c-bg-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.adv-card__title { font-size: 17px; font-weight: 600; }
.adv-card__desc { font-size: 14px; color: var(--c-text-sub); margin-top: 6px; }

/* =========================================================
   通用表单
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--c-text); font-weight: 500; }
.field .req { color: var(--c-primary); }
.input, .textarea, .select {
  width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-btn);
  font-size: 14px; color: var(--c-text); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(22,93,255,.12); }
.input::placeholder, .textarea::placeholder { color: var(--c-text-ph); }
.field .err { color: #F53F3F; font-size: 12px; min-height: 0; }
.input.is-error, .textarea.is-error { border-color: #F53F3F; }

/* =========================================================
   4. 二级列表页
   ========================================================= */
.page-banner {
  margin-top: calc(var(--topbar-effective) + var(--nav-h));
  transition: margin-top .3s ease;
  height: 180px;
  background: var(--c-gradient);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.page-banner__inner { text-align: center; color: #fff; position: relative; z-index: 2; }
.page-banner__title { font-size: 28px; font-weight: 700; color: #fff; }
.page-banner__sub { color: rgba(255,255,255,.88); margin-top: 8px; font-size: 15px; }

/* 栏目 Banner 幻灯片轮播（高度=原 180px 的两倍，宽度与整站通栏保持一致） */
.page-banner.pb { background: none; display: block; height: 360px; position: relative; overflow: hidden; }
.pb__viewport { position: absolute; inset: 0; }
.pb__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; display: flex; align-items: center; justify-content: center; }
.pb__slide.is-active { opacity: 1; }
.pb__inner { text-align: center; color: #fff; padding: 0 24px; position: relative; z-index: 2; max-width: 760px; }
.pb__tag { display: inline-block; font-size: 13px; letter-spacing: 2px; opacity: .9; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 3px 14px; margin-bottom: 16px; }
.pb__title { font-size: 30px; font-weight: 700; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.28); }
.pb__sub { margin-top: 12px; font-size: 16px; color: rgba(255,255,255,.92); text-shadow: 0 2px 14px rgba(0,0,0,.28); }
.pb__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,.22); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s; }
.pb__arrow:hover { background: rgba(0,0,0,.42); }
.pb__arrow--prev { left: 18px; }
.pb__arrow--next { right: 18px; }
.pb__dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.pb__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s, background .2s; }
.pb__dot.is-active { background: #fff; width: 26px; border-radius: 6px; }

/* 面包屑 */
.breadcrumb { padding: 16px 0; font-size: 15px; font-weight: 600; color: var(--c-text-sub); }
.breadcrumb a { color: var(--c-text-sub); font-weight: 600; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { margin: 0 8px; color: var(--c-border); }
.breadcrumb .cur { color: var(--c-text); font-weight: 700; }

/* 筛选区 */
.filter-bar { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: var(--sp-5) 22px; margin-bottom: var(--sp-6); }
/* 移动端筛选触发按钮：默认隐藏，仅 767px 断点显示。
   必须定义在此处（早于下方 @media 块）—— 媒体查询不提升特异性、只按出现顺序决胜，
   若把这条基础规则写在断点之后，它会反过来压过断点内的 display:flex，
   导致移动端按钮恒为隐藏、筛选功能完全不可用（原站即为此缺陷）。*/
.mobile-filter-trigger { display: none; width: 100%; justify-content: center; align-items: center; gap: 8px; height: 46px; border: 1px solid var(--c-primary); color: var(--c-primary); border-radius: var(--radius-btn); font-weight: 600; margin-bottom: 18px; background:#fff; }
.filter-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--c-border); }
.filter-row:last-child { border-bottom: none; }
.filter-row__label { flex-shrink: 0; width: 100px; font-size: var(--fs-lg); color: var(--c-text); padding-top: 6px; font-weight: 700; }
.filter-row__body { flex: 1; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-opt {
  padding: 6px 14px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 600; color: var(--c-text-sub);
  background: var(--c-bg-soft); border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std);
}
.filter-opt:hover { color: var(--c-primary); border-color: var(--c-primary); }
.filter-opt.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* 选中态统一为品牌蓝：原内训/公开课两页使用橙色 #FAAD14，与其余 7 个列表页不一致，
   同一交互元素在同一站点内应保持同一语义色，故收敛为 --c-primary（2026-09-20 统一）。*/
/* 优化000 第6条：内训/公开课/专题/案例 四个列表页的筛选项文字适度减小一档。
   级联一级 16→14、级联二级与常规项 14→13、公开课整体 13→12、案例 sizeUp 15→14。
   用页面级 filter-bar--<type>（list.js 已挂）作用域化，不影响标杆学习/资讯等页。 */
.filter-bar--internal .filter-opt,
.filter-bar--topic .filter-opt,
.filter-bar--case .filter-opt { font-size: var(--fs-sm); }
.filter-bar--internal .filter-row__body[data-cascade] > .filter-opt,
.filter-bar--topic .filter-row__body[data-cascade] > .filter-opt { font-size: var(--fs-base); }
.filter-bar--internal .filter-cascade-l2 .filter-opt,
.filter-bar--topic .filter-cascade-l2 .filter-opt,
.filter-bar--case .filter-cascade-l2 .filter-opt { font-size: var(--fs-sm); }
.filter-bar--case .filter-opt--lg { font-size: var(--fs-base); }
.filter-bar--public .filter-row__label,
.filter-bar--public .filter-opt { font-size: var(--fs-xs); }
.filter-bar--public .filter-row__body[data-cascade] > .filter-opt { font-size: var(--fs-base); }
/* 级联一级 16px / 二级 14px，层级分明 */
.filter-row__body[data-cascade] > .filter-opt { font-size: var(--fs-lg); }
.filter-cascade-l2 .filter-row__label { font-size: var(--fs-base); }
.filter-cascade-l2 .filter-opt { font-size: var(--fs-base); padding: 5px 12px; }
/* 优化版本1 第1条：案例见证页「课程分类」比「行业」大一个字号（14px → 15px） */
.filter-opt--lg { font-size: var(--fs-md); }
.filter-row__label--lg { font-size: var(--fs-md); }
.filter-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); }
.filter-tags { flex: 1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-tag { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); background: rgba(22,93,255,.08); color: var(--c-primary); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.filter-tag button { color: var(--c-primary); font-size: var(--fs-base); line-height: 1; }
/* 重置：默认不渲染（无选中项时隐藏），点选筛选项后与结果标签同一行靠右对齐 */
.filter-reset { margin-left: auto; flex-shrink: 0; padding: 6px 18px; border: 1px solid var(--c-border); background: #fff; color: var(--c-text-sub); border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .15s; }
.filter-reset:hover { color: var(--c-primary); border-color: var(--c-primary); background: rgba(22,93,255,.04); }
.search-box { display: flex; gap: 8px; }
.search-box .input { min-width: 220px; }

/* 列表工具条 */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.list-toolbar .count { font-size: 14px; color: var(--c-text-sub); }
.list-toolbar .count b { color: var(--c-primary); }

/* 列表卡片（通用）：层级清晰、间距紧凑 */
.list-card { cursor: pointer; display: flex; flex-direction: column; }
.list-card__cover { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-soft); position: relative; }
.list-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.list-card:hover .list-card__cover img { transform: scale(1.04); }
.list-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.list-card__cat { display: inline-flex; width: fit-content; padding: 2px var(--sp-2); font-size: var(--fs-xs); color: var(--c-primary); background: rgba(22,93,255,.08); border-radius: var(--radius-sm); }
.list-card__title { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-snug); transition: color var(--dur-fast) var(--ease-std); }
.list-card:hover .list-card__title { color: var(--c-primary); }
.list-card__meta { font-size: var(--fs-sm); color: var(--c-text-sub); display: flex; flex-wrap: wrap; gap: var(--sp-1) 14px; margin-top: 2px; }
.list-card__summary { font-size: var(--fs-base); color: var(--c-text-sub); line-height: 1.65; margin-top: var(--sp-1); }
.list-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
.price-custom { color: var(--c-primary); font-weight: 700; font-size: 16px; }

/* 列表卡片封面左上角标签 */
.list-card__cover-label {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; background: #FAAD14; color: var(--c-text);
  font-size: 12px; border-radius: 4px; font-weight: 600;
}

/* 标杆学习 / 培训专题 5 列紧凑卡片 */
.benchmark-grid .list-card__body,
.topic-grid .list-card__body { padding: 10px 12px 12px; gap: 4px; }
/* 本轮需求2：标杆学习列表页不再渲染 .list-card__cat（见 js/list.js courseCard 的 catTag），
   故此处选择器组中属于 `.benchmark-grid .list-card__cat` 的那一半已永不匹配 ——
   继续留在这里即为本轮改动新引入的死样式，故删除；`.topic-grid` 那一半保留（仍在使用）。 */
.topic-grid .list-card__cat { font-size: 11px; padding: 1px 6px; }
/* 需求优化v8 第4条：培训专题卡片的「标题 + 下方文字」一律单行显示 ——
   一行显示不完即隐藏（ellipsis），不得换行到第二行。 */
.topic-grid .list-card__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
    }
.topic-grid .list-card__meta {
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden
    }
.topic-grid .list-card__meta > span { flex: 0 0 auto; }
.benchmark-grid .list-card__title,
.topic-grid .list-card__title { font-size: 14px; line-height: 1.4; }
.benchmark-grid .list-card__meta,
.topic-grid .list-card__meta { font-size: 12px; gap: 4px 10px; }
.benchmark-grid .list-card__summary,
.topic-grid .list-card__summary { display: none; }
.benchmark-grid .list-card__foot,
.topic-grid .list-card__foot { padding-top: 6px; margin-top: 6px; }
.benchmark-grid .list-card__foot .btn,
.topic-grid .list-card__foot .btn { font-size: 12px; padding: 5px 10px; }

/* 案例见证 5 列网格 + 紧凑卡片 */
.case-grid { grid-template-columns: repeat(5, 1fr); }
.case-grid .list-card__body { padding: 10px 12px 12px; gap: 4px; }
.case-grid .list-card__cat { font-size: 11px; padding: 1px 6px; }
.case-grid .list-card__title { font-size: 14px; line-height: 1.4; }
.case-grid .list-card__meta { font-size: 12px; gap: 4px 10px; }
.case-grid .list-card__summary { display: none; }

/* 案例卡片：查看详情悬浮于封面，hover 显示 */
.list-card--case .list-card__cover { position: relative; }
.list-card__view {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92);
  z-index: 3; padding: 9px 22px; border-radius: 999px;
  background: rgba(22,93,255,.94); color: #fff; font-size: 14px; font-weight: 600;
  opacity: 0; visibility: hidden; transition: .22s ease; pointer-events: none;
  box-shadow: 0 6px 18px rgba(22,93,255,.35);
}
.list-card--case:hover .list-card__view { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* =========================================================
   企业内训列表页：横向列表布局（参考图片样式）
   左侧缩略图 + 中间标题/描述/标签 + 右侧查看详情
   ========================================================= */
.internal-list { display: flex; flex-direction: column; gap: 0; }
.internal-card {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--c-border);
  background: #fff; cursor: pointer; transition: background .15s ease;
}
.internal-card:first-child { padding-top: 4px; }
.internal-card:last-child { border-bottom: none; }
.internal-card:hover { background: #fafcff; }
.internal-card__cover {
  width: 150px; height: 92px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--c-bg-soft);
}
.internal-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.internal-card__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
}
.internal-card__title { font-size: 17px; font-weight: 600; color: var(--c-text); line-height: 1.4; transition: color .15s ease; }
.internal-card:hover .internal-card__title { color: var(--c-primary); }
.internal-card__summary { font-size: 13px; color: var(--c-text-sub); line-height: 1.55; }
.internal-card__tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.internal-card__tag {
  display: inline-flex; width: fit-content;
  padding: 1px 9px; border: 1px solid var(--c-primary); color: var(--c-primary);
  border-radius: 4px; font-size: 12px; background: #fff;
}
.internal-card__lecturer {
  display: inline-flex; width: fit-content;
  color: var(--c-text-sub); font-size: 12px; line-height: 1;
}
.internal-card__lecturer::before { content: "👤"; margin-right: 3px; font-size: 11px; }
.internal-card__action { flex-shrink: 0; margin-left: 12px; }
.internal-card__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 20px; border: 1px solid #FF7A00; color: #C2410C; background: #fff;
  border-radius: 4px; font-size: 13px; font-weight: 500; transition: all .15s ease;
}
.internal-card__btn:hover { background: #C2410C; color: #fff; }
.internal-card:hover .internal-card__btn { border-color: #FF7A00; color: #C2410C; }
.internal-card:hover .internal-card__btn:hover { background: #C2410C; color: #fff; }

/* 课程现场模块 6 列轮播 */
.side-chip--active { background: var(--c-primary); color: #fff; }

/* 骨架屏 */
.skeleton { background: #eef2f7; background: linear-gradient(90deg,#eef2f7 25%,#e3e9f2 37%,#eef2f7 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 4px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-card { background:#fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow:hidden; }
.sk-card .sk-cover { aspect-ratio: 16/10; }
.sk-card .sk-line { height: 14px; margin: 12px 18px; }
.sk-card .sk-line.short { width: 50%; }

/* 空状态 */
.empty { text-align: center; padding: 70px 20px; color: var(--c-text-ph); }
.empty__icon { font-size: 46px; opacity: .5; }
.empty__text { margin: 14px 0 22px; font-size: 15px; }
.empty .btn { margin: 0 auto; }

/* 分页 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 56px 0 48px; }
.pagination button {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--c-border); border-radius: var(--radius-btn);
  background: #fff; color: var(--c-text-sub); font-size: 14px;
  transition: .15s;
}
.pagination button:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.pagination button.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination button:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   5. 三级详情页
   ========================================================= */
.detail-banner { margin-top: calc(var(--topbar-effective) + var(--nav-h) + 24px); transition: margin-top .3s ease; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); }
/* 正式版优化v3 第10条：详情页顶部左侧图片高度与右侧文字区对齐。
   原因：左侧封面写死 220×220，而右侧文字区（标题 + 元信息 + 标签 + 按钮）通常只有
   150~190px 高 —— 图片比右侧高出一截，顶栏被图片撑高，右下留一片空白。
   做法：容器改 align-items: stretch，封面用 align-self: stretch 继承行高（= 右侧文字区高度），
   高度不再写死。这样图片永远与右侧文字块同高，内容多（标签换行、按钮换行）时同步变高。
   保险：min-height 兜底，防止文字极少（如只有标题）时封面被压成一条；
   图片 object-fit: cover，高度变化只裁中间不变形。
   ⚠ 移动端断点里必须把 align-self 改回 center —— 竖排后 stretch 会把封面拉满行高。 */
.detail-banner__inner { padding: 36px 0; display: flex; gap: 24px; align-items: stretch; }
.detail-cover {
  width: 220px; height: auto; min-height: 150px; align-self: stretch;
  border-radius: var(--radius-card); overflow: hidden; flex-shrink: 0; background: #fff; box-shadow: var(--shadow-card);
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 需求1：讲师详情顶部讲师图需与所在模块「等尺寸或微小一点」。
   原为 padding:30px 24px 22px —— 220×220 的白卡里实际图片只有 172×168，
   左右各留 24px 白边，视觉上明显小于模块。改为 0 内边距，图片铺满模块
   （.detail-cover 自带 overflow:hidden + 圆角，图片随卡片裁圆角）。 */
.detail-cover--trainer { padding: 0; box-sizing: border-box; }
.detail-cover--trainer img { border-radius: 0; }
.detail-head__title { font-size: 26px; font-weight: 700; }
.detail-head__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; font-size: 14px; color: var(--c-text-sub); }
.detail-head__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.detail-head__btns { margin-top: 22px; display: flex; gap: 12px; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
/* 相关推荐列表：栏数与全站列表严格一致（PC 4 栏 → ≤1199px 2 栏 → ≤767px 单栏），
   栅格宽度恒等于内容区宽度，左右边界与上方正文、下方页脚内容对齐。
   刻意「不」用 auto-fit 拉伸：相关推荐通常只有 2~3 条，auto-fit 会把每列拉到
   370~570px，是本站标准卡片宽（275px）的 1.4~2.1 倍，反而不一致（需求3/7/11）。
   ⚠ 断点覆盖必须紧随基础规则之后书写 —— @media 不提升特异性，同特异性下纯按顺序决胜。 */
#relatedGrid.grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { #relatedGrid.grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { #relatedGrid.grid { grid-template-columns: 1fr; } }
.detail-main { min-width: 0; }
.detail-side { min-width: 0; }

/* 讲师详情页标签导航 */
/* 讲师详情页标签：蓝色底 + 文字加粗 + 字号加大一号（需求2） */
/* 需求2：标签栏改为参考图（网站优化.docx 图2）的「页签」结构 ——
   浅灰底轨道 + 激活项白底并带主色边框 + 底部一条主色横线贯穿；字号由 16px 适度调小至 15px；
   鼠标悬停有底色/文字色动态变化。配色沿用本站科技蓝，未照搬参考图的橙色系。
   实现要点：容器画 2px 主色底边线，标签 margin-bottom:-2px 向下压住该线，
   激活项再以自己的 2px 白色底边覆盖 → 形成「与内容区接通」的页签观感。 */
.detail-tabs { display: flex; flex-wrap: wrap; background: #F2F4F8; border-bottom: 2px solid var(--c-primary); border-radius: 4px 4px 0 0; margin-bottom: 24px; }
.detail-tab { position: relative; margin-bottom: -2px; padding: 14px 26px; font-size: 15px; font-weight: 600; color: var(--c-text-sub); background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; white-space: nowrap; }
.detail-tab:hover { color: var(--c-primary); background: rgba(22, 93, 255, .08); border-color: rgba(22, 93, 255, .40); border-bottom-color: transparent; }
.detail-tab.active,
.detail-tab.active:hover { color: var(--c-primary); background: #fff; border-color: var(--c-primary); border-bottom-color: #fff; }
.detail-tab-panels { background: #fff; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* 需求4 之后，讲师介绍已并入 .rich-text 的连续图文，不再有独立的
   「【个人简介】/【授课风格】/【主讲课程】」模块块，
   故原 5 条 .trainer-section* 规则随实现一并删除（避免留下死样式）。 */
.trainer-intro p { text-align: justify; }

/* V1.0 需求13：讲师「标签亮点」在个人介绍详情中用带颜色的字体展示 */
.trainer-hl-list { margin: 0 0 18px; }
.trainer-hl { display: inline-block; margin: 0 8px 8px 0; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.9; }
.trainer-hl--1 { color: #1552f0; background: #eaf1ff; }
.trainer-hl--2 { color: #0f8f6b; background: #e6f7f1; }
.trainer-hl--3 { color: #b3520a; background: #fff2e4; }
.trainer-hl--4 { color: #7a3fd1; background: #f2ebff; }
.trainer-course-link { color: var(--c-primary); text-decoration: none; }
.trainer-course-link:hover { text-decoration: underline; }

.trainer-cta { text-align: center; padding: 48px 24px; background: var(--c-bg-soft); border-radius: var(--radius-card); }
.trainer-cta__title { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.trainer-cta p { font-size: 14px; color: var(--c-text-sub); margin-bottom: 20px; }

.rich-text { font-size: 15px; line-height: 1.9; color: var(--c-text); }
/* 语义化 P3-2：详情页合并小节标题由 h3 改为 h2（见 js/detail.js），此处同步覆盖以保持视觉一致 */
.rich-text h2, .rich-text h3 { font-size: 19px; font-weight: 600; margin: 26px 0 12px; padding-left: 12px; border-left: 4px solid var(--c-primary); }
.rich-text p { margin: 12px 0; }
.rich-text ul { padding-left: 22px; list-style: disc; margin: 12px 0; }
.rich-text img, .rich-text video { max-width: 100%; height: auto; border-radius: 6px; margin: 14px 0; }
.rich-text table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.rich-text th, .rich-text td { border: 1px solid var(--c-border); padding: 10px 12px; font-size: 14px; }

/* --- 需求7（本轮）：资讯详情页（行业洞察 / 管理工具）的「附件下载」区块 ---
   视觉沿用站内卡片语言，左侧加一条主色竖条把它与正文区分开（正文标题也是同样的竖条语言）。 */
.attach-box {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-card);
}
.attach-box__ico { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.attach-box__body { flex: 1 1 auto; min-width: 0; }
.attach-box__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }
.attach-box__desc { margin-top: 6px; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-text-sub); }
.attach-box__btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  /* 窄屏：图标 + 文案占一行，按钮独占一行通栏，避免按钮被挤成窄条 */
  .attach-box { flex-wrap: wrap; }
  .attach-box__btn { width: 100%; }
}

/* 侧边栏卡片 */
.side-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.side-card__title { font-size: 16px; font-weight: 600; margin-bottom: 14px; padding-left: 10px; border-left: 3px solid var(--c-primary); }
.side-trainer { display: flex; gap: 12px; align-items: center; }
.side-trainer__avatar { width: 80px; height: 70px; border-radius: 8px; object-fit: cover; background: var(--c-bg-soft); flex-shrink: 0; }
.side-trainer__name { font-size: 15px; font-weight: 600; }
.side-trainer__title { font-size: 13px; color: var(--c-text-sub); margin-top: 2px; }
.side-list { display: flex; flex-direction: column; gap: 12px; }
.side-list__item { display: flex; gap: 10px; align-items: center; }
.side-list__item img { width: 64px; height: 44px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--c-bg-soft); }
.side-list__item .t { font-size: 14px; line-height: 1.4; transition: color .15s; }
.side-list__item:hover .t { color: var(--c-primary); }
.side-list__item--text { display: block; padding: 8px 0; border-bottom: 1px dashed var(--c-border); }
.side-list__item--text:last-child { border-bottom: none; }
.side-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 相关分类 / 公开课分类：等宽三列横向排列，使 6 个一级分类精确落成 3×2 的横向两行
   （需求6/10）。用「双类名」提高特异性，避免被前一条 .side-chips 压掉。 */
.side-chips.side-chips--cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.side-chips.side-chips--cols3 .side-chip { text-align: center; padding: 6px 8px; }
.side-chip { padding: 6px 12px; background: var(--c-bg-soft); border-radius: 4px; font-size: 14px; color: var(--c-text); transition: .15s; }
.side-chip:hover { background: var(--c-primary); color: #fff; }
/* 优化000 第5条：相关分类 / 讲师分类 —— 每个分类的文字单行显示（不得折行），
   所有分类 chip 高度一致（等高 min-height + 垂直居中）；
   排列顺序由 detail.js 按名称长度升序组合（短→长），同名长度的优先落在同一行左右对齐。
   cols3 的 3 列网格改为等宽 flex（一行内尽量平铺、放不下自动换行到下一行）。 */
.side-chip { white-space: nowrap; display: inline-flex; align-items: center; box-sizing: border-box; min-height: 30px; }
.side-chips.side-chips--cols3 { display: flex; flex-wrap: wrap; }
.side-chips.side-chips--cols3 .side-chip { flex: 1 1 auto; justify-content: center; text-align: center; padding: 6px 10px; }

/* 上一篇 / 下一篇 */
.prev-next { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; border-top: 1px solid var(--c-border); padding-top: 20px; }
.prev-next a { font-size: 14px; color: var(--c-text-sub); max-width: 48%; }
.prev-next a:hover { color: var(--c-primary); }
.prev-next .pn-label { font-size: 12px; color: var(--c-text-ph); display: block; margin-bottom: 4px; }
.prev-next a.next { text-align: right; }

/* 返回顶部 */
.back-top {
  position: fixed; right: 28px; bottom: 36px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 20px;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--c-primary-hover); }

/* =========================================================
   6.6 公司介绍页（时间轴 / 地图 / 联系）
   ========================================================= */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border); }
.timeline__item { position: relative; padding-bottom: 30px; }
.timeline__item::before { content: ""; position: absolute; left: -25px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-primary); }
.timeline__year { font-size: 18px; font-weight: 700; color: var(--c-primary); }
.timeline__title { font-size: 16px; font-weight: 600; margin: 6px 0 6px; }
.timeline__desc { font-size: 14px; color: var(--c-text-sub); }

.content-page { max-width: 860px; margin: 0 auto; }
.content-page h2 { font-size: 22px; font-weight: 600; margin: 28px 0 14px; }
.content-page p { font-size: 15px; line-height: 1.9; color: var(--c-text); margin: 12px 0; }
.content-page img { border-radius: var(--radius-card); margin: 16px 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact-info .info-row { display: flex; gap: 14px; margin-bottom: 20px; }
.contact-info .info-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--c-bg-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.contact-info .info-label { font-size: 13px; color: var(--c-text-sub); }
.contact-info .info-value { font-size: 15px; font-weight: 500; }
.map-box { width: 100%; height: 360px; border-radius: var(--radius-card); overflow: hidden; background: var(--c-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23EAF2FF'/%3E%3Cpath d='M0 80 h200 M0 120 h200 M80 0 v200 M120 0 v200' stroke='%23C7D8F7' stroke-width='2' stroke-dasharray='8 6'/%3E%3Ccircle cx='100' cy='100' r='24' fill='%23165DFF' opacity='0.18'/%3E%3Cpath d='M100 76 c-13 0-24 11-24 24 0 18 24 40 24 40s24-22 24-40c0-13-11-24-24-24z' fill='%23165DFF'/%3E%3Ccircle cx='100' cy='100' r='8' fill='%23fff'/%3E%3C/svg%3E") center/120px no-repeat; border: 1px solid var(--c-border); }
.map-box iframe { width: 100%; height: 100%; border: 0; background: transparent; }

/* =========================================================
   弹窗（报名 / 咨询）
   ========================================================= */
.modal-mask {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--c-mask);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.modal-mask.is-open { opacity: 1; visibility: visible; }
.modal {
  background: #fff; border-radius: var(--radius-card);
  width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 28px; position: relative;
  transform: translateY(14px); transition: transform .25s ease;
}
.modal-mask.is-open .modal { transform: translateY(0); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; color: var(--c-text-sub); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.modal__close:hover { background: var(--c-bg-soft); }
.modal__title { font-size: 20px; font-weight: 700; }
.modal__sub { font-size: 14px; color: var(--c-text-sub); margin-top: 6px; }

/* Toast */
.toast {
  position: fixed; top: 90px; left: 50%; transform: translateX(-50%) translateY(-12px);
  background: rgba(0,0,0,.82); color: #fff; padding: 12px 22px; border-radius: var(--radius-btn);
  font-size: 14px; z-index: 1200; opacity: 0; visibility: hidden; transition: .25s;
  display: flex; align-items: center; gap: 8px;
}
.toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast .ico { color: #52e0a0; }

/* 图片占位（懒加载失败） */
.img-ph { background: var(--c-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23909399' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/40px no-repeat; }

/* =========================================================
   页脚
   ========================================================= */
.footer { background: #1d2330; color: #c4cad6; padding: 50px 0 24px; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 40px; }
/* 语义化 P3-2：页脚栏目标题标签由 h4 改为 h2（见 js/ui.js 页脚渲染），此处同步选择器以维持完全相同的视觉 */
.footer h2 { color: #fff; font-size: 16px; margin-bottom: 16px; font-weight: 600; }
.footer a { color: #c4cad6; font-size: 14px; display: block; padding: 5px 0; }
.footer a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 36px; padding-top: 20px; font-size: 13px; color: #8b92a3; text-align: center; }

/* 首页·管理资讯 三独立小模块 */
.news-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); align-items: stretch; }
/* 需求5（本轮）根因修复：原为 `.news-mod { ... height: 100%; }`。
   ⚠ `height: 100%` 在这里既多余又有害：
     · 多余 —— 父级 .news-mods 是 grid，默认 align-items: stretch 已让每张卡等高；
     · 有害 —— 百分比高度在「由内容决定行高」的 grid 里形成循环依赖，Chrome 会把
       卡片高度锁定到一个小于其内容的行高，卡内 .news-mod__list（flex: 1 1 auto）随之收缩，
       列表内容溢出卡片外。实测培训专题列表页：卡片声明 477.891px、实际内容 509.9px，
       溢出 32px 直接压到页脚上（页脚上沿 2168.3，卡片下沿 2200.3）。
   去掉后由 grid stretch 统一等高，高度回到内容驱动，溢出消失。
   注：首页资讯模块（js/home.js）复用同一样式，该处也一并受益（原同样存在隐性溢出风险）。 */
.news-mod { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 18px 18px 14px; display: flex; flex-direction: column; }
.news-mod__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 2px solid var(--c-bg-soft); }
.news-mod__title { font-size: 17px; font-weight: 700; color: var(--c-text); position: relative; padding-left: 12px; }
.news-mod__title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background: var(--c-primary); border-radius: 2px; }
.news-mod__more { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; }
.news-mod__more:hover { color: var(--c-primary); }
.news-mod__list { display: flex; flex-direction: column; flex: 1 1 auto; }
.news-mod__item {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.5; color: var(--c-text-sub);
  padding: 9px 0 9px 14px; border-bottom: 1px dashed var(--c-border);
  position: relative; transition: color .15s;
}
.news-mod__item::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-border); }
.news-mod__item:hover { color: var(--c-primary); }
.news-mod__item:hover::before { background: var(--c-primary); }
.news-mod__item:last-child { border-bottom: none; }

/* =========================================================
   10. 三端自适应断点
   ========================================================= */
/* 平板 768–1199：卡片 4→2 列，筛选换行，隐藏 PC 专属 */
@media (max-width: 1199px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  
  .nav__link { font-size: 15px; padding: 10px 6px; } /* 平板导航字号适度加大，避免溢出 */
  .nav__actions .btn { padding: 0 10px; font-size: 13px; }
  .hero { height: 400px; }                  /* 平板 Hero 高度（需求：平板 400px） */
  .course-table th:nth-child(5), .course-table td:nth-child(5) { display: none; } /* 平板隐藏报价列，保留表格 */
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  /* 正式版优化v3 第9条：桌面 10 列，平板按原降级节奏等比取半 → 5 列 */
  .trainer-grid { grid-template-columns: repeat(5, 1fr); }
  .trainer-list-grid { grid-template-columns: repeat(5, 1fr); }
  .internal-grid { grid-template-columns: repeat(3, 1fr); }
  
  .benchmark-grid { grid-template-columns: repeat(3, 1fr); }
  .topic-grid { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .internal-card { gap: 16px; padding: 14px 0; }
  .internal-card__cover { width: 140px; height: 92px; }
  .internal-card__title { font-size: 17px; }
  .internal-card__summary { -webkit-line-clamp: 1; }
  .internal-card__action { margin-left: 10px; }
  .internal-card__btn { padding: 6px 18px; font-size: 13px; }
  .course-filter { gap: 14px 20px; padding: 16px; }
  
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* 平板：资讯 4 模块 2 列（案例轮播的断点规则已移至其组件区块，见「首页·案例见证轮播」段）*/
  .news-mods { grid-template-columns: repeat(2, 1fr); }
  /* 平板：顶部功能条换行重排，品牌/搜索/右侧三块全部保留 */
  .topbar__inner { flex-wrap: wrap; align-items: center; gap: 10px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  
  /* 优化轮2：搜索区触控高度修复（原为 flex: 1 1 100%，未写 height）
     ⚠ .topbar__center 是 **column** 方向 flex 容器，此时 flex-basis 作用于**高度**，
       100% 直接把高度撑成「父容器高的 100%」再被 flex-shrink:1 压到 min-content，
       实测 768–1199px 只剩 24px、360–767px 只剩 23px（均低于 WCAG 2.2 AA 2.5.8 的 24×24）。
       改为 flex: 0 0 auto 后 basis 回落到 height，显式 40px 才真正生效（= 原本就已声明、却被静默覆盖的值）。 */
  .topbar__search { flex: 0 0 auto; height: 40px; max-width: 100%; margin-top: 4px; }
  .page-banner.pb { height: 300px; }
  .pb__title { font-size: 26px; }
  .pb__sub { font-size: 15px; }
}

/* 移动端 <768：汉堡、筛选抽屉、表格降级卡片、多列强制单列、禁横向滚动 */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 16px; }
  .nav__menu, .nav__actions { display: none; }
  .nav__hamburger { display: flex; }
  .mobile-menu { display: block; }
  .grid, .grid-2 { grid-template-columns: 1fr; }
  .internal-card { gap: 10px; padding: 12px 0; align-items: flex-start; }
  .internal-card__cover { width: 92px; height: 64px; }
  .internal-card__body { gap: 5px; }
  .internal-card__title { font-size: 15px; }
  .internal-card__summary { font-size: 13px; -webkit-line-clamp: 1; }
  .internal-card__tags { gap: 6px; flex-wrap: nowrap; }
  .internal-card__tag { font-size: 11px; padding: 1px 6px; }
  .internal-card__lecturer { font-size: 11px; white-space: nowrap; }
  .internal-card__action { align-self: center; margin-left: 6px; }
  .internal-card__btn { padding: 5px 10px; font-size: 11px; }
  
  .hero { height: 220px; }
  .page-banner.pb { height: 200px; }
  .pb__title { font-size: 20px; }
  .pb__sub { font-size: 13px; }
  .pb__arrow { display: none; }
  .pb__tag { font-size: 11px; padding: 2px 10px; margin-bottom: 10px; }
  .pb__dots { bottom: 12px; }
  .hero__content { max-width: 92%; }
  .hero__title { font-size: 22px; }
  .hero__subtitle { font-size: 14px; }
  .hero__btns { flex-wrap: wrap; }
  .hero__arrow { display: none; }
  
  .detail-banner__inner { flex-direction: column; align-items: center; text-align: center; }
  /* 正式版优化v3 第10条：竖排后取消 stretch（否则封面会被拉满行高），回到固定方形小图 */
  .detail-cover { width: 130px; height: 130px; min-height: 0; align-self: center; }
  .detail-head__meta, .detail-head__tags, .detail-head__btns { justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  
  /* 移动端表格强制降级卡片（无论平板设置如何）。
     这里的 !important 是必需的：它要压过 JS / 平板视图开关对同一组元素的 display 控制，
     属于「移动端无条件降级」兜底，请勿按「代码异味」清除。 */
  .course-table { display: none !important; }
  .course-cards { display: block !important; }
  /* 筛选抽屉 */
  .filter-bar { display: none; }
  .mobile-filter-trigger { display: flex; }
  .mod-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .prev-next { flex-direction: column; }
  .prev-next a { max-width: 100%; }
  .prev-next a.next { text-align: left; }
  /* 移动端：详情页左右分栏强制上下堆叠（需求第5/10节） */
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { order: -1; }
  /* 需求2：移动端标签栏由「横向滚动」改为「换行」——
     新页签结构依赖 margin-bottom:-2px 让激活项压住容器底部的 2px 主色线，
     而 overflow 滚动会把这段溢出裁掉，激活页签会与底线脱开。
     5 个标签在 390px 下本就勾不到一行，换行呈现即可，且不产生横向溢出。 */
  .detail-tabs { flex-wrap: wrap; overflow: visible; }
  .detail-tab { padding: 12px 16px; font-size: 15px; }
  /* 企业内训 / 培训讲师模块移动端单列降级 */
  .course-grid { grid-template-columns: 1fr; }
  .trainer-grid { grid-template-columns: repeat(2, 1fr); }
  .trainer-list-grid { grid-template-columns: repeat(2, 1fr); }
  .internal-grid { grid-template-columns: repeat(2, 1fr); }
  
  .benchmark-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .course-filter { flex-direction: column; align-items: flex-start; gap: 12px; }
  
  .trainer-card__avatar { width: 100%; height: 100%; }
  .catbar__more { margin-left: 0; }
  /* 移动端：资讯 4 模块单列（案例轮播的断点规则见其组件区块）*/
  .news-mods { grid-template-columns: 1fr; }
  /* 移动端：顶部功能条三块全部保留，纵向堆叠重排 */
  .topbar__inner { flex-wrap: wrap; align-items: center; gap: 8px; height: auto; padding-top: 8px; padding-bottom: 8px; }
  
  /* 优化轮2：同 1199px 段的成因说明 —— column 容器里 flex-basis 抢占了高度。
     此处原来只改了 height 却没动 flex，40px 被 flex: 1 1 100% 静默覆盖。 */
  .topbar__search { flex: 0 0 auto; height: 40px; margin-top: 4px; }
  
  .topbar__scope { padding: 0 6px; font-size: 13px; }
  .topbar__input { padding: 0 10px; font-size: 13px; }
  .topbar__search-btn { padding: 0 14px; font-size: 14px; }
}

/* 移动端筛选抽屉 */
.filter-drawer-mask { position: fixed; inset: 0; background: var(--c-mask); z-index: 1050; opacity: 0; visibility: hidden; transition: .25s; }
.filter-drawer-mask.is-open { opacity: 1; visibility: visible; }
.filter-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 360px; background: #fff; z-index: 1060; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; }
.filter-drawer.is-open { transform: translateX(0); }
.filter-drawer__head { padding: 16px 18px; border-bottom: 1px solid var(--c-border); font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.filter-drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.filter-drawer__foot { padding: 14px 18px; border-top: 1px solid var(--c-border); display: flex; gap: 12px; }
.filter-drawer .filter-row { border-bottom: 1px solid var(--c-border); flex-direction: column; align-items: stretch; gap: 10px; }
.filter-drawer .filter-row__label { width: auto; padding-top: 0; }
.filter-drawer .filter-row__body { max-height: none; }
/* 抽屉内的宿主重置：.filter-bar 在 767px 断点被整体 display:none，
   而移动端该元素会被 Filter.bindMobile() 原样移入抽屉复用，
   若不在此恢复可见性并剥掉桌面态的卡片外观，抽屉会打开成空白。*/
.filter-drawer .filter-bar {
  display: block; background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 0; margin: 0;
}
/* 抽屉关闭按钮（原为内联 style，迁移为类）*/
.filter-drawer__close { font-size: 22px; line-height: 1; color: var(--c-text-sub); }
.filter-drawer__close:hover { color: var(--c-text); }

/* 列表页分页下方的附加模块（案例现场 / 专题资讯，原为内联 margin-top:48px）*/
.list-extra-sec { margin-top: 48px; }

/* --- 需求5（本轮）：培训专题列表页 —— 底部导航栏（页脚）与上方模块之间留出间距 ---
   该页内容区为 <div class="container">，其下沿与页脚上沿原本严丝合缝（实测间距 = 0）——
   上面 .news-mod 修掉 32px 溢出后，间距回到 0 而非负值，但仍是「白底内容直接顶到深色页脚」。
   这里只给专题页独有的 #topicNews 加下外边距，不触碰其它列表页。
   取值 --sp-15(60px) = --gap-module，站点既有模块节奏。 */
#topicNews { margin-bottom: var(--sp-15); }
/* 静态内容页容器（原为内联 padding-top:24px）*/
/* 需求8（本轮）：公司介绍四子页 —— 底部导航栏（页脚）与上方内容之间留出间距。
   page.html 的内容区下沿原本与页脚上沿严丝合缝（实测四个子页间距均为 0），
   补下内边距而非下外边距：padding 参与 .container 自身高度计算，不会与内部的
   .content-page 外边距发生折叠（margin 折叠会让间距时有时无，随末块类型变化）。
   取值 --sp-15(60px)，与专题页及站点模块节奏一致。 */
.container--page { padding-top: 24px; padding-bottom: var(--sp-15); }

/* --- 需求8（本轮）：公司介绍子导航栏 ---
   企业简介 | 服务优势 | 发展历程 | 联系我们 四页此前互为孤岛，只能靠顶部主导航的
   悬浮菜单跳转。此处在内容区顶部放一条子导航：当前页高亮（同时标 aria-current），
   其余可点。样式沿用站内卡片语言（白底 + 1px 边框 + 圆角），不引入新的视觉体系。 */
.sub-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-1);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.sub-nav__item {
  flex: 0 0 auto;
  padding: 9px 18px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-text-sub);
  border-radius: var(--radius-btn);
  transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.sub-nav__item:hover { color: var(--c-primary); background: var(--c-bg-soft); }
.sub-nav__item.is-active { color: #fff; background: var(--c-primary); }
.sub-nav__item.is-active:hover { color: #fff; background: var(--c-primary-active); }
@media (max-width: 767px) {
  .sub-nav { gap: 6px; margin-bottom: var(--sp-4); }
  .sub-nav__item { flex: 1 1 auto; text-align: center; padding: 9px 10px; font-size: var(--fs-base); }
}
@media (max-width: 767px) {
  .list-extra-sec { margin-top: 32px; }
  .container--page { padding-top: 16px; }
}

/* =========================================================
   首页·案例见证轮播（task5：与列表页同款 list-card，一排4个，左右自动轮播）
   ========================================================= */
.case-carousel { position: relative; }
.case-carousel__viewport { overflow: hidden; }
.case-carousel__track { display: flex; gap: var(--gap-card); transition: transform .5s ease; }
/* 优化版本3 第1条：首页案例见证「一行显示 5 个，多于 5 个后轮播」。
   此前是 4 列（100% - 3 个间距）/4，与需求「一行 5 个」不符；
   5 列时的间距个数为 4，必须用 (100% - 4 * gap) / 5，否则卡片会溢出视口被裁掉半个。 */
.case-carousel .list-card { flex: 0 0 calc((100% - 4 * var(--gap-card)) / 5); width: calc((100% - 4 * var(--gap-card)) / 5); }
.case-carousel__btn {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card); color: var(--c-primary);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 5;
}
.case-carousel__btn:hover { background: var(--c-primary); color: #fff; }
.case-carousel__btn--prev { left: 12px; }
.case-carousel__btn--next { right: 12px; }

/* 首页·客户见证通栏（优化版本1 第5条：
   后台「客户见证」模块维护的一张图片 —— 宽度与网站（内容容器）一致，高度不限制、按原图自适应） */
.client-witness__banner { margin-bottom: var(--gap-card); }
.client-witness__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card); background: var(--c-bg-soft);
}

/* 首页·客户 logo 墙（task8：预留上传位，宽度=内容宽度） */
.client-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); }
.client-logo {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.client-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--c-primary); }
.client-logo img { width: 100%; height: auto; display: block; }

/* ── 响应式：客户 logo 墙 / 案例见证轮播 ──
   这两组组件的基础规则就在上方（属于「按日期追加」的首页补丁区块，位于文件较后位置）。
   断点覆盖原先写在文件前面的大断点块内，而 @media 不提升特异性、只按出现顺序决胜 ——
   后出现的基础规则会把前面的断点覆盖整个压掉：实测修复前 390px 下 logo 墙仍是 4 列
   （每格仅 76px）、案例轮播仍是 4 个/视图、箭头在 ≤1199px 也未隐藏。
   故断点覆盖必须紧随基础规则之后，不能再放回文件前段。*/
@media (max-width: 1199px) {
  .client-logos { grid-template-columns: repeat(3, 1fr); }
  .case-carousel .list-card { flex-basis: calc((100% - var(--gap-card)) / 2); width: calc((100% - var(--gap-card)) / 2); }
  .case-carousel__btn { display: none; }
}
@media (max-width: 767px) {
  .client-logos { grid-template-columns: repeat(2, 1fr); }
  .case-carousel .list-card { flex-basis: 100%; width: 100%; }
}

/* 首页·案例见证：标题居中、去标签（task7） */
.case-card .list-card__title { text-align: center; }

/* 页脚·联系我们（二维码 + 电话）（task8） */

.footer__qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.footer__qr img { width: 88px; height: 88px; background: #fff; border-radius: 6px; padding: 4px; box-sizing: border-box; }
.footer__qr span { font-size: 13px; color: #c4cad6; }

/* =========================================================
   网站优化任务汇总 v2：新增/调整模块样式
   ========================================================= */

/* 任务1：顶部功能条新结构（左侧长方体logo / 中间搜索+分类 / 右侧服务热线） */
.topbar__logo-area {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 100%;
  text-decoration: none;
}
/* r8：站标改为位图 logo.png（原为「色块 + 文字」两个 span）。
   显示高度 54px 由位图实测反推：画布 220×87、中文字形高 29px → 54 × 29/87 = 18px，
   与原文字字号一致，故视觉字号不变而标识更完整。
   width:auto 保持 220:87 原始比例（不拉伸）；flex:0 0 auto 防止被 flex 压扁。
   ⚠ 不套用 UI.imgTag()：它带 loading="lazy"（站标在首屏，不应懒加载），
   且失败时会塞占位封面图 —— 站标应保留浏览器原生 alt 文本兜底（见 ui.js 的 data-fb="1"）。 */
.topbar__logo-img { display: block; height: 54px; width: auto; flex: 0 0 auto; }

.topbar__center {
  flex: 1 1 auto; max-width: 640px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.topbar__cats {
  width: 100%;
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
  gap: 4px 18px;
  /* 需求优化v8 第11条：① 字号适度缩小；② 无论后台再增加多少分类，本行恒为一行 ——
     超出搜索框宽度的部分直接裁掉（overflow:hidden），不换行、不撑破顶栏布局；
     ③ 左右宽度与上方搜索框一致：二者同为 .topbar__center 的 100% 宽（含盒模型）。 */
  font-size: 11.5px; color: var(--c-text-sub);
  overflow: hidden;
}
.topbar__cats a { color: var(--c-text-sub); transition: color .2s; white-space: nowrap; }
.topbar__cats a:hover { color: var(--c-primary); }

.topbar__hotline-only {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px;
  height: 100%;
}
.topbar__hotline-label { font-size: 12px; color: var(--c-text-sub); }
.topbar__hotline-num {
  font-size: 20px; font-weight: 700; color: var(--c-primary);
  letter-spacing: .5px;
}

/* 任务3：幻灯片下方 4 图标入口 */
.quick-entries-sec { padding: 28px 0; }
.quick-entries { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); }
.quick-entry {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; background: #fff;
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.quick-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.quick-entry__icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.quick-entry__title { font-size: 17px; font-weight: 600; color: var(--c-text); }
.quick-entry__sub { font-size: 13px; color: var(--c-text-sub); margin-top: 2px; }

/* 任务4：课程推荐下方 4 色卡长条 */
.promo-cards-sec { padding-top: 0; margin-top: -16px; }
.promo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); background: #F4F5F7; padding: 22px; border-radius: var(--radius-card); }
.promo-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; border-radius: var(--radius-card);
  color: #fff; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 100px;
}
.promo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.promo-card__title { font-size: 18px; font-weight: 700; }
.promo-card__sub { font-size: 13px; opacity: .92; margin-top: 4px; }
.promo-card__icon { flex-shrink: 0; opacity: .9; }

/* 任务7：企业内训图片下方概要 */
.internal-mini__summary {
  font-size: 12px; color: var(--c-text-sub); line-height: 1.5;
  margin-top: 6px; padding: 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 任务9：公开课紧凑表格 + 课程名加粗 */
.course-table--compact th, .course-table--compact td { padding: 12px 14px; font-size: 14px; }
.course-table--compact th { font-size: 14px; font-weight: 700; text-align: center; }
#courses .course-table--compact th { font-size: 15px; }
.course-table__name { font-weight: 600; color: var(--c-text); }
#courses .course-table__name { font-size: 13px; text-align: left; }
.course-filter--two-row { flex-direction: column; align-items: stretch; gap: 14px; }
.course-filter--two-row .course-filter__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.course-filter__label--sub { margin-left: 12px; }

/* 任务8：企业内训下方 7 步流程横幅 */
.internal-banner-sec { padding-top: 0; }
.internal-banner { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px 32px; }
.internal-banner__title { text-align: center; font-size: 20px; font-weight: 600; color: var(--c-text); margin-bottom: 24px; }
.internal-banner__flow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.internal-banner__step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 110px; }
.internal-banner__icon {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid #FF7A00; color: #FF7A00;
  display: flex; align-items: center; justify-content: center;
}
.internal-banner__arrow { color: #FF7A00; font-size: 20px; font-weight: 700; }
.internal-banner__label { font-size: 13px; color: var(--c-text); font-weight: 500; text-align: center; }

/* 任务14：人才管理（两行，每行 5 个，与培训讲师模块一致） */
.talent-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-card); }
.talent-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; cursor: pointer; border: 1px solid #CDD3DF; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; /* 需求优化v10 第1条：卡片加 logo 元素色之一的背景颜色（主色浅色调） */ background: var(--c-primary-soft, #F0F5FF); }
.talent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.talent-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--c-bg-soft); font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.talent-card__title { font-size: 17px; font-weight: 600; color: var(--c-text); }
.talent-card__summary { font-size: 13px; color: var(--c-text-sub); margin-top: 8px; line-height: 1.6; }
.talent-card__more { font-size: 13px; color: var(--c-primary); font-weight: 600; margin-top: auto; padding-top: 14px; }

/* 任务13：培训现场横向滚动轮播 */
.training-scene__wrap { overflow: hidden; }
.training-scene__item { width: 280px; flex-shrink: 0; }
.training-scene__img { aspect-ratio: 16/10; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.training-scene__img img { width: 100%; height: 100%; object-fit: cover; }
.training-scene__title { text-align: center; font-size: 14px; color: var(--c-text-sub); margin-top: 8px; }
/* 与 recScroll 同源的回环接缝修复（成因与推导见上方 recScroll 处的注释）：
   轨道同样是「两份 + gap: var(--gap-card)」，故位移需补 0.5·gap。 */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - var(--gap-card) / 2)); }
}

/* 任务11：底部上方文字型友情链接 */
.friend-links-sec { padding: 18px 0; background: #F8F9FB; border-top: 1px solid var(--c-border); }
.friend-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.friend-links__label { font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.friend-links__list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.friend-links a { font-size: 13px; color: var(--c-text-sub); }
.friend-links a:hover { color: var(--c-primary); }

/* 任务12：页脚改版 */
.footer__col-contact { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: #c4cad6; }
.footer__col-contact a { color: #c4cad6; padding: 0; display: inline; }
.footer__col-contact a:hover { color: #fff; }
.footer__col-contact-ico { font-size: 14px; }
/* r8 · 需求②：二维码区下外边距 14px → 0（与下一行 .footer__contacts 的 margin-top 合计计算）。
   页脚联系列自上而下为 h4 / 二维码区 / 联系电话行，二者间距原为 14 + 14 = 28px，
   现改为 0 + 10 = 10px，把联系电话行**上移 18px** —— 该数值由 _r8_probe4.js 实测得出：
   联系电话文字行原比左侧「核心业务」列末行低 17.9px，两处文字行高同为 19px，
   故上移 18px 即达成 top / 中心 / 基线三重对齐。 */
.footer__qrs { display: flex; gap: 16px; margin-bottom: 0; }
/* 需求9（本轮）：.footer__bottom-contact 的样式随「横线上方那组热线/客服」一并移除 ——
   该组已整块删除（热线与客服改由 .footer__col-contact 统一落在二维码下方），
   这里若继续保留 4 条规则即为本轮改动引入的死样式。 */

/* ---------- 右侧悬浮通栏：在线咨询 / 咨询热线 / 微信客服 ---------- */
.float-bar {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 1002;
  width: 68px;
  background: var(--c-primary);
  border-radius: 6px 0 0 6px;
  box-shadow: -3px 5px 14px rgba(22,93,255,.2);
  overflow: hidden;
  font-family: var(--font-sans-base);
}
.float-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 13px 6px 12px;
  color: #fff; text-decoration: none; text-align: center;
  font-size: 12px; line-height: 1.2;
  /* 上线前体检修复：在线咨询/微信客服两项由 <a href="javascript:void(0)"> 改为 <button>，
     这里必须抹掉浏览器给 button 的默认灰底、边框与字体，否则与另外两条 <a> 条目视觉不一致 */
  border: 0; background: transparent; font-family: inherit; -webkit-appearance: none; appearance: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease, transform .15s ease;
  cursor: pointer;
}
.float-bar__item:last-child { border-bottom: none; }
.float-bar__item:hover { background: var(--c-primary-hover); }
.float-bar__item:active { background: var(--c-primary-active); }
.float-bar__icon {
  width: 26px; height: 26px;
  fill: #fff;
}
.float-bar__label { white-space: nowrap; }
@media (max-width: 767px) {
  .float-bar { display: none; }
}

/* 三端适配补充 */
@media (max-width: 1199px) {
  .topbar__inner { height: auto; padding: 10px 0; gap: 12px; }
  .topbar__logo-area { order: 1; }
  .topbar__hotline-only { order: 2; margin-left: auto; }
  .topbar__center { max-width: none; width: 100%; order: 3; }
  .topbar__cats { gap: 4px 12px; }
  .quick-entries { grid-template-columns: repeat(2, 1fr); }
  .promo-cards { grid-template-columns: repeat(2, 1fr); }
  .internal-banner__flow { gap: 16px; }
  .internal-banner__arrow { transform: rotate(90deg); }
  
  .talent-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .topbar__inner { gap: 10px; padding: 8px 0; }
  .topbar__logo-area { order: 1; }
  .topbar__hotline-only { order: 2; margin-left: auto; }
  .topbar__center { order: 3; width: 100%; max-width: none; }
  /* r8：站标位图在窄屏按比例缩小（对应原「色块 40px + 文字 15px」档） */
  .topbar__logo-img { height: 42px; }
  .topbar__hotline-num { font-size: 16px; }
  .topbar__cats { gap: 4px 10px; font-size: 12px; }
  .quick-entries { grid-template-columns: repeat(2, 1fr); }
  .promo-cards { grid-template-columns: 1fr; }
  .internal-banner { padding: 20px; }
  .internal-banner__flow { flex-direction: column; gap: 18px; }
  .internal-banner__arrow { transform: rotate(90deg); }
  
  .talent-grid { grid-template-columns: repeat(2, 1fr); }
  .training-scene__item { width: 220px; }
  .friend-links { gap: 10px; }
}

/* =========================================================
   首页优化补丁（2026-09-05）：任务3/4/5/6/7
   ========================================================= */

/* 任务3：人才管理卡片线性 SVG 图标（主色蓝描边） */
.talent-card__icon-svg {
  width: 28px; height: 28px;
  fill: none; stroke: var(--c-primary); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 需求优化v12 第2条：后台更换的自定义图标图片（SVG/PNG）与矢量图标同尺寸 */
.talent-card__icon-img {
  width: 28px; height: 28px; object-fit: contain; display: block;
}

/* 任务4：课程推荐类型角标（封面内，左上方）*/
.course-card__kind {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: rgba(22,93,255,.92);
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 10px; border-radius: 4px; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.course-card__kind--internal { background: var(--c-primary-active); }
.course-card__kind--public { background: var(--c-primary); }

/* 任务5：管理资讯三列等高对齐 */

/* 任务6：Hero 首屏品牌装饰（右侧，低饱和，无动效） */
.hero__deco {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none; z-index: 1;
}
.hero__deco-svg { width: 360px; max-width: 100%; opacity: .92; }
@media (max-width: 767px) { .hero__deco { display: none; } }

/* 任务7：顶栏右侧在线咨询入口 */

.topbar__hotline { display: flex; align-items: baseline; gap: 6px; color: var(--c-text-sub); }

/* ============================================================
   需求4：讲师详情页「视频课程试听」视频播放器
   ============================================================ */
.trainer-video { padding: 4px 0; }
.trainer-video__head {
  font-size: 18px; font-weight: 700; color: var(--c-text);
  padding-left: 12px; border-left: 3px solid var(--c-primary);
  margin-bottom: 16px;
}
.trainer-video__player {
  background: #000; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.trainer-video__el { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.trainer-video__tip { font-size: 13px; color: var(--c-text-sub); line-height: 1.7; margin-top: 12px; }
.trainer-video__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ============================================================
   需求5：企业内训列表页 —— 列表右侧 1/3 宽分类模块（长方形条目）
   ============================================================ */
.internal-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.internal-layout__main { min-width: 0; }
.internal-cats {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  padding: 18px 16px; box-shadow: var(--shadow-card);
}
.internal-cats__head {
  font-size: 16px; font-weight: 700; color: var(--c-text);
  padding-left: 10px; border-left: 3px solid var(--c-primary);
  margin-bottom: 14px;
  /* 第1条：面板内部滚动时标题保持可见 */
  position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 2px; padding-bottom: 2px;
}
.internal-cats__item {
  display: block; padding: 11px 14px; margin-bottom: 8px;
  background: var(--c-bg-soft); border: 1px solid transparent; border-radius: 4px;
  font-size: 14px; color: var(--c-text); transition: all .15s ease;
}
.internal-cats__item:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.internal-cats__item.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
/* 优化版本2 第1条：分类模块的最大高度由 JS 按左侧列表实际高度写入 inline style
   （.internal-cats 的 max-height），内容超出时面板内部滚动；标题吸顶，滚动时不丢失上下文 */
.internal-cats { overflow-y: auto; }
.internal-cats::-webkit-scrollbar { width: 6px; }
.internal-cats::-webkit-scrollbar-thumb { background: #d8dce3; border-radius: 3px; }
@media (max-width: 767px) {
  /* 单列堆叠时列表在上方、分类在下，不再需要做等高约束 */
  .internal-cats { overflow-y: visible; max-height: none !important; }
}
.internal-cats__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; padding: 0 2px; }
.internal-cats__sub {
  font-size: 12px; color: var(--c-text-sub); background: #F5F7FA;
  border-radius: 3px; padding: 3px 8px; transition: all .15s ease;
}
.internal-cats__sub:hover { background: var(--c-primary); color: #fff; }

/* ============================================================
   需求8：公开课筛选「开课时间」年度 + 月份下拉框
   ============================================================ */
.filter-row__body--select { display: flex; flex-wrap: wrap; gap: 12px; }
.filter-select {
  appearance: none; -webkit-appearance: none;
  min-width: 132px; height: 38px; padding: 0 34px 0 12px;
  font-size: 14px; color: var(--c-text); font-family: inherit;
  background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23606266' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  border: 1px solid var(--c-border); border-radius: var(--radius-btn);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.filter-select:hover { border-color: var(--c-primary); }
.filter-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(22,93,255,.12); }

@media (max-width: 1199px) {
  .internal-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .internal-layout { grid-template-columns: 1fr; }
  .filter-select { flex: 1 1 132px; min-width: 0; }
}

/* ============================================================
   管理资讯列表页（list.html?type=news）
   参考 dashiguanpei.cn/news.php 的信息架构优化：
   焦点头条 + 行式紧凑列表 + 侧栏（热门/分类/图文）+ 六分类速览
   保持本站科技蓝设计体系（var(--c-primary) / 8px 圆角 / 轻投影）
   ============================================================ */

/* ---------- 主体两栏：左 2fr 列表 + 右 1fr 侧栏 ---------- */
.news-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.news-layout__main { min-width: 0; }
/* 行式列表不使用网格列，去掉 .grid 的列定义兜底（render() 已不为其加 .grid） */
#listGrid.news-list { display: block; }

/* ---------- 焦点资讯大卡 ---------- */
.news-lead-wrap { margin-bottom: 20px; }
.news-lead {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0;
  background: #fff; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid var(--c-border);
  transition: box-shadow .25s ease, transform .25s ease;
}
.news-lead:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.news-lead__cover { position: relative; overflow: hidden; background: var(--c-bg-soft); min-height: 210px; }
.news-lead__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-lead:hover .news-lead__cover img { transform: scale(1.03); }
.news-lead__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news-lead__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.news-lead__badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  background: var(--c-gradient); color: #fff; font-size: 12px; font-weight: 600; border-radius: 3px;
}
.news-lead__cat { color: var(--c-primary); background: rgba(22,93,255,.08); padding: 2px 8px; border-radius: 3px; }
.news-lead__date { color: var(--c-text-ph); }
.news-lead__title {
  font-size: 22px; font-weight: 700; line-height: 1.45; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead:hover .news-lead__title { color: var(--c-primary); }
.news-lead__summary {
  font-size: 14px; line-height: 1.75; color: var(--c-text-sub);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead__foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--c-border);
  display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--c-text-ph);
}
.news-lead__more { color: var(--c-primary); font-weight: 600; }

/* ---------- 行式紧凑列表 ---------- */
.news-list { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 6px 20px; }
.news-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 4px; border-bottom: 1px dashed var(--c-border);
  transition: background .15s ease, padding .15s ease;
}
.news-row:last-child { border-bottom: none; }
.news-row:hover { background: var(--c-bg-soft); }
.news-row__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-bg-soft); border-radius: 6px; padding: 8px 4px; line-height: 1.2;
  transition: background .15s ease;
}
.news-row__date b { font-size: 22px; font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.news-row__date span { font-size: 12px; color: var(--c-text-ph); margin-top: 2px; }
.news-row:hover .news-row__date { background: #E3EDFF; }
.news-row__body { min-width: 0; }
.news-row__title {
  font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--c-text); margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row:hover .news-row__title { color: var(--c-primary); }
.news-row__summary { font-size: 13px; line-height: 1.6; color: var(--c-text-sub); }
.news-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.news-row__cat { font-size: 12px; color: var(--c-primary); background: rgba(22,93,255,.08); padding: 2px 8px; border-radius: 3px; }
.news-row__views { font-size: 12px; color: var(--c-text-ph); }

/* ---------- 侧栏 ---------- */
.news-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.news-side__block { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px 18px 18px; }
.news-side__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--c-bg-soft);
}
.news-side__title { font-size: 16px; font-weight: 700; color: var(--c-text); position: relative; padding-left: 12px; }
.news-side__title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; background: var(--c-primary); border-radius: 2px;
}

/* 热门资讯排行榜 */
.news-hot__item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--c-border); font-size: 14px;
}
.news-hot__item:last-child { border-bottom: none; }
.news-hot__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 3px; background: #F0F2F5; color: var(--c-text-ph);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.news-hot__no.is-top { background: var(--c-primary); color: #fff; }
.news-hot__item:nth-child(2) .news-hot__no.is-top { background: var(--c-primary-hover); }
.news-hot__item:nth-child(3) .news-hot__no.is-top { background: #7EA6FF; }
.news-hot__title { color: var(--c-text); transition: color .15s ease; }
.news-hot__item:hover .news-hot__title { color: var(--c-primary); }
.news-hot__views { font-size: 12px; color: var(--c-text-ph); font-variant-numeric: tabular-nums; }

/* 资讯分类导航（带条数） */
.news-cats { display: flex; flex-direction: column; }
.news-cats__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 4px;
  background: var(--c-bg-soft); font-size: 14px; color: var(--c-text); transition: all .15s ease;
}
.news-cats__item:last-child { margin-bottom: 0; }
.news-cats__item em { font-style: normal; font-size: 12px; color: var(--c-text-ph); font-variant-numeric: tabular-nums; }
.news-cats__item:hover { background: var(--c-primary); color: #fff; }
.news-cats__item:hover em { color: rgba(255,255,255,.85); }

/* 精彩图文 */
.news-thumbs { display: flex; flex-direction: column; gap: 12px; }
.news-thumbs__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.news-thumbs__item img { width: 76px; height: 52px; object-fit: cover; border-radius: 4px; background: var(--c-bg-soft); }
.news-thumbs__item span { font-size: 13px; line-height: 1.5; color: var(--c-text-sub); transition: color .15s ease; }
.news-thumbs__item:hover span { color: var(--c-primary); }

/* ---------- 底部六分类速览（3 列） ---------- */
.news-digest {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card);
  margin-top: 48px;
}
.news-digest__col { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 18px 18px 14px; display: flex; flex-direction: column; }
.news-digest__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--c-bg-soft);
}
.news-digest__name { font-size: 17px; font-weight: 700; color: var(--c-text); position: relative; padding-left: 12px; }
.news-digest__name::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; background: var(--c-primary); border-radius: 2px;
}
.news-digest__more { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; }
.news-digest__more:hover { color: var(--c-primary); }
.news-digest__list { display: flex; flex-direction: column; }
.news-digest__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--c-border); font-size: 14px;
}
.news-digest__item:last-child { border-bottom: none; }
.news-digest__title { color: var(--c-text-sub); transition: color .15s ease; }
.news-digest__item:hover .news-digest__title { color: var(--c-primary); }
.news-digest__date { font-size: 12px; color: var(--c-text-ph); font-variant-numeric: tabular-nums; }
.news-digest__empty { font-size: 13px; color: var(--c-text-ph); padding: 10px 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
  .news-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .news-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-side__block:last-child { grid-column: 1 / -1; }
  .news-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-digest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-lead { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .news-lead { grid-template-columns: minmax(0, 1fr); }
  .news-lead__cover { min-height: 0; aspect-ratio: 16/10; }
  .news-lead__body { padding: 16px; gap: 8px; }
  .news-lead__title { font-size: 18px; }
  .news-lead__summary { -webkit-line-clamp: 2; }
  .news-list { padding: 4px 14px; }
  .news-row { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; }
  .news-row__date { padding: 6px 2px; }
  .news-row__date b { font-size: 19px; }
  .news-row__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 6px; }
  /* 移动端列宽窄，标题放开到 2 行，避免关键信息被截断 */
  .news-row__title { -webkit-line-clamp: 2; }
  .news-row__summary { -webkit-line-clamp: 2; }
  .news-side { grid-template-columns: minmax(0, 1fr); }
  .news-side__block:last-child { grid-column: auto; }
  .news-thumbs { grid-template-columns: minmax(0, 1fr); }
  .news-digest { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
}

/* =============================================================
   内联样式承接层
   原先散落在 js/*.js 模板字符串里的写死 style="" 统一迁到此处，
   使样式集中在样式表内、便于统一调整。
   取值与原内联声明逐项一致，渲染结果不变。
   ============================================================= */

/* 按钮：禁用态（原先靠内联 opacity:.5）*/
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 按钮留白变体 */
.btn--spaced { margin-top: 10px; }
.btn--spaced-sm { margin-top: 8px; }
.btn--inline-gap { margin-left: 10px; }

/* 空状态尺寸变体（.empty 默认 padding:70px 20px）*/
.empty.empty--block { padding: 60px 0; }
.empty.empty--xl { padding: 40px 0; }
.empty.empty--lg { padding: 24px 0; }
.empty.empty--md { padding: 20px 0; }
.empty.empty--sm { padding: 12px 0; }
.empty__text--tight { margin: 0; }
.empty__text--mid { margin: 8px 0; }
.empty__act { margin-top: 18px; }
/* 「查不到内容」时的原因说明块：多行说明在居中的空状态里左对齐更易读 */
.empty__sub { margin: 14px auto 0; max-width: 660px; text-align: left; font-size: 13px; line-height: 1.9;
  color: var(--c-text-ph); background: #f7f8fa; border: 1px solid #e6e8eb; border-radius: 8px; padding: 12px 16px; }
.empty__sub b { color: var(--c-text, #2b2f36); }
.empty__sub code { background: #f2f4f7; padding: 1px 5px; border-radius: 4px; }

/* 侧栏列表项副标题（原内联 font-size:12px + 次要色）*/
.side-item__meta { font-size: 12px; color: var(--c-text-sub); }

/* 资讯模块列表项静默态 */
.news-mod__item--muted { color: var(--c-text-sub); }

/* 价格位无报价时的普通文字态 */
.price-custom--plain { font-size: 14px; color: var(--c-text-sub); font-weight: 500; }

/* 人才管理列表卡 */
.talent-list-card__icon { font-size: 34px; margin-bottom: 12px; }
.list-card__body--roomy { padding: 24px; }
.list-card__foot--spaced { margin-top: 14px; }

/* 导航父级菜单箭头 */
.nav__caret { font-size: 10px; margin-left: 2px; }

/* 级联筛选：二级行合并（原内联虚线分隔 + label 自适应）*/
.filter-row--merged { border-bottom: 1px dashed var(--c-border); }
.filter-row__label--bare { width: auto; padding-top: 6px; }

/* 弹窗表单 */
.modal-form { margin-top: 18px; }

/* 静态内容页 */
.content-page__acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.contact-form { margin-top: 20px; }
.field--gap { margin-bottom: 12px; }

/* 地图区兜底：未配置 mapEmbed 时展示地址卡，避免请求境外地图服务出现空白框 */
.map-box__fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center;
}
.map-box__pin { font-size: 30px; line-height: 1; }
.map-box__addr { font-size: 15px; font-weight: 600; color: var(--c-text); }
.map-box__tip { font-size: 13px; color: var(--c-text-ph); }

/* =============================================================
   视觉升级层（v2）
   设计取舍：本页为政企商务站，动效以「节奏统一、克制不喧哗」为原则 ——
   仅统一时长/缓动曲线、统一悬浮位移，并新增一次性的滚动入场淡入，
   不使用位移过冲、缩放弹跳等强调式动效。
   ============================================================= */

/* ---------- 滚动入场（全站唯一实现）----------
   历史上 talent.css / peipao.css / landing-brand.css 各有一套自己的揭示动画
   （.reveal 与 .rv），且均为「CSS 默认隐藏 + JS 再显示」的写法：
   一旦脚本未执行或抛错，整块内容将永久不可见。此处收敛为 style.css 中的单一实现。

   实现要点：隐藏态 .reveal--armed 由 js/ui.js 的 initReveal() 在「确认元素位于首屏之外」
   时才添加，因此 ——
     · 首屏内的元素从不进入隐藏态，不存在先隐后显的闪烁；
     · 无 JS 环境下任何元素都不会被加上隐藏态，内容始终可见；
     · 元素本体只需带 .reveal（talent.html 既有标记无需改动）。
   已入视口的元素由 initReveal() 直接补 .is-in，仅负责过渡与延迟。*/
.reveal { transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal--armed { opacity: 0; transform: translateY(14px); }
.reveal--armed.is-in { opacity: 1; transform: none; }
.reveal--armed[data-delay="1"].is-in { transition-delay: 70ms; }
.reveal--armed[data-delay="2"].is-in { transition-delay: 140ms; }
.reveal--armed[data-delay="3"].is-in { transition-delay: 210ms; }
.reveal--armed[data-delay="4"].is-in { transition-delay: 280ms; }

/* ---------- 焦点可达性统一 ---------- */
.btn:focus-visible,
.filter-opt:focus-visible,
.pagination button:focus-visible,
.nav__link:focus-visible,
.list-card:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ---------- 响应式节奏收紧（移动端模块留白由 60px 收到 40px）---------- */
@media (max-width: 767px) {
  .module { padding: var(--sp-10) 0; }
  .filter-row { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; }
  .filter-row__label { width: auto; padding-top: 0; font-size: var(--fs-md); }
  .pagination { margin: var(--sp-10) 0 var(--sp-8); gap: 6px; }
  .pagination button { min-width: 34px; height: 34px; padding: 0 6px; font-size: var(--fs-sm); }
}

/* ---------- 尊重系统「减弱动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card:hover { transform: none; }
  .list-card:hover .list-card__cover img { transform: none; }
}

/* =========================================================
   文档《网站优化.docx》12 项需求改造（本轮新增，通栏追加）
   放在文件末尾：与既有同名选择器特异性相同时以「后出现」取胜，
   从而无需改动既有规则块、不波及其它页面。
   ========================================================= */

/* --- 需求 3 / 7 / 11：相关推荐与现场列表 —— 一行 5 个（--n 由 .course-rec--5 提供）
   ≤5 条时静止平铺（加 --static 修饰类），>5 条时沿用既有左右循环轮播。
   刻意不用 auto-fit：条数少时它会折叠空列并把剩余空间全塞给实际存在的列，
   把每列拉到标准卡宽的 1.4~2.1 倍，反而与「宽度和网站一致」相悖。 --- */
.course-rec__viewport--static { overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* ⚠ flex-wrap 必须打开：静止态取消了 overflow:hidden 的裁剪，若轨道仍单行不换行，
   8 个条目（219px×8≈1866px）就会溢出 1160px 的内容区，把整页撑出横向滚动条。
   换行后「一行 5 个」由单卡宽度决定，条目多于 5 个自然落到第二行。 */
.course-rec__viewport--static .course-rec__track { width: auto; flex-wrap: wrap; animation: none; }

/* 需求 3 / 7 / 11：让「一行恰好 n 个」真正成立，而不是「n−1 个 + 溢出」。
   ⚠ 关键点：.course-rec__item 是 box-sizing: content-box，而 flex-basis 描述的是
   **内容盒**，卡片自身还有左右各 1px 边框。若只扣 (n-1) 个间距、不扣卡自身的边框，
   n 张卡的外框总宽就会比内容区多 2n px，第 n 张被 flex-wrap 挤到下一行。
   实测（1440px / 内容区 1160px / 间距 18px / --n=5）：
     旧公式 单卡内容盒 (1160−4×18)/5 = 217.6 → 外框 219.6
            5 张需 5×219.6 + 4×18 = 1170 > 1160  ⇒ 一行实际只放得下 4 张
     新公式 单卡内容盒 (1160−4×18−5×2)/5 = 215.6 → 外框 217.6
            5 张需 5×217.6 + 4×18 = 1160 = 内容区  ⇒ 一行恰好 5 张
   该 2n 项必须显式写出：content-box 下没有别的办法让外框与栅格自洽。 */
.course-rec__viewport--static .course-rec__item {
  flex: 0 0 calc((100% - (var(--n, 5) - 1) * var(--gap-card) - var(--n, 5) * 2px) / var(--n, 5));
}

/* --- 需求3（本轮）：标杆学习列表页「标杆学习活动现场」只显示一行 ---
   原 --static 视口刻意打开 flex-wrap（见上方注释：不换行会溢出内容区撑出横向滚动条），
   于是该模块实测折行：1440px → 2 行(5+3)、1024px → 3 行(3+3+2)、390px → 4 行(2+2+2+2)。
   现额外追加 --oneline：
     ① 轨道 nowrap —— 不再折行，故不会产生第二行；
     ② 视口 overflow: hidden —— 把超出第一行的条目裁掉，从而不会撑出横向滚动条
        （这正是上方注释担心的溢出问题，用裁剪而非换行解决）。
   单卡宽度仍由 --static 的公式决定（一行恰好 n 个），故裁剪点落在整数张卡片边界上，
   不会出现「半张卡被切一半」。
   ⚠ 必须排在 --static 之后：两者特异性相同（0,2,0），按出现顺序决胜。 --- */
.course-rec__viewport--oneline { overflow: hidden; }
.course-rec__viewport--oneline .course-rec__track { flex-wrap: nowrap; }
/* 需求 3 / 7：轮播态的「一行 n 个」也要自洽 —— 同上扣掉卡自身 2n px 边框。
   轮播轨道是 width: max-content，百分比在 max-content 下无意义，
   故必须用 JS 测得的视口宽 --rec-base（sizeCourseRecs() 写入），而非 100%。
   仅由文档点名的讲师 / 企业内训分支加上 --exact 修饰类；
   案例 / 标杆相关推荐属文档未涉及，保持既有行为不动。 */
.course-rec__viewport--exact .course-rec__item {
  flex: 0 0 calc((var(--rec-base, 100%) - (var(--n, 5) - 1) * var(--gap-card) - var(--n, 5) * 2px) / var(--n, 5));
}

/* --- 需求 5：讲师详情「企业内训」tab —— 横向排列、一行一个、只显示标题 --- */
.trainer-course-row { display: block; padding: 14px 20px; margin-bottom: 10px; background: #fff; border: 1px solid var(--c-border); border-radius: 6px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.trainer-course-row__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--c-text); transition: color .2s ease; }
.trainer-course-row:hover { border-color: var(--c-primary); box-shadow: 0 6px 18px rgba(22, 93, 255, .10); transform: translateX(3px); }
.trainer-course-row:hover .trainer-course-row__title { color: var(--c-primary); }

/* --- 需求 8：公开课列表 —— 各行背景保持统一，仅悬停时才显示底色并给出手型 ---
   原规则 `.course-table tbody tr:nth-child(even)` 造成斑马纹，此处仅针对列表页
   （#listGrid 只存在于 list.html）抹平；悬停规则必须同步提高特异性，
   否则 (1,2,2) 的 nth-child 规则会压掉 (0,2,2) 的通用 :hover 规则，导致偶数行悬停不变色。 --- */
/* 用 transparent 而不是 #fff：整表底色本就是白色，两者视觉一致，但 transparent 能让
   奇偶行的 computed style 严格相同，才算真正「背景颜色保持统一」，也便于断言逐行比对。 */
#listGrid .course-table tbody tr:nth-child(even) { background: transparent; }
#listGrid .course-table tbody tr:hover,
#listGrid .course-table tbody tr:nth-child(even):hover { background: rgba(22, 93, 255, .05); }
.course-tr { cursor: pointer; }

/* --- 需求 8：公开课「开课时间」筛选器布局 —— 左侧年度下拉 + 右侧月份多选标签 --- */
.filter-row__body--yearmonth { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filter-row__body--yearmonth .filter-select { flex: 0 0 auto; }
.ym-months { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; }

/* --- 需求 8 追加：「X天后开课」标签（公开课列表，置于「立即报名」之前）---
   排序口径为「由近到远」时，该标签把队列次序翻译成可读文字。
   三态：
     默认（N≥1）  浅蓝底 —— 与站内 .chip 同色系，不抢主按钮的视觉权重
     今天开课     琥珀实底 —— 由近到远的首条即为它，是全页最需被立刻看到的一条
     开课中       中性灰底 —— 已开课未结束，继续提示而不做负数倒计时

   ⚠ white-space: nowrap 是必需项而非美化：文案最长可达「82天后开课」（4 汉字 + 2 位数字），
     表列宽由内容自动分配，不锁行时会在窄列里折成两行，把整行行高撑高一倍。
   ⚠ flex: 0 0 auto 同理：op-cell 是 flex 行，默认 flex-shrink:1 会把标签压窄后再折行。
   ⚠ align-self: center 也非可选：op-cell 未声明 align-items，默认 stretch 会把标签
     纵向拉伸到与按钮等高（实测 38px），看起来像「第三个按钮」而非标签。
     加上后来高度回落到 padding + line-height + 边框 = 24px，视觉权重低于主按钮。 */
.start-tag {
  display: inline-flex; align-items: center; align-self: center;
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  color: var(--c-primary-active);
  background: rgba(22, 93, 255, .10);
  border: 1px solid rgba(22, 93, 255, .24);
  border-radius: 4px;
  white-space: nowrap;
}
/* 琥珀为站内既有强调色（.list-card__cover-label 用的 #FAAD14）；
   文字取深棕而非白色 —— 白字在 #FAAD14 上对比度仅 2.6:1，不足 WCAG AA 4.5:1。 */
.start-tag--today { color: #5C3300; background: #FAAD14; border-color: #FAAD14; }
.start-tag--ongoing { color: var(--c-text-sub); background: var(--c-bg-soft); border-color: var(--c-border); }

/* 平板段（768–1199px）：该段本就隐藏了报价列来给表格腾地方，操作列偏紧，
   新增标签会进一步挤压课程名称列（实测名称列 262.6→212.8px、行高 63→73.2px）。
   故在该段内把标签字号与操作列间距一并收紧，尽量把宽度还给名称列。 */
@media (max-width: 1199px) {
  .start-tag { font-size: 11px; padding: 1px 5px; }
  .course-table .op-cell { gap: 6px; }
}
/* 移动端（≤767px 表格降级为卡片）：卡片页脚是「价格 | 标签 | 立即报名」三件套，
   在 320–390px 下三者挤在一行会各自折行，故允许换行并给出行距。
   用 :has() 精确限定「含本标签的页脚」，避免波及标杆 / 专题等其他复用
   .list-card__foot 的卡片 —— 那些卡片不在本次需求范围内。
   （:has() 不被支持时整条规则被忽略，退化为原 space-between 单行行为，无不一致风险。） */
@media (max-width: 767px) {
  .list-card__foot:has(.start-tag) { flex-wrap: wrap; row-gap: 6px; }
}

/* =========================================================
   需求轮 4（5 项需求）改造 —— 通栏追加
   放在文件末尾：与既有同名选择器特异性相同时以「后出现」取胜，
   从而无需改动既有规则块、不波及其它页面。
   （需求 1 / 3 / 4 不新增样式：全部复用既有 .course-rec 机制 ——
     需求 1 / 4 复用 --exact（>n 条轮播）与 --static（≤n 条静止平铺），
     需求 3 复用 --static + --oneline（nowrap + 裁剪），见下方 1919-1938 行既有实现。）
   ========================================================= */

/* --- 需求5（本轮）：页脚「咨询热线」「在线客服」同行并列，
      且二维码区宽度 = 该行宽度 ---
   改动前实测（1440px）：第 4 列宽 283.64px，两枚 88px 二维码在 .footer__qrs 内靠左排列
   （该容器撑满整列）；「📞咨询热线」「💬在线客服」是两个块级 div，各占一行，
   实测两者 top 相差 37.79px。
   目标有两层，缺一不可：
     ① 二者同行 → 新增 .footer__contacts（flex row）把两个块并排放置；
     ② 二维码区宽度 = 该行宽度 → 把 .footer__col--contact 由块级改为 flex 纵列并收窄到
        width: fit-content。此时列宽 = max(各子项 max-content) = 二维码区的自然宽度
        （88 + 16 + 88 = 192px）；.footer__qrs 与 .footer__contacts 作为同层子项被默认的
        align-items: stretch 拉成同一宽度 ⇒ 两者严格等宽。
   ⚠ 不能反过来「量出联系方式的宽度再回写给二维码区」：二维码固有宽度是 192px，
     若把它的容器压到联系方式那一行（实测约 150px），两枚 88px 二维码会溢出或换行。
     故取二者中较宽者（二维码区 192px）作为公共宽度，让较窄的那行去对齐它。
   ⚠ 不给 .footer__col--contact 加 align-items: center：那会让子项退回自身内容宽，
     「等宽」随即失效 —— 默认的 stretch 才是本需求成立的前提。 --- */
.footer__col--contact { display: flex; flex-direction: column; width: fit-content; }
/* 两枚二维码在等宽框内左右分布，使四角与下方联系方式行的两端对齐 */
.footer__qrs { justify-content: space-between; }
/* r8 · 需求②：margin-top 14px → 10px（与上方二维码区的 0 合计 10px，联系电话行上移 18px）。
   ⚠ padding-bottom: 18px 不是凑数，而是**结构性必需**，删除它会立刻破坏对齐：
   .footer__col--contact 是 flex 纵列，其内在高度 225px **正是撑起 .footer__grid 行高的那一列**
   （另三列内在高度仅 212px，靠 align-items:stretch 被拉平到 225px）。
   若只上移联系电话而不补齐这 18px，本列内在高度降到 207px → 行高改由 212px 的左侧列决定
   → 整个页脚栅格上移 13px，左侧末行文字随之上升，**对齐关系重新破掉**。
   补回 18px 后列高仍为 225px：行高不变、另三列不动，仅联系电话一行上移 18px。 */
.footer__contacts { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding-bottom: 18px; }
/* 行间距改由 .footer__contacts 统一提供：成员各自带 margin-top 时，
   flex row 会把两项同时下推（多出 14px 空白并与容器 margin 叠加） */
.footer__contacts .footer__col-contact { margin-top: 0; }

/* ============================================================
   需求轮 5（7 项 UI + SEO/GEO 需求）—— 样式段
   与历轮一致：新增/覆盖规则一律放在文件末尾，靠「同特异性取后出现」生效，
   从而不改动既有规则块、不影响未授权页面。
   ========================================================= */

/* --- 需求1：顶栏去掉「在线咨询」按钮后，「服务热线」字号适度扩大并居中 ---
   改动前实测（1440px）：顶栏高 91px；「在线咨询」胶囊按钮在上、「服务热线 18600048654」
   在下，该列 align-items: flex-end、行 align-items: baseline → 标签 12px 与号码 20px
   按基线对齐，视觉上标签像挂在下方的注脚。
   目标：① 服务热线字号适度扩大；② 该行与所在列均居中对齐。
   ⚠ 行内由 baseline 改 center 是本需求的关键：标签放大到 15px 后若仍按基线对齐，
     它会继续紧贴号码底边下沉；改 center 后两者以中线对齐，才呈现「居中」。 --- */
.topbar__hotline-only { align-items: center; }
.topbar__hotline { align-items: center; }
.topbar__hotline-label { font-size: 15px; }

/* --- 需求2：右侧悬浮栏三个条目的悬停行为 ---
   改动前实测：三条目字号均 12px，hover 只改背景色；无任何浮层（flyout 容器数 0）；
   微信客服需「点击」才在弹窗里看到二维码。
   目标：① hover 在线咨询 → 字体变大；② hover 咨询热线 → 显示手机号码且号码字体放大；
        ③ hover 微信客服 → 浮出二维码并适当放大。
   实现：给每个条目加一个左向浮层 .float-bar__pop（纯 CSS :hover 触发，另加 :focus-within
        兜住键盘可达性）。标签放大对三条目统一生效 —— 若只放大「在线咨询」一条，
        另外两条 hover 无反馈会显得坏掉，故统一为一致的悬停反馈。
   ⚠ 栏宽 68 → 76：标签由 12px 放大到 15px 后，「在线咨询」4 字需 60px，
     而原内容宽仅 68 − 12(padding) = 56px，会溢出被裁。加宽 8px 后内容宽 64px，
     放大后的标签（60px）与其余调用方（.float-bar__label 带 nowrap）都不会溢出。 --- */
.float-bar { overflow: visible; width: 76px; }
.float-bar__item { position: relative; }
.float-bar__item:first-child { border-radius: 6px 0 0 0; }
.float-bar__item:last-child { border-radius: 0 0 0 6px; }
.float-bar__item:hover .float-bar__label,
.float-bar__item:focus-within .float-bar__label { font-size: 15px; }

.float-bar__pop {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(4px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  box-shadow: 0 8px 26px rgba(15, 35, 95, .16);
  padding: 12px 16px; white-space: nowrap;
  /* ⚠ 必须显式 width: max-content：绝对定位元素的 shrink-to-fit 可用宽度是按
     「包含块（.float-bar__item，仅 76px）− 偏移量」算的，不写就会把浮层压窄，
     进而把 180px 的二维码挤到 135.66px（实测值）。 */
  width: max-content;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  font-family: var(--font-sans-base);
}
.float-bar__item:hover .float-bar__pop,
.float-bar__item:focus-within .float-bar__pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
/* 浮层尾部小三角，指向被悬停的条目 */
.float-bar__pop::after {
  content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-left-color: #fff;
}
.float-bar__pop-label { font-size: 12px; color: var(--c-text-sub); }
/* 需求2 第②项：咨询热线浮层里的号码 —— 相对条目 12px 标签明显放大 */
.float-bar__pop-num {
  font-size: 22px; font-weight: 700; color: var(--c-primary);
  letter-spacing: .5px; line-height: 1.2;
}
/* 需求2 第③项：微信客服浮层里的二维码 —— 相对弹窗内的 160px 适当放大到 180px */
.float-bar__pop--qr { padding: 14px 14px 12px; }
.float-bar__pop--qr img { width: 180px; height: 180px; flex: 0 0 auto; display: block; border-radius: 6px; }
.float-bar__pop-cap { font-size: 13px; color: var(--c-text-sub); text-align: center; }
@media (max-width: 767px) {
  /* 移动端悬浮栏整体隐藏（既有规则），浮层随之不可达 —— 此处无需额外处理 */
  .float-bar__pop { display: none; }
}

/* --- 需求3：页脚删掉「在线客服」后，联系方式行只剩「📞 咨询热线 18600048654」 ---
   行内只剩一项，justify-content 已无意义，交给 stretch 占满等宽框即可；
   号码用略强于标签的字重与颜色，保证在深色页脚上可读且可点（tel:）。 --- */
.footer__col-contact-num { color: #e8ecf5; font-weight: 600; }

/* --- 需求4：标杆学习列表页卡片标题居中 ---
   仅作用于 .benchmark-grid（标杆学习列表页专有网格类），
   不加到 .topic-grid / 其它列表页 —— 需求只点名标杆学习。 --- */
.benchmark-grid .list-card__title { text-align: center; }

/* --- 需求6：全站内容宽度适度增加 ---
   --container 本身在文件顶部 :root 内由 1200px 改为 1280px（单一来源，
   .container 与 .nav__inner 同时生效，无需在此重复声明）。
   此处只补一条说明：宽度提升后所有栅格仍以百分比表达，故「一行 n 个」
   在任一断点都随宽度自适应，无需改动任何栅格公式。 --- */

/* --- 需求7：SEO/GEO 的标题语义化所需的样式兜底 ---
   本轮把 <span class="mod-title"> 升级为 <h2>、把栏目名升级为 <h1>。
   ⚠ 只需重置 UA 的 margin：各标题类自身已声明 font-size / font-weight
     （.fz-title-mod 22px/600、.page-banner__title 28px/700、.detail-head__title 26px/700），
     作者样式优先级高于 UA 默认，故字号字重不会因换标签而改变 —— 唯一会变的是 margin。 --- */
h1.mod-title, h2.mod-title, h3.mod-title { margin: 0; }
h1.page-banner__title, h1.detail-head__title { margin: 0; }
/* 仅供屏幕阅读器与爬虫的文本（视觉隐藏但可被索引） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* 首页「常见问题」模块（需求7 · GEO）—— 复用既有卡片观感，不引入新的视觉体系。
   ⚠ 类名必须用 .home-faq* 而不能是 .faq*：
     `.faq / .faq__item / .faq__q / .faq__a` 是**既有页面已占用的类名**
     （consulting.html 的 .faq 容器、talent.html 的 .faq/.faq__item/.faq__q/.faq__a
     /.faq__icon 都在用）。本轮若直接新增 .faq 规则，会覆盖那两个**未授权页面**
     的既有样式 —— 实测：consulting 的 #faq 区块高度 677.13→552.13（−125px）、
     talent 的 #faq 区块 741.33→831.70（+90.37px）。
     该外溢由 _r5_scope.js 的「控制变量轮 + 页面级 rect 比对」发现（单独看首页
     是发现不了的：首页自己没有回归）。 */
.home-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); }
.home-faq__item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-card);
  padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-card);
}
.home-faq__q { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); line-height: var(--lh-snug); }
.home-faq__q::before { content: "Q "; color: var(--c-primary); font-weight: 700; }
.home-faq__a { margin: 0; font-size: var(--fs-base); color: var(--c-text-sub); line-height: var(--lh-base); }
@media (max-width: 767px) { .home-faq { grid-template-columns: 1fr; } }

/* ============================================================
   需求轮 6（文档《网站优化 V3》20 项）—— 样式段
   与历轮一致：新增 / 覆盖规则一律追加到文件末尾，靠「同特异性取后出现」生效，
   不改动既有规则块、不波及其它未授权页面。
   ============================================================ */

/* --- 需求1：首页课程推荐 · 公开课卡片「立即报名」适度缩小并靠右 ---
   锚点 #courseRecommend 同时存在于首页（home.js 渲染 .course-card）与内训列表页
   （list.js 渲染 .course-rec__item）；后者不含 .course-card，故下列规则天然只命中首页。
   :has(.btn) 精确排除同一网格内的企业内训卡片（其页脚是「定制化方案 + 了解详情」，
   不在本需求范围内）。:has() 不被支持时整条规则被忽略 → 退化为原有块级行为，无不一致风险。 */
#courseRecommend .course-card__foot:has(.btn) {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#courseRecommend .course-card__foot .btn { height: 28px; padding: 0 12px; font-size: 12px; }

/* --- 需求2：首页课程推荐卡片 hover —— 在「客户见证」(.card:hover = 上浮 3px + 阴影加深)
   之上追加蓝色外框，并放大位移与阴影，使动效更明显 ---
   用 outline 而非 border：outline 不参与布局，卡片及其内部全部几何量在 hover 前后逐字节不变，
   只有 Paint 层出现蓝框（outline-offset:-1px 使其落在盒子边界内侧，视觉等同 1px 边框）。
   ⚠ 本站未做全局 box-sizing 重置，若改用 border 会把内容盒压缩 2px 并让卡片内部整体重排。 */
#courseRecommend .course-card {
  outline: 1px solid transparent; outline-offset: -1px;
  transition: transform .28s cubic-bezier(.2, .75, .3, 1), box-shadow .28s ease, outline-color .28s ease;
}
#courseRecommend .course-card:hover {
  outline-color: var(--c-primary);
  box-shadow: 0 14px 34px rgba(22,93,255,.22);
  transform: translateY(-6px);
}

/* --- 需求3：首页公开课表格「默认背景一致 + hover 变背景」---
   原 `.course-table tbody tr:nth-child(even) { background: var(--c-bg-soft) }`（本文件 568 行）
   即「默认不一致」的根因。此处只在 #courses（首页公开课模块）内抹平；
   公开课列表页的表格走 #listGrid，不在本需求范围内。 */
#courses .course-table tbody tr:nth-child(even) { background: #fff; }
#courses .course-table tbody tr:hover { background: rgba(22,93,255,.08); }

/* --- 需求4：首页管理资讯条目 hover「颜色 + 背景」同时变化 ---
   原规则只改 color 与 ::before 圆点（本文件 1043-1044 行），背景恒为 transparent。
   锚点 #newsModules 限定为首页该模块；培训专题页的资讯模块（list.js renderTopicNews）
   未点名，故不随动。 */
#newsModules .news-mod__item:hover { background: rgba(22,93,255,.06); border-radius: 4px; }

/* --- 需求5：页脚两枚二维码间距适度增加（gap 16px → 24px）---
   .footer__col--contact 为 width:fit-content 的 flex 纵列，宽度 = 二维码区 max-content
   （88 + gap + 88）；gap 加大后容器同步变宽，.footer__contacts 被默认 stretch 拉成同宽
   ⇒「两码两端对齐 = 联系电话行两端对齐」的既有关系自动保持，无需额外调整。 */
.footer__qrs { gap: 24px; }

/* --- 需求6：企业内训列表页右侧「企业内训分类」模块宽度适度收窄 ---
   .internal-layout 由 2fr:1fr 改为 2.5fr:1fr（该栅格仅内训列表页使用 ——
   分类面板由 list.js 的 mountInternalCategoryPanel 仅在该页挂载）。 */
.internal-layout { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
@media (max-width: 1199px) { .internal-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* --- 需求7：企业内训列表页「课程推荐」内容居中；分类标签与讲师姓名、天数同行 ---
   #courseRecommend 在内训列表页承载 .course-rec__item（首页同名 id 内是 .course-card，
   不受影响）。meta 由 -webkit-box 改为 flex 行，使分类标签与「讲师 · N天」横向排列并整体居中；
   标签节点由 list.js 从 body 独立行迁入 meta 行内（见 renderCourseRecommend）。 */
#courseRecommend .course-rec__body { text-align: center; }
#courseRecommend .course-rec__title { text-align: center; }
#courseRecommend .course-rec__meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 6px; overflow: hidden; white-space: nowrap;
}
#courseRecommend .course-rec__meta .course-rec__cat { display: inline-flex; width: auto; flex: 0 0 auto; }

/* --- 需求9：公开课列表页「最新公开课」标题与信息居中，价格靠右显示 --- */
#publicRecommend .course-rec__title,
#publicRecommend .course-rec__meta { text-align: center; }
#publicRecommend .course-rec__price { text-align: right; }

/* --- 需求7 / 需求10 / 需求13：详情页「相关推荐」内容居中 ---
   由 detail.js 仅对文档点名的类型（企业内训 / 公开课 / 标杆学习）追加
   .course-rec__viewport--center 修饰类；案例见证详情走 legacy 分支、不带该类，
   其相关推荐维持原左对齐 —— 与「mode 承载文档授权范围」的既有纪律一致。 */
.course-rec__viewport--center .course-rec__title,
.course-rec__viewport--center .course-rec__meta { text-align: center; }

/* --- 需求11：标杆学习列表页所有列表模块的文字内容都居中 ---
   ① 筛选框下方 #listGrid：.benchmark-grid 的标题居中已由本文件 2178 行提供，此处补 meta 与页脚
   ② 最新标杆学习活动 #benchmarkLatest  ③ 标杆学习活动现场 #benchmarkScene */
.benchmark-grid .list-card__meta { justify-content: center; }
.benchmark-grid .list-card__foot { justify-content: center; gap: 10px; }
#benchmarkLatest .course-rec__title, #benchmarkLatest .course-rec__meta,
#benchmarkScene .course-rec__title, #benchmarkScene .course-rec__meta { text-align: center; }

/* --- 需求12：标杆学习列表页「查看详情」样式高度适度缩小（36px → 28px）---
   .btn 为 inline-flex + align-items:center，height 直接决定视觉高度。
   锚点 .benchmark-grid 确保只作用于标杆学习列表页脚按钮，不波及企业团建 / 培训专题
   等复用同一 courseCard 的列表页（后者列为范围对照区块）。 */
.benchmark-grid .list-card__foot .btn { height: 28px; }

/* --- 需求13：标杆学习详情页「最新标杆学习活动」「标杆学习活动现场」内容居中 ---
   （「相关推荐」由上面的 --center 修饰类覆盖；这两个 id 仅标杆学习详情页存在） */
#benchmarkLatestDetailGrid .course-rec__title, #benchmarkLatestDetailGrid .course-rec__meta,
#benchmarkSceneDetailGrid .course-rec__title, #benchmarkSceneDetailGrid .course-rec__meta { text-align: center; }

/* --- 需求18：培训专题列表页 —— 标题居中；蓝色分类标签与天数、行业同行且置于最前；
       去掉页脚黑色分类文字；「查看详情」上移到封面、hover 显示 ---
   .list-card__meta 本身即 flex 行（本文件 695 行），把 .list-card__cat 置入其中即成「同一行」。
   .list-card__view 的悬浮定位沿用案例卡片的既有机制（本文件 735-742 行），
   本处只补 topic 的 hover 触发选择器，不改动 case 的既有规则。 */
.topic-grid .list-card__title { text-align: center; }
.list-card--topic:hover .list-card__view { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* --- 需求19：案例见证列表页 —— 标题居中；蓝色分类标签与天数、行业同行且置于行业之后 --- */
.case-grid .list-card__title { text-align: center; }

/* --- 需求20：案例见证列表页「课程现场」内容居中 --- */
#caseScene .course-rec__title, #caseScene .course-rec__meta { text-align: center; }

/* ============================================================
   需求轮 7（文档《网站优化 V4》10 项）—— 样式段
   与历轮一致：新增 / 覆盖规则一律追加到文件末尾，靠「同特异性取后出现」生效；
   不改动既有规则块、不波及其它未授权页面。
   ============================================================ */

/* --- 需求1：首页「课程推荐」列表文字居中 ---
   标题早已居中（本文件 540 行 #courseRecommend .course-card__title）；
   不居中的是信息文字：公开课卡片的两行 meta，以及企业内训卡片
   「主讲 / 课程时长」那一行（原为 space-between 的两端对齐，本文件 541 行）。
   故此处把两者一并收成居中。
   ⚠ 页脚（价格 + 「立即报名」/「了解详情」）刻意不动：文档 V3 需求 1 明确要求
     首页课程推荐公开课卡片的「立即报名」靠右，V4 未点名页脚，不得与之冲突。 */
#courseRecommend .course-card__meta { text-align: center; }
#courseRecommend .course-card__meta-row { justify-content: center; gap: 16px; }

/* --- 需求2：首页课程推荐公开课卡片「主讲 / 地点 / 时间」同一行且颜色互不相同 ---
   三者均为真实存在的设计令牌 / 既有色值，不新造色板：
     主讲 → --c-primary（品牌蓝）  地点 → --c-text-sub（正文次要灰）  时间 → #C2410C（既有强调橙） */
#courseRecommend .course-card__meta-row--course {
  display: flex; align-items: center; justify-content: center;
  /* 优化000 第1条：主讲/城市/时间必须同一行 —— 取消 wrap，超长省略号兜底；
     排版基准 = 「主讲：张维南京2026-10-17」（约13字）再放宽2字 ≈ 15 字符宽度，
     卡片内容区（约 260px，13px 字号）可容纳，不再分两行 */
  flex-wrap: nowrap; gap: 4px 10px; white-space: nowrap;
}
#courseRecommend .course-card__meta-row--course .course-card__meta {
  margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#courseRecommend .course-card__meta--host { flex-shrink: 0; }
.course-card__meta--host { color: var(--c-primary); }
.course-card__meta--loc { color: var(--c-text-sub); }
.course-card__meta--time { color: #C2410C; }

/* --- 需求1（续）：首页「案例见证」列表文字居中 ---
   标题已居中（本文件 1290 行 .case-card .list-card__title），摘要原为左对齐。
   .case-card 仅首页案例见证轮播使用（列表页案例卡片是 .list-card--case），锚点天然只命中首页。 */
.case-card .list-card__summary { text-align: center; }

/* --- 优化000 第2条：案例见证卡标题/摘要字号 对齐 企业内训小卡（internal-mini） ---
   internal-mini__name = 15px/600，internal-mini__summary = 12px/1.5（本文件 1352 行）；
   案例卡原为 --fs-xl/700 与 --fs-base，视觉上明显大一档，此处收齐。 */
.case-carousel .list-card__title { font-size: 15px; font-weight: 600; }
.case-carousel .list-card__summary {
  font-size: 12px; line-height: 1.5; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 优化000 第3条：首页常见问题 hover 动态反馈 ---
   让访客明确知道自己所处的区域：边框转主色 + 背景浅蓝渐变 + 上浮 + 阴影加深，问题标题同步变色 */
.home-faq__item {
  transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std),
    border-color var(--dur-fast) var(--ease-std);
}
.home-faq__item:hover {
  transform: translateY(-3px);
  border-color: var(--c-primary);
  box-shadow: 0 10px 24px rgba(22, 93, 255, .12);
  background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%);
}
.home-faq__item:hover .home-faq__q { color: var(--c-primary); }

/* --- 需求5：公开课列表页「最新公开课」价格居左、右侧「查看详情」、两者同一行 ---
   价格行取代原「价格独占一行」的结构；margin-top:auto 由价格元素转移到行容器，
   以保持「页脚贴在卡片底部」的既有行为不变。
   ⚠ 下面的 text-align:left 必须排在 V3 需求 9 的 `#publicRecommend .course-rec__price
     { text-align: right }`（本文件 2289 行）之后 —— 同特异性 (1,1,0) 靠后出现取胜。 */
#publicRecommend .course-rec__price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto;
}
#publicRecommend .course-rec__price { text-align: left; margin-top: 0; }
/* 按钮收敛到站点既有的紧凑规格 28px（与首页课程推荐的「立即报名」、
   标杆学习列表页的「查看详情」同口径），避免 38px 的大按钮把整张卡片压高。 */
#publicRecommend .course-rec__price-row .btn { flex: 0 0 auto; height: 28px; padding: 0 12px; font-size: 12px; }

/* --- 需求6：标杆学习列表页 —— 「查看详情」上移到封面，鼠标移到内容区域后显示 ---
   沿用案例卡片 / 培训专题卡片的既有 .list-card__view 机制（本文件 735-742 行与 2323 行），
   本处只补 benchmark 的 hover 触发选择器，不改动 case / topic 的既有规则。
   ⚠ 蓝色分类标签重新进入 .benchmark-grid —— V3 曾把
     `.benchmark-grid .list-card__cat` 作为死样式删除，本轮需求 6 让该节点复活，
     故按 .topic-grid 的同款尺寸（11px / 1px 6px）一并恢复，保持两页紧凑卡片的标签观感一致。 */
.list-card--benchmark:hover .list-card__view { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.benchmark-grid .list-card__cat { font-size: 11px; padding: 1px 6px; }
/* 文档 V3 需求 12 要求标杆学习列表页的「查看详情」高度适度缩小（36px → 28px）。
   文档 V4 需求 6 把该按钮上移到封面后，页脚按钮已不存在；为不让 V3 需求 12 落空，
   此处把「适度缩小」的观感带到新位置（封面胶囊 9px 22px/14px → 5px 16px/13px，高约 29px）。 */
.list-card--benchmark .list-card__view { padding: 5px 16px; font-size: 13px; }

/* --- 需求7：标杆学习列表页「标杆学习活动现场」两处 ---
   ① 与上方模块（最新标杆学习活动 #benchmarkLatest）的间距 ——
      改动前实测该间距为 0px（两 section 相邻、均无外边距），确实过挤；
      取值 --sp-15(60px) = --gap-module，即站点既有模块节奏（与 #topicNews、.container--page 同口径）。
   ② 「取消点击、仅做展示」—— 条目已在 JS 中由 <a> 改为 <div>（无 href）、
      此处再取消手型光标与 hover 位移/阴影（那是「可点击」的视觉暗示）。 */
#benchmarkScene { margin-top: var(--sp-15); }
#benchmarkScene .course-rec__item { cursor: default; }
#benchmarkScene .course-rec__item:hover { transform: none; box-shadow: none; }

/* --- 需求8：案例见证列表页（#listGrid）文字居中 ---
   标题已居中（V3 需求 19，本文件 2326 行）；未居中是其下的 .list-card__meta 信息行
   （⏱ 天数 / 🏢 行业 / 蓝色分类标签）。.list-card__meta 本身即 flex 行，改 justify-content 即可。
   （该页 .list-card__summary 在紧凑卡片里为 display:none，不在本需求的可见范围内。） */
.case-grid .list-card__meta { justify-content: center; }

/* --- 需求9：管理资讯详情页「相关推荐」内容居中 ---
   由 detail.js 把 news 并入 exact 分支并追加 .course-rec__viewport--center 修饰类；
   本处无需新增选择器 —— --center 的既有规则（本文件 2295-2296 行）已覆盖
   .course-rec__title / .course-rec__meta。以下为口径备注，不产生样式。 */
/* 口径：文档原文作「管理资讯列表页面中的『相关推荐』」，但实测该列表页不存在名为
   「相关推荐」的模块（详见交付报告第三章的证据）；全站唯一以「相关推荐」命名的模块
   位于管理资讯详情页 #relatedSection，故按该模块落点执行。 */
/* =========================================================
   优化版本3 第3/4条：新增两个功能单页的样式
   —— 需求提交表单页（demand.html）与年卡服务页（annual-card.html）。
      仅新增本轮产生的类，沿用既有 tokens（间距 / 圆角 / 卡片阴影），不引入新的视觉变量。
   ========================================================= */

/* ---------- 需求提交表单页 ---------- */
.demand { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap-card); align-items: start; }
.demand__form-wrap { padding: 28px 28px 24px; }
.demand__title { font-size: 22px; font-weight: 700; color: var(--c-text); margin: 0; }
.demand__sub { color: var(--c-text-sub); font-size: 14px; margin-top: 8px; }
.demand__form { margin-top: 20px; }
.demand__note { font-size: 12.5px; margin-top: 10px; }
.demand__form-wrap select.input { background: #fff; }
.demand__ok { padding: 24px 8px 8px; text-align: center; }
.demand__ok-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #e8fff2; color: #0a7a45; font-size: 26px; font-weight: 700; }
.demand__ok-t { font-size: 18px; font-weight: 700; }
.demand__ok-s { color: var(--c-text-sub); font-size: 13.5px; margin-top: 6px; }
.demand__ok-acts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.demand__aside { padding: 24px 22px; }
.demand__aside-t { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.demand__steps { margin: 0; padding: 0; list-style: none; }
.demand__steps li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px dashed var(--c-border); }
.demand__steps li:first-child { border-top: 0; padding-top: 0; }
.demand__steps b { font-size: 14.5px; }
.demand__steps span { color: var(--c-text-sub); font-size: 13px; line-height: 1.6; }
.demand__contact { margin: 16px 0 18px; }
.demand__contact .info-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.demand__contact .info-ico { flex: 0 0 auto; }
.demand__contact .info-label { font-size: 12.5px; color: var(--c-text-sub); }
.demand__contact .info-value { font-size: 14.5px; font-weight: 600; }
@media (max-width: 900px) { .demand { grid-template-columns: 1fr; } }

/* ---------- 年卡服务页 ---------- */
.annual-hero__title { font-size: 26px; font-weight: 700; margin: 4px 0 0; }
.annual-hero { padding: 14px 0 6px; }
.annual-hero__eyebrow { display: inline-block; background: #eef4ff; color: var(--c-primary); border: 1px solid #c9dcff; border-radius: 12px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; }
.annual-hero__sub { color: var(--c-text-sub); font-size: 15px; line-height: 1.8; margin-top: 10px; }
.annual-intro { margin: 18px 0 6px; line-height: 1.9; color: var(--c-text); font-size: 14.5px; }
.annual-group { margin-top: 30px; }
.annual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); }
.annual-pkg { padding: 22px 20px; display: flex; flex-direction: column; }
.annual-pkg__name { font-size: 17px; font-weight: 700; }
.annual-pkg__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.annual-pkg__price { color: var(--c-primary); font-size: 22px; font-weight: 700; }
.annual-pkg__unit { color: var(--c-text-sub); font-size: 13px; }
.annual-pkg__desc { color: var(--c-text-sub); font-size: 13.5px; line-height: 1.8; margin-top: 10px; }
.annual-points { margin: 10px 0 0; padding-left: 18px; color: var(--c-text-sub); font-size: 13px; line-height: 1.9; }
.annual-pkg__btn { margin-top: auto; align-self: flex-start; }
.annual-cta { margin-top: 34px; padding: 24px 26px; background: var(--c-bg-soft); border-radius: var(--radius-card); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.annual-cta__t { font-size: 18px; font-weight: 700; }
.annual-cta__s { color: var(--c-text-sub); font-size: 13.5px; margin-top: 6px; }
.annual-cta .btn { margin-left: auto; }
@media (max-width: 1024px) { .annual-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .annual-grid { grid-template-columns: 1fr; } .annual-cta .btn { margin-left: 0; } }

/* ============================================================
   优化版本3 续（文档 21 项需求）前台样式
   ============================================================ */

/* --- 需求1：讲师详情页「公开课」页签列表行 ---
   每行五要素：课程名称 / 开课时间 / 城市 / 价格 / 立即报名 */
.trainer-public-list { display: flex; flex-direction: column; }
.trainer-public-row {
  display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 110px 96px;
  gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: 8px; background: #fff;
  margin-bottom: 10px; transition: border-color .15s, box-shadow .15s;
}
.trainer-public-row:hover { border-color: var(--c-primary); box-shadow: var(--shadow-card); }
.trainer-public-row__title { font-weight: 600; color: var(--c-text); font-size: 15px; transition: color .15s; }
.trainer-public-row__title:hover { color: var(--c-primary); }
.trainer-public-row__meta { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trainer-public-row__price { color: var(--c-primary); font-weight: 700; font-size: 15px; text-align: right; }
.trainer-public-row .btn { justify-self: end; }
@media (max-width: 1024px) {
  .trainer-public-row { grid-template-columns: minmax(0, 1fr) auto; }
  .trainer-public-row__price { text-align: left; }
  .trainer-public-row .btn { justify-self: start; }
}

/* --- 需求2/6/7：详情页侧栏讲师头像 1:1 ---
   讲师头像上传口径是 600×600（1:1），缩略图必须保持 1:1。
   原样式 .side-list__item img { 64×44 }（0,1,1）压过了 .side-trainer__avatar（0,1,0），
   同领域讲师 / 授课讲师的头像被压扁成 64×44 —— 用更高优先级修正为 1:1。 */
.side-list__item .side-trainer__avatar,
.side-trainer__avatar.side-trainer__avatar { width: 80px; height: 70px; border-radius: 8px; object-fit: cover; }

/* --- 需求3：首页「课程推荐」每行 5 个 ---
   仅作用于首页（index.html 的 section#courseRecommend-sec），
   内训列表页同名的 #courseRecommend 推荐位（.course-rec__item）不受影响。 */
#courseRecommend-sec .course-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { #courseRecommend-sec .course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { #courseRecommend-sec .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { #courseRecommend-sec .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { #courseRecommend-sec .course-grid { grid-template-columns: 1fr; } }

/* --- 需求4：首页「交付现场」每行 5 个（静态网格，替代原跑马灯布局） --- */
.training-scene__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-card); }
.training-scene__grid .training-scene__item { width: auto; }
@media (max-width: 1280px) { }
@media (max-width: 1024px) { }
@media (max-width: 640px)  { }

/* --- 需求优化v11 第4条：首页交付现场只显示一行，一行 5 个；多于 5 个左右轮播 ---
   卡片宽度口径与 JS perView()（≥1200→5 / ≥768→2 / 更窄→1）必须一致：
   5 列时间距个数是 4，用 (100% - 4*gap)/5，否则会溢出视口裁掉半个。 */
.dlv-carousel { position: relative; }
.dlv-carousel__viewport { overflow: hidden; }
.dlv-carousel__track { display: flex; gap: var(--gap-card); transition: transform .5s ease; }
.dlv-carousel .training-scene__item {
  flex: 0 0 calc((100% - 4 * var(--gap-card)) / 5);
  width: calc((100% - 4 * var(--gap-card)) / 5);
}
@media (max-width: 1199px) {
  .dlv-carousel .training-scene__item { flex-basis: calc((100% - var(--gap-card)) / 2); width: calc((100% - var(--gap-card)) / 2); }
}
@media (max-width: 767px) {
  .dlv-carousel .training-scene__item { flex-basis: 100%; width: 100%; }
}

/* --- 需求6：企业内训列表右侧「企业内训分类」一级分类行高至少缩小 30% ---
   原行高约 52px（padding 11px×2 + 行高 21px + margin 8px）；
   现 padding 5px×2 + margin 4px ≈ 35px，约原来的 67%（≤70%）。 */
.internal-cats__item { padding: 5px 14px; margin-bottom: 4px; }
/* 内训详情页「相关课程」行高适度减少：内边距 8px→4px、字号微调 */
.detail-side .side-list__item--text { padding: 4px 0; }
.detail-side .side-list__item--text .t { font-size: 13.5px; }

/* --- 需求8：管理咨询页 服务线(.cl) / 交付闭环(.pstep) / 服务对象(.client) hover ---
   ⚠ 2026-10-05 修复记录：此处先前的「需求8+15」块有两处错误，已撤销——
   ① 用 ID 选择器 #catalogGrid 覆盖了 landing-brand.css 里 .lp-page .clist 的
     「宽屏双栏 + 展开切单栏阅读(.clist--read)」版式（ID 特异性 1,0,0 压过 0,2,0），
     产品体系被压成三栏窄卡，主次与留白尽失，展开阅读模式也被破坏；
   ② 裸 .cl:hover/.pstep:hover/.client:hover 大半被 .lp-page 作用域规则压制成为
     死代码，scale(1.02) 对宽幅卡片观感廉价。
   hover（背景变色 + 放大）改在 landing-brand.css 的 .lp-page 作用域内
   以精修参数实现（该文件加载更晚，与页面设计系统同口径）。 --- */

/* ================= 需求优化v6 · 第1条 =================
   首页「课程推荐 / 企业内训 / 案例见证」列表卡标题只显示一行，
   超出部分隐藏（不折行、不撑高卡片）。
   统一口径：webkit-line-clamp:1 + overflow:hidden，
   摘要类（ellipsis-2 的 __summary / __meta）保持两行不变。 */
.course-card__title,
.internal-mini__name,
.list-card__title,
.internal-card__title,
.course-rec__title,
.news-mod__item,
.news-row__title,
.side-list__item .t {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden; text-overflow: ellipsis;
    }
/* 卡片标题区预留的是两行高度，改单行后去掉多余留白 */
.course-card__title { min-height: 0; }
.course-rec__title { min-height: 0; height: auto; }

/* ================= 需求优化v6 · 第2条 =================
   列表页 / 详情页所有列表卡标题同样只显示一行（超出隐藏）。
   公开课表格（.course-table__name）的标题由 JS 包一层 .ct-name 后在此截断，
   开课状态徽标（.start-tag 等）保持在行尾不被裁掉。 */
.course-table__name .ct-name {
    display: inline-block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
    }
.course-table__name { white-space: nowrap; }


/* ==================== 需求优化v8 · 第10条 全站搜索结果 ====================
   结果来自 6 个栏目混排，统一卡片骨架 —— 封面右上角标明所属栏目，避免来源混淆。 */
.search-grid { grid-template-columns: repeat(4, 1fr); }
.search-card__kind {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; line-height: 1.6;
    color: #fff; background: rgba(22, 93, 255, .88)
    }
.search-card .list-card__cover { position: relative; }
@media (max-width: 1024px) { .search-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .search-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================== 需求优化v9 · 第3条 列表页模块计数条 ====================
   示例（需求文档截图）：选中「企业内训 > 团队管理」后，筛选区下方出现
   「团队管理」标签 + 右侧「课程总数：96」。标签用站点主色（不自创配色）。 */
.cat-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary);
  border-radius: 6px; padding: 9px 14px; margin: 14px 0 0; }
.cat-summary__name { background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 600;
  padding: 4px 16px; border-radius: 4px; line-height: 1.5; }
.cat-summary__count { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; }
.cat-summary__count b { color: var(--c-primary); font-size: 15px; margin-left: 2px; }
@media (max-width: 767px) { .cat-summary { padding: 8px 10px; } .cat-summary__name { font-size: 13px; padding: 3px 10px; } }