/* =========================================================
   主题详情页专属样式（T09 样例）
   设计要点：顶部 Hero 区别于「通用主题」页（暖色夏日渐变 + 数据胶囊），
   内容区沿用全站 .site-nav / .yx-footer 体系，保证整站一致。
   ========================================================= */
:root {
  --content-w: 1000px; /* 主体内容宽度单一来源；nav.css 亦定义同一值，二者一致不冲突 */
  --td-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --td-text: #1e293b;
  --td-text-light: #64748b;
  --td-border: #e2e8f0;
  --td-bg: #f8fafc;
  --td-primary: #ff7e5f;
  --td-primary-d: #ff5e62;
  --td-teal: #14b8a6;
  --td-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --td-shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --td-radius: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--td-font);
  color: var(--td-text);
  background: var(--td-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* 边界 = 内容宽 + 左右内边距(56px)，使内部可见内容精确为 var(--content-w)=1000px，
   正文与表格对齐到同一 1000px，不再出现「表格1000 / 正文944」的偏差 */
.td-main { max-width: calc(var(--content-w) + 56px); margin: 0 auto; padding: 28px 28px 64px; }

/* ── 面包屑 ── */
.td-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--td-text-light);
  margin-bottom: 18px; flex-wrap: wrap;
}
.td-crumb a { color: var(--td-text-light); text-decoration: none; transition: color .15s; }
.td-crumb a:hover { color: var(--td-primary-d); }
.td-crumb .sep { opacity: .5; }
.td-crumb .cur { color: var(--td-text); font-weight: 600; }

/* ── 顶部 Hero（区别于通用主题页：暖色夏日渐变 + 数据胶囊）── */
.td-hero {
  position: relative;
  border-radius: 24px;
  padding: 50px 40px 60px;
  background: linear-gradient(120deg, #ff9a3c 0%, #ff6b6b 45%, #ff8e8e 70%, #36d1dc 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--td-shadow-md);
}
.td-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
}
.td-hero::before {
  content: ""; position: absolute; left: -40px; bottom: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
}
.td-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
.td-hero-title {
  font-size: 2.6rem; font-weight: 900; margin: 16px 0 8px;
  letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.td-hero-sub { font-size: 1.05rem; opacity: .95; font-weight: 500; }
.td-hero .td-lead {
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  position: static;
  font-size: 15px; line-height: 1.8; font-weight: 500;
  color: rgba(255,255,255,.95);
}
.td-hero-tags { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.td-hero-tags a, .td-hero-tags span {
  background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 999px;
  font-size: 13px;
}
/* 2026-09-18：子主题胶囊升级为可点击链接（外观不变，仅加 hover 反馈） */
.td-hero-tags a {
  color: #fff; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.td-hero-tags a:hover { background: rgba(255,255,255,.34); transform: translateY(-2px); }
.td-hero-tags a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.td-hero-stats {
  position: relative; z-index: 2;
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px;
}
.td-stat {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px; padding: 16px 24px; min-width: 116px;
  backdrop-filter: blur(4px);
}
.td-stat b { display: block; font-size: 1.95rem; font-weight: 800; line-height: 1.1; }
.td-stat span { font-size: 14px; opacity: .92; }

/* ── 区块标题 ── */
.td-sec { margin-top: 44px; }
.td-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.4rem; font-weight: 800; color: var(--td-text);
  margin: 0 0 6px;
}
.td-sec-title .ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#ffe3d3,#ffd1dc); font-size: 20px;
}
.td-sec-desc { color: var(--td-text-light); font-size: 14px; margin: 0 0 18px; }

/* ── 主题介绍首行：引语文本框 ── */
.td-lead {
  position: relative;
  background: linear-gradient(135deg, #fff7ed, #fef3f2);
  border: 1px solid #fecdd3;
  border-left: 4px solid #fb7185;
  border-radius: var(--td-radius);
  padding: 18px 22px;
  margin: 0 0 18px;
  font-size: 16px; line-height: 1.85; font-weight: 600;
  color: #475569;
}

/* ── 主题介绍 ── */
.td-intro {
  background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius);
  padding: 22px 24px; box-shadow: var(--td-shadow-sm);
  font-size: 15px; color: #334155;
}
.td-intro p { margin: 0 0 12px; line-height: 1.85; }
.td-intro p:last-child { margin-bottom: 0; }
.td-intro ol { margin: 4px 0 12px; padding-left: 22px; }
.td-intro ol li { margin: 5px 0; line-height: 1.75; }
.td-intro b { color: #1e293b; font-weight: 700; }
.td-intro-quote {
  margin: 0 0 12px; padding: 12px 16px;
  background: #f8fafc; border-left: 3px solid #6366f1; border-radius: 8px;
  color: #475569; line-height: 1.85;
}
.td-intro-quote:last-child { margin-bottom: 0; }

/* ── 主题环境创设 ── */
.env-block {
  background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius);
  padding: 18px 22px; box-shadow: var(--td-shadow-sm); margin-top: 16px;
}
.env-h {
  font-size: 15px; font-weight: 700; color: var(--td-primary-d);
  margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.env-h::before {
  content: ""; width: 4px; height: 15px; border-radius: 3px;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.env-list { margin: 0; padding-left: 20px; }
.env-list li { font-size: 14px; color: #334155; line-height: 1.7; }
.env-list li + li { margin-top: 4px; }

/* ── 优秀环创案例入口链接（占位） ── */
.env-case-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 294px; margin: 16px auto 0;
  padding: 12px 20px; border-radius: 999px;
  background: #fff7ed; border: 1px solid var(--td-primary);
  color: var(--td-primary-d); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.env-case-link .ic { font-size: 16px; line-height: 1; }
.env-case-link .arrow { transition: transform .15s ease; }
.env-case-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.env-case-link:hover .arrow { transform: translateX(3px); }

/* ── 经验递进 ribbon ── */
.td-flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 18px;
}
.td-flow-step {
  position: relative;
  background: #fff; border: 1px solid var(--td-border); border-radius: 14px;
  padding: 18px 16px; text-align: center; box-shadow: var(--td-shadow-sm);
}
.td-flow-step .num {
  width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.td-flow-step:nth-child(2) .num { background: linear-gradient(135deg,#ffb347,#ff7e5f); }
.td-flow-step:nth-child(3) .num { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.td-flow-step:nth-child(4) .num { background: linear-gradient(135deg,#22d3ee,#14b8a6); }
.td-flow-step .st-name { font-weight: 700; font-size: 15px; }
.td-flow-step .st-label { font-size: 12px; color: var(--td-text-light); margin-top: 2px; }
/* 2026-09-20：去掉卡间连接箭头线（::after），按用户要求 */
/* 经验递进节点可点击跳转对应子主题 */
a.td-flow-step {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.td-flow-step:hover {
  transform: translateY(-3px); box-shadow: var(--td-shadow-md); border-color: #ffd5c8;
}
a.td-flow-step:focus-visible { outline: 2px solid var(--td-primary-d); outline-offset: 2px; }

/* ── 子主题区块 ── */
.td-sub {
  position: relative;
  background: #fff; border: 1px solid var(--td-border); border-radius: 20px;
  padding: 24px; margin-top: 22px; box-shadow: var(--td-shadow-sm);
  scroll-margin-top: 80px;
}
/* 仅"子主题名称"与"进入详情"按钮可点击跳转；介绍文字与饼图区域不可点 */
.td-sub-head {
  display: flex; align-items: flex-start; gap: 16px;
  text-decoration: none; color: inherit; cursor: pointer;
  border-radius: 12px; padding: 4px 6px; margin: -4px -6px;
  transition: background .15s ease;
}
.td-sub-head:hover { background: #f1f5f9; }
.td-sub-head:hover .td-sub-title { color: var(--td-primary); }
.td-sub-head:focus-visible { outline: 2px solid var(--td-primary-d); outline-offset: 3px; }
/* 2026-10-23：td-sub-order 对齐 sh-order 四色体系（数字 1-4，子①橙红/子②橙/子③紫/子④青绿） */
.td-sub-order {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.td-sub .td-sub-order.n2 { background: linear-gradient(135deg,#ffb347,#ff7e5f); }
.td-sub .td-sub-order.n3 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.td-sub .td-sub-order.n4 { background: linear-gradient(135deg,#22d3ee,#14b8a6); }
.td-sub-title { font-size: 1.3rem; font-weight: 800; margin: 0; }
.td-sub-tag {
  display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700;
  color: var(--td-primary-d); background: #fff1ee; padding: 3px 10px; border-radius: 999px;
}
.td-sub-desc { margin: 12px 0 4px; font-size: 14.5px; color: #475569; }

.td-sub-body { margin-top: 18px; }
.td-sub-meta { font-size: 13.5px; color: #475569; }
.td-sub-meta .lab { color: var(--td-text-light); }

/* ── 饼图区 ── */
.td-pies { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.td-pie-card {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  border: 1px solid var(--td-border); border-radius: 14px; padding: 16px 18px;
  background: #fcfdff; box-shadow: var(--td-shadow-sm);
}
.pie-graphic { flex: 0 0 auto; line-height: 0; }
.pie-info { flex: 0 1 auto; min-width: 0; }
.td-pie-card h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #334155; }
.td-pie-legend { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.td-pie-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #475569; }
.td-pie-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.td-pie-legend .lg .v { margin-left: 6px; font-weight: 700; color: #334155; white-space: nowrap; }

/* ── 活动名称总览 ── */
.td-names { margin-top: 18px; border: 1px dashed var(--td-border); border-radius: 14px; padding: 6px 14px; }
.td-names summary {
  cursor: pointer; font-weight: 700; font-size: 14px; color: #334155;
  padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px;
}
.td-names summary::-webkit-details-marker { display: none; }
.td-names summary::before { content: "▸"; color: var(--td-primary); transition: transform .15s; }
.td-names[open] summary::before { transform: rotate(90deg); }
.td-names-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 14px; }
.td-name-chip {
  font-size: 12.5px; color: #475569; background: #f1f5f9;
  border: 1px solid #e8eef5; border-radius: 999px; padding: 5px 12px;
  transition: all .15s;
}
.td-name-chip:hover { background: #ffe9e4; color: var(--td-primary-d); border-color: #ffd5c8; }

/* ── 子主题卡片按钮 ── */
.td-sub-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.btn-td {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 11px 22px; border-radius: 12px; box-shadow: 0 6px 16px rgba(255,94,98,.28);
  transition: all .15s;
}
.btn-td:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,94,98,.36); }

/* ── 子主题详情页顶部 Hero（与通用主题页、主页均区分）── */
.td-subhero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, #fff7f4, #fff0f4);
  border: 1px solid #ffe0d6; border-left: 5px solid var(--td-primary);
  border-radius: 18px; padding: 22px 26px; box-shadow: var(--td-shadow-sm);
}
/* 2026-10-08：sh-order 编号数字 1-4 + 四色渐变（60px 圆角方块，用户定稿） */
.td-subhero .sh-order {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.td-subhero .sh-order.n2 { background: linear-gradient(135deg,#ffb347,#ff7e5f); }
.td-subhero .sh-order.n3 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.td-subhero .sh-order.n4 { background: linear-gradient(135deg,#22d3ee,#14b8a6); }
.td-subhero .sh-title { font-size: 1.6rem; font-weight: 800; margin: 0; }
.td-subhero .sh-tag { font-size: 13px; color: var(--td-text-light); margin-top: 4px; }
.td-subhero .sh-count {
  margin-left: auto; text-align: center; color: var(--td-primary-d);
  font-weight: 800; font-size: 1.8rem; line-height: 1;
}
.td-subhero .sh-count span { display: block; font-size: 12px; font-weight: 600; color: var(--td-text-light); margin-top: 4px; }
.td-sub {
  margin: 20px 0 6px;
}
.td-sub + .td-goals { margin: 6px 0 0; }

/* ── 核心目标框（标题 + 正文同框）── */
.td-goalbox {
  background: #fff; border: 1px solid var(--td-border);
  border-radius: var(--td-radius); padding: 20px 22px;
  box-shadow: var(--td-shadow-sm); margin-top: 16px;
}
.td-goal-title {
  margin: 0 0 12px; font-weight: 700; font-size: 15px; color: #1e293b;
}
.td-goalbox .td-goals { margin: 0; }
.td-goals { margin: 16px 0 0; padding-left: 20px; color: #475569; font-size: 14.5px; }
.td-goals li { margin-bottom: 6px; }
.td-coreexp {
  margin-top: 14px; background: #f0fdfa; border: 1px solid #c7f0e8;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #0f766e;
}

/* ── 子主题详情页：活动清单表 ── */
.act-wrap {
  margin-top: 18px; /* 内部可见内容现已为 1000px（.td-main 边界已含左右内边距），表格自然满宽、与正文对齐 */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* 隐藏底部滚动条，仍保留触摸/触控板滚动能力 */
  border: 1px solid var(--td-border);
  border-radius: 14px; background: #fff; box-shadow: var(--td-shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.act-wrap::-webkit-scrollbar { display: none; }
.act-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1000px; font-size: 13px; }
.act-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #475569; vertical-align: top;
}
.act-table tbody tr:hover { background: #fffaf7; }
/* 分组简介行：colspan 单元格本身不做 sticky(对合并格无效)，改由内部 .grp-label 做 sticky 子元素。
   td 保留 920 宽作为 sticky 活动范围；.grp-label 宽度=滚动容器可视宽(--bar-w 由 JS 同步)，因窄于 td 故可粘住。 */
.act-table tbody tr.act-group td {
  position: static; z-index: 4;
  background: transparent; padding: 0; border-bottom: 0;
}
.act-table tbody tr.act-group:hover td { background: transparent; }
.act-table tbody tr.act-group .grp-label {
  display: block; position: -webkit-sticky; position: sticky; left: 0; z-index: 4;
  width: var(--bar-w, 100%); max-width: 100%;
  background: #fff4ef; color: #c2410c; font-weight: 700; font-size: 13.5px;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--td-border);
  box-shadow: inset 3px 0 0 #fb923c;
  /* 提升到独立合成层，消除横向滚动时 sticky 重绘抖动（iOS 动量滚动尤其需要） */
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
}
.act-table tbody tr.act-group-head th {
  background: #fbf3ee; color: #9a3412; font-weight: 600; font-size: 12px;
  text-align: left; padding: 7px 14px; border-bottom: 1px solid #ffe1d6;
  white-space: nowrap;
}
.act-table tbody tr.act-group-head th:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 3; background: #fbf3ee; border-right: 1px solid var(--td-border); }
.act-table .col-id { position: sticky; left: 0; z-index: 2; background: #fff; font-weight: 700; color: #64748b; white-space: nowrap; border-right: 1px solid var(--td-border); }
.act-table tbody tr:hover .col-id { background: #fffaf7; }
.act-name { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; font-weight: 600; color: #1e293b; width: 112px; min-width: 96px; background: #fff; border-right: 1px solid var(--td-border); }
.act-table tbody tr:hover .act-name { background: #fffaf7; }
.act-name .act-code { display: block; font-weight: 400; font-size: 11px; color: #94a3b8; margin-top: 2px; font-family: 'Courier New', monospace; }
.act-type {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
}
.t-学习 { background: #eef2ff; color: #4f46e5; }
.t-游戏 { background: #fef3c7; color: #b45309; }
.t-运动 { background: #d1fae5; color: #047857; }
.t-生活 { background: #fce7f3; color: #be185d; }
.t-家园 { background: #cffafe; color: #0e7490; }
.act-type-col { width: 84px; min-width: 76px; text-align: center; }
.act-domains { color: #64748b; width: 84px; min-width: 76px; text-align: center; }
/* 适用场景列：2026-08-05 起只取「适用场景」值（不再拼接适用环节），内容更短，列宽较原 100px 减 20% → 80px */
.act-scene { color: #64748b; width: 80px; min-width: 70px; line-height: 1.5; }
/* 活动目标/活动简介为文字主列：操作列压缩到刚好显示按钮后，余量均分给二者 */
.act-goal { width: 151px; }   /* 原 120 + 31 */
.act-intro { width: 255px; }  /* 原 224 + 31 */
.act-keywords { width: 104px; min-width: 88px; color: #475569; }
.act-res { text-align: center; white-space: nowrap; width: 100px; min-width: 90px; } /* 刚好完整显示「查看教案 →」按钮 */
.res-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--td-primary-d);
  text-decoration: none; border: 1px solid #ffd5c8; border-radius: 8px;
  padding: 5px 10px; transition: all .15s;
}
.res-link:hover { background: var(--td-primary-d); color: #fff; border-color: var(--td-primary-d); }

/* ── 统计汇总条 ── */
.act-stat {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13px; color: #475569; background: #f8fafc;
  border: 1px solid var(--td-border); border-radius: 12px; padding: 12px 16px;
}
.act-stat b { color: #1e293b; }

/* ── 备选活动（不计入统计，弱区分，不套虚线框） ── */
.alt-sec .td-sec-title { color: #475569; }
/* 备选活动表格与正式活动表格共用 .act-table 的全部样式（含活动名称列 sticky 白底、暖色表头、#fffaf7 悬停），仅由上方文案提示其"不计入统计"的可选性质 */

/* ── 子主题详情页：活动清单左侧悬浮分组导航（仿 universal-themes 年龄段竖向导航） ── */
/* 导航作为 .td-main 直接子项 float 悬浮在内容左外：不挤压表格宽度，初始位置与「活动清单」标题行对齐，
   sticky 后贯穿整页主题内容；窄屏降级为顶部横排、移动端隐藏 */
.act-nav {
  float: left;
  position: sticky; top: 84px;
  width: 150px;
  margin-left: -170px;        /* 推到内容左外，悬浮于主题内容左侧 */
  margin-top: 0;              /* 导航位于「活动清单」描述行之后，浮动模式自然与表格顶部对齐 */
  margin-bottom: 24px;
  background: #fff; border: 1px solid var(--td-border); border-radius: 16px;
  padding: 16px 12px; box-shadow: var(--td-shadow-sm); z-index: 20;
}
.act-nav .an-title {
  font-size: 13px; font-weight: 800; color: var(--td-text);
  letter-spacing: 0.05em; text-align: center; margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--td-border);
}
/* ── 按时间 / 按类型 双排序切换 Tab（活动清单排序视图，2026-09-11 新增） ── */
.act-nav .an-tabs {
  display: flex; gap: 2px; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--td-border);
}
.act-nav .an-tab {
  position: relative; flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--td-text-light);
  padding: 6px 0 9px; transition: color 0.15s;
}
.act-nav .an-tab:hover { color: var(--td-text); }
.act-nav .an-tab::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 26px; height: 3px;
  border-radius: 2px; background: #fb923c; transform: translateX(-50%) scaleX(0);
  transition: transform 0.15s;
}
.act-nav .an-tab.active { color: #c2410c; }
.act-nav .an-tab.active::after { transform: translateX(-50%) scaleX(1); }
.act-nav .an-tab:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; border-radius: 6px; }
.act-nav .an-list[hidden] { display: none; }
/* 按类型视图的表格 tbody 切换（显式声明，防 UA hidden 被表格样式覆盖） */
.act-table tbody[hidden] { display: none !important; }

/* ── 顶部横条降级时的排序 Tab 适配（861–1499px） ──
   nav.css 的 @media(max-width:1499px) 会把 .act-nav 降级为横向滚动条；
   此时 an-tabs/an-list 需同步横排：Tab 变胶囊按钮、列表容器 display:contents
   散开为横条直接子项（与 ≤860px 的横排规则保持一致） */
@media (max-width: 1499px) {
  /* 横条模式吸顶：页面滚动后悬浮在视口顶部（选择器与 nav.css 降级规则同特异性，靠后加载覆盖其 position:static）。
     导航位于「活动清单」描述行与表格之间，上方间距由 .td-sec-desc 的 18px 下边距提供 */
  .page-main:has(.act-nav) .act-nav {
    position: sticky; top: 0; z-index: 60;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
    scroll-margin-top: 0;
  }
  .act-nav .an-tabs { flex: 0 0 auto; margin: 0 10px 0 0; padding: 0 10px 0 0; border-bottom: none; border-right: 2px solid var(--td-border); }
  .act-nav .an-tab { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--td-border); border-radius: 999px; font-size: 12px; }
  .act-nav .an-tab.active { background: #FFF1E6; border-color: #fb923c; color: #c2410c; }
  .act-nav .an-tab::after { display: none; }
  .act-nav .an-list { display: contents; }
}

/* 手机端（≤860px，主导航收起为 48px 顶部栏）：悬浮横条保持在顶栏下方，避免重叠。
   特异性与上方 1499 吸顶规则相同、位置靠后，覆盖其 top:0 */
@media (max-width: 860px) {
  .page-main:has(.act-nav) .act-nav { top: 48px; }
}
.act-nav a {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: 10px; font-size: 13px; line-height: 1.2; color: var(--td-text-light);
  text-decoration: none; transition: all 0.15s;
}
.act-nav a .an-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--td-accent, #fb923c); transition: transform 0.15s;
}
.act-nav a:hover { background: #f8fafc; color: var(--td-text); }
.act-nav a:hover .an-dot { transform: scale(1.35); }
.act-nav a.active { background: #FFF1E6; color: #c2410c; font-weight: 700; }
.act-nav a.active .an-dot { background: #fb923c; }

/* 锚点跳转的精确偏移由 gen_theme.py 的 ACT_NAV_JS 用 window.scrollTo 动态控制（浮栏模式置顶=0；横条吸顶模式=横条高度+14px），不依赖 <tr> 上的 scroll-margin（浏览器行为不稳定，易导致定位偏上） */

/* ── 上/下一篇 子主题导航 ── */
.td-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.td-pager a {
  flex: 1; text-decoration: none; color: #334155;
  border: 1px solid var(--td-border); border-radius: 14px; padding: 14px 18px;
  background: #fff; box-shadow: var(--td-shadow-sm); transition: all .15s;
}
.td-pager a:hover { border-color: #ffd5c8; transform: translateY(-2px); }
.td-pager .pg-lab { font-size: 12px; color: var(--td-text-light); }
.td-pager .pg-tit { font-weight: 700; font-size: 15px; }
.td-pager .next { text-align: right; }
.td-pager .disabled { visibility: hidden; }

/* ── 响应式 ── */
@media (max-width: 860px) {
  .td-main { padding: 18px 16px 48px; }
  .td-hero { padding: 30px 22px; border-radius: 18px; }
  .td-hero-title { font-size: 1.9rem; }
  .td-flow { grid-template-columns: 1fr 1fr; }
  .td-sub-body { grid-template-columns: 1fr; }
  .td-pies { grid-template-columns: 1fr; }

  /* 顶部统计卡片：始终一行 4 列不换行 */
  .td-hero-stats {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .td-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
    text-align: center;
    border-radius: 10px;
  }
  .td-stat b { font-size: 1.2rem; }
  .td-stat span { font-size: 10px; }

  /* 活动清单左侧分组导航：中等屏降级为顶部横排（不悬浮、不挤压表格），移动端隐藏 */
  .act-nav {
    float: none; position: static; width: 100%; margin: 0 0 18px;
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; padding: 10px 12px; scrollbar-width: none;
  }
  .act-nav::-webkit-scrollbar { display: none; }
  .act-nav .an-title { display: none; }
  .act-nav a { white-space: nowrap; flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--td-border); }
  /* 排序 Tab / 列表容器的横排适配已由上方 @media(max-width:1499px) 统一覆盖 */
}

@media (max-width: 860px) {
  /* 移动端隐藏分组导航，分组仍可滚动到达 */
  .act-nav { display: none; }
}

@media (max-width: 520px) {
  /* 子主题卡片最小 2×2，不退化为 1 列 */
  .td-flow { grid-template-columns: 1fr 1fr; }
  .td-pager { flex-direction: column; }
  /* 手机端饼图：图与图例统计左右同行（不再上图下文） */
  .td-pie-card { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
  .td-pie-legend { width: auto; max-width: none; }
  .pie-graphic svg { width: 104px; height: 104px; }

  /* 极小屏幕统计卡片进一步缩小 */
  .td-stat { padding: 8px 4px; }
  .td-stat b { font-size: 1.05rem; }
  .td-stat span { font-size: 9px; }
}

/* =========================================================
   知识概念图谱（kg-）+ 主题生长点表（gp-）
   2026-10-23 定稿自 T11 预览：序号数字 1-4、子题默认展开、
   生长点表子题列 gp-topic 内层对齐（td 保持 table-cell）。
   ========================================================= *//* ── 知识概念图谱 ── */
.kg-wrap {
  background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius);
  padding: 22px 22px 16px; box-shadow: var(--td-shadow-sm); margin-top: 16px;
}
.kg-root { display: flex; justify-content: center; }
.kg-node {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; font-family: inherit; line-height: 1.4;
}
.kg-root-node {
  padding: 14px 26px;
  background: linear-gradient(120deg, #ff9a3c 0%, #ff6b6b 60%, #ff8e8e 100%);
  color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(255,110,98,.28);
  flex-direction: column; gap: 2px; text-align: center;
}
.kg-root-node .kg-ico { font-size: 22px; line-height: 1; }
.kg-root-node i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .9; }

/* 分支连线（中心 → 四分题） */
.kg-branches {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 34px; padding-top: 26px;
}
.kg-branches::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 32px;
  background: repeating-linear-gradient(to bottom, #cbd5e1 0 4px, transparent 4px 8px);
}
.kg-branch { display: flex; flex-direction: column; }
.kg-branch-node {
  width: 100%; cursor: pointer; text-align: left;
  background: #f8fafc; border: 1px solid var(--td-border);
  padding: 11px 12px; font-size: 14px; font-weight: 700; color: var(--td-text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kg-branch-node:hover { border-color: #ffd5c8; background: #fff; box-shadow: var(--td-shadow-sm); }
.kg-branch-node:focus-visible { outline: 2px solid var(--td-primary-d); outline-offset: 2px; }
.kg-branch-node[aria-expanded="true"] { background: #fff; border-color: #ffd5c8; }
.kg-branch.open .kg-branch-node { background: #fff; border-color: #ffd5c8; }
.kg-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  color: #fff; background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.kg-branch:nth-child(2) .kg-badge { background: linear-gradient(135deg,#ffb347,#ff7e5f); }
.kg-branch:nth-child(3) .kg-badge { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.kg-branch:nth-child(4) .kg-badge { background: linear-gradient(135deg,#22d3ee,#14b8a6); }
.kg-arrow {
  margin-left: auto; font-size: 12px; color: var(--td-text-light);
  transition: transform .18s ease;
}
.kg-branch.open .kg-arrow { transform: rotate(180deg); }

/* 经验点列表 */
.kg-points {
  list-style: none; margin: 8px 0 0; padding: 10px 10px 8px;
  background: #fff; border: 1px solid var(--td-border); border-radius: 10px;
}
.kg-points li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #334155; padding: 5px 2px; line-height: 1.55;
}
/* 经验点文本可换行（长条如「身体与指纹的独特性（指纹、影子、声音）」）：
   文本与 jump 标签包一层 .kg-text（flex:1，jump 收尾不挤压）；圆点随首行 */
.kg-points li .kg-text { flex: 1 1 auto; }
.kg-points li + li { border-top: 1px dashed #eef2f7; }
.kg-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;  /* (13px*1.55 - 8px)/2 ≈ 6px，使圆点与首行文字垂直居中（多行文本时钉在首行） */
}
.kg-dot.d1 { background: #ff6b6b; }
.kg-dot.d2 { background: #ff9a3c; }
.kg-dot.d3 { background: #8b5cf6; }
.kg-dot.d4 { background: #14b8a6; }
/* 跳出连接说明条 */
.kg-jumps { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.kg-jump-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #475569;
  background: #fff7ed; border: 1px dashed var(--td-primary);
  border-radius: 10px; padding: 8px 12px;
}
.kg-line.dashed {
  flex: 0 0 auto; width: 34px; height: 0;
  border-top: 2px dashed var(--td-primary-d);
}

/* ── 主题生长点表 ── */
.gp-table-wrap {
  background: #fff; border: 1px solid var(--td-border); border-radius: var(--td-radius);
  box-shadow: var(--td-shadow-sm); margin-top: 16px; overflow-x: auto;
}
.gp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.gp-table thead th {
  background: linear-gradient(135deg, #fff3ee, #fff8f4);
  color: #9a3412; font-size: 13.5px; font-weight: 800; text-align: left;
  padding: 12px 14px; border-bottom: 2px solid #ffd5c8; white-space: nowrap;
}
.gp-table thead th.gp-col-topic { min-width: 130px; }
.gp-table tbody td {
  padding: 13px 14px; font-size: 13.5px; line-height: 1.75; color: #334155;
  border-bottom: 1px solid var(--td-border); vertical-align: top;
}
.gp-table tbody tr:last-child td { border-bottom: none; }
.gp-table tbody tr:nth-child(even) { background: #fcfdfe; }
.gp-table tbody tr:hover { background: #fff7f3; }
.gp-table td.gp-col-topic { white-space: nowrap; font-weight: 700; color: var(--td-text); }
/* 徽章 + 文本对齐：td 保持 table-cell（保证行底格线与其他列对齐），
   flex 对齐移入内容包裹层 .gp-topic（徽章放入包裹层内部，gap 生效） */
.gp-table td.gp-col-topic .gp-topic {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
}
.gp-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--td-primary), var(--td-primary-d));
}
.gp-badge.b2 { background: linear-gradient(135deg,#ffb347,#ff7e5f); }
.gp-badge.b3 { background: linear-gradient(135deg,#a78bfa,#8b5cf6); }
.gp-badge.b4 { background: linear-gradient(135deg,#22d3ee,#14b8a6); }

/* ── 响应式降级 ── */
@media (max-width: 860px) {
  /* 图谱：中心在上，四分题改 2×2 竖排 */
  .kg-branches { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .kg-branches::before { display: none; }
  .kg-root-node { padding: 12px 20px; font-size: 15px; }

  /* 生长点表：表格降级为「分题卡片 × 3 小标题」堆叠 */
  .gp-table-wrap { overflow: visible; background: transparent; border: none; box-shadow: none; }
  .gp-table { min-width: 0; display: block; }
  .gp-table thead { display: none; }
  .gp-table tbody { display: block; }
  .gp-table tbody tr {
    display: block; background: #fff; border: 1px solid var(--td-border);
    border-radius: 14px; padding: 14px 16px; margin-top: 12px; box-shadow: var(--td-shadow-sm);
  }
  .gp-table tbody tr:nth-child(even) { background: #fff; }
  .gp-table tbody tr:hover { background: #fff; }
  .gp-table tbody td { display: block; border: none; padding: 0; white-space: normal; }
  .gp-table td.gp-col-topic {
    font-size: 15px; font-weight: 800; color: var(--td-text);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--td-border);
    white-space: normal;
  }
  /* 数据行：用 data-lab 标签显示「生活经验 / 新的兴趣点 / 活动资源开发思路」小标题 */
  .gp-table tbody td + td::before {
    content: attr(data-lab);
    display: block; font-size: 11.5px; font-weight: 800; color: var(--td-primary-d);
    margin: 8px 0 2px; letter-spacing: .5px;
  }
  .gp-table tbody td + td { margin-top: 2px; }
}

@media (max-width: 520px) {
  .kg-branches { grid-template-columns: 1fr; }
  .kg-jump-item { font-size: 12px; }
}