/* 应用特性 - 2行2列横向排列布局 */
.app-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列布局 */
    grid-template-rows: repeat(2, auto); /* 2行布局 */
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.app-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(var(--border-color-rgb), 0.05); /* 添加轻微背景色增强视觉效果 */
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.2s ease;
}

.app-feature:hover {
    transform: translateY(-2px);
    background-color: rgba(var(--primary-color-rgb), 0.08);
}

.app-feature i {
    color: var(--primary-color);
    flex-shrink: 0; /* 防止图标缩小 */
    font-size: 18px; /* 调整图标大小 */
}

.app-feature span {
    flex: 1; /* 让文本占据剩余空间 */
    font-weight: 500; /* 稍微加粗文字 */
}

/* 深色模式样式调整 */
.dark-mode .app-feature {
    background-color: rgba(255, 255, 255, 0.03);
}

.dark-mode .app-feature:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* 标题居中样式 */
.section-title,
.article-title,
.hero-title,
.hero-subtitle {
    text-align: center;
}

.section-description {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.article-header {
    text-align: center;
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 应用展示区域标题居中 */
.app-showcase h2,
.app-showcase p {
    text-align: center;
}

.app-text h2,
.app-text p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.version-switcher {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

/* 数据统计板块样式 */
.hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
    transition: all 0.3s ease;
}

.stat-item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-color); /* 使用变量以便跟随主题变化 */
}

.stat-item p {
    font-size: 14px;
    color: var(--secondary-text-color); /* 使用变量以便跟随主题变化 */
}

/* 暗夜模式下的数据统计板块样式 */
.dark-mode .stat-item h3 {
    color: var(--text-color); /* 使用变量以便跟随主题变化 */
}

.dark-mode .stat-item p {
    color: var(--secondary-text-color); /* 使用变量以便跟随主题变化 */
}

/* 移动端注册按钮居中 */
.mobile-register {
    display: none; /* 默认隐藏，在PC端不显示 */
    justify-content: center;
    width: 100%;
    margin: 20px auto;
}

.mobile-register .btn {
    min-width: 200px;
    text-align: center;
}

/* 移动端APP下载悬浮板块 */
.app-download-floating {
    display: none; /* 默认不显示 */
    position: fixed;
    bottom: 10px; /* 与底部保持10px间距 */
    left: 10px; /* 左侧间距 */
    right: 10px; /* 右侧间距 */
    background-color: #FFFFFF; /* 亮色模式下使用白色背景 */
    padding: 12px 15px;
    z-index: 1000; /* 确保显示在其他元素上方 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: space-between;
    color: #1E2329; /* 亮色模式下的文字颜色 */
    border: 1px solid #EAECEF;
    border-radius: 12px; /* 添加圆角设计 */
}

.app-download-floating-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.app-download-floating-logo img {
    width: 40px; /* 稍微增大尺寸 */
    height: 40px; /* 保持正方形比例 */
    border-radius: 10px; /* 适度的圆角 */
    object-fit: cover; /* 确保图片正确填充区域 */
    border: 1px solid rgba(234, 236, 239, 0.5); /* 添加轻微边框 */
}

/* 深色模式下的logo边框 */
.dark-mode .app-download-floating-logo img {
    border-color: rgba(42, 45, 56, 0.5); /* 深色模式下更深的边框 */
}

.app-download-floating-info {
    display: flex;
    flex-direction: column;
}

.app-download-floating-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: #1E2329; /* 亮色模式下的标题颜色 */
}

.app-download-floating-desc {
    font-size: 11px;
    color: #707A8A; /* 亮色模式下的次要文字颜色 */
}

.app-download-floating-desc .highlight {
    color: #F0B90B; /* 币安金色 */
    font-weight: 600; /* 加粗显示 */
}

/* 深色模式下的高亮文字也使用相同的颜色 */
.dark-mode .app-download-floating-desc .highlight {
    color: #F0B90B; /* 深色模式下保持相同的金色 */
}

.app-download-floating-btn {
    background-color: #F0B90B; /* 币安黄色 */
    color: #000000;
    border: none;
    border-radius: 8px; /* 按钮也使用圆角 */
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.app-download-floating-btn:hover {
    background-color: #F8C333; /* 悬浮时稍微亮一点 */
    transform: translateY(-1px);
}

/* 深色模式样式调整 */
.dark-mode .app-download-floating {
    background-color: #181A20; /* 深色模式下使用深色背景 */
    border-color: #2A2D38;
    color: #EAECEF;
}

.dark-mode .app-download-floating-title {
    color: #EAECEF; /* 深色模式下的标题颜色 */
}

.dark-mode .app-download-floating-desc {
    color: #848E9C; /* 深色模式下的次要文字颜色 */
}

/* 移动设备下载按钮样式 */
@media (max-width: 576px) {
    /* 显示悬浮下载栏 */
    .app-download-floating {
        display: flex; /* 只在移动设备上显示 */
    }
    
    /* 为底部内容添加足够的下边距，避免被悬浮栏遮挡 */
    footer {
        margin-bottom: 80px; /* 增加页脚底部边距，确保不被悬浮栏遮挡 */
    }
    
    /* 保持应用特性2x2布局 */
    .app-features {
        grid-template-columns: repeat(2, 1fr); /* 保持2列布局 */
        grid-template-rows: repeat(2, auto); /* 保持2行布局 */
        gap: 10px; /* 减小间距 */
    }
    
    .app-feature {
        padding: 8px 10px; /* 减小内边距 */
    }
    
    .app-feature i {
        font-size: 16px; /* 缩小图标 */
    }
    
    .app-feature span {
        font-size: 12px; /* 缩小文字 */
        line-height: 1.3; /* 减小行高 */
    }
    
    /* 数据统计板块移动端样式 */
    .hero-stats {
        display: flex;
        flex-direction: row; /* 强制横向排列 */
        flex-wrap: nowrap; /* 禁止换行 */
        justify-content: space-between; /* 平均分布 */
        gap: 8px; /* 减小间距 */
        margin-top: 20px;
        overflow-x: auto; /* 内容溢出时允许水平滚动 */
        padding: 5px 0; /* 添加一些内边距以便于滚动 */
        -webkit-overflow-scrolling: touch; /* 提供平滑滚动效果 */
    }
    
    .stat-item {
        flex: 0 0 auto; /* 防止项目被压缩 */
        min-width: auto; /* 根据内容自动调整宽度 */
        padding: 0 5px; /* 添加一些水平内边距 */
    }
    
    .stat-item h3 {
        font-size: 16px; /* 减小字体大小 */
        margin-bottom: 2px; /* 减小底部边距 */
        white-space: nowrap; /* 防止文本换行 */
    }
    
    .stat-item p {
        font-size: 10px; /* 进一步减小描述文字大小 */
        white-space: nowrap; /* 防止文本换行 */
    }
    
    /* 强化移动端注册按钮的样式 - 在移动设备上显示 */
    .mobile-register {
        display: flex; /* 在移动设备上显示 */
        margin: 15px auto;
    }
    
    .mobile-register .btn {
        min-width: 80%;
        padding: 12px 0;
        font-size: 16px;
        font-weight: 500;
    }
    
    /* 下载按钮样式 */
    .app-download {
        display: flex;
        flex-direction: row; /* 强制横向排列 */
        justify-content: center; /* 居中排列 */
        flex-wrap: nowrap; /* 禁止换行 */
        gap: 10px; /* 减少按钮间距 */
    }
    
    /* 隐藏PC下载按钮 */
    .app-download-btn.windows {
        display: none;
    }
    
    /* 优化移动端下载按钮 */
    .app-download-btn.ios,
    .app-download-btn.android {
        flex: 1; /* 平均分配空间 */
        max-width: 48%; /* 限制最大宽度 */
        padding: 10px 15px; /* 调整内边距 */
    }
    
    .app-download-btn i {
        font-size: 20px; /* 减小图标尺寸 */
    }
    
    .download-text span {
        font-size: 11px; /* 减小提示文字 */
    }
    
    .download-text strong {
        font-size: 13px; /* 减小主要文字 */
    }
}