:root {
  --primary: #7a1f24;
  --primary-dark: #5e1519;
  --accent: #d4a24a;
  --accent-light: #f0d79e;
  --bg: #f7f5f2;
  /* 首页版块交替用的"深一档"暖米：与 --bg 同色系但亮度差更大，
     相邻版块一眼能分出边界，又不跳出白底 + 暖米的整体风格 */
  --bg-band: #f2eee7;
  --card-bg: #ffffff;
  --text: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-tertiary: #999999;   /* 与 text-muted 同色；此前被引用但未定义 */
  --border: #e8e4df;
  --header-dark: #3b1a1c;
  --footer-dark: #1a1a1a;
  /* 首屏轮播区（含底部公告条）的总高度：
     Banner 高 = max(300px 最小高, min(460px 设计高, 视口宽 × 460/1920))，公告条约 60px */
  --hero-block-h: calc(max(300px, min(460px, 100vw * 0.23958)) + 60px);
  --radius: 10px;
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  color: #fff;
  height: 60px;          /* 菜单条总高固定 60px（与 LOGO 同高） */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.top-header.scrolled {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  color: var(--primary);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  position: relative;
}
.top-header.scrolled .logo { color: var(--primary); }

.logo img { height: 60px; }   /* 原 52px：菜单条加高后 LOGO 同步放大 */
.logo-img {
  transition: opacity 0.35s ease;
}
.logo-img.light {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}
.logo-img.dark {
  opacity: 0;
}
.top-header.scrolled .logo-img.light { opacity: 0; }
.top-header.scrolled .logo-img.dark { opacity: 1; }

/* 点击四大核心模块后定位到「培训课程」区域时，为固定顶部导航留出偏移 */
#courses { scroll-margin-top: 60px; }

/* 顶部六个菜单：字号收小 + 菜单间细竖条分隔（2026-10-15）
   分隔符画在每个菜单的右侧中线处，最后一项不画；
   菜单被权限隐藏（display:none）时伪元素随元素一起消失，不会留悬空竖条。 */
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  position: relative;
  color: rgba(255,255,255,0.92);
  font-size: 15px;       /* 用户指定：比原先 17px 再小些 */
  font-weight: 300;      /* 细体，避免中文在 400 下仍显粗 */
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;   /* 平滑渲染，视觉更细 */
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.main-nav a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -15px;          /* gap 30px 的一半，正好落在两菜单中间 */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.45);
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
/* 滚动到白底菜单条后：文字保持黑灰色，竖条同步转深 */
.top-header.scrolled .main-nav a { color: var(--text); }
.top-header.scrolled .main-nav a i { color: var(--primary); }
.top-header.scrolled .main-nav a:not(:last-child)::after { background: rgba(15,23,42,.22); }
.top-header.scrolled .main-nav a:hover,
.top-header.scrolled .main-nav a.active { color: var(--primary); }
.top-header.scrolled .main-nav a:hover i,
.top-header.scrolled .main-nav a.active i { color: var(--primary); }
/* 图标已按用户要求从顶部菜单移除（2026-10-15），下列规则仅作兜底：
   后台若把旧配置里的 icon 字段恢复渲染，颜色仍跟随文字自动切换。 */
.main-nav a i {
  font-size: 18px;       /* 放大到 18px，保证清晰可辨 */
  font-weight: 900 !important;  /* 关键：保持 .fas 的实心字体，勿改 */
  color: inherit;        /* 跟随 a 的文字颜色，自动处理白/酒红切换 */
  line-height: 1;
  width: 20px;           /* 固定宽度，避免不同图标宽度不一导致文字抖动 */
  text-align: center;
  flex-shrink: 0;
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
/* 滚动到白底菜单条后：文字保持黑灰色，仅图标变深红 */
.top-header.scrolled .main-nav a { color: var(--text); }
.top-header.scrolled .main-nav a i { color: var(--primary); }
.top-header.scrolled .main-nav a:hover,
.top-header.scrolled .main-nav a.active { color: var(--primary); }
.top-header.scrolled .main-nav a:hover i,
.top-header.scrolled .main-nav a.active i { color: var(--primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 未登录时菜单条右侧：登录 / 注册 文字链 */
.header-auth {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}
.header-auth a {
  color: rgba(255,255,255,0.9);
  transition: color 0.2s;
  cursor: pointer;
}
.header-auth a:hover { color: var(--accent); }
.top-header.scrolled .header-auth a { color: var(--text); }
.top-header.scrolled .header-auth a:hover { color: var(--primary); }
.header-auth .sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.3);
}
.top-header.scrolled .header-auth .sep { background: var(--border); }

/* 已登录：头像左侧的「个人中心」入口 */
.header-center-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  padding: 6px 12px;
  border-radius: 18px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.header-center-link i { font-size: 15px; }
.header-center-link:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.12);
}
.top-header.scrolled .header-center-link { color: var(--text); }
.top-header.scrolled .header-center-link:hover {
  color: var(--primary);
  background: rgba(122,31,36,0.07);
}

/* 消息铃铛红点：有未读消息时才显示 */
.icon-btn .msg-dot {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
.top-header.scrolled .icon-btn .msg-dot {
  box-shadow: 0 0 0 2px #fff;
}

/* 已登录：首字母圆形头像 + 下拉 */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.user-avatar-letter {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #3b1a1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
  user-select: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.user-avatar-letter:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.top-header.scrolled .user-avatar-letter {
  border-color: var(--border);
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px 0;
  display: none;
  z-index: 1100;
  border: 1px solid var(--border);
}
.user-dropdown.open { display: block; }
.user-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.user-dropdown a:hover { background: var(--bg); color: var(--primary); }
.user-dropdown a i {
  width: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.user-dropdown a:hover i { color: var(--primary); }
.user-dropdown .divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-dropdown .logout-link { color: var(--primary); }
.user-dropdown .logout-link i { color: var(--primary); }

.search-box {
  position: relative;
}
.search-box input {
  border: none;
  border-radius: 24px;
  padding: 9px 38px 9px 16px;
  width: 260px;
  font-size: 13px;
  outline: none;
  background: #fff;
  color: var(--text);
}
.search-box input::placeholder { color: var(--text-muted); }
.top-header.scrolled .search-box input {
  background: var(--bg);
}
.search-box button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 15px;
}

.icon-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-header.scrolled .icon-btn { color: var(--primary); }

.login-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.login-circle:hover {
  background: var(--accent);
  color: #3b1a1c;
}
.top-header.scrolled .login-circle {
  background: var(--primary);
  color: #fff;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
}
.top-header.scrolled .user-avatar {
  border-color: var(--border);
}

/* Hero 轮播图
   设计比例 1920 : 460，用 aspect-ratio 实现等比高度。
   .hero-carousel 仅作为轮播舞台（相对定位，供图片/箭头/圆点绝对定位） */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 460px;                      /* 设计基准高度（1920*460） */
  padding-top: 60px;                  /* 给固定菜单条留出空间 */
  box-sizing: content-box;
  overflow: hidden;
  color: #fff;
  /* 骨架底色：取真实轮播图同系的蓝灰，图片就位前不出现旧版深红底 */
  background: #6b8cb0;
}
@media (max-width: 1920px) {
  /* 小屏按 1920:460 等比缩放，并叠加顶部菜单偏移 */
  .hero-carousel {
    height: auto;
    aspect-ratio: 1920 / 460;
    min-height: 300px;
    padding-top: 0;
  }
}

/* 轮播区 + 公告条的外层包裹容器。
   公告条悬浮在轮播底边线上：一半压在图上、一半露在图外，
   因此容器底部要预留出「露在外面那半」的高度（padding-bottom），
   否则外露部分会压住下方的模块区，模块区也才会正常往下排。 */
.hero-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 53px;      /* ≈ 公告条高度的 2/3（80×2/3），即外露那部分 */
}

.hc-track {
  position: absolute;
  inset: 0;
  top: 0;
}

/* 带跳转链接的那张整图可点击（无链接时是 div，不可点击） */
a.hc-slide { text-decoration: none; color: inherit; cursor: pointer; }
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  display: flex;
  align-items: center;
}
.hc-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hc-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 轮播图不做整体压暗，直接显示原图；
   仅保留标题文字下方一点点极淡的侧向渐变，避免浅色图上白字看不清 */
.hc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20,8,10,0.18) 0%, rgba(20,8,10,0.04) 45%, rgba(20,8,10,0) 70%);
}

.hc-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.hc-title {
  font-size: 56px;
  line-height: 1.15;
  margin-bottom: 14px;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  -webkit-text-stroke: 1.5px #782F33;
  text-shadow:
    -1px -1px 0 #782F33, 1px -1px 0 #782F33,
    -1px 1px 0 #782F33, 1px 1px 0 #782F33,
    0 3px 6px rgba(0,0,0,0.4), 0 6px 18px rgba(120,47,51,0.35);
}

.hc-slogan {
  font-size: 22px;
  font-weight: 800;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
  margin-bottom: 12px;
  -webkit-text-stroke: 0.5px #782F33;
  text-shadow:
    -1px -1px 0 #782F33, 1px -1px 0 #782F33,
    -1px 1px 0 #782F33, 1px 1px 0 #782F33,
    0 2px 6px rgba(0,0,0,0.35);
}

.hc-desc {
  font-size: 16px;
  opacity: 0.9;
  max-width: 640px;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* 左右箭头 */
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.32);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hc-arrow:hover { background: rgba(122,31,36,0.85); transform: translateY(-50%) scale(1.06); }
.hc-arrow:active { transform: translateY(-50%) scale(0.96); }
.hc-prev { left: 22px; }
.hc-next { right: 22px; }
.hc-arrow i { font-weight: 900; font-style: normal; }

/* 圆点指示器（在轮播图内部）。
   默认抬到公告条上方（公告条悬浮于底边、会盖住贴底的圆点）；
   公告条关闭（body.notice-off）时回到贴底位置 */
.hc-dots {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
body.notice-off .hc-dots { bottom: 16px; }
.hc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.hc-dot.is-active {
  background: var(--accent);
  width: 26px;
  border-radius: 5px;
}

@media (max-width: 900px) {
  .hc-title { font-size: 34px; letter-spacing: 1px; }
  .hc-slogan { font-size: 17px; }
  .hc-desc { font-size: 14px; }
  .hc-arrow { width: 38px; height: 38px; font-size: 16px; }
  .hc-prev { left: 10px; }
  .hc-next { right: 10px; }
  .hc-dots { bottom: 48px; }
  body.notice-off .hc-dots { bottom: 12px; }
}

/* 旧版 Hero：已无页面使用，且其引用的 hero-bg.png 为废弃旧图 —— 整块移除。
   （若日后确需复用，请改用后台配置的轮播图，不要再把图片地址写死在 CSS 里） */

.hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 原 space-between：去掉右侧登录卡后改为左对齐 */
  gap: 60px;
  width: 100%;
}

.hero-content {
  flex: 1;
  padding-left: 0;
  max-width: 720px;
}

.hero h1 {
  font-size: 72px;
  margin-bottom: 18px;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  -webkit-text-stroke: 1.5px #782F33;
  text-shadow:
    -1px -1px 0 #782F33,
    1px -1px 0 #782F33,
    -1px 1px 0 #782F33,
    1px 1px 0 #782F33,
    0 3px 6px rgba(0,0,0,0.4),
    0 6px 18px rgba(120,47,51,0.35);
}

.hero-slogan {
  font-size: 26px;
  font-weight: 800;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
  margin-bottom: 14px;
  -webkit-text-stroke: 0.5px #782F33;
  text-shadow:
    -1px -1px 0 #782F33,
    1px -1px 0 #782F33,
    -1px 1px 0 #782F33,
    1px 1px 0 #782F33,
    0 2px 6px rgba(0,0,0,0.35);
}

.hero-desc {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 30px;
  max-width: 520px;
  line-height: 1.6;
}

/* ============================================================
   右侧悬浮公告面板（叠加在轮播图之上）
   - 位置：右缘对齐页面 1200px 内容栏右边缘（与原登录卡位置一致）
   - 尺寸：宽 250px，高度按内容自适应，最高 500px
   - 外观：25% 白 + 20px 背景模糊毛玻璃，无边框，12px 圆角
   - 切换：淡入淡出（纯 opacity，无位移），最多 5 张
   ============================================================ */
.hero-notice-panel {
  position: absolute;
  top: 50%;
  right: max(20px, calc((100% - 1200px) / 2));   /* 右缘对齐 .container 内容右边缘 */
  z-index: 4;                      /* 高于图片与遮罩，低于左右箭头 */
  transform: translateY(-50%);     /* 垂直居中悬浮 */
  width: 250px;
  max-height: 500px;               /* 高度上限 */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  border: 0;                       /* 无边框，避免破坏画面 */
  color: #fff;
}

/* 公告卡片堆叠区：用 grid 让所有卡片共用同一格 → 高度自适应到最高卡片，
   卡片之间靠 opacity 淡入淡出（无位移），同时避免绝对定位导致容器塌陷 */
.np-stack {
  position: relative;
  display: grid;
  min-height: 0;
}
.np-card {
  grid-area: 1 / 1;              /* 所有卡片重叠在同一格 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;   /* 柔和淡入淡出，无位移 */
}
.np-card.is-active {
  opacity: 1;
  visibility: visible;
}

/* 配图（图文混合公告）：150 × 200 放置区 + 底部渐变压暗，标题叠加其上 */
.np-media {
  position: relative;
  width: 150px;
  height: 200px;
  margin: 0 auto;                  /* 面板内水平居中 */
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.np-media::after {                       /* 底部压暗渐变，保证叠加文字可读 */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(10,6,8,0.62) 100%);
}
.np-media-inner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.np-tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: #7a1f24;
  font-weight: 600;
}
.np-media .np-tag { background: rgba(255, 255, 255, 0.9); }

/* 标题：配图卡上叠加白字；纯文字卡用深酒红（白玻璃上更清晰、更有质感） */
.np-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: #6e1a20;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.np-media .np-title {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.np-desc {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  color: rgba(52, 40, 42, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  /* 超出部分省略，避免不同条数高度跳动 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部指示条：按需求不显示（保留结构，如需恢复改为 display:flex） */
.np-dots {
  display: none;
}

@media (max-width: 1240px) {
  /* 窗口收窄时右缘退化为 20px 安全边距 */
  .hero-notice-panel { right: 20px; }
}

/* 窄屏（移动端/平板）：面板改为不叠加，避免遮挡 Banner 主体 */
@media (max-width: 900px) {
  .hero-notice-panel { display: none; }
}


/* ── 底部公告条 ────────────────────────────────────────────────
   宽 1200px 居中、悬浮于轮播图底边之上（不再通栏、不再独占一行）。
   背景色由前台 JS（home-notice.js）取当前轮播图底边均色后写入
   --notice-bg（半透明 + 毛玻璃）；取样失败回退站点酒红。 */
.hero-notice {
  position: absolute;
  left: 50%;
  /* 骑在轮播底边线上：bottom:0 对齐容器（含 53px 预留）底边，
     条高 80px → 上 27px（1/3）压在轮播图上、下 53px（2/3）露在图外 */
  bottom: 0;
  transform: translateX(-50%);
  z-index: 6;
  width: min(1200px, calc(100% - 48px));
  height: 80px;                /* 需求：80px */
  box-sizing: border-box;
  /* --notice-rgb 由 home-notice.js 取轮播图底边均色写入（形如 "67,119,178"）；
     未取样到时用站点酒红。上 1/3 半透明（透出轮播图），往下渐变为实色——
     外露在白色页面背景上的 2/3 必须是实色，否则半透明会被白底冲淡。 */
  --notice-rgb: 122, 31, 36;
  background: linear-gradient(
    180deg,
    rgba(var(--notice-rgb), 0.60) 0%,
    rgba(var(--notice-rgb), 0.72) 22%,
    rgba(var(--notice-rgb), 0.90) 33%,   /* 33% ≈ 图片底边交界处 */
    rgba(var(--notice-rgb), 0.97) 46%,
    rgba(var(--notice-rgb), 1) 62%
  );
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0 22px;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 公告条关闭（<body> 加 .notice-off）：自身不渲染；
   因公告条已悬浮不再占位，--hero-block-h 无需再收缩 */
body.notice-off .hero-notice { display: none !important; }

.notice-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 100%;        /* 公告条固定 62px，内容垂直居中 */
}

.notice-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #fff;
}

/* 滚动视窗：只显示一行，超出部分由跑马灯滚入 */
.notice-list {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 滚动内容：一行排开，transform 由 home-notice.js 驱动 */
.notice-scroll {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.notice-scroll .notice-item {
  font-size: 13px;
  opacity: 0.96;
}

/* 多条公告之间的竖杠分隔符（单条时 JS 不会渲染它）。
   左右各留 38px，两条公告之间实际间距 ≈ 76px，避免文字挤在一起 */
.notice-scroll .notice-sep {
  padding: 0 38px;
  opacity: 0.5;
  font-size: 12px;
}

/* Login card（已废弃：首页/个人中心 hero 登录卡已移除，保留占位注释） */

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 18px;
}

.login-options a { color: var(--text-secondary); }
.login-options a:hover { color: var(--primary); }

.login-third {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.third-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.third-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.2s, transform 0.2s;
}

.third-icons a:hover { transform: translateY(-2px); }
.third-icons a.wechat { color: #07C160; background: rgba(7,193,96,0.1); }
.third-icons a.wechat:hover { background: rgba(7,193,96,0.2); }
.third-icons a.qq { color: #12B7F5; background: rgba(18,183,245,0.1); }
.third-icons a.qq:hover { background: rgba(18,183,245,0.2); }

/* Home welcome card（已废弃：欢迎卡已随 hero 登录卡一并移除） */

@media (max-width: 980px) {
  .hero-container { flex-direction: column; align-items: stretch; gap: 40px; }
  .hero h1 { font-size: 40px; }
  .hero-stats { gap: 24px; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .hero-stats .stat strong { font-size: 24px; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-accent {
  background: var(--accent);
  color: #3b1a1c;
}
.btn-accent:hover { background: #c4933f; }

.btn-outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.btn-sm { padding: 6px 14px; font-size: 13px; }

/* Section */
.section { padding: 56px 0; }

/* ── 首页专用版式（2026-10-16）────────────────────────────────
   ① 底色交替：暖米 → 白 → 暖米 → 白 …
      实际视觉顺序（受后台「板块管理」重排影响）：
      modules(米) / courses(白) / live(米) / 专题(白) / 内训(米) / experts(白)
      相邻两块必不同色，不再出现"直播与专题连成一片"的观感。
   ② 上下留白整体收紧一档（56→40），原本偏松散。
   作用域限首页（#live 等 id 只在 index.html / home.html 出现），
   以免波及 experts.html、resources.html 等同样使用 .section 的页面。 */
.section-modules,
#live,
#news { background: var(--bg-band); }
#homeTopic,
#experts { background: #fff; }

.page-home .section { padding: 40px 0; }
/* 首屏「八大模块」是铺满一屏的设计，保留自身内距 */
.page-home .section-modules { padding-top: 38px; padding-bottom: 42px; }
.page-home .section-title { margin-bottom: 6px; }
.page-home .section-subtitle { margin-bottom: 18px; }
.page-home .courses-header { margin-bottom: 20px; }

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title .more {
  margin-left: auto;
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}
.section-subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }

/* Categories（八大核心学习模块：一行 4 个、共 2 行；卡片为横向布局） */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 20px;
  margin-bottom: 0;
}
.category-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px 16px;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  /* 左图标 + 右文字，整体垂直居中 */
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  box-sizing: border-box;
}
.category-card:hover {
  transform: translateY(-4px);
  border-color: #782F33;
  box-shadow: 0 8px 20px rgba(120,47,51,0.12);
}
.category-card:active { transform: translateY(-4px); }

/* 左侧小图标：垂直居中，尺寸比八宫格形态略大 */
.category-card .cat-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(120,47,51,0.08);
  color: #782F33;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin: 0;                    /* 垂直居中由 flex 负责 */
}

/* 右侧文字：上主标题、下副标题，统一左对齐 */
.category-card .cat-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.category-card h3 {
  font-size: 15px;
  margin: 0 0 5px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-card p {
  font-size: 12px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 首屏「八大核心学习模块」：让整块刚好铺满一屏（16:9），
   使首屏底部正好收在模块区下沿，「培训课程」不露出。
   对所有视口高度生效（浏览器实际视口高 ≠ 屏幕分辨率，不能用 1080 判断） */
.section-modules {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 38px;
  padding-bottom: 42px;
  margin-bottom: 0;
  min-height: calc(100vh - var(--hero-block-h, 520px));
  justify-content: center;      /* 内容在剩余空间内垂直居中，不显局促 */
}
/* 模块区卡片网格与下方「培训课程」等栏目左右对齐：
   统一收在 1200px 内容栏内（.container），而非通栏铺满。
   注意：.section-modules 是 flex 列容器，子项须显式 width:100% +
   align-self:center，否则 max-width 会被收缩成非预期宽度 */
.section-modules .container {
  width: 100%;
  max-width: 1200px;
  align-self: center;
}


/* 中等屏：横向卡片在窄屏下进一步收窄间隙与内距 */
@media (max-width: 1280px) {
  .category-grid { gap: 12px 14px; }
  .category-card { padding: 12px 14px; gap: 12px; min-height: 78px; }
  .category-card .cat-icon { width: 44px; height: 44px; font-size: 19px; }
  .category-card h3 { font-size: 14px; }
  .category-card p { font-size: 12px; }
}

/* Courses header with filters */
.courses-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.courses-title-wrap {
  display: flex;
  flex-direction: column;
}

.courses-title-wrap .section-title {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.courses-title-wrap .section-subtitle {
  margin: 0;
}

.courses-title-wrap .title-icon,
.section-title .title-icon {
  color: var(--primary);
  font-size: 22px;
  margin-right: 8px;
}

.courses-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-select select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 8px 32px 8px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-search {
  position: relative;
}

.filter-search input {
  width: 180px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 7px 14px 7px 32px;
  font-size: 13px;
  outline: none;
  background: #fff;
}

.filter-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 13px;
}

/* Course cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.course-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.course-card:hover { transform: translateY(-4px); }
.course-card .body {
  padding: 12px 14px 10px;
  height: 121px;              /* 116 → 121：为两行标题多留 5px，避免末行被裁切 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.course-card .tag {
  display: inline-block;
  background: #782F33;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 7px;
  align-self: flex-start;
  flex-shrink: 0;
}
.course-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.28;          /* 行距收紧，两行标题在固定高度内完整显示 */
  margin: 0;
  /* 标题固定两行：line-clamp 需要一个「真实的高度边界」才会触发截断。
     若用 flex:1 撑高，Chromium 会把 -webkit-box 块级化为 flow-root，
     clamp 失效 → 第三行起被 .body 的 overflow:hidden 硬切（无省略号）。
     因此这里用 max-height 给出精确的两行高度，并用 -webkit-line-clamp 兜底。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: calc(2 * 1.28em);   /* 精确两行，超出即省略号 */
  overflow: hidden;
  word-break: break-word;
  flex: 0 1 auto;                 /* 不再撑满，避免破坏 clamp 计算 */
  min-height: 0;
}
.course-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: auto;
  line-height: 1.3;
  gap: 8px;
  min-width: 0;
}
/* 讲师行：图标 + 姓名 + 单位 + 职级/头衔；容器按内容取宽，
   超出剩余宽度时从「单位」开始省略，姓名始终完整可读 */
.course-card .meta .instructor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
}
.course-card .meta .instructor i {
  color: var(--primary);
  font-size: 12px;
  flex-shrink: 0;
}
.course-card .meta .instructor .ins-name { flex: 0 0 auto; }
.course-card .meta .instructor .ins-org,
.course-card .meta .instructor .ins-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 单位可视作弹性项：空间充足时完整显示，不足时优先压缩它 */
.course-card .meta .instructor .ins-org { flex: 0 1 auto; }
.course-card .meta .instructor .ins-title { flex: 0 1 auto; }
/* 姓名与单位之间、单位与头衔之间留出稳定间距（避免用全角空格） */
.course-card .meta .instructor .ins-org { margin-left: 2px; }
.course-card .meta .instructor .ins-title::before { content: '·'; margin: 0 4px; color: var(--text-muted, #bbb); }

.course-card .meta .course-stat {
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.course-card .cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 5;
  overflow: hidden;
}

.course-card .cover-wrap .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Course status badge */
.course-card .status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  z-index: 3;
  line-height: 1.3;
}
.status-completed { background: #10B981; }
.status-in_progress { background: #3B82F6; }
.status-upcoming { background: #F59E0B; }
.status-not_started { background: #EF4444; }

/* 课程列表空状态（如「外贸谈判」分类下暂无课程时） */
.course-empty {
  grid-column: 1 / -1;
  padding: 64px 20px;
  text-align: center;
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.course-empty i { font-size: 38px; color: #d8cfcb; display: block; margin-bottom: 14px; }
.course-empty h3 { font-size: 16px; color: var(--text-secondary); margin: 0 0 6px; font-weight: 600; }
.course-empty p { margin: 0 0 20px; font-size: 13px; }

/* Course cover overlays */
.course-card .course-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.course-card .upcoming-overlay {
  background: rgba(0,0,0,0.55);
}
.course-card .upcoming-overlay .release-date {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 0 12px;
}

.course-card .progress-overlay {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}
.course-card .progress-bar-panel {
  width: 100%;
  background: rgba(0,0,0,0.65);
  padding: 8px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.course-card .progress-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.2;
}
.course-card .progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  overflow: hidden;
}
.course-card .progress-fill {
  height: 100%;
  background: #3B82F6;
  border-radius: 3px;
}

/* Course action button */
.course-card .course-action {
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.course-card .course-action i {
  font-size: 10px;
}
.action-completed { color: #10B981; }
.action-in_progress { color: #3B82F6; }
.action-upcoming { color: #F59E0B; }
.action-not_started { color: #EF4444; }

/* Load more button */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #782F33;
  border-radius: 8px;
  padding: 10px 24px;
  color: #782F33;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.load-more-btn i {
  font-size: 13px;
}

.load-more-btn:hover {
  background: #782F33;
  color: #fff;
}

/* ===== 在线直播（首页板块 + live.html 二级页共用） ===== */
/* 首页板块：横向推拉滚动（左右箭头 + 拖拽），二级页仍用网格 */
.live-slider {
  position: relative;
}
/* 只有首页横滑容器里的 live-grid 改横排；live.html 里的保持网格 */
.live-slider > .live-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* 只用纵向 padding：横向 padding 会被浏览器算进 scrollWidth，
     导致初始 scrollLeft 不为 0，箭头显隐判定失准 */
  padding: 4px 0 10px;
  /* 隐藏原生滚动条（横滑由箭头/拖拽驱动） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.live-slider > .live-grid::-webkit-scrollbar { display: none; }
.live-slider > .live-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.live-slider > .live-grid > .live-card,
.live-slider > .live-grid > .live-empty {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.live-slider > .live-grid > .live-empty { flex: 1 0 100%; }
/* 左右推拉箭头 */
.live-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  color: #8B1A2D;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(120,47,51,0.14);
  transition: opacity 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.live-nav:hover { background: #fff; }
.live-nav.prev { left: -18px; }
.live-nav.next { right: -18px; }
.live-nav[hidden] { display: none; }
@media (max-width: 720px) {
  .live-nav { display: none; }
  .live-slider > .live-grid > .live-card { flex: 0 0 78vw; }
}
.live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.live-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.live-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(120,47,51,0.14);
}
.live-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f2eeea;
  overflow: hidden;
}
.live-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.live-cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfc6c2;
  font-size: 36px;
  background: linear-gradient(135deg, #f7f3f0 0%, #ece5e1 100%);
}
/* 状态角标：预告中（蓝）/ 直播中（红，带呼吸点）/ 已结束（灰） */
.live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  backdrop-filter: blur(4px);
}
.live-badge.preview { background: rgba(238,242,255,0.94); color: #4f46e5; }
.live-badge.living  { background: rgba(122,31,36,0.92); color: #fff; }
.live-badge.ended   { background: rgba(240,240,242,0.94); color: #8a8a95; }
.live-badge.living i {
  font-size: 8px;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.live-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.live-body h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  /* 标题固定占两行：不足两行留白，超出两行显示省略号（line-clamp） */
  min-height: calc(1.45em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  /* 固定占两行（开播时间 + 老师），老师缺失时留白，保证各卡信息行对齐 */
  min-height: calc(1.5em * 2 + 5px);
}
.live-meta span { display: inline-flex; align-items: center; gap: 6px; }
.live-meta i { color: #8B1A2D; font-size: 12px; width: 13px; text-align: center; }
.live-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
  /* 简介固定占两行：不足留白，超出省略号；无简介时元素仍渲染（模板保证）以对齐价格行 */
  min-height: calc(1.6em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-foot { margin-top: auto; padding-top: 6px; }
.live-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.live-btn:hover { opacity: 0.88; }
.live-btn.preview { background: #eef2ff; color: #4f46e5; }
.live-btn.living  { background: #8B1A2D; color: #fff; }
.live-btn.ended   { background: #f0f0f2; color: #6b6b75; }
.live-btn.is-disabled { cursor: default; opacity: 0.75; }
.live-btn.is-disabled:hover { opacity: 0.75; }
.live-empty {
  grid-column: 1 / -1;
  padding: 56px 20px;
  text-align: center;
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.live-empty i { font-size: 34px; color: #d8cfcb; display: block; margin-bottom: 12px; }
.live-empty p { margin: 0; font-size: 14px; }

/* 二级页状态筛选标签 */
.live-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.live-tab {
  padding: 8px 18px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.live-tab:hover { border-color: #8B1A2D; color: #8B1A2D; }
.live-tab.active {
  background: #8B1A2D;
  border-color: #8B1A2D;
  color: #fff;
  font-weight: 600;
}
.live-tab .cnt {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.75;
}

/* Experts */
.expert-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.expert-card {
  min-width: 0;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.expert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(120,47,51,0.12);
}
.expert-card .expert-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #782F33;
  padding: 3px;
  margin: 0 auto 10px;
  transition: transform 0.25s ease;
}
.expert-card:hover .expert-avatar {
  transform: scale(1.05);
}
.expert-card img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.expert-card h4 {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expert-card span { display: block; font-size: 12px; color: var(--text-secondary); }
.expert-card .expert-role {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expert-card .expert-org {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expert-tooltip {
  position: absolute;
  z-index: 2000;
  max-width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.expert-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.expert-tooltip .tooltip-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}
.expert-tooltip .tooltip-body {
  word-break: break-all;
}

/* ============================================================
   跨境内训模块
   ────────────────────────────────────────────────────────────
   布局：
     .training-section  左（媒体+名称+学员对象） / 右（简介+师资）
     .tm-enroll-wrap    报名窗口（跨两栏，全宽）
   媒体窗口按 mediaType 渲染：视频 <video> 或 图片轮播 .tm-gallery
   ============================================================ */
.training-section {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.training-section .training-left,
.training-section .training-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.training-section .training-right { gap: 18px; }

.training-media-card,
.training-intro-card,
.tm-teachers,
.tm-benefits {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ── 媒体窗口 ── */
.training-media-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tm-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  overflow: hidden;
}
.tm-media video.tm-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.tm-media-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #8a8a95;
  background: #f4f2f0;
  font-size: 13px;
}
.tm-media-empty i { font-size: 30px; opacity: 0.5; }

/* 图片轮播 */
.tm-gallery { position: absolute; inset: 0; }
.tm-gallery .tm-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.tm-gallery .tm-slide.active { opacity: 1; pointer-events: auto; }
.tm-gallery .tm-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease, background 0.22s ease;
  z-index: 2;
}
.tm-gallery:hover .tm-arrow { opacity: 1; }
.tm-gallery .tm-arrow:hover { background: rgba(139, 26, 45, 0.9); }
.tm-gallery .tm-prev { left: 12px; }
.tm-gallery .tm-next { right: 12px; }
.tm-gallery .tm-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.tm-gallery .tm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tm-gallery .tm-dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* ── 名称 + 学员对象（媒体正下方） ── */
.tm-head {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border-light);
}
.tm-head .tm-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 10px;
}
.tm-head .tm-object {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.tm-head .tm-object-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 4px;
  background: rgba(139, 26, 45, 0.07);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 价格标签（名称下方，三档一览） ── */
.tm-price-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(139, 26, 45, 0.07), rgba(139, 26, 45, 0.02));
  border: 1px solid rgba(139, 26, 45, 0.14);
}
.tm-price-tag > i {
  color: var(--primary);
  font-size: 13px;
}
.tm-price-items {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tm-price-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
}
.tm-price-item + .tm-price-item {
  padding-left: 14px;
  border-left: 1px solid rgba(139, 26, 45, 0.14);
}
.tm-price-item .tm-price-name {
  color: var(--text-tertiary);
  font-size: 12px;
}
.tm-price-item .tm-price-val {
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
/* 未定价：灰底灰字，明确「待定」而非假价格 */
.tm-price-item.is-tbd .tm-price-val { color: #9a9aa2; font-weight: 600; font-size: 13px; }
.tm-price-tag.is-tbd {
  background: #f4f3f1;
  border-color: #e4e0dc;
}
.tm-price-tag.is-tbd > i { color: #9a9aa2; }
.tm-price-tag .tm-price-main {
  font-size: 13.5px;
  font-weight: 600;
  color: #8a8a95;
}

/* ── 报名折叠摘要里的价格 ── */
.tm-enroll-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(139, 26, 45, 0.1);
  color: var(--primary);
  border: 1px solid rgba(139, 26, 45, 0.2);
}
.tm-enroll-price.is-tbd {
  background: #f2f0ee;
  color: #8a8a95;
  border-color: #e4e0dc;
  font-weight: 600;
}

/* ── 展开体：当前适用价格条 ── */
.tm-price-now {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(139, 26, 45, 0.08), rgba(139, 26, 45, 0.02));
  border: 1px solid rgba(139, 26, 45, 0.16);
}
.tm-price-now .pn-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.tm-price-now .pn-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(139, 26, 45, 0.1);
  padding: 2px 9px;
  border-radius: 4px;
}
.tm-price-now .pn-note {
  font-size: 12px;
  color: var(--text-tertiary);
}
.tm-price-now.is-tbd {
  background: #f7f6f4;
  border-color: #e4e0dc;
}
.tm-price-now.is-tbd .pn-tag { color: #8a8a95; font-size: 15px; }

/* ── 简介 ── */
.training-intro-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.training-intro-card h4,
.tm-teachers h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.training-intro-card .intro-scroll {
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
}
.training-intro-card .intro-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0;
}
/* 超过约 200 字：正文已在 JS 侧截断到 200 字，这里只负责多行裁切兜底与省略号样式 */
.training-intro-card .intro-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 12;
  line-clamp: 12;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  cursor: help;
  position: relative;
}
/* 省略号：跟在截断文案末尾 */
.training-intro-card .intro-text .intro-ellipsis {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 1px;
}

/* 悬停浮层：显示完整简介 */
.intro-hover-tip {
  position: fixed;
  z-index: 1200;
  max-width: 520px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.intro-hover-tip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.intro-tip-inner {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-height: 52vh;
  overflow-y: auto;
}

/* ── 学员收益（最多 4 条，逐条打点） ── */
.tm-benefits {
  padding: 0 18px 18px;
  flex: 0 0 auto;
}
.tm-benefits h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.tm-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm-benefit-list li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.tm-benefit-list li:last-child { margin-bottom: 0; }
.tm-benefit-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* ── 师资（小图，1~N 位） ── */
.tm-teachers {
  padding: 18px;
  flex: 0 0 auto;
}
.tm-teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
}
.tm-teacher {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 9px;
  background: #faf8f6;
  border: 1px solid var(--border-light);
  transition: border-color 0.2s ease, transform 0.2s ease;
  min-width: 0;
}
.tm-teacher:hover {
  border-color: rgba(139, 26, 45, 0.28);
  transform: translateY(-1px);
}
.tm-teacher .tm-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ece8e4 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3aca6;
  font-size: 15px;
  overflow: hidden;
}
.tm-teacher .tm-teacher-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.tm-teacher .tm-teacher-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-teacher .tm-teacher-title {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 报名窗口（跨两栏，全宽；默认收缩，点击头部展开） ── */
.tm-enroll-wrap { margin-top: 24px; }
.tm-enroll {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 24px;
  border: 1px solid var(--border-light);
  transition: padding 0.2s ease;
}
.tm-enroll.is-open { padding-bottom: 24px; }
.tm-enroll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  border-radius: 8px;
}
.tm-enroll-head:hover h4 { color: var(--primary); }
.tm-enroll-head h4 {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  margin: 0;
  transition: color 0.16s ease;
}
/* 折叠摘要：类型 + 截止 + 状态 + 指示箭头 */
.tm-enroll-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tm-enroll-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--primary-bg, rgba(139, 26, 45, 0.08));
  color: var(--primary);
  border: 1px solid rgba(139, 26, 45, 0.18);
}
.tm-enroll-deadline-inline {
  font-size: 12px;
  color: #c07a12;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tm-enroll-caret {
  font-size: 13px;
  color: var(--text-tertiary);
  transition: transform 0.22s ease;
}
.tm-enroll.is-open .tm-enroll-caret { transform: rotate(180deg); }

/* 展开体：默认隐藏 */
.tm-enroll-body { display: none; }
.tm-enroll.is-open .tm-enroll-body { display: block; }

.tm-enroll-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
}
.tm-enroll-state.is-open {
  background: rgba(28, 122, 74, 0.1);
  color: #1c7a4a;
  border: 1px solid rgba(28, 122, 74, 0.22);
}
.tm-enroll-state.is-closed {
  background: #f2f0ee;
  color: #8a8a95;
  border: 1px solid #e4e0dc;
}
.tm-enroll-deadline {
  font-size: 12px;
  color: #c07a12;
  margin: 12px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tm-form { margin-top: 14px; }
/* ── 报名类型切换（单人 / 多人 / 集团） ── */
.tm-type-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tm-type-btn {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.tm-type-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.tm-type-btn.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}
.tm-type-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tm-type-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.7;
  margin: 0 0 14px;
  padding: 8px 10px;
  background: var(--bg-page);
  border-radius: 6px;
}
.tm-type-hint i { color: var(--primary); margin-right: 4px; }

/* ── 多人 / 集团报名：人数 + 学员名单 ── */
.tm-batch-box {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--bg-page);
  border-radius: 8px;
}
.tm-field-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }
.tm-members { display: flex; flex-direction: column; gap: 6px; }
.tm-member-row { display: flex; gap: 6px; align-items: center; }
.tm-member-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  background: #fff;
}
.tm-member-input:focus { border-color: var(--primary); }
.tm-member-del {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}
.tm-member-del:hover { border-color: var(--primary); color: var(--primary); }
.tm-member-add {
  margin-top: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--primary);
  background: #fff;
  border: 1px dashed var(--primary);
  border-radius: 6px;
  cursor: pointer;
}
.tm-member-add:hover { background: var(--primary-bg); }

@media (max-width: 768px) {
  .tm-batch-box { grid-template-columns: 1fr; }
  .tm-type-btn { min-width: 90px; font-size: 12px; }
}

.tm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.tm-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.tm-field label {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 600;
}
.tm-field label em { color: var(--primary); font-style: normal; }
.tm-field input,
.tm-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.tm-field textarea { resize: vertical; min-height: 58px; }
.tm-field input:focus,
.tm-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 26, 45, 0.08);
}
.tm-field input:disabled,
.tm-field textarea:disabled {
  background: #f6f4f2;
  color: #a3aca6;
  cursor: not-allowed;
}
.tm-field.has-error input,
.tm-field.has-error textarea {
  border-color: #d9534f;
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.08);
}
.tm-field .tm-err {
  font-size: 11.5px;
  color: #d9534f;
  line-height: 1.4;
}

.tm-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tm-form-tip {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}
.tm-submit {
  flex: 0 0 auto;
  padding: 11px 30px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
}
.tm-submit:hover:not(:disabled) { background: #75161f; }
.tm-submit:active:not(:disabled) { transform: translateY(1px); }
.tm-submit:disabled { background: #c9c4c0; cursor: not-allowed; }

/* 提交结果提示条 */
.tm-result {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.tm-result.is-ok {
  display: flex;
  background: rgba(28, 122, 74, 0.08);
  color: #1c7a4a;
  border: 1px solid rgba(28, 122, 74, 0.2);
}
.tm-result.is-err {
  display: flex;
  background: rgba(217, 83, 79, 0.08);
  color: #c0392b;
  border: 1px solid rgba(217, 83, 79, 0.2);
}

/* 报名关闭态：整体降饱和 */
.tm-enroll.is-closed { background: #fbfaf9; }

/* 空态 */
.tm-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── 响应式 ── */
@media (max-width: 992px) {
  .training-section { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tm-form-row { grid-template-columns: 1fr; gap: 12px; }
  .tm-enroll { padding: 14px 16px; }
  .tm-enroll.is-open { padding-bottom: 20px; }
  .tm-enroll-head { gap: 8px; }
  .tm-enroll-meta { gap: 8px; }
  .tm-enroll-deadline-inline { display: none; }   /* 窄屏省空间，展开后在体内显示 */
  .tm-form-foot { flex-direction: column; align-items: stretch; }
  .tm-submit { width: 100%; }
  .tm-teacher-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  /* 价格标签：窄屏转为竖排，避免三档挤成一行溢出 */
  .tm-price-tag { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tm-price-items { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tm-price-item + .tm-price-item { padding-left: 0; border-left: 0; }
  .tm-price-now { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.side-list {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.side-list h4 { font-size: 16px; margin-bottom: 14px; }
.side-list .item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s;
}
.side-list .item:last-child { border-bottom: none; }
.side-list .item:hover { transform: translateX(3px); }
.side-list .item img {
  width: 80px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
.side-list .item .txt { flex: 1; }
.side-list .item h5 { font-size: 13px; margin-bottom: 4px; }
.side-list .item span { font-size: 12px; color: var(--text-muted); }

/* My resources */
.my-resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.resource-panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: left;
}
.resource-panel h4 { font-size: 16px; margin-bottom: 6px; }
.panel-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat-box {
  background: rgba(122,31,36,0.04);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.stat-box .num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-box .label { font-size: 12px; color: var(--text-secondary); }

.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { transform: translateX(3px); }
.list-row .thumb {
  width: 72px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
}
.list-row .txt { flex: 1; }
.list-row h5 { font-size: 13px; margin-bottom: 2px; }
.list-row span { font-size: 11px; color: var(--text-muted); }

/* Footer —— 精简版：LOGO + 简介 | 主办单位，高度由内容自然撑开 */
.site-footer {
  background: var(--footer-dark);
  color: rgba(255,255,255,0.7);
  padding: 38px 0 34px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 40px;
  align-items: center;
}
.footer-brand .footer-logo {
  height: 54px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}
.footer-brand p { max-width: 560px; }
.footer-grid h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.footer-grid p, .footer-grid a { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 2; display: block; }
.footer-grid a:hover { color: var(--accent); }
.footer-unit { text-align: right; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius);
  width: 420px;
  max-width: 90%;
  padding: 28px;
  position: relative;
}
.modal h3 { font-size: 20px; margin-bottom: 18px; text-align: center; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
}
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-secondary); }
.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.form-group input:focus { border-color: var(--primary); }
.modal .btn { width: 100%; margin-top: 8px; }
.modal-tabs {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.modal-tabs span {
  padding-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}
.modal-tabs span.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  font-weight: 500;
}

/* Player page */
.breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 18px 0;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }

.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.video-player {
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.video-player video { width: 100%; height: 100%; object-fit: cover; }
.player-info {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 18px;
  box-shadow: var(--shadow);
}
.player-info h1 { font-size: 20px; margin-bottom: 12px; }
.player-meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.keywords { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.keywords span {
  background: rgba(122,31,36,0.06);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
}
/* 一句话宣传语（后台「宣传语」字段） */
.keywords .slogan-text {
  display: inline-block;
  padding: 6px 14px;
  border-left: 3px solid var(--primary);
  background: rgba(122,31,36,0.05);
  color: var(--primary);
  font-size: 14px;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
}
.action-bar { display: flex; gap: 12px; margin-bottom: 20px; }
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs span {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}
.tabs span.active { color: var(--primary); font-weight: 500; }
.tab-content { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }

.sidebar-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.sidebar-card h4 { font-size: 15px; margin-bottom: 14px; }
.instructor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
/* 讲师简介（方案A）：卡内折叠，默认 2 行 */
.instructor-bio {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.instructor-bio.open { -webkit-line-clamp: unset; display: block; }
.instructor-bio-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
}
.instructor-bio-toggle:hover { text-decoration: underline; }
.instructor img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.instructor h5 { font-size: 14px; }
.instructor p { font-size: 12px; color: var(--text-secondary); }

.chapter-list .chapter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 6px;
}
.chapter:hover { background: rgba(122,31,36,0.04); }
.chapter.active { background: rgba(122,31,36,0.08); }
.chapter .num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.chapter .txt { flex: 1; }
.chapter h5 { font-size: 13px; }
.chapter span { font-size: 12px; color: var(--text-muted); }
.chapter .lock { font-size: 14px; color: var(--text-muted); }

.progress-bar { height: 6px; background: var(--border); border-radius: 3px; margin: 10px 0; overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--primary); border-radius: 3px; }
.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.progress-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.progress-steps .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  margin-bottom: 4px;
}
.progress-steps .step.done .dot { background: var(--primary); }
.progress-steps .step.done { color: var(--primary); }

/* Player page enhancements */
.player-page {
  background: var(--bg);
}
.player-page .top-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  color: var(--primary);
}
.player-page .top-header .logo { color: var(--primary); }
.player-page .top-header .logo-img.light { opacity: 0; }
.player-page .top-header .logo-img.dark { opacity: 1; }
.player-page .top-header .main-nav a { color: var(--text); }
.player-page .top-header .main-nav a:not(:last-child)::after { background: rgba(15,23,42,.22); }
.player-page .top-header .main-nav a i { color: var(--primary); }
.player-page .top-header .main-nav a:hover,
.player-page .top-header .main-nav a.active { color: var(--primary); }
.player-page .top-header .search-box input {
  background: var(--bg);
  color: var(--text);
}
.player-page .top-header .icon-btn { color: var(--primary); }
.player-page .top-header .user-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.gold-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  text-decoration: none;
}
.gold-circle i { pointer-events: none; }
.gold-circle:hover {
  transform: scale(1.08);
  background: #c6933f;
}

.player-main-wrap {
  padding-top: 68px;   /* 顶部导航 60px + 8px 间距 */
  padding-bottom: 50px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 18px 0;
}
.breadcrumb a { color: var(--text-secondary); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--text-muted); }

.video-player {
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow);
}
.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.video-player .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.3s;
}
.video-player.playing .video-poster,
.video-player.playing .video-play-overlay {
  opacity: 0;
  pointer-events: none;
}
.video-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.video-big-play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(122,31,36,0.9);
  color: #fff;
  border: 3px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.video-play-overlay:hover .video-big-play {
  transform: scale(1.08);
  background: rgba(122,31,36,1);
}

/* 视频水印：跟随登录用户，截图/录屏可溯源 */
.video-watermark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  opacity: 0.32;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.video-player.playing .video-watermark { opacity: 0.26; }

/* 无权限遮罩：页面可浏览，点播放时引导购买/升级 */
.video-lock-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;                 /* 由 JS 按权限切换为 flex */
  align-items: center;
  justify-content: center;
  background: rgba(20,12,12,0.78);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.video-lock-mask .vlm-inner {
  text-align: center;
  color: #fff;
  padding: 0 24px;
  max-width: 420px;
}
.video-lock-mask i.fa-lock {
  font-size: 34px;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.video-lock-mask h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}
.video-lock-mask p {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* 价格展示：学习时间 / 学习次数 之后 */
.player-meta { flex-wrap: wrap; row-gap: 8px; }
.player-meta > span { white-space: nowrap; }
.player-meta .meta-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.player-meta .meta-price i { color: var(--primary); font-size: 12px; }
.player-meta .price-now {
  font-style: normal;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.player-meta .price-old {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* 课件锁定按钮 */
.material-list .btn-locked {
  color: var(--text-muted);
  border-color: var(--border);
  cursor: pointer;
}
.material-list .btn-locked:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* 移动端 / 窄屏适配 */
@media (max-width: 640px) {
  .video-lock-mask .vlm-inner { max-width: 300px; }
  .video-lock-mask h3 { font-size: 15px; }
  .video-lock-mask p { font-size: 12px; }
  .player-meta .price-now { font-size: 16px; }
  .video-watermark { font-size: 10px; right: 8px; bottom: 8px; }
}

.player-info {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 20px;
  box-shadow: var(--shadow);
}
.player-info-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.player-info h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.4;
}
.player-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.player-meta i { margin-right: 4px; color: var(--text-muted); }
.keywords { display: flex; gap: 8px; flex-wrap: wrap; }
.keywords span {
  background: rgba(122,31,36,0.06);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
}
.action-bar {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  font-weight: 500;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline.favorited {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tabs span {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tabs span i { font-size: 13px; }
.tabs span.active {
  color: var(--primary);
  font-weight: 600;
}
.tabs span.active::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  background: var(--primary);
}
.tab-content {
  display: none;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.tab-content.active { display: block; }
.tab-content h4 {
  font-size: 15px;
  color: var(--text);
  margin: 18px 0 10px;
}
.tab-content ul {
  padding-left: 18px;
  color: var(--text-secondary);
}
.tab-content li { margin-bottom: 6px; }

/* 分节简介（课程概览 Tab 内） */
.ch-intro {
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 12px;
  margin-bottom: 12px;
}
.ch-intro:last-child { margin-bottom: 0; }
.ch-intro.active { border-left-color: var(--primary); }
.ch-intro-head { display: flex; align-items: baseline; gap: 10px; }
.ch-intro-title { font-size: 14px; color: var(--text); }
.ch-intro.active .ch-intro-title { color: var(--primary); }
.ch-intro-dur { font-size: 12px; color: var(--text-tertiary); }
.ch-intro-text { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }

.material-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.material-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.material-list li:last-child { border-bottom: none; }
/* 文件类型图标：只作用于课件行自身的图标，不影响下载按钮内的图标 */
.material-list li > i {
  color: var(--primary);
  font-size: 16px;
  width: 20px;
}
/* 按钮内图标（下载/锁）跟随按钮文字色，避免酒红图标落在酒红按钮上看不清 */
.material-list .btn i {
  color: inherit;
  width: auto;
  font-size: 12px;
}
.material-list span { flex: 1; }
.material-list span .material-size { color: var(--text-muted); font-size: 12px; font-style: normal; margin-left: 6px; }
.material-list li.material-empty {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 26px 0;
  border-bottom: none;
}
.comment-empty {
  padding: 30px 0;
  text-align: center;
  color: var(--text-muted);
}

/* Sidebar cards */
.sidebar-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.sidebar-card h4 {
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-card h4 i { color: var(--primary); font-size: 14px; }

.instructor-card .instructor {
  display: flex;
  align-items: center;
  gap: 14px;
}
.instructor-card .instructor img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.instructor-card .instructor-info h5 {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.instructor-card .instructor-info p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.chapter-card {
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.chapter-card h4 { margin-bottom: 12px; }
.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.chapter-list::-webkit-scrollbar { width: 5px; }
.chapter-list::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}
.chapter-list .chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.chapter-list .chapter:hover { background: rgba(122,31,36,0.04); }
.chapter-list .chapter.active {
  background: rgba(122,31,36,0.08);
  border-color: rgba(122,31,36,0.18);
}
.chapter-list .chapter.locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.chapter-list .chapter .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.chapter-list .chapter.active .num { background: var(--primary); }
.chapter-list .chapter .txt { flex: 1; min-width: 0; }
.chapter-list .chapter h5 {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}
.chapter-list .chapter h5 .tt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-list .chapter h5 .ep {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--primary);
  font-weight: 600;
}
.chapter-list .chapter span { font-size: 12px; color: var(--text-muted); }
.chapter-list .chapter .status {
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.chapter-list .chapter.active .status { color: var(--primary); }

.progress-card .progress-summary {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.progress-card .progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  margin: 10px 0 14px;
  overflow: hidden;
}
.progress-card .progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.progress-card .progress-steps {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.progress-card .progress-steps::-webkit-scrollbar { display: none; }
.progress-card .progress-steps .step {
  flex: 0 0 auto;
  min-width: 40px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.footer-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
}
.footer-social a:hover { background: rgba(255,255,255,0.2); }

/* Settings */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 80px 0 28px;
}
.settings-nav {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  height: fit-content;
}
.settings-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.settings-nav a.active, .settings-nav a:hover { background: rgba(122,31,36,0.06); color: var(--primary); }
.settings-panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.settings-panel h3 { font-size: 18px; margin-bottom: 22px; }
.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.form-row label { font-size: 14px; color: var(--text-secondary); text-align: right; }
.form-row input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  width: 100%;
  max-width: 360px;
}
.form-row input:focus { border-color: var(--primary); }
.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 18px;
}
.avatar-uploader img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

/* Avatar options */
.avatar-options {
  flex: 1;
  max-width: 520px;
}
.avatar-options-tabs {
  display: inline-flex;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 14px;
  gap: 2px;
}
.avatar-options-tabs .opt-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.avatar-options-tabs .opt-tab:hover {
  color: var(--primary);
}
.avatar-options-tabs .opt-tab.active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.avatar-thumb {
  position: relative;
  padding: 0;
  border: 2px solid var(--border);
  background: var(--bg);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.avatar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-thumb:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.avatar-thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(120,47,51,0.18);
}
.avatar-thumb.active::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.upload-area {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload-area:hover,
.upload-area.dragging {
  border-color: var(--primary);
  background: #fff8f8;
}
.upload-area i {
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 6px;
}
.upload-area p {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  margin: 4px 0;
}
.upload-area .upload-tip {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}
.upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.upload-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Toast */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 2000;
  display: none;
}
.toast.active { display: block; }

/* Responsive */
@media (max-width: 980px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .expert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-section, .player-layout, .my-resources, .settings-layout, .footer-grid { grid-template-columns: 1fr; }
  .footer-unit { text-align: left; }
  .main-nav { display: none; }
}
@media (max-width: 640px) {
  .category-grid, .course-grid, .expert-grid, .live-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
  .search-box input { width: 140px; }
}

/* Login page */
.login-page {
  min-height: 100vh;
  background: #f6f4f1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-wrapper {
  display: flex;
  width: 100%;
  max-width: 1100px;
  min-height: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.login-left {
  flex: 1.15;
  /* 原叠加了废弃旧图 hero-bg.png；渐变本身不透明度 0.95~0.98，图片几乎不可见 → 直接去掉 */
  background: linear-gradient(135deg, rgba(90,20,25,0.95), rgba(70,15,18,0.98));
  color: #fff;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.login-left::before {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(212,162,74,0.12);
  filter: blur(40px);
}

.back-home {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  margin-bottom: auto;
  transition: color 0.2s;
}
.back-home:hover { color: #fff; }

.login-brand {
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}

.login-brand img {
  height: 56px;
  margin-bottom: 24px;
}

.login-brand h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.brand-slogan {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 20px;
}

.brand-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  max-width: 360px;
}

.login-right {
  flex: 1;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,0.02) 0%, transparent 25%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.015) 0%, transparent 35%),
    #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.login-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

.login-form-card {
  width: 100%;
  max-width: 340px;
  position: relative;
  z-index: 1;
}

.login-form-card h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--text);
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.login-form-card .form-group {
  position: relative;
  margin-bottom: 14px;
}

.login-form-card .form-group input {
  width: 100%;
  padding: 12px 38px 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8f6f3;
  outline: none;
  font-size: 13px;
  color: var(--text);
}

.login-form-card .form-group input:focus {
  border-color: var(--primary);
  background: #fff;
}

.login-form-card .form-group input::placeholder { color: var(--text-muted); }

.input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.login-form-card .login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 18px;
}

.login-form-card .login-options a { color: var(--text-secondary); }
.login-form-card .login-options a:hover { color: var(--primary); }

.login-form-card .btn-primary {
  padding: 12px;
  font-size: 15px;
  letter-spacing: 2px;
}

.login-register {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 18px;
}

.login-register a {
  color: var(--primary);
  font-weight: 500;
}

/* 登录页标签切换 */
.login-form-card--wide { max-width: 360px; }

.login-page-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.login-page-tabs span {
  padding-bottom: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.login-page-tabs span.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  font-weight: 500;
}

.login-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
}

/* 第三方账号登录（login.html） */
.login-third-party {
  margin-top: 22px;
}
.third-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.third-divider::before,
.third-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-third-party .third-icons {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 4px;
}
.login-third-party .third-icons a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.login-third-party .third-icons a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.14); }
.login-third-party .third-icons a.wechat { background: #07C160; }
.login-third-party .third-icons a.wechat:hover { background: #06a050; }
.login-third-party .third-icons a.qq { background: #12B7F5; }
.login-third-party .third-icons a.qq:hover { background: #0f9fd8; }
/* 内嵌 SVG 官方 logo（替代 Font Awesome 字体图标，login 页未引入 FA） */
.login-third-party .third-icons a svg {
  display: block;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
.third-hint { margin-top: 12px; }

/* 直播 / 实训等频道占位页（敬请期待） */
.coming-soon-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px;
  background: var(--bg);
}
.coming-soon-card {
  background: #fff;
  border-radius: 16px;
  padding: 64px 56px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
}
.coming-soon-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(122,31,36,0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 24px;
}
.coming-soon-card h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
}
.coming-soon-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 26px;
}
.coming-soon-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212,162,74,0.12);
  color: var(--primary);
  font-size: 13px;
  margin-bottom: 28px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.coming-soon-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.coming-soon-actions .btn-outline {
  color: var(--text);
  border-color: var(--border);
}
.coming-soon-actions .btn-outline:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* 短信验证码按钮（通用） */
.sms-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--primary);
  background: #fff;
  color: var(--primary);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.sms-btn:hover { background: var(--primary); color: #fff; }
.sms-btn:disabled {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 登录页：验证码输入 + 按钮同行 */
.login-form-card .form-group.code-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-form-card .form-group.code-group input { flex: 1; min-width: 0; }
.login-form-card .form-group.code-group .sms-btn { height: 42px; }

/* 弹窗：验证码输入 + 按钮同行 */
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; }
.code-row .sms-btn { height: 38px; }

@media (max-width: 860px) {
  .login-wrapper { flex-direction: column; min-height: auto; }
  .login-left { padding: 30px; min-height: 260px; }
  .login-right { padding: 30px; }
  .login-brand img { height: 44px; }
  .login-brand h1 { font-size: 26px; }
}

/* Courses resource page */
.courses-page { background: var(--bg); }
.courses-page .top-header { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); color: var(--primary); }
.courses-page .top-header .logo { color: var(--primary); }
.courses-page .top-header .logo-img.light { opacity: 0; }
.courses-page .top-header .logo-img.dark { opacity: 1; }
.courses-page .top-header .main-nav a { color: var(--text); }
.courses-page .top-header .main-nav a:not(:last-child)::after { background: rgba(15,23,42,.22); }
.courses-page .top-header .main-nav a i { color: var(--primary); }
.courses-page .top-header .main-nav a:hover,
.courses-page .top-header .main-nav a.active { color: var(--primary); }
.courses-page .top-header .search-box input { background: var(--bg); color: var(--text); }
.courses-page .top-header .icon-btn { color: var(--primary); }
.courses-page .top-header .user-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.courses-main { padding-top: 68px; padding-bottom: 60px; }

.courses-main .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 18px 0;
}
.courses-main .breadcrumb a { color: var(--text-secondary); transition: color 0.2s; }
.courses-main .breadcrumb a:hover { color: var(--primary); }
.courses-main .breadcrumb .sep { color: var(--text-muted); }

.page-header { margin-bottom: 28px; }
.page-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-header h1 i { color: var(--primary); font-size: 22px; }
.page-header p {
  font-size: 14px;
  color: var(--text-secondary);
}

.courses-toolbox {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.category-tabs .tab {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.category-tabs .tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.category-tabs .tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.toolbox-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toolbox-right .filter-select select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.toolbox-right .filter-search {
  position: relative;
}
.toolbox-right .filter-search input {
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 13px;
  width: 200px;
  outline: none;
}
.toolbox-right .filter-search input:focus { border-color: var(--primary); }
.toolbox-right .filter-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}

.load-more-bar {
  text-align: center;
  margin-top: 30px;
}
.load-more-bar .btn {
  padding: 10px 28px;
  font-size: 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 980px) {
  .courses-toolbox { flex-direction: column; align-items: stretch; }
  .toolbox-right { justify-content: space-between; }
  .toolbox-right .filter-search input { width: 160px; }
}
@media (max-width: 640px) {
  .category-tabs { gap: 6px; }
  .category-tabs .tab { padding: 6px 12px; font-size: 12px; }
  .toolbox-right { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbox-right .filter-search input { width: 100%; }
}

/* Experts resource page */
.experts-page { background: var(--bg); }
.experts-page .top-header { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); color: var(--primary); }
.experts-page .top-header .logo { color: var(--primary); }
.experts-page .top-header .logo-img.light { opacity: 0; }
.experts-page .top-header .logo-img.dark { opacity: 1; }
.experts-page .top-header .main-nav a { color: var(--text); }
.experts-page .top-header .main-nav a:not(:last-child)::after { background: rgba(15,23,42,.22); }
.experts-page .top-header .main-nav a i { color: var(--primary); }
.experts-page .top-header .main-nav a:hover,
.experts-page .top-header .main-nav a.active { color: var(--primary); }
.experts-page .top-header .main-nav a.active { position: relative; }
.experts-page .top-header .main-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.experts-page .top-header .search-box input { background: var(--bg); color: var(--text); }
.experts-page .top-header .icon-btn { color: var(--primary); }
.experts-page .top-header .user-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.experts-page .top-header .login-circle {
  background: var(--primary);
  color: #fff;
}

.experts-main { padding: 68px 0 60px; }  /* 顶部 68px 避开固定导航条，与 courses-main 一致（原 24px 会把面包屑盖进 header 底下） */
.experts-main .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.experts-main .breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.experts-main .breadcrumb a:hover { color: var(--primary); }
.experts-main .breadcrumb .sep { color: var(--text-muted); }

.experts-hero-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #9c3b40 100%);
  border-radius: var(--radius);
  padding: 60px 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
  box-shadow: 0 8px 24px rgba(120,47,51,0.25);
}
/* 后台上传背景图后：只替换背景，卡片宽高仍由原内容（padding + 文案）决定 */
.experts-hero-banner.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.experts-hero-banner.has-image .banner-content {
  /* 深色底图上的白字可读性保障 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.experts-hero-banner .banner-content {
  text-align: center;
}
.experts-hero-banner .banner-content h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.experts-hero-banner .banner-content p {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.92;
  max-width: 620px;
  margin: 0 auto;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-heading h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-heading h2 .title-icon { color: var(--primary); font-size: 18px; }

.experts-search {
  position: relative;
  width: 260px;
}
.experts-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.experts-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.experts-search input:focus { border-color: var(--primary); }

.experts-list-section { margin-bottom: 46px; }

.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.expert-detail-card {
  min-width: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 18px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.expert-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(120,47,51,0.12);
}
/* 「查看主页」入口（2026-11-06 导师详情页） */
.expert-detail-card { display: flex; flex-direction: column; }
.expert-detail-card .expert-tags { margin-bottom: 12px; }
.expert-detail-card .expert-home-link {
  margin-top: auto; font-size: 12px; color: var(--primary);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.expert-detail-card:hover .expert-home-link,
.expert-detail-card:focus-within .expert-home-link { opacity: 1; transform: translateY(0); }
.expert-detail-card .expert-avatar-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  padding: 3px;
  margin: 0 auto 14px;
  transition: transform 0.25s ease;
}
.expert-detail-card:hover .expert-avatar-wrap { transform: scale(1.05); }
.expert-detail-card .expert-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.expert-detail-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.expert-detail-card .expert-title {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  min-height: 0;
  margin-bottom: 4px;
}
.expert-detail-card .expert-org {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  min-height: 0;
  margin-bottom: 12px;
}
.expert-detail-card .expert-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.expert-detail-card .expert-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.member-service-section { margin-bottom: 40px; }
.member-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.member-service-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.member-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(120,47,51,0.12);
}
.member-service-card .service-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.member-service-card .service-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.member-service-card .service-info p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .experts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .experts-hero-banner { padding: 40px 30px; }
  .experts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .experts-grid { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; align-items: flex-start; }
  .experts-search { width: 100%; }
}

/* Resources center page */
.resources-page { background: var(--bg); }
.resources-page .top-header { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); color: var(--primary); }
.resources-page .top-header .logo { color: var(--primary); }
.resources-page .top-header .logo-img.light { opacity: 0; }
.resources-page .top-header .logo-img.dark { opacity: 1; }
.resources-page .top-header .main-nav a { color: var(--text); }
.resources-page .top-header .main-nav a:not(:last-child)::after { background: rgba(15,23,42,.22); }
.resources-page .top-header .main-nav a i { color: var(--primary); }
.resources-page .top-header .main-nav a:hover,
.resources-page .top-header .main-nav a.active { color: var(--primary); }
.resources-page .top-header .main-nav a.active { position: relative; }
.resources-page .top-header .main-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.resources-page .top-header .search-box input { background: var(--bg); color: var(--text); }
.resources-page .top-header .icon-btn { color: var(--primary); }
.resources-page .top-header .user-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.resources-page .top-header .login-circle { background: var(--primary); color: #fff; }

.resources-main { padding: 24px 0 60px; }
.resources-main .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.resources-main .breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.resources-main .breadcrumb a:hover { color: var(--primary); }
.resources-main .breadcrumb .sep { color: var(--text-muted); }

.resource-block {
  margin-bottom: 44px;
}
.resource-block .section-heading { margin-bottom: 20px; }
.resource-block .section-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.resource-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.resource-filter .r-tab {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.resource-filter .r-tab:hover { border-color: var(--primary); color: var(--primary); }
.resource-filter .r-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.news-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(120,47,51,0.12);
}
.news-card .news-cover {
  position: relative;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.news-card .news-type {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
}
.news-card .news-body {
  padding: 16px;
}
.news-card .news-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-card .news-body p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  height: 42px;
  overflow: hidden;
}

/* Pagination */
.pagination-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination-total {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 8px;
}
.page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--text-tertiary, #bbb);
  background: #fff;
  color: var(--text-secondary);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff8f8;
}
.page-btn.active,
.page-btn.active:disabled {
  background: #8B1A2D;
  border-color: #8B1A2D;
  color: #fff;
  opacity: 1;
  font-weight: 600;
  cursor: default;
}
.page-btn:disabled:not(.active) {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  background: #f9f9f9;
}
.page-prev,
.page-next {
  border-radius: 50%;
  width: 34px;
  padding: 0;
}
.page-ellipsis {
  color: var(--text-muted);
  font-size: 13px;
  padding: 0 4px;
  user-select: none;
}
.page-jump {
  font-size: 13px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.page-jump input {
  width: 46px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.page-jump input:focus {
  border-color: var(--primary);
}

@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .pagination { gap: 6px; }
  .page-btn { min-width: 30px; height: 30px; font-size: 12px; }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .pagination-total, .page-jump { display: none; }
}

/* ===================================================
   三级详情页：news-detail.html
   =================================================== */
.news-detail-main {
  padding: 24px 0 60px;
  background: #faf7f4;
  min-height: calc(100vh - 200px);
}
.news-detail-main .breadcrumb {
  margin: 0 0 20px;
  font-size: 13px;
}
.news-detail-main .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.news-detail-main .breadcrumb a:hover { color: var(--primary); }
.news-detail-main .breadcrumb .sep { color: var(--text-muted); margin: 0 6px; }

.news-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.news-article {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 36px 44px 44px;
  overflow: hidden;
}
.loading-tip {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}
.loading-tip i { font-size: 28px; color: var(--primary); margin-right: 8px; }

.empty-detail {
  text-align: center;
  padding: 100px 20px;
  color: var(--text-secondary);
}
.empty-detail i { font-size: 56px; color: var(--primary); margin-bottom: 18px; opacity: 0.6; }
.empty-detail h3 { margin: 8px 0; color: var(--text); }
.empty-detail .btn { margin-top: 20px; }

.article-head { position: relative; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid #f0e8e0; }
.article-cover {
  width: calc(100% + 88px);
  height: 280px;
  margin: -36px -44px 28px;
  background-size: cover;
  background-position: center;
  background-color: #efe8de;
}
.article-type {
  display: inline-block;
  padding: 3px 12px;
  font-size: 12px;
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.article-type[data-type="report"] { background: var(--accent); color: #fff; }
.article-type[data-type="guide"]  { background: #4a8c5f; color: #fff; }
.article-type[data-type="tool"]   { background: #2e5a87; color: #fff; }
.article-type[data-type="article"]{ background: var(--primary); }

.article-title {
  font-size: 28px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 700;
  margin: 4px 0 16px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}
.article-meta i { color: var(--primary); margin-right: 4px; }
.article-summary {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: #faf3ea;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

.article-body { font-size: 15px; line-height: 1.85; color: #333; }
.article-body .block-text { margin: 0 0 16px; }
.article-body .block-heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--primary);
  line-height: 1.5;
}
.article-body .block-heading[data-tone="sub"] {
  font-size: 16px;
  border-color: var(--accent);
  color: var(--primary);
}

.block-image { margin: 22px 0; text-align: center; }
.block-image img { max-width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.block-image figcaption, .block-video figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.block-video { margin: 22px 0; }
.block-video video {
  width: 100%;
  max-height: 480px;
  border-radius: 8px;
  background: #000;
}
.block-iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 22px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.block-iframe iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.block-iframe .caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.block-quote {
  margin: 22px 0;
  padding: 18px 22px 18px 52px;
  background: #fdf6ed;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  position: relative;
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
}
.block-quote i.fa-quote-left {
  position: absolute;
  left: 18px; top: 16px;
  font-size: 22px;
  color: var(--accent);
  opacity: 0.7;
}
.block-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: normal;
}

.block-list { margin: 12px 0 22px 20px; }
.block-list li { margin-bottom: 8px; line-height: 1.75; }
.block-list li::marker { color: var(--primary); }

.block-callout {
  display: flex; gap: 14px;
  margin: 22px 0;
  padding: 16px 20px;
  border-radius: 8px;
  background: #f0f5fa;
  border-left: 3px solid #2e5a87;
  font-size: 14px;
  line-height: 1.7;
}
.block-callout i { color: #2e5a87; font-size: 18px; flex-shrink: 0; padding-top: 2px; }
.block-callout[data-tone="warning"] { background: #fff8e6; border-color: #d49b25; }
.block-callout[data-tone="warning"] i { color: #d49b25; }
.block-callout[data-tone="success"] { background: #edf6ee; border-color: #4a8c5f; }
.block-callout[data-tone="success"] i { color: #4a8c5f; }

.block-table {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ecdfd2;
}
.block-table th { background: var(--primary); color: #fff; padding: 10px 12px; text-align: left; }
.block-table td { padding: 10px 12px; border-top: 1px solid #f1e8dc; }
.block-table tr:nth-child(even) td { background: #faf6f0; }

.article-tags {
  margin: 32px 0 0;
  padding: 16px 0;
  border-top: 1px dashed #ecdfd2;
  border-bottom: 1px dashed #ecdfd2;
  font-size: 13px;
}
.article-tags .tag {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 4px 12px;
  background: #faf3ea;
  color: var(--primary);
  border-radius: 14px;
  font-size: 12px;
}
.article-tags .tag:hover { background: #f0d79e; }
.article-tags > i { color: var(--primary); margin-right: 4px; }

.article-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.article-share {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.article-share a {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #faf3ea;
  color: var(--primary);
  transition: all 0.2s;
}
.article-share a:hover { background: var(--primary); color: #fff; }
.article-footer .btn { min-width: 90px; }
.article-footer .btn.favorited { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 侧栏 */
.news-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sidebar-card h4 {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  padding-bottom: 12px;
  margin: 0 0 16px;
  border-bottom: 1px solid #f0e8e0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-card h4 i { color: var(--primary); }

.meta-list { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; }
.meta-list li { display: flex; justify-content: space-between; padding: 7px 0; }
.meta-list .label { color: var(--text-secondary); }
.meta-list .value { color: var(--text); font-weight: 500; }
.meta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.meta-actions .btn { flex: 1; min-width: 80px; }

.related-list { display: flex; flex-direction: column; gap: 14px; }
.related-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 4px 0;
  transition: transform 0.2s;
}
.related-item:hover { transform: translateX(3px); }
.related-cover {
  width: 84px;
  height: 60px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #f0e8e0;
  flex-shrink: 0;
}
.related-info { flex: 1; min-width: 0; }
.related-info h5 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-info span { font-size: 11px; color: var(--text-secondary); }

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #f0e8e0; }
.toc-list li:last-child { border-bottom: none; }
.toc-list .toc-num {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #faf3ea; color: var(--primary); border-radius: 50%;
  font-size: 11px; font-weight: 600;
}
.toc-list a {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-list a:hover { color: var(--primary); }

.loading-mini { text-align: center; padding: 18px 0; color: var(--text-secondary); font-size: 13px; }
.loading-mini i { color: var(--primary); margin-right: 4px; }

/* 让卡片与列表行可点击 */


/* 响应式 */
@media (max-width: 960px) {
  .news-detail-layout { grid-template-columns: 1fr; }
  .news-sidebar { position: static; }
  .news-article { padding: 28px 22px; }
  .article-cover { width: calc(100% + 44px); margin: -28px -22px 22px; height: 200px; }
}
@media (max-width: 640px) {
  .article-title { font-size: 22px; }
  .article-body { font-size: 14.5px; }
  .article-meta { gap: 10px 14px; }
  .article-share { margin-left: 0; }
}

/* ============================================================
   全站控件形状统一（2026-09-16）：椭圆 / 药丸形
   带边框的交互控件（按钮、输入框、下拉、搜索框、筛选标签、
   验证码按钮、小徽章）一律椭圆，不再使用圆角长方框。
   卡片、面板、表格、章节行、上传区等内容容器不在此列。
   ============================================================ */
.btn,
.btn-sm,
.load-more-btn,
.load-more-bar .btn,
.filter-select select,
.toolbox-right .filter-select select,
.filter-search input,
.toolbox-right .filter-search input,
.search-box input,
.category-tabs .tab,
.live-tab,
.training-video-tabs .tv-tab,
.form-group input,
.form-row input,
.login-form-card .form-group input,
.sms-btn,
.page-jump input,
.course-card .tag,
.np-tag,
.expert-detail-card .expert-tag,
.avatar-options-tabs .opt-tab {
  border-radius: 999px;
}

/* ============================================================
   个人中心 profile.html（2026-09-16）
   白底 + 酒红主色的极简风；控件沿用全站「椭圆/药丸」规范
   ============================================================ */

/* ---------- 账号横幅 ---------- */
.pf-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, #7a1f24 0%, #9b2c33 55%, #b8434a 100%);
  border-radius: 16px; padding: 26px 30px; margin-bottom: 26px;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 8px 26px rgba(122, 31, 36, 0.20);
}
.pf-banner::after {
  content: ''; position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,0.07); pointer-events: none;
}
.pf-banner-avatar {
  width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%;
  background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; overflow: hidden;
}
.pf-banner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-banner-info { flex: 1; min-width: 0; }
.pf-banner-info h2 { font-size: 21px; font-weight: 700; margin-bottom: 6px; letter-spacing: .5px; }
.pf-banner-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; opacity: .88; }
.pf-banner-meta span { display: inline-flex; align-items: center; }
.pf-banner-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: relative; z-index: 1; }
.pf-acc-tag {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.42);
  font-size: 12px; letter-spacing: .5px;
}
.pf-acc-tag.org { background: #d4a24a; border-color: #e6c37f; color: #3b1a1c; font-weight: 600; }
.pf-banner-link {
  font-size: 13px; color: rgba(255,255,255,0.9);
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3); transition: all .2s;
}
.pf-banner-link:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- 区块通用 ---------- */
.pf-block { background: var(--card-bg); border-radius: 14px; padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--shadow); }
.pf-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.pf-block-head h3 { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 9px; }
.pf-block-head h3 i { color: var(--primary); font-size: 15px; }
.pf-block-more { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; transition: color .2s; }
.pf-block-more:hover { color: var(--primary); }
.pf-block-more.as-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  padding: 5px 14px; border-radius: 999px; font-family: inherit;
}
.pf-block-more.as-btn:hover { border-color: var(--primary); color: var(--primary); }
.pf-unread {
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: #e74c3c; color: #fff; font-size: 11px; font-style: normal;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 1. 学习概览四卡片 ---------- */
.pf-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pf-stat-card {
  display: flex; align-items: center; gap: 14px;
  background: #fbfaf9; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; transition: all .22s;
}
.pf-stat-card:hover { border-color: #d9cfc3; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.pf-stat-icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pf-stat-icon.c-blue { background: #e8f1fb; color: #2d7fd3; }
.pf-stat-icon.c-green { background: #e7f6ec; color: #2fa360; }
.pf-stat-icon.c-orange { background: #fdf1e3; color: #d98b27; }
.pf-stat-icon.c-purple { background: #f1ecfb; color: #7b5cd6; }
.pf-stat-body { min-width: 0; }
.pf-stat-num { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; }
.pf-stat-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* ---------- 账号权益 ---------- */
.pf-entitle { margin-top: 18px; }
.pf-entitle-inner { background: #fbfaf9; border: 1px dashed #ded5c9; border-radius: 12px; padding: 16px 20px; }
.pf-entitle-title { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-entitle-title i { color: var(--primary); }
.pf-entitle-title em {
  font-style: normal; font-weight: 500; font-size: 12.5px;
  color: var(--text-secondary); background: #f0ebe4;
  padding: 2px 12px; border-radius: 999px;
}
.pf-entitle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pf-entitle-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.pf-entitle-item i { font-size: 15px; margin-top: 2px; }
.pf-entitle-item.on i { color: #2fa360; }
.pf-entitle-item.off i { color: #c0b8ae; }
.pf-entitle-item b { display: block; font-weight: 600; font-size: 13px; }
.pf-entitle-item span { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.pf-entitle-item.off b, .pf-entitle-item.off span { color: #a8a096; }
.pf-entitle-tip {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: #fdf3e8; color: #a4650f; font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}

/* ---------- 2/4. 子 Tab（药丸） ---------- */
.pf-sub-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pf-sub-tab {
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  padding: 7px 18px; border-radius: 999px; font-size: 13.5px; font-family: inherit;
  color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px;
  transition: all .2s;
}
.pf-sub-tab:hover { border-color: #d9cfc3; color: var(--text); }
.pf-sub-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pf-sub-tab em {
  font-style: normal; font-size: 11.5px; min-width: 18px; height: 18px;
  border-radius: 999px; background: #efeae4; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.pf-sub-tab.active em { background: rgba(255,255,255,0.25); color: #fff; }

/* ---------- 最近学习列表 ---------- */
.pf-course-list { display: flex; flex-direction: column; gap: 12px; }
.pf-course-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  transition: all .22s; background: #fff;
}
.pf-course-item:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(122,31,36,.08); transform: translateX(3px); }
.pf-course-cover {
  width: 108px; height: 68px; flex: 0 0 108px; border-radius: 9px;
  overflow: hidden; background: #f2efeb;
  display: flex; align-items: center; justify-content: center;
}
.pf-course-cover img { width: 100%; height: 100%; object-fit: cover; }
.pf-course-ph { color: #c3b9ae; font-size: 22px; }
.pf-course-main { flex: 1; min-width: 0; }
.pf-course-title {
  font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-course-sub {
  font-size: 12px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px;
}
.pf-chip {
  background: #f4f0ea; color: #8a7f72; font-size: 11.5px;
  padding: 2px 10px; border-radius: 999px;
}
.pf-progress-bar { height: 6px; background: #efeae4; border-radius: 999px; overflow: hidden; }
.pf-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a8424a, #7a1f24); border-radius: 999px; transition: width .4s; }
.pf-course-side { flex: 0 0 92px; text-align: right; }
.pf-course-percent { font-size: 17px; font-weight: 700; color: var(--primary); }
.pf-course-percent.done { color: #2fa360; }
.pf-course-act { font-size: 12px; color: var(--text-secondary); margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; }
.pf-course-item:hover .pf-course-act { color: var(--primary); }

/* ---------- 3. 消息通知 ---------- */
.pf-msg-list { display: flex; flex-direction: column; }
.pf-msg {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 8px; border-bottom: 1px solid #f2eeea;
  cursor: pointer; transition: background .2s; position: relative;
}
.pf-msg:last-child { border-bottom: none; }
.pf-msg:hover { background: #fbfaf9; }
.pf-msg-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: #f2efeb; color: #8a7f72;
}
.pf-msg-icon.sys { background: #eef1f6; color: #5a7699; }
.pf-msg-icon.notice { background: #fdf0ec; color: #c4552f; }
.pf-msg-icon.course { background: #e8f1fb; color: #2d7fd3; }
.pf-msg-icon.live { background: #fbeaec; color: #c0333f; }
.pf-msg-icon.order { background: #fdf1e3; color: #d98b27; }
.pf-msg-body { flex: 1; min-width: 0; }
.pf-msg-top { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.pf-msg-type { color: var(--primary); font-weight: 600; }
.pf-msg-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.pf-msg-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.pf-msg.read .pf-msg-title { font-weight: 500; color: #6b6b6b; }
.pf-msg.read .pf-msg-text { color: var(--text-muted); }
.pf-msg-dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%;
  background: #e74c3c; margin-top: 8px;
}
.pf-msg-more { text-align: center; margin-top: 16px; }

/* ---------- 4. 订单记录 ---------- */
.pf-order-sum { font-size: 12.5px; color: var(--text-secondary); }
.pf-order-sum b { color: var(--text); }
.pf-order-sum b.money { color: var(--primary); font-size: 14px; }
.pf-order-tip {
  background: #f2f7fd; color: #2f6ba8; font-size: 12.5px;
  padding: 11px 16px; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.pf-order-list { display: flex; flex-direction: column; gap: 12px; }
.pf-order-item {
  display: flex; align-items: center; gap: 16px; position: relative;
  padding: 16px; border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .22s; background: #fff;
}
.pf-order-item:hover { border-color: #d9cfc3; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.pf-order-tag {
  position: absolute; top: 0; left: 16px;
  font-size: 11px; padding: 2px 12px; border-radius: 0 0 8px 8px;
  background: #f0ebe4; color: #8a7f72;
}
.pf-order-tag.organization { background: #d4a24a; color: #fff; }
.pf-order-cover {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px;
  overflow: hidden; background: #f2efeb; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
}
.pf-order-cover img { width: 100%; height: 100%; object-fit: cover; }
.pf-order-ph { color: #c3b9ae; font-size: 20px; }
.pf-order-main { flex: 1; min-width: 0; margin-top: 6px; }
.pf-order-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pf-order-sub { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pf-order-no { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.pf-order-side { flex: 0 0 110px; text-align: right; margin-top: 6px; }
.pf-order-amount { font-size: 16px; font-weight: 700; color: var(--primary); }
.pf-order-status { display: inline-block; margin-top: 6px; font-size: 11.5px; padding: 2px 12px; border-radius: 999px; background: #f0ebe4; color: #8a7f72; }
.pf-order-status.paid { background: #e7f6ec; color: #2fa360; }
.pf-order-status.unpaid { background: #fdf1e3; color: #d98b27; }
.pf-order-status.refunded { background: #eef1f6; color: #5a7699; }
.pf-order-status.cancelled { background: #f2f2f2; color: #9a9a9a; }
.pf-order-status.free { background: #f1ecfb; color: #7b5cd6; }
.pf-order-status.refunding { background: #fdf1e3; color: #d98b27; }
.pf-order-status.refund_pending { background: #fdf1e3; color: #d98b27; }
.pf-order-status.refund_rejected { background: #f2f2f2; color: #9a9a9a; }
.pf-order-status.refunded_part { background: #eef1f6; color: #5a7699; }

/* 订单操作按钮组 */
.pf-order-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pf-order-acts .btn { padding: 4px 14px; font-size: 12px; border-radius: 999px; line-height: 1.7; }
.pf-order-acts .btn-mini-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.pf-order-acts .btn-mini-primary:hover { opacity: .88; }
.pf-order-acts .btn-mini-line { background: #fff; color: var(--text-secondary); border: 1px solid var(--border); }
.pf-order-acts .btn-mini-line:hover { border-color: var(--primary); color: var(--primary); }
.pf-order-badges { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.pf-order-badge {
  font-size: 11px; padding: 2px 9px; border-radius: 6px;
  background: #f4f6f9; color: #64748b; display: inline-flex; align-items: center; gap: 4px;
}
.pf-order-badge.ok { background: #e7f6ec; color: #2fa360; }
.pf-order-badge.warn { background: #fdf1e3; color: #d98b27; }
.pf-order-badge.info { background: #eef4fd; color: #2f6ba8; }
.pf-order-more { text-align: center; margin-top: 16px; }
.pf-order-more .btn { padding: 8px 30px; font-size: 13px; }
.pf-order-sec { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px; }
.pf-order-sec h4 {
  font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px;
  display: flex; align-items: center; gap: 7px;
}
.pf-order-sec h4 i { color: var(--primary); }

/* ---------- 我的权益（年卡） ---------- */
.pf-mem-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pf-mem-card {
  position: relative; overflow: hidden; border-radius: 14px; padding: 18px 20px;
  border: 1px solid var(--border); background: #fff;
}
.pf-mem-card.is-active { border-color: #d9b98a; background: linear-gradient(140deg, #fdfaf5, #fff); }
.pf-mem-card.is-none { border-style: dashed; }
.pf-mem-card.is-expired { border-color: #e6e2dd; background: #fafafa; }
.pf-mem-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-mem-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: #f7f2f1; color: var(--primary);
}
.pf-mem-card.is-active .pf-mem-ico { background: linear-gradient(135deg, #8B1A2D, #b8384f); color: #f6d9a8; }
.pf-mem-card.is-none .pf-mem-ico, .pf-mem-card.is-expired .pf-mem-ico { background: #f2f0ee; color: #b0a89f; }
.pf-mem-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.pf-mem-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.pf-mem-state {
  margin-left: auto; font-size: 11.5px; padding: 3px 12px; border-radius: 999px;
  background: #f0ebe4; color: #8a7f72; white-space: nowrap;
}
.pf-mem-card.is-active .pf-mem-state { background: #fbeed6; color: #a97b28; }
.pf-mem-card.is-expired .pf-mem-state { background: #f2f2f2; color: #9a9a9a; }
.pf-mem-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.9; }
.pf-mem-body b { color: var(--text); font-weight: 600; }
.pf-mem-bar { height: 6px; border-radius: 999px; background: #f0ebe4; margin: 12px 0 8px; overflow: hidden; }
.pf-mem-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8B1A2D, #c94f68); }
.pf-mem-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pf-mem-foot .btn { padding: 7px 20px; font-size: 12.5px; border-radius: 8px; }
.pf-mem-foot .pf-mem-tip { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }

/* ---------- 我的申请 ---------- */
.pf-req-list { display: flex; flex-direction: column; gap: 10px; }
.pf-req-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; background: #fff;
}
.pf-req-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: #f4f6f9; color: #64748b;
}
.pf-req-ico.refund { background: #fdf1e3; color: #d98b27; }
.pf-req-ico.invoice { background: #eef4fd; color: #2f6ba8; }
.pf-req-main { flex: 1; min-width: 0; }
.pf-req-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pf-req-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.pf-req-side { text-align: right; flex: 0 0 auto; }
.pf-req-amt { font-size: 14px; font-weight: 700; color: var(--primary); }
.pf-req-status { font-size: 11.5px; padding: 2px 11px; border-radius: 999px; margin-top: 5px; display: inline-block;
  background: #f0ebe4; color: #8a7f72; }
.pf-req-status.pending { background: #fdf1e3; color: #d98b27; }
.pf-req-status.approved, .pf-req-status.issued { background: #e7f6ec; color: #2fa360; }
.pf-req-status.rejected { background: #fdeaea; color: #cf5050; }
.pf-req-note {
  margin-top: 8px; font-size: 12px; color: #2f6ba8; background: #f2f7fd;
  padding: 8px 12px; border-radius: 8px;
}
.pf-req-note.is-reject { color: #b84a4a; background: #fdf2f2; }

/* ---------- 5. 帮助与反馈 ---------- */
.pf-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.pf-help-card {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 17px 18px; border: 1px solid var(--border); border-radius: 12px;
  transition: all .22s; background: #fff;
}
.pf-help-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(122,31,36,.08); }
.pf-help-card > i:first-child {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  background: #f7f2f1; color: var(--primary); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.pf-help-card > div { flex: 1; min-width: 0; }
.pf-help-card b { display: block; font-size: 13.5px; font-weight: 600; }
.pf-help-card span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pf-help-card > i:last-child { color: var(--text-muted); font-size: 13px; }

.pf-feedback-box { background: #fbfaf9; border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.pf-fb-head { margin-bottom: 14px; }
.pf-fb-head b { display: block; font-size: 14px; font-weight: 600; }
.pf-fb-head span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.pf-fb-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pf-input, .pf-textarea {
  font-family: inherit; font-size: 13.5px; color: var(--text);
  border: 1px solid var(--border); background: #fff; outline: none;
  padding: 10px 16px; border-radius: 999px; transition: border-color .2s;
  flex: 1; min-width: 0;
}
.pf-textarea {
  width: 100%; border-radius: 12px; resize: vertical; line-height: 1.6;
  padding: 12px 16px;
}
.pf-input:focus, .pf-textarea:focus { border-color: var(--primary); }
.pf-fb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 14px; }
.pf-fb-count { font-size: 12px; color: var(--text-muted); }
.pf-fb-history { margin-top: 18px; }
.pf-fb-his-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.pf-fb-his-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.pf-fb-his-top { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 7px; }
.pf-fb-his-status { margin-left: auto; padding: 2px 11px; border-radius: 999px; background: #fdf1e3; color: #d98b27; }
.pf-fb-his-status.done { background: #e7f6ec; color: #2fa360; }
.pf-fb-his-status.processing { background: #e8f1fb; color: #2d7fd3; }
.pf-fb-his-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ---------- 空状态 ---------- */
.pf-empty { text-align: center; padding: 46px 20px; color: var(--text-muted); }
.pf-empty i { font-size: 36px; color: #d9d0c5; margin-bottom: 14px; display: block; }
.pf-empty p { font-size: 13.5px; margin-bottom: 16px; }
.pf-empty.small { padding: 34px 20px; }
.pf-empty.small i { font-size: 28px; margin-bottom: 10px; }

/* ---------- 弹窗 ---------- */
.pf-modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.pf-modal-mask.show { display: flex; }
.pf-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.pf-modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.pf-modal-head b { font-size: 16px; font-weight: 700; }
.pf-modal-head button {
  background: none; border: none; font-size: 24px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0 4px;
}
.pf-modal-head button:hover { color: var(--primary); }
.pf-modal-body { padding: 20px 22px; overflow-y: auto; }
.pf-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); text-align: right; }
.pf-detail-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 11px 0; border-bottom: 1px dashed #f0ece8; font-size: 13.5px;
}
.pf-detail-row:last-child { border-bottom: none; }
.pf-detail-row span { color: var(--text-secondary); flex: 0 0 88px; }
.pf-detail-row b { font-weight: 600; text-align: right; word-break: break-all; }
.pf-faq-item { padding: 14px 0; border-bottom: 1px dashed #f0ece8; }
.pf-faq-item:last-child { border-bottom: none; }
.pf-faq-item b { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.pf-faq-item b i { color: var(--primary); font-size: 14px; margin-top: 3px; }
.pf-faq-item p { font-size: 13px; color: var(--text-secondary); line-height: 1.75; padding-left: 22px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .pf-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-entitle-list { grid-template-columns: 1fr; }
  .pf-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pf-banner { flex-direction: column; align-items: flex-start; padding: 22px; gap: 14px; }
  .pf-banner-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .pf-block { padding: 18px 16px; }
  .pf-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pf-stat-card { padding: 14px; gap: 11px; }
  .pf-stat-icon { width: 38px; height: 38px; flex: 0 0 38px; font-size: 15px; }
  .pf-stat-num { font-size: 20px; }
  .pf-course-item { flex-wrap: wrap; }
  .pf-course-cover { width: 88px; height: 56px; flex: 0 0 88px; }
  .pf-course-side { flex: 0 0 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; }
  .pf-order-item { flex-wrap: wrap; }
  .pf-order-side { flex: 0 0 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; }
  .pf-fb-row { flex-direction: column; }
  .pf-input { max-width: none !important; width: 100%; }
  .pf-block-head { flex-wrap: wrap; }
}

/* ---------- 消息通知：收起 / 展开（2026-09-16） ---------- */
/* 标题行整体可点击；右侧按钮区单独 stopPropagation，避免误触折叠 */
.pf-collapsible-head { cursor: pointer; user-select: none; }
.pf-collapsible-head .pf-toggle-title { transition: color .2s; }
.pf-collapsible-head:hover .pf-toggle-title { color: var(--primary); }
.pf-head-caret {
  font-size: 13px; color: var(--text-muted); margin-left: 2px;
  transition: transform .28s ease;
}
.pf-collapsible-head:hover .pf-head-caret { color: var(--primary); }
.pf-head-actions { display: flex; align-items: center; gap: 10px; }

/* 折叠容器：用 grid-template-rows 0fr → 1fr 实现高度自适应过渡 */
.pf-collapse-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease, opacity .26s ease;
  opacity: 1;
}
.pf-collapse-body > * { min-height: 0; }
.pf-collapse-body.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
}
/* 收起时彻底消除内部元素残留的上下间距 */
.pf-collapse-body.collapsed > * { overflow: hidden; margin: 0; padding-top: 0; padding-bottom: 0; }
/* 首次渲染同步设定状态时不播放动画 */
.pf-collapse-body.no-anim { transition: none; }

@media (max-width: 640px) {
  .pf-collapsible-head { flex-wrap: wrap; }
  .pf-head-actions { width: 100%; justify-content: space-between; }
}

/* ============================================================
   应用权限拦截层（2026-09-17）
   无某应用权限时，受控页面（直播 / 内训 / 培训课程）用此层覆盖内容，
   阻挡直接输入 URL 访问。样式与前台白底蓝白 / 酒红主色一致。
   ============================================================ */
body.app-perm-blocked {
  overflow: hidden;
}

#appPermMask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: apmFadeIn .18s ease-out;
}

@keyframes apmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#appPermMask .apm-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 44px 40px 38px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

#appPermMask .apm-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(122,31,36,0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

#appPermMask .apm-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.45;
}

#appPermMask .apm-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 26px;
}

#appPermMask .apm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 前台按钮兜底：确保拦截层内的按钮在无 .btn 样式时也可见 */
#appPermMask .apm-actions .btn {
  min-width: 108px;
}

/* ============================================================
   在线直播 · 报名通道
   按钮状态扩展（基础 .live-btn 已有 preview/living/ended）
   ============================================================ */
.live-btn.signup        { background: #8B1A2D; color: #fff; }
.live-btn.signup-urgent { background: #c0392b; color: #fff; animation: livePulse 1.8s ease-in-out infinite; }
.live-btn.pay           { background: #d97706; color: #fff; }
.live-btn.signed        { background: #e8f5ef; color: #1d9e75; border: 1px solid #b7e0cd; }
.live-btn.replay        { background: #f0f0f2; color: #4b4b55; }
/* 已付费 · 预告中 → 预约提醒（提示态，弱于「进入直播间」） */
.live-btn.remind        { background: #eef2ff; color: #4f46e5; border: 1px solid #d6ddff; }
.live-btn.remind:hover  { background: #e3e9ff; }
.live-btn:disabled,
.live-btn.is-disabled   { cursor: default; opacity: 0.7; }

/* 卡片底部：主操作 + 三级页「课程详情」入口并列 */
.live-foot.is-split { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.live-btn-detail {
  width: auto; white-space: nowrap;
  background: #fff; color: #8B1A2D; border: 1px solid #e3c8cd;
}
.live-btn-detail:hover { background: #fff6f6; opacity: 1; }
.live-body h4 a { color: inherit; }
.live-body h4 a:hover { color: #8B1A2D; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.42); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

/* 卡片内价格 / 名额行 */
.live-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #faf7f7;
  border: 1px solid #f0e6e8;
}
.live-fee-price { font-size: 15px; font-weight: 600; color: #8B1A2D; }
.live-fee-price.is-free { color: #1d9e75; }
.live-fee-quota { font-size: 12px; color: #8a8a95; }
.live-fee-quota.is-low { color: #c0392b; }
.live-signed-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #1d9e75;
}

/* ============================================================
   报名弹窗
   ============================================================ */
.lsm-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 22, 24, 0.46);
}
.lsm-mask.is-open { display: flex; animation: apmFadeIn 0.18s ease-out; }
.lsm-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.lsm-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #6b6b75;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.lsm-close:hover { background: #f0f0f2; color: #2c2c2a; }
.lsm-head { padding: 20px 22px 14px; border-bottom: 1px solid #f0f0f2; }
.lsm-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eef2ff;
  color: #4f46e5;
}
.lsm-badge.living { background: rgba(139, 26, 45, 0.1); color: #8B1A2D; }
.lsm-badge.ended  { background: #f0f0f2; color: #8a8a95; }
.lsm-title { margin: 0; font-size: 16.5px; font-weight: 600; color: #2c2c2a; line-height: 1.45; }
.lsm-body { padding: 16px 22px 4px; }
.lsm-live { display: flex; gap: 14px; }
.lsm-cover {
  flex: 0 0 140px;
  height: 82px;
  border-radius: 9px;
  overflow: hidden;
  background: #f5f5f7;
}
.lsm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lsm-cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4c4cd;
  font-size: 22px;
}
.lsm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.lsm-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  color: #6b6b75;
}
.lsm-line i { width: 13px; color: #a8a8b3; font-size: 11.5px; }
.lsm-fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 12px;
  padding: 12px 14px;
  border-radius: 9px;
  background: #faf7f7;
  border: 1px solid #f0e6e8;
}
.lsm-fee-label { font-size: 13px; color: #6b6b75; }
.lsm-fee-value { font-size: 19px; font-weight: 600; color: #8B1A2D; }
.lsm-fee-value.free { color: #1d9e75; }
.lsm-notes {
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 12px;
  color: #8a8a95;
  line-height: 1.8;
}
.lsm-foot {
  display: flex;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid #f0f0f2;
}
.lsm-btn {
  flex: 1;
  padding: 11px 16px;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.lsm-btn:hover { opacity: 0.88; }
.lsm-btn:disabled { opacity: 0.6; cursor: default; }
.lsm-btn.ghost { flex: 0 0 96px; background: #f0f0f2; color: #4b4b55; }
.lsm-btn.primary { background: #8B1A2D; color: #fff; }

/* ============================================================
   报名结果提示
   ============================================================ */
.lrt-mask {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 22, 24, 0.46);
}
.lrt-mask.is-open { display: flex; animation: apmFadeIn 0.18s ease-out; }
.lrt-card {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.lrt-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.lrt-icon.done { background: #e8f5ef; color: #1d9e75; }
.lrt-icon.pay  { background: #fdf3e3; color: #d97706; }
.lrt-icon.remind { background: #eef2ff; color: #4f46e5; }
.lrt-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #2c2c2a; }
.lrt-desc { margin: 0 0 18px; font-size: 13px; color: #6b6b75; line-height: 1.7; }
.lrt-actions { display: flex; gap: 10px; justify-content: center; }
.lrt-btn {
  padding: 10px 20px;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: #f0f0f2;
  color: #4b4b55;
}
.lrt-btn.primary { background: #8B1A2D; color: #fff; }
.lrt-btn:hover { opacity: 0.88; }

/* 兜底迷你提示（页面没有 showToast 时用） */
.lmt {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translate(-50%, 12px);
  z-index: 1400;
  padding: 10px 18px;
  border-radius: 9px;
  background: rgba(44, 44, 42, 0.92);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lmt.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .lsm-live { flex-direction: column; }
  .lsm-cover { flex: 0 0 auto; width: 100%; height: 140px; }
}

/* ================================================================
 * 个人中心 · 账号与安全（登录方式绑定）
 * ================================================================ */
.pf-sec-sum { font-size: 12.5px; color: var(--text-secondary); }
.pf-sec-sum b { color: var(--text); }
.pf-sec-tip {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.7;
  background: var(--bg-soft, #f7f8fa); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px;
}
.pf-bind-list { display: flex; flex-direction: column; gap: 10px; }
.pf-bind-item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; transition: border-color .2s;
}
.pf-bind-item:hover { border-color: var(--border-strong, #d5d8dd); }
.pf-bind-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
}
.pf-bind-icon.is-phone { background: #6b7a90; }
.pf-bind-icon.is-muted { background: #c8ccd4; }
.pf-bind-main { flex: 1; min-width: 0; }
.pf-bind-name { font-size: 14px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; }
.pf-bind-state {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft, #f2f4f7); color: var(--text-secondary);
}
.pf-bind-state.is-bound { background: #e8f5ec; color: #1d7a3e; }
.pf-bind-desc { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.pf-bind-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pf-bind-btn {
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--primary); background: none; color: var(--primary);
  transition: all .2s;
}
.pf-bind-btn:hover { background: var(--primary); color: #fff; }
.pf-bind-btn.is-plain { border-color: var(--border); color: var(--text-secondary); }
.pf-bind-btn.is-plain:hover { border-color: #d9534f; background: none; color: #d9534f; }
.pf-bind-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .pf-bind-item { flex-wrap: wrap; }
  .pf-bind-act { width: 100%; justify-content: flex-end; }
  .pf-sec-tip { font-size: 12px; }
}

/* ============================================================
   首页「精选专题」紧凑卡片（2026-10-15）
   刻意做小：一张卡片 = 展示图 + 标题 + 两行简介 + 价格 + 进入
   ============================================================ */
.ht-card {
  display: flex;
  gap: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease, transform .22s ease;
}
.ht-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-2px); }

.ht-cover {
  flex: 0 0 300px;
  height: 168px;
  background-color: #eef2f6;
  background-size: cover;
  background-position: center;
}
/* 未上传展示图时：卡片退化为纯文字（.ht-cover 不渲染），内距略放大补空 */
.ht-card.no-cover .ht-body { padding: 18px 22px; }
.ht-body {
  flex: 1; min-width: 0;
  padding: 14px 20px;
  display: flex; flex-direction: column;
}
.ht-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ht-name { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.ht-count { font-size: 12px; color: var(--text-muted); }
.ht-intro {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.75; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ht-foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ht-price { display: flex; align-items: baseline; gap: 6px; }
.ht-price b { color: var(--primary); font-size: 22px; font-weight: 700; }
.ht-price b.ht-free { color: #2f9e63; font-size: 18px; }
.ht-price del { color: var(--text-muted); font-size: 13px; }
.ht-price .ht-days { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.ht-enter { color: var(--primary); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ht-enter i { margin-left: 4px; transition: transform .2s ease; }
.ht-card:hover .ht-enter i { transform: translateX(3px); }

@media (max-width: 768px) {
  .ht-card { flex-direction: column; gap: 0; }
  .ht-cover { flex: none; width: 100%; height: 150px; }
  .ht-body { padding: 12px 16px 14px; }
  .ht-name { font-size: 17px; }
  .ht-intro { -webkit-line-clamp: 3; }
}

/* ============================================================
   导师详情页（expert-detail.html，2026-11-06）
   酒红基调与专家智库页一致：--primary 渐变横幅 + 白底课程列表
   ============================================================ */
.ed-hero {
  display: flex;
  align-items: stretch;
  gap: 36px;
  background: linear-gradient(135deg, var(--primary) 0%, #9c3b40 100%);
  border-radius: var(--radius);
  padding: 36px 40px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(120,47,51,0.25);
  margin-bottom: 40px;
}
.ed-hero-left { display: flex; gap: 24px; flex-shrink: 0; max-width: 46%; }
.ed-avatar-wrap {
  width: 124px; height: 124px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(255,255,255,0.85);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ed-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #9c3b40; color: #fff; font-size: 44px; font-weight: 700;
}
.ed-id-block { min-width: 0; padding-top: 4px; }
.ed-name { font-size: 26px; font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.ed-title { font-size: 13px; opacity: 0.95; margin-top: 6px; }
.ed-org { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.ed-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ed-tag {
  font-size: 12px; padding: 3px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.45);
}
.ed-stats { font-size: 13px; opacity: 0.92; margin-top: 14px; }

.ed-bio-card {
  flex: 1; min-width: 0;
  background: #fff; border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  display: flex; flex-direction: column;
}
.ed-bio-card h3 {
  font-size: 15px; font-weight: 700; color: var(--primary);
  padding-left: 10px; border-left: 4px solid var(--primary);
  line-height: 1.4; margin-bottom: 12px;
}
.ed-bio-body {
  overflow: hidden; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}
.ed-bio-body.open { display: block; }
.ed-bio-body p { font-size: 14px; line-height: 1.9; color: var(--text-secondary); }
.ed-bio-toggle {
  align-self: flex-start; margin-top: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 13px; padding: 0;
}
.ed-bio-toggle:hover { color: var(--primary-dark); }

.ed-empty {
  text-align: center; padding: 80px 0; color: var(--text-secondary);
}
.ed-empty i { font-size: 42px; color: var(--text-muted); margin-bottom: 14px; }
.ed-empty p { font-size: 15px; margin-bottom: 20px; }

.ed-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.ed-section-head h2 { font-size: 20px; font-weight: 700; color: var(--text); }
.ed-section-sub { font-size: 13px; color: var(--text-muted); }

.ed-course-list { display: flex; flex-direction: column; gap: 18px; }
.ed-course {
  display: flex; align-items: stretch;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ed-course:hover {
  box-shadow: var(--shadow); transform: translateY(-2px); border-color: #dcb9bb;
}
.ed-course-cover {
  width: 236px; min-height: 132px; flex-shrink: 0;
  background: #f2eee7; position: relative;
}
.ed-course-cover img { width: 100%; height: 100%; object-fit: contain; display: block; position: absolute; inset: 0; }
.ed-cover-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: #b08a8c;
}
.ed-course-body { flex: 1; min-width: 0; padding: 16px 22px; display: flex; flex-direction: column; }
.ed-course-body h3 {
  font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.5;
  transition: color .2s;
}
.ed-course:hover .ed-course-body h3 { color: var(--primary); }
.ed-course-cat { margin-top: 6px; }
.ed-cat {
  display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 4px;
  background: #f7ecec; color: var(--primary);
}
.ed-course-desc {
  font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ed-course-meta { font-size: 12px; color: var(--text-muted); margin-top: auto; padding-top: 8px; }
.ed-course-action { display: flex; align-items: center; padding: 0 26px; flex-shrink: 0; }
.ed-btn {
  display: inline-block; white-space: nowrap;
  background: var(--primary); color: #fff;
  font-size: 13px; padding: 9px 20px; border-radius: 6px;
  transition: background .2s;
}
.ed-btn:hover { background: var(--primary-dark); }
.ed-btn i { margin-left: 4px; }
.ed-course-empty {
  text-align: center; padding: 60px 0; color: var(--text-muted);
  background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius);
}

@media (max-width: 900px) {
  .ed-hero { flex-direction: column; padding: 28px 24px; gap: 22px; }
  .ed-hero-left { max-width: 100%; }
}
@media (max-width: 640px) {
  .ed-hero-left { flex-direction: column; align-items: center; text-align: center; }
  .ed-id-block .ed-tags, .ed-id-block { align-items: center; }
  .ed-tags { justify-content: center; }
  .ed-course { flex-direction: column; }
  .ed-course-cover { width: 100%; height: 170px; }
  .ed-course-body { padding: 14px 16px; }
  .ed-course-action { padding: 0 16px 16px; justify-content: flex-end; }
}