section {
  scroll-margin-top: 100px;
}
#nav-reference {
  transition: margin-top 0.3s ease;
}
#row {
  transition: padding-right 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  padding-left: 120px;
  max-width: 1200px; /* 限定最大宽度，防止正文无限宽，保持页面美观 */
  margin: 0 auto; 
  box-sizing: border-box; /* 盒模型包含padding，防止尺寸计算异常 */
  min-height: 200vh;

}


#row.navbar-collapsed {
    padding-right: 10px;
}
body {
    overflow-x: hidden;/*隐藏水平滚动条*/
}
/* ===== 右侧固定导航栏 ===== */
#side-navbar {
  position: fixed;
  top: 55%;
  left: 40px;               /* 贴左边，留一点呼吸空间 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4rem;                 /* 导航项之间的纵向间距 */
  z-index: 999;
  opacity: 0;                /* 默认隐藏（正文外不显示） */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 进入正文后显示 */
#side-navbar.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 导航链接样式 */
#side-navbar .nav-link {
  font-size: 18px;
  font-weight: 600;
  color: #3c517b;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 1rem 0;           /* 让每个链接自身也更宽松 */
}

/* 悬停效果 */
#side-navbar .nav-link:hover {
  color: #476A94;
  transform: translateX(-6px);
}

  p[id^="ref"] {
    scroll-margin-top: 100px;
  }

/*文字框背景色*/

  .section-box {
  background: rgba(255, 255, 255, 0.2); /* 半透明底 */
  border-radius: 15px;
  padding: 25px;
  margin: 20px auto; /* 居中 */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  width:100%;      /* 占屏幕 90% 宽度 */
  max-width: 100vw; /* 最大不超过 1200px（可调） */
  box-sizing: border-box; /* 确保 padding 不撑大 */
}

  .section-title{
    color:rgb(60,81,124);
    font-weight: 800; 
    font-size: 45px;
    margin-top: 0;
    margin-bottom: 15px;
    padding-left:20px;
  }

  /* 其他已有样式保持不变 */
  section {
    scroll-margin-top: 100px;
  }
  
  /* 其他样式... */


/*表格/表头背景色*/
  th {
    background-color: #DDE6FF;
  }




/*
#navbar-solution + .dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}*/

/* 鼠标悬停在按钮或者菜单时显示下拉菜单 */
/*
#navbar-solution:hover + .dropdown-menu,
#navbar-solution:focus + .dropdown-menu,
#navbar-solution + .dropdown-menu:hover {
  display: block;
  opacity: 1;
  visibility: visible;
}*/


  /* 表格自动布局 + 列宽提示 */
  .my-table {
    width: 100%;
    table-layout: auto;
  }
  .my-table th,
  .my-table td {
    vertical-align: top;
    padding: 0.5rem;
  }

    .img-text-block {
      display: flex;
      align-items: flex-start;   /* 图片顶部对齐文字顶端 */
      margin-bottom: 2rem;       /* 每组之间留点距离 */
    }

  .img-text-block img {
    width: 400px;              /* 或者你想要的固定宽度 */
    height: auto;
    margin-right: 1.5rem;      /* 图片和文字之间的间距 */
    flex-shrink: 0;            /* 防止图片被压缩 */
  }

  .img-text-block .text {
    flex: 1;                   /* 文本区域自动填满剩余空间 */
  }

.toc-link {
  position: relative;
  display: block;
  padding-right: 20px;     /* 文字和蓝条之间留点缓冲区 */
  margin-bottom: 24px;     /* 栏目之间的纵向间距 */
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.toc-link::after {
  content: "";
  position: absolute;
  left: -16px;            /* 蓝条移出文字区域，更靠右 */
  top: 25%;
  width: 4px;
  height: 50%;
  background-color: transparent;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.toc-link.active {
  font-weight: bold;
  color: #476A94;
}

.toc-link.active::after {
  background-color: #476A94;
}

  .figures-row {
    display: flex;
    flex-wrap: wrap;      /* 窗口太窄时自动换行 */
    gap: 1rem;            /* 图与图之间的间距 */
    justify-content: center; /* 居中对齐，可根据需要改为 flex-start */
  }
  .figures-row figure {
    flex: 1 1 45%;        /* 每张图占行宽的约 45%，视窗小可收缩到一行 */
    margin: 0;            /* 去掉默认的 figure margin */
    text-align: center;   /* 图注居中 */
  }
  .figures-row img {
    width: 100%;          /* 保证图片自适应其 figure 宽度 */
    height: auto;
  }
  .figures-row .caption {
    margin-top: 0.5rem;   /* 图注与图片的间距 */
    font-size: 0.9rem;
    color: #666;
  }

    .responsive-full {
      max-width: 500px;
      height: auto;
      object-fit: contain;
      display: block;
      margin: 0 auto;
    }

    .caption {
      display: block; /* Ensure proper block behavior */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 0.9rem; /* Slightly smaller than body text */
      line-height: 1.5; /* Improved readability */
      color: #555; /* Subtle gray text */
      text-align: center; /* Center alignment */
      padding: 0.6em 1em; /* Vertical and horizontal padding */
      margin-top: -1px; /* Aligns border with image */
    }

/* Orange Box Styling */
.orange-box {
  background-color: #F5E6D3; /* Light beige/orange background */
  border-radius: 12px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.orange-box-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.orange-box-icon {
  margin-right: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.orange-box-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.orange-box-milestone {
  font-size: 16px;
  font-weight: bold;
  color: #DC3545; /* Red color for milestone */
  margin: 0 0 15px 0;
}

.orange-box-content {
  color: #000;
}

.orange-box-content p {
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 14px;
}

.orange-box-content p:last-child {
  margin-bottom: 0;
}

.orange-box-content strong {
  font-weight: bold;
  color: #000;
}
 
#references p {
  font-size: 0.85rem;   /* 比正文小一些 */
  line-height: 1.5;    /* 适当的行距保证可读性 */
  margin-bottom: 0.5rem;
}

section[id] {
  scroll-margin-top: 200px; /* 这个值改成你的 navbar/hero 高度 */
}

/* edu attachments按钮样式*/
.btn-outline-primary {
  transition: all 0.3s ease;
  color: #3c517b;
  border-color: #3c517b;
}

.btn-outline-primary:hover {
  background-color: #8EACD9;
  color: white;
  border-color: #8EACD9;
}

  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  }

  .btn-custom {
    background-color: #3c517b !important;  /* 背景色 */
    color: white !important;              /* 文字颜色 */
    border: none !important;              /* 去掉边框 */
  }
  .btn-custom:hover {
    background-color: #8EACD9 !important; /* 悬停时更浅一点 */
    color: #000 !important; /* 浅色背景时让文字更清晰 */
  }

/* (removed minimized modal styles) */

  .image-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 确保小屏幕能换行 */
  }

  .image-box {
    flex: 0 0 45%;      /* 大屏幕时两张并排 */
    text-align: center; 
  }

  .image-box img {
    width: 100%;
    height: auto;
  }

  /* 小屏幕优化 */
  @media (max-width: 768px) {
    .image-box {
      flex: 0 0 100%;   /* 小屏幕时占满一行 */
    }
  }

#side-navbar .nav-link {
  color: #476A94 !important;  /* 基础颜色 */
}

/* 鼠标悬停时改变导航项文字颜色 */
#side-navbar .nav-link:hover {
      color: #5187d7 !important; /*Color: Cloudy blue*/
    }

.quote-box1 {
  display: flex;
  align-items: center;   /* 垂直居中对齐 */
  gap: 15px;             /* 图片和文字的间距 */
  padding: 10px;
  background-color: #ffffff;  /* 背景色，可以去掉 */
  border-left: 4px solid #3E4E8A; /* 左边加点强调 */
  border-radius: 8px;
}

.quote-img {
  width: 80px;   /* 控制图片大小 */
  height: auto;
  border-radius: 50%;   /* 圆形头像效果 */
}

.quote-texts {
  flex: 1;   /* 让文字部分占满剩余空间 */
}

.quote-text1 {
  margin: 0;  
  color: #333;
}

.quote-box2 {
  display: flex;
  flex-direction: row-reverse; /* 从右到左排布 */
  align-items: center;   /* 垂直居中对齐 */
  gap: 15px;             /* 图片和文字的间距 */
  padding: 10px;
  background-color: #ffffff;  /* 背景色，可以去掉 */
  border-right: 4px solid #3E4E8A; /* 右边加点强调 */
  border-radius: 8px;
}

.quote-text2 {
  margin: 0;  
  color: #333;
  text-align: right;
}

/* 标题样式*/
.dual-layer-title {
    position: relative;
    display: inline-block;
    font-weight: 800;
    font-size: 48px;
    font-family: 'Poppins', sans-serif;
    color: #104fa2; /* 深蓝字色 */
    padding: 0 10px;
    margin: 40px 0 20px;
    width: 100%;
  }

  /* 底层黄色条 */
  .dual-layer-title::before {
    content: '';
    position: absolute;
    bottom: -0.25em;  /* 🔹下移一点黄色条 */
    left: 0.25em;     /* 向右偏移形成错层 */
    width: 100%;
    height: 0.6em;
    background: #2798e3;
    border-radius: 8px;
    z-index: 0;
  }

  /* 上层橙色条 */
  .dual-layer-title::after {
    content: '';
    position: absolute;
    bottom: -0.05em;  /* 🔹让橙色条也往下移一些 */
    left: 0;
    width: 100%;
    height: 0.6em;
    background: #95bef1;
    border-radius: 8px;
    z-index: 1;
  }

  .dual-layer-title span {
    position: relative;
    z-index: 2;
  }

  /* Remove yellow line styling for h3 headings */
  h3.dual-layer-title::before,
  h3.dual-layer-title::after {
    display: none;
  }

  /*<!-- ===== Styles (result-table look) ===== -->*/
  .result-table {
    width: 95%;                 /* 比原来 80% 更宽，和你页面更配 */
    margin: 20px auto;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .result-table th {
    background-color: #6c82db;  /* 你指定的表头蓝 */
    color: #fff;
    padding: 12px 10px;
    font-weight: 700;
  }
  .result-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
  }
  .result-table tbody tr:last-child td {
    border-bottom: none;
  }
  .result-table tr:hover {
    background-color: #f5f8ff;
  }

  /* 复用你已有图注样式 */
  .figure-caption {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    text-align: justify;
    background: #fafafa;
    border-left: 4px solid #ff8d01;
    padding: 12px 15px;
    border-radius: 6px;
  }

  /* 可选：小屏自适应 */
  @media (max-width: 768px){
    .result-table { width: 100%; font-size: 14px; }
    .result-table th, .result-table td { padding: 10px 8px; }
  }
</style>

<style>
  /* 让Offline部分的活动标题更美观 */
  #offline h2:not(.dual-layer-title) {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #2a3d8f;
    margin-top: 50px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
  }

  /* 左侧渐变蓝竖条 */
  #offline h2:not(.dual-layer-title)::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 4px;
    width: 6px;
    height: 80%;
    background: linear-gradient(180deg, #6c82db, #a7b5ff);
    border-radius: 4px;
  }

  /* 悬停变亮效果 */
  #offline h2:not(.dual-layer-title):hover {
    color: #2798e3;
    transition: all 0.3s ease;
  }


  /* ===== 以下是members页所用的所有CSS ===== */
.member-card {
    margin-bottom: 30px;
    perspective: 1200px;/* 让卡片高度自适应内容 */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff;
    position: relative;
    overflow: hidden; /* 防止图片放大溢出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 320px; /* 给卡片一个基础高度，避免塌陷 */
    justify-content: center;
}

.member-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 图片样式 */
.member-photo,
.mentor-front img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* 放大时只影响图片 */
.member-card:hover .member-photo {
    transform: scale(1.03);
}

/* 文字容器 */
.member-info {
    position: relative;
    z-index: 2;
    background: transparent;
    margin-top: 12px;
    pointer-events: none; /* 不阻挡鼠标事件 */
}

.member-info h5,
.member-info p {
    position: relative;
    z-index: 3;
    margin: 5px 0;
}

/* ===== 3D 翻转基础 ===== */
.mentor-inner {
    position: relative; /* 让正反两面有定位参考 */
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: center;
}

/* hover 或点击时翻转 */
.mentor-card.is-flipped .mentor-inner {
    transform: rotateY(180deg);
}

/* 正反面通用样式 */
.mentor-front,
.mentor-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

/* 背面 */
.mentor-back {
    background-color: #f8f9fa;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 1;
    height: 100%; /* 自动和正面一样高 */
}

/* 透视效果 */
.member-card, .mentor-card {
    perspective: 1200px;
}

/* 如果后续还想用按钮翻转 */
.member-info .flip-trigger {
    pointer-events: auto;
    cursor: pointer;
    display: inline-block;
    user-select: none;
    outline: none;
}

.member-info .flip-trigger:focus {
    box-shadow: 0 0 0 3px rgba(21,156,228,0.25);
    border-radius: 8px;
}

.mentor-front {
    position: relative;  /* 正面用相对定位，这样高度由它内容决定 */
    z-index: 2;
}

.clone-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.clone-card .clone-inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
}

.clone-card .clone-left {
  flex: 0 0 35%;
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 内边距控制留白 */
  box-sizing: border-box;
}

.clone-card .clone-left img {
  max-width: 100%;
  height: 100%;
  object-fit: contain; /* 保持完整，留白对称 */
}

.clone-card .clone-right {
  flex: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 左对齐内容 */
  background: #fff;
}

.clone-card .clone-right h5 {
  font-size: 24px;
  margin-bottom: 10px;
}

.clone-card .clone-right p.member-bio {
  font-size: 16px;
  color: #333;
  margin-bottom: 1em; /* 段落间空行 */
  line-height: 1.6;   /* 行距更舒服 */
  text-align: left; /* 左对齐正文 */
}

/* 小屏幕下变成上下布局 */
@media (max-width: 768px) {
  .clone-card .clone-inner {
    flex-direction: column;
  }

  .clone-card .clone-left,
  .clone-card .clone-right {
    width: 100%;
    height: auto;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);  /* 半透明暗色 */
  backdrop-filter: blur(5px);   /* 模糊效果 */
  z-index: 2000;                /* 比正常内容高，但低于弹窗 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;         /* 默认不拦截点击 */
}

.overlay.active {
  opacity: 1;
  pointer-events: all;          /* 激活时可以拦截点击（点击空白关闭也可做） */
}
.clone-card .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease;
}

.clone-card .close-btn::before,
.clone-card .close-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: #fff;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.clone-card .close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.clone-card .close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.clone-card .close-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}


.timeline-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  text-align: center;
  pointer-events: none;
  width: 180px;        /* 让标签区更宽 */
  white-space: normal; /* 允许换行 */
  line-height: 1.4;
}

.timeline-label h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline-label p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}