/* === inline style #0 === */
/**
 * 新 HTML 课程平台主题样式（契约版，技术方案 v3.5 §7 样式与个性化分级）
 *
 * 移植自 admin 仓库「技术文档/html-course.css」（平台侧当前 HTML 课程渲染方案，对齐
 * 产品 UX/UI 规范设计令牌）。移植时做两处机械适配：
 *   1. 源压缩 CSS 的非法转义序列修复（双反斜杠转义引号还原为普通引号）
 *   2. 组件选择器前缀重命名：.mod-codebuddy-course → .html-course-theme
 *      （本模块独立命名空间——前缀是渲染端内部实现、不在课程 HTML 契约里，课程 HTML
 *      只写白名单裸类名；平台源文件的 mod-codebuddy-course 前缀是 CodeBuddy 课程的
 *      历史命名，新模块不复用。未来平台 CSS 更新后重新移植时需重跑同样两步适配）
 * 保持原生 CSS 不经 less 编译——源文件含 min()/max() 原生函数，less 3.x 会误判求值。
 * 选择器命名空间（htmlCourseDetailPage/html-course-theme/tocChapter 等）均为课程页专属，
 * 无全局污染；根容器须同时挂 htmlCourseDetailPage（CSS 变量作用域）与
 * html-course-theme（组件样式前缀）。
 */
/* ========== HTML 课程播放页 — 对齐 CodeBuddy 课程视觉风格 ========== */
/* 参考：_mod-codebuddy-course.scss */

.htmlCourseDetailPage {
  --bg: #fbfcfe;
  --bg-elev: #ffffff;
  --bg-soft: #eaf2ff;
  --border: #d8e3f5;
  --border-strong: #a8bde0;
  --text: #001533;
  --text-mute: #4a5b78;
  --text-dim: #8fa3c2;
  --accent: #0052D9;
  --accent-2: #006EFF;
  --accent-soft: rgba(0, 82, 217, 0.08);
  --serif: "Arial", "Helvetica Neue", "Noto Serif SC", "Songti SC", "Source Han Serif", STSong, SimSun, serif;
  --sans: "Arial", "Helvetica Neue", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --num: "Arial", "Helvetica Neue", sans-serif;

  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

.htmlCourseDetailPage *,
.htmlCourseDetailPage *::before,
.htmlCourseDetailPage *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ========== 主容器 ========== */
.htmlMainContainer {
  display: grid;
  grid-template-columns: 300px 1fr;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  min-height: calc(100vh - 60px);
  background: var(--bg);
}

/* ========== 左侧目录 ========== */
.htmlTocContainer {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg,
      rgba(0, 110, 255, 0.10) 0%,
      rgba(0, 110, 255, 0.05) 8%,
      rgba(241, 213, 140, 0.10) 22%,
      rgba(241, 213, 140, 0.04) 32%,
      rgba(255, 255, 255, 0) 44%),
    #ffffff;
  overflow: hidden;
  box-shadow: none;
}

/* ========== 右侧内容区 ========== */
.htmlContentContainer {
  padding: 64px 80px 0;
  box-sizing: border-box;
  width: 920px;
  /* max-width: 920px; */
  background: radial-gradient(circle at 0% 0%, rgba(0, 110, 255, 0.06) 0%, rgba(0, 110, 255, 0) 3%) no-repeat;
  overflow-y: auto;
}

/* ========== 目录树组件 ========== */
.htmlToc {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.htmlToc .htmlTocHeader {
  flex: 0 0 auto;
  padding: 36px 18px 18px 32px;
  background: transparent;
  border-bottom: none;
}

.htmlToc .htmlTocHeader h3 {
  margin: 0;
  font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "PingFang SC", "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: 0.02em;
}

.htmlToc .htmlTocContent {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 18px 36px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 28px);
}

.htmlToc .htmlTocContent::-webkit-scrollbar {
  width: 6px;
}

.htmlToc .htmlTocContent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.25s;
}

.htmlToc .htmlTocContent:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 21, 51, 0.12);
}

/* ========== 目录章节（对标 toc-l1） ========== */
.tocChapter {
  margin: 0;
  border-bottom: none;
}

.tocChapter .tocChapterHeader {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 4px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  border-left: none;
  transition: background 0.15s;
}

.tocChapter .tocChapterHeader:hover {
  background: var(--bg-soft);
}

.tocChapter .tocChapterHeader.tocChapterHeaderActive {
  background: var(--bg-soft);
  border-left: none;
  padding-left: 4px;
}

.tocChapter .tocChapterHeader.tocChapterHeaderActive .tocChapterName {
  color: var(--accent);
  font-weight: 600;
}

.tocChapter .tocChapterHeader .tocChapterTitle {
  display: flex;
  align-items: baseline;
  flex: 1;
  min-width: 0;
  gap: 10px;
}

.tocChapter .tocChapterHeader .tocChapterArrow {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 0;
  color: var(--text-dim);
  font-size: 12px;
  flex-shrink: 0;
  font-family: var(--num);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  min-width: 27px;
  letter-spacing: 0.02em;
  position: relative;
  top: 1px;
}

.tocChapter .tocChapterHeader.tocChapterHeaderActive .tocChapterArrow {
  color: var(--accent);
}

.tocChapter .tocChapterHeader .tocChapterName {
  flex: 1;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tocChapter .tocChapterHeader .tocChapterStats {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ========== 目录小节（对标 toc-l2） ========== */
.tocLessons {
  padding: 4px 0 14px 30px;
  background-color: transparent;
}

.tocLessons .tocLesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--text-mute);
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--sans);
  transition: all 0.12s;
  letter-spacing: 0.02em;
}

.tocLessons .tocLesson:hover {
  color: var(--text);
  background: var(--bg-soft);
}

.tocLessons .tocLesson.tocLessonActive {
  color: var(--accent);
  font-weight: 700;
  background: transparent;
}

.tocLessons .tocLesson.tocLessonCompleted {
  color: var(--text-mute);
}

.tocLessons .tocLesson .tocLessonIcon {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-elev);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  position: relative;
  margin-right: 0;
  font-size: 0;
  color: transparent;
}

.tocLessons .tocLesson .tocLessonIcon:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tocLessons .tocLesson.tocLessonCompleted .tocLessonIcon {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 82, 217, 0.28);
  color: transparent;
}

.tocLessons .tocLesson.tocLessonCompleted .tocLessonIcon::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  transform-origin: center;
  display: block;
}

.tocLessons .tocLesson .tocLessonName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== 内容区域 ========== */
.htmlContentWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

.htmlContentWrapper .htmlContentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  margin-bottom: 44px;
}

.htmlContentWrapper .htmlContentHeader h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--text);
}

.htmlContentWrapper .htmlContentHeader .htmlLessonCount {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.14em;
}

.htmlContentWrapper .htmlContentBody {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: transparent;
}
.htmlMainContainer.html-course-theme ol li {
  list-style-type: decimal;
  list-style-position: inside;
}

.htmlMainContainer.html-course-theme ul li {
  list-style-type: disc;
  list-style-position: inside;
}

.htmlContentWrapper .htmlContentBody::-webkit-scrollbar {
  width: 6px;
}

.htmlContentWrapper .htmlContentBody::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.25s;
}

.htmlContentWrapper .htmlContentBody:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 21, 51, 0.12);
}

.htmlContentWrapper .htmlContentLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* ========== 章节内容 ========== */
.htmlChapterWrapper .htmlChapterTitle {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0 0 44px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 96px;
}

.htmlChapterWrapper .htmlLessonsContainer {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.htmlChapterWrapper .htmlLesson {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-left: 3px solid var(--accent);
  padding-left: 28px;
  transition: none;
}

.htmlChapterWrapper .htmlLesson:hover {
  background: transparent;
}

.htmlChapterWrapper .htmlLesson .htmlLessonTitle {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
  margin: 0 0 16px;
  padding: 0;
  border-bottom: none;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-mute);
  font-family: var(--sans);
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent p {
  margin: 0 0 18px;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent p:first-child {
  margin-top: 0;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent p:last-child {
  margin-bottom: 0;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent strong {
  color: var(--text);
  font-weight: 700;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent a:hover {
  border-bottom-color: var(--accent);
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent ul,
.htmlChapterWrapper .htmlLesson .htmlLessonContent ol {
  /* padding-left: 22px; */
  margin-bottom: 18px;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent li {
  margin-bottom: 9px;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent li::marker {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1em;
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}

.htmlChapterWrapper .htmlLesson .htmlLessonContent mark {
  background: linear-gradient(transparent 62%, rgba(0, 82, 217, 0.18) 62%);
  color: var(--text);
  padding: 0 2px;
  font-weight: 700;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .htmlMainContainer {
    grid-template-columns: 1fr;
  }

  .htmlMainContainer .htmlTocContainer {
    display: none;
  }

  .htmlContentContainer {
    padding: 32px 16px 0;
    width: 100%;
    max-width: 100%;
  }

  .htmlContentWrapper .htmlContentHeader {
    padding: 0 0 20px;
    margin-bottom: 24px;
  }

  .htmlContentWrapper .htmlContentHeader h2 {
    font-size: 28px;
  }

  .htmlChapterWrapper .htmlChapterTitle {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .htmlChapterWrapper .htmlLessonsContainer {
    gap: 24px;
  }

  .htmlChapterWrapper .htmlLesson {
    padding-left: 16px;
  }

  .htmlChapterWrapper .htmlLesson .htmlLessonTitle {
    font-size: 18px;
  }

  .htmlChapterWrapper .htmlLesson .htmlLessonContent {
    font-size: 14px;
  }
}

/* ========== CodeBuddy 课程样式（html-course-theme 命名空间） ========== */
/* 来源：college/src/projects/training/pages/Detail4/css/_html-course-theme.scss */
.html-course-theme{--bg:#fbfcfe;--bg-elev:#ffffff;--bg-soft:#eaf2ff;--border:#d8e3f5;--border-strong:#a8bde0;--text:#001533;--text-mute:#4a5b78;--text-dim:#8fa3c2;--accent:#0052D9;--accent-2:#006EFF;--accent-soft:rgba(0,82,217,0.08);--amber-warm:#FFB020;--shadow-sm:0 1px 3px rgba(0,82,217,0.06);--shadow-md:0 4px 16px rgba(0,82,217,0.08);--ink:#001533;--rule:#E8EEF7;--text-2:#4A5B78;--text-3:#8FA3C2;--serif:"Arial","Helvetica Neue","Noto Serif SC","Songti SC","Source Han Serif",STSong,SimSun,serif;--sans:"Arial","Helvetica Neue",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;--num:"Arial","Helvetica Neue",sans-serif;font-family:"Arial","Helvetica Neue",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15.5px;line-height:1.85;-webkit-font-smoothing:antialiased;color:#001533;background:#fbfcfe}
.html-course-theme .layout{display:grid;grid-template-columns:300px 1fr;max-width:1320px;margin:0 auto}
.html-course-theme .sidebar{position:sticky;top:54px;height:calc(100vh - 64px);padding:0;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(0,110,255,0.10) 0%,rgba(0,110,255,0.05) 8%,rgba(241,213,140,0.10) 22%,rgba(241,213,140,0.04) 32%,rgba(255,255,255,0) 44%),#ffffff;display:flex;flex-direction:column;overflow:hidden}
.html-course-theme .sidebar-head{flex:0 0 auto;padding:36px 18px 18px 32px;background:transparent}
.html-course-theme .sidebar-scroll{flex:1 1 auto;overflow-y:auto;padding:4px 18px 36px 32px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#ffffff 28px)}
.html-course-theme .sidebar-scroll::-webkit-scrollbar{width:6px}
.html-course-theme .sidebar-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;transition:background .25s}
.html-course-theme .sidebar-scroll:hover::-webkit-scrollbar-thumb{background:rgba(0,21,51,0.12)}
.html-course-theme .sidebar-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
.html-course-theme .sidebar-scroll:hover{scrollbar-color:rgba(0,21,51,0.12) transparent}
.html-course-theme .sidebar-course{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.html-course-theme .sidebar-course .course-name{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","PingFang SC","Helvetica Neue",sans-serif;font-weight:700;font-size:20px;line-height:1.35;color:var(--text);letter-spacing:0.02em}
.html-course-theme .sidebar-course .course-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.3em;color:var(--text-mute);text-transform:uppercase;margin-top:8px}
.html-course-theme .sidebar-course .course-subtitle{font-family:var(--mono);font-size:10px;letter-spacing:0.3em;color:var(--text-mute);text-transform:uppercase;margin-top:8px;line-height:18.5px;}
.html-course-theme .sidebar-title{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--accent);margin-bottom:14px;letter-spacing:0.08em}
.html-course-theme .sidebar-stats{font-family:var(--mono);font-size:11px;color:var(--text-mute);padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;margin-bottom:18px;letter-spacing:0.08em}
.html-course-theme .sidebar-stats strong{color:var(--text);font-weight:700}
.html-course-theme .content{padding:64px 80px 0;min-width:720px;max-width:920px;background:radial-gradient(circle at 0% 0%,rgba(0,110,255,0.06) 0%,rgba(0,110,255,0) 3%);background-repeat:no-repeat}
.html-course-theme .toc-l1{display:flex;align-items:baseline;gap:10px;padding:12px 4px;cursor:pointer;user-select:none;border-radius:6px;transition:background .15s}
.html-course-theme .toc-l1:hover{background:var(--bg-soft)}
.html-course-theme .toc-l1 .chev{display:none}
.html-course-theme .toc-num{font-family:var(--num);font-weight:700;font-size:20px;line-height:1;color:var(--text);min-width:27px;letter-spacing:0.02em;font-variant-numeric:tabular-nums;flex-shrink:0;position:relative;top:1px}
.html-course-theme .toc-group.current .toc-num{color:var(--accent)}
.html-course-theme .toc-l1-title{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.4;color:var(--text);letter-spacing:0.02em;flex:1}
.html-course-theme .toc-group.current .toc-l1-title{color:var(--accent)}
.html-course-theme .toc-children{padding:4px 0 14px 30px}
.html-course-theme .toc-l2{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:14px;color:var(--text-mute);text-decoration:none;border-radius:6px;font-family:var(--sans);transition:all .12s;letter-spacing:0.02em}
.html-course-theme .toc-l2:hover{color:var(--text);background:var(--bg-soft)}
.html-course-theme .toc-l2.active{color:var(--accent);font-weight:700}
.html-course-theme .toc-check{width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:50%;background:var(--bg-elev);flex-shrink:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.html-course-theme .toc-check:hover{border-color:var(--accent);background:var(--accent-soft)}
.html-course-theme .toc-check.done{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 6px rgba(0,82,217,0.28)}
.html-course-theme .toc-check.done::after{content:"";display:block;width:8px;height:4px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) translate(1px,-1px);transform-origin:center;top: auto;left: auto;}
.html-course-theme .toc-l2-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.html-course-theme .chapter{display:none}
.html-course-theme .chapter.active{display:block}
.html-course-theme .kicker-group{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-left:14px;border-left:3px solid var(--accent)}
/* 章首眉无色条形态（同步 skill preview.css PLATFORM 段 2026-08-31）：章号（section 第一个
   子元素的眉组）无色条纯文字，小节眉（h3 前）保留默认左色条——两种形态按位置分离 */
.html-course-theme section > .kicker-group:first-child{border-left:none;padding-left:0;margin-bottom:0}
.html-course-theme .kicker{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","PingFang SC","Helvetica Neue",sans-serif;font-size:18px;letter-spacing:0.3em;color:var(--text);font-weight:700;margin:0}
/* kicker sec-num 徽章（契约 v3.12.1，同步自 skill supplement.css 2026-08-28：编号徽章视觉，不再裸承 .kicker 大字） */
.html-course-theme .kicker.sec-num{display:inline-block;background:var(--accent);color:#fff;font-family:var(--num);font-weight:800;font-size:13px;padding:5px 14px;border-radius:6px;letter-spacing:0.04em;margin:0}
.html-course-theme .kicker-meta{display:none}
.html-course-theme h2.sec-title{font-family:var(--serif);font-weight:900;font-size:48px;line-height:1.3;letter-spacing:0.04em;margin:14px 0 14px;scroll-margin-top:96px;color:var(--text)}
.html-course-theme .kicker-group+h2.sec-title{margin-top:18px}
.html-course-theme h2 .sec-tag{display:block;font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","PingFang SC","Helvetica Neue",sans-serif;font-size:14px;letter-spacing:0.32em;color:var(--accent);font-weight:700;margin-bottom:18px}
.html-course-theme h2.sec-title .sec-tag-num{display:inline-block;font-family:var(--serif);font-size:0.55em;font-weight:900;letter-spacing:0.04em;color:var(--text);margin:0 26px 0 0;vertical-align:0.45em}
/* sub-sub 小节内知识点标题（同步 skill preview.css 主段 2026-08-31：回归 20px/block 单一真值，
   原 26px/flex 为已废弃的「三层折叠接位」规格，随提级规则一并移除；层级链 72章→16节→28知识点→24组件） */
.html-course-theme h3.sub-title.sub-sub{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3;margin:28px 0 10px;scroll-margin-top:96px;letter-spacing:0.02em;color:var(--text);display:block;gap:0}
/* ⚠️ 已移除（同步 skill 2026-08-31）：三层折叠课小节标题视觉提级规则
   （h3.sub-title:not(.sub-sub) 提为 48px/900）——全局生效会把所有课程的小节标题渲染成
   与章标题 h2.sec-title 同级，层级感消失，违背层级定义（h3.sub-title = L3 子节）。 */
/* h4 步骤/练习/FAQ/小结等容器内标题（同步 skill preview.css 主段 2026-08-31 完整规格） */
.html-course-theme h4{font-family:var(--serif);font-weight:700;font-size:18px;margin:24px 0 10px;letter-spacing:0.02em;color:var(--text);line-height:1.35}
.html-course-theme p{margin-bottom:18px;font-family:var(--sans)}
.html-course-theme .chapter-summary-title{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.4;margin:40px 0 14px;color:var(--text);letter-spacing:0.02em}
.html-course-theme ul,.html-course-theme ol{margin-bottom:18px}
.html-course-theme li{margin-bottom:9px}
.html-course-theme li::marker{color:var(--accent);font-weight:700}
.html-course-theme strong{font-weight:700;color:var(--text)}
.html-course-theme code{font-family:var(--mono);font-size:0.88em;background:var(--bg-soft);padding:1px 6px;border-radius:3px;color:var(--accent)}
.html-course-theme code a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.html-course-theme code a:hover{border-bottom-color:var(--accent)}
/* 正文链接基础规则（对齐 skill preview.css:173-176，2026-09-03 ADP 内联版形态回归补录）：
   源稿 a 继承正文色、无下划线、hover 才显下边框——此前平台无 a 基础规则，
   浏览器默认「蓝字+下划线」与正文割裂（源稿配套规则漏收录）；特异性低于
   chapter-footer/cf-* 等宿主规则，不侵入宿主 UI */
.html-course-theme a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.html-course-theme a:hover{border-bottom-color:var(--accent)}
.html-course-theme h1.page-title{font-family:var(--serif);font-weight:900;font-size:78px;line-height:1.18;letter-spacing:0.04em;margin-bottom:14px;color:var(--text)}
.html-course-theme h1.page-title em{color:var(--accent);font-style:normal;font-weight:900}
.html-course-theme .subtitle-cn{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--text-mute);margin-bottom:28px;letter-spacing:0.06em;line-height:1.5}
.html-course-theme .standfirst{font-family:var(--serif);font-size:22px;line-height:1.8;color:var(--text);font-weight:700;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.html-course-theme .standfirst .hl{font-style:normal;color:var(--accent);font-weight:900}
.html-course-theme .byline{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","PingFang SC","Helvetica Neue",sans-serif;font-size:13px;color:var(--text-dim);letter-spacing:0.14em;display:flex;gap:24px;margin-bottom:44px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.html-course-theme .byline strong{color:var(--text);font-weight:700;margin:0 2px}
.html-course-theme .chapter-meta{background:linear-gradient(135deg,rgba(26,78,216,0.04) 0%,rgba(26,78,216,0.01) 100%);border:1px solid var(--border);border-left:3px solid var(--accent);padding:22px 26px;margin:20px 0 36px;border-radius:0 6px 6px 0}
/* 章概览内正文段落（对齐 skill preview.css:197）：此前缺失致章内 p 落到通用段落间距 */
.html-course-theme .chapter-meta p{font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--text);margin:0}
.html-course-theme .chapter-meta-label{font-family:var(--serif);font-size:12px;letter-spacing:0.22em;color:var(--accent);font-weight:700;margin-bottom:10px;text-transform:uppercase}
.html-course-theme .chapter-meta-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.html-course-theme .chapter-meta-list li{font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--text);padding-left:18px;position:relative}
.html-course-theme .chapter-meta-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-family:"Arial",sans-serif;font-size:13px}
/* 抑制 list marker，消除与 ::before 装饰符号（✓/•）并存的「双标记」。
   注：li 的 list-style:none 可能被外部样式（预览端注入）改写，而 ::marker 直接清空 content
   不依赖 list-style，是兜底防线。emoji-card-attrs 的 li 本身无 list-style 声明，风险更高。 */
.html-course-theme .chapter-meta-list li::marker,
.html-course-theme .emoji-card-attrs li::marker{content:none}
/* h3.sub-title 小节标题（对齐 skill preview.css 主段真值 2026-08-31：margin 16px + flex
   布局为下方编号芯片承载——margin-top 16px 为产品确认值，原 44px 层级链口径已废弃） */
.html-course-theme h3.sub-title{font-family:var(--serif);font-weight:700;font-size:26px;margin:16px 0 16px;scroll-margin-top:96px;letter-spacing:0.04em;color:var(--text);line-height:1.3;display:flex;align-items:center;gap:14px}
/* 小节标题编号芯片（同步 skill preview.css 2026-08-31 新增）：内容侧裸 span 编号
   （<h3 class="sub-title"><span>1.1</span>标题</h3>，migrate v2.26 pushSection 保留的结构）
   渲染为芯片；不占用类名（sub-num 是平台保留类名，内容侧禁写），仅按结构位置识别 */
.html-course-theme h3.sub-title:not(.sub-sub) > span:first-child{flex:none;margin:0;padding:5px 10px;border-radius:4px;background:var(--accent);color:#fff;font:700 13px/1 var(--mono);letter-spacing:.06em}
.html-course-theme p.lead{font-family:var(--serif);font-size:19px;line-height:1.85}
.html-course-theme mark{background:linear-gradient(transparent 62%,rgba(0,82,217,0.18) 62%);color:var(--text);padding:0 2px;font-weight:700}
.html-course-theme .callout{background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--accent);padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout-title{font-family:var(--serif);font-size:13px;letter-spacing:0.2em;color:var(--accent);font-weight:700;margin-bottom:8px}
.html-course-theme .callout p{font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}
/* callout 内列表间距（对齐 skill preview.css:217）：此前缺失致提示框内 ul 用全局 padding/间距 */
.html-course-theme .callout ul{margin:10px 0 2px}
.html-course-theme .video-frame{background:#080810;border:1px solid var(--border);border-radius:6px;position:relative;overflow:hidden;margin:20px 0 30px;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 8px 24px rgba(0,82,217,0.18);text-decoration:none;display:block}
.html-course-theme .video-frame video{width:100%;height:100%;object-fit:cover;display:block}
.html-course-theme .video-frame:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,82,217,0.32)}
.html-course-theme .video-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,0.45) 100%);pointer-events:none}
.html-course-theme .video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.95);box-shadow:0 8px 28px rgba(0,82,217,0.45);display:flex;align-items:center;justify-content:center;color:#080810;font-size:22px;padding-left:4px;z-index:2;transition:transform .2s ease}
.html-course-theme .video-frame:hover .video-play{transform:translate(-50%,-50%) scale(1.06)}
.html-course-theme .video-meta{position:absolute;left:18px;bottom:14px;z-index:2;font-family:var(--serif);font-size:13px;color:#f5f7fc;letter-spacing:0.06em;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.html-course-theme .video-badge{position:absolute;right:14px;top:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:#f5f7fc;background:rgba(0,82,217,0.65);padding:4px 10px;border-radius:4px;backdrop-filter:blur(4px)}
.html-course-theme .video-cap{font-family:var(--serif);font-size:13px;color:var(--text-dim);margin-bottom:26px;padding-top:10px;letter-spacing:0.06em}
.html-course-theme .scenes{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 30px;align-items:stretch}
.html-course-theme .scene{flex:0 0 calc(50% - 8px);box-sizing:border-box;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:22px 24px;transition:all .15s;display:flex;flex-direction:column;min-height:260px}
.html-course-theme .scenes-tight{margin-bottom:10px}
.html-course-theme .shot-trio-attached{margin-top:10px}
.html-course-theme .scene-more{flex:0 0 calc(50% - 8px);box-sizing:border-box;background:transparent;border:1px dashed var(--border-strong);border-radius:8px;padding:22px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;text-align:center;color:var(--text-dim);transition:all .15s}
.html-course-theme .scene-more-num{font-family:var(--serif);font-size:48px;color:var(--accent);font-weight:300;line-height:1;margin-bottom:14px}
.html-course-theme .scene-more-text{font-size:13px;line-height:1.7;color:var(--text-mute);max-width:220px}
.html-course-theme .scene-more:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 8px 28px rgba(0,82,217,0.14)}
.html-course-theme .scene:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 8px 28px rgba(0,82,217,0.14)}
.html-course-theme .scene-tag{font-family:var(--serif);font-size:11px;letter-spacing:0.2em;color:var(--accent);font-weight:700;margin-bottom:10px;display:block;opacity:.85}
.html-course-theme .scene-title{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.3;margin-bottom:10px;letter-spacing:0.01em;color:var(--text)}
.html-course-theme .scene-title::after{content:"";display:block;width:28px;height:2px;background:var(--accent);margin-top:10px;border-radius:2px}
.html-course-theme .scene-list{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:var(--text-mute);line-height:1.85}
.html-course-theme .scene-list li{margin-bottom:2px}
.html-course-theme .scene-desc{font-size:13.5px;color:var(--text-mute);line-height:1.7}
.html-course-theme .scenes-3col .scene,.html-course-theme .scenes-3col .scene-more{flex:0 0 calc(33.333% - 11px)}
.html-course-theme .scenes-carousel{margin:24px 0 30px}
.html-course-theme .scenes-viewport{overflow:hidden;border-radius:8px}
.html-course-theme .scenes-track{display:flex;transition:transform .4s cubic-bezier(.65,.05,.36,1)}
.html-course-theme .scenes-page{flex:0 0 100%;min-width:0}
.html-course-theme .scenes-page .scenes{margin:0}
.html-course-theme .scenes-page{min-height:300px}
.html-course-theme img{max-width:100%;height:auto;display:block;border-radius:6px}
.html-course-theme .scenes-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.html-course-theme .scenes-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text-mute);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--sans)}
.html-course-theme .scenes-arrow:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.html-course-theme .scenes-arrow:disabled{opacity:0.35;cursor:not-allowed;border-color:var(--border-strong);color:var(--text-mute);background:var(--bg-elev)}
.html-course-theme .scenes-dots{display:flex;gap:8px}
.html-course-theme .scenes-dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);cursor:pointer;transition:background .15s,transform .15s}
.html-course-theme .scenes-dot.active{background:var(--accent);transform:scale(1.2)}
.html-course-theme .pull-quote{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.55;color:var(--text);margin:32px 0;padding:22px 0 22px 28px;border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);position:relative;letter-spacing:0.02em}
.html-course-theme .pull-quote::before{content:"\275D";position:absolute;left:-6px;top:14px;font-size:28px;color:rgba(0,82,217,0.35);font-family:var(--serif);line-height:1;font-weight:900}
.html-course-theme .chapter-footer{position:sticky;bottom:0;z-index:30;height:72px;margin:40px 0 0;padding:0;background:rgba(255,255,255,0.94);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.html-course-theme .chapter-footer a{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;transition:all .15s;font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",sans-serif;font-weight:700;letter-spacing:0.06em}
.html-course-theme .chapter-footer a:hover{background:var(--accent-2);box-shadow:0 6px 18px rgba(0,82,217,0.32)}
.html-course-theme .chapter-footer .cf-next:hover{transform:translateX(2px)}
.html-course-theme .chapter-footer .cf-label{font-size:14px;letter-spacing:0.18em}
.html-course-theme .chapter-footer .cf-arrow{font-size:18px;line-height:1}
.html-course-theme .chapter-footer .cf-spacer{flex:1}
.html-course-theme .fab{position:fixed;right:32px;bottom:32px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,82,217,0.32);font-size:20px;opacity:0;pointer-events:none;transform:translateY(8px);transition:all .2s;border:none}
.html-course-theme .fab.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.html-course-theme .fab:hover{background:var(--accent-2)}
.html-course-theme .toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:11px 22px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:100;font-family:var(--sans)}
.html-course-theme .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.html-course-theme .chapter-footer .cf-prev{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.html-course-theme .chapter-footer .cf-prev:hover{background:var(--accent-soft);box-shadow:none;transform:translateX(-2px)}
.html-course-theme .chapter-footer.finish .cf-next{background:var(--text);color:#fff}
.html-course-theme .chapter-footer.finish .cf-next:hover{background:var(--accent)}
.html-course-theme .step{position:relative;padding:22px 0;border-bottom:1px dashed var(--border)}
.html-course-theme .step:last-child{border-bottom:none}
.html-course-theme .step-body h4{font-family:var(--serif);font-weight:700;font-size:18px;margin-bottom:8px;letter-spacing:0.02em}
.html-course-theme .step-body p{font-size:14px;color:var(--text-mute);margin-bottom:12px}
.html-course-theme .step-num{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:0.06em;color:var(--text-dim);margin-right:10px}
.html-course-theme .shot{display:block;background:var(--bg-soft);border:1px dashed var(--border-strong);border-radius:6px;padding:28px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:0.04em}
.html-course-theme .shot-img{display:block;margin:18px 0 4px;border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 24px rgba(11,15,30,0.08);cursor:zoom-in}
.html-course-theme .shot-img img{display:block;width:100%;height:auto}
.html-course-theme .shot-img figcaption{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:0.04em;padding:8px 14px;background:var(--bg-soft);border-top:1px solid var(--border)}
.html-course-theme .shot-img.shot-mid{max-width:720px;margin-left:auto;margin-right:auto}
.html-course-theme .shot-img.shot-half{max-width:520px;margin-left:auto;margin-right:auto}
.html-course-theme .shot-img.shot-inline{max-width:380px;margin-left:auto;margin-right:auto}
.html-course-theme .shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 4px;align-items:stretch}
.html-course-theme .shot-pair .shot-img{margin:0;height:100%;display:flex;flex-direction:column}
.html-course-theme .shot-pair .shot-img img{flex:1 1 auto;object-fit:cover}
.html-course-theme .shot-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:18px 0 4px;align-items:stretch}
.html-course-theme .shot-trio .shot-img{margin:0;display:flex;flex-direction:column}
.html-course-theme .shot-trio .shot-img img{flex:1 1 auto;object-fit:cover;min-height:0}
.html-course-theme .shot-trio .shot-img figcaption,.html-course-theme .shot-pair .shot-img figcaption{margin-top:auto}
.html-course-theme .lightbox{position:fixed;inset:0;background:rgba(8,10,20,0.92);display:none;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out;padding:40px}
.html-course-theme .lightbox.show{display:flex}
.html-course-theme .lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.html-course-theme .lightbox-close{position:absolute;top:20px;right:24px;font-size:28px;color:#fff;cursor:pointer;font-family:var(--sans);background:none;border:none;line-height:1}
.html-course-theme .skill-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:26px 30px;margin:24px 0;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.html-course-theme .skill-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:16px}
.html-course-theme .skill-icon{width:44px;height:44px;background:var(--accent-soft);color:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:20px}
.html-course-theme .skill-name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:0.04em}
.html-course-theme .skill-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.html-course-theme .skill-tag{font-family:var(--serif);font-size:11px;color:var(--text-mute);background:var(--bg-soft);padding:3px 9px;border-radius:4px;letter-spacing:0.06em}
/* ⚠️ 禁加 white-space:pre-wrap（对齐 skill preview.css:316-318，2026-09-03 ADP 事故）：
   prompt-box 内容用多个 p 分段，pre-wrap 会把 p 间 HTML 换行+缩进渲染为空行
   （段间距 52px、顶部多空行），源稿（ADP case 598）无此属性，紧凑段距才正确 */
.html-course-theme .prompt-box{position:relative;background:#001533;color:#e8f0ff;border-radius:8px;padding:18px 56px 18px 20px;margin:16px 0;font-family:var(--mono);font-size:13px;line-height:1.78;word-break:break-word}
/* prompt-box 子元素规则（对齐 skill preview.css:306-309）：此前缺失，
   致框内 p/strong/code 落到通用规则（p 间距、strong 被染强调色、code 无半透明白底） */
.html-course-theme .prompt-box p{margin:0 0 6px;font-family:var(--mono);font-size:13px;line-height:1.78;color:inherit}
.html-course-theme .prompt-box p:last-of-type{margin-bottom:0}
.html-course-theme .prompt-box strong{color:inherit;font-weight:700}
.html-course-theme .prompt-box code{background:rgba(255,255,255,0.08);color:inherit}
.html-course-theme .copy-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:#e8f0ff;font-family:var(--sans);font-size:12px;padding:5px 11px;cursor:pointer;border-radius:4px}
.html-course-theme .copy-btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.html-course-theme .copy-btn.copied{background:#16a34a;border-color:#16a34a}
.html-course-theme .case-doc{background:#fff;border:1px solid rgba(0,82,217,0.14);border-radius:12px;padding:32px 36px;margin:0 0 32px;box-shadow:0 1px 2px rgba(11,18,32,0.04),0 12px 32px rgba(11,18,32,0.08),0 24px 64px rgba(0,82,217,0.06);position:relative;overflow:hidden}
.html-course-theme .case-doc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#0052d9 0%,#4a8fff 35%,#7ab8ff 55%,#ffc24a 80%,#ffb020 100%)}
.html-course-theme .case-doc-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);background:rgba(0,82,217,0.08);padding:4px 10px;border-radius:4px;margin-bottom:14px;font-weight:700}
.html-course-theme .case-doc h4.case-doc-title{font-family:var(--serif);font-weight:800;font-size:20px;line-height:1.45;margin:0 0 14px;color:var(--text);letter-spacing:0.02em}
.html-course-theme .case-doc-meta{font-size:13.5px;line-height:1.95;color:var(--text-mute);margin:0 0 18px;padding-bottom:16px;border-bottom:1px dashed var(--border)}
.html-course-theme .case-doc-meta strong{color:var(--text);font-weight:700;margin-right:6px;letter-spacing:0.02em}
.html-course-theme .case-doc h5.case-doc-sub{font-family:var(--serif);font-weight:700;font-size:15px;margin:0 0 12px;color:var(--text);letter-spacing:0.04em}
.html-course-theme .case-doc ol,.html-course-theme .case-doc ul{padding-left:22px;margin:0;font-size:14.5px;line-height:1.85;color:var(--text)}
.html-course-theme .case-doc ol li,.html-course-theme .case-doc ul li{margin-bottom:10px}
.html-course-theme .case-doc ol li:last-child,.html-course-theme .case-doc ul li:last-child{margin-bottom:0}
.html-course-theme .case-doc ol li strong,.html-course-theme .case-doc ul li strong{color:var(--text);font-weight:700}
.html-course-theme .case-doc mark{background:linear-gradient(transparent 62%,rgba(0,82,217,0.18) 62%);color:var(--text);padding:0 2px;font-weight:700}
.html-course-theme .table-wrap{margin:24px 0 30px;overflow-x:auto;border:1px solid var(--border);border-radius:6px;background:var(--bg-elev)}
.html-course-theme .table-wrap table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;line-height:1.7;min-width:680px}
.html-course-theme .table-wrap th{background:var(--bg-soft);font-weight:700;font-size:13px;letter-spacing:0.04em;color:var(--text);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-strong)}
.html-course-theme .table-wrap td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;word-break:normal;overflow-wrap:break-word}
/* 首列：对齐 skill 基准 preview.css:329 的 min-width:7.5em（可换行）。
   此前为 white-space:nowrap，会撑爆长段落单元格把相邻列挤出可视区
   （parallel-table 的 ADP 五种范式表右上角缺失即由此）。 */
.html-course-theme .table-wrap th:first-child,.html-course-theme .table-wrap td:first-child{min-width:7.5em}
/* 表格单元格内有序列表缩进（对齐 skill preview.css:331）：此前缺失致 ol 用全局 padding */
.html-course-theme .table-wrap td ol{margin:0;padding-left:20px}
.html-course-theme .table-wrap.table-wrap-wrap th:first-child,.html-course-theme .table-wrap.table-wrap-wrap td:first-child{white-space:normal}
.html-course-theme .table-wrap tr:last-child td{border-bottom:none}
.html-course-theme .table-wrap tr:hover td{background:rgba(0,82,217,0.03)}
.html-course-theme .table-wrap code{font-family:var(--mono);font-size:0.85em;background:var(--bg-soft);padding:1px 5px;border-radius:3px;color:var(--accent)}
/* ========== 完整版课程表格变体（data-table / kp-table / tip-table / comp-table） ==========
   来源：html-course-developer-demo/htmlNew 内联样式；与轻量版 .table-wrap 为不同模块，保留原 class 名称 */
/* 第一列（术语列）章节色加粗 */
.html-course-theme table tbody td:first-child strong,
.html-course-theme table.kp-table td:first-child,
.html-course-theme table.data-table td:first-child strong{
  color:var(--ch-accent,var(--accent));
}
/* 表格字号基线（统一兜底 · fix oversize 表格） */
.html-course-theme .data-table,
.html-course-theme .kp-table,
.html-course-theme .tip-table,
.html-course-theme .comp-table,
.html-course-theme table.data-table,
.html-course-theme table.kp-table,
.html-course-theme table.tip-table,
.html-course-theme table.comp-table{
  font-size:13.5px;line-height:1.65;table-layout:auto;width:100%;border-collapse:collapse;margin:20px 0 24px;
}
.html-course-theme .data-table thead th,
.html-course-theme .kp-table thead th,
.html-course-theme .tip-table thead th,
.html-course-theme .comp-table thead th{
  font-size:12.5px;font-weight:700;letter-spacing:0.02em;padding:10px 14px;text-align:left;
  color:var(--accent,#0052D9);background:var(--bg-soft,#F5F7FB);border-bottom:2px solid var(--border,#D6DEEC);
}
.html-course-theme .data-table tbody td,
.html-course-theme .kp-table tbody td,
.html-course-theme .tip-table tbody td,
.html-course-theme .comp-table tbody td{
  font-size:13.5px;padding:10px 14px;vertical-align:top;border-bottom:1px solid var(--rule,#E8EEF7);
}
.html-course-theme .data-table tbody td strong,
.html-course-theme .kp-table tbody td strong,
.html-course-theme .tip-table tbody td strong,
.html-course-theme .comp-table tbody td strong{
  font-size:inherit;font-weight:700;
}
.html-course-theme .data-table tbody td .hl,
.html-course-theme .kp-table tbody td .hl,
.html-course-theme .tip-table tbody td .hl,
.html-course-theme .comp-table tbody td .hl{
  font-size:11.5px;display:inline-block;padding:1px 6px;margin-left:4px;border-radius:3px;
  background:rgba(0,82,217,0.10);color:var(--accent,#0052D9);letter-spacing:0.03em;
}
/* 手机端进一步紧凑 */
@media (max-width:720px){
  .html-course-theme .data-table,
  .html-course-theme .kp-table,
  .html-course-theme .tip-table,
  .html-course-theme .comp-table{
    font-size:12.5px;
  }
  .html-course-theme .data-table tbody td,
  .html-course-theme .kp-table tbody td,
  .html-course-theme .tip-table tbody td,
  .html-course-theme .comp-table tbody td{
    font-size:12.5px;padding:8px 10px;
  }
  .html-course-theme .data-table thead th,
  .html-course-theme .kp-table thead th,
  .html-course-theme .tip-table thead th,
  .html-course-theme .comp-table thead th{
    font-size:11.5px;padding:8px 10px;
  }
}
/* 视频默认高度 448px，避免加载后 layout shift */
.html-course-theme .video-frame,.html-course-theme video{height:448px}
@media(max-width:960px){.html-course-theme .layout{grid-template-columns:1fr}.html-course-theme .sidebar{display:none}.html-course-theme .content{padding:40px 22px}.html-course-theme h1.page-title{font-size:52px}.html-course-theme h2.sec-title{font-size:34px}.html-course-theme .scenes .scene,.html-course-theme .scenes .scene-more,.html-course-theme .scenes-3col .scene,.html-course-theme .scenes-3col .scene-more{flex:0 0 100%}}

/* ========== 完整版课程新模块样式（quiz / recap / tip-card / kp-card / vpc / svg-figure 等） ==========
   来源：html-course-developer-demo/htmlNew 内联样式；与轻量版为不同模块，保留原 class 名称，统一命名空间到 .html-course-theme */
.html-course-theme .toc-group.current .toc-num {color:var(--accent)}
.html-course-theme .toc-group.current .toc-l1-title {color:var(--accent)}
.html-course-theme .kicker-meta {display:none}
.html-course-theme h2 .sec-tag {display:block;font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","PingFang SC","Helvetica Neue",sans-serif;font-size:14px;letter-spacing:0.32em;
    color:var(--accent);font-weight:700;margin-bottom:18px;}
.html-course-theme .figure-svg {margin:32px 0;padding:28px 22px 18px;background:#fff;border:1px solid #e3eaf6;border-radius:8px;box-shadow:0 1px 2px rgba(0,82,217,.04)}
.html-course-theme .figure-svg svg {display:block;margin:0 auto;max-width:100%;height:auto}
.html-course-theme .figure-svg .figure-cap {margin-top:18px;padding-top:14px;border-top:1px solid #eef2f9;font-family:var(--sans);font-size:13px;color:var(--text-3);text-align:center;letter-spacing:.02em;line-height:1.7}
.html-course-theme .figure-svg .figure-cap b {color:var(--text);font-weight:600;letter-spacing:.04em}
.html-course-theme .figure-svg.zoomable {cursor:zoom-in}
.html-course-theme .figure-svg.zoomable:hover {border-color:var(--accent);box-shadow:0 4px 14px rgba(0,82,217,.10)}
.html-course-theme .figure-svg .zoom-hint {position:absolute;top:14px;right:16px;font-family:var(--sans);font-size:11px;color:var(--text-3);letter-spacing:.06em;opacity:0;transition:opacity .2s}
.html-course-theme .figure-svg.zoomable {position:relative}
.html-course-theme .figure-svg.zoomable:hover .zoom-hint {opacity:1}
.html-course-theme .lightbox-stage {width:min(1400px,94vw);max-height:92vh;background:#fff;border-radius:8px;padding:38px 36px 24px;box-shadow:0 20px 60px rgba(0,21,51,.5);overflow:auto;cursor:default;display:flex;flex-direction:column;align-items:stretch}
.html-course-theme .lightbox-stage svg {display:block;width:100%;height:auto;max-height:78vh;margin:0 auto;flex:1 1 auto}
.html-course-theme .quiz {margin:36px 0 28px;padding:24px 26px 22px;background:#fff;border:1px solid #e3eaf6;border-left:3px solid var(--accent);border-radius:6px}
.html-course-theme .quiz-head {display:flex;align-items:baseline;gap:10px;margin-bottom:12px;font-family:var(--sans)}
.html-course-theme .quiz-tag {display:inline-block;font-size:11px;padding:2px 9px;background:var(--accent);color:#fff;border-radius:3px;letter-spacing:.1em;font-weight:500}
.html-course-theme .quiz-num {font-size:13px;color:var(--text-3);letter-spacing:.06em}
.html-course-theme .quiz-q {font-family:var(--sans);font-size:16px;color:var(--text);line-height:1.75;margin:6px 0 18px;font-weight:500}
.html-course-theme .quiz-options {list-style:none;padding:0;margin:0 0 16px}
.html-course-theme .quiz-options li {margin:0 0 9px;list-style:none;list-style-type:none;list-style-image:none}
.html-course-theme .quiz-options li::marker {content:"";display:none}
.html-course-theme .quiz-opt {display:flex;align-items:flex-start;gap:12px;padding:11px 16px;background:#fbfcfe;border:1px solid #e3eaf6;border-radius:5px;cursor:pointer;font-family:var(--sans);font-size:14.5px;color:var(--text);line-height:1.7;transition:all .15s;width:100%;text-align:left}
.html-course-theme .quiz-opt:hover:not(:disabled) {background:#f4f7fc;border-color:var(--accent)}
.html-course-theme .quiz-opt:disabled {cursor:default}
.html-course-theme .quiz-opt .opt-letter {flex:0 0 22px;width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid #c5d2e6;color:var(--text-2);font-family:var(--mono);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px;letter-spacing:0}
.html-course-theme .quiz-opt.correct {background:#eaf2ff !important;border-color:var(--accent) !important}
.html-course-theme .quiz-opt.correct .opt-letter {background:var(--accent);border-color:var(--accent);color:#fff}
.html-course-theme .quiz-opt.correct:after {content:"\2713";margin-left:auto;color:var(--accent);font-weight:600;font-size:16px}
/* wrong 带 !important（对齐 skill preview.css:235）：.quiz-opt:hover:not(:disabled) 特异性更高，
   无 !important 时 hover 灰底会盖掉错项红底——真值源以 !important 保判题视觉稳定 */
.html-course-theme .quiz-opt.wrong {background:#f5f0ee !important;border-color:#b06a52 !important;color:#7a4a38}
.html-course-theme .quiz-opt.wrong .opt-letter {background:#b06a52;border-color:#b06a52;color:#fff}
.html-course-theme .quiz-opt.wrong:after {content:"\2715";margin-left:auto;color:#b06a52;font-weight:600;font-size:16px}
/* selected 点击项（契约 v3.16.0 三个判题状态类之一，同步 skill preview.css 2026-08-31：
   correct/wrong 承载对错视觉，selected 仅描边标记「本次点击项」） */
.html-course-theme .quiz-opt.selected {outline:2px solid var(--accent);outline-offset:1px}
/* quiz-answer 与 quiz-feedback 同语义、形态一致（契约 v3.16.0 二者均入白名单 interactive 组，
   前者常见于简答/填空类反馈容器）——共用规则，缺则该类反馈区答案初始裸露 */
/* 严格对齐 skill preview.css（skill 只有 6 个属性，无文字属性——文字色/字体靠继承） */
.html-course-theme .quiz-feedback, .html-course-theme .quiz-answer {display:none;margin-top:14px;padding:14px 16px;background:#fafcff;border-left:3px solid var(--accent);border-radius:0 4px 4px 0}
.html-course-theme .quiz-feedback.show, .html-course-theme .quiz-answer.show {display:block}
.html-course-theme .quiz-feedback b, .html-course-theme .quiz-answer b {color:var(--accent);font-weight:600;margin-right:6px}
.html-course-theme .glossary-section .kicker-meta {font-size:12px;color:var(--text-dim);letter-spacing:.18em;margin-top:4px;text-transform:uppercase}
.html-course-theme html[data-lang="en"] .figure-svg svg text.lang-zh-text, .html-course-theme html[data-lang="en"] .lightbox-stage svg text.lang-zh-text {display: none;}
.html-course-theme .figure-svg svg .lang-en, .html-course-theme .lightbox-stage svg .lang-en {display: none;}
.html-course-theme html[data-lang="en"] .figure-svg svg .lang-zh, .html-course-theme html[data-lang="en"] .lightbox-stage svg .lang-zh {display: none;}
.html-course-theme html[data-lang="en"] .figure-svg svg .lang-en, .html-course-theme html[data-lang="en"] .lightbox-stage svg .lang-en {display: inline;}
.html-course-theme .ring-progress {display:flex;align-items:center;gap:14px;padding:14px 18px 12px;border-bottom:1px solid rgba(0,82,217,0.08)}
.html-course-theme .ring-progress svg {flex:0 0 auto}
.html-course-theme .ring-text {display:flex;flex-direction:column}
.html-course-theme .ring-text strong {font:600 17px/1 var(--sans);color:#0052D9;letter-spacing:0.02em}
.html-course-theme .ring-text span {font:11px var(--sans);color:#5A7080;letter-spacing:0.06em;margin-top:3px}
.html-course-theme .quiz-opt.wrong {animation:quizShake 0.32s}
.html-course-theme .kp-card {margin:20px 0;padding:14px 20px;background:#F0F5FF;border-left:4px solid #0052D9;border-radius:4px}
.html-course-theme .kp-card-title {font:600 12px/1 var(--sans);color:#0052D9;letter-spacing:0.12em;margin:0 0 8px;text-transform:uppercase}
.html-course-theme .kp-card-body {font:13.5px/1.78 var(--sans);color:#0A1A2C;margin:0}
.html-course-theme .kp-card-body strong {color:#0052D9}
.html-course-theme .kp-card-body code {background:rgba(0,82,217,0.08);padding:1px 5px;border-radius:2px;font-size:12.5px}
.html-course-theme .tip-card {margin:20px 0;padding:14px 20px 14px 50px;background:#FFFBEB;border:1px solid #FFE8A0;border-left:4px solid #FFB020;border-radius:4px;position:relative}
.html-course-theme .tip-card::before {content:"\1F4A1";position:absolute;left:16px;top:14px;font-size:20px}
.html-course-theme .tip-card-title {font:600 12px/1 var(--sans);color:#B07000;letter-spacing:0.12em;margin:0 0 8px;text-transform:uppercase}
.html-course-theme .tip-card-body {font:13.5px/1.78 var(--sans);color:#0A1A2C;margin:0}
.html-course-theme .tip-card-body strong {color:#B07000}
.html-course-theme .tip-card-body code {background:rgba(176,112,0,0.1);padding:1px 5px;border-radius:2px;font-size:12.5px}
.html-course-theme .figure-svg {transition:transform 0.25s cubic-bezier(.4,0,.2,1),box-shadow 0.25s}
.html-course-theme .figure-svg:hover {transform:scale(1.015);box-shadow:0 8px 28px rgba(0,82,217,0.15)}
.html-course-theme html[data-theme="dark"] .topbar, .html-course-theme html[data-theme="dark"] .sidebar, .html-course-theme html[data-theme="dark"] .ring-progress, .html-course-theme html[data-theme="dark"] .quiz, .html-course-theme html[data-theme="dark"] .kp-card {background:var(--bg-elev)}
.html-course-theme html[data-theme="dark"] .tip-card {background:#2A2418}
.html-course-theme html[data-theme="dark"] .quiz {border-color:var(--border)}
.html-course-theme html[data-theme="dark"] .quiz-opt {background:var(--bg-soft);border-color:var(--border);color:var(--text)}
.html-course-theme html[data-theme="dark"] .quiz-opt:hover:not(:disabled) {background:var(--accent-soft);border-color:var(--accent)}
.html-course-theme html[data-theme="dark"] .quiz-feedback, .html-course-theme html[data-theme="dark"] .quiz-answer {background:var(--bg-soft);color:var(--text-mute)}
.html-course-theme html[data-theme="dark"] .figure-svg {background:#15203A;border:1px solid var(--border);border-radius:6px;padding:6px}
.html-course-theme html[data-theme="dark"] .kp-card-body {color:var(--text)}
.html-course-theme html[data-theme="dark"] .tip-card-body {color:var(--text)}
.html-course-theme .fab-theme {position:fixed;right:24px;bottom:84px;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:18px;cursor:pointer;box-shadow:0 4px 14px rgba(0,82,217,0.35);transition:transform 0.2s, box-shadow 0.2s;z-index:99}
.html-course-theme .fab-theme:hover {transform:scale(1.08);box-shadow:0 6px 20px rgba(0,82,217,0.5)}
.html-course-theme .mobile-menu-btn {display:none;position:fixed;left:14px;top:14px;z-index:101;width:40px;height:40px;border-radius:6px;background:var(--accent);color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(0,82,217,0.3)}
.html-course-theme .mobile-overlay {display:none;position:fixed;inset:0;background:rgba(10,26,44,0.5);backdrop-filter:blur(2px);z-index:99}
@media (max-width:960px) {
  .html-course-theme .mobile-menu-btn {display:block}
  .html-course-theme body.drawer-open .mobile-overlay {display:block}
  .html-course-theme .quiz {padding:18px 16px}
  .html-course-theme .quiz-q {font-size:14.5px}
  .html-course-theme .quiz-opt {padding:9px 12px;font-size:13.5px}
  .html-course-theme .chapter-quiz {padding:18px 20px;margin:20px 0 28px}
  .html-course-theme .quiz-options li {list-style:none;list-style-type:none;padding:12px 14px;gap:12px;font-size:14px;list-style-image:none}
  .html-course-theme .quiz-options li::marker {content:"";display:none}
  .html-course-theme .kp-card, .html-course-theme .tip-card {padding:12px 16px;margin:16px 0}
  .html-course-theme .tip-card {padding-left:42px}
  .html-course-theme .tip-card::before {left:12px;top:12px;font-size:18px}
  .html-course-theme .figure-svg {margin:18px 0}
  .html-course-theme .ring-progress {padding:12px 14px 10px;gap:10px}
  .html-course-theme .fab-theme {right:14px;bottom:74px;width:38px;height:38px;font-size:16px}
}
/* 正文两端对齐段已移除（2026-08-28 对齐 skill 预览）：本地预览正文为默认左对齐，
   justify 会造成「预览所见 ≠ 平台线上」。正文以默认左对齐呈现，两端一致。 */
.html-course-theme h2.sec-title .sec-tag {display: inline-block;
    margin-right: 14px;
    padding: 3px 10px;
    background: #0052D9;
    color: #fff;
    font-family: ui-sans-serif, system-ui;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,82,217,0.25);}
.html-course-theme section[data-chapter="ch1"]  h2.sec-title .sec-tag {background: #0052D9;}
.html-course-theme section[data-chapter="ch2"]  h2.sec-title .sec-tag {background: #1A7F8C;}
.html-course-theme section[data-chapter="ch3"]  h2.sec-title .sec-tag {background: #3FA05F;}
.html-course-theme section[data-chapter="ch4"]  h2.sec-title .sec-tag {background: #B47B00;}
.html-course-theme section[data-chapter="ch5"]  h2.sec-title .sec-tag {background: #C24A4A;}
.html-course-theme section[data-chapter="ch6"]  h2.sec-title .sec-tag {background: #5C4490;}
.html-course-theme section[data-chapter="ch7"]  h2.sec-title .sec-tag {background: #00697A;}
.html-course-theme section[data-chapter="ch8"]  h2.sec-title .sec-tag {background: #B8860B;}
.html-course-theme section[data-chapter="ch9"]  h2.sec-title .sec-tag {background: #8B3D88;}
.html-course-theme section[data-chapter="ch10"] h2.sec-title .sec-tag {background: #0052D9;}
@media (max-width: 960px) {
  .html-course-theme h2.sec-title .sec-tag {font-size: 10.5px; padding: 2px 8px; margin-right: 10px;}
}
.html-course-theme .recap-section {margin: 40px 0 32px;
    padding: 26px 28px 24px;
    background: linear-gradient(180deg, #F0F5FC 0%, #FFFFFF 60%);
    border: 1.5px solid #C5D5EE;
    border-left: 5px solid #0052D9;
    border-radius: 6px;}
.html-course-theme .recap-section-subtitle {margin: 0 0 18px !important;
    font: 13px var(--sans);
    color: #6E7E94;}
.html-course-theme .recap-card {margin: 10px 0 0;
    padding: 14px 18px;
    background: #fff;
    border-left: 3px solid #0052D9;
    border-radius: 0 4px 4px 0;
    color: #2E3D52;
    font-size: 13.5px;
    line-height: 1.85;
    box-shadow: 0 1px 3px rgba(0,82,217,0.05);}
.html-course-theme .recap-card-num {display: inline-block;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #0052D9;
    color: #fff;
    font: 700 12px var(--sans);
    text-align: center;
    line-height: 22px;
    margin-right: 10px;
    vertical-align: middle;}
.html-course-theme html[data-theme="dark"] .recap-section {background: linear-gradient(180deg, rgba(0,82,217,0.10) 0%, #1B2532 60%);
    border-color: #2D3B52;}
.html-course-theme html[data-theme="dark"] .recap-card {background: #1F2A3A; color: #C8D4E5;}
.html-course-theme .figure-svg svg .lang-tw, .html-course-theme .lightbox-stage svg .lang-tw {display: none;}
.html-course-theme html[data-lang="zh-TW"] .figure-svg svg .lang-zh, .html-course-theme html[data-lang="zh-TW"] .lightbox-stage svg .lang-zh {display: none;}
.html-course-theme html[data-lang="zh-TW"] .figure-svg svg .lang-en, .html-course-theme html[data-lang="zh-TW"] .lightbox-stage svg .lang-en {display: none;}
.html-course-theme html[data-lang="zh-TW"] .figure-svg svg .lang-tw, .html-course-theme html[data-lang="zh-TW"] .lightbox-stage svg .lang-tw {display: inline;}
.html-course-theme svg .lang-zh, .html-course-theme svg .lang-en, .html-course-theme svg .lang-tw {display: none;}
.html-course-theme [data-lang="zh-CN"] svg .lang-zh {display: inline;}
.html-course-theme [data-lang="en"]    svg .lang-en {display: inline;}
.html-course-theme [data-lang="zh-TW"] svg .lang-tw {display: inline;}
.html-course-theme section[data-chapter] h2.sec-title .sec-tag, .html-course-theme body[data-chapter]    h2.sec-title .sec-tag {background: var(--ch-accent) !important;}
.html-course-theme .reading-progress-bar {position: fixed; top: 0; left: 0;
    height: 2px; width: 0%;
    background: var(--ch-accent);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(0,82,217,0.4);}
.html-course-theme .svg-zoomable, .html-course-theme .figure-svg[onclick] {cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease;}
.html-course-theme .svg-zoomable:hover, .html-course-theme .figure-svg[onclick]:hover {transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,82,217,.12);}
.html-course-theme .svg-lightbox {position: fixed; inset: 0; background: rgba(8,13,28,.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: auto;}
.html-course-theme .svg-lightbox-inner {position: relative; max-width: 95vw; max-height: 92vh; width: 100%;}
.html-course-theme .svg-lightbox-content {background: #fff; border-radius: 12px; padding: 2.5rem 2rem 1.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.4); max-height: 88vh; overflow: auto;}
.html-course-theme .svg-lightbox-content svg {width: 100%; height: auto; max-height: 78vh;}
.html-course-theme .svg-lightbox-content figcaption, .html-course-theme .svg-lightbox-content p {font-size: 1rem; text-align: center; color: #4a5568; margin-top: 1em;}
.html-course-theme .svg-lightbox-close {position: absolute; top: -.5rem; right: -.5rem; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0052D9; font-size: 1.6rem; font-weight: 300; line-height: 1; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; z-index: 10;}
.html-course-theme .svg-lightbox-close:hover {background: #0052D9; color: #fff;}
.html-course-theme .svg-lightbox-tip {text-align: center; color: rgba(255,255,255,.6); font-size: .85rem; margin-top: 1rem; letter-spacing: .04em;}
.html-course-theme .ch-recap {background:var(--bg-elev);border:1px solid var(--border);
    border-left:4px solid var(--ch-accent, var(--accent));
    padding:28px 32px 24px;margin:48px 0 32px;border-radius:0 6px 6px 0;
    position:relative;}
.html-course-theme .ch-recap::before {content:"CHAPTER TAKEAWAYS";
    position:absolute;top:-10px;left:24px;
    font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0.18em;
    color:var(--ch-accent, var(--accent));
    background:var(--bg);padding:2px 10px;}
.html-course-theme .ch-recap-title {font-family:var(--serif);font-size:18px;font-weight:600;
    color:var(--ink);margin:4px 0 16px;line-height:1.4;}
.html-course-theme .ch-recap ol {list-style:none;margin:0;padding-left:0;counter-reset:recap;}
.html-course-theme .ch-recap ol li {counter-increment:recap;
    font-family:var(--serif);font-size:15.5px;line-height:1.7;
    color:var(--ink);margin-bottom:12px;padding-left:36px;position:relative;}
.html-course-theme .ch-recap ol li::before {content:counter(recap);
    position:absolute;left:0;top:0;
    width:24px;height:24px;border-radius:50%;
    background:var(--ch-accent, var(--accent));color:#fff;
    font-family:var(--sans);font-size:12px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1;}
.html-course-theme .ch-recap ol li strong {color:var(--ch-accent, var(--accent));font-weight:700;}
.html-course-theme .ch-recap ol li:last-child {margin-bottom:0;}
.html-course-theme [data-lang="zh-CN"] .ch-recap ol li, .html-course-theme [data-lang="zh-TW"] .ch-recap ol li {letter-spacing:0;}
@media (max-width:720px) {
  .html-course-theme .ch-recap {padding:24px 20px 20px;margin:36px 0 24px;}
  .html-course-theme .ch-recap-title {font-size:16px;}
  .html-course-theme .ch-recap ol li {font-size:15px;padding-left:32px;}
}
.html-course-theme ul.kv-list, .html-course-theme ol.kv-list {list-style:none;padding:0;margin:22px 0 24px;
    border:1px solid var(--border);border-left:3px solid var(--ch-accent,var(--accent));
    border-radius:8px;overflow:hidden;background:var(--bg,#fff);
    box-shadow:0 1px 0 rgba(0,21,51,.02),0 2px 6px rgba(0,21,51,.04);}
.html-course-theme ul.kv-list > li, .html-course-theme ol.kv-list > li {display:flex;flex-wrap:nowrap;align-items:baseline;gap:20px;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    line-height:1.75;font-size:15px;
    background:transparent;}
.html-course-theme ul.kv-list > li:last-child, .html-course-theme ol.kv-list > li:last-child {border-bottom:none;}
.html-course-theme ul.kv-list > li:nth-child(even), .html-course-theme ol.kv-list > li:nth-child(even) {background:rgba(0,21,51,.018);}
.html-course-theme ul.kv-list > li:hover, .html-course-theme ol.kv-list > li:hover {background:var(--ch-accent-soft,rgba(234,242,255,.55));
    transition:background .18s ease;}
.html-course-theme ul.kv-list > li > strong:first-child, .html-course-theme ol.kv-list > li > strong:first-child {flex:0 0 auto;min-width:150px;max-width:32%;
    color:var(--ch-accent,var(--accent));font-weight:700;
    font-family:var(--serif);font-size:15px;letter-spacing:.01em;}
.html-course-theme ol.kv-list {list-style:none;counter-reset:kv;}
.html-course-theme ol.kv-list > li {position:relative;padding-left:56px;}
.html-course-theme ol.kv-list > li::before {counter-increment:kv;content:counter(kv);
    position:absolute;left:20px;top:15px;
    width:24px;height:24px;border-radius:50%;
    background:var(--ch-accent,var(--accent));color:#fff;
    font-size:12px;font-weight:700;font-family:var(--serif);
    display:flex;align-items:center;justify-content:center;
    letter-spacing:0;}
.html-course-theme [data-theme="dark"] ul.kv-list, .html-course-theme [data-theme="dark"] ol.kv-list {background:var(--bg-elev);}
.html-course-theme [data-theme="dark"] ul.kv-list > li:nth-child(even), .html-course-theme [data-theme="dark"] ol.kv-list > li:nth-child(even) {background:rgba(255,255,255,.02);}
@media (max-width:720px) {
  .html-course-theme ul.kv-list > li, .html-course-theme ol.kv-list > li {flex-direction:column;gap:4px;padding:12px 16px;}
  .html-course-theme ul.kv-list > li > strong:first-child, .html-course-theme ol.kv-list > li > strong:first-child {min-width:0;max-width:100%;font-size:14px;}
  .html-course-theme ol.kv-list > li {padding-left:52px;}
  .html-course-theme ol.kv-list > li::before {top:12px;}
}
.html-course-theme ul.kv-list.kv-numbered > li, .html-course-theme ol.kv-list.kv-numbered > li {display:block;
    padding:14px 20px 14px 24px;
    position:relative;}
.html-course-theme ul.kv-list.kv-numbered > li::first-letter, .html-course-theme ol.kv-list.kv-numbered > li::first-letter {color:var(--ch-accent,var(--accent));
    font-weight:700;
    font-size:1.1em;
    margin-right:2px;}
.html-course-theme ul.kv-list.kv-numbered > li > strong, .html-course-theme ol.kv-list.kv-numbered > li > strong {color:var(--ch-accent,var(--accent));
    font-weight:700;
    font-family:var(--serif);
    min-width:0;max-width:none;flex:none;}
@media (max-width:720px) {
  .html-course-theme ul.kv-list.kv-numbered > li, .html-course-theme ol.kv-list.kv-numbered > li {padding:12px 16px 12px 20px;}
}
.html-course-theme .vpc-box {transform-origin: center; transform-box: fill-box; animation: vpc-pulse 3.6s ease-in-out infinite;}
.html-course-theme .vpc-box.b2 {animation-delay: .8s;}
.html-course-theme .vpc-box.b3 {animation-delay: 1.6s;}
.html-course-theme .vpc-box.b4 {animation-delay: 2.4s;}
.html-course-theme .vpc-packet {filter: drop-shadow(0 0 6px #FFB020);}
.html-course-theme .vpc-path {fill:none; stroke:#B5C4DC; stroke-width:1.8; stroke-dasharray:5 4;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .vpc-box, .html-course-theme .vpc-packet {animation: none !important;}
  .html-course-theme .vpc-packet animateMotion {display:none;}
}
.html-course-theme .clb-rs {animation: clb-beat 2.4s ease-in-out infinite;}
.html-course-theme .clb-rs.r2 {animation-delay:.6s;}
.html-course-theme .clb-rs.r3 {animation-delay:1.2s;}
.html-course-theme .clb-rs.r4 {animation-delay:1.8s;}
.html-course-theme .clb-tier {transform-origin: center; transform-box: fill-box; animation: clb-scale 4s ease-in-out infinite;}
.html-course-theme .clb-tier.t2 {animation-delay:2s;}
.html-course-theme .clb-path {fill:none; stroke:#B5C4DC; stroke-width:1.5; stroke-dasharray:5 4;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .clb-rs, .html-course-theme .clb-tier {animation:none !important;}
}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .az {transform-origin:center;transform-box:fill-box;animation:cosAz 2.4s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .az.b {animation-delay:.4s;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .az.c {animation-delay:.8s;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .flow {stroke-dasharray:6 6;animation:cosFlow 1.6s linear infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .tier {transform-origin:center;transform-box:fill-box;animation:cosTier 4s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .tier.b {animation-delay:1s;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .tier.c {animation-delay:2s;}
.html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] .tier.d {animation-delay:3s;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .anim-diagram[data-diagram-id="ch4-cos"] * {animation:none !important;}
}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .heart {transform-origin:center;transform-box:fill-box;animation:tdHeart 1.4s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .heart.b {animation-delay:.35s;}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .heart.c {animation-delay:.7s;}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .wal {stroke-dasharray:5 5;animation:tdFlow 1.2s linear infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .raft-vote {opacity:0;animation:tdVote 6s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] .raft-vote.v2 {animation-delay:.3s;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .anim-diagram[data-diagram-id="ch5-tdsql"] * {animation:none !important;}
}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .beat {transform-origin:center;transform-box:fill-box;animation:mqBeat 2s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .beat.b {animation-delay:.5s;}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .beat.c {animation-delay:1s;}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .pkt-fast {fill:#FFB020;filter:drop-shadow(0 0 4px #FFC759);}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .pkt-slow {fill:#1FCDB7;filter:drop-shadow(0 0 4px #6DEBD8);}
.html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] .queue-fill {transform-origin:left center;transform-box:fill-box;animation:mqQueue 5s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .anim-diagram[data-diagram-id="ch6-mq"] * {animation:none !important;}
}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .layer {transform-origin:center;transform-box:fill-box;animation:secLayer 4s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .layer.b {animation-delay:.5s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .layer.c {animation-delay:1s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .layer.d {animation-delay:1.5s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .layer.e {animation-delay:2s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .block-x {opacity:0;animation:secBlock 4s ease-in-out infinite;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .block-x.b {animation-delay:.5s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .block-x.c {animation-delay:1s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .block-x.d {animation-delay:1.5s;}
.html-course-theme .anim-diagram[data-diagram-id="ch7-security"] .attack-line {stroke-dasharray:8 4;animation:secAttack 1.5s linear infinite;}
@media (prefers-reduced-motion: reduce) {
  .html-course-theme .anim-diagram[data-diagram-id="ch7-security"] * {animation:none !important;}
}

/* ========== TCCA / practitioner 课程专用组件（同步自国际站 chapter.css，去重后） ========== */
/* TCCA 页面专用 Key / Note callout（独立命名避免污染标准 .callout 样式） */
.html-course-theme .callout.tcca-callout-key {border-left-color:var(--accent);background:linear-gradient(135deg,rgba(0,82,217,0.06) 0%,rgba(0,82,217,0.015) 100%)}
.html-course-theme .callout.tcca-callout-key .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.html-course-theme .callout.tcca-callout-note {border-left-color:var(--amber-warm);background:linear-gradient(135deg,rgba(255,176,32,0.07) 0%,rgba(255,176,32,0.015) 100%)}
.html-course-theme .callout.tcca-callout-note .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:var(--amber-warm);text-transform:uppercase;margin-bottom:10px}
.html-course-theme .callout.tcca-callout-note .callout-label::before {content:"\1F4CC   ";margin-right:3px}

/* Editorial spread · 两列特性卡片 */
.html-course-theme .editorial-spread {display:block;margin:12px 0}
.html-course-theme .editorial-card {display:flex;align-items:flex-start;gap:10px;padding:12px 14px;min-height:100%;align-self:stretch;border-radius:6px}
.html-course-theme .editorial-card:nth-child(even) {background:rgba(234,242,255,0.5)}
.html-course-theme .editorial-card-body {flex:1;min-width:0}
.html-course-theme .editorial-dot {width:8px;height:8px;border-radius:50%;margin-top:8px;flex-shrink:0;background:var(--accent)}
.html-course-theme .editorial-card-title {font-family:var(--serif);font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.4}
.html-course-theme .editorial-card-desc {font-family:var(--sans);font-size:13.5px;font-weight:400;line-height:1.7;color:var(--text-mute)}

/* kv-card-list · 键值卡片列表 */
.html-course-theme .kv-card-list {list-style:none;padding:0;margin:18px 0 26px;position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-elev);box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.html-course-theme .kv-card-list::before {content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.html-course-theme .kv-card-list li {display:flex;align-items:flex-start;gap:12px;padding:14px 18px 14px 22px;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.7;color:var(--text);transition:background .15s ease;cursor:default}
.html-course-theme .kv-card-list li:last-child {border-bottom:none}
.html-course-theme .kv-card-list li:hover {background:rgba(0,82,217,0.04)}
.html-course-theme .kv-card-list li strong {flex-shrink:0;min-width:120px;max-width:160px;font-weight:700;color:var(--accent);font-size:14px}
.html-course-theme .kv-card-list ol {padding:0;margin:0;list-style:none}
.html-course-theme .kv-card-list ol li {display:flex;align-items:flex-start;gap:12px;padding:14px 18px 14px 22px;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.7;color:var(--text);transition:background .15s ease;cursor:default}
.html-course-theme .kv-card-list ol li:last-child {border-bottom:none}
.html-course-theme .kv-card-list ol li:hover {background:rgba(0,82,217,0.04)}
.html-course-theme .kv-card-list ol li strong {flex-shrink:0;min-width:120px;max-width:160px;font-weight:700;color:var(--accent);font-size:14px}

/* ===== TCCA 课程专用样式（.tcca class 限定） ===== */
/* 去除小节之间的空白占位边框（仅 TCCA 课程，不影响 practitioner 小节的左缩进） */
.html-course-theme .tcca .htmlLesson {padding:0;border-bottom:none}
.html-course-theme .tcca .htmlLesson:last-child {border-bottom:none}

/* Table wrapper */
.html-course-theme .table-wrapper.tcca {margin:24px 0 30px;overflow-x:auto;border:1px solid var(--border);border-radius:6px;background:var(--bg-elev)}
.html-course-theme .table-wrapper.tcca table {width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;line-height:1.7}
.html-course-theme .table-wrapper.tcca thead {background:var(--bg-soft)}
.html-course-theme .table-wrapper.tcca th {background:var(--bg-soft);font-weight:700;font-size:13px;letter-spacing:0.04em;color:var(--text);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-strong)}
.html-course-theme .table-wrapper.tcca td {padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.html-course-theme .table-wrapper.tcca th:first-child,.html-course-theme .table-wrapper.tcca td:first-child {white-space:nowrap}
.html-course-theme .table-wrapper.tcca tr:last-child td {border-bottom:none}
.html-course-theme .table-wrapper.tcca tbody tr:hover td {background:rgba(0,82,217,0.03)}
.html-course-theme .table-wrapper.tcca code {font-family:var(--mono);font-size:0.85em;background:var(--bg-soft);padding:1px 5px;border-radius:3px;color:var(--accent)}

/* Callout: Key Takeaway（与 kp-card 知识要点保持一致：浅蓝 + 左侧蓝边） */
.html-course-theme .callout.tcca.tcca-callout-key {background:#eaf4ff;border:1px solid rgba(26,115,232,0.18);border-left:4px solid #1a73e8;border-radius:0 6px 6px 0;padding:18px 22px;margin:24px 0}
.html-course-theme .callout.tcca.tcca-callout-key .callout-label {font-family:var(--sans);font-size:15px;font-weight:700;color:#1a73e8;letter-spacing:0.02em;margin-bottom:8px;display:block}
.html-course-theme .callout.tcca.tcca-callout-key p {font-family:var(--serif);font-size:14.5px;line-height:1.85;margin:0;color:var(--text)}
.html-course-theme .callout.tcca.tcca-callout-key strong {color:#1a73e8;font-weight:600}

/* Callout: Tip（与 tip-card 专家提示保持一致：浅黄 + 左侧黄边 + 💡） */
.html-course-theme .callout.tcca.tcca-callout-tip {background:#fff8e6;border:1px solid rgba(245,158,11,0.28);border-left:4px solid #f59e0b;border-radius:0 6px 6px 0;padding:18px 22px;margin:24px 0}
.html-course-theme .callout.tcca.tcca-callout-tip .callout-label {font-family:var(--sans);font-size:15px;font-weight:700;color:#b45309;letter-spacing:0.02em;margin-bottom:8px;display:block}
.html-course-theme .callout.tcca.tcca-callout-tip .callout-label::before {content:"\1F4A1   ";margin-right:2px}
.html-course-theme .callout.tcca.tcca-callout-tip p {font-family:var(--serif);font-size:14.5px;line-height:1.85;margin:0;color:var(--text)}
.html-course-theme .callout.tcca.tcca-callout-tip strong {color:#b45309;font-weight:600}

/* Callout: Warning */
.html-course-theme .callout.tcca.tcca-callout-warning {background:linear-gradient(135deg,rgba(245,158,11,0.07) 0%,rgba(245,158,11,0.015) 100%);border:1px solid rgba(245,158,11,0.2);border-left:3px solid var(--amber-warm);padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout.tcca.tcca-callout-warning .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:#b45309;text-transform:uppercase;margin-bottom:10px;display:block}
.html-course-theme .callout.tcca.tcca-callout-warning p {font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}
.html-course-theme .callout.tcca.tcca-callout-warning strong {color:#b45309}

/* Callout: Note（琥珀色调 + 📌 图标） */
.html-course-theme .callout.tcca.tcca-callout-note {background:linear-gradient(135deg,rgba(255,176,32,0.07) 0%,rgba(255,176,32,0.015) 100%);border:1px solid rgba(255,176,32,0.2);border-left:3px solid var(--amber-warm);padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout.tcca.tcca-callout-note .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:var(--amber-warm);text-transform:uppercase;margin-bottom:10px;display:block}
.html-course-theme .callout.tcca.tcca-callout-note .callout-label::before {content:"\1F4CC   ";margin-right:3px}
.html-course-theme .callout.tcca.tcca-callout-note p {font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}

/* Callout: Objective */
.html-course-theme .callout.tcca.tcca-callout-objective {background:linear-gradient(135deg,rgba(139,92,246,0.06) 0%,rgba(139,92,246,0.015) 100%);border:1px solid rgba(139,92,246,0.15);border-left:3px solid #8b5cf6;padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout.tcca.tcca-callout-objective .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:#7c3aed;text-transform:uppercase;margin-bottom:10px;display:block}
.html-course-theme .callout.tcca.tcca-callout-objective p {font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}

/* Callout: Takeaway */
.html-course-theme .callout.tcca.tcca-callout-takeaway {background:linear-gradient(135deg,rgba(30,58,138,0.08) 0%,rgba(30,58,138,0.02) 100%);border:1px solid rgba(30,58,138,0.2);border-left:3px solid #1e3a8a;padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout.tcca.tcca-callout-takeaway .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:#1e3a8a;text-transform:uppercase;margin-bottom:10px;display:block}
.html-course-theme .callout.tcca.tcca-callout-takeaway p,.html-course-theme .callout.tcca.tcca-callout-takeaway div,.html-course-theme .callout.tcca.tcca-callout-takeaway strong {font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}

/* Callout: Warn */
.html-course-theme .callout.tcca.tcca-callout-warn {background:linear-gradient(135deg,rgba(239,68,68,0.07) 0%,rgba(239,68,68,0.015) 100%);border:1px solid rgba(239,68,68,0.2);border-left:3px solid #ef4444;padding:20px 24px;margin:24px 0;border-radius:0 4px 4px 0}
.html-course-theme .callout.tcca.tcca-callout-warn .callout-label {font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.2em;color:#dc2626;text-transform:uppercase;margin-bottom:10px;display:block}
.html-course-theme .callout.tcca.tcca-callout-warn p {font-family:var(--serif);font-size:14.5px;line-height:1.75;margin:0;color:var(--text)}

/* 知识要点 · 浅蓝 callout（kp-card.tcca 知识要点型） */
.html-course-theme .kp-card.tcca > .kp-card-title:first-child {background:#eaf4ff;border:1px solid rgba(26,115,232,0.18);border-left:4px solid #1a73e8;border-radius:6px 6px 0 0;padding:14px 22px 6px;margin:24px 0 0;color:#1a73e8;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0.02em;line-height:1.5;display:block}
.html-course-theme .kp-card.tcca > .kp-card-title:first-child + .kp-card-body {background:#eaf4ff;border:1px solid rgba(26,115,232,0.18);border-top:none;border-left:4px solid #1a73e8;border-radius:0 0 6px 6px;padding:0 22px 14px;margin:0;color:var(--text);font-family:var(--serif);font-size:14.5px;line-height:1.85}
.html-course-theme .kp-card.tcca > .kp-card-title:first-child + .kp-card-body strong {color:#1a73e8;font-weight:600}

/* 专家提示 · 浅黄 callout（tip-card.tcca 专家提示型） */
.html-course-theme .tip-card.tcca > .tip-card-title:first-child {background:#fff8e6;border:1px solid rgba(245,158,11,0.28);border-left:4px solid #f59e0b;border-radius:6px 6px 0 0;padding:14px 22px 6px;margin:24px 0 0;color:#b45309;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0.02em;line-height:1.5;display:block}
.html-course-theme .tip-card.tcca > .tip-card-title:first-child::before {content:"\1F4A1   ";margin-right:2px}
.html-course-theme .tip-card.tcca > .tip-card-title:first-child + .tip-card-body {background:#fff8e6;border:1px solid rgba(245,158,11,0.28);border-top:none;border-left:4px solid #f59e0b;border-radius:0 0 6px 6px;padding:0 22px 14px;margin:0;color:var(--text);font-family:var(--serif);font-size:14.5px;line-height:1.85}
.html-course-theme .tip-card.tcca > .tip-card-title:first-child + .tip-card-body strong {color:#b45309;font-weight:600}

/* ===== practitioner 课程通用组件 ===== */
/* 7 层算力栈表格 */
.html-course-theme .compute-stack-table {width:100%;border-collapse:collapse;margin:18px 0 26px;font-family:var(--sans);font-size:13.5px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.html-course-theme .compute-stack-table thead th {background:linear-gradient(180deg,rgba(0,82,217,0.07) 0%,rgba(0,82,217,0.03) 100%);color:var(--text);font-weight:700;font-size:13px;letter-spacing:0.02em;padding:11px 14px;text-align:left;border-bottom:2px solid var(--accent)}
.html-course-theme .compute-stack-table tbody td {padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);line-height:1.65;vertical-align:top}
.html-course-theme .compute-stack-table tbody tr:last-child td {border-bottom:none}
.html-course-theme .compute-stack-table tbody tr:hover {background:rgba(0,82,217,0.03)}
.html-course-theme .compute-stack-table tbody td:first-child {font-weight:700;color:var(--accent);width:48px;text-align:center}
.html-course-theme .compute-stack-table tbody td:nth-child(2) {font-weight:600;min-width:140px}
.html-course-theme .compute-stack-table tbody td:nth-child(3) {font-size:13px;color:var(--text-mute)}
.html-course-theme .compute-stack-table tbody td:nth-child(4) {font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.html-course-theme .compute-stack-table tbody td:nth-child(5) {font-size:13px;color:var(--text-mute)}

/* 五步选型决策流程提示 */
.html-course-theme .flow-decision-list {list-style:none;padding:0;margin:0;counter-reset:q-counter}
.html-course-theme .flow-decision-list li {counter-increment:q-counter;position:relative;padding:12px 16px 12px 48px;font-size:14px;line-height:1.65;color:var(--text);border-bottom:1px dashed var(--border);transition:background .15s ease}
.html-course-theme .flow-decision-list li:last-child {border-bottom:none}
.html-course-theme .flow-decision-list li:hover {background:rgba(0,82,217,0.03)}
.html-course-theme .flow-decision-list li::before {content:counter(q-counter);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;line-height:26px;text-align:center}
.html-course-theme .flow-decision-list li strong {color:var(--accent);font-weight:600}
.html-course-theme .flow-decision-list li .hl {display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:12px;padding:1px 8px;border-radius:4px;letter-spacing:0.04em}

/* 概念层级四格卡片 */
.html-course-theme .layer-grid-card {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 26px}
.html-course-theme .layer-cell {background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;padding:18px 20px;transition:all .15s}
.html-course-theme .layer-cell:hover {background:rgba(0,82,217,0.04)}
.html-course-theme .layer-cell-title {font-family:var(--serif);font-weight:700;font-size:15px;color:var(--text);margin-bottom:6px;letter-spacing:0.02em}
.html-course-theme .layer-cell-body {font-size:13.5px;line-height:1.6;color:var(--text-mute)}
.html-course-theme .layer-cell-body strong {color:var(--accent);font-weight:700}

/* kp-card 头部（卡片容器型：产品矩阵 / CCN 杀手锏 等） */
.html-course-theme .kp-card-head {margin-bottom:10px;display:flex;align-items:center;gap:10px}
.html-course-theme .kp-card-head .kp-tag,.html-course-theme .kp-tag {display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);background:rgba(0,82,217,0.08);padding:4px 10px;border-radius:4px}
.html-course-theme .kp-card-head h3 {margin:0;font-size:15px;font-weight:700;color:var(--text)}

/* tip-card 头部 */
.html-course-theme .tip-card-head {margin-bottom:10px;display:flex;align-items:center;gap:10px}
.html-course-theme .tip-card-head .tip-tag,.html-course-theme .tip-tag {display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#b45309;background:rgba(245,158,11,0.1);padding:4px 10px;border-radius:4px}
.html-course-theme .tip-tag::before {content:"\1F4A1   ";margin-right:2px}

/* 动画关键帧（被上述模块引用） */
@keyframes quizShake {0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes vpc-pulse {0%,100% { opacity:.9; transform:scale(1);} 50% { opacity:1; transform:scale(1.03);}}
@keyframes clb-beat {0%,100% { opacity:.85; } 50% { opacity:1; }}
@keyframes clb-scale {0%,100% { transform:scale(1);} 50% { transform:scale(1.06);}}
@keyframes cosAz {0%,100%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.05);filter:brightness(1.2) drop-shadow(0 0 8px #5B9CFF);}}
@keyframes cosFlow {to{stroke-dashoffset:-24;}}
@keyframes cosTier {0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);filter:brightness(1.2);}}
@keyframes tdHeart {0%,100%{transform:scale(1);}50%{transform:scale(1.08);filter:brightness(1.2) drop-shadow(0 0 6px currentColor);}}
@keyframes tdFlow {to{stroke-dashoffset:-20;}}
@keyframes tdVote {0%,60%,100%{opacity:0;}20%,40%{opacity:.9;}}
@keyframes mqBeat {0%,100%{transform:scale(1);}50%{transform:scale(1.06);filter:brightness(1.15);}}
@keyframes mqQueue {0%,100%{transform:scaleX(.3);}50%{transform:scaleX(.95);}}
@keyframes secLayer {0%,100%{transform:scale(1);filter:brightness(1);}25%,45%{transform:scale(1.03);filter:brightness(1.2) drop-shadow(0 0 10px #FFC759);}}
@keyframes secBlock {0%,20%,60%,100%{opacity:0;}30%,45%{opacity:1;}}
@keyframes secAttack {to{stroke-dashoffset:-24;}}

/* ========== 学前须知 · 学习目标（learning-objectives） ==========
   用途：章节标题后、第一节内容前，展示「学完这节你将能」目标列表
   对标原 HTML .learn-goal 组件
   HTML 结构：
   <div class="learning-objectives">
     <div class="learning-objectives-label">学完这节你将能</div>
     <ul class="learning-objectives-list">
       <li>目标一</li>
       <li>目标二</li>
     </ul>
     <div class="learning-objectives-meta"><b>预计</b>≈ 5 分钟（含 1 道小测 + 1 个动手 + 1 段深度阅读）</div>
   </div> */
.html-course-theme .learning-objectives {
  margin: 18px 0 28px;
  padding: 16px 20px 16px 56px;
  background: #fbfcfe;
  border: 1px solid #e3eaf6;
  border-radius: 6px;
  position: relative;
  font-family: var(--sans);
}
.html-course-theme .learning-objectives::before {
  content: "\25CE";
  position: absolute;
  left: 18px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}
.html-course-theme .learning-objectives-label {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.html-course-theme .learning-objectives-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.85;
}
.html-course-theme .learning-objectives-list li {
  position: relative;
}
.html-course-theme .learning-objectives-meta {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  background: #fff;
  border: 1px solid #e3eaf6;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.html-course-theme .learning-objectives-meta b {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}
/* 响应式 */
@media (max-width: 720px) {
  .html-course-theme .learning-objectives {
    padding: 14px 16px 14px 50px;
    margin: 14px 0 22px;
  }
  .html-course-theme .learning-objectives::before {
    left: 14px;
    top: 12px;
  }
}

/* ========== 数据模型对比卡片（model-grid / model-card） ==========
   用途：六类数据模型（关系型/文档型/键值型/宽列型/时序型/图模型）对比展示
   HTML 结构：
   <div class="model-grid">
     <div class="model-card">
       <div class="model-card-head">
         <span class="model-card-icon">🗄️</span>
         <span class="model-card-name">关系型</span>
       </div>
       <div class="model-card-desc">表 + 行 + 强 Schema</div>
       <div class="model-card-detail">ACID 事务，SQL 查询...</div>
       <div class="model-card-meta">代表：MySQL、PostgreSQL</div>
     </div>
   </div> */
.html-course-theme .model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0 30px;
}
.html-course-theme .model-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ch-accent, var(--accent));
  border-radius: 6px;
  padding: 16px 18px;
  transition: all 0.15s;
}
.html-course-theme .model-card:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 82, 217, 0.08);
}
.html-course-theme .model-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.html-course-theme .model-card-icon {
  font-size: 18px;
  line-height: 1;
}
.html-course-theme .model-card-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--ch-accent, var(--accent));
  letter-spacing: 0.02em;
}
.html-course-theme .model-card-desc {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.5;
}
.html-course-theme .model-card-detail {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.html-course-theme .model-card-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0.04em;
}
.html-course-theme .model-card-meta strong {
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 720px) {
  .html-course-theme .model-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== 深度阅读折叠块（details.deep-read） ==========
   用途：CAP 定理等"深度阅读"可折叠内容
   HTML 结构：
   <details class="deep-read">
     <summary>
       <b>深度阅读</b>
       <span>CAP · 分布式系统三选二定理</span>
       <span class="deep-tag">展开</span>
     </summary>
     <div class="deep-body">
       <p>...</p>
     </div>
   </details> */
.html-course-theme details.deep-read {
  margin: 24px 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
}
.html-course-theme details.deep-read[open] {
  border-color: rgba(0, 82, 217, 0.2);
  box-shadow: 0 1px 2px rgba(0, 82, 217, 0.04);
}
.html-course-theme details.deep-read summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.html-course-theme details.deep-read summary::-webkit-details-marker { display: none; }
.html-course-theme details.deep-read summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  line-height: 18px;
  font-weight: 600;
  font-family: var(--mono);
  font-size: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.html-course-theme details.deep-read[open] summary::before { content: "\2212"; }
.html-course-theme details.deep-read summary b {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.html-course-theme details.deep-read .deep-tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.html-course-theme details.deep-read .deep-body {
  padding: 6px 22px 20px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.85;
  border-top: 1px solid #eef2f9;
}
.html-course-theme details.deep-read .deep-body p { margin: 12px 0; }
.html-course-theme details.deep-read .deep-body code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ========== 术语悬浮提示（term-tip · InnoDB hover 效果） ==========
   用途：术语首次悬停显示完整定义，移动端点击切换
   HTML 结构：
   <span class="tt" tabindex="0">
     <span class="tt-w">InnoDB</span>
     <span class="tt-pop">
       <span class="tt-name">InnoDB</span>
       <span class="tt-full">InnoDB</span>
       <span class="tt-def">MySQL 默认存储引擎...</span>
     </span>
   </span> */
.html-course-theme .tt {
  position: relative;
  cursor: pointer;
  outline: none; /* 对齐 skill 基准 preview.css：键盘聚焦不显示默认轮廓 */
}
.html-course-theme .tt-w {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1.5px dotted var(--accent);
  padding: 0 1px;
}
.html-course-theme .tt:hover .tt-w,
.html-course-theme .tt:focus .tt-w {
  background: rgba(0, 82, 217, 0.10);
  border-radius: 3px;
}
.html-course-theme .tt.open .tt-w {
  background: rgba(0, 82, 217, 0.10);
  border-radius: 3px 3px 0 0;
  border-bottom-style: solid;
}
/* 契约 v3.19.0 termTooltip：弹层为「白底 + 概念色左条」的内联块级卡片，
   在文档流内展开（非浮层）——严格对齐 skill preview.css:372-376 */
.html-course-theme .tt-pop {
  display: none;
}
.html-course-theme .tt.open .tt-pop {
  display: block;
  margin: 10px 0 6px;
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-weight: 400;
}
.html-course-theme .body-list li .tt.open .tt-pop {
  margin-left: 0;
}
.html-course-theme .tt-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.html-course-theme .tt-def {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.78;
  color: var(--text-mute);
}

/* ========== 关键要点列表（key-list · 章节内的要项列表） ==========
   用途：type/rows/Extra 等有序关键项的列表样式
   HTML 结构：
   <ul class="key-list">
     <li><b>type</b> 从最优到最差：const > ref > range > index > ALL...</li>
     <li><b>rows</b> 预估扫描行数...</li>
   </ul> */
.html-course-theme .key-list {
  margin: 18px 0 24px;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}
.html-course-theme .key-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f4fa;
}
.html-course-theme .key-list li:last-child { border-bottom: none; }
.html-course-theme .key-list li b {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 8px;
}
.html-course-theme .key-list li code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}
.html-course-theme .key-list li .k-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: 0.06em;
  font-weight: 500;
  vertical-align: 1px;
}

/* ========== 章末知识图谱（knowledge-map / km-card） ==========
   用途：章末 · 知识图谱，点击卡片跳转对应小节
   HTML 结构：
   <div class="knowledge-map">
     <div class="km-head">章末 · 知识图谱</div>
     <div class="km-sub">点击任一卡片回到对应小节复习</div>
     <div class="km-grid">
       <a class="km-card" href="#sec-1-1">
         <span class="km-num">01</span>
         <div class="km-title">数据模型</div>
         <div class="km-desc">六类数据模型分类</div>
       </a>
     </div>
   </div> */
.html-course-theme .knowledge-map {
  margin: 36px 0 28px;
  padding: 24px 26px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.html-course-theme .knowledge-map .km-head {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.html-course-theme .knowledge-map .km-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-mute);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.html-course-theme .knowledge-map .km-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.html-course-theme .knowledge-map .km-card {
  padding: 14px 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  display: block;
}
.html-course-theme .knowledge-map .km-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 82, 217, 0.08);
}
.html-course-theme .knowledge-map .km-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.html-course-theme .knowledge-map .km-title {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin: 4px 0 6px;
  letter-spacing: 0.02em;
}
.html-course-theme .knowledge-map .km-desc {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.65;
}
.html-course-theme .km-highlight {
  animation: kmPulse 2s ease-out;
}
@keyframes kmPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 82, 217, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(0, 82, 217, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 82, 217, 0); }
}
@media (max-width: 960px) {
  .html-course-theme .knowledge-map .km-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== 客户痛点 vs 腾讯云方案（pain-table） ==========
   用途：章末复习 · 客户痛点 ↔ 腾讯云方案 对照表
   对标原 HTML .pain-table 组件
   HTML 结构：
   <table class="pain-table perf">
     <thead><tr><th>客户痛点</th><th class="pain-th-arrow"></th><th>腾讯云方案</th></tr></thead>
     <tbody>
       <tr><td class="pain-customer">核心交易慢 SQL 频发</td><td class="pain-arrow">→</td><td class="pain-product">TDSQL 自研内核</td></tr>
     </tbody>
   </table> */
.html-course-theme .pain-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 12px 0 28px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 82, 217, 0.06);
  font: 13.5px/1.65 var(--sans);
}
.html-course-theme .pain-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #fff;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}
.html-course-theme .pain-table thead th.pain-th-arrow {
  width: 36px;
  text-align: center;
}
.html-course-theme .pain-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #E8EEF7;
  vertical-align: top;
}
.html-course-theme .pain-table tbody td.pain-customer {
  color: #6E7E94;
  font-style: italic;
  width: 38%;
}
.html-course-theme .pain-table tbody td.pain-arrow {
  text-align: center;
  color: #6E7E94;
  width: 36px;
  font-weight: 600;
  padding: 0;
}
.html-course-theme .pain-table tbody td.pain-product {
  color: #2E3D52;
  font-weight: 500;
}
.html-course-theme .pain-table tbody tr:nth-child(odd) td { background: #FAFCFF; }
.html-course-theme .pain-table tbody tr:nth-child(even) td { background: #FFFFFF; }
.html-course-theme .pain-table tbody tr:hover td { background: #F0F7FF !important; }
.html-course-theme .pain-table tbody tr:last-child td { border-bottom: none; }
/* 4 类不同主题色 */
.html-course-theme .pain-table.perf thead th { background: linear-gradient(180deg, #0052D9 0%, #003B9F 100%); }
.html-course-theme .pain-table.perf tbody td.pain-product { color: #003B9F; }
.html-course-theme .pain-table.perf tbody tr:hover td { background: #E8F1FF !important; }
.html-course-theme .pain-table.cost thead th { background: linear-gradient(180deg, #E6A817 0%, #B47B00 100%); }
.html-course-theme .pain-table.cost tbody td.pain-product { color: #B47B00; }
.html-course-theme .pain-table.cost tbody tr:hover td { background: #FFF7E0 !important; }
.html-course-theme .pain-table.eff thead th { background: linear-gradient(180deg, #3FA05F 0%, #1F6B3F 100%); }
.html-course-theme .pain-table.eff tbody td.pain-product { color: #1F6B3F; }
.html-course-theme .pain-table.eff tbody tr:hover td { background: #E8F8F0 !important; }
.html-course-theme .pain-table.comp thead th { background: linear-gradient(180deg, #7E6CB6 0%, #5C4490 100%); }
.html-course-theme .pain-table.comp tbody td.pain-product { color: #5C4490; }
.html-course-theme .pain-table.comp tbody tr:hover td { background: #F0EAFB !important; }

/* ========== 常见问题 FAQ（faq-item / faq-q / faq-a） ==========
   用途：章末 · 常见问题 FAQ
   HTML 结构：
   <div class="faq-item">
     <div class="faq-q">WorkBuddy 和 ChatGPT 这类聊天 AI 有什么区别？</div>
     <div class="faq-a"><p>ChatGPT 回答问题、给建议，不动手。WorkBuddy 读文件、改表格...</p></div>
   </div> */
.html-course-theme .faq-item {
  background: #fff;
  border: none;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 14px 0 0;
  box-shadow: 0 1px 3px rgba(180, 123, 0, 0.06);
  transition: none;
}
.html-course-theme .faq-item:hover {
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(180, 123, 0, 0.06);
}
.html-course-theme .faq-q {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: #B47B00;
  margin: 0 0 8px;
  letter-spacing: normal;
  display: block;
}
.html-course-theme .faq-q::before {
  content: "Q \B7   ";
  font-weight: 700;
  color: #E6A817;
}
.html-course-theme .faq-a {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.85;
  color: #3B5060;
  margin: 0;
  padding-left: 0;
}
.html-course-theme .faq-a::before {
  content: "A \B7   ";
  font-weight: 700;
  color: #3FA05F;
}

/* ========== FAQ 容器（faq-section · 黄色主题） ========== */
.html-course-theme .faq-section {
  margin: 32px 0 24px;
  padding: 24px 28px 22px;
  background: linear-gradient(180deg, #FFFBEC 0%, #FFFFFF 60%);
  border: 1.5px solid #E6D5A0;
  border-left: 5px solid #B47B00;
  border-radius: 6px;
}
.html-course-theme .faq-section-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  color: #B47B00;
  letter-spacing: 0.04em;
}
.html-course-theme .faq-section-subtitle {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: #6E7E94;
}

/* ========== 章节总结回顾（recap-section · 蓝色主题） ========== */
.html-course-theme .recap-section {
  margin: 40px 0 32px;
  padding: 26px 28px 24px;
  background: linear-gradient(180deg, #F0F5FC 0%, #FFFFFF 60%);
  border: 1.5px solid #C5D5EE;
  border-left: 5px solid #0052D9;
  border-radius: 6px;
}
.html-course-theme .recap-section-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  color: #0052D9;
  letter-spacing: 0.04em;
}
.html-course-theme .recap-section-subtitle {
  margin: 0 0 18px !important; /* 对齐 skill 基准 preview.css（!important 防被通用 p 规则覆盖） */
  font-family: var(--sans);
  font-size: 13px;
  color: #6E7E94;
}
.html-course-theme .recap-card {
  margin: 10px 0 0;
  padding: 14px 18px;
  background: #fff;
  border-left: 3px solid #0052D9;
  border-radius: 0 4px 4px 0;
  color: #2E3D52;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.85;
  box-shadow: 0 1px 3px rgba(0, 82, 217, 0.05);
}
.html-course-theme .recap-card-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0052D9;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  margin-right: 10px;
  vertical-align: middle;
}

/* ========== 章末标题（chapter-end-heading · 带圆点图标） ========== */
.html-course-theme .chapter-end-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 38px 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid #E8EEF8;
  color: #0052D9;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.html-course-theme .chapter-end-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.html-course-theme .chapter-end-heading-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ch-accent, #0052D9);
  box-shadow: 0 0 0 5px rgba(0, 82, 217, 0.12);
}
.html-course-theme .chapter-end-heading-rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #C5D5EE, transparent);
}
.html-course-theme .faq-a p { margin: 0 0 6px; }
.html-course-theme .faq-a a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.html-course-theme .faq-a a:hover { color: var(--accent-2); }

/* ========== 数字高亮（hl-num） ==========
   用途：type/rows/Extra 等关键术语的数字高亮 */
.html-course-theme .hl-num {
  font-family: var(--mono);
  font-size: 0.92em;
  color: #B07000;
  font-weight: 700;
  background: rgba(255, 176, 32, 0.12);
  padding: 0 4px;
  border-radius: 4px;
}

/* ========== 章节测验（quiz）历史第二定义已移除（2026-08-28 对齐 skill 预览） ==========
   本段曾以 mono 字体 quiz-tag / 600 字重 quiz-q / var(--border) 边框色等覆盖
   上方与 skill 预览同源的第一组定义（造成两端渲染不一致）。quiz 全量样式以上方
   第一组为准，quizShake 动画见 @keyframes 段，li 圆点防御已并入第一组。 */

/* ========== 学习目标 · 预计时间（learning-objectives-meta） ==========
   用途：learning-objectives 末尾的「预计≈6 分钟」元信息 */
.html-course-theme .learning-objectives-meta {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #e3eaf6;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.html-course-theme .learning-objectives-meta b {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}

/* ========== 动手实践卡（try-it · 动手 · EXPLAIN 三连问） ==========
   用途：section 内的可操作练习卡，含 ⚒ 图标 + 标题 + 正文 + 编号问题
   HTML 结构：
   <div class="try-it">
     <div class="try-it-title">动手 · EXPLAIN 三连问</div>
     <div class="try-it-body">
       <p>挑你手头任意一个 MySQL 慢查询...</p>
       <ol><li>type 列是什么？</li><li>rows 估算行数匹配吗？</li></ol>
       <p>这三个问题答完，你已经具备了 80% 的索引诊断能力。</p>
     </div>
   </div> */
.html-course-theme .try-it {
  margin: 28px 0;
  padding: 20px 24px 20px 64px;
  background: #fbfcfe;
  border: 1px solid #e3eaf6;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  position: relative;
}
.html-course-theme .try-it::before {
  content: "\2692";
  position: absolute;
  left: 24px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.html-course-theme .try-it-title {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.html-course-theme .try-it-body {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.85;
}
.html-course-theme .try-it-body p { margin: 0 0 8px; }
.html-course-theme .try-it-body p:last-child { margin-bottom: 0; }
.html-course-theme .try-it-body code {
  font-family: var(--mono);
  font-size: 13px;
  background: #f4f7fc;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}
.html-course-theme .try-it-body ol,
.html-course-theme .try-it-body ul {
  margin: 8px 0 0;
  padding-left: 22px;
  line-height: 2;
}
.html-course-theme .try-it-body ul { list-style: disc !important; }
.html-course-theme .try-it-body ol { list-style: decimal !important; }
.html-course-theme .try-it-body ol li,
.html-course-theme .try-it-body ul li {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text);
}
.html-course-theme .try-it-body ol li code,
.html-course-theme .try-it-body ul li code {
  font-family: var(--mono);
  font-size: 13px;
  background: #f4f7fc;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}
.html-course-theme .try-it-hint {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 82, 217, 0.05);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.7;
}
.html-course-theme .try-it-hint b { color: var(--accent); font-weight: 600; }

/* ========== 实践块（practice-block · 基础/进阶/综合） ==========
   用途：章末复习中，基础/进阶/综合 3 个实践任务块
   HTML 结构：
   <div class="practice-block level-basic">
     <span class="practice-tag">基础</span>
     <div class="practice-title">识别数据模型类型</div>
     <p class="practice-desc">给出 5 个真实业务场景描述...</p>
     <div class="practice-goal">能独立完成"工作负载 → 数据模型"映射</div>
     <div class="practice-checklist-title">操作清单</div>
     <ul class="practice-checklist">
       <li>识别读写比例与一致性要求</li>
     </ul>
   </div> */
.html-course-theme .practice-block {
  position: relative;
  margin: 16px 0 20px;
  padding: 22px 24px 20px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
}
.html-course-theme .practice-block.level-basic {
  border-color: #3FA05F;
  background: linear-gradient(180deg, #f4fbf7 0%, #fff 60%);
}
.html-course-theme .practice-block.level-advanced {
  border-color: #E6A817;
  background: linear-gradient(180deg, #fffbec 0%, #fff 60%);
}
.html-course-theme .practice-block.level-capstone {
  border-color: #B43F4F;
  background: linear-gradient(180deg, #fdf3f4 0%, #fff 60%);
}
.html-course-theme .practice-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 4px;
  color: #fff;
  background: #3FA05F;
  margin-bottom: 10px;
}
.html-course-theme .practice-block.level-basic .practice-tag {
  background: linear-gradient(135deg, #3FA05F, #2D8047);
}
.html-course-theme .practice-block.level-advanced .practice-tag {
  background: linear-gradient(135deg, #E6A817, #B47B00);
}
.html-course-theme .practice-block.level-capstone .practice-tag {
  background: linear-gradient(135deg, #D94354, #B43F4F);
}
.html-course-theme .practice-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.html-course-theme .practice-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-mute);
  margin: 0 0 14px;
}
.html-course-theme .practice-goal {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 82, 217, 0.06);
  border-radius: 0 4px 4px 0;
  margin: 0 0 14px;
  color: var(--accent);
  line-height: 1.7;
}
.html-course-theme .practice-block.level-basic .practice-goal {
  background: rgba(63, 160, 95, 0.08);
  border-left-color: #3FA05F;
  color: #1F6B3F;
}
.html-course-theme .practice-block.level-advanced .practice-goal {
  background: rgba(180, 123, 0, 0.08);
  border-left-color: #B47B00;
  color: #B47B00;
}
.html-course-theme .practice-block.level-capstone .practice-goal {
  background: rgba(180, 63, 79, 0.08);
  border-left-color: #B43F4F;
  color: #B43F4F;
}
.html-course-theme .practice-checklist-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.html-course-theme .practice-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #3B5060;
  font-size: 13px;
  line-height: 1.85;
}
.html-course-theme .practice-checklist li {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.85;
  color: #3B5060;
  margin: 5px 0;
  padding-left: 18px;
  position: relative;
  list-style: none !important;
}
.html-course-theme .practice-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  opacity: 0.6;
}
.html-course-theme .practice-block.level-basic .practice-checklist li::before {
  color: #3FA05F;
}
.html-course-theme .practice-block.level-advanced .practice-checklist li::before {
  color: #B47B00;
}
.html-course-theme .practice-block.level-capstone .practice-checklist li::before {
  color: #B43F4F;
}
@media (max-width: 720px) {
  .html-course-theme .practice-checklist {
    grid-template-columns: 1fr;
  }
}

/* ========== 复习任务总览（review-summary-panel） ==========
   用途：章末复习 · 复习任务总览表格
   HTML 结构：
   <div class="review-summary-panel">
     <div class="review-summary-title">复习任务总览</div>
     <div class="review-summary-sub">先看表格定位任务，再看下方卡片了解细节</div>
     <div class="review-summary-table-wrap">
       <table>
         <thead><tr><th>层级</th><th>任务</th><th>达成目标</th><th>关键动作</th></tr></thead>
         <tbody>
           <tr class="rst-row-basic">
             <td><span class="rst-level"><span class="rst-dot rst-dot-basic"></span>基础</span></td>
             <td class="rst-task">识别数据模型类型</td>
             <td>能独立完成"工作负载 → 数据模型"映射</td>
             <td><ol class="rst-acts"><li>识别读写比例</li></ol></td>
           </tr>
         </tbody>
       </table>
     </div>
   </div> */
.html-course-theme .review-summary-panel {
  margin: 30px 0 26px;
  padding: 22px 26px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.html-course-theme .review-summary-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.html-course-theme .review-summary-title::before {
  content: "\25A6";
  font-size: 14px;
  color: var(--accent);
}
.html-course-theme .review-summary-sub {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: #6E7E94;
}
.html-course-theme .review-summary-table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.html-course-theme .review-summary-table-wrap table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
}
.html-course-theme .review-summary-table-wrap thead th {
  background: rgba(0, 82, 217, 0.04);
  font-weight: 700;
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.html-course-theme .review-summary-table-wrap tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  vertical-align: top;
  font-size: 13px;
  color: var(--text);
}
.html-course-theme .review-summary-table-wrap tbody tr:last-child td {
  border-bottom: none;
}
.html-course-theme .review-summary-table-wrap tbody tr:hover td {
  background: #F7FAFF;
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-basic td {
  background: rgba(63, 160, 95, 0.045);
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-basic td:first-child {
  border-left-color: #3FA05F;
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-basic:hover td {
  background: rgba(63, 160, 95, 0.10);
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-adv td {
  background: rgba(230, 168, 23, 0.05);
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-adv td:first-child {
  border-left-color: #E6A817;
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-adv:hover td {
  background: rgba(230, 168, 23, 0.11);
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-cap td {
  background: rgba(180, 63, 79, 0.045);
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-cap td:first-child {
  border-left-color: #B43F4F;
}
.html-course-theme .review-summary-table-wrap tbody tr.rst-row-cap:hover td {
  background: rgba(180, 63, 79, 0.10);
}
.html-course-theme .rst-level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #22303F;
}
.html-course-theme .rst-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.html-course-theme .rst-dot-basic {
  background: #3FA05F;
  box-shadow: 0 0 0 3px rgba(63, 160, 95, 0.18);
}
.html-course-theme .rst-dot-advanced {
  background: #E6A817;
  box-shadow: 0 0 0 3px rgba(230, 168, 23, 0.2);
}
.html-course-theme .rst-dot-capstone {
  background: #B43F4F;
  box-shadow: 0 0 0 3px rgba(180, 63, 79, 0.18);
}
.html-course-theme .rst-task {
  font-weight: 600;
  color: #0A1A2C;
}
.html-course-theme .rst-acts {
  margin: 0;
  padding-left: 18px;
  list-style: none;
  counter-reset: rstact;
}
.html-course-theme .rst-acts li {
  margin: 2px 0;
  font-size: 12.5px;
  color: #4A5B78;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .html-course-theme .review-summary-panel {
    padding: 16px;
  }
}

/* ========== 章末复习容器（chapter-review-wrapper） ==========
   用途：把章末所有练习块（practice-block）排成网格布局 */
.html-course-theme .chapter-review-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 30px 0 26px;
}
.html-course-theme .chapter-review-wrapper > .practice-block {
  margin: 0;
}
@media (min-width: 960px) {
  .html-course-theme .chapter-review-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .html-course-theme .chapter-review-wrapper > .practice-block:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ========== 实验介绍横幅（lab-intro-banner） ==========
   用途：实验章节顶部的介绍横幅，含 ⌘ 图标 + 标题 + 描述 */
.html-course-theme .lab-intro-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin: 22px 0 18px;
  background: linear-gradient(135deg, rgba(0, 82, 217, 0.06) 0%, rgba(0, 82, 217, 0.01) 100%);
  border: 1px solid #C5D5EE;
  border-radius: 12px;
}
.html-course-theme .lab-intro-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #0052D9;
  color: #fff;
  font: 700 22px/52px var(--sans);
  text-align: center;
  flex-shrink: 0;
}
.html-course-theme .lab-intro-text h3 {
  margin: 0 0 4px;
  font: 700 17px var(--sans);
  color: #0C447C;
}
.html-course-theme .lab-intro-text p {
  margin: 0;
  font-size: 13.5px;
  color: #4A5B78;
  line-height: 1.65;
}

/* ========== 下载按钮（btn-download · TDesign 风格公共按钮） ==========
   用途：资源下载表格中的下载按钮
   HTML：<a class="btn-download" href="...">下载实验手册 PDF</a>
   也兼容 ch 文件中的 <a class="dl-btn">下载 <span class="dl-arrow">⬇</span></a> */
.html-course-theme .btn-download,
.html-course-theme .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #0052D9;
  background: #fff;
  border: 1px solid #0052D9;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.5;
}
.html-course-theme .btn-download:hover,
.html-course-theme .dl-btn:hover {
  background: #0052D9;
  color: #fff;
  border-color: #0052D9;
}
.html-course-theme .btn-download:active,
.html-course-theme .dl-btn:active {
  background: #003B9F;
  border-color: #003B9F;
}
.html-course-theme .btn-download::before {
  content: "\2193";
  font-size: 14px;
  font-weight: 700;
}
.html-course-theme .dl-arrow {
  font-size: 13px;
  transition: transform 0.15s;
}
.html-course-theme .dl-btn:hover .dl-arrow {
  transform: translateY(1px);
}
.html-course-theme .btn-download.btn-primary,
.html-course-theme .dl-btn.btn-primary {
  background: #0052D9;
  color: #fff;
  border-color: #0052D9;
}
.html-course-theme .btn-download.btn-primary:hover,
.html-course-theme .dl-btn.btn-primary:hover {
  background: #003B9F;
  border-color: #003B9F;
}

/* ========== Tab 切换组件（tab-group · Q1-Q4 维度切换） ==========
   用途：4 个维度的 tab 切换，点击 tab-btn 切换 tab-panel
   HTML 结构：
   <div class="tab-group" data-tabs="ch2-dims">
     <div class="tab-bar">
       <button class="tab-btn active" data-tab="1">Q1 工作负载</button>
       <button class="tab-btn" data-tab="2">Q2 数据模型</button>
     </div>
     <div class="tab-panel active" data-panel="1">
       <div class="tab-title">工作负载特征</div>
       <ul class="key-list"><li>...</li></ul>
     </div>
   </div> */
.html-course-theme .tab-group {
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
}
.html-course-theme .tab-bar {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-elev) 100%);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.html-course-theme .tab-btn {
  flex: 1;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-mute);
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
  position: relative;
}
.html-course-theme .tab-btn:last-child { border-right: none; }
.html-course-theme .tab-btn:hover {
  color: var(--accent);
  background: rgba(0, 82, 217, 0.04);
}
.html-course-theme .tab-btn.active {
  color: var(--accent);
  background: var(--bg-elev);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.html-course-theme .tab-panel {
  display: none;
  padding: 22px 26px;
}
.html-course-theme .tab-panel.active { display: block; }
.html-course-theme .tab-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.html-course-theme .tab-panel .key-list li {
  font-size: 14.5px;
  line-height: 1.85;
}

/* 通用数据表格兜底段已删除（2026-08-28 对齐 skill）：demo 时代裸 table 兜底，
   skill 无此段且选择器特异性 (0,3,2) 压过契约 .table-wrap 规则造成两端不一致。
   契约表格恒为 .table-wrap > table.md-table 结构（TABLE_WITHOUT_WRAP 校验兜底），
   V2 不渲染 demo 老课程；违约裸 table 走 UA 默认样式显性化。 */

/* === Cloud Engineering Course 新增组件 === */

/* callout 变体：tip / warning */
.html-course-theme .callout.tip{border-left-color:#0caf8f;background:rgba(12,175,143,0.04)}
.html-course-theme .callout.tip .callout-title{color:#0caf8f}
.html-course-theme .callout.warning{border-left-color:#e8703a;background:rgba(232,112,58,0.04)}
.html-course-theme .callout.warning .callout-title{color:#e8703a}

/* 操作步骤列表 dossier */
.html-course-theme .dossier-list{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:14px}
.html-course-theme .dossier-row{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.html-course-theme .dossier-num{flex-shrink:0;width:28px;height:28px;border-radius:6px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.html-course-theme .dossier-body{flex:1}
.html-course-theme .dossier-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.html-course-theme .dossier-desc{font-size:14px;color:var(--text-mute);line-height:1.6}

/* 指标卡片 metric */
.html-course-theme .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0}
.html-course-theme .metric-card{padding:18px 20px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;text-align:center;box-shadow:0 1px 3px rgba(0,82,217,0.04)}
.html-course-theme .metric-num{font-size:22px;font-weight:800;color:var(--accent);letter-spacing:0.02em;margin-bottom:6px}
.html-course-theme .metric-label{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.html-course-theme .metric-desc{font-size:12px;color:var(--text-mute);line-height:1.5}

/* 四级标题 h3-sub-sub */
.html-course-theme h4.h3-sub-sub{font-size:16px;font-weight:600;color:var(--text);margin:18px 0 8px;padding-left:12px;border-left:3px solid var(--border)}

/* ========== 白名单组件补充样式（同步自 html-course-gen skill assets/supplement.css，2026-08-23） ==========
   唯一来源是 skill 的 supplement.css（平台 html-course.css 未覆盖组件）。
   本段为手工同步快照（加 .html-course-theme 前缀）；supplement.css 变更后需重同步，
   长期应接 skill 同步器自动生成（supplement.css 头注释约定的 platform-theme 消费方）。
   对账：supplement.css 48 类，本段补齐此前缺失的 29 类。 */
/* 防宿主页面 text-indent 干扰（qcloud-train 全局样式可能给 p/li 加首行缩进） */
.html-course-theme .callout-title,.html-course-theme .kp-card-title,.html-course-theme .tip-card-title,.html-course-theme .chapter-meta-label,.html-course-theme .section-summary h4,.html-course-theme .practice h4,.html-course-theme .faq-block h4,.html-course-theme .shot-cap,.html-course-theme .video-cap,.html-course-theme .byline,.html-course-theme .kicker,.html-course-theme .standfirst,.html-course-theme .lead,.html-course-theme .recap-card,.html-course-theme .quiz-q,.html-course-theme .quiz-opt,.html-course-theme .step-detail p,.html-course-theme .step-row,.html-course-theme .kv-card-list,.html-course-theme .scene-title,.html-course-theme .scene-desc,.html-course-theme .case-doc-title,.html-course-theme .case-doc-meta,.html-course-theme .case-doc-sub,.html-course-theme h4,.html-course-theme .sub-sub{text-indent:0}
/* callout 变体 */
.html-course-theme .callout-key{background:linear-gradient(135deg, var(--bg-soft), var(--bg-elev))}
.html-course-theme .callout-tip{border-left-color:#00A870;background:#F2FBF7}
.html-course-theme .callout-tip .callout-title{color:#00A870}
.html-course-theme .callout-warning{border-left-color:var(--accent);background:var(--bg-soft)}
.html-course-theme .callout-note{border-left-color:#E37318;background:#FFF8F0}
.html-course-theme .callout-note .callout-title{color:#E37318}
.html-course-theme .callout-objective{border-left-color:#7B61FF;background:#F6F4FF}
.html-course-theme .callout-objective .callout-title{color:#7B61FF}
.html-course-theme .callout-takeaway{border-left-color:#003C9D;background:var(--bg-soft)}
.html-course-theme .callout-warn{border-left-color:#D54941;background:#FFF5F5}
.html-course-theme .callout-warn .callout-title{color:#D54941}
/* 网格/图注/图形 */
.html-course-theme .kp-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:14px;margin:1.5em 0}
.html-course-theme .shot-cap{text-align:center;font-size:12px;color:var(--text-dim);font-style:italic;margin:-0.6em 0 1.6em}
.html-course-theme .svg-figure{background:linear-gradient(135deg, var(--bg-soft), var(--bg-elev));border:1px solid #E3EBF6;border-radius:8px;padding:20px;margin:1.5em 0}
.html-course-theme .chapter-quizzes{margin:1.5em 0}
/* 步骤组件 */
.html-course-theme .step-detail{border-left:3px solid var(--accent);background:var(--bg-elev);border-radius:0 6px 6px 0;padding:14px 20px;margin:1.2em 0;box-shadow:var(--shadow-sm)}
.html-course-theme .step-title{display:flex;align-items:center;gap:10px;margin:0 0 0.5em}
/* v3.12.1（同步 supplement.css）：badge 自适应文本长度——单数字保持 24px 正圆，多字符（"STEP 01"）展开为胶囊 */
.html-course-theme .step-badge{width:auto;min-width:24px;height:24px;padding:0 8px;border-radius:12px;white-space:nowrap;flex:none;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--sans)}
.html-course-theme .step-row{display:flex;gap:14px;align-items:flex-start;margin:0.8em 0}
/* 学习目标/章末总结/小节总结 */
.html-course-theme .learn-goals{background:linear-gradient(135deg, var(--bg-soft), var(--bg-elev));border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:16px 22px;margin:1.5em 0}
.html-course-theme .learn-goals h4{margin-top:0;color:var(--accent)}
.html-course-theme .recap-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:14px;margin:1.5em 0}
.html-course-theme .recap-num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:0.1em}
.html-course-theme .recap-title{font-family:var(--serif);font-size:17px;font-weight:700;margin:4px 0 6px}
.html-course-theme .section-summary{background:var(--bg-elev);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:16px 22px;margin:1.5em 0;box-shadow:var(--shadow-sm)}
.html-course-theme .section-summary h4{margin-top:0;color:var(--accent)}
/* 案例/练习/FAQ/提示 */
.html-course-theme .case-prompt{background:var(--bg-soft);border-radius:6px;padding:12px 16px;font-size:14px;margin:1em 0}
.html-course-theme .practice{background:linear-gradient(135deg, #FFF8F0, var(--bg-elev));border-left:4px solid #E37318;border-radius:0 8px 8px 0;padding:16px 22px;margin:1.5em 0}
.html-course-theme .practice h4{margin-top:0;color:#E37318}
.html-course-theme .faq-block{background:var(--bg-elev);border-radius:8px;padding:8px 22px;box-shadow:var(--shadow-sm);margin:1.5em 0}
.html-course-theme .faq-block h4{color:var(--accent);padding-top:12px;border-top:1px solid var(--bg-soft)}
.html-course-theme .faq-block h4:first-child{border-top:none;padding-top:0}
.html-course-theme .tip-inline{border-left:3px solid #E37318;background:#FFF8F0;padding:8px 14px;margin:1em 0;font-size:14px;border-radius:0 4px 4px 0}
/* 文档链接/代码块 */
.html-course-theme .doc-link{display:inline-block;background:var(--accent);color:#fff;padding:8px 18px;border-radius:6px;font-size:14px;font-weight:600;margin:0.5em 0}
.html-course-theme .doc-link:hover{background:var(--accent-2);text-decoration:none}
.html-course-theme .code-block{background:var(--text);color:#E8F0FF;border-radius:8px;padding:16px 20px;overflow-x:auto;margin:1.5em 0;font-family:var(--mono);font-size:13px;line-height:1.7}
.html-course-theme .code-block code{background:none;color:inherit;padding:0;font-size:inherit}
/* 表格/引用/音频/场景截图 */
.html-course-theme .md-table{width:100%;border-collapse:collapse;font-size:14px}
.html-course-theme .glossary-table{width:100%;border-collapse:collapse;font-size:14px}
.html-course-theme blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-left:3px solid var(--border-strong);color:var(--text-mute)}
.html-course-theme audio{display:block;width:100%;margin:12px 0 18px;outline:none}
.html-course-theme .scene-shot{display:block;margin:12px 0 4px;border-radius:6px;overflow:hidden;border:1px solid var(--border);cursor:zoom-in}
.html-course-theme .scene-shot img{display:block;width:100%;height:auto}
/* copy-btn 容器锚点（按钮 absolute 定位需父级 relative） */
.html-course-theme .case-prompt,.html-course-theme .code-block{position:relative}

/* ---- diagram 组（contract v3.9.0，2026-08-27 SysOps 沉淀；同步自 skill supplement.css） ----
   math-block 数学公式块：等宽字体 + 居中（如「错误预算 = 100% − SLO 目标值」）；
   diagram-block 流程图/状态机文本块：横向可滚动保持箭头不折行（如「创建中 → 运行中 ⇄ 关机中」）。
   二者均为纯文本展示块，不含交互（SDK 无需挂载行为） */
.html-course-theme .math-block{font-family:var(--mono,ui-monospace,monospace);font-size:15px;line-height:1.7;text-align:center;background:var(--bg-soft,#f6f8fb);border:1px solid var(--border,#e3e8ef);border-radius:8px;padding:14px 18px;margin:1.2em 0;color:var(--text,#1a2233);overflow-x:auto}
.html-course-theme .diagram-block{font-family:var(--mono,ui-monospace,monospace);font-size:14px;line-height:1.9;background:var(--bg-elev,#fff);border:1px dashed var(--border,#e3e8ef);border-radius:8px;padding:14px 18px;margin:1.2em 0;color:var(--text,#1a2233);overflow-x:auto;white-space:nowrap}

/* ========== 网格语境卡片样式（同步自 html-course-gen skill preview.css 手工补充段，2026-08-26） ==========
   来源：2026-08-26 SysOps 迁移复盘——按源稿 CSS 层叠终态还原网格语境卡片样式。
   仅作用于网格语境（kp-grid / recap-grid / scenes-3col 内），不改组件单用基础样式。
   分组：① kp-grid 信息卡 ② recap-grid 三列对比卡 ③ scenes-3col 步骤卡 ④ emoji 图标位 */

/* ---- ① kp-grid 信息卡（源 card-grid > info-card / emoji-card 层叠终态）---- */
.html-course-theme .kp-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0 28px}
/* 严格对齐 skill preview.css：skill 无 display:flex/flex-direction/min-height，移除 V2 私有增强 */
.html-course-theme .kp-grid > .kp-card{margin:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:18px 20px;box-shadow:none}
.html-course-theme .kp-grid > .kp-card .kp-card-title{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--text);letter-spacing:0.02em;margin-bottom:6px}
.html-course-theme .kp-grid > .kp-card .kp-card-title::after{content:"";display:block;width:24px;height:2px;background:var(--accent);margin-top:8px;border-radius:2px}
/* 严格对齐 skill preview.css：skill 无 flex/margin，移除 */
.html-course-theme .kp-grid > .kp-card .kp-card-body{font-size:14px;color:var(--text-mute);line-height:1.7}
.html-course-theme .kp-grid > .kp-card .kp-card-body strong{color:var(--text)}
.html-course-theme .kp-grid > .kp-card ul{list-style:none;margin:0 0 14px;padding:14px 0 0;border-top:1px solid var(--border);font-size:13px;color:var(--text-mute)}
.html-course-theme .kp-grid > .kp-card ul li{padding:3px 0}
.html-course-theme .kp-grid > .kp-card:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(0,82,217,0.08)}
.html-course-theme .kp-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.html-course-theme .kp-grid.cols-2{grid-template-columns:1fr}}

/* ---- ② recap-grid 三列对比卡（源 tri-col / module-card 层叠终态）---- */
.html-course-theme .recap-grid > .recap-card{margin:0;background:var(--bg-elev);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:8px;padding:24px 22px;box-shadow:none;display:flex;flex-direction:column;font-size:13px;color:var(--text-mute);line-height:1.75}
.html-course-theme .recap-grid > .recap-card .recap-num{display:block;font-family:var(--num);font-size:32px;font-weight:900;color:var(--accent);opacity:.22;line-height:1;letter-spacing:0.02em;margin:0 0 10px}
.html-course-theme .recap-grid > .recap-card .recap-title{position:relative;font-size:17px;margin:0 0 8px;letter-spacing:0.02em;color:var(--text)}
.html-course-theme .recap-grid > .recap-card .recap-title::after{content:"";display:block;width:20px;height:2px;background:var(--accent);margin-top:8px;border-radius:2px}
.html-course-theme .recap-grid > .recap-card:hover{background:var(--bg-soft);border-color:var(--accent)}

/* ---- ③ scenes-3col 步骤卡（源 three-stage > ts-card 层叠终态）---- */
.html-course-theme .scenes-3col .scene{min-height:0}
.html-course-theme .scenes-3col .scene .scene-title{font-size:16px;font-weight:700}
.html-course-theme .scenes-3col .scene .scene-title::after{content:none}

/* ---- ④ emoji 图标位（§12 为内容编写规范非机器门禁，emoji 靠系统字体渲染）---- */
/* 对齐 skill 基准 preview.css：图标 32px/1（V2 为 28px/1.2，偏小） */
.html-course-theme .kp-grid > .kp-card > div:first-child{font-size:32px;line-height:1;margin-bottom:10px}

/* ---- 共用：网格卡片 hover 过渡（①②）---- */
.html-course-theme .kp-grid > .kp-card,.html-course-theme .recap-grid > .recap-card{transition:border-color .15s,box-shadow .15s,background .15s}

/* ---- ⑤ emoji-card 功能卡（同步自 html-course-gen skill preview.css 手工补充段，2026-08-28；源 L1673-1707 层叠终态逐字抄录；类名保留后独立于 .kp-grid > .kp-card 语境，无样式冲突）---- */
.html-course-theme .emoji-card{background:var(--bg-elev);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:8px;padding:22px 24px 18px;display:flex;flex-direction:column;transition:all .15s}
.html-course-theme .emoji-card:hover{box-shadow:0 8px 24px rgba(0,82,217,0.10)}
.html-course-theme .emoji-card.ec-blue{border-top-color:var(--accent)}
.html-course-theme .emoji-card.ec-green{border-top-color:#16A34A}
.html-course-theme .emoji-card.ec-amber{border-top-color:#FFB020}
.html-course-theme .emoji-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.html-course-theme .emoji-card-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;flex-shrink:0}
.html-course-theme .emoji-card.ec-blue .emoji-card-icon{background:rgba(0,82,217,0.08)}
.html-course-theme .emoji-card.ec-green .emoji-card-icon{background:rgba(22,163,74,0.08)}
.html-course-theme .emoji-card.ec-amber .emoji-card-icon{background:rgba(255,176,32,0.08)}
.html-course-theme .emoji-card-title{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--text);letter-spacing:0.02em;line-height:1.3}
.html-course-theme .emoji-card-sub{font-family:var(--sans);font-size:11px;color:var(--text-mute);margin-bottom:14px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700}
.html-course-theme .emoji-card-attrs{list-style:none;padding:14px 0 0;margin:0 0 14px;border-top:1px solid var(--border)}
.html-course-theme .emoji-card-attrs li{font-size:13px;color:var(--text);line-height:1.85;padding-left:14px;position:relative;margin-bottom:4px}
.html-course-theme .emoji-card-attrs li::before{content:"\2022";position:absolute;left:0;color:var(--accent);font-weight:900}
.html-course-theme .emoji-card-attrs li strong{color:var(--text);font-weight:700}
.html-course-theme .emoji-card-attrs li span{color:var(--text-mute);font-weight:400;margin-left:2px}
.html-course-theme .emoji-card-best{margin-top:auto;padding:6px 14px;border-radius:14px;font-size:11.5px;letter-spacing:0.06em;align-self:flex-start;text-transform:uppercase;font-weight:700}
.html-course-theme .emoji-card.ec-blue .emoji-card-best{background:rgba(0,82,217,0.08);color:#0052D9}
.html-course-theme .emoji-card.ec-green .emoji-card-best{background:rgba(22,163,74,0.08);color:#16A34A}
.html-course-theme .emoji-card.ec-amber .emoji-card-best{background:rgba(255,176,32,0.08);color:#A66800}
.html-course-theme .emoji-card.ec-highlight{border:1.5px solid #0052D9;border-top-width:4px;box-shadow:0 4px 16px rgba(0,82,217,0.10)}

/* ---- stage-flow 横向阶段流（contract v3.14.0，同步 supplement.css 2026-08-28）----
   源站 three-stage + ts-card/ts-step/ts-title/ts-body/ts-arrow 的平台原生等价组件
   （产品 2026-08-27 拍板新增，替代 step-detail 纵向降级的过渡方案）。
   视觉基准 = 源站规则逐条平移；箭头 stage-arrow 为纯装饰文本，flex 收缩不换行。 */
.html-course-theme .stage-flow{display:flex;align-items:stretch;gap:12px;margin:20px 0 28px;flex-wrap:wrap}
.html-course-theme .stage-card{flex:1;min-width:190px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.html-course-theme .stage-step{font-family:var(--num);font-weight:700;font-size:12px;color:var(--accent);letter-spacing:0.15em;margin-bottom:8px}
.html-course-theme .stage-title{font-family:var(--serif);font-weight:700;font-size:16px;margin:0 0 6px;color:var(--text)}
.html-course-theme .stage-desc{font-size:14px;line-height:1.7;color:var(--text-mute);margin:0}
.html-course-theme .stage-arrow{display:flex;align-items:center;font-size:22px;color:var(--text-dim);flex-shrink:0}
/* stage-card 颜色修饰类（ts-1/2/3 对应源站蓝/绿/橙顶部色条；无修饰类保持基础样式） */
.html-course-theme .stage-card.ts-1, .html-course-theme .stage-card.stage-1 { border-top: 3px solid var(--accent); }
.html-course-theme .stage-card.ts-2, .html-course-theme .stage-card.stage-2 { border-top: 3px solid #00a870; }
.html-course-theme .stage-card.ts-3, .html-course-theme .stage-card.stage-3 { border-top: 3px solid #f59e0b; }

/* ---- 裸 ol 编号防御（同步自 skill supplement.css 2026-08-28：宿主主题 reset 致正文有序列表编号消失）----
   作用域收窄到「section 直接子级 + 无类」的裸 ol：有意去编号的组件 ol（kv-list/kv-card-list/ch-recap/flow-decision-list）
   都带类或在组件容器内，:not([class]) 保证零误伤；特异性压过宿主 reset，不用 !important。 */
.html-course-theme ol:not([class]) { list-style: decimal; padding-left: 22px; margin: 0 0 18px; }
.html-course-theme ul:not([class]) { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.html-course-theme ol:not([class]) > li, .html-course-theme ul:not([class]) > li { display: list-item; list-style: inherit; margin-bottom: 9px; }
.html-course-theme ol:not([class]) > li::marker { color: var(--accent); font-weight: 700; }
.html-course-theme ul:not([class]) > li::marker { color: var(--accent); }
.html-course-theme .ch-recap ol, .kv-card-list ol { list-style: none; }
/* ---- ix 内联交互组件（contract v3.18.0，interactiveComponents.ixInline）----
   视觉规格镜像自 ADP 内联版源稿 ix-inline-styles（12632 字符逐条翻译；平台侧同步 supplement.css）。
   形态变体：ix-flow（横排节点流+箭头）/ ix-app（240px 侧栏选项卡两列）；原语 tabs/cards/sort/form。
   渐进增强：无 JS 全平铺可读（卡片正反面纵排、panel 平铺、排序操作钮隐藏）；
   data-enhanced 后进入交互态（3D 翻转、panel 互斥、箭头连线）。:has() 需 Chrome105+/Safari15.4+。 */
.html-course-theme .ix-block{margin:24px 0 36px}
/* frame 白卡（源稿 case-interactive-frame） */
.html-course-theme .ix-block>div:first-child{background:#fff;border:1px solid rgba(0,21,51,.08);border-radius:14px;box-shadow:0 16px 40px -18px rgba(0,21,51,.35),0 2px 8px -2px rgba(0,21,51,.10);padding:24px 26px 22px}
/* figcaption 在卡外下方（源稿形态） */
.html-course-theme .ix-block figcaption{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--text-mute);font-size:14px;line-height:1.6}
.html-course-theme .ix-tag{flex-shrink:0;display:inline-flex;align-items:center;padding:3px 10px;border-radius:3px;background:rgba(0,82,217,.10);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.06em}
/* frame 直接子级 p = hint/lead 提示语 */
.html-course-theme .ix-block>div:first-child>p{color:var(--text-mute);margin:0 0 16px;font-size:14px;line-height:1.65}
.html-course-theme .ix-panel-label{font-weight:700;color:var(--accent)}
.html-course-theme .ix-panel-title{font-size:18px;line-height:1.5;margin:0 0 4px;font-weight:650;color:var(--text)}

/* ===== 变体一：ix-flow 横排节点流（#1 节点探索）===== */
.html-course-theme .ix-flow{display:grid;gap:12px}
.html-course-theme .ix-block[data-enhanced] .ix-flow{grid-template-columns:repeat(5,minmax(118px,1fr));gap:20px;align-items:center}
.html-course-theme .ix-flow .ix-tab{display:block;position:relative;border:1px solid #d8e3f5;background:#fff;border-radius:10px;padding:18px 12px;min-height:112px;text-align:left;cursor:pointer;color:var(--text);box-shadow:0 8px 20px -18px rgba(0,82,217,.45);transition:.16s;font-family:var(--sans)}
.html-course-theme .ix-flow .ix-tab>span:first-child{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:#eaf2ff;color:var(--accent);font-weight:800;margin-bottom:8px}
.html-course-theme .ix-flow .ix-tab strong{display:block;font-size:15px}
.html-course-theme .ix-flow .ix-tab small{display:block;color:var(--text-mute);margin-top:4px}
.html-course-theme .ix-flow .ix-tab:hover,.ix-flow .ix-tab.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 10px 24px -16px rgba(0,82,217,.55)}
.html-course-theme .ix-flow .ix-tab.active{background:#eaf2ff}
/* 节点间箭头（增强后横排形态；窄屏转 ↓） */
.html-course-theme .ix-block[data-enhanced] .ix-flow .ix-tab:not(:last-child)::after{content:"\2192";position:absolute;right:-17px;top:42%;color:var(--accent);font-weight:800}
/* detail 区：左 3px 蓝条白卡 + 两列 grid（label 列 + 内容列），h4 跨列 */
.html-course-theme .ix-block:has(.ix-flow) .ix-panel{margin-top:24px;border-left:3px solid var(--accent);background:#fff;border-radius:6px;padding:18px 20px}
.html-course-theme .ix-block[data-enhanced]:has(.ix-flow) .ix-panel{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;align-items:start;border-left-color:#d8e3f5;transition:background-color .16s,border-color .16s}
.html-course-theme .ix-block:has(.ix-flow) .ix-panel .ix-panel-title{grid-column:1/-1;margin:0 0 6px}
.html-course-theme .ix-block:has(.ix-flow) .ix-panel p{margin:0;color:var(--text)}

/* ===== 变体二：ix-app 侧栏选项卡两列（#5 需求识别）===== */
.html-course-theme .ix-block:has(.ix-app)>div:first-child{background:#fbfcfe}
.html-course-theme .ix-block:has(.ix-app)>div:first-child>.ix-panel-label{font-size:11px;letter-spacing:.16em;display:block;margin:0 0 12px}
.html-course-theme .ix-block[data-enhanced] .ix-app{display:grid;grid-template-columns:240px 1fr;min-height:520px;gap:18px}
/* align-self:start 对齐 skill 基准 preview.css：缺此项时 tabs 列被拉伸 */
.html-course-theme .ix-app .ix-tabs{display:grid;gap:8px;align-content:start;align-self:start}
/* 激活面板高亮（对齐 skill preview.css）：active 为 SDK 挂载状态类，不占白名单。
   此前 V2 缺失此规则，且 SDK 未给 panel 挂 active 类（已同步修复） */
.html-course-theme .ix-block[data-enhanced] .ix-app .ix-panel.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 10px 24px -16px rgba(0,82,217,.55)}
.html-course-theme .ix-block[data-enhanced]:has(.ix-flow) .ix-panel.active{background:#f7faff;border-left-color:var(--accent)}
/* 侧栏 tabs 吸顶（对齐 skill preview.css） */
.html-course-theme .ix-block[data-enhanced] .ix-app .ix-tabs{position:sticky;top:12px}
.html-course-theme .ix-app .ix-tab{display:block;min-height:0;border:1px solid #d8e3f5;background:#fff;border-radius:8px;padding:12px 14px;text-align:left;cursor:pointer;color:#31425e;font-family:var(--sans);box-shadow:none;transition:none}
.html-course-theme .ix-app .ix-tab strong{font-size:14px}
.html-course-theme .ix-app .ix-tab:hover,.ix-app .ix-tab.active{border-color:var(--accent);background:#eaf2ff;color:var(--accent)}
.html-course-theme .ix-app .ix-tab.active strong{font-weight:700}
.html-course-theme .ix-app .ix-panel{border:1px solid #d8e3f5;background:#fff;border-radius:12px;padding:24px;transition:border-color .16s,box-shadow .16s}
.html-course-theme .ix-block:has(.ix-app) .ix-panel .ix-panel-title{font-size:25px;margin:0 0 18px}
.html-course-theme .ix-app .ix-panel ul{margin:0;padding-left:20px}
.html-course-theme .ix-app .ix-panel li{margin:11px 0;color:var(--text);line-height:1.7}

/* ===== 原语二：ix-cards 翻卡（#2 六大特性 3 列 / #3 大模型差距 2 列，按有无 reset 区分）===== */
.html-course-theme .ix-block:has(.ix-card-reset) .ix-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.html-course-theme .ix-block:not(:has(.ix-card-reset)) .ix-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.html-course-theme .ix-card{display:block;width:100%;min-width:0;perspective:900px;cursor:pointer;border:0;background:transparent;padding:0;text-align:left;font-family:var(--sans)}
/* 未增强：正反面纵排平铺（静态可读） */
.html-course-theme .ix-card-front,.ix-card-back{display:block;border:1px solid #e3eaf6;border-radius:6px;padding:18px;background:#fbfcfe}
.html-course-theme .ix-card:hover .ix-card-front,.ix-card:hover .ix-card-back{border-color:var(--accent)}
.html-course-theme .ix-card-back strong{display:block;color:var(--accent);margin-bottom:6px}
.html-course-theme .ix-card-back p{margin:6px 0;font-size:13px;color:var(--text);line-height:1.65}
.html-course-theme .ix-card-back p b{color:var(--text)}
/* back 面小字行（业务示例/ADP）：首个 p 是 13px 定义，其后为 11px 灰小标签（源稿 .tag 形态） */
.html-course-theme .ix-card-back p ~ p{font-size:11px;color:var(--text-mute)}
/* 增强后：160px 3D 翻转（源稿 perspective 900 + rotateY .34s + backface-visibility） */
.html-course-theme .ix-block[data-enhanced] .ix-card{position:relative;height:160px}
.html-course-theme .ix-block[data-enhanced] .ix-card-front,.ix-block[data-enhanced] .ix-card-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transition:transform .34s}
.html-course-theme .ix-block[data-enhanced] .ix-card-back{transform:rotateY(180deg);background:#eaf2ff;border-color:var(--accent);overflow:auto}
.html-course-theme .ix-block[data-enhanced] .ix-card.flipped .ix-card-front{transform:rotateY(180deg)}
.html-course-theme .ix-block[data-enhanced] .ix-card.flipped .ix-card-back{transform:rotateY(0)}
/* #2 front 居中（strong 18px 蓝字）；#3 front 左对齐（strong 16px） */
.html-course-theme .ix-block:has(.ix-card-reset) .ix-card-front{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.html-course-theme .ix-block:has(.ix-card-reset) .ix-card-front strong{font-size:18px;color:var(--accent)}
.html-course-theme .ix-block:has(.ix-card-reset) .ix-card-front>span{display:block;color:var(--text-mute);margin-top:6px}
.html-course-theme .ix-block:not(:has(.ix-card-reset)) .ix-card-front strong{font-size:16px}
.html-course-theme .ix-block:not(:has(.ix-card-reset)) .ix-card-front>span{display:block;color:var(--text-mute);margin-top:7px}
.html-course-theme .ix-block:not(:has(.ix-card-reset)) .ix-card-back>span{display:block;font-size:14px;color:#52647e;line-height:1.65}
.html-course-theme .ix-card-reset{margin-top:14px;border:0;background:#eaf2ff;color:var(--accent);border-radius:5px;padding:9px 14px;font-weight:650;cursor:pointer}

/* ===== 原语三：ix-sort 排序（#4 RAG 链路）===== */
.html-course-theme .ix-sort{display:grid;gap:9px;counter-reset:ixitem}
.html-course-theme .ix-sort-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #e3eaf6;border-radius:5px;background:#fbfcfe;color:var(--text)}
.html-course-theme .ix-sort-item::before{counter-increment:ixitem;content:counter(ixitem);display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:#eaf2ff;color:var(--accent);font-weight:700;font-size:13px}
.html-course-theme .ix-sort-item>span:first-child{flex:1}
/* 操作钮：未增强隐藏（正确序平铺 = 参考答案），增强后显示 */
.html-course-theme .ix-sort-moves{display:none;margin-left:auto;gap:6px;flex:none}
.html-course-theme .ix-block[data-enhanced] .ix-sort-moves{display:flex}
.html-course-theme .ix-sort-moves button{width:29px;height:29px;border:1px solid #e3eaf6;background:#fff;border-radius:4px;cursor:pointer;color:var(--text-mute);font-size:13px;line-height:1;padding:0}
.html-course-theme .ix-sort-moves button:hover{border-color:var(--accent);background:#f4f7fc}
.html-course-theme .ix-block div:has(>.ix-sort-check){display:flex;gap:10px;margin-top:16px}
.html-course-theme .ix-sort-check{border:0;border-radius:5px;padding:9px 16px;font-weight:650;cursor:pointer;background:var(--accent);color:#fff}
.html-course-theme .ix-sort-reset{border:0;border-radius:5px;padding:9px 16px;font-weight:650;cursor:pointer;background:#eaf2ff;color:var(--accent)}
.html-course-theme .ix-sort-result{margin:14px 0 0;min-height:26px;padding-left:12px;border-left:3px solid transparent;font-weight:650;font-size:14px;line-height:1.65}
.html-course-theme .ix-sort-result:not(:empty){border-left-color:var(--accent)}
.html-course-theme .ix-sort-result.ok{color:var(--accent)}
.html-course-theme .ix-sort-result.no{color:#b06a52}

/* ===== 原语四：ix-form 表单（#6 方案练习 / #7 Brief 填写器）===== */
.html-course-theme .ix-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.html-course-theme .ix-field{display:flex;flex-direction:column;gap:6px;font-weight:650;font-size:14px;color:var(--text)}
.html-course-theme .ix-field label{font-weight:650}
.html-course-theme .ix-field input,.ix-field select,.ix-field textarea{width:100%;border:1px solid #e3eaf6;border-radius:5px;background:#fbfcfe;color:var(--text);padding:10px 12px;font:inherit;outline:none;font-weight:400}
.html-course-theme .ix-field textarea{min-height:72px;resize:vertical}
/* #6 大答题框 */
.html-course-theme .ix-block:has(.ix-form-toggle) .ix-field textarea{min-height:120px;margin-top:7px}
.html-course-theme .ix-field input:focus,.ix-field select:focus,.ix-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,82,217,.1)}
.html-course-theme .ix-form-toggle{margin-top:16px;border:0;border-radius:5px;background:var(--accent);color:#fff;padding:9px 18px;font-weight:650;cursor:pointer}
.html-course-theme .ix-form-toggle:hover{background:#006eff}
.html-course-theme .ix-form-answer{margin-top:14px;border-left:3px solid var(--accent);background:#fafcff;padding:14px 16px;border-radius:0 4px 4px 0}
.html-course-theme .ix-form-answer .ix-panel-title{font-size:16px;margin:0 0 8px}
.html-course-theme .ix-form-answer p{margin:7px 0;color:var(--text-mute)}
/* #7 结果区：蓝底标题栏 + mono 输出区（源稿 result/result-head/copy） */
.html-course-theme .ix-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#eaf2ff;border:1px solid #e3eaf6;border-bottom:0;border-radius:6px 6px 0 0;margin-top:14px}
.html-course-theme .ix-form-head strong{font-size:15px}
.html-course-theme .ix-form-copy{border:0;border-radius:5px;background:var(--accent);color:#fff;padding:8px 14px;font-weight:650;cursor:pointer}
.html-course-theme .ix-form-copy:hover{background:#006eff}
/* color 为双保险（v2.46，2026-09-03 白底浅字修复）：本区是白底输出区，若被 .code-block
   深底浅字体系污染，缺 color 会致文字对比度 ~1.1:1 肉眼不可见 */
.html-course-theme .ix-form-output{margin:0;padding:14px 16px;min-height:160px;white-space:pre-wrap;word-break:break-word;font:13px/1.7 var(--mono);border:1px solid #e3eaf6;border-radius:0 0 6px 6px;background:#fff;color:var(--text)}
.html-course-theme .ix-block:has(.ix-form-head)>div:first-child>p:last-child{min-height:22px;margin:8px 0 0;color:#08783e;font-size:13px}

/* ===== 响应式（镜像源稿 media queries）===== */
@media(max-width:760px){
  .html-course-theme .ix-block[data-enhanced] .ix-flow{grid-template-columns:1fr}
  .html-course-theme .ix-block[data-enhanced] .ix-flow .ix-tab:not(:last-child)::after{content:"\2193";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}
  .html-course-theme .ix-block[data-enhanced]:has(.ix-flow) .ix-panel{grid-template-columns:1fr}
  .html-course-theme .ix-block:has(.ix-flow) .ix-panel .ix-panel-label{margin-top:6px}
}
@media(max-width:720px){.html-course-theme .ix-block:has(.ix-card-reset) .ix-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .html-course-theme .ix-block:has(.ix-card-reset) .ix-cards{grid-template-columns:1fr}
  .html-course-theme .ix-block:not(:has(.ix-card-reset)) .ix-cards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .html-course-theme .ix-form{grid-template-columns:1fr}
  .html-course-theme .ix-block[data-enhanced] .ix-app{grid-template-columns:1fr}
  .html-course-theme .ix-app .ix-tabs{grid-template-columns:1fr 1fr;position:static}
  .html-course-theme .ix-app .ix-panel{padding:18px}
  .html-course-theme .ix-block:has(.ix-app) .ix-panel .ix-panel-title{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.html-course-theme .ix-block[data-enhanced] .ix-card-front,.html-course-theme .ix-block[data-enhanced] .ix-card-back{transition:none}}
/* body-list 编号芯片列表（contract v3.19.0 入白名单，navy 系源稿 148 小节正文列表原形态）：
   ul.body-list > li.b-normal|b-key|b-caution（白卡+分类色左条+hover 投影）>
   span.b-chip[.b-num]>span.b-ico（编号芯片：胶囊/圆形数字）+ span.b-txt（正文）。
   芯片色由 li 修饰类的局部变量 --cat/--cat-soft 驱动：normal/默认=平台蓝（源稿同值 #0052D9）、
   key=绿 #0a8f6c、caution=橙 #C25A00——形态逐条镜像源稿，禁止降级裸列表。 */
.html-course-theme .body-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.html-course-theme .body-list li{position:relative;padding:11px 14px 11px 15px;border-radius:9px;background:var(--bg-elev);border:1px solid var(--border);border-left:4px solid var(--cat,var(--accent));font-family:var(--sans);font-size:15.5px;line-height:1.8;color:var(--text);--cat:var(--accent);--cat-soft:rgba(0,82,217,0.10);transition:box-shadow .15s,transform .1s}
.html-course-theme .body-list li:hover{box-shadow:var(--shadow-md)}
.html-course-theme .body-list li.b-normal{--cat:#0052D9;--cat-soft:rgba(0,82,217,0.10)}
.html-course-theme .body-list li.b-key{--cat:#0a8f6c;--cat-soft:rgba(10,143,108,0.12)}
.html-course-theme .body-list li.b-caution{--cat:#C25A00;--cat-soft:rgba(194,90,0,0.12)}
.html-course-theme .body-list li .b-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:0.12em;color:var(--cat,var(--accent));text-transform:uppercase;background:var(--cat-soft,rgba(0,82,217,0.10));padding:2px 8px;border-radius:99px;margin-right:9px;vertical-align:middle;white-space:nowrap}
.html-course-theme .body-list li .b-chip .b-ico{font-size:10px;line-height:1}
.html-course-theme .body-list li .b-chip.b-num{padding-left:3px}
.html-course-theme .body-list li .b-chip.b-num .b-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--cat,var(--accent));color:#fff;font-size:10px;font-weight:800}
.html-course-theme .body-list li .b-txt{vertical-align:middle}

/* flow-cue 看图引导文案（contract v3.20.0 入白名单，navy 系源稿 figure 后引导行原形态）：
   div.flow-cue.flow-see「对照上方示意图，逐条理解每个要点 ↓」——居中等宽小字大写灰调，
   flow-see 把文案染强调色（组合类，源稿全部为此组合形态） */
.html-course-theme .flow-cue{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--text-dim);text-align:center;margin:12px 0 12px;text-transform:uppercase;opacity:.85}
.html-course-theme .flow-cue.flow-see{color:var(--accent)}
.html-course-theme .quiz-submit{margin-top:14px;border:0;border-radius:8px;background:var(--accent);color:#fff;padding:10px 18px;font-weight:600;cursor:pointer;font-size:13px;font-family:var(--sans);transition:all .15s}
.html-course-theme .quiz-submit:hover{background:var(--accent-2);box-shadow:0 6px 18px rgba(0,82,217,0.32)}
/* v3.21.0：答案展开后 .quiz 挂 revealed，提交按钮隐藏（对齐源稿 .qcard.revealed .qbtn） */
.html-course-theme .quiz.revealed .quiz-submit{display:none}

/* case-flow 能力进化链时间线（v3.22.0 补容器类入白名单——源稿容器承载模块间距，此前缺位致迁移剥类丢间距） */
.html-course-theme .case-flow{margin:24px 0 28px}
.html-course-theme .case-flow-label{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-mute);margin:0 0 14px;font-weight:600}
.html-course-theme .case-flow-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.html-course-theme .case-flow-list li{position:relative;padding:10px 0 10px 26px;font-size:14.5px;line-height:1.75;color:var(--text)}
.html-course-theme .case-flow-list li::before{content:"";position:absolute;left:-4px;top:16px;width:7px;height:7px;background:var(--accent);border-radius:50%}

/* v3.24.0：ix-card-reset 无翻面卡时禁用（全正面点击无可见变化等同无交互） */
.html-course-theme .ix-card-reset:disabled{opacity:.45;cursor:not-allowed}
/* parallel-table 并行对照卡片表（contract v3.18.0 入白名单，2026-09-01 ADP 走查）：
   源稿形态 = 无边框网格卡（td 白底圆角、strong 蓝字、单元格 padding 大）——
   非传统表格，禁止降级 md-table（nowrap 首列+网格线会把 2×2 对照卡塌成竖排长表）。
   形态镜像源稿规格；保留在 table-wrap 内作滚动画框。 */
.html-course-theme .table-wrap table.parallel-table{min-width:0;border-collapse:separate;border-spacing:0}
.html-course-theme .table-wrap .parallel-table th{background:transparent;font-size:15px;padding:14px 18px;border-bottom:0}
.html-course-theme .table-wrap .parallel-table td{background:var(--bg-elev);font-weight:400;padding:18px 20px;border-bottom:0;vertical-align:top;font-size:14.5px;line-height:1.75}
.html-course-theme .table-wrap .parallel-table td strong:first-child{color:var(--accent)}
.html-course-theme .table-wrap .parallel-table tr>td+td,.html-course-theme .table-wrap .parallel-table tr>th+th{box-shadow:-12px 0 0 0 var(--bg-elev), -13px 0 0 0 var(--border)}
/* 首列恢复换行：V2 主题源给通用表格首列设了 white-space:nowrap（:736），但 parallel-table
   单元格是长段落，nowrap 会撑爆宽度把相邻单元格挤出可视区（ADP 五种范式表右上角缺失）。
   契约基准 preview.css:329 用 min-width:7.5em（允许换行），此处对齐该语义。 */
.html-course-theme .table-wrap .parallel-table th:first-child,
.html-course-theme .table-wrap .parallel-table td:first-child{white-space:normal;min-width:7.5em}
/* 包裹 parallel-table 时取消外框圆角/背景：避免与单元格 var(--bg-elev) 同色干扰
   （V2 主题源给 .table-wrap 加了 6px 圆角灰底，平行表自身也是灰底→无层级、显"传统表格"） */
.html-course-theme .table-wrap:has(table.parallel-table){border:0;background:transparent;padding:6px}

/* case-interactive 受控 iframe 交互页容器（契约 v3.15.0，对齐 skill preview.css:234-235）。
   ChapterRenderer sanitize 对容器内 iframe 豁免并归一（sandbox=allow-scripts 强制、
   allow-same-origin 剥除）；挂载（data-height 高度/懒加载/失败兜底）由 SDK 承担。 */
.html-course-theme .case-interactive{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;margin:24px 0 30px;overflow:hidden;box-shadow:0 8px 24px rgba(0,82,217,0.12)}
.html-course-theme .case-interactive iframe{width:100%;height:560px;border:0;display:block;background:#fff}
/* case-interactive 加载失败兜底占位（方案《课程iframe交互模块平台支持方案》§2.3：
   占位卡片 + 重试按钮，资源损坏/网络失败可恢复）——SDK 运行时注入，内容侧不写 */
.html-course-theme .case-interactive-fallback{padding:48px 24px;text-align:center;color:var(--text-mute)}
.html-course-theme .case-interactive-fallback p{margin:0 0 16px;font-size:14px;line-height:1.7}
.html-course-theme .case-interactive-retry{border:0;border-radius:8px;background:var(--accent);color:#fff;padding:9px 24px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--sans);transition:all .15s}
.html-course-theme .case-interactive-retry:hover{background:var(--accent-2);box-shadow:0 6px 18px rgba(0,82,217,0.32)}

/* navy-en quiz 族（契约 v3.27.0 interactiveComponents.quizNavyEn 入库，腾讯云认证英文系列
   同源 4 门课；判题语义与 quizQuick 一致，类名为源稿族命名、形态为源稿原样——区块大卡
   reviewq + 题间分隔线 qcard + 描边徽章 qn/qtype + 方字母徽章 ql。移植自 skill
   preview.css:494-523，视觉真值源；判题由 SDK 数据钩子挂载（容器 [data-correct]、
   选项 .qopt、反馈区 [data-quiz-feedback]/.qans、按钮 .qbtn）。 */
.html-course-theme .reviewq{margin:30px 0;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:26px 30px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.html-course-theme .reviewq.mod-check{margin-top:34px}
.html-course-theme .reviewq-label{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin-bottom:18px;text-transform:uppercase}
.html-course-theme .rq-count{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin-left:6px}
.html-course-theme .qcard{border-top:1px solid var(--border);padding:18px 0}
.html-course-theme .qcard:first-of-type{border-top:none;padding-top:0}
.html-course-theme .qstem{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin-bottom:12px}
.html-course-theme .qn{font-family:var(--num);font-weight:700;font-size:12px;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:2px 8px}
.html-course-theme .qtype{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);border:1px solid var(--border);border-radius:4px;padding:1px 7px}
.html-course-theme .qtext{flex:1;min-width:100%;font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.6;color:var(--text)}
.html-course-theme .qopts{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.html-course-theme .qopt{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-mute);padding:9px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer}
.html-course-theme .qopt .ql{flex:none;width:20px;height:20px;border-radius:4px;background:var(--bg-soft);color:var(--text-mute);font-family:var(--num);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.html-course-theme .qopt .qo{flex:1}
.html-course-theme .qbtn{font-family:var(--sans);font-size:13px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:8px;padding:10px 18px;cursor:pointer;transition:all .15s}
.html-course-theme .qbtn:hover{background:var(--accent-2);box-shadow:0 6px 18px rgba(0,82,217,0.32)}
.html-course-theme .qans{display:none;margin-top:14px;padding:16px 18px;border-radius:0 6px 6px 0;background:var(--bg-soft);border-left:3px solid var(--accent)}
.html-course-theme .qcard.revealed .qans{display:block}
.html-course-theme .qans-line{font-size:14px;margin-bottom:7px}
.html-course-theme .qans-line b{color:var(--accent)}
.html-course-theme .qexp{font-family:var(--serif);font-size:14.5px;line-height:1.75;color:var(--text-mute)}
.html-course-theme .qexp-line{margin:0 0 8px;padding-left:14px;position:relative}
.html-course-theme .qexp-line:last-child{margin-bottom:0}
.html-course-theme .qexp-line::before{content:"\B7";position:absolute;left:2px;color:var(--accent);font-weight:700}
/* 状态类由 SDK 挂载：revealed（容器挂载，答案展开+按钮隐藏）/correct（正确项，源稿静态
   correct 标记有 revealed 守卫不初始高亮）/wrong/selected——与 .quiz 系状态机一致（v3.21.0） */
.html-course-theme .qcard.revealed .qbtn{display:none}
.html-course-theme .qcard.revealed .qopt.correct{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.html-course-theme .qcard.revealed .qopt.correct .ql{background:var(--accent);color:#fff}
.html-course-theme .qopt.selected{outline:2px solid var(--accent);outline-offset:1px}
.html-course-theme .qcard.revealed .qopt.wrong{border-color:#b06a52;background:#f5f0ee;color:#7a4a38}
.html-course-theme .qcard.revealed .qopt.wrong .ql{background:#b06a52;color:#fff}
.html-course-theme .qopt.wrong{animation:quizShake 0.32s}