/* 
 * home.css - 科研软件下载网站样式
 * 文件说明：此文件包含网站所有样式，包括导航、内容区域、页脚等
 */

/* ===== 基础重置 ===== 
 * 作用：清除浏览器默认样式，确保跨浏览器一致性
 */
* {
    margin: 0;                    /* 清除所有元素的外边距 */
    padding: 0;                   /* 清除所有元素的内边距 */
    box-sizing: border-box;       /* 元素宽度包含padding和border，便于布局 */
    font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置中文字体，确保中文显示美观 */
}

/* 
 * body 基础样式
 * 作用：设置整个页面的基础样式
 */
body {
    background-color: #f0f0f0;    /* 背景色改为更深的灰色，提高内容可读性 */
    color: #333;                  /* 主文字颜色，深灰色 */
    line-height: 1.5;             /* 行高，提高文字可读性 */
    min-height: 100vh;            /* 最小高度为视口高度，确保页脚在底部 */
    display: flex;                /* 使用flex布局 */
    flex-direction: column;       /* 垂直方向排列子元素 */
}

/* ===== 关键修复：中间内容区域背景直达顶部 ===== 
 * 问题：原来内容区域有上边距，导致与导航栏之间有间隙
 * 解决方案：强制去除上边距和上内边距，并移除圆角和阴影
 */
.main-content {
    background-color: #ffffff;    /* 内容区域白色背景，与深色背景形成对比 */
    margin-top: 0 !important;     /* 强制去除上边距，确保背景从导航栏下面开始 */
    padding-top: 0 !important;    /* 强制去除上内边距 */
    border-radius: 0 !important;  /* 去除圆角，让边缘直通 */
    box-shadow: none !important;  /* 去除阴影，避免产生视觉间隙 */
    max-width: 1200px;           /* 最大宽度限制，在大屏幕上不会过宽 */
    margin-left: auto;           /* 水平居中 */
    margin-right: auto;          /* 水平居中 */
    padding-left: 20px;          /* 左右内边距，避免内容贴边 */
    padding-right: 20px;         /* 左右内边距 */
    flex: 1;                     /* 占据剩余空间，确保页脚在底部 */
}

/* ===== 顶部导航栏 ===== 
 * 导航栏采用半透明渐变背景，有发光动画效果
 */
header {
    /* 绿色渐变背景，添加透明度效果 */
    background: linear-gradient(135deg, 
                rgba(20, 80, 25, 0.95) 0%,      /* 深绿色，提高对比度 */
                rgba(35, 110, 40, 0.95) 50%,    /* 中等绿色 */
                rgba(45, 135, 50, 0.95) 100%);  /* 浅绿色 */
    backdrop-filter: blur(10px);                /* 背景模糊效果，增强质感 */
    border-bottom: 3px solid #15551b;          /* 底部边框，深绿色 */
    padding: 12px 0;                           /* 上下内边距 */
    width: 100%;                               /* 宽度100% */
    position: sticky;                          /* 粘性定位，滚动时保持可见 */
    top: 0;                                    /* 固定在顶部 */
    z-index: 1000;                             /* 高z-index确保在其他元素之上 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影，加深颜色 */
    animation: headerGlow 3s ease-in-out infinite alternate; /* 发光动画 */
}

/* 导航栏发光动画 */
@keyframes headerGlow {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    100% {
        box-shadow: 0 4px 20px rgba(35, 110, 40, 0.4); /* 增加绿色发光效果 */
    }
}

/* 导航栏内容容器 */
.header-content {
    max-width: 1200px;          /* 最大宽度，与主内容对齐 */
    margin: 0 auto;             /* 水平居中 */
    padding: 0 20px;            /* 左右内边距 */
    display: flex;              /* flex布局 */
    flex-direction: column;     /* 垂直排列 */
    align-items: center;        /* 居中对齐 */
}

/* 网站logo样式 */
.logo {
    text-align: center;         /* 文字居中 */
    font-size: 26px;            /* 字体大小 */
    font-weight: bold;          /* 粗体 */
    color: #fff;                /* 白色文字 */
    padding: 5px 0 8px 0;       /* 上下内边距 */
    margin-bottom: 8px;         /* 底部外边距 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* 文字阴影，增强可读性 */
    letter-spacing: 1px;        /* 字间距 */
}

/* 导航菜单 */
nav ul {
    display: flex;              /* flex布局 */
    justify-content: center;    /* 水平居中 */
    list-style: none;           /* 去除列表点 */
    flex-wrap: wrap;            /* 允许换行 */
    padding: 3px 0;             /* 上下内边距 */
}

/* 导航菜单项 */
nav li {
    margin: 0 6px 5px;          /* 左右和底部外边距 */
}

/* 导航链接 */
nav a {
    text-decoration: none;      /* 去除下划线 */
    color: #fff;                /* 白色文字 */
    font-size: 14px;            /* 字体大小 */
    padding: 6px 12px;          /* 内边距 */
    border: 1px solid rgba(255, 255, 255, 0.4); /* 白色边框，提高透明度 */
    border-radius: 20px;        /* 圆角边框 */
    transition: all .3s;        /* 过渡动画 */
    background-color: rgba(255, 255, 255, 0.15); /* 半透明背景，加深透明度 */
    backdrop-filter: blur(5px); /* 背景模糊 */
}

/* 导航链接悬停效果 */
nav a:hover {
    background-color: rgba(255, 255, 255, 0.25); /* 悬停时背景更亮 */
    border-color: rgba(255, 255, 255, 0.7);      /* 边框更明显 */
    transform: translateY(-2px);                /* 上移效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);  /* 阴影效果 */
}

/* ===== 可选背景效果 ===== 
 * 这些是可选的整体背景效果，需要在body标签添加相应class才能生效
 * 使用方法：<body class="particle-bg"> 或 <body class="line-bg">
 */

/* 粒子背景效果 */
body.particle-bg {
    background-color: #e8e8e8;  /* 更深的背景色 */
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(60, 140, 65, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(25, 120, 200, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(220, 120, 0, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 60% 40%, rgba(140, 30, 150, 0.06) 0%, transparent 45%);
    background-attachment: fixed; /* 固定背景，不随滚动移动 */
}

/* 线条背景效果 */
body.line-bg {
    background-color: #eaeaea;  /* 更深的背景色 */
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, 
                                 rgba(60, 140, 65, 0.05) 10px, 
                                 rgba(60, 140, 65, 0.05) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, 
                                 rgba(25, 120, 200, 0.05) 10px, 
                                 rgba(25, 120, 200, 0.05) 20px);
}

/* ===== 公告栏 ===== */
.custom-marquee {
    background-color: #ffffff;    /* 白色背景 */
    border: 1px dashed #4caf50;   /* 绿色虚线边框 */
    margin: 15px 0 12px 0;        /* 上下外边距 */
    padding: 12px;                /* 内边距 */
    border-radius: 5px;           /* 圆角 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 阴影，加深颜色 */
}

.announcement-title {
    text-align: center;           /* 文字居中 */
    color: #2e7d32;               /* 绿色文字 */
    font-size: 15px;              /* 字体大小 */
    font-weight: bold;            /* 粗体 */
    margin-bottom: 12px;          /* 底部外边距 */
    padding-bottom: 6px;          /* 底部内边距 */
    border-bottom: 1px dashed #bbb; /* 底部虚线边框，加深颜色 */
    display: flex;                /* flex布局 */
    align-items: center;          /* 垂直居中 */
    justify-content: center;      /* 水平居中 */
    gap: 8px;                     /* 子元素间距 */
}

.announcement-grid {
    display: grid;                /* 网格布局 */
    grid-template-columns: repeat(6, 1fr); /* 6列网格 */
    gap: 6px;                     /* 网格间距 */
    margin-top: 8px;              /* 顶部外边距 */
}

/* 响应式设计 - 不同屏幕尺寸调整网格列数 */
@media (max-width: 1024px) {
    .announcement-grid {
        grid-template-columns: repeat(4, 1fr); /* 1024px以下显示4列 */
    }
}

@media (max-width: 768px) {
    .announcement-grid {
        grid-template-columns: repeat(3, 1fr); /* 768px以下显示3列 */
    }
}

@media (max-width: 480px) {
    .announcement-grid {
        grid-template-columns: repeat(2, 1fr); /* 480px以下显示2列 */
    }
}

.announcement-item {
    background-color: #e8f5e9;    /* 浅绿色背景 */
    border: 1px dashed #81c784;   /* 绿色虚线边框 */
    padding: 6px 4px;             /* 内边距 */
    text-align: center;           /* 文字居中 */
    font-size: 11px;              /* 字体大小 */
    color: #2e7d32;               /* 绿色文字 */
    white-space: nowrap;          /* 不换行 */
    overflow: hidden;             /* 溢出隐藏 */
    text-overflow: ellipsis;      /* 溢出显示省略号 */
    transition: all .2s;          /* 过渡动画 */
    border-radius: 3px;           /* 圆角 */
    cursor: default;              /* 默认光标 */
}

.announcement-item:hover {
    border-color: #4caf50;        /* 悬停时边框变深绿 */
    background-color: #c8e6c9;    /* 悬停时背景变深 */
    transform: translateY(-1px);  /* 轻微上移效果 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 阴影效果 */
}

/* ===== VIP广告 ===== */
.vip-ad {
    background: linear-gradient(135deg, #ffecb3 0%, #ffcc80 100%); /* 橙色渐变 */
    border: 1px dashed #ff9800;   /* 橙色虚线边框 */
    margin: 12px 0 10px 0;        /* 上下外边距 */
    padding: 10px;                /* 内边距 */
    text-align: center;           /* 文字居中 */
    border-radius: 5px;           /* 圆角 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 阴影 */
    border-left: 4px solid #ff9800; /* 左侧实线边框 */
}

.vip-ad h3 {
    color: #bf360c;               /* 深橙色文字 */
    font-size: 16px;              /* 字体大小 */
    margin-bottom: 6px;           /* 底部外边距 */
}

.vip-ad a {
    color: #f57c00;               /* 橙色链接 */
    text-decoration: none;        /* 去除下划线 */
    font-weight: bold;            /* 粗体 */
    font-size: 14px;              /* 字体大小 */
}

.vip-ad a:hover {
    text-decoration: underline;   /* 悬停时显示下划线 */
}

/* ===== 图片广告 ===== */
.banner-ad {
    text-align: center;           /* 居中 */
    margin: 10px 0 8px 0;         /* 上下外边距 */
}

.banner-ad img {
    max-width: 100%;              /* 最大宽度100%，自适应 */
    height: auto;                 /* 高度自适应 */
    border: 1px solid #ccc;       /* 灰色边框，加深颜色 */
    border-radius: 5px;           /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* ===== 会员说明 ===== */
.membership-notice {
    background-color: #e1f5fe;    /* 浅蓝色背景 */
    border: 1px dashed #4fc3f7;   /* 蓝色虚线边框 */
    padding: 10px 12px;           /* 内边距 */
    margin: 8px 0 10px 0;         /* 上下外边距 */
    border-radius: 5px;           /* 圆角 */
    font-size: 12px;              /* 字体大小 */
    color: #0277bd;               /* 深蓝色文字 */
    line-height: 1.4;             /* 行高 */
    border-left: 4px solid #0288d1; /* 左侧实线边框 */
}

.membership-notice h4 {
    color: #01579b;               /* 更深蓝色标题 */
    margin-bottom: 8px;           /* 底部外边距 */
    font-size: 13px;              /* 字体大小 */
    display: flex;                /* flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 6px;                     /* 子元素间距 */
}

.membership-notice ol {
    margin-left: 16px;            /* 左边距 */
    margin-bottom: 6px;           /* 底部外边距 */
}

.membership-notice li {
    margin-bottom: 4px;           /* 列表项间距 */
}

/* ===== 软件网格 ===== */
.grid-wrapper {
    margin: 0 0 25px 0;           /* 底部外边距 */
}

.grid-container {
    display: grid;                /* 网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 4列网格 */
    gap: 12px;                    /* 网格间距 */
}

/* 响应式设计 - 不同屏幕尺寸调整网格列数 */
@media (max-width: 1200px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr); /* 1200px以下显示4列 */
    }
}

@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 1024px以下显示3列 */
    }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 768px以下显示2列 */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;           /* 480px以下显示1列 */
    }
}

.grid-item {
    background-color: #ffffff;    /* 白色背景 */
    border: 1px solid #4caf50;    /* 灰色边框，加深颜色 */
    padding: 12px;                /* 内边距 */
    transition: all .2s;          /* 过渡动画 */
    position: relative;           /* 相对定位 */
    border-radius: 5px;           /* 圆角 */
    text-align: center;           /* 文字居中 */
    height: 100%;                 /* 高度100% */
    display: flex;                /* flex布局 */
    flex-direction: column;       /* 垂直排列 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 阴影 */
}

.grid-item:hover {
    border-color: #4caf50;        /* 悬停时绿色边框 */
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2); /* 绿色阴影，加深颜色 */
    transform: translateY(-5px);  /* 上移效果 */
}

.grid-item .icon-container {
    display: flex;                /* flex布局 */
    justify-content: center;      /* 水平居中 */
    align-items: center;          /* 垂直居中 */
    margin-bottom: 10px;          /* 底部外边距 */
}

.grid-item img {
    width: 65px;                  /* 图片宽度 */
    height: 65px;                 /* 图片高度 */
    border: 1px solid #d0d0d0;    /* 灰色边框，加深颜色 */
    border-radius: 50%;           /* 圆形图片 */
    object-fit: cover;            /* 覆盖填充 */
    background-color: #f5f5f5;    /* 背景色 */
    padding: 2px;                 /* 内边距 */
}

.grid-item h3 {
    font-size: 14px;              /* 字体大小 */
    color: #2c3e50;               /* 深蓝色文字 */
    margin-bottom: 8px;           /* 底部外边距 */
    font-weight: 600;             /* 字重 */
    border-bottom: 1px solid #4caf50; /* 底部边框 */
    padding-bottom: 6px;          /* 底部内边距 */
    line-height: 1.3;             /* 行高 */
}

.grid-item p {
    font-size: 11px;              /* 字体大小 */
    color: #555;                  /* 深灰色文字，提高可读性 */
    margin-bottom: 12px;          /* 底部外边距 */
    line-height: 1.4;             /* 行高 */
    text-align: left;             /* 左对齐 */
    flex-grow: 1;                 /* 占据剩余空间 */
}

.password-box {
    border-top: 1px dashed #4caf50;  /* 顶部虚线边框，加深颜色 */
    padding-top: 10px;            /* 顶部内边距 */
    display: flex;                /* flex布局 */
    align-items: stretch;         /* 拉伸对齐 */
    margin-top: auto;             /* 顶部自动外边距，推到底部 */
}

.password-input {
    flex: 1;                      /* 占据剩余空间 */
    padding: 7px 9px;             /* 内边距 */
    border: 1px solid #4caf50;       /* 灰色边框，加深颜色 */
    border-right: none;           /* 去除右边框 */
    border-radius: 4px 0 0 4px;   /* 左边圆角 */
    font-size: 12px;              /* 字体大小 */
    transition: border-color .2s; /* 边框颜色过渡 */
    min-width: 0;                 /* 最小宽度 */
}

.password-input:focus {
    outline: none;                /* 去除轮廓线 */
    border-color: #4caf50;        /* 聚焦时绿色边框 */
}

.password-submit {
    background: linear-gradient(to bottom, #4caf50, #388e3c); /* 绿色渐变 */
    color: white;                 /* 白色文字 */
    border: 1px solid #2e7d32;    /* 深绿色边框 */
    border-radius: 0 4px 4px 0;   /* 右边圆角 */
    padding: 0 12px;              /* 左右内边距 */
    cursor: pointer;              /* 手型光标 */
    font-size: 12px;              /* 字体大小 */
    font-weight: 500;             /* 字重 */
    transition: all .2s;          /* 过渡动画 */
    white-space: nowrap;          /* 不换行 */
}

.password-submit:hover {
    background: linear-gradient(to bottom, #43a047, #2e7d32); /* 深绿色渐变 */
    transform: translateY(-1px);  /* 轻微上移 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 阴影，加深颜色 */
}

/* ===== 页脚 ===== */
.footer-section {
    background-color: #f5f5f5;    /* 浅灰色背景，加深颜色 */
    border-top: 2px dashed #aaa;  /* 顶部虚线边框，加深颜色 */
    padding: 25px 0 15px;         /* 上下内边距 */
    margin-top: 30px;             /* 顶部外边距 */
}

.footer-content {
    max-width: 1200px;           /* 最大宽度 */
    margin: 0 auto;              /* 水平居中 */
    padding: 0 20px;             /* 左右内边距 */
    display: flex;               /* flex布局 */
    flex-wrap: wrap;             /* 允许换行 */
    justify-content: space-between; /* 两端对齐 */
    align-items: flex-start;     /* 顶部对齐 */
}

.footer-text {
    flex: 1;                     /* 占据剩余空间 */
    min-width: 300px;            /* 最小宽度 */
    margin-bottom: 15px;         /* 底部外边距 */
}

.footer-text p {
    font-size: 12px;             /* 字体大小 */
    color: #555;                 /* 深灰色文字，提高可读性 */
    margin-bottom: 6px;          /* 底部外边距 */
    line-height: 1.4;            /* 行高 */
}

.footer-qrcodes {
    display: flex;               /* flex布局 */
    gap: 15px;                   /* 子元素间距 */
}

.qr-item {
    text-align: center;          /* 文字居中 */
}

.qr-item img {
    width: 90px;                 /* 图片宽度 */
    height: 90px;                /* 图片高度 */
    border: 1px solid #bbb;      /* 灰色边框，加深颜色 */
    margin-bottom: 4px;          /* 底部外边距 */
    border-radius: 4px;          /* 圆角 */
}

.qr-item p {
    font-size: 11px;             /* 字体大小 */
    color: #666;                 /* 灰色文字，加深颜色 */
}

/* ===== 浮动广告 ===== */
.floating-ad {
    position: fixed;             /* 固定定位 */
    bottom: 15px;                /* 距离底部15px */
    right: 15px;                 /* 距离右侧15px */
    z-index: 1000;               /* 高z-index确保在最上层 */
    animation: floatAd 3s ease-in-out infinite; /* 浮动动画 */
}

.floating-ad a {
    display: block;              /* 块级元素 */
    transform: scale(0.5);       /* 缩放50% */
    transform-origin: bottom right; /* 变换原点在右下角 */
}

.floating-ad img {
    display: block;              /* 块级元素 */
}

/* 浮动广告动画 */
@keyframes floatAd {
    0%, 100% {
        transform: translateY(0); /* 原始位置 */
    }
    50% {
        transform: translateY(-5px); /* 向上移动5px */
    }
}