/* ==========================================================================
   fde-course-detail.css — fde-course.html 整页视觉仿「腾讯云在线学习中心」
   仅作用于 fde-course.html（类名前缀 .tcb-），不改动共享的 fde-course.css，
   避免影响 start.html / course.html。
   设计 Token 取自官网 education 样式表：主色 #0052D9、亮蓝 #00A4FF、
   浅灰底 #f5f7fa、章节卡 .curriculumCard、课时行 .lessonItem、吸底 .chapter-footer。
   ========================================================================== */

.tcb-page { --tcb-bg:#f5f7fa; --tcb-card:#fff; --tcb-blue:#0052d9; --tcb-blue-2:#00a4ff;
  --tcb-text:#293953; --tcb-text-2:#495770; --tcb-border:#e5e8ed; --tcb-line:#e5e8ed;
  --tcb-shadow:0 6px 18px rgba(55,99,170,.15); --tcb-blue-soft:#e5f0ff; }

/* ---------- Hero 浅色 banner（与 start.html hero 同色调：浅底+紫/橙光晕） ---------- */
.tcb-hero{
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 420px at 12% -20%, rgba(91, 91, 214, .14), transparent 60%),
    radial-gradient(900px 380px at 92% 0%, rgba(242, 107, 58, .12), transparent 60%),
    var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #e5e8ed);
  color: var(--color-ink, #0B0B12); padding: 52px 0 32px;
}
.tcb-hero__inner{
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; align-items: center;
  position: relative; z-index: 1;
}
.tcb-badge{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600;
  background: var(--color-primary-50, #EEEEFB); color: var(--color-primary-dark, #3A3AA0);
  margin-bottom:14px; border:0;
}
.tcb-title{
  font-size: clamp(26px, 3.6vw, 38px); font-weight:700; letter-spacing:-.02em; line-height:1.22;
  margin:0 0 14px; color: var(--color-ink, #0B0B12);
}
.tcb-sub{ font-size:16px; line-height:1.8; color: var(--color-text-2, #495770); margin:0 0 22px; max-width:640px; }
.tcb-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.tcb-meta__item{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
  background:#fff; border:1px solid var(--tcb-border);
  font-size:13px; color:var(--tcb-text); font-weight:500;
}
.tcb-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.tcb-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px;
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none;
  transition: all .18s ease; border:1px solid transparent;
}
.tcb-btn--primary{ background:var(--color-accent, #F26B3A); color:#fff; }
.tcb-btn--primary:hover{ background:var(--color-accent-hover, #E25A2A); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(242,107,58,.28); }
.tcb-btn--ghost{ background:#fff; color:var(--tcb-text); border-color:var(--tcb-border); }
.tcb-btn--ghost:hover{ color:var(--color-primary, #5B5BD6); border-color:var(--color-primary, #5B5BD6); background:#fff; }

/* 右侧答疑卡（白卡，浮在浅底上） */
.tcb-card{
  background:#fff; border-radius:14px; padding:20px; color:var(--tcb-text);
  border:1px solid var(--tcb-border);
  box-shadow: 0 12px 30px rgba(41,57,83,.10); text-align:center;
}
.tcb-card__head{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; font-size:14px; font-weight:600; color:var(--tcb-text); }
.tcb-card__dot{ width:8px; height:8px; border-radius:50%; background:#07C160; box-shadow:0 0 0 3px rgba(7,193,96,.18); }
.tcb-wx{ display:flex; align-items:center; justify-content:center; gap:10px; }
.tcb-wx__qrbox{ flex:0 0 auto; display:block; padding:10px 20px; background:#fff; border:1px solid var(--tcb-border); border-radius:16px; }
.tcb-wx__qr-img{ display:block; width:150px; height:150px; object-fit:contain; }
.tcb-wx__robot{ flex:0 0 auto; width:104px; height:auto; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(11,11,18,.16)); }
.tcb-card__tip{ margin:14px 0 0; font-size:13px; color:var(--tcb-text-2); line-height:1.5; }

/* 内容区浅灰底（仿官网 learning 页面背景） */
.tcb-outline{ background:var(--tcb-bg); }

/* ---------- 内容两栏 ---------- */
.tcb-grid{
  display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:32px; align-items:start;
  padding: 36px 0 80px;
}
.tcb-main{ min-width:0; }
.tcb-section-head{ text-align:center; margin-bottom:28px; }
.tcb-section-head .eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tcb-blue); margin-bottom:8px; }
.tcb-section-head h2{ font-size:26px; font-weight:700; color:var(--tcb-text); margin:0 0 10px; }
.tcb-section-head p{ font-size:14px; color:var(--tcb-text-2); max-width:680px; margin:0 auto; line-height:1.7; }

/* 章节卡（仿 .curriculumCard） */
.tcb-chapter{
  background:var(--tcb-card); border:1px solid var(--tcb-border); border-radius:8px;
  padding:22px 24px; margin-bottom:18px; box-shadow:0 1px 3px rgba(41,57,83,.05);
}
.tcb-chapter__head{
  display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none; padding:4px 0;
}
.tcb-chapter__head::-webkit-details-marker{ display:none; }
.tcb-chapter__no{
  flex:0 0 auto; font-size:13px; font-weight:700; color:var(--tcb-blue);
  background:var(--tcb-blue-soft); padding:4px 10px; border-radius:6px; letter-spacing:.04em;
}
.tcb-chapter__title{ flex:1 1 auto; font-size:18px; font-weight:600; color:var(--tcb-text); }
.tcb-chapter__count{ flex:0 0 auto; font-size:13px; color:var(--tcb-text-2); }
.tcb-caret{ flex:0 0 auto; width:18px; height:18px; color:var(--tcb-text-2); transition:transform .2s ease; }
.tcb-chapter[open] .tcb-caret{ transform:rotate(180deg); }
.tcb-lessons{ margin-top:8px; padding-top:6px; }

/* 课时行（仿 .lessonItem） */
.tcb-lesson{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 6px; position:relative; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--tcb-line); transition: background .15s ease;
}
.tcb-lesson:last-child{ border-bottom:none; }
.tcb-lesson:hover{ background:var(--tcb-blue-soft); border-radius:8px; }
.tcb-lesson__left{ display:flex; align-items:center; gap:12px; min-width:0; }
.tcb-lesson__idx{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--tcb-blue); font-variant-numeric:tabular-nums; }
.tcb-lesson__title{ font-size:15px; color:var(--tcb-text); line-height:1.5; }
.tcb-lesson__right{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.tcb-lesson__dur{ font-size:12px; color:var(--tcb-text-2); }
.tcb-lesson__watch{
  display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--tcb-blue);
  white-space:nowrap;
}
.tcb-lesson:hover .tcb-lesson__watch{ text-decoration:underline; }

/* ---------- 右侧 sticky 信息卡 ---------- */
.tcb-aside{ position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; }
.tcb-infocard{ background:var(--tcb-card); border:1px solid var(--tcb-border); border-radius:12px; padding:20px; box-shadow:0 1px 3px rgba(41,57,83,.05); }
.tcb-infocard h3{ font-size:16px; font-weight:700; color:var(--tcb-text); margin:0 0 14px; }
.tcb-info-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--tcb-line); font-size:13px; }
.tcb-info-row:last-of-type{ border-bottom:none; }
.tcb-info-row span{ color:var(--tcb-text-2); }
.tcb-info-row b{ color:var(--tcb-text); font-weight:600; }
.tcb-infocard .tcb-btn{ width:100%; justify-content:center; margin-top:14px; }
.tcb-qr-card{ background:var(--tcb-card); border:1px solid var(--tcb-border); border-radius:12px; padding:18px; text-align:center; }
.tcb-qr-card img{ width:140px; height:140px; object-fit:contain; border:1px solid var(--tcb-border); border-radius:10px; padding:6px; background:#fff; }
.tcb-qr-card p{ margin:12px 0 0; font-size:13px; color:var(--tcb-text-2); line-height:1.5; }

/* ---------- 吸底行动条（仿 .chapter-footer） ---------- */
.tcb-footbar{
  position:sticky; bottom:0; z-index:30;
  background:hsla(0,0%,100%,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--tcb-border);
}
.tcb-footbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.tcb-footbar__info{ font-size:13px; color:var(--tcb-text-2); }
.tcb-footbar__info b{ color:var(--tcb-text); }
.tcb-footbar__inner .tcb-btn--primary{ background:var(--tcb-blue); color:#fff; }
.tcb-footbar__inner .tcb-btn--primary:hover{ background:var(--tcb-blue-2); box-shadow:0 6px 18px rgba(0,82,217,.32); }

/* ---------- 课程内容阅读器（官网同款「左目录 + 右内容」1:1 搬取） ---------- */
/* 阅读器自身样式全部在 assets/css/fde-course-reader.css（Shadow DOM 内加载，天然隔离） */
.fde-course-section{ padding-top:0; padding-bottom:56px; background:var(--tcb-bg); scroll-margin-top:68px; }
.fde-course-section .tcb-section-head{ margin-bottom:30px; }
.fde-course-section .tcb-section-head p a{ color:var(--tcb-blue); text-decoration:underline; text-underline-offset:3px; }
.fde-course-section .tcb-section-head p a:hover{ color:var(--tcb-blue-2); }
#fde-reader{ display:block; width:100%; }

/* ---------- 右侧二维码区高亮（点击「扫码咨询考证」触发） ---------- */
.tcb-hero__card{ transition: background-color .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease; }
.tcb-hero__card.is-qr-highlight{
  background: var(--tcb-blue, #0052D9);
  border-color: var(--tcb-blue, #0052D9);
  color:#fff;
  animation: tcbQrPulse 1.15s ease-out 2;
}
.tcb-hero__card.is-qr-highlight .tcb-card__head{ color:#fff; }
.tcb-hero__card.is-qr-highlight .tcb-card__tip{ color:rgba(255,255,255,.86); }
.tcb-hero__card.is-qr-highlight .tcb-card__dot{ box-shadow:0 0 0 3px rgba(255,255,255,.28); }
@keyframes tcbQrPulse{
  0%{ box-shadow:0 12px 30px rgba(41,57,83,.10), 0 0 0 0 rgba(0,82,217,.45); }
  70%{ box-shadow:0 12px 30px rgba(41,57,83,.10), 0 0 0 16px rgba(0,82,217,0); }
  100%{ box-shadow:0 12px 30px rgba(41,57,83,.10), 0 0 0 0 rgba(0,82,217,0); }
}
[data-theme="dark"] .tcb-hero__card.is-qr-highlight{ background:#1f4fd0; border-color:var(--tcb-blue-2, #3aa0ff); }
@media (prefers-reduced-motion: reduce){
  .tcb-hero__card.is-qr-highlight{ animation:none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px){
  .tcb-hero__inner{ grid-template-columns:1fr; }
  .tcb-hero__card{ width:100%; max-width:560px; margin-inline:auto; }
  .tcb-grid{ grid-template-columns:1fr; }
  .tcb-aside{ position:static; order:-1; }
}
@media (max-width: 640px){
  .tcb-hero{ padding:40px 0 44px; }
  .tcb-title{ font-size:26px; }
}

/* ---------- 暗色模式（沿用站点 dark token 思路，仅替换 tcb 变量） ---------- */
[data-theme="dark"] .tcb-page{
  --tcb-bg:#0e0f14; --tcb-card:#17181f; --tcb-blue:#3d7bff; --tcb-blue-2:#3aa0ff;
  --tcb-text:#e8eaf0; --tcb-text-2:#aab1c2; --tcb-border:#262a36; --tcb-line:#262a36;
  --tcb-shadow:0 6px 18px rgba(0,0,0,.4); --tcb-blue-soft:rgba(61,123,255,.16);
}
[data-theme="dark"] .tcb-card,
[data-theme="dark"] .tcb-infocard,
[data-theme="dark"] .tcb-qr-card{ box-shadow:none; }
[data-theme="dark"] .tcb-qr-card img{ background:#0e0f14; }
[data-theme="dark"] .tcb-footbar{ background:hsla(222,18%,10%,.92); }

/* 暗色 hero（对齐 fde-course.css 的暗色 hero 语义） */
[data-theme="dark"] .tcb-hero{
  background:
    radial-gradient(1100px 420px at 12% -20%, rgba(91,91,214,.22), transparent 60%),
    radial-gradient(900px 380px at 92% 0%, rgba(242,107,58,.18), transparent 60%),
    var(--color-ink-soft, #171733);
  border-color: var(--color-ink-line, rgba(255,255,255,.12));
}
[data-theme="dark"] .tcb-badge{ background: rgba(91,91,214,.22); color:#c9c9ff; }
[data-theme="dark"] .tcb-meta__item{ background:var(--color-ink-soft, #171733); border-color:var(--color-ink-line, rgba(255,255,255,.12)); color:var(--color-ink-text-2, rgba(255,255,255,.72)); }
[data-theme="dark"] .tcb-btn--ghost{ background:transparent; color:var(--color-ink-text-2, rgba(255,255,255,.72)); border-color:var(--color-ink-line, rgba(255,255,255,.12)); }
[data-theme="dark"] .tcb-btn--ghost:hover{ color:#fff; border-color:var(--color-primary, #5B5BD6); background:transparent; }