/*forum.css*/

.external-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.external-link {
    background-color: var(--light-color);
    padding: 1rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: background-color 0.3s;
}

.external-link:hover {
    background-color: var(--secondary-color);
    color: white;
}

    /* 标签页样式 */
.tabs {
    display: flex;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.tab {
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.tab.active {
    color: var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* 图片样式 */
.speaker-img, .sponsor-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.page-content {
    min-height: 400px;
}


.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.schedule-table th, .schedule-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.schedule-table th {
    background-color: var(--secondary-color);
    color: white;
    font-weight: 600;
}

.schedule-table tr:last-child td {
    border-bottom: none;
}

.schedule-table tr:hover {
    background-color: #f5f9ff;
}

.time-slot {
    font-weight: 600;
    color: var(--primary-color);
    width: 150px;
}

.speaker-card {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    
}


.speaker-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.speaker-info {
    flex: 1;
}

.speaker-name {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.speaker-title {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-weight: 500;
}

.theme-highlight {
    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
    color: white;
    padding: 3rem;
    border-radius: 8px;
    margin: 2rem 0;
    text-align: center;
}

.theme-highlight h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .speaker-card {
        flex-direction: column;
        text-align: center;
    }
    
    .speaker-photo {
        align-self: center;
    }
    
    .tabs {
        flex-direction: column;
    }
    
    .tab {
        text-align: center;
    }
}

#tab2 .section-title {
  margin: 0.6rem 0;
}

#tab2 .schedule-table {
  margin: 0.6rem 0;
  border-collapse: collapse;
  border-spacing: 0;
}

#tab2 .schedule-table th,
#tab2 .schedule-table td {
  padding: 0.4rem 0.6rem;
  line-height: 1.3;
}

/* Event info 样式（地址条） */
/* 统一：举办地点信息条 == 白色卡片 + 阴影 + 左侧色条 */
.event-info{
  margin: 1.2rem 0 1.6rem;
  padding: 1rem 1.25rem;
  background: #fff;                                 /* ✅ 白底 */
  border: 0;                                        /* 去掉描边 */
  border-radius: 8px;                               /* 与 .schedule-table 一致 */
  box-shadow: 0 5px 15px rgba(0,0,0,.05);           /* 与卡片/表格统一 */
  position: relative;
}
.event-info::before{                                 /* 左侧品牌色竖条 */
  content:"";
  position:absolute; 
  inset:0 auto 0 0;
  width:4px; 
  border-radius:8px 0 0 8px;
  background: var(--secondary-color);
}
.event-info .meta-label{                             /* 文案主色，与整体一致 */
  font-weight:600; 
  color: var(--primary-color);
}
.event-info .meta-value{ 
    color:#333; 
}
.event-info .meta-map{
  margin-left:auto; 
  text-decoration:none; 
  font-weight:600;
  color: var(--secondary-color);
}
.event-info .meta-map:hover{ 
    text-decoration:underline; 
}

/* 双列布局：左文本，右侧图片 */
.event-info .event-info-grid{
  display: grid;
  grid-template-columns: 1fr 340px;   /* 右侧固定宽度，可按图宽调 300~380px */
  gap: 1rem 1.25rem;
  align-items: center;
}

/* 左侧文本区（原 .event-meta -> .event-text） */
.event-info .event-text{
    display: block;    
}
.event-info .meta-label{ 
    font-weight:600; 
    color: var(--primary-color); 
}
.event-info .meta-value{ 
    color:#333; 
}
/* 查看地图：单独占一行，不再贴右侧 */
.event-info .meta-map{
  display: block;     
  margin-left: 0;     
  margin-top: .5rem;  
}
.event-info .meta-map:hover{ 
    text-decoration: underline; 
}

/* 右侧图片卡片 */
.event-info .event-aside .photo-link{
  display:block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
}
.event-info .event-aside img{
  width: 100%;
  height: 200px;                     /* 和左侧行高匹配；可调 */
  object-fit: cover;
  display:block;
  transition: transform .18s ease;
}
.event-info .event-aside .photo-link:hover img{
  transform: scale(1.02);
}

/* 窄屏下改为上下堆叠 */
@media (max-width: 900px){
  .event-info .event-info-grid{ 
    grid-template-columns: 1fr; 
}
  .event-info .meta-map{ 
    margin-left: 0; 
}      /* 小屏让按钮回到行内 */
  .event-info .event-aside{ 
    margin-top: .5rem; 
}
}

/* 图片放大预览遮罩层 */
.image-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 激活状态 */
.image-overlay.active {
  display: flex;
}

/* 放大图片样式 */
.image-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease-in-out;
}

/* --- Speakers 网格（6行�2列 + 按列优先自动排布）--- */
.speaker-grid {
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: stretch; /* ✅ 让每列高度拉齐 */

}

/* 避免与 .speaker-card 自带的 margin-bottom 叠加，限于网格内部生效 */
.speaker-grid .speaker-card {
  margin-bottom: 0;
}

/* 响应式：窄屏改为单列流式 */
@media (max-width: 900px){
  .speaker-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;   /* 行数不固定，跟着内容走 */
    grid-auto-flow: row;        /* 小屏按行排列更自然 */
  }
}



/* 弹窗背景 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
}


/* 弹窗内容 */
.popup-content {
  position: relative;
  background: white;
  padding: 2rem;
  border-radius: 10px;
  max-width: 75%;
  width: 90%;
  height: 85vh;    /* 设置高度为视口的 85% */
  min-height: 500px;  /* 设置最小高度，防止弹窗过小 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.5s ease-in-out;
  display: flex;
  flex-direction: column; /* 让内容垂直排列 */
  justify-content: center; /* 确保图片和按钮都垂直居中 */
}

/* 弹窗内的图片样式，确保图片居中并适应弹窗 */
#popupImage {
  max-width: 100%;   /* 保证图片宽度自适应容器 */
  height: auto;      /* 保持图片比例 */
  max-height: 70vh;   /* 最大高度为视口的 80%（根据需求调整） */
  border-radius: 8px; /* 可选：加上圆角效果 */
  margin-bottom: 1rem; /* 可选：为图片添加一些底部间距 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 给图片添加阴影效果 */
}


/* 2) 显示态改为 .show（替代 .shrink 的反义逻辑） */
.popup-overlay.show{
  opacity: 1;
  visibility: visible;
}

/*
.popup-overlay.shrink .popup-content {
  transform: translateY(100%);
  max-width: 50px;
  width: 50px;
  height: 0;
  padding: 0;
  opacity: 0;
} */


/* 弹窗关闭按钮 */
#closePopup {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 弹窗关闭按钮，固定在图片正下方 */
#closePopup {
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  bottom: 20px;  /* 按钮距底部的距离 */
  left: 50%;
  transform: translateX(-50%);  /* 水平居中按钮 */
}


#closePopup:hover {
  background-color: #0056b3;
}

/* 使按钮容器居中 */
.button-container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: auto;            /* 使容器的高度占满整个屏幕 */
  padding-top: 1rem;        /* 如果需要顶部间距 */
  padding-bottom:clamp(12px, 2vh, 24px);  
}

/* 重新打开弹窗按钮 */
#reopenPopup {
  padding: 6px 12px;                  /* 按钮内边距 */
  background-color: #007bff;           /* 背景颜色 */
  color: #fff;                         /* 字体颜色 */
  border: none;                        /* 去除边框 */
  border-radius: 8px;                  /* 圆角 */
  font-size: 16px;                     /* 字体大小 */
  font-weight: bold;                   /* 字体加粗 */
  cursor: pointer;                    /* 鼠标悬停时为手指样式 */
  transition: background-color 0.2s;   /* 背景颜色过渡效果 */
  margin: 0;                        /* 去除边距 */
  
}

/* 鼠标悬停时背景颜色变化 */
#reopenPopup:hover {
  background-color: #0056b3;           /* 悬停时背景色 */
}

/* 鼠标点击时按钮效果 */
#reopenPopup:active {
  background-color: #004085;           /* 点击时背景色 */
  transform: scale(0.98);              /* 点击时缩小效果 */
}

/* 日程安排表头：同一 <th> 内中/英上下排版 */
.schedule-table thead th .lang-zh,
.schedule-table thead th .lang-en {
  display: block;
  line-height: 1.2;
}


/* === Tab4：分论坛安排 - 紧凑排版，跟 #tab2 一致 === */
#tab4 .section-title {
  margin: 0.6rem 0;
}

#tab4 .schedule-table {
  margin: 0.6rem 0;
  border-collapse: collapse;
  border-spacing: 0;
}

#tab4 .schedule-table th,
#tab4 .schedule-table td {
  padding: 0.4rem 0.6rem;
  line-height: 1.3;
}

/* 表头“时间”中/英上下堆叠（同样作用到 #tab2，保持统一） */
/* #tab2 .schedule-table thead th .lang-zh,
#tab2 .schedule-table thead th .lang-en,
#tab4 .schedule-table thead th .lang-zh,
#tab4 .schedule-table thead th .lang-en {
  display: block;
  line-height: 1.2;
} */

/* === 表头中英文上下堆叠样式 === */
.schedule-table thead th {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
}

.schedule-table thead th .lang-zh,
.schedule-table thead th .lang-en {
  display: block;
  line-height: 1.3;
}

.schedule-table thead th .lang-zh {
  font-size: 1rem;
}

.schedule-table thead th .lang-en {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 分论坛表格：地点列的最小宽度与不换行建议 */
.schedule-table .place {
  min-width: 180px;
  white-space: nowrap;
}

/* 若担心小屏溢出，可以在窄屏下允许换行 */
@media (max-width: 600px) {
  .schedule-table .place {
    white-space: normal;
  }
}

/* 让时间列与地点列居中对齐（全局对齐已改为 center，这里只是强调） */
.schedule-table .time-slot,
.schedule-table .place {
  text-align: center;
}


/* === 为日程安排与分论坛安排增加与页脚的距离 === */
#tab2,
#tab4 {
  margin-bottom: 4rem;   /* 模块整体与下方 footer 保持更大间距 */
  padding-bottom: 2rem;  /* 内部留白，视觉更舒适 */
}

/* 可选：在小屏时稍微减少留白以避免过空 */
@media (max-width: 768px) {
  #tab2,
  #tab4 {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
  }
}

/* 日程安排与分论坛：标题的统一间距与居中 */
#tab2 .section-title,
#tab4 .section-title {
  text-align: center;
  margin: 2rem 0 1rem;   /* 上下留白：上 2rem、下 1rem */
}

/* 专门给“日程安排”区域里，紧跟在 .event-info 之后的第一组标题多留点空间 */
#tab2 .event-info + .section-title.lang-zh {
  margin-top: 3rem;       /* 第一组（中文标题）额外加大与上方模块的距离 */
}
/* 中文标题下面紧跟的英文标题，间距更紧凑一些即可 */
#tab2 .section-title.lang-zh + .section-title.lang-en,
#tab4 .section-title.lang-zh + .section-title.lang-en {
  margin-top: 0.25rem;
}

/* === 大会邀请函：卡片样式 === */

.invite-card {
  max-width: 1080px;  /* 或 1200px，看你版面空间 */
  margin: 1rem auto 2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1rem;
  overflow: hidden;
}

.invite-image {
  display: block;
  width: 100%;
  height: auto;              /* 等比缩放 */
  object-fit: contain;       /* 保障整张图展示 */
  border-radius: 12px;       /* 图本身也有轻微圆角 */
  transition: transform .25s ease;
}

.invite-card:hover .invite-image {
  transform: translateY(-2px);
}

/* 邀请函标题的上下留白（与现有 section-title 风格保持一致） */
#tab1 .section-title {
  text-align: center;
  margin: 1.25rem 0 1rem;
}

/* 小屏优化：减少外边距，避免过度留白 */
@media (max-width: 768px) {
  .invite-card { margin: .5rem auto 1.25rem; padding: .75rem; }
}


/* 让地点列纵向居中、对齐整齐 */
.schedule-table td.place {
  vertical-align: middle;
}

/* 让中文/英文的展示层级更清晰 */
.schedule-table td .lang-zh { line-height: 1.5; }
.schedule-table td .lang-en { line-height: 1.4; opacity: .95; }


.section-subtitle {
  margin: 1.2rem 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
}

/* 午餐这行的特殊底色 */
.schedule-table--break tbody tr {
  background: #f8fafc;
}
.schedule-table--break .time-slot {
  font-weight: 600;
}
.schedule-table--break td {
  border-bottom: none; /* 这张表只一行，不需要底部分隔线 */
}

/* 让被合并（rowspan）的地点首格在同组任意行 hover 时也高亮 */
.schedule-table td.place.hover-sync {background-color: #f5f9ff; /* 与 .schedule-table tr:hover 同色 */}
.schedule-table td.place.hover-sync,
.schedule-table td.time-slot.hover-sync,
.schedule-table td.activity.hover-sync { background-color: #f5f9ff; }
/* 让被合并后的“首格”在同组的任意一行 hover 时也能变色 */
.schedule-table td.hover-sync { background-color: #f5f9ff; }

/* 小屏优化：主题区域字体调整 */
@media (max-width: 768px) {
  .theme-highlight h2 {
    font-size: 1.3rem;  /* 从 2rem 缩小到 1.3rem */
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }
  
  .theme-highlight p {
    font-size: 0.9rem;  /* 适当缩小段落文字 */
    line-height: 1.5;
  }
  
  .theme-highlight {
    padding: 2rem 1.5rem;  /* 减少内边距 */
  }
}

/* 小屏优化：表格列宽调整 */
@media (max-width: 768px) {
  /* 缩小时间列宽度 */
  .schedule-table .time-slot {
    width: 80px;  /* 从默认 150px 缩小 */
    font-size: 0.85rem;
    padding: 0.5rem 0.3rem;
    white-space: nowrap;  /* 防止时间换行 */
  }
  
  /* 缩小地点列宽度 */
  .schedule-table .place {
    width: 90px;  /* 限制地点列宽度 */
    font-size: 0.85rem;
    padding: 0.5rem 0.3rem;
    white-space: normal;  /* 允许地点文字换行 */
    min-width: unset;  /* 移除之前设置的最小宽度 */
  }
  
  /* 活动内容列自动占用剩余空间 */
  .schedule-table .activity {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
  
  /* 整体表格字体缩小 */
  .schedule-table th,
  .schedule-table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.85rem;
  }
  
  .schedule-table th {
    font-size: 0.9rem;
  }
}

/* 超小屏（手机竖屏）进一步优化 */
@media (max-width: 480px) {
  .theme-highlight h2 {
    font-size: 1.1rem;
  }
  
  .theme-highlight p {
    font-size: 0.85rem;
  }
  
  .schedule-table .time-slot {
    width: 70px;
    font-size: 0.75rem;
  }
  
  .schedule-table .place {
    width: 75px;
    font-size: 0.75rem;
  }
  
  .schedule-table .activity {
    font-size: 0.85rem;
  }
  
  /* 表格标题也缩小 */
  .schedule-table thead th .lang-zh {
    font-size: 0.85rem;
  }
  
  .schedule-table thead th .lang-en {
    font-size: 0.75rem;
  }
}

/* === 大会邀请函视频区域 === */
.invite-media {
  max-width: 1080px;
  margin: 0 auto 2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1rem 1rem 1.25rem;
}

.invite-media .section-title {
  text-align: center;
  margin: 0.75rem 0 0.75rem;
}

/* 16:9 自适应容器（适配 <video> 或 <iframe>） */
.video-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* 现代浏览器优先使用 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* 兼容不支持 aspect-ratio 的旧环境（可选） */
.video-16x9::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.video-16x9 > .video-el,
.video-16x9 > .embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* 小屏优化：收紧外边距与标题大小，和已存在的 .invite-card 风格保持一致 */
@media (max-width: 768px) {
  .invite-media {
    margin: .5rem auto 1.25rem;
    padding: .75rem;
  }
}

/* === 分论坛手风琴卡片样式 === */
.subforum-accordion {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subforum-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.subforum-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 分论坛头部 - 可点击区域 */
.subforum-header {
  display: grid;
  grid-template-columns: 1fr auto auto 40px;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-left: 4px solid var(--secondary-color);
  transition: all 0.3s ease;
}

.subforum-header:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
}

.subforum-card.active .subforum-header {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #2980b9 100%);
  color: white;
}

/* 标题区域 */
.subforum-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.subforum-title h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary-color);
}

.subforum-card.active .subforum-header .subforum-title h5 {
  color: white;
}

.subforum-title h5.lang-en {
  font-size: 0.875rem;
  opacity: 0.85;
  font-weight: 500;
}

/* 时间标签 */
.subforum-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--secondary-color);
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
}

.subforum-card.active .subforum-time {
  background: rgba(255, 255, 255, 0.95);
  color: var(--secondary-color);
}

/* 地点标签 */
.subforum-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #f0f7ff;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--primary-color);
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
}

.subforum-card.active .subforum-location {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
}

/* 展开/收起图标 */
.subforum-icon {
  color: var(--secondary-color);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.subforum-card.active .subforum-icon {
  transform: rotate(180deg);
  color: white;
}

/* 内容区域 */
.subforum-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.3s ease;
  padding: 0 1.5rem;
}

.subforum-card.active .subforum-content {
  max-height: 2000px;
  padding: 1.5rem;
  border-top: 2px solid #f0f0f0;
}

/* 内容区域的表格样式微调 */
.subforum-content .schedule-table {
  margin: 0;
  box-shadow: none;
}

.subforum-content .schedule-table thead th {
  background-color: var(--secondary-color);
  font-size: 0.9rem;
  padding: 0.75rem;
}

.subforum-content .schedule-table td {
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
}

.subforum-content .schedule-table .time-slot {
  width: 100px;
  font-size: 0.85rem;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .subforum-header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .subforum-time,
  .subforum-location {
    justify-self: start;
    min-width: auto;
  }
  
  .subforum-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
  }
  
  .subforum-title h5 {
    font-size: 0.95rem;
    padding-right: 2.5rem;
  }
  
  .subforum-title h5.lang-en {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .subforum-header {
    padding: 1rem;
  }
  
  .subforum-content {
    padding: 0 1rem;
  }
  
  .subforum-card.active .subforum-content {
    padding: 1rem;
  }
  
  .subforum-title h5 {
    font-size: 0.9rem;
  }
  
  .subforum-time,
  .subforum-location {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }
  
  .subforum-icon {
    top: 1rem;
    right: 1rem;
    width: 18px;
    height: 18px;
  }
}

/* 优化：让第一个分论坛默认展开时的动画更流畅 */
.subforum-card:first-child .subforum-content {
  transition: max-height 0.5s ease-out, padding 0.4s ease;
}

/* 添加加载状态样式（可选） */
.subforum-content.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.subforum-content.loading::after {
  content: "加载中...";
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.subforum-card {
    position: relative;
    z-index: 1;   /* 默认层级 */
}

.event-info,
.page-content,
.tabs,
.section-title {
    position: relative;
    z-index: 2;   /* 这些模块比手风琴更前 */
}