/* 科技化学风核心样式变量 */
:root {
    --tech-blue: #0070f3;      /* 科技主蓝 */
    --chem-cyan: #00e0ff;      /* 化学荧光蓝 */
    --dark-base: #0f172a;      /* 深色底 */
    --light-bg: #f8fafc;       /* 浅色背景 */
    --accent-chem: #ff7a00;    /* 化学橙 */
    --shadow: 0 4px 15px rgba(0, 112, 243, 0.2); /* 科技感阴影 */
    --grid-pattern: linear-gradient(rgba(0, 112, 243, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 112, 243, 0.04) 1px, transparent 1px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

body {
    background-color: var(--light-bg);
    background-image: var(--grid-pattern);
    background-size: 22px 22px;
    color: #334155;
    line-height: 1.7;
}

/* 头部样式 */
header {
    background: linear-gradient(135deg, var(--dark-base), var(--tech-blue));
    color: white;
    padding: 2.2rem 0;
    text-align: center;
    box-shadow: var(--shadow);
    position: relative;
}

header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--chem-cyan), var(--accent-chem));
}

.header-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.wiki-main-title {
    font-size: 2.5rem;
    margin-bottom: 0.6rem;
    letter-spacing: 1.2px;
}

.wiki-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* 导航栏样式 */
nav {
    background-color: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.1rem 0;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
}

.main-nav li {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--dark-base);
    padding: 0.7rem 1.4rem;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative; /* 新增 */
}

.nav-link:hover, .nav-link.active {
    background-color: var(--tech-blue);
    color: white;
}

/* 下拉菜单样式 */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    list-style: none;
    min-width: 200px;
    display: none;
    z-index: 1000; /* 增加z-index确保下拉菜单在最上层 */
    margin-top: 0; /* 将原有的0.5rem调整为0，避免菜单与父项之间出现间隙 */
    padding-top: 0.5rem;
}

/* 新增hover状态保持显示 */
.has-dropdown:hover .dropdown {
    display: block;
}

/* 为父项链接增加底部内边距，扩大hover触发区域 */
.has-dropdown > .nav-link {
    padding-bottom: 1.2rem;
}

/* 确保下拉菜单项hover时不关闭菜单 */
.dropdown:hover {
    display: block;
}

.dropdown li {
    padding: 0 0.5rem;
}

.dropdown .nav-link {
    width: 100%;
    border-radius: 4px;
    padding: 0.7rem 1rem; /* 增加内边距，扩大点击区域 */
}

.has-dropdown:hover .dropdown {
    display: block;
}

/* 主内容容器 */
.content-wrap {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1.2rem;
}

/* 主页模块样式 */
.home-module {
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--tech-blue);
    padding: 2rem;
    text-align: center;
}

.home-icon {
    font-size: 4.5rem;
    color: var(--tech-blue);
    margin-bottom: 1.5rem;
}

.home-desc {
    max-width: 800px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

.home-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.home-btn {
    text-decoration: none;
    background-color: var(--tech-blue);
    color: white;
    padding: 0.9rem 1.8rem;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.home-btn:hover {
    background-color: var(--dark-base);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* 通用模块样式 */
.wiki-module {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--tech-blue);
    padding: 2rem;
}

.module-heading {
    color: var(--dark-base);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.module-heading::before {
    content: "📄";
    font-size: 1.4rem;
}

/* 正文内容放大与可读性优化 */
.content {
    font-size: 1.25rem; /* 正文字号放大（默认1rem→1.25rem） */
    line-height: 1.8; /* 行高增加，避免文字拥挤 */
    color: #1a202c; /* 稍深颜色，提升阅读对比度 */
}

/* 内容区容器放大并增加留白 */
.content-wrap {
    max-width: 1050px; /* 宽度增加，容纳放大内容 */
    margin: 4rem auto; /* 上下间距增大，提升呼吸感 */
    padding: 2rem 40px; /* 内边距增加，避免内容贴边 */
    position: relative;
    z-index: 20;
}

.data-card {
    padding: 1.8rem; /* 卡片内边距增加 */
    margin: 2rem 0; /* 卡片上下间距加大 */
    font-size: 1.2rem;
}

/* 内容区图片适配 */
.content img, .chem-image-container {
    max-width: 100%; /* 确保图片不超出内容区 */
    margin: 2.5rem auto; /* 图片上下居中且间距加大 */
}

.content h3 {
    color: var(--tech-blue);
    margin: 1.5rem 0 1rem;
}

/* 段落与子标题间距调整 */
.content p {
    margin-bottom: 1.8rem; /* 段落间距加大 */
}

.content ul, .content ol {
    margin: 1rem 0 1rem 2rem;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .wiki-main-title {
        font-size: 2rem;
    }

    .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .module-heading {
        font-size: 1.5rem;
    }

    .home-icon {
        font-size: 3.5rem;
    }
}

/* 滚动跟随容器 - 增大尺寸并靠近中间内容 */
.scroll-sidebar {
    position: sticky;
    top: 15vh; /* 距离顶部更近，视觉上更居中 */
    width: 220px; /* 增大宽度（比原来宽60px） */
    height: fit-content;
    z-index: 50;
}

/* 左侧容器 - 减少与中间内容的距离 */
.scroll-left {
    float: left;
    margin-left: 60px; /* 移除左侧外距，更靠近中间 */
    padding-right: 5px; /* 与内容区保留少量间距，避免紧贴 */
}

/* 右侧容器 - 减少与中间内容的距离 */
.scroll-right {
    float: right;
    margin-right: 120px; /* 移除右侧外距，更靠近中间 */
    padding-left: 5px; /* 与内容区保留少量间距 */
}

/* 图片样式 - 增大显示面积并优化细节 */
.scroll-img {
    width: 100%; /* 图片宽度充满容器（因容器加宽，图片自然变大） */
    height: auto;
    border-radius: 10px; /* 稍大圆角更协调 */
    box-shadow: 0 6px 18px rgba(10, 122, 202, 0.2); /* 增强阴影立体感 */
    opacity: 0.9; /* 提高透明度，避免过暗 */
    transition: all 0.3s ease;
    /* 添加轻微边框增强科技感 */
    border: 1px solid rgba(61, 220, 132, 0.3);
}

/* 图片间距调整 - 保持错落感同时更紧凑 */
.scroll-left .scroll-img:first-child {
    margin-bottom: 20px; /* 减少间距，避免过于松散 */
}
.scroll-right .scroll-img:first-child {
    margin-bottom: 40px;
}
/* 图片容器：控制两张图重叠 */
.img-container {
    position: relative; /* 相对定位，作为子图的父容器 */
    width: 100%; /* 与侧边容器同宽 */
    height: auto;
}

/* 默认显示的图 */
.base-img {
    width: 100%;
    height: auto;

    transition: opacity 0.3s ease;
}

/* 悬停时显示的图（初始隐藏，与默认图重叠） */
.hover-img {
    position: absolute; /* 绝对定位，覆盖在默认图上 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s ease;
}

/* 鼠标悬停容器时：显示hover图，隐藏默认图 */
.img-container:hover .base-img {
    opacity: 0; /* 隐藏默认图 */
}
.img-container:hover .hover-img {
    opacity: 0.8; /* 显示hover图（更高透明度突出） */
}

/* 响应式调整 - 确保中等屏幕仍能显示完整 */
@media (max-width: 1200px) {
    .scroll-sidebar {
        width: 180px; /* 中等屏幕适当缩小 */
    }
    .content-wrap {
        max-width: 650px;
    }
}

/* 小屏幕依然隐藏，优先内容 */
@media (max-width: 992px) {
    .scroll-sidebar {
        display: none;
    }
    .content-wrap {
        max-width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .module-heading {
        font-size: 1.9rem;
    }
    .content, .content ul, .data-card {
        font-size: 1.05rem;
    }
}

/* 版权栏核心样式 */
.copyright-bar {
    /* 匹配头部深色背景，统一视觉 */
    background-color: var(--dark-base);
    color: white; /* 基础文字白色 */
    padding: 2.5rem 0; /* 上下内边距，避免内容拥挤 */
    margin-top: 3rem; /* 与上方内容区拉开距离 */
}

/* 版权栏容器（与导航/内容区宽度一致，居中显示） */
.copyright-wrap {
    max-width: 1200px; /* 复用导航栏的最大宽度，保持页面对齐 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 1.2rem; /* 移动端左右留白，避免贴边 */
    text-align: center; /* 文字整体居中 */
}

/* 项目名称（突出显示，用荧光蓝强调） */
.project-name {
    font-size: 1.8rem; /* 字号放大，突出标题 */
    color: var(--chem-cyan); /* 化学荧光蓝，呼应风格 */
    font-weight: 600;
    letter-spacing: 1px; /* 字母间距，增强科技感 */
    margin-bottom: 1rem; /* 与下方信息拉开距离 */
}

/* 机构与联系方式（辅助信息，低透明度避免抢戏） */
.contact-info {
    font-size: 1rem;
    opacity: 0.8; /* 文字浅化，突出重点 */
    margin-bottom: 1.2rem; /* 与版权声明间距 */
    display: flex; /* 桌面端一行排列 */
    flex-wrap: wrap; /* 移动端自动换行 */
    justify-content: center; /* 换行后仍居中 */
    gap: 0.8rem 1.5rem; /* 元素间距：上下0.8rem，左右1.5rem */
}

/* 分隔符（弱化处理，避免生硬） */
.separator {
    color: var(--tech-blue); /* 用科技蓝做分隔，细节呼应 */
    opacity: 0.6;
}

/* 版权声明（最底部小字，进一步弱化） */
.copyright-statement {
    font-size: 0.9rem;
    opacity: 0.7; /* 比辅助信息更浅 */
    color: #f8fafc; /* 复用浅色背景色，避免纯白刺眼 */
}

/* 响应式适配（移动端优化） */
@media (max-width: 768px) {
    .project-name {
        font-size: 1.5rem; /* 移动端缩小标题字号 */
    }
    .contact-info {
        font-size: 0.9rem; /* 辅助信息字号缩小 */
    }
}

/* 团队成员板块整体样式 */
.team-members-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
/* 板块标题样式 */
.section-title {
    font-size: 2rem;
    margin-bottom: 30px;
}
/* 切换按钮位置调整 */
.prev-btn, .next-btn {
    position: absolute;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--tech-blue);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10; /* 确保按钮在卡片上方 */
}

/* 左切换按钮位置 */
.prev-btn {
    left: -20px; /* 稍微超出容器左侧 */
}

/* 右切换按钮位置 */
.next-btn {
    right: -20px; /* 稍微超出容器右侧 */
}

/* 为团队成员区域添加相对定位 */
.team-members-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
/* 成员容器样式，设置相对定位用于按钮定位，以及溢出隐藏、弹性布局等 */
.members-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px; /* 根据实际需求调整高度 */
    margin: 0 auto; /* 确保容器居中 */
    max-width: 1000px; /* 限制最大宽度 */
}
/* 成员卡片样式 */
.member-card {
    position: absolute; /* 使用绝对定位而非flex */
    width: 80%; /* 固定宽度百分比 */
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0; /* 默认隐藏 */
}
/* 成员图片样式 */
.member-img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 10px;
}
/* 成员姓名样式 */
.member-name {
    font-size: 1.5rem;
    margin-bottom: 5px;
}
/* 成员角色样式 */
.member-role {
    font-style: italic;
    margin-bottom: 15px;
    color: #666;
}
/* 成员简介样式 */
.member-bio {
    line-height: 1.6;
    text-align: left;
}