/* ===== ADHD家长指南针 - 主样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:       var(--c-accent);
  --primary-dark:  var(--c-accent-hover);
  --primary-light: var(--c-accent-soft);
  --primary-lighter: var(--c-accent-soft);
  --accent:        var(--c-accent);
  --success:       var(--c-ok);
  --warning:       var(--c-warn);
  --danger:        var(--c-danger);
  --purple:        var(--p-purple-500);
  --text:          var(--c-text);
  --text-light:    var(--c-text-muted);
  --bg:            var(--c-canvas);
  --white:         var(--c-surface);
  --border:        var(--c-border);
  --shadow:        var(--sh-1);
  --shadow-hover:  var(--sh-3);
  /* z-index 工程常量，待 SPEC 收编（非设计 token，勿在主题层覆盖） */
  --z-nav: 100;        /* 顶栏 / 移动端导航按钮 */
  --z-overlay: 200;    /* 侧栏抽屉 / 遮罩 / 主题浮层 / 跳转链接 */
  --z-toast: 1000;     /* Toast / 恢复阅读提示条 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: var(--fs-base);
}

/* ===== Header ===== */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--c-text-inverse);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.header h1 { font-size: var(--fs-lg); font-weight: 600; }
.header .subtitle { font-size: var(--fs-2xs); opacity: 0.9; margin-top: 2px; text-wrap: balance; }
.header .slogan { font-size: var(--fs-xs); opacity: 0.85; font-style: italic; }

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-xl);
  padding: var(--sp-2) var(--sp-4);
  width: 280px;
}
.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--c-text-inverse);
  font-size: var(--fs-xs);
  width: 100%;
  margin-left: var(--sp-2);
}
.search-box input::placeholder { color: rgba(255,255,255,0.7); }

/* ===== Layout ===== */
.main {
  display: flex;
  min-height: calc(100vh - 140px);
}
.sidebar {
  width: 240px;
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) 0;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 80px;
}
.content {
  flex: 1;
  /* 必须显式 min-width:0（DESIGN-SPEC §5.6 硬规则三）：
     .main 是 flex 容器，flex 子项默认 min-width:auto，
     宽表格的 min-content 宽度会向上传播把 .content 撑宽，
     导致整页横向溢出，而 .table-scroll 永远收不到滚动约束。
     实测：375px 视口下不加此行，documentElement.scrollWidth=443 > clientWidth=375。 */
  min-width: 0;
  padding: var(--sp-6) var(--sp-8);
  max-width: 900px;
}

/* ===== Sidebar Nav ===== */
.nav-group { margin-bottom: var(--sp-2); }
.nav-group-title {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-item {
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.nav-item:hover { background: var(--primary-light); color: var(--primary); }
.nav-item.active { background: var(--primary); color: var(--c-text-inverse); font-weight: 500; }
.nav-item .icon { font-size: var(--fs-lg); }
.nav-subitem {
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-10);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-light);
  transition: all 0.2s;
}
.nav-subitem:hover { background: var(--primary-light); color: var(--primary); }
.nav-subitem.active { color: var(--primary); font-weight: 500; background: var(--primary-light); }
.nav-subitem.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--text-light);
}
.nav-subitem.disabled:hover { background: transparent; color: var(--text-light); }
.nav-subitem .coming-soon { font-size: var(--fs-2xs); }
.nav-priority {
  display: inline-block;
  background: var(--danger);
  color: var(--c-text-inverse);
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-1);
  border-radius: var(--r-xs);
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.reserved-badge {
  display: inline-block;
  background: var(--warning);
  color: var(--c-text-inverse);
  font-size: var(--fs-2xs);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  margin-left: var(--sp-2);
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Mobile Toggle ===== */
.mobile-toggle {
  display: none;
  background: var(--primary);
  color: var(--c-text-inverse);
  border: none;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* ===== Home Page ===== */
.welcome {
  text-align: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
}
.welcome .icon { font-size: var(--fs-4xl); margin-bottom: var(--sp-3); }
.welcome h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); color: var(--primary-dark); }
.welcome p { font-size: var(--fs-sm); color: var(--text-light); max-width: 560px; margin: 0 auto; }


/* ===== Quick Access ===== */
.section-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: var(--sp-8) 0 var(--sp-4);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.quick-item {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.quick-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.quick-item .qi-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--c-info-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
}
.quick-item .qi-content { flex: 1; }
.quick-item h4 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); color: var(--text); line-height: 1.4; }
.quick-item p { font-size: var(--fs-2xs); color: var(--text-light); line-height: 1.5; margin: 0; }
.priority-badge {
  display: inline-block;
  background: var(--danger);
  color: var(--c-text-inverse);
  font-size: var(--fs-2xs);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  margin-left: var(--sp-2);
}

/* ===== Content Page ===== */
.breadcrumb {
  font-size: var(--fs-2xs);
  color: var(--text-light);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--primary); text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }

.content-header {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow);
}
.content-header h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); color: var(--primary-dark); }
.content-header .summary { font-size: var(--fs-sm); color: var(--text); line-height: 1.8; }

.warning-box {
  /* R7 降噪：满彩底 → 淡底 + 左 3px 实色边 + 正常正文色（评审：首尾相接彩盒串压迫感） */
  background: var(--c-warn-soft);
  border-left: 3px solid var(--c-warn);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-text);
  line-height: 1.7;
}
.warning-box strong { color: var(--c-warn-text); }

.oneliner {
  /* R7 降噪：渐变彩底 → 淡底 + 左 3px 实色边 + 正常正文色 */
  background: var(--c-info-soft);
  border-left: 3px solid var(--c-info);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}
.oneliner strong { color: var(--c-info-text); }

/* ===== Method Blocks ===== */
.method-block {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
}
.method-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  cursor: pointer;
}
.method-header .m-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); flex: 1; }
.method-tag {
  font-size: var(--fs-2xs);
  padding: 3px var(--sp-2);
  border-radius: var(--r-xs);
  color: var(--c-text-inverse);
  font-weight: 500;
}
.tag-medical { background: var(--danger); }
.tag-psychology { background: var(--purple); }
.tag-behavior { background: var(--success); }
.tag-parent { background: var(--warning); }
.tag-school { background: var(--primary); }
.tag-symptom { background: var(--c-danger); }
.tag-check { background: var(--c-info); }
.tag-method { background: var(--c-ok); }
.tag-warning { background: var(--c-warn); }
.tag-note { background: var(--p-indigo-500); }

.method-body { font-size: var(--fs-sm); line-height: 1.8; }
.method-body ol { padding-left: var(--sp-5); margin: var(--sp-3) 0; }
.method-body ol li { margin-bottom: var(--sp-2); }
.method-body .notes {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-light);
  line-height: 1.7;
}

/* ===== Case Block ===== */
.case-block {
  background: linear-gradient(135deg, var(--p-purple-100) 0%, var(--p-purple-100) 100%);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  border-left: 3px solid var(--purple);
}
.case-block .case-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--purple);
  margin-bottom: var(--sp-2);
}
.case-block .case-source { font-size: var(--fs-2xs); color: var(--text-light); margin-bottom: var(--sp-2); }
.case-block .case-content { font-size: var(--fs-xs); line-height: 1.8; color: var(--text); }
.case-block .case-dialogue {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.8;
  white-space: pre-line;
}

/* ===== Video Cards ===== */
.video-section { margin-top: var(--sp-6); }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.video-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
}
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.video-card .v-title { font-size: var(--fs-xs); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); line-height: 1.5; }
.video-card .v-author { font-size: var(--fs-2xs); color: var(--primary); margin-bottom: var(--sp-2); }
.video-card .v-desc { font-size: var(--fs-2xs); color: var(--text-light); line-height: 1.6; }

/* ===== Evidence ===== */
.evidence-box {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
  font-size: var(--fs-2xs);
  color: var(--text-light);
  line-height: 1.7;
  border-left: 3px solid var(--text-light);
}
.evidence-box strong { color: var(--text); }

/* ===== Phase/Day Content ===== */
.phase-block {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
}
.phase-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--primary-light);
}
.phase-goal { font-size: var(--fs-xs); color: var(--text-light); margin-bottom: var(--sp-4); font-style: italic; }

.day-block {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  border-left: 3px solid var(--success);
}
.day-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.day-goal { font-size: var(--fs-2xs); color: var(--text-light); margin-bottom: var(--sp-3); }
.day-tasks { padding-left: var(--sp-5); font-size: var(--fs-xs); line-height: 1.8; }
.day-tasks li { margin-bottom: var(--sp-1); }
.day-tip {
  /* R7 降噪：彩底 → 淡底 + 左 3px 实色边 + 正常正文色 */
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--c-text);
  line-height: 1.7;
}
.day-tip strong { color: var(--c-accent-text); }

/* ===== Checklist ===== */
.check-item {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.check-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: var(--c-text-inverse);
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-right: var(--sp-3);
}
.check-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); display: flex; align-items: center; }
.check-why { font-size: var(--fs-xs); color: var(--text); line-height: 1.8; margin-bottom: var(--sp-3); }
.check-list { padding-left: var(--sp-5); font-size: var(--fs-xs); line-height: 1.8; margin-bottom: var(--sp-3); }
.check-list li { margin-bottom: var(--sp-1); }
.check-action {
  background: var(--c-ok-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text);
  line-height: 1.7;
  border-left: 3px solid var(--success);
}
.check-action strong { color: var(--c-ok-text); }

/* ===== Three Things ===== */
.thing-block {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary);
}
.thing-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: var(--c-text-inverse);
  border-radius: 50%;
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-right: var(--sp-3);
}
.thing-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: var(--sp-3); display: flex; align-items: center; }
.thing-why { font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--sp-4); color: var(--text); }
.thing-section { margin-bottom: var(--sp-4); }
.thing-section h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--primary-dark); margin-bottom: var(--sp-2); }
.thing-section ul { padding-left: var(--sp-5); font-size: var(--fs-xs); line-height: 1.8; }
.thing-section ul li { margin-bottom: var(--sp-1); }

/* ===== Tool Template ===== */
.tool-block {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
}
.tool-name { font-size: var(--fs-lg); font-weight: 600; color: var(--primary-dark); margin-bottom: var(--sp-2); }
.tool-purpose { font-size: var(--fs-xs); color: var(--text-light); margin-bottom: var(--sp-3); font-style: italic; }
.tool-template-box {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-3) 0;
  font-size: var(--fs-xs);
  line-height: 1.8;
}
.tool-template-box table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
.tool-template-box th, .tool-template-box td { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-2xs); }
.tool-template-box th { background: var(--primary-light); color: var(--primary-dark); }

/* ===== 表格横向滚动容器 =====
 * 表格的 min-content 宽度会把没有限宽的父容器撑开：
 * 实测「可打印工具包」页 8 列表格在 375px 下把整页撑到 443px（溢出 68px），
 * Chrome 因此把布局视口扩到 443 并整页缩小约 15%。
 * 规则：任何渲染出的 <table> 都必须包在 .table-scroll 里（app.js 已接入）。
 * 注意：如果 .table-scroll 的祖先是 grid/flex 子项，该子项必须 min-width:0，
 * 否则 overflow 容器本身会被撑开而不是滚动（见 docs/DESIGN-SPEC.md §5.6）。
 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  position: relative;   /* 供 is-scrollable 的右缘渐隐 ::after 定位 */
}
/* R7：可横滚时的右缘渐隐提示（is-scrollable 由 app.js 渲染后检测 scrollWidth 加挂） */
.table-scroll.is-scrollable::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--c-canvas), transparent);
  pointer-events: none;
}
/* 表格横滚提示文字：仅容器可横滚（.is-scrollable）时显示
   注：--c-text-faint 在 sky 主题实测 3.98:1 < 4.5，改用 --c-text-muted */
.table-hint {
  display: none;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  margin-block: var(--sp-1) 0;
}
.table-scroll.is-scrollable + .table-hint { display: block; }

/* ===== Footer 容器（R14：三块统一收进与 .content 对齐的 900px 内容列） ===== */
footer {
  max-width: 948px;              /* 900 内容宽 + 2×24 内边距，与 .content 视觉对齐 */
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);              /* 三块统一纵向节奏，取代各自为政的 margin */
}
/* .alert 基类自带 margin-block，与 footer 的 gap 会叠加成双倍间距 → footer 语境归零 */
footer .alert--emergency { margin-block: 0; }

/* ===== Global Disclaimer（内容依据：降为页脚注脚形态，不再做通栏灰条） ===== */
.global-disclaimer {
  font-size: var(--fs-2xs);
  color: var(--text-light);
  line-height: 1.7;
  text-align: center;
}
.global-disclaimer strong { color: var(--text); }

/* ===== 备案信息 =====
   工信部要求：备案号须在首页可见，并链接至 https://beian.miit.gov.cn/
   单独成块（不复用 .global-disclaimer），以便后续追加公安备案等条目。 */
.site-filing {
  font-size: var(--fs-2xs);
  color: var(--text-light);
  text-align: center;
}
.site-filing a,
.site-filing a:link,
.site-filing a:visited {
  color: var(--c-link);
  text-decoration: none;
}
.site-filing a:hover,
.site-filing a:focus-visible {
  color: var(--c-link-hover);
  text-decoration: underline;
}

/* ===== Back Button ===== */
.back-btn {
  background: var(--c-surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: var(--sp-5);
}
.back-btn:hover { background: var(--c-border); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  footer { padding: var(--sp-4); }
  .header { padding: var(--sp-3) var(--sp-4); flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
  .header h1 { font-size: var(--fs-lg); }
  .search-box { width: 100%; }
  .mobile-toggle { display: block; }
  /* R8：抽屉常驻渲染 + transform 滑入（display:none↔block 会打断 transition，动画原本无效）；
     100dvh 修 iOS Safari 地址栏导致的底部遮挡（100vh 作回退）；
     z-index 需高于遮罩（同值时遮罩因 DOM 靠后会盖住抽屉） */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    z-index: calc(var(--z-overlay) + 1);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    padding-top: var(--sp-16);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
  }
  .content { padding: var(--sp-4); }
  .entry-cards { grid-template-columns: 1fr; gap: var(--sp-4); }
  .entry-card { padding: var(--sp-5); width: 100%; min-width: unset; }
  .quick-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .method-block, .phase-block, .check-item, .thing-block, .tool-block { padding: var(--sp-4); }
  .content-header { padding: var(--sp-5); }
  .content-header h2 { font-size: var(--fs-base); }
}

@media (max-width: 480px) {
  .header h1 { font-size: var(--fs-lg); }
  .content { padding: var(--sp-4) var(--sp-3); }
  .method-header .m-title { font-size: var(--fs-sm); }
  .method-body ol li { font-size: var(--fs-xs); }
  .case-block .case-content { font-size: var(--fs-xs); }
}

/* ===== Safety Red Flags ===== */
/* 安全红线是 DESIGN-SPEC 三红线之一：保持强视觉，仅把渐变彩底换成 danger 系淡底 + 3px 边框，
   文字保持 danger-text（对比度须 ≥4.5，10 主题实测见 r7 报告） */
.safety-red-flags {
  background: var(--c-danger-soft);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}
.safety-red-flags .srf-title {
  /* --danger 压 danger-soft 淡底实测仅 3.95:1，改用深一档的 danger-text（6.8:1），
     仍为红色粗体，安全红线的强视觉不弱化 */
  color: var(--c-danger-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.safety-red-flags ul {
  padding-left: var(--sp-5);
  margin: 0;
}
.safety-red-flags li {
  color: var(--c-danger-text);
  font-size: var(--fs-xs);
  line-height: 1.9;
  margin-bottom: var(--sp-1);
}
.safety-red-flags li strong { color: var(--c-danger); }

/* ===== Generic Content Blocks ===== */
.generic-section {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.generic-section .gs-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--primary-light);
}
.generic-section .gs-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin-bottom: var(--sp-3);
  font-style: italic;
}
.generic-section ul, .generic-section ol {
  padding-left: var(--sp-6);
  margin: var(--sp-2) 0;
}
.generic-section li {
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-bottom: var(--sp-2);
}

/* ===== Age Stage Blocks ===== */
.age-stage-block {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--purple);
}
.age-stage-block .as-age {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--purple);
  margin-bottom: var(--sp-2);
}
.age-stage-block .as-core-task {
  /* R7 降噪：L1 紫彩底 → 中性淡底 + 左 3px 实色边 + 正常正文色 */
  background: var(--c-surface-2);
  border-left: 3px solid var(--purple);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}
.age-stage-block .as-section-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--purple);
}
.age-stage-block ul { padding-left: var(--sp-6); margin: var(--sp-2) 0; }
.age-stage-block li { font-size: var(--fs-xs); line-height: 1.9; margin-bottom: var(--sp-2); }

/* ===== Comorbidity Blocks ===== */
.comorbidity-block {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--warning);
}
.comorbidity-block .cb-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-warn-text);
  margin-bottom: var(--sp-1);
}
.comorbidity-block .cb-rate {
  font-size: var(--fs-2xs);
  color: var(--text-light);
  margin-bottom: var(--sp-3);
  font-style: italic;
}
.comorbidity-block .cb-section-title {
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--text);
  margin: var(--sp-3) 0 var(--sp-2);
}
.comorbidity-block ul { padding-left: var(--sp-5); margin: var(--sp-1) 0; }
.comorbidity-block li { font-size: var(--fs-xs); line-height: 1.8; }
.comorbidity-block .cb-what-to-do {
  /* R7 降噪：淡底 + 左 3px 实色边 + 正常正文色 */
  background: var(--c-warn-soft);
  border-left: 3px solid var(--c-warn);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.8;
  margin-top: var(--sp-3);
  color: var(--c-text);
}
.comorbidity-block .cb-what-to-do strong { color: var(--c-warn-text); }

/* ===== Decision Tree ===== */
.decision-tree-block {
  /* R7 降噪：双色渐变 → 单一淡底 */
  background: var(--c-info-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  border-left: 4px solid var(--primary);
}
.decision-tree-block .dt-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: var(--sp-4);
}
.decision-tree-block .dt-step {
  background: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.8;
  border-left: 3px solid var(--primary);
}

/* ===== Teacher Section ===== */
.teacher-section-block {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--p-teal-700);
}
.teacher-section-block .ts-section {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ok-text);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--p-teal-100);
}
.teacher-section-block ul { padding-left: var(--sp-5); margin: var(--sp-2) 0; }
.teacher-section-block li { font-size: var(--fs-xs); line-height: 1.9; margin-bottom: var(--sp-2); }

/* ===== 视频区域版权声明（简短版） ===== */
.video-copyright-notice {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-canvas);
  border-left: 3px solid var(--c-text-faint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-2xs);
  line-height: 1.8;
  color: var(--c-text-muted);
}
.video-copyright-notice a {
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.video-copyright-notice a:hover {
  color: var(--primary-dark);
}

/* ===== 完整版版权声明（底部可折叠；R14：宽度与间距交由 footer 容器统一） ===== */
.copyright-full {
  width: 100%;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text);
}
/* .copyright-toggle 已删除（2026-10-03）：index.html 改用 .disclosure-toggle
   （components.css §5.8 G 组实现），本项目已无 .copyright-toggle 消费者。 */
.copyright-content {
  margin-top: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.copyright-content h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-dark);
  margin: var(--sp-4) 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.copyright-content h4:first-child { margin-top: 0; }
.copyright-content p {
  font-size: var(--fs-xs);
  line-height: 1.9;
  margin: var(--sp-2) 0;
  color: var(--text);
}
.copyright-content ol, .copyright-content ul {
  padding-left: var(--sp-6);
  margin: var(--sp-2) 0;
}
.copyright-content li {
  font-size: var(--fs-xs);
  line-height: 1.9;
  margin-bottom: var(--sp-1);
}
.copyright-content .placeholder {
  color: var(--c-danger);
  font-weight: 600;
  background: var(--c-danger-soft);
  padding: 1px var(--sp-2);
  border-radius: var(--r-xs);
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .video-copyright-notice {
    font-size: var(--fs-2xs);
    padding: var(--sp-2) var(--sp-3);
  }
  .copyright-full {
    font-size: var(--fs-2xs);
  }
  .copyright-content {
    padding: var(--sp-4) var(--sp-4);
  }
  .copyright-content h4 { font-size: var(--fs-xs); }
  .copyright-content p, .copyright-content li { font-size: var(--fs-2xs); }
}

/* ===== 收藏按钮 ===== */
.content-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.favorite-btn {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--white);
  color: var(--text-light);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.favorite-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--c-ok-soft);
}
.favorite-btn.favorited {
  background: linear-gradient(135deg, var(--c-warn-soft) 0%, var(--c-warn-border) 100%);
  border-color: var(--c-warn);
  color: var(--c-warn-text);
  font-weight: 600;
}
.fav-count {
  display: inline-block;
  background: var(--primary);
  color: var(--c-text-inverse);
  font-size: var(--fs-2xs);
  padding: 1px var(--sp-2);
  border-radius: var(--r-md);
  margin-left: var(--sp-1);
  font-weight: 600;
}

/* ===== 占位页提示 ===== */
.planned-notice {
  display: flex;
  gap: var(--sp-4);
  /* R7 降噪：渐变彩底 → 淡底 + 左 3px 实色边 + 正常正文色 */
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-border);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}
.planned-notice .pn-icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
}
.planned-notice .pn-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-warn-text);
  margin-bottom: var(--sp-2);
}
.planned-notice .pn-desc {
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--c-text);
}

/* ===== 全文搜索结果 ===== */
.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.search-result-item {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.search-result-item:hover {
  border-left-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.sri-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.sri-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.sri-module {
  font-size: var(--fs-2xs);
  color: var(--text-light);
  background: var(--c-surface-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-md);
}
.sri-field {
  font-size: var(--fs-2xs);
  color: var(--primary);
  background: var(--c-info-soft);
  padding: 2px var(--sp-2);
  border-radius: var(--r-md);
  font-weight: 600;
}
.sri-context {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-light);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-surface-2);
}
.sri-context mark {
  background: var(--c-warn-soft);
  color: var(--c-warn-text);
  padding: 0 2px;
  border-radius: var(--r-xs);
  font-weight: 600;
}

/* ===== 移动端适配（新功能） ===== */
@media (max-width: 768px) {
  .content-title-row {
    flex-direction: column;
  }
  .favorite-btn {
    align-self: flex-start;
  }
  .planned-notice {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .planned-notice .pn-icon { font-size: var(--fs-xl); }
  .planned-notice .pn-title { font-size: var(--fs-sm); }
  .planned-notice .pn-desc { font-size: var(--fs-2xs); }
  .search-result-item {
    padding: var(--sp-3) var(--sp-4);
  }
  .sri-header {
    gap: var(--sp-2);
  }
  .sri-title { font-size: var(--fs-sm); }
  .sri-context { font-size: var(--fs-2xs); }
}

/* ===== 操作按钮组（收藏/点赞/分享） ===== */
.action-buttons {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--white);
  color: var(--text-light);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--c-ok-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.action-btn:active {
  transform: translateY(0);
}
.action-btn.favorited {
  background: linear-gradient(135deg, var(--c-warn-soft) 0%, var(--c-warn-border) 100%);
  border-color: var(--c-warn);
  color: var(--c-warn-text);
  font-weight: 600;
}

/* 点赞按钮 */
.like-btn {
  min-width: 70px;
  justify-content: center;
}
.like-btn:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background: var(--c-danger-soft);
}
.like-btn.liked {
  background: linear-gradient(135deg, var(--c-danger-soft) 0%, var(--c-danger-border) 100%);
  border-color: var(--c-danger);
  color: var(--c-danger-text);
  font-weight: 600;
  cursor: default;
}
.like-btn.liked:hover {
  transform: none;
  box-shadow: none;
}
.like-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 分享按钮 */
.share-btn:hover {
  border-color: var(--c-info);
  color: var(--c-info);
  background: var(--c-info-soft);
}

/* ===== Toast提示 ===== */
.toast-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.85);
  color: var(--p-gray-0);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  z-index: var(--z-toast);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  pointer-events: none;
}
.toast-message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== 移动端适配（点赞/分享） ===== */
@media (max-width: 768px) {
  .action-buttons {
    width: 100%;
    justify-content: flex-start;
  }
  .action-btn {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2xs);
  }
  .like-btn {
    min-width: 60px;
  }
  .toast-message {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-xs);
  }
}

/* ===== 统一Block组件样式 ===== */
.block-section {
  margin: var(--sp-5) 0;
}
.block-section h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 4px solid var(--primary);
}
.block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-list li {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  line-height: 1.8;
  font-size: var(--fs-sm);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.card-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.card-item h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: var(--sp-2);
  line-height: 1.5;
}
.card-item p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text);
  margin: var(--sp-2) 0;
}
.card-points {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}
.card-points li {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-muted);
  padding: 3px 0;
  padding-left: var(--sp-4);
  position: relative;
}
.card-points li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  position: absolute;
  left: 0;
}
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}



/* ===== 手风琴式导航样式 ===== */
.nav-group-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-1);
}
.nav-group-title:hover {
  background: rgba(255,255,255,0.1);
}
.nav-group-title .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: var(--fs-2xs);
  width: 16px;
}
.nav-group:not(.collapsed) .nav-group-title .arrow {
  transform: rotate(90deg);
}
.nav-group-children {
  overflow: hidden;
  transition: max-height 0.25s ease;
  max-height: 1000px;
}
.nav-group.collapsed .nav-group-children {
  max-height: 0;
}
.nav-subitem {
  padding-left: var(--sp-10);
  position: relative;
}


/* ===== 首页高端样式升级 ===== */
.welcome {
  text-align: center;
  padding: var(--sp-16) var(--sp-5) var(--sp-10);
  background: var(--c-surface);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-10);
}
.welcome .icon {
  display: none;
}
.welcome h2 {
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin: 0 0 var(--sp-4);
  letter-spacing: 2px;
  color: var(--c-info-text);
}
/* 标题下面的小装饰线 */
.welcome h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--c-info);
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-xs);
}
.welcome p {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  line-height: 1.9;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.entry-cards {
  display: grid;
  /* 5 张入口卡：改为自适应列（约 280px 起）。固定 4 列会让第 5 张单独一行且只有 1/4 宽。 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.entry-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.entry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.12);
  border-color: var(--c-info-border);
}
.entry-icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-4);
}
.entry-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.entry-card p {
  color: var(--c-text-muted);
  line-height: 1.7;
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-5);
  flex: 1;
}
/* .entry-btn 已移交 components.css（DESIGN-SPEC §5.8 A 组）——本批 style.css 只减不增。
   原此处定义含裸 hex（info-text 深蓝族两枚）与 white 关键字，属审计点名的硬编码色。
   .entry-btn 的默认态（实心主色底 + min-height 触控目标）由 components.css 提供。 */
@media (max-width: 768px) {
  .welcome {
    padding: var(--sp-10) var(--sp-5) var(--sp-8);
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  }
  .welcome h2 {
    font-size: var(--fs-2xl);
  }
  .entry-card {
    padding: var(--sp-8) var(--sp-5);
  }
}











/* 强制手机端入口卡片单列 */
@media (max-width: 768px) {
  .entry-cards {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .entry-card {
    width: 100%;
    min-width: unset;
  }
}

/* 页面底部翻页导航 */
.page-footer-nav {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-10) 0 var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
  align-items: stretch;
}
.page-nav-btn {
  flex: 1;
  padding: var(--sp-4) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 0.2s;
  text-align: center;
}
.page-nav-btn:hover:not(.disabled) {
  border-color: var(--primary);
  background: var(--c-info-soft);
  color: var(--primary);
}
.page-nav-btn.home {
  flex: 0.8;
  background: var(--primary);
  color: var(--c-text-inverse);
  border-color: var(--primary);
}
.page-nav-btn.home:hover {
  background: var(--primary-dark);
}
.page-nav-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-nav-btn.next { text-align: right; }
.page-nav-btn.prev { text-align: left; }

/* 手机端适配 */
@media (max-width: 768px) {
  .page-footer-nav {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .page-nav-btn, .page-nav-btn.next, .page-nav-btn.prev {
    text-align: center;
  }
}

/* 翻页按钮两行样式 */
.page-nav-btn {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  line-height: 1.4;
}
.page-nav-btn .nav-label {
  font-size: var(--fs-2xs);
  color: var(--c-text-faint);
  font-weight: 400;
}
.page-nav-btn .nav-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}
.page-nav-btn:hover:not(.disabled) .nav-title {
  color: var(--primary);
}
.page-nav-btn.home .nav-label, .page-nav-btn.home .nav-title {
  color: var(--c-text-inverse);
}

/* 首页入口按钮高度统一 → 已移交 components.css（.entry-btn 用 min-height:48px 而非固定 height，
   固定 height 在 clarity 主题（字号更大）下会裁切内容，属可访问性 bug）。 */


/* 阅读位置恢复提示条 */
.reading-resume-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: linear-gradient(135deg, var(--c-info) 0%, var(--c-info-text) 100%);
  color: var(--c-text-inverse);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  z-index: var(--z-toast);
  font-size: var(--fs-sm);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 90%;
}
.reading-resume-bar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.reading-resume-bar .resume-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--c-text-inverse);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-xl);
  cursor: pointer;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.reading-resume-bar .resume-btn:hover {
  background: rgba(255,255,255,0.3);
}
.reading-resume-bar .close-resume {
  cursor: pointer;
  opacity: 0.7;
  font-size: var(--fs-lg);
  line-height: 1;
}
.reading-resume-bar .close-resume:hover { opacity: 1; }

/* 手机端适配：阅读恢复提示条 */
@media (max-width: 768px) {
  .reading-resume-bar {
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: translateY(80px);
    border-radius: var(--r-xl);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    gap: var(--sp-3);
    flex-wrap: wrap;
  }
  .reading-resume-bar.show {
    transform: translateY(0);
  }
  .reading-resume-bar .resume-btn {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2xs);
  }
  .reading-resume-bar > span:first-child {
    flex: 1;
    min-width: 0;
  }
}

/* 手机端导航抽屉优化（R8） */
/* 抽屉打开时锁定背景滚动，防止 iOS 橡皮筋把抽屉内容顶走 */
body.nav-locked {
  overflow: hidden;
}
@media (max-width: 768px) {
  /* 抽屉内的关闭按钮（≥44px 命中区） */
  .mobile-nav-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    color: var(--text-light);
    cursor: pointer;
  }
  .mobile-nav-close:hover {
    background: rgba(255,255,255,0.1);
  }
  /* 分组标题是可点击的手风琴开关，命中区补足 44px */
  .nav-group-title {
    min-height: 44px;
    box-sizing: border-box;
  }
  .nav-item {
    min-height: 44px;
    box-sizing: border-box;
  }
  .mobile-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--z-overlay);
    display: none;
  }
  .mobile-overlay.show { display: block; }
}

/* 首页品牌区对齐优化 */
.brand-header {
  text-align: center;
}
.brand-header h1 {
  text-align: center;
}
.brand-header .subtitle {
  text-align: center;
  max-width: 900px;
  margin: var(--sp-3) auto 0 auto;
}
.brand-header .slogan {
  text-align: center;
  max-width: 800px;
  margin: var(--sp-3) auto 0 auto;
}
@media (max-width: 768px) {
  .brand-header .subtitle {
    font-size: var(--fs-sm);
    line-height: 1.6;
    padding: 0 var(--sp-3);
  }
  .brand-header .slogan {
    font-size: var(--fs-xs);
    padding: 0 var(--sp-3);
  }
}


/* ===== UI系统优化 v2.0 =====
   颜色 token 已收编至文件头部 :root 桥接，勿在此重定义颜色。 */
:root {
  --radius: var(--r-xl);
  --radius-sm: var(--r-md);
}

/* Header 优化：清爽白底 */
.header {
  background: var(--c-surface);
  color: var(--text);
  padding: var(--sp-4) var(--sp-8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  border-bottom: 1px solid var(--border);
}
.header h1 {
  color: var(--primary-dark);
  font-size: var(--fs-xl);
  font-weight: 700;
}
.header .subtitle {
  color: var(--text-light);
  opacity: 1;
  font-size: var(--fs-2xs);
}
.header .slogan {
  color: var(--primary);
  opacity: 0.85;
  font-weight: 500;
}
.search-box {
  background: var(--primary-lighter);
  border: 1px solid var(--c-info-border);
  width: 320px;
  transition: all 0.2s;
}
.search-box:focus-within {
  background: var(--c-surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.search-box input {
  color: var(--text);
}
.search-box input::placeholder {
  color: var(--c-text-faint);
}
.search-box svg {
  stroke: var(--primary);
}

/* 移动端导航按钮 */
.mobile-toggle {
  background: var(--primary);
}

/* Hero区域优化：柔和渐变 */
.welcome {
  background: linear-gradient(180deg, var(--c-info-soft) 0%, var(--c-surface-2) 100%);
  padding: var(--sp-12) var(--sp-5) var(--sp-12);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  margin-bottom: var(--sp-10);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.welcome::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.welcome::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.welcome h2 {
  font-size: var(--fs-2xl);
  color: var(--primary-dark);
  letter-spacing: 1px;
  /* 局部 z-index:1：仅用于叠在 .welcome::before 装饰圆之上（非全局层级，保持 1 即可） */
  position: relative;
  z-index: 1;
}
.welcome h2::after {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  width: 72px;
  height: 4px;
  border-radius: var(--r-xs);
}
.welcome p {
  color: var(--text-light);
  font-size: var(--fs-sm);
  position: relative;
  z-index: 1;
}

/* 入口卡片优化：顶部色条 + 更精致 */
.entry-cards {
  gap: var(--sp-6);
  max-width: 1120px;
}
.entry-card {
  border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-6) var(--sp-8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.entry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
}
.entry-card:nth-child(1)::before { background: linear-gradient(90deg, var(--c-info), var(--c-info)); }
.entry-card:nth-child(2)::before { background: linear-gradient(90deg, var(--c-ok), var(--c-ok)); }
.entry-card:nth-child(3)::before { background: linear-gradient(90deg, var(--c-warn), var(--c-warn-border)); }
.entry-card:nth-child(4)::before { background: linear-gradient(90deg, var(--p-purple-500), var(--p-indigo-300)); }
.entry-card:nth-child(5)::before { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover)); }
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.1), 0 2px 8px rgba(0,0,0,0.06);
  border-color: var(--c-info-border);
}
.entry-icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-4);
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background: var(--primary-lighter);
  border-radius: var(--r-xl);
}
.entry-card:nth-child(1) .entry-icon { background: var(--c-info-soft); }
.entry-card:nth-child(2) .entry-icon { background: var(--c-ok-soft); }
.entry-card:nth-child(3) .entry-icon { background: var(--c-warn-soft); }
.entry-card:nth-child(4) .entry-icon { background: var(--p-purple-100); }
.entry-card:nth-child(5) .entry-icon { background: var(--c-accent-soft); }
.entry-card h3 {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
  color: var(--text);
}
.entry-card p {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  line-height: 1.75;
}
/* 已移交 components.css（第二批 2026-10-03）：
   .entry-btn 原本在这里用 6 处 !important 硬压 padding:9px 18px / 主色底，
   会盖掉新设计系统里 components.css（后加载但无 !important）的定义。
   现由 components.css 的 .entry-btn / .entry-btn--secondary 接管，
   视觉变化：padding 9px 18px → 12px 24px（原尺寸小于触控目标要求，是刻意放大）。
   注意：本文件仍禁止新增规则，第三批整体退役。 */

/* 内容区卡片统一优化 */
.content > div {
  border-radius: var(--radius);
}

/* 视频卡片优化 */
.video-card {
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.video-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 手机端优化 */
@media (max-width: 768px) {
  .header {
    padding: var(--sp-3) var(--sp-4);
    flex-direction: row;      /* 覆盖 :544 的 column：品牌行与主题切换同排 */
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  /* 品牌块弹性占满第一行剩余空间，主题切换按钮自然靠右（不再独占一行） */
  .header > div:first-child { flex: 1 1 0; min-width: 0; }
  .header h1 { font-size: var(--fs-lg); }
  .header .subtitle { font-size: var(--fs-2xs); }
  .header .slogan { display: none; }
  .search-box { width: 100%; order: 3; }
  /* R7 手机首屏：hero 压到 ≤220px（评审：812px 高度只露 1 张入口卡） */
  .welcome {
    padding: var(--sp-6) var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  /* 大装饰 icon 在移动端隐藏；用 #content 提权重压 components.css G14 的 display:block */
  #content .welcome .icon { display: none; }
  .welcome h2 { font-size: var(--fs-xl); }
  .welcome p { font-size: var(--fs-sm); }
  /* R7 入口卡移动端紧凑化：目标 375×812 首屏露出 ≥1.5 张（桌面端不动） */
  .entry-cards { gap: var(--sp-3); }
  .entry-card { padding: var(--sp-4); }
  .entry-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xl);
  }
  .entry-card p { margin-bottom: var(--sp-3); }
}

/* ===== 文本内容智能高亮 ===== */
.text-highlight {
  color: var(--c-info);
  font-weight: 600;
}
.text-quote {
  color: var(--c-text-muted);
  font-style: italic;
}
/* 优化内容区块行间距 */
.method-steps li,
.thing-why,
.thing-how,
.thing-what,
.phase-goal,
.check-item {
  line-height: 1.9;
}
/* 优化长段落可读性 */
.method-body,
.thing-block,
.phase-block,
.case-content {
  font-size: var(--fs-sm);
  line-height: 1.85;
}
/* 段落节奏（R6 评审：正文段后距 99/100 为 0） */
.case-content,
.list-detail,
.summary {
  margin-block-end: var(--sp-3);
}
#content li {
  margin-block-end: var(--sp-2);
}

/* ===== R7 追加 ===== */

/* 正文语义化后的段落节奏：全局 reset 清零了 margin，给 #content 下的 p 补段后距。
   用 :where(#content) 把权重降到 (0,0,1)：只赢 `* { margin:0 }`，
   不干扰已有组件自己的 p 间距（.quick-item p / .card-item p / .entry-card p 等照旧）。 */
:where(#content) p {
  margin-block-end: var(--sp-3);
}

/* 内容页标题元信息行（信任手法：阅读时长 + 循证来源指引）
   注：原计划用 --c-text-faint，但 sky 等 10 主题实测最差仅 3.98:1 < 4.5，改用 --c-text-muted */
.content-meta {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-block-start: var(--sp-2);
  margin-block-end: 0;
}

/* 渐进增强：支持 color-mix 的浏览器上把降噪彩块再压淡一档（混入表面色），
   旧 WebView 忽略本块，回落到上面的 soft token 淡底（写法参照 tokens.css 的 @supports 块） */
@supports (color: color-mix(in srgb, red, white)) {
  .warning-box      { background: color-mix(in srgb, var(--c-warn-soft) 40%, var(--c-surface)); }
  .oneliner         { background: color-mix(in srgb, var(--c-info-soft) 40%, var(--c-surface)); }
  .planned-notice   { background: color-mix(in srgb, var(--c-warn-soft) 40%, var(--c-surface)); }
  .day-tip          { background: color-mix(in srgb, var(--c-accent-soft) 40%, var(--c-surface)); }
  .check-action     { background: color-mix(in srgb, var(--c-ok-soft) 40%, var(--c-surface)); }
  .comorbidity-block .cb-what-to-do { background: color-mix(in srgb, var(--c-warn-soft) 40%, var(--c-surface)); }
  .decision-tree-block { background: color-mix(in srgb, var(--c-info-soft) 40%, var(--c-surface)); }
  .safety-red-flags { background: color-mix(in srgb, var(--c-danger-soft) 55%, var(--c-surface)); }
}