/* 全局样式重置（保留新代码核心） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "微软雅黑", sans-serif;
}

/* CSS变量：替换为原代码的深灰基调+低饱和彩色（核心修改），新增边框变量 */
:root {
    /* 背景色变量：深灰基础（原代码配色） */
    --bg-main: #242424;        /* 页面主背景（最深灰） */
    --bg-card: #333333;        /* 卡片背景（中深灰） */
    --bg-content: #3c3c3c;     /* 内容区域背景（浅于卡片） */
    
    /* 文字颜色变量：高对比保证可读性（原代码配色） */
    --text-title: #f0f0f0;     /* 标题文字（浅灰） */
    --text-body: #cccccc;      /* 正文文字（中灰） */
    --text-light: #999999;     /* 次要文字（浅灰） */

    /* 新增：深色主题边框颜色变量（适配深灰背景） */
    --border-color: #444444;   /* 常规边框（与分割线一致） */
    --border-color-hover: #555555; /* 悬浮边框 */
    --border-color-active: #2d5afe; /* 激活状态边框（匹配蓝色） */
    
    /* 彩色变量（低饱和度，适配深灰）（原代码配色） */
    --color-blue: #2d5afe;     /* 深蓝（迅雷下载/QQ群） */
    --color-green: #2db86e;    /* 墨绿（教程按钮） */
    --color-red: #e64340;      /* 暗红（资源合集下载） */
    --color-purple: #9333ea;   /* 靛紫（工具箱下载） */
    --color-check: #4ade80;    /* 浅绿（列表√符号，提亮细节） */
    
    /* 其他基础变量（保留新代码，适配布局） */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    --divider-color: #444444;  /* 分割线（中灰，替换原浅灰） */
    --btn-radius: 8px;
    --btn-padding: 12px;
    --btn-font-size: 15px;
    --btn-gap: 10px;
    --btn-height: 44px;
    --section-side-margin: 15px;
    --navbar-height: 56px;     /* 导航栏高度变量（保留） */
}

/* 动画定义：保留新代码的fadeUp动画 */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 页面主体：替换为原代码的深灰背景 */
body {
    background-color: var(--bg-main);
    padding: 20px 0;
}

/* 容器样式：保留新代码的布局 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--section-side-margin);
}

/* 导航栏样式：保留框架，适配原代码的深灰配色（核心修改），添加边框 */
.navbar {
    background-color: var(--bg-card); /* 替换为原代码的卡片背景（中深灰） */
    border: 1px solid var(--border-color); /* 新增：导航栏边框（框） */
    border-radius: 16px;
    box-shadow: var(--shadow); /* 替换为原代码的深色阴影 */
    /* 关键修改1：替换原margin-bottom，实现水平居中+保留底部间距 */
    margin: 0 auto 20px;
    /* 关键修改2：设置目标长度（与头部区域保持一致） */
    max-width: 1140px;
    padding: 0 20px;
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    animation-delay: 0.05s;
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--navbar-height);
    gap: 0;
}

.nav-item {
    flex: 0 1 auto;
}

.nav-link {
    display: inline-block;
    padding: 10px 30px;
    color: var(--text-title); /* 替换为原代码的标题文字色（浅灰） */
    font-size: 16px;
    text-decoration: none;
    border-radius: var(--btn-radius);
    transition: all 0.2s ease;
    white-space: nowrap;
    /* 可选：导航链接透明边框，hover时显示 */
    border: 1px solid transparent;
}

/* 导航栏hover效果：适配原代码的深灰交互，添加边框变化 */
.nav-link:hover {
    background: #404040; /* 原代码的QQ按钮背景色 */
    border-color: var(--border-color-hover); /* 新增：悬浮边框 */
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 导航栏active样式：使用原代码的深蓝配色（核心修改），添加边框 */
.nav-link.active {
    background-color: var(--color-blue); /* 原代码的深蓝变量 */
    border: 1px solid var(--border-color-active); /* 新增：激活边框 */
    color: #fff;
}

.nav-link.active:hover {
    background-color: #1a46e0; /* 原代码的深蓝hover色 */
    border-color: #1a46e0; /* 新增：激活悬浮边框 */
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 头部区域：替换为原代码的深灰卡片样式，添加边框 */
.header {
    background-color: var(--bg-card); /* 原代码的卡片背景 */
    border: 1px solid var(--border-color); /* 新增：头部边框（框） */
    color: var(--text-title);
    text-align: center;
    padding: 25px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    /* 关键修改1：替换原margin-bottom，实现水平居中+保留底部间距 */
    margin: 0 auto 20px;
    /* 关键修改2：设置目标长度（与导航栏保持一致） */
    max-width: 1140px;
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    animation-delay: 0.1s;
}

.header h1 {
    font-size: 36px;
    margin-bottom: 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.header h1 .h1-icon {
    width: 1em !important;
    height: 1em !important;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 12px !important;
    border: 1px solid var(--border-color); /* 新增：标题图标边框 */
}

.header p {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-body); /* 原代码的正文文字色 */
}

/* 头部按钮容器：优化间距，取消gap避免叠加（核心修改） */
.header-buttons {
    display: flex;
    justify-content: center;
    gap: 0 !important; /* 关键：取消容器间距，只用按钮margin控制 */
    flex-wrap: wrap;
    padding: 0 10px;
}

/* 头部社交按钮：替换为原代码的深灰样式，类名改为social-box，添加边框，优化间距 */
.header .social-box {
    background: #404040; /* 原代码的QQ按钮背景 */
    border: 1px solid var(--border-color); /* 新增：按钮边框（框） */
    color: var(--text-title);
    padding: 8px 18px;
    border-radius: 20px;
    display: inline-flex; /* 改为inline-flex，适配图标+文字 */
    align-items: center; /* 图标与文字垂直居中 */
    gap: 6px; /* 图标与文字的间距 */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin: 0 3px 8px; /* 关键：缩小左右margin，解决间距大问题 */
}

/* 头部按钮hover效果：适配深灰，边框变色 */
.header .social-box:hover {
    background: #4a4a4a; /* 原代码的QQ按钮hover背景 */
    border-color: var(--border-color-hover); /* 新增：悬浮边框 */
    transform: scale(1.02);
}

/* 社交按钮图标样式：适配深色主题 */
.social-icon {
    width: 1em !important;
    height: 1em !important;
    object-fit: cover;
    border-radius: 4px !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--border-color); /* 新增：图标边框 */
}

/* 行容器：保留新代码的布局 */
.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* 通用分区：替换为原代码的深灰卡片样式，添加边框 */
.section {
    background: var(--bg-card);
    border: 1px solid var(--border-color); /* 新增：板块边框（框） */
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    flex: 1 1 300px;
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    display: flex;
    flex-direction: column;
    margin: 0 var(--section-side-margin);
}

/* 分区动画延迟：保留新代码 */
.download { animation-delay: 0.2s; }
.root-tool { animation-delay: 0.3s; }
.ad { animation-delay: 0.4s; }
.community { animation-delay: 0.5s; }

/* 分区标题：替换为原代码的样式，图标改用本地图片，修复图标重复问题 */
.section-title {
    font-size: 19px;
    color: var(--text-title);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider-color); /* 原代码的分割线 */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); /* 原代码的阴影 */
    position: relative; /* 防止伪元素溢出 */
}

/* 分区标题图标：替换为原代码的本地图片路径（核心修改），取消重复的title::before */
.section-title::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    flex-shrink: 0; /* 防止图标压缩 */
}
/* Alpha隐藏环境图标 */
.download .section-title::before {
    background-image: url("/png/1.png");
}
/* KSU隐藏环境图标 */
.root-tool .section-title::before {
    background-image: url("/png/5.png");
}
/* APatch隐藏环境图标 */
.ad .section-title::before {
    background-image: url("/png/4.png");
}
/* 社交媒体图标：保留原代码的SVG，适配原配色 */
.community .section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%232db86e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E");
}

/* 文件名样式：替换为原代码的文字色 */
.download-file {
    font-size: 16px;
    color: var(--text-title);
    margin-bottom: 10px;
}

/* 内容区域：替换为原代码的深灰背景，添加边框 */
.download-content,
.root-tool-content,
.new-content1,
.new-content2,
.new-content3 {
    background: var(--bg-content); /* 原代码的内容背景 */
    border: 1px solid var(--border-color); /* 新增：内容区域边框（框） */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    flex-grow: 1;
}

/* 特性列表：替换为原代码的浅绿√符号 */
.download .features-list,
.root-tool .features-list,
.ad .features-list,
.new-section1 .new-features1,
.new-section2 .new-features2,
.new-section3 .new-features3 {
    list-style: none;
    margin: 10px 0;
    padding-left: 5px;
}

.download .features-list li,
.root-tool .features-list li,
.ad .features-list li,
.new-section1 .new-features1 li,
.new-section2 .new-features2 li,
.new-section3 .new-features3 li {
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 列表√符号：使用原代码的浅绿变量 */
.download .features-list li::before,
.root-tool .features-list li::before,
.ad .features-list li::before,
.new-section1 .new-features1 li::before,
.new-section2 .new-features2 li::before,
.new-section3 .new-features3 li::before {
    content: "✓";
    color: var(--color-check); /* 原代码的浅绿 */
    font-weight: bold;
}

/* 图片组样式：保留新代码，添加边框 */
.img-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}
.img-group img {
    width: 1em;
    height: 1em;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid var(--border-color); /* 新增：图片组边框 */
}

/* 按钮组容器：保留新代码 */
.btn-group {
    display: flex;
    gap: var(--btn-gap);
    margin-top: 15px;
    width: 100%;
}

/* 通用按钮样式：保留框架，替换为原代码的配色，添加边框 */
.btn-group .btn {
    flex: 1;
    padding: var(--btn-padding);
    border: 1px solid transparent; /* 新增：透明边框，hover时显示 */
    border-radius: var(--btn-radius);
    color: #fff;
    font-size: var(--btn-font-size);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    min-width: 0;
}

/* 按钮hover效果：替换为原代码的深色阴影，添加边框 */
.btn:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2); /* 新增：悬浮半透边框 */
}

/* 按钮配色：替换为原代码的变量（核心修改），添加边框颜色 */
/* 迅雷下载按钮（深蓝） */
.btn-xunlei, .btn-new1-download, .btn-new2-download, .btn-new3-download { 
    background: var(--color-blue); 
    border-color: var(--color-blue); /* 新增：按钮边框 */
}
.btn-xunlei:hover, .btn-new1-download:hover, .btn-new2-download:hover, .btn-new3-download:hover { 
    background: #1a46e0; 
    border-color: #1a46e0; /* 新增：hover边框 */
}

/* 教程按钮（墨绿） */
.btn-tutorial, .btn-tool-guide, .btn-new1-tutorial, .btn-new2-tutorial, .btn-new3-tutorial { 
    background: var(--color-green); 
    border-color: var(--color-green); /* 新增：按钮边框 */
}
.btn-tutorial:hover, .btn-tool-guide:hover, .btn-new1-tutorial:hover, .btn-new2-tutorial:hover, .btn-new3-tutorial:hover { 
    background: #239656; 
    border-color: #239656; /* 新增：hover边框 */
}

/* 工具箱下载按钮（靛紫） */
.btn-tool-download { 
    background: var(--color-purple); 
    border-color: var(--color-purple); /* 新增：按钮边框 */
}
.btn-tool-download:hover { 
    background: #8026d9; 
    border-color: #8026d9; /* 新增：hover边框 */
}

/* 资源合集下载按钮（暗红） */
.btn-ed { 
    background: var(--color-red); 
    border-color: var(--color-red); /* 新增：按钮边框 */
}
.btn-ed:hover { 
    background: #a91e1e; 
    border-color: #a91e1e; /* 新增：hover边框 */
}

/* 教程查看按钮（暗红，统一原代码风格） */
.btn-ad { 
    background: var(--color-red); 
    border-color: var(--color-red); /* 新增：按钮边框 */
}
.btn-ad:hover { 
    background: #a91e1e; 
    border-color: #a91e1e; /* 新增：hover边框 */
}

/* QQ群/酷安按钮（深蓝渐变） */
.btn-qq-group { 
    background: linear-gradient(to right, var(--color-blue), #4a6cf7); 
    border-color: var(--color-blue); /* 新增：按钮边框 */
}
.btn-qq-group:hover { 
    background: linear-gradient(to right, #1a46e0, #3b5fea); 
    border-color: #1a46e0; /* 新增：hover边框 */
}

/* 公众号/抖音按钮（墨绿） */
.btn-telegram { 
    background: var(--color-green); 
    border-color: var(--color-green); /* 新增：按钮边框 */
}
.btn-telegram:hover { 
    background: #239656; 
    border-color: #239656; /* 新增：hover边框 */
}

/* 下载小图标：保留新代码的白色SVG */
.icon-download {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: cover;
    vertical-align: middle;
}

/* 社群/社交媒体分区补充：替换为原代码的文字色 */
.community p {
    margin-bottom: 15px;
    font-size: 15px;
    color: var(--text-body);
    flex-grow: 1;
}

/* 页脚样式：替换为原代码的文字色，保留动画，添加边框和背景 */
.footer {
    text-align: center;
    background: var(--bg-card); /* 新增：页脚背景 */
    border: 1px solid var(--border-color); /* 新增：页脚边框（框） */
    border-radius: 16px; /* 新增：页脚圆角，与其他容器一致 */
    padding: 15px; /* 新增：页脚内边距 */
    color: var(--text-light); /* 原代码的次要文字色 */
    font-size: 14px;
    margin-top: 15px;
    animation: fadeUp 0.6s ease forwards;
    opacity: 0;
    animation-delay: 0.6s;
}

/* 新增板块通用动画延迟（依次递增，保持页面动画层次感） */
.new-section1 { animation-delay: 0.6s; }
.new-section2 { animation-delay: 0.7s; }
.new-section3 { animation-delay: 0.8s; }

/* 新增板块1 样式（与Alpha完全一致），修复标题图标重复 */
.new-section1 .section-title {
    font-size: 19px;
    color: var(--text-title);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* 板块1标题图标：保留原样式，不再重复定义 */
.new-section1 .section-title::before {
    background-image: url("/png/6.png"); /* 占位图片，后续可改 */
}
.new-section1 .new-file1 {
    font-size: 16px;
    color: var(--text-title);
    margin-bottom: 10px;
}

/* 新增板块2 样式（与Alpha完全一致），修复标题图标重复 */
.new-section2 .section-title {
    font-size: 19px;
    color: var(--text-title);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* 板块2标题图标：保留原样式，不再重复定义 */
.new-section2 .section-title::before {
    background-image: url("/png/7.png"); /* 占位图片，后续可改 */
}
.new-section2 .new-file2 {
    font-size: 16px;
    color: var(--text-title);
    margin-bottom: 10px;
}

/* 新增板块3 样式（与Alpha完全一致），修复标题图标重复 */
.new-section3 .section-title {
    font-size: 19px;
    color: var(--text-title);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* 板块3标题图标：保留原样式，不再重复定义 */
.new-section3 .section-title::before {
    background-image: url("/png/8.png"); /* 占位图片，后续可改 */
}
.new-section3 .new-file3 {
    font-size: 16px;
    color: var(--text-title);
    margin-bottom: 10px;
}

/* 支持图标样式：保留原有，优化垂直对齐 */
.support-icon {
    width: 25px !important;  /* 自定义大小 */
    height: 25px !important;
    object-fit: cover;
    border-radius: 8px !important; /* 甚至可以单独改圆角 */
    vertical-align: middle !important; /* 优化垂直对齐 */
    border: 1px solid var(--border-color); /* 新增：支持图标边框 */
}

/* 响应式样式：保留新代码的手机端适配，优化按钮和板块样式 */
@media (max-width: 768px) {
    .section {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
    .row { margin-bottom: 0; }
    /* 手机端头部按钮适配：更小的间距和字体，保留边框 */
    .header .social-box {
        padding: 8px 12px;
        font-size: 14px;
        margin: 0 2px 8px; /* 进一步缩小左右margin */
    }
    /* 手机端导航栏适配：保留新代码，适配原配色 */
    .navbar {
        --navbar-height: 48px;
    }
    .nav-link {
        padding: 8px 20px;
        font-size: 14px;
    }
    /* 新增板块手机端适配 */
    .new-section1, .new-section2, .new-section3 {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
}
/* 弹窗遮罩层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none; /* 默认隐藏 */
}

/* 弹窗容器样式 */
.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  z-index: 1000;
  display: none; /* 默认隐藏 */
  width: 80%;
  max-width: 300px; /* 限制弹窗最大宽度 */
  overflow: hidden;
}

/* 弹窗关闭按钮样式 */
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-body);
  padding: 5px;
}
.popup-close:hover {
  color: var(--text-title);
}

/* 区域1：图片样式（自适应比例） */
.popup-area1 {
  width: 100%;
}
.popup-area1 img {
  width: 100%;
  height: auto;
  display: block;
}

/* 区域2+3：按钮容器（平分宽度） */
.popup-btn-group {
  display: flex;
  width: 100%;
}

/* 弹窗功能按钮样式 */
.popup-btn {
  flex: 1; /* 各占50%宽度 */
  padding: 12px;
  border: none;
  background: var(--btn-blue);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.popup-btn:hover {
  background: #0066cc;
}
/* 第二个按钮区分颜色 */
.popup-btn-group .popup-btn:nth-child(2) {
  background: var(--btn-green);
}
.popup-btn-group .popup-btn:nth-child(2):hover {
  background: #2db84e;
}