/* 全局变量定义 */
:root {
    --primary-color: #F0B90B;
    --primary-color-rgb: 240, 185, 11; /* 添加RGB格式 */
    --accent-color: #F0B90B;
    --text-primary: #1E2329;
    --text-secondary: #474D57;
    --text-tertiary: #707A8A;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-card: #FFFFFF;
    --border-color: #E6E8EA;
    --border-color-rgb: 230, 232, 234; /* 添加边框RGB值 */
    --hover-color: #F5F5F5;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --search-bg: #F5F5F5; /* 搜索框背景色 */
    --search-placeholder: #707A8A; /* 搜索框占位符颜色 */
}

/* 深色模式变量 */
.dark-mode {
    --primary-color: #F0B90B;
    --primary-color-rgb: 240, 185, 11; /* 添加RGB格式 */
    --accent-color: #F0B90B;
    --text-primary: #FFFFFF;
    --text-secondary: #B7BDC6;
    --text-tertiary: #848E9C;
    --bg-primary: #0B0E11;
    --bg-secondary: #1E2329;
    --bg-card: #1E2329;
    --border-color: #2B3139;
    --border-color-rgb: 43, 49, 57; /* 添加深色模式边框RGB值 */
    --hover-color: #2B3139;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --search-bg: #2B3139; /* 搜索框背景色 */
    --search-placeholder: #848E9C; /* 搜索框占位符颜色 */
}

/* 基本样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 通用容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    outline: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(240, 185, 11, 0.25);
}

.btn-primary:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-primary:hover {
    background-color: #f8c930;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 185, 11, 0.4);
}

.btn-primary:hover:before {
    left: 100%;
}

.btn-outline {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid transparent;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.btn-outline:hover {
    background-color: rgba(240, 185, 11, 0.15);
    border-color: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-large {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}

/* 导航栏 */
.navbar {
    padding: 15px 0;
    background-color: rgba(255, 255, 255, 0.95);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.navbar:hover {
    background-color: rgba(255, 255, 255, 0.98);
}

.dark-mode .navbar {
    background-color: rgba(18, 20, 25, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.dark-mode .navbar:hover {
    background-color: rgba(18, 20, 25, 0.95);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo动画效果 */
@keyframes logo-pulse {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.2);
        transform: scale(1.05);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

.logo img {
    height: 28px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo img:hover {
    animation: logo-pulse 1.5s infinite;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0 auto 0 48px;
}

.nav-link {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    transition: all 0.3s ease;
    padding: 6px 2px;
    letter-spacing: 0.2px;
}

.nav-link:hover {
    color: var(--primary-color);
}

.dark-mode .nav-link {
    color: var(--text-secondary);
}

.dark-mode .nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.25s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 2px;
}

.nav-link:hover::after {
    width: 100%;
    opacity: 0.8;
}

/* 添加导航项微妙的上浮效果 */
.nav-link:hover {
    transform: translateY(-2px);
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-buttons .btn {
    padding: 8px 18px;
    min-width: 80px; /* 设置最小宽度 */
}

.nav-buttons .btn-primary {
    padding: 8px 20px; /* 增加主按钮的内边距 */
}

.dark-mode-toggle,
.language-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.25s ease;
    background-color: rgba(0, 0, 0, 0.05);
    width: 36px;
    height: 36px;
}

.dark-mode-toggle:hover,
.language-selector:hover {
    background-color: rgba(240, 185, 11, 0.15);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.dark-mode .dark-mode-toggle,
.dark-mode .language-selector {
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.05);
}

.language-selector {
    width: auto;
    padding: 8px 12px;
}

.language-selector span {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 500;
}

.hamburger-menu {
    display: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 8px;
    transition: all 0.25s ease;
    background-color: rgba(0, 0, 0, 0.05);
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
}

.dark-mode .hamburger-menu {
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.05);
}

.hamburger-menu i {
    font-size: 18px;
}

.hamburger-menu:hover {
    background-color: rgba(240, 185, 11, 0.15);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* 移动端菜单 */
.mobile-menu {
    position: fixed;
    top: 100%; /* 从底部开始 */
    left: 0; /* 左边距为0 */
    width: 100%;
    height: 100vh;
    background-color: var(--bg-card); /* 使用变量控制颜色 */
    z-index: 200;
    box-shadow: none;
    transition: top 0.3s ease; /* 修改过渡属性 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    color: var(--text-primary); /* 使用变量控制文字颜色 */
}

.dark-mode .mobile-menu {
    background-color: #181A20; /* 暗夜模式使用深色背景 */
}

.mobile-menu.active {
    top: 0; /* 激活时移到顶部 */
    left: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: none;
}

.mobile-menu-logo img {
    height: 28px;
}

.close-menu {
    padding: 8px;
    cursor: pointer;
    color: var(--text-primary); /* 使用变量控制颜色 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: var(--hover-color); /* 使用变量控制背景色 */
}

.close-menu:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1); /* 使用带透明度的主题色 */
    color: var(--primary-color);
    transform: none;
}

.mobile-menu-auth {
    display: flex;
    padding: 20px;
    gap: 15px;
}

.mobile-menu-auth .btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 4px;
    min-height: 46px; /* 确保按钮高度一致 */
}

.mobile-menu-auth .btn-outline {
    background-color: var(--hover-color);
    color: var(--text-primary);
    border: none;
}

.dark-mode .mobile-menu-auth .btn-outline {
    background-color: #2B3139;
    color: #fff;
}

.mobile-menu-search {
    padding: 0 20px 20px;
    margin-bottom: 10px;
}

.mobile-menu-search input {
    width: 100%;
    padding: 12px 20px 12px 40px;
    border-radius: 4px;
    background-color: var(--search-bg);
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23848E9C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
}

.mobile-menu-search input::placeholder {
    color: var(--search-placeholder);
}

.mobile-nav-links {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.mobile-nav-links a {
    color: var(--text-primary);
    font-weight: 400;
    padding: 18px 20px;
    border-radius: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background-color: transparent;
    border-left: none;
    border-bottom: none;
    position: relative;
    gap: 16px;
    font-size: 16px;
}

.mobile-nav-links a i {
    width: 24px;
    font-size: 18px;
    color: var(--text-tertiary);
}

.mobile-nav-links a.has-submenu:after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}

.mobile-nav-links a.has-submenu.expanded:after {
    transform: rotate(180deg);
}

.mobile-nav-links a:hover {
    color: var(--primary-color);
    background-color: transparent;
    border-left: none;
    padding-left: 16px;
    transform: none;
}

.mobile-nav-links a:hover i {
    color: var(--primary-color);
}

.mobile-menu-footer {
    padding: 0 20px 30px;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* 将底部菜单推到底部 */
}

.mobile-dark-mode-toggle, 
.mobile-support-link,
.mobile-download-link,
.mobile-language-link,
.mobile-currency-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.mobile-dark-mode-toggle i,
.mobile-support-link i,
.mobile-download-link i,
.mobile-language-link i,
.mobile-currency-link i {
    width: 24px;
    font-size: 20px;
    color: var(--text-tertiary);
}

.mobile-dark-mode-toggle:hover,
.mobile-support-link:hover,
.mobile-download-link:hover,
.mobile-language-link:hover,
.mobile-currency-link:hover {
    color: var(--primary-color);
}

.mobile-dark-mode-toggle:hover i,
.mobile-support-link:hover i,
.mobile-download-link:hover i,
.mobile-language-link:hover i,
.mobile-currency-link:hover i {
    color: var(--primary-color);
}

.mobile-dark-mode-toggle {
    display: flex;
    justify-content: space-between;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hover-color);
    transition: .4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-icons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 4px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.toggle-icons .sun-icon,
.toggle-icons .moon-icon {
    z-index: 1;
}

input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

input:checked + .toggle-slider:before {
    transform: translateX(28px);
}

.mobile-menu-footer .mobile-currency-link {
    border-bottom: none;
}

/* 英雄区域 */
.hero {
    padding: 60px 0;
    background-color: var(--bg-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.hero .container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    margin: 0 auto; /* 居中显示 */
    text-align: center; /* 文本居中 */
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary-color);
    text-align: center; /* 确保标题居中 */
}

.hero-subtitle {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center; /* 确保副标题居中 */
}

.hero-form {
    display: flex;
    margin-bottom: 20px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.hero-form input {
    flex: 3;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    margin-right: 10px;
}

.hero-form .btn {
    border-radius: 4px;
    padding: 14px 24px;
    flex: 1.2;
    white-space: nowrap;
    font-size: 15px;
}

.hero-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.mobile-register {
    display: none;
    margin: 30px 0;
}

.mobile-register .btn {
    min-width: 180px;
    padding: 14px 20px;
    font-size: 15px;
}

.alt-login-options {
    margin-bottom: 30px;
    text-align: center; /* 居中对齐 */
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.alt-login-text {
    text-align: center; /* 居中对齐 */
    margin-bottom: 15px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.login-icons {
    display: flex;
    justify-content: center; /* 居中对齐 */
    gap: 20px;
    margin-bottom: 20px;
}

.login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.login-icon:hover {
    background-color: var(--primary-color);
    color: #000;
    transform: translateY(-3px);
}

.download-app-link {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中对齐 */
    gap: 5px;
    color: var(--accent-color);
    font-weight: 500;
}

.download-app-link i {
    transition: transform 0.3s ease;
}

.download-app-link:hover i {
    transform: translateX(5px);
}

/* 数据统计区域 */
.hero-stats {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; /* 居中显示 */
    gap: 30px; /* 增加间距 */
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--border-color-rgb), 0.5);
    max-width: 800px; /* 限制最大宽度 */
    margin-left: auto;
    margin-right: auto;
}
    
.stat-item {
    flex: 0 1 auto; /* 根据内容自适应宽度 */
    text-align: center;
    padding: 0 15px;
    position: relative;
    white-space: nowrap;
    background-color: transparent; /* 完全透明背景 */
    box-shadow: none; /* 移除阴影 */
    transition: color 0.3s ease;
}

/* 恢复分隔线 */
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-color: var(--border-color);
    display: block;
}

.stat-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary); /* 使用默认文字颜色 */
}

.stat-item p {
    color: var(--text-tertiary);
    font-size: 14px;
    white-space: nowrap;
}

/* 市场行情 - 取消阴影，跟随背景颜色 */
.hero-market {
    flex: 1;
    max-width: 550px;
    background-color: transparent; /* 使用透明背景，跟随主背景色 */
    border-radius: 12px;
    box-shadow: none; /* 移除阴影效果 */
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加轻微的边框 */
    overflow: hidden;
    padding: 25px 20px;
    transition: border-color 0.3s ease;
    position: relative;
}

.dark-mode .hero-market {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
}

/* 市场列表样式 - 透明背景 */
.market-list {
    padding: 0;
    background-color: transparent; /* 透明背景 */
}

/* 币种切换按钮样式 - 简化样式 */
.market-switcher {
    position: relative;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    background-color: rgba(var(--border-color-rgb), 0.1); /* 轻微背景色 */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: none; /* 移除阴影 */
    z-index: 5;
    border: none; /* 移除边框 */
    transition: background-color 0.3s ease;
    max-width: 200px;
}

.market-switcher:hover {
    box-shadow: none; /* 移除悬停时的阴影 */
    transform: none; /* 移除变换效果 */
    background-color: rgba(var(--border-color-rgb), 0.15); /* 轻微加深背景 */
}

.market-switcher-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
    min-width: 60px;
    flex: 1;
    text-align: center;
}

.market-switcher-btn:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.market-switcher-btn:active {
    transform: translateY(0) scale(0.97);
}

.market-switcher-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background-color: var(--accent-color);
    transition: transform 0.3s ease;
}

.market-switcher-btn:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.market-switcher-btn.active {
    color: #000;
    background-color: var(--accent-color);
}

.market-switcher-btn.active::after {
    display: none;
}

.dark-mode .market-switcher-btn.active {
    color: #000;
}

/* 市场项目样式 */
.market-item {
    text-align: left; /* 恢复左对齐以确保内容布局正确 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.1);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.market-item:last-child {
    border-bottom: none;
}

.coin-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-price {
    text-align: right; /* 确保价格右对齐 */
}

.price-value {
    font-weight: 500;
    font-size: 16px;
}

/* 确保图片容器居中 */
.text-center img {
    margin-left: auto;
    margin-right: auto;
}

/* 居中footer内容 */
.footer-logo,
.social-links,
.footer-bottom {
    display: flex;
    justify-content: flex-start;
}

.footer-links {
    justify-content: space-between;
}

.footer-column h3 {
    text-align: initial;
}

/* 强制居中的元素 */
.center-forced {
    /* 移除 */
}

.market-item:hover {
    background-color: rgba(var(--border-color-rgb), 0.05); /* 更轻微的悬停效果 */
}

.market-item:active {
    transform: none; /* 移除按下时的缩放效果 */
    background-color: rgba(var(--border-color-rgb), 0.1); /* 更明显的按下效果 */
}

/* 市场项目点击波纹效果 - 更微妙 */
.market-item-ripple {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color-rgb), 0.05); /* 更微妙的颜色 */
    transform: scale(0);
    animation: market-ripple 0.8s ease-out;
    pointer-events: none;
}

@keyframes market-ripple {
    to {
        transform: scale(6);
        opacity: 0;
    }
}

/* 调整波纹效果 */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(var(--primary-color-rgb), 0.1); /* 使用主题色 */
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 10;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

.dark-mode .ripple-effect {
    background-color: rgba(var(--primary-color-rgb), 0.05); /* 暗模式下更微妙 */
}

.coin-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
}

.coin-name {
    display: flex;
    flex-direction: column;
}

.coin-symbol {
    font-weight: 600;
    font-size: 16px;
}

.coin-fullname {
    color: var(--text-tertiary);
    font-size: 12px;
}

.price-change {
    font-size: 14px;
    margin-top: 4px;
}

.price-change.positive {
    color: #03A66D;
}

.price-change.negative {
    color: #CF304A;
}

/* 功能区域 */
.features {
    padding: 80px 0;
    background-color: var(--bg-primary);
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
    
.section-description {
    font-size: 16px;
    color: var(--text-tertiary);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: transparent; /* 透明背景 */
    border-radius: 8px;
    padding: 30px;
    box-shadow: none; /* 取消阴影 */
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加轻微的边框 */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px); /* 减小上移距离 */
    box-shadow: none; /* 取消悬停时的阴影 */
    border-color: rgba(var(--primary-color-rgb), 0.3); /* 悬停时边框颜色变化 */
}

/* 图标容器样式修改 */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: rgba(var(--primary-color-rgb), 0.05); /* 轻微的主题色背景 */
    margin-bottom: 20px;
    border: none; /* 移除边框 */
}

.dark-mode .feature-card {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
}

.dark-mode .feature-icon {
    background-color: rgba(var(--primary-color-rgb), 0.08); /* 暗模式下背景色稍深 */
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--text-tertiary);
    font-size: 14px;
    margin-bottom: 20px;
}

.feature-link {
    color: var(--accent-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.feature-link i {
    transition: transform 0.3s ease;
}

.feature-link:hover i {
    transform: translateX(5px);
}

/* 应用展示区域 */
.app-showcase {
    padding: 80px 0;
    background-color: transparent; /* 改为透明背景，跟随主题 */
    border-top: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加顶部边框代替背景色变化 */
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加底部边框 */
}

.dark-mode .app-showcase {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
}

.app-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.app-text {
    flex: 1;
}

.app-text h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
}

.app-text p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* 添加暗夜模式下的应用图片处理 */
.dark-mode .app-images img {
    filter: brightness(0.85) contrast(1.05); /* 暗模式下略微调整亮度和对比度 */
}

/* 应用功能检查项在暗夜模式下的颜色调整 */
.dark-mode .app-feature span {
    color: var(--text-secondary); /* 暗模式下使用次级文本颜色 */
}

.version-switcher {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.version-tab {
    padding: 10px 20px;
    background-color: transparent; /* 透明背景 */
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 轻微的边框 */
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.version-tab:hover {
    border-color: rgba(var(--primary-color-rgb), 0.3); /* 悬停时边框颜色变化 */
}

.version-tab.active {
    background-color: rgba(var(--primary-color-rgb), 0.08); /* 轻微的背景色 */
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dark-mode .version-tab {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
    color: var(--text-secondary);
}

.dark-mode .version-tab:hover {
    color: var(--primary-color);
}

/* 应用特性 - 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: transform 0.2s ease, background-color 0.2s ease;
}

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

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

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

.app-download {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
    
.app-download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background-color: transparent; /* 透明背景 */
    border-radius: 4px;
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加轻微的边框 */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.app-download-btn:hover {
    transform: translateY(-3px); /* 减小上移距离 */
    box-shadow: none; /* 取消悬停时的阴影 */
    border-color: rgba(var(--primary-color-rgb), 0.3); /* 悬停时边框颜色变化 */
}

.dark-mode .app-download-btn {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
}

.app-download-btn i {
    font-size: 24px;
}

.download-text {
    display: flex;
    flex-direction: column;
}

.download-text span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.download-text strong {
    font-size: 14px;
}

.app-images {
    flex: 1;
    display: flex;
        justify-content: center;
    align-items: center;
}
    
.app-images img {
        max-width: 100%;
    height: auto;
    transition: all 0.3s ease;
    box-shadow: none; /* 取消阴影 */
    border-radius: 20px;
}

/* 安全保障区域 */
.security {
    padding: 80px 0;
    background-color: var(--bg-primary);
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
    
.security-card {
    background-color: transparent; /* 透明背景 */
    border-radius: 8px;
    padding: 30px;
    text-align: initial; /* 恢复原样式 */
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加轻微的边框 */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.security-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-color-rgb), 0.3); /* 悬停时边框颜色变化 */
}

.dark-mode .security-card {
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
}

.security-icon {
    width: 64px;
    height: 64px;
    margin: initial; /* 恢复原样式 */
    margin-bottom: 20px; /* 保留原有间距 */
}

.security-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.security-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}
    
.security-card p {
    color: var(--text-tertiary);
    font-size: 14px;
}

/* 开始交易区域 */
.cta {
    padding: 80px 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, #F8D12F 100%);
    color: #000;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: initial; /* 恢复原始对齐方式 */
}

.cta-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}
    
.cta-content p {
    font-size: 18px;
    margin-bottom: 40px;
}

.cta-steps {
    display: flex;
    justify-content: flex-start; /* 恢复原始对齐方式 */
    margin-bottom: 40px;
        gap: 20px;
    }
    
.cta-step {
    display: flex;
        align-items: center;
    gap: 15px;
    text-align: left;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.step-text h3 {
    font-weight: 600;
    margin-bottom: 5px;
}

.step-text p {
    font-size: 14px;
    margin-bottom: 0;
}

.cta .btn {
    background-color: #000;
    color: #fff;
    margin: 25px 0 0; /* 恢复原始边距 */
    display: inline-block; /* 恢复原始显示方式 */
    max-width: initial;
}

.cta .btn:hover {
    background-color: #222;
    transform: translateY(-5px);
}

/* 页脚 */
.footer {
    background-color: var(--bg-secondary);
    padding: 60px 0 30px;
}

.footer-top {
        display: flex;
    justify-content: space-between;
        align-items: center;
    margin-bottom: 40px;
}

.footer-logo img {
    height: 28px;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
        justify-content: center;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: var(--accent-color);
    color: #000;
    transform: translateY(-5px);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
        margin-bottom: 40px;
    }
    
.footer-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column a {
    color: var(--text-tertiary);
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.copyright {
    color: var(--text-tertiary);
    font-size: 14px;
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-links a {
    color: var(--text-tertiary);
    font-size: 14px;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--accent-color);
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .hero .container {
        flex-direction: column;
    }

    .hero-content,
    .hero-market {
        max-width: 100%;
    }
    
    .app-content {
        flex-direction: column;
    }
    
    .app-images {
        order: -1;
    }

    .nav-links {
        gap: 18px;
    }
    
    .nav-link {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hamburger-menu {
        display: flex;
    }
    
    /* 隐藏导航按钮中的登录、注册和语言选择器 */
    .nav-buttons .btn-outline,
    .nav-buttons .btn-primary,
    .nav-buttons .language-selector {
        display: none;
    }
    
    /* 暗夜模式切换按钮保留 */
    .dark-mode-toggle {
        display: flex;
    }
    
    .hero {
        padding: 30px 0; /* 减小内边距 */
    }
    
    .hero-title {
        font-size: 34px; /* 调整字体大小 */
        margin-bottom: 6px; /* 减小标题和副标题之间的间距 */
    }
    
    .hero-subtitle {
        font-size: 24px; /* 减小字体大小 */
        margin-bottom: 25px; /* 减小与下方元素的间距 */
    }
    
    .hero-form {
        display: none;
    }
    
    .mobile-register {
        display: block;
        text-align: center;
        margin: 25px 0; /* 减少上下边距 */
    }
    
    .mobile-register .btn {
        min-width: 200px;
        height: 48px; /* 固定高度以确保更好的触控体验 */
        font-size: 16px; /* 增大字体使按钮文字更醒目 */
    }
    
    /* 优化手机登录选项布局 */
    .alt-login-options {
        margin-bottom: 20px; /* 减少下边距 */
    }
    
    .login-icons {
        gap: 25px; /* 增加图标之间的间距 */
    }
    
    .login-icon {
        width: 44px; /* 增大图标尺寸以提高可点击性 */
        height: 44px;
    }
    
    .download-app-link {
        font-size: 16px; /* 增大字体 */
        margin-top: 5px; /* 添加顶部边距 */
        padding: 8px 0; /* 增加上下内边距，扩大点击区域 */
    }
    
    /* 数据统计区域居中优化，取消阴影，跟随背景颜色 */
    .hero-stats {
        gap: 18px; /* 增加项目间隔，使布局更均衡 */
        overflow-x: auto;
        justify-content: center; /* 居中显示 */
        padding: 15px 0; /* 保持上下内边距 */
        max-width: 100%; /* 确保不超出容器 */
        scrollbar-width: none; /* 隐藏滚动条 */
        -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
        position: relative;
    }
    
    /* 调整统计数据项目 - 确保在移动端居中对齐，取消阴影，跟随背景颜色 */
    .stat-item {
        flex: 0 0 auto; /* 不拉伸也不收缩 */
        min-width: auto; /* 根据内容自动宽度 */
        white-space: nowrap; /* 防止文字换行 */
        text-align: center; /* 内容居中 */
        background-color: transparent; /* 完全透明背景 */
        box-shadow: none; /* 移除阴影 */
        border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 极轻微的边框 */
        border-radius: 8px;
        padding: 8px 15px; /* 调整内边距 */
        transition: background-color 0.2s ease;
    }
    
    .stat-item:not(:last-child)::after {
        display: none; /* 移除分隔线 */
    }
    
    .stat-item h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color); /* 使用强调色增加视觉效果 */
        margin-bottom: 4px; /* 减小标题和描述之间的间距 */
    }
    
    .stat-item p {
        font-size: 13px; /* 减小字体大小 */
        color: var(--text-tertiary); /* 使用第三级文本颜色 */
    }
    
    /* 仅在小屏幕上显示的优化 */
    @media (max-width: 480px) {
        .hero-stats {
            padding: 12px 0 18px; /* 增加底部内边距 */
            overflow-x: auto;
            justify-content: flex-start; /* 从左侧开始布局，允许滚动 */
            padding-left: 15px; /* 增加左侧内边距 */
    }
    
    .stat-item {
            min-width: 105px;
            background-color: transparent; /* 完全透明背景 */
            box-shadow: none; /* 移除阴影效果 */
            border: 1px solid rgba(var(--border-color-rgb), 0.1);
            padding: 10px 12px; /* 调整内边距 */
        }
        
        /* 数据统计区域移除分隔线，改用左右间距 */
        .stat-item:not(:last-child) {
            margin-right: 5px; /* 增加右侧外边距 */
        }
    }

    /* 优化市场行情区域 - 取消阴影，跟随背景色 */
    .hero-market {
        margin: 30px auto 0; 
        padding: 20px 15px;
        border-radius: 10px;
        max-width: 96%; 
        width: 100%;
        box-shadow: none; 
        background-color: transparent; /* 透明背景 */
        border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 轻微边框 */
    }
    
    /* 市场列表透明背景 */
    .market-list {
        background-color: transparent;
        border: none;
    }
    
    /* 简化市场项目样式 */
    .market-item {
        border-bottom: 1px solid rgba(var(--border-color-rgb), 0.1); /* 极轻微的分隔线 */
        background-color: transparent;
    }
    
    /* 币种切换器背景和阴影调整 */
    .market-switcher {
        box-shadow: none;
        background-color: rgba(var(--border-color-rgb), 0.1); /* 非常轻微的背景色 */
        border: none;
    }
    
    /* 小屏幕优化 */
    @media (max-width: 360px) {
        .hero-market {
            border: none; /* 极小屏幕移除边框 */
            padding: 15px 10px; 
        }
    }
}

/* 低性能设备优化 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-stats {
        animation: none !important; /* 禁用横向滚动提示动画 */
    }
    
    .market-item:active,
    .btn:active {
        transform: none !important; /* 禁用按下缩放效果 */
    }
}

/* 针对iOS设备的优化 */
@supports (-webkit-touch-callout: none) {
    /* iOS设备特定优化 */
    .hero-stats,
    .market-list,
    .mobile-menu {
        -webkit-overflow-scrolling: touch; /* 提供惯性滚动 */
    }
    
    /* 减少透明度变化和模糊效果 */
    .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--bg-primary);
    }
    
    .dark-mode .navbar {
        background-color: var(--bg-secondary);
    }
    
    /* 禁用iOS设备上的高光效果 */
    .btn, a, input, button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* 打印样式优化 */
@media print {
    .navbar, 
    .mobile-menu, 
    .footer,
    .btn-primary,
    .alt-login-options,
    .hero-stats {
        display: none !important; /* 打印时隐藏不必要元素 */
    }
    
    body {
        background-color: white !important;
        color: black !important;
    }
    
    .hero-content,
    .hero-market {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    /* 节约墨水 */
    .hero-title,
    .hero-subtitle {
        color: black !important;
    }
}

@media (max-width: 576px) {
    .navbar {
        padding: 12px 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .app-download {
        flex-direction: column;
    }
    
    .nav-buttons {
        gap: 10px;
    }
    
    .btn {
        padding: 8px 14px; /* 略微增加水平内边距 */
        font-size: 13px;
    }
    
    .btn-outline {
        display: none;
    }
    
    .mobile-register .btn {
        min-width: 160px; /* 小屏幕上稍微缩小按钮宽度 */
    }
    
    .market-switcher {
        max-width: 180px; /* 减小切换器宽度 */
    }
    
    .market-switcher-btn {
        padding: 7px 14px; /* 调整内边距 */
        min-width: 50px; /* 小屏幕下减小最小宽度 */
    }
    
    /* 更小屏幕上统一的按钮样式 */
    .btn-large, .btn-primary, .mobile-register .btn {
        padding: 12px 20px;
        font-size: 15px;
        height: 46px; /* 固定高度确保一致性 */
        display: flex;
        align-items: center;
    justify-content: center;
    }
    
    /* 优化小屏幕上的行情区域 */
    .hero-market {
        padding: 15px 12px;
    }
    
    /* 调整切换按钮长度，使其看起来更协调 */
    .market-switcher-btn {
        min-width: 70px;
        flex: 1;
    }
    
    /* 数据统计区域重新设计，与移动端样式保持一致 */
    .hero-stats {
        padding: 15px 0;
        margin-top: 20px;
        justify-content: flex-start; /* 从左侧开始排列 */
        gap: 20px;
        overflow-x: auto; /* 确保可以横向滚动 */
    }
    
    .stat-item {
        min-width: 110px; /* 增加最小宽度，使内容更加醒目 */
        padding: 8px 15px;
        background-color: transparent; /* 透明背景 */
        border-radius: 8px;
        box-shadow: none; /* 移除阴影 */
        border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 极轻微的边框 */
    }
    
    .dark-mode .stat-item {
        background-color: transparent; /* 确保暗模式下也使用透明背景 */
        border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框稍微明显一点 */
    }
    
    .stat-item h3 {
        font-size: 18px;
        margin-bottom: 4px;
        color: var(--primary-color);
    }
    
    .stat-item p {
        font-size: 13px;
        color: var(--text-tertiary);
    }
    
    /* 移除分隔线，用统一的边框样式代替 */
    .stat-item:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 480px) {
    /* 全局间距调整 */
    .container {
        padding: 0 15px; /* 减小容器内边距 */
    }
    
    .hero {
        padding: 25px 0; /* 进一步减小页面内边距 */
    }
    
    .hero-title {
        font-size: 28px; /* 进一步减小标题大小 */
    }
    
    .hero-subtitle {
        font-size: 18px; /* 减小副标题大小 */
        margin-bottom: 20px;
    }
    
    /* 移动端注册按钮优化 */
    .mobile-register {
        margin: 20px 0;
    }
    
    .mobile-register .btn {
        min-width: 160px;
        height: 44px;
        font-size: 14px;
    }
    
    /* 社交登录图标优化 */
    .login-icons {
        gap: 20px; /* 减小图标间距 */
    }
    
    .login-icon {
        width: 40px; /* 调整图标大小 */
        height: 40px;
    }
    
    /* 数据统计项优化 */
    .hero-stats {
        padding: 12px 0;
        gap: 15px;
        -webkit-overflow-scrolling: touch;
    }
    
    .stat-item {
        min-width: 100px;
        padding: 10px;
    }
    
    .stat-item h3 {
        font-size: 16px;
    }
    
    .stat-item p {
        font-size: 12px;
    }
    
    /* 市场数据项优化 */
    .coin-info {
        gap: 8px; /* 减小图标和文字间距 */
    }
    
    .coin-icon {
        width: 28px; /* 减小币种图标 */
        height: 28px;
    }
    
    .coin-symbol {
        font-size: 15px;
    }
    
    .coin-fullname {
        font-size: 12px;
    }
    
    .price-value {
        font-size: 15px;
    }
    
    .price-change {
        font-size: 13px;
    }
    
    /* 移动导航优化 */
    .mobile-menu-header {
        padding: 15px; /* 减小头部内边距 */
    }
    
    .mobile-menu-auth {
        padding: 15px; /* 减小认证区域内边距 */
        gap: 10px; /* 减小按钮间距 */
    }
    
    .mobile-menu-search {
        padding: 0 15px 15px;
    }
    
    .mobile-menu-search input {
        padding: 10px 10px 10px 36px; /* 调整输入框内边距 */
        font-size: 13px;
        background-position: 10px center; /* 调整搜索图标位置 */
    }
    
    .mobile-nav-links a {
        padding: 14px 15px;
        font-size: 14px;
        gap: 12px; /* 减小图标和文字间距 */
    }
    
    .mobile-dark-mode-toggle, 
    .mobile-support-link,
    .mobile-download-link,
    .mobile-language-link,
    .mobile-currency-link {
        padding: 14px 15px;
        font-size: 14px;
        gap: 12px;
    }
    
    .mobile-dark-mode-toggle i,
    .mobile-support-link i,
    .mobile-download-link i,
    .mobile-language-link i,
    .mobile-currency-link i {
    font-size: 18px;
    }
    
    /* 底部列表间距优化 */
    .toggle-switch {
        width: 50px;
        height: 24px;
    }
    
    .toggle-slider:before {
        height: 18px;
        width: 18px;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }
}

/* 文章正文板块 */
    .article-section {
    padding: 60px 0;
    background-color: transparent; /* 透明背景，跟随主题 */
    }
    
    .article-container {
    max-width: 1000px; /* 增加宽度，从800px改为1000px */
    margin: 0 auto;
    padding: 30px;
    background-color: transparent; /* 透明背景，跟随主题色 */
    border-radius: 15px;
    box-shadow: none; /* 移除阴影 */
    border: 1px solid rgba(var(--border-color-rgb), 0.1); /* 添加轻微边框代替阴影 */
    transition: border-color 0.3s ease;
}

.dark-mode .article-container {
    background-color: transparent; /* 透明背景，跟随主题色 */
    box-shadow: none; /* 移除阴影 */
    border-color: rgba(var(--border-color-rgb), 0.2); /* 暗模式下边框颜色略深 */
    }
    
    .article-header {
    margin-bottom: 30px;
    text-align: initial; /* 恢复原始对齐方式 */
    }
    
    .article-title {
    font-size: 38px; /* 增大标题字体 */
    font-weight: 700;
        margin-bottom: 15px;
    color: var(--text-primary);
        line-height: 1.3;
    }
    
.article-meta {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    color: var(--text-tertiary);
    font-size: 15px; /* 略微增大元信息字体 */
    margin-bottom: 20px;
}

.article-date, .article-author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.article-divider {
    width: 100px; /* 增加分隔线宽度 */
    height: 3px;
    background-color: var(--primary-color);
    margin: 20px 0 30px; /* 修改为左对齐 */
    border-radius: 3px; /* 添加圆角 */
}
    
    .article-content {
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 40px;
    max-width: 900px; /* 确保内容有合适的阅读宽度 */
    margin-left: auto;
    margin-right: auto;
}

.article-content p {
    margin-bottom: 20px;
    font-size: 16px; /* 设置合适的正文字体大小 */
    line-height: 1.8;
    }
    
    .article-content h2 {
    font-size: 30px; /* 增大二级标题 */
    margin: 40px 0 20px; /* 增加上下边距 */
    color: var(--primary-color);
    }
    
    .article-content h3 {
    font-size: 24px; /* 增大三级标题 */
    margin: 30px 0 15px;
    color: var(--secondary-color);
}

.article-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 20px 25px; /* 增加内边距 */
    margin: 25px 0; /* 增加上下边距 */
    background-color: rgba(var(--primary-color-rgb), 0.05);
    font-style: italic;
    font-size: 17px; /* 增大引用文字大小 */
    }
    
    .article-content ul, 
    .article-content ol {
    margin: 20px 0;
    padding-left: 30px;
    font-size: 16px; /* 确保列表字体大小一致 */
    }
    
    .article-content li {
    margin-bottom: 10px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.article-content ul, .article-content ol {
    margin: 20px 0;
    padding-left: 20px;
}

.article-content li {
    margin-bottom: 10px;
    }
    
    .article-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--text-tertiary);
    }
    
    .article-content code {
    background-color: rgba(var(--border-color-rgb), 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    }
    
    .article-content pre {
    background-color: rgba(var(--border-color-rgb), 0.2);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}

.article-content pre code {
    background-color: transparent;
    padding: 0;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

.article-tag {
    padding: 6px 15px;
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.article-tag:hover {
    background-color: var(--primary-color);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3);
}

.dark-mode .article-tag {
    background-color: rgba(var(--primary-color-rgb), 0.15);
}

.dark-mode .article-tag:hover {
    background-color: var(--primary-color);
    box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.5);
}

/* 移动端文章样式适配 */
@media (max-width: 768px) {
    .article-section {
        padding: 40px 0;
    }
    
    .article-container {
        padding: 20px;
        margin: 0 15px;
        max-width: 100%; /* 在移动端占据全宽 */
    }
    
    .article-title {
        font-size: 28px;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .article-content {
        font-size: 15px;
    }
    
    .article-content h2 {
        font-size: 24px;
        margin: 30px 0 15px;
    }
    
    .article-content h3 {
        font-size: 20px;
        margin: 25px 0 15px;
    }
    
    .article-content blockquote {
        padding: 15px 20px;
        font-size: 16px;
    }
}

/* 新闻板块样式 */
.news-section {
    padding: 80px 0;
    background-color: transparent;
}

.news-tabs {
    display: flex;
    justify-content: center; /* 居中对齐 */
    margin: 30px 0;
    gap: 10px;
    width: 100%; /* 确保宽度占满容器 */
}

.news-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.news-tab:hover {
    color: var(--primary-color);
}

.news-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.news-container {
    margin-top: 30px;
}

.news-content {
    display: none;
}

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

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    background-color: transparent;
    border: 1px solid rgba(var(--border-color-rgb), 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: rgba(var(--border-color-rgb), 0.2);
}

.dark-mode .news-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.news-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-date {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 15px 20px 5px;
}

.news-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 20px 10px;
    line-height: 1.4;
    min-height: 50px;
}

.news-excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 20px 15px;
    line-height: 1.6;
    min-height: 70px;
}

.news-link {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0 20px 20px;
    transition: all 0.3s ease;
}

.news-link i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.news-link:hover i {
    transform: translateX(3px);
}

.view-all-news {
    text-align: center;
    margin-top: 40px;
}

/* 暗模式新闻区域适配 */
.dark-mode .news-card {
    border-color: rgba(var(--border-color-rgb), 0.2);
}

/* 移动端新闻区域适配 */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .news-section {
        padding: 60px 0;
    }
    
    .news-tabs {
        margin: 20px 0;
        flex-wrap: wrap;
        justify-content: center; /* 确保小屏幕上也居中对齐 */
    }
    
    .news-tab {
        padding: 8px 15px;
    font-size: 14px;
}

    .news-grid {
        grid-template-columns: 1fr;
    gap: 20px;
    }
    
    .news-title {
    font-size: 16px;
        min-height: auto;
    }
    
    .news-excerpt {
        min-height: auto;
    }
}

/* FAQ常见问题区域 */
.faq-section {
    padding: 80px 0;
    background-color: transparent;
}

.faq-container {
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    background-color: transparent;
    border: 1px solid rgba(var(--border-color-rgb), 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(var(--border-color-rgb), 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.dark-mode .faq-item:hover {
    border-color: rgba(var(--border-color-rgb), 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.faq-question {
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-question i {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.faq-item.active .faq-question {
    color: var(--primary-color);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 25px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 0 25px 20px;
}

.faq-answer p {
    margin-bottom: 15px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul, .faq-answer ol {
    margin: 15px 0;
    padding-left: 20px;
}

.faq-answer li {
    margin-bottom: 8px;
}

.faq-answer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.faq-answer a:hover {
    text-decoration: underline;
}

.faq-more {
    text-align: center !important; /* 使用!important确保样式被应用 */
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.faq-more .btn {
    margin: 0 auto;
}

/* 移动端FAQ适配 */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 0;
    }
    
    .faq-container {
        margin-top: 30px;
    }
    
    .faq-question {
        padding: 15px 20px;
    font-size: 16px;
}

    .faq-item.active .faq-answer {
        padding: 0 20px 15px;
    }
    
    .faq-answer {
        font-size: 15px;
    }
}

.market-list {
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

#hot-market, #new-market {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
}

#hot-market.hidden, #new-market.hidden {
    display: none !important;
    opacity: 0;
}

.market-switcher-btn {
    position: relative;
    overflow: hidden;
}

.market-switcher-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.market-switcher-btn.active::after {
    transform: scaleX(1);
}

/* 添加波纹效果 */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
} 

/* 文本居中的全局样式 */
.text-center {
    text-align: center;
}

/* 为主要区域标题设置居中 */
.section-title, 
.section-description {
    text-align: center;
    margin-left: initial;
    margin-right: initial;
    max-width: initial;
}

/* 文章标题和元信息居中 */
.article-header {
    text-align: initial; /* 恢复原始对齐方式 */
}

.article-title {
    text-align: initial; /* 恢复原始对齐方式 */
    margin-left: initial;
    margin-right: initial;
    max-width: initial;
}

.article-meta {
    display: flex;
    justify-content: flex-start; /* 恢复到原来的样式 */
    gap: 20px;
}

/* FAQ标题居中 - 恢复原样式 */
.faq-section .section-title,
.faq-section .section-description {
    text-align: center; /* 保留原有的居中对齐 */
    margin-left: initial;
    margin-right: initial;
}

/* 安全卡片内容恢复左对齐 */
.security-card {
    text-align: initial; /* 恢复原样式 */
}

.security-icon {
    margin: initial; /* 恢复原样式 */
    margin-bottom: 20px; /* 保留原有间距 */
}

/* CTA区域内容恢复 */
.cta-content {
    text-align: initial; /* 恢复原始对齐方式 */
}

.cta-steps {
    justify-content: flex-start; /* 恢复原始对齐方式 */
}

.cta .btn {
    margin: 25px 0 0; /* 恢复原始边距 */
    display: inline-block; /* 恢复原始显示方式 */
    max-width: initial;
}

/* 特性卡片内容恢复左对齐 */
.feature-card {
    text-align: initial;
}

.feature-icon {
    margin: 0 0 20px; /* 恢复原始边距 */
}

/* 市场切换器恢复 */
.market-switcher {
    justify-content: space-between; /* 恢复原始布局 */
}

/* 标签页恢复 */
.news-tabs {
    justify-content: flex-start; /* 恢复原始布局 */
}

/* 文章标签恢复 */
.article-tags {
    justify-content: flex-start; /* 恢复原始布局 */
}

/* FAQ更多按钮恢复 */
.faq-more {
    text-align: initial;
}

/* 英雄区域标题恢复 */
.hero-title, 
.hero-subtitle {
    text-align: initial;
}

/* 应用版本切换器恢复 */
.version-switcher {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

/* 应用特性恢复 */
.app-text h2,
.app-text p {
    text-align: initial;
}

/* 下载按钮区域恢复 */
.app-download {
    display: flex;
    justify-content: flex-start;
        flex-wrap: wrap;
}

/* 确保图片容器恢复 */
.text-center img {
    margin-left: initial;
    margin-right: initial;
}

/* 居中footer内容恢复 */
.footer-logo,
.social-links,
.footer-bottom {
    display: flex;
    justify-content: flex-start;
}

.footer-links {
    justify-content: space-between;
}

.footer-column h3 {
    text-align: initial;
}

/* 强制居中的元素恢复 */
.center-forced {
    /* 移除 */
}

@media (max-width: 768px) {
    .article-meta {
        flex-direction: column;
        align-items: flex-start; /* 恢复原始对齐方式 */
    }
    
    .article-date,
    .article-author {
        justify-content: flex-start; /* 恢复原始对齐方式 */
    }
}

.article-image {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
    display: block;
}

/* 删除确保图片容器恢复的样式 */
.text-center img {
    /* 样式被删除 */
} 

/* 移动端适配 */
@media (max-width: 576px) {
    .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; /* 减小行高 */
    }
}