/* 页面头部 */
.page-header {
    position: relative;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: clamp(250px, 30vw, 400px);
  }

/* 全屏主图模式 */
.page-header.full-hero {
  height: 100vh; /* 填满视口高度 */
  min-height: 500px; /* 避免过矮 */
  max-height: 1000px; /* 防止极高超大屏拉伸过度，可按需调整或删除 */
  border-radius: 0; /* 与全宽模式一致 */
  margin-bottom: 0; /* 主图紧贴下方内容，可后续加分隔 */
}
/* 顶部渐变遮罩：提升导航与标题对比度 */
.page-header.full-hero::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,25,40,0.65) 0%, rgba(10,25,40,0.45) 25%, rgba(10,25,40,0.15) 55%, rgba(10,25,40,0) 80%);
  pointer-events:none;
  z-index:1;
}

/* 确保标题在遮罩之上 */
.page-header.full-hero .page-name { z-index:2; }
/* 向下滚动指示箭头 */
.scroll-indicator { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:28px; height:48px; border:2px solid rgba(255,255,255,.55); border-radius:20px; display:flex; align-items:flex-start; justify-content:center; padding-top:6px; box-sizing:border-box; z-index:2; backdrop-filter: blur(2px); background:rgba(255,255,255,0.08); }
.scroll-indicator span { width:6px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); animation:scroll-pulse 1.6s infinite ease-in-out; opacity:.9; }
@keyframes scroll-pulse { 0%{ transform:translateY(0) rotate(-45deg); opacity:0;} 30%{opacity:1;} 60%{ transform:translateY(10px) rotate(-45deg); opacity:1;} 100%{ transform:translateY(14px) rotate(-45deg); opacity:0;} }
/* 方案：如果希望主图完全显示且不被固定导航(80px)遮挡，同时整体视觉仍占满屏，可使用 offset-nav 类 */
.page-header.full-hero.offset-nav {
  height: calc(100vh - 80px); /* 视口减去导航高度 */
  margin-top: 80px;           /* 把整个容器整体下移 */
}

@media (max-width: 768px) {
  .page-header.full-hero.offset-nav { height: calc(70vh - 60px); margin-top:60px; }
}

/* （可选保留注释）如果未来需要让主图避开固定导航，可恢复如下：
.page-header.full-hero.adjust-for-nav { height: calc(100vh - 80px); padding-top:80px; box-sizing:border-box; }
*/

/* 中屏稍微降低占用 */
@media (max-width: 1200px) {
  .page-header.full-hero { height: 85vh; }
}

/* 小屏不建议完全 100vh，保留空间给导航 */
@media (max-width: 768px) {
  .page-header.full-hero { height: 70vh; }
}

/* === 补充：full-bleed 模式去顶边距并保证 full-hero 图片全覆盖 === */
.page-container.full-bleed { padding-top:0; }
.page-header.full-hero .header-mid,
.page-header.full-hero .header-mid img:first-child { width:100%; height:100%; }
.page-header.full-hero .header-mid img:first-child { object-fit:cover; object-position:center; }

  .page-name {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
    line-height: 1.2;
  }
  /* Protocol 页面放大头图标题字号（再次加大，可通过变量调节） */
  :root { --protocol-hero-title-min: 3.5rem; --protocol-hero-title-vw: 7vw; --protocol-hero-title-max: 6rem; }
  .protocol-page .page-name { font-size: clamp(var(--protocol-hero-title-min), var(--protocol-hero-title-vw), var(--protocol-hero-title-max)); }

  .header-mid {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 确保内容不会溢出 */
  }

  .header-mid img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持宽高比的同时填充整个容器 */
    object-position: center;
    /* 居中显示图片 */
    display: block;
    /* 移除图片底部间隙 */
  }

  .header-mid img:last-child {
    position: absolute;
    right: 0%;
    bottom: 0;
    height: 100%;
    max-height: 400px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

/* 修改页面容器背景色 */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0rem 1rem;
  background-color: #e0edff;
  transition: max-width .4s ease, padding .4s ease;
}

/* 全宽铺满模式：给容器加 full-bleed 类 */
.page-container.full-bleed {
  max-width: none;
  width: 100%;
  margin: 0; /* 去掉左右居中 */
  padding-left: 0;
  padding-right: 0;
}

/* 全宽时：头部与主体去圆角、去外边距、充满视口宽度 */
.page-container.full-bleed .page-header {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.page-container.full-bleed .page-body {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}

/* 让左右排版真正贴边：内部再定义一个可选内容安全内边距（防止文字贴屏幕太紧） */
.page-container.full-bleed .right-text {
  padding-left: clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* 左侧导航栏贴边，不再留父容器内边距 */
.page-container.full-bleed .left-nav {
  padding-left: clamp(0.5rem, 1.2vw, 1.2rem);
  padding-right: clamp(0.5rem, 1.2vw, 1.2rem);
}

/* 小屏全宽下：减少左右安全内边距 */
@media (max-width: 768px) {
  .page-container.full-bleed .right-text {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .page-container.full-bleed .left-nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
  .page-body {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 4rem;
  }

  /* 左侧导航栏 */
  /* 可调侧栏右移偏移量（桌面端） */
  :root { --protocol-left-nav-offset: 80px; }
  .left-nav {
    flex: 0 0 250px;
    background: #ffffff;
    border-right: 1px solid #5ea1fc; /* 改为主题蓝色 */
    padding: 2rem 1rem;
    margin-left: 135px; /* 左侧边栏整体右移（原 40px -> 80px，可调变量） */
  }
  /* 可选宽版导航：保持左边起点不动，仅增加整体宽度（右向扩展） */
  .left-nav.left-nav-wide {
    flex: 0 0 400px; /* 原 250px -> 320px，可继续调 300/340 */
  }

  .left-nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    padding: 0 1rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--accent);
  }
  /* Protocol 页面放大侧栏标题字号（再次加大） */
  .protocol-page .left-nav-title { font-size: 2.2rem; letter-spacing: .6px; line-height: 1.15; }
  @media (max-width: 1100px){
    .protocol-page .left-nav-title { font-size: 2rem; }
  }
  @media (max-width: 900px){
    .protocol-page .left-nav-title { font-size: 1.8rem; }
  }
  /* Protocol 页面：导航标题下划线改为主题蓝色 #5ea1fc */
  .protocol-page .left-nav-title { border-bottom-color: #5ea1fc; }

  .left-nav-item {
    padding: 12px 1rem;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text);
    font-weight: 500;
  }

  .left-nav-item:hover,
  .left-nav-item.active {
    background: #e9f8f3;
    color: var(--accent);
  }

  /* Protocol 页面：当前激活章节更明显的高亮（左侧彩条 + 浅蓝背景） */
  /* ================= 左侧导航自动序号 ================= */
  /* 使用 CSS counter 给 Protocol 页面导航项添加 1 / 2 / 3 序号 */
  .protocol-page .left-nav-items { counter-reset: nav-sec; }
  .protocol-page .left-nav-item { position: relative; padding-left: 1.75rem; }
  .protocol-page .left-nav-item::before {
    counter-increment: nav-sec;
    content: counter(nav-sec) "."; /* 显示形式：1. 2. 3. */
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #4a95f5;
    opacity: 0.85;
    pointer-events: none;
  }

  /* 激活项：背景 + 左侧彩条（改用 ::after，避免与数字 ::before 冲突） */
  .protocol-page .left-nav-item.active {
    background: linear-gradient(90deg, rgba(94,161,252,0.18), rgba(94,161,252,0.05));
    color: #0561c9;
    font-weight: 700;
  }
  .protocol-page .left-nav-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 2px;
    background: #5ea1fc;
  }

  /* 右侧内容区域 */
  .right-text {
    flex: 1;
    padding: 3rem;
  }

  /* Protocol 页面正文瘦身：控制最大宽度并水平居中 */
  /* 调整正文最大宽度 & 位置：右侧向左收缩 + 整体右移偏移量 */
  :root { --protocol-content-max: 1100px; --protocol-main-offset: 60px; }
  .protocol-page .right-text .main-text { 
    max-width: var(--protocol-content-max);
    margin-left: var(--protocol-main-offset); /* 整体右移，可调 0 / 40 / 60 / 80 */
    margin-right: auto; /* 保持右侧自然收缩 */
  }
  /* 调整说明：修改 --protocol-content-max 即可 (例: 840px / 960px)。 可换成 clamp(760px,60vw,1000px) 做自适应。 */

  .main-text {
    margin-bottom: 3rem;
  }

  .text-content {
    margin-bottom: 4rem;
  }

  .text-content-h1 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eee;
  }

  /* Protocol 页面主标题下划线专用颜色覆盖 */
  .protocol-page .text-content-h1 {
    border-bottom-color: #5ea1fc;
  }

  .text-content-p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--text);
  }

  .text-img-container {
    margin: 2rem 0;
    text-align: center;
  }

  .text-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
  }

  .figure-caption {
    font-size: 0.95rem;
    color: var(--text-light);
    font-style: italic;
  }

  .references {
    padding-top: 2rem;
    border-top: 1px solid #eee;
  }

  .references ul {
    list-style-position: inside;
    padding-left: 1rem;
  }

  .references li {
    margin-bottom: 1rem;
    line-height: 1.8;
  }

  /* =============== 折叠长步骤段落按钮与隐藏样式 =============== */
  .collapsed-step.is-hidden { display: none; }
  .collapse-toggle {
    margin-top: 0.5rem;
    display: inline-block;
    background: linear-gradient(90deg,#5ea1fc,#7ab7ff);
    color: #fff;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    transition: background .25s ease, transform .2s ease;
  }
  .collapse-toggle:hover { background: linear-gradient(90deg,#4d95e8,#6aa9f5); }
  .collapse-toggle:active { transform: scale(.96); }
  .collapse-toggle:focus { outline: 2px solid #1d6fd8; outline-offset: 2px; }

  /* =============== Base 合并折叠 =============== */
  .base-collapse-toggle {
    margin-left: 1rem;
    font-size: 0.75rem;
    background: #5ea1fc;
    color: #fff;
    border: none;
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: background .25s ease, transform .2s ease;
  }
  .base-collapse-toggle:hover { background:#3f88e8; }
  .base-collapse-toggle:active { transform:scale(.95); }
  .base-subsections { margin-top: 1rem; }
  .base-subsections.is-collapsed { display:none; }

  /* ================= Protocol 专属左侧导航字体放大加粗 ================= */
  /* 标题已经是 1.5rem / 700，如需更突出可再提升；这里维持标题不变，仅放大 item */
  .protocol-page .left-nav-item { font-size: 1.05rem; font-weight: 600; }
  /* 若希望更大：可把 font-size 调到 1.1rem 或 1.15rem；若只想加粗保留原字号：删掉 font-size */
  /* Hover / active 状态保持原有颜色逻辑，不额外修改 */

  @media (max-width: 480px) {
    /* 小屏去掉侧边栏右移偏移，保证可用空间 */
    .protocol-page .left-nav { margin-left: 0; }
    .page-container {
      padding: 0.5rem;
    }
    
    .page-header {
      border-radius: 10px;
      height: clamp(150px, 20vw, 200px);
    }
    
    .page-name {
      font-size: clamp(1.5rem, 3vw, 2rem);
    }
    
    .header-mid img:last-child {
      display: none;
    }
  }
/* Protocol 页面底色 */
.protocol-page {
  background-color: #e0edff !important;
}

/* 如果内部容器有白底覆盖，可一并加： */
.protocol-page .page-body,
.protocol-page .page-header,
.protocol-page .right-text,
.protocol-page .left-nav {
  background-color: transparent !important;
}

/* === Protocol 左侧导航白底样式 === */
.protocol-page .left-nav,
.protocol-page .left-nav-title,
.protocol-page .left-nav-items {
  background:#ffffff !important;
}

.protocol-page .left-nav {
  color:#1a1f29;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.protocol-page .left-nav-item {
  background:transparent;
  color:#1a1f29;
  transition:background .2s,color .2s;
}

.protocol-page .left-nav-item:hover,
.protocol-page .left-nav-item.active {
  background:#f2f6fa;
  color:#0561c9;
}

/* === Protocol 页面：正文白色卡片 + 外层保持蓝色底 === */

/* 1. 先把全局 page-body 的白底在本页面撤销 */
.protocol-page .page-body {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 2rem;               /* 左侧导航与正文间距 */
  align-items: flex-start; /* 避免不同高度导致顶端不齐可自行调整 */
  position: relative;
  padding: 0 2rem 3rem;    /* 两侧/底部留呼吸空间（可调） */
  box-sizing: border-box;
}

/* 2. 正文卡片（如果有 .main-text 容器则使用它；没有则直接用 .right-text 自身） */
.protocol-page .right-text {
  background: none; /* 让 right-text 只是布局容器 */
  padding: 0;
  max-width: none;
}

.protocol-page .right-text .main-text,
.protocol-page .right-text:not(:has(.main-text)) {
  background: #fff !important;
  border-radius: 18px;
  box-shadow: 0 8px 30px -6px rgba(16,38,73,0.18), 0 4px 12px -2px rgba(16,38,73,0.10);
  padding: 2.5rem 3rem;
  box-sizing: border-box;
  width: 100%;
  max-width: clamp(760px, 68vw, 1200px);
  margin: 2rem auto 4rem !important;  /* 需要再大就调 3rem / 4rem */
  padding-top: 2.25rem;               /* 保障首个标题与顶部有空间 */
  position: relative;
  z-index: 10;
}

/* 3. 英雄图与卡片之间如果不想层叠，取消上面 margin:-80px，换成 margin:2rem auto 4rem; */

/* 4. 文字基本排版微调（可选） */
.protocol-page .right-text .main-text > *:first-child {
  margin-top: 0;
}
.protocol-page .right-text .main-text p {
  line-height: 1.75;
}

/* 5. 小屏优化：去掉层叠，减小内边距 */
@media (max-width: 900px) {
  .protocol-page .page-body {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1.25rem 2.5rem;
  }
  .protocol-page .left-nav {
    margin-left: 0;
    flex: 1 1 auto;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  .protocol-page .right-text .main-text,
  .protocol-page .right-text:not(:has(.main-text)) {
    margin: 0 auto 2.5rem;
    padding: 1.75rem 1.5rem;
    border-radius: 16px;
    max-width: 100%;
  }
}

/* 6. 若顶部层叠阴影太重，可加一条柔和分割渐变（可选） */
/*
.protocol-page .page-header.full-hero {
  margin-bottom: 0;
}
.protocol-page .page-header.full-hero::after {
  background: linear-gradient(to bottom, rgba(10,25,40,0.65) 0%, rgba(10,25,40,0.35) 35%, rgba(224,237,255,0) 85%);
}
*/

/* === Protocol 左侧导航与正文卡片对齐 & 统一卡片风格 === */
.protocol-page .page-body {
  /* 已有 gap:2rem; 保持即可 */
  align-items: flex-start;
}

/* 覆盖之前的 margin-left:135px 等设置 */
.protocol-page .left-nav {
  margin: 2rem 0 4rem 0 !important;  /* 与正文卡片 margin-top:2rem 对齐 */
  flex: 0 0 340px;                   /* 可调：300~380 */
  background:#fff !important;
  border:0 !important;
  border-right:0 !important;
  border-radius:18px;
  box-shadow: 0 8px 30px -6px rgba(16,38,73,0.18), 0 4px 12px -2px rgba(16,38,73,0.10);
  padding: 2rem 1.75rem 2.25rem;
  box-sizing:border-box;
  overflow:hidden;                  /* 防止内部溢出破坏圆角 */
}

/* 宽版导航同样继承，不再扩大内部错位，只调基准宽度 */
.protocol-page .left-nav.left-nav-wide {
  flex:0 0 360px;
}

/* 标题区与正文卡片内边距视觉对齐 */
.protocol-page .left-nav-title {
  margin:0 0 1.25rem;
  padding:0 0 0.75rem;
  border-bottom:2px solid #5ea1fc;
  font-size:2rem;
  line-height:1.1;
  background:transparent;
}

/* 列表容器去背景（保持纯白） */
.protocol-page .left-nav-items {
  background:transparent !important;
}

/* 导航项保持内部留白，圆角稍大与整体协调 */
.protocol-page .left-nav-item {
  border-radius:8px;
  padding:12px 0.9rem 12px 1.75rem; /* 预留序号空间 */
}

/* 正文卡片与导航顶部已经对齐，无需改变 main-text 现有 margin; 若 main-text 曾被改动可再次保证 */
.protocol-page .right-text .main-text,
.protocol-page .right-text:not(:has(.main-text)) {
  margin: 2rem auto 4rem !important;
}

/* 小屏：仍然纵向堆叠，占满宽度 */
@media (max-width: 900px) {
  .protocol-page .left-nav {
    flex:1 1 auto;
    width:100%;
    margin: 1.25rem 0 0 0 !important;
    border-radius:16px;
  }
  .protocol-page .left-nav.left-nav-wide {
    flex:1 1 auto;
  }
  .protocol-page .right-text .main-text,
  .protocol-page .right-text:not(:has(.main-text)) {
    margin: 1.25rem auto 2.5rem !important;
  }
}

/* === Protocol 左侧导航整体右移 === */
/* 调整这个变量即可：2rem / 3rem / 4rem */
:root {
  --protocol-left-nav-shift: 8rem;
}

.protocol-page .left-nav {
  margin-left: var(--protocol-left-nav-shift) !important;
}

/* 若想正文保持原位置不跟着一起移动就只留上面代码；
   如果希望左右两张卡之间的间距不被放大，可同步减少 gap： */
.protocol-page .page-body {
  gap: 0.5rem; /* 可再调，如仍太宽可调成 1.5rem */
}

/* 小屏还原（避免占用横向空间） */
@media (max-width: 900px) {
  .protocol-page .left-nav {
    margin-left: 0 !important;
  }
}