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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: #1f2328;
    color: white;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 电脑端响应式布局 - 保持手机端宽度 */
@media (min-width: 768px) {
    body {
        background: #1f2328; /* 电脑端背景色修正 */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        padding: 0;
        margin: 0;
        position: relative;
    }
    
    /* 创建主容器，限制最大宽度 */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1f2328;
        z-index: -1;
    }
    
    /* 所有页面容器 - 增加10%宽度 */
    .page {
        max-width: 412px; /* 375px * 1.1 = 412.5px，约412px */
        width: 100%;
        margin: 0 auto;
        background: #1f2328;
        min-height: 100vh;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1;
        border-radius: 0;
    }
    
    /* 底部导航栏在电脑端自适应 - 像top-bar一样 */
    .tabbar {
        max-width: 412px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
        width: 412px !important;
    }
    
    /* 确保所有固定定位元素都相对于主容器 */
    .btc-header-top {
        max-width: 412px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* 让菜单和内容区域宽度一致 */
    .function-grid,
    .coin-section,
    .market-search-box,
    .market-tabs,
    .market-coin-list,
    .btc-main-content,
    .btc-pledge-main {
        max-width: 412px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 顶部导航菜单也要一致 */
    .header,
    .btc-asset-header,
    .btc-pledge-header {
        max-width: 412px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 调整轮播图的阴影效果 */
    .banner-slider {
        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* 优化大屏幕显示 */
    @media (min-width: 1200px) {
        .page {
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
        }
        
        body::before {
            background: linear-gradient(135deg, #1f2328 0%, #2a2d32 100%);
        }
    }
    
    /* 超宽屏幕优化 */
    @media (min-width: 1920px) {
        .page {
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
        }
    }
}

/* 页面容器 */
.page {
    display: none;
    min-height: 100vh;
    padding-bottom: 60px;
    background: #1f2328;
    color: white;
    overflow: visible;
}

.page.active {
    display: block;
}

/* 头部 */
.header {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    padding: 40px 20px 30px;
    color: white;
    text-align: center;
}

.header h1 {
    font-size: 24px;
    font-weight: bold;
}

.page-header-old {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    padding: 20px;
    color: white;
}

.page-header-old h2 {
    font-size: 20px;
    font-weight: bold;
}

/* 认证页面头部 */
.auth-header {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    padding: 60px 20px 40px;
    color: white;
    text-align: center;
}

.auth-header h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.auth-header p {
    font-size: 14px;
    opacity: 0.9;
}

/* 内容区 */
.content {
    padding: 20px;
}

/* 用户卡片 */
.user-card {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    border-radius: 17px;
    padding: 20px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.3);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 20px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.info .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.info .vip {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    padding: 2px 10px;
    border-radius: 11px;
    font-size: 12px;
}

.balance {
    text-align: center;
}

.balance .label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.balance .value {
    font-size: 32px;
    font-weight: bold;
}

/* 功能网格 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.feature-item {
    background: #2a2d32;
    border-radius: 13px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.feature-item:active {
    transform: scale(0.95);
}

.feature-item .icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.feature-item .text {
    font-size: 12px;
    color: #666;
}

/* 信息盒子 */
.info-box {
    background: #2a2d32;
    border-radius: 13px;
    padding: 20px;
}

.info-box .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.info-box .item {
    padding: 10px 0;
    color: #666;
    font-size: 14px;
}

/* 表单 */
.auth-form {
    padding: 30px 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 9px;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: #2979ff;
}

.helper-text {
    margin-top: 8px;
    font-size: 12px;
    color: #19be6b;
}

/* 按钮 */
.btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
}

.btn-primary {
    background: #2979ff;
    color: white;
}

.btn-success {
    background: #19be6b;
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid #2979ff;
    color: #2979ff;
}

.btn:active {
    opacity: 0.8;
}

.link-text {
    text-align: center;
    font-size: 14px;
    color: #666;
}

.link-text a {
    color: #2979ff;
    text-decoration: none;
    font-weight: bold;
}

/* 个人中心 */
.user-profile {
    background: #2a2d32;
    border-radius: 13px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 15px;
}

.user-profile .name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.vip-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: white;
    padding: 5px 15px;
    border-radius: 17px;
    font-size: 12px;
}

/* 邀请码卡片 */
.invite-card {
    background: #2a2d32;
    border-radius: 13px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 14px;
    color: white;
    margin-bottom: 15px;
}

.invite-code {
    font-size: 36px;
    font-weight: bold;
    color: #2979ff;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

/* 菜单列表 */
.menu-list {
    background: #2a2d32;
    border-radius: 13px;
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

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

.menu-item:active {
    background: #f5f5f5;
}

/* 统计卡片 */
.stats-card {
    background: linear-gradient(135deg, #19be6b 0%, #13a05a 100%);
    border-radius: 13px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item {
    text-align: center;
    color: white;
}

.stat-item .value {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-item .label {
    font-size: 12px;
    opacity: 0.9;
}

/* 佣金统计 */
.commission-stats {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    border-radius: 13px;
    padding: 20px;
    color: white;
    margin-bottom: 20px;
}

.commission-stats .total {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 20px;
}

.commission-stats .total .label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.commission-stats .total .value {
    font-size: 36px;
    font-weight: bold;
}

.commission-stats .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.commission-stats .grid .item {
    background: rgba(255,255,255,0.15);
    padding: 15px;
    border-radius: 9px;
    text-align: center;
}

.commission-stats .grid .label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.commission-stats .grid .value {
    font-size: 20px;
    font-weight: bold;
}

/* Tabs */
.tabs {
    display: flex;
    background: #2a2d32;
    border-radius: 9px;
    margin-bottom: 20px;
    overflow: hidden;
}

.tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab.active {
    color: #2979ff;
    border-bottom-color: #2979ff;
    font-weight: bold;
}

/* 列表 */
.list {
    background: #2a2d32;
    border-radius: 13px;
}

.list-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

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

.empty {
    text-align: center;
    padding: 60px 20px;
    color: white;
    font-size: 14px;
}

/* 新的底部导航栏 - 自适应设计 */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #1e2328;
    display: flex;
    border-top: 1px solid #4a4d52;
    z-index: 100;
}

/* ==================== 底部菜单 - 重新编写 ==================== */
.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    padding: 8px 0;
}

.tab-item .tab-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    filter: brightness(0) invert(1); /* 默认白色图标 */
    transition: all 0.3s ease;
}

.tab-item .text {
    font-size: 12px;
    color: white; /* 默认白色文字 */
    transition: all 0.3s ease;
}

/* 选中状态 - 统一蓝色 */
.tab-item.active {
    color: #2979ff;
}

.tab-item.active .tab-icon {
    filter: brightness(0) invert(1); /* 保持白色图标 */
}

.tab-item.active .text {
    color: #2979ff !important; /* 蓝色文字 */
}

/* Toast */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 9px;
    font-size: 14px;
    display: none;
    z-index: 99999;
}

.toast.show {
    display: block;
}

/* Loading */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.loading.show {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 团队成员卡片 */
.member-card {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.member-card:last-child {
    border-bottom: none;
}

.member-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2979ff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 20px;
}

.member-info .name {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 3px;
}

.member-info .time {
    font-size: 12px;
    color: white;
}

.member-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.member-stats .item {
    text-align: center;
}

.member-stats .label {
    font-size: 12px;
    color: white;
    margin-bottom: 3px;
}

.member-stats .value {
    font-size: 16px;
    font-weight: bold;
    color: #19be6b;
}

/* 佣金记录卡片 */
.commission-card {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.commission-card:last-child {
    border-bottom: none;
}

.commission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.commission-user {
    font-size: 15px;
    font-weight: bold;
}

.commission-amount {
    font-size: 18px;
    font-weight: bold;
    color: #19be6b;
}

.commission-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: white;
}

.level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 11px;
    color: white;
    margin-left: 5px;
}

.level-1 { background: #ff4757; }
.level-2 { background: #ff9000; }
.level-3 { background: #3742fa; }


/* 质押统计卡片 */
.pledge-stats {
    background: #2a2d32;
    border-radius: 13px;
    padding: 20px;
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-col {
    flex: 1;
    text-align: center;
}

.stat-col .label {
    font-size: 14px;
    color: white;
    margin-bottom: 10px;
}

.stat-col .value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.stat-col .value.yellow {
    color: #ffaa00;
}

/* 产品列表 */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-card {
    background: #2a2d32;
    border-radius: 13px;
    padding: 20px;
    position: relative;
}

.product-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.product-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-right: 12px;
}

.product-title {
    flex: 1;
}

.product-title .name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
}

.product-title .currency {
    font-size: 12px;
    color: white;
}

.buy-btn {
    background: linear-gradient(135deg, #ffaa00 0%, #ff9000 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: bold;
}

.product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item .label {
    font-size: 12px;
    color: white;
    margin-bottom: 5px;
}

.info-item .value {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* 弹窗 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 17px;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
    font-size: 16px;
    color: #333;
}

.close-btn {
    font-size: 28px;
    color: white;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.product-info {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 9px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}

.info-row span:first-child {
    color: #666;
}

.info-row span:last-child {
    font-weight: bold;
    color: #333;
}

.balance-tip {
    font-size: 12px;
    color: white;
    margin-top: 10px;
}

.balance-tip span {
    color: #2979ff;
    font-weight: bold;
}

.modal-footer {
    padding: 0 20px 20px;
}

/* 顶部搜索栏 */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background: #2a2d32;
    border-bottom: 1px solid #4a4d52;
    position: relative;
}

.top-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar .logo {
    font-size: 24px;
    margin-right: 10px;
}

.search-box {
    flex: 0.8;
    display: flex;
    align-items: center;
    background: #3a3d42;
    border-radius: 22px;
    padding: 8px 15px;
}

.search-icon {
    margin-right: 8px;
    font-size: 14px;
    color: #999;
}

.search-box input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: white;
}

.search-box input::placeholder {
    color: #999;
}

.top-icons-left {
    display: flex;
    align-items: center;
    position: absolute;
    left: 15px;
}

.top-icons-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 15px;
}

.top-icons-right .btc-pledge-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.top-icons .icon {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: white;
}

.notification-icon svg {
    width: 20px;
    height: 20px;
}

/* Banner轮播 */
.banner-slider {
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.banner-item {
    height: 100%;
    width: 100%;
    position: relative;
    display: none;
}

.banner-item.active {
    display: block;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.banner-indicator {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.banner-content h2 {
    font-size: 20px;
    margin: 0 0 5px 0;
    font-weight: bold;
}

.banner-content h3 {
    font-size: 16px;
    margin: 5px 0;
    font-weight: normal;
}

.banner-content p {
    font-size: 12px;
    margin: 10px 0 0 0;
    opacity: 0.9;
}

.banner-indicator {
    position: absolute;
    bottom: 15px;
    right: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 13px;
    font-size: 12px;
}

/* 功能网格 */
.function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #2a2d32;
    padding: 20px 0;
}

.func-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 5px;
    cursor: pointer;
    color: white;
}

.func-item:active {
    background: #3a3d42;
}

.func-icon {
    margin-bottom: 8px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3a3d42 0%, #2a2d32 100%);
    border-radius: 13px;
    color: white;
    border: 1px solid #4a4d52;
}

.func-icon svg {
    display: block;
}

/* 首页功能区图标（图片）统一置白 */
.function-grid .func-icon img {
    filter: brightness(0) invert(1);
}

.func-text {
    font-size: 12px;
    color: white;
    text-align: center;
}

/* 币种区域 */
.coin-section {
    background: #2a2d32;
    margin-top: 10px;
}

.coin-tabs {
    display: flex;
    border-bottom: 1px solid #4a4d52;
    padding: 0 15px;
}

.coin-tab {
    padding: 15px 20px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.coin-tab.active {
    color: #2979ff;
    font-weight: bold;
    border-bottom-color: #2979ff;
}

.coin-header {
    display: flex;
    padding: 12px 15px;
    font-size: 12px;
    color: white;
    background: #3a3d42;
}

.coin-header .col-name {
    flex: 1;
}

.coin-header .col-price {
    width: 100px;
    text-align: right;
}

.coin-header .col-change {
    width: 65px;
    text-align: right;
}

.coin-list {
    padding-bottom: 80px;
}

.coin-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #4a4d52;
    cursor: pointer;
    transition: background-color 0.2s;
    color: white;
}

.coin-item:hover {
    background-color: #3a3d42;
}

.coin-item:active {
    background-color: #4a4d52;
}

.coin-name {
    flex: 1;
    display: flex;
    align-items: center;
}

.coin-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0b90b 0%, #f8d12f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
    color: white;
}

/* 币种图标图片 */
.coin-icon-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.coin-symbol {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.coin-price {
    width: 100px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.coin-change {
    width: 65px;
    text-align: center;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}

.coin-change.positive {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.coin-change.negative {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* 内容区无padding */
.content.no-padding {
    padding: 0;
}

/* 删除重复的底部导航栏样式 - 已合并到上面的统一样式中 */

/* 质押页面顶部导航 */
.pledge-header {
    background: #1f2328;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}

/* 可滚动头部样式 */
.pledge-header.scrollable-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
}

.back-btn {
    font-size: 24px;
    cursor: pointer;
    color: white;
    width: 60px;
}

.pledge-header .header-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.header-icons {
    display: flex;
    width: 60px;
    justify-content: flex-end;
    gap: 15px;
    font-size: 20px;
}


/* 质押统计卡片（规整布局） */
.pledge-stats-card {
    background: white;
    margin: 15px;
    padding: 40px 25px;
    border-radius: 17px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    min-height: 188px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 背景图片 - 绝对定位不占空间 */
.pledge-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    z-index: 1;
}

/* 上半部分 */
.pledge-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* 下半部分 */
.pledge-bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* 左侧数据 */
.pledge-left {
    text-align: left;
}

/* 右侧数据 */
.pledge-right {
    text-align: right;
}

/* 数值 */
.pledge-value {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1;
}

.pledge-value.yellow {
    color: #FCD535;
}

/* 标签 */
.pledge-label {
    font-size: 13px;
    color: white;
    font-weight: 400;
}

/* 产品容器 */
.product-container {
    padding: 0 15px 80px;
}

.product-list-new {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 新产品卡片样式 */
.product-card-new {
    background: white;
    border-radius: 17px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.product-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.product-icon-large {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-image: url('../img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-name-block {
    flex: 1;
}

.product-name-block .name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
    text-align: left;
}

.product-name-block .currency {
    font-size: 11px;
    color: white;
}

.buy-btn-large {
    background: linear-gradient(135deg, #ffaa00 0%, #ff9000 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(255, 170, 0, 0.3);
    flex-shrink: 0;
}

.buy-btn-large:active {
    transform: scale(0.95);
}

/* 产品详情网格 */
.product-details {
    display: flex;
    align-items: center;
}

.product-info-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.detail-label {
    color: white;
    width: 60px;
}

.detail-value {
    font-weight: bold;
    color: #333;
}

.detail-value.highlight {
    color: #ffaa00;
    font-size: 16px;
}

/* 产品图标（右侧装饰） */
.product-decoration {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../img/logo1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* 资产Tab */
.asset-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.asset-tab {
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.asset-tab.active {
    color: #333;
    font-weight: bold;
    border-bottom-color: #f0b90b;
}

/* 资产内容 */
.asset-content {
    display: none;
    padding: 20px;
    min-height: calc(100vh - 120px);
}

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

/* 余额头部 */
.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.balance-label {
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eye-icon, .refresh-icon {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    color: #666;
}

.eye-icon:hover, .refresh-icon:hover {
    color: #333;
}

.eye-icon svg, .refresh-icon svg {
    vertical-align: middle;
}

.settings-icon {
    font-size: 20px;
    cursor: pointer;
}

/* 余额金额 */
.balance-amount {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    font-family: 'Arial', 'Helvetica', sans-serif;
}

/* 功能按钮 */
.action-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.action-icon svg {
    display: block;
}

.action-btn:active .action-icon {
    background: #e8e8e8;
}

.action-text {
    font-size: 13px;
    color: #666;
}

/* 资产标题 */
.asset-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 资产列表 */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.asset-item {
    background: white;
    border-radius: 13px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.asset-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.asset-coin-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #26a17b 0%, #1e8a66 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}

.asset-coin-name {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.asset-values {
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.asset-value-item {
    text-align: center;
}

.asset-value-label {
    font-size: 12px;
    color: white;
    margin-bottom: 5px;
}

.asset-value-number {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    font-family: 'Arial', 'Helvetica', sans-serif;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: white;
    font-size: 14px;
}

/* 质押顶部插图 */
.pledge-banner {
    width: 100%;
    background: #f5f7fa;
    overflow: hidden;
}

.pledge-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 余额数字和单位分别设置 */
.balance-number {
    font-size: 20px;
}

.balance-unit {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin-left: 3px;
}

/* ============ 质押详情页 ============ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #20242b;
    border-bottom: 1px solid #333;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icons span {
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}

.header-icons span:hover {
    color: #333;
}

.header-left, .header-right {
    width: 40px;
    display: flex;
    align-items: center;
}

.header-left svg {
    cursor: pointer;
}

.header-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: #333;
}

/* ============ 关于我们页面样式 ============ */
.about-top-image {
    margin-bottom: 20px;
}

.about-article {
    padding: 20px;
    color: white;
    background: #1f2328;
}

.article-title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.ceo-intro {
    text-align: center;
    margin-bottom: 30px;
}

.ceo-title {
    font-size: 18px;
    font-weight: 600;
    color: #fcd535;
    margin: 0;
}

.welcome-section {
    margin-bottom: 30px;
}

.section-heading {
    font-size: 22px;
    font-weight: bold;
    color: #fcd535;
    margin-bottom: 15px;
}

.intro-text {
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
    margin: 0;
}

.feature-section {
    margin-bottom: 25px;
}

.feature-heading {
    font-size: 18px;
    font-weight: 600;
    color: #fcd535;
    margin-bottom: 10px;
}

.feature-text {
    font-size: 15px;
    line-height: 1.5;
    color: #e0e0e0;
    margin: 0;
}

.conclusion-section {
    margin-top: 30px;
    text-align: center;
}

.conclusion-heading {
    font-size: 20px;
    font-weight: bold;
    color: #fcd535;
    margin-bottom: 15px;
}

.conclusion-text {
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 15px;
}

.tagline {
    font-size: 18px;
    font-weight: bold;
    color: #fcd535;
    margin: 0;
    font-style: italic;
}

/* ============ BTC风格质押页面样式 - 完全模仿资产页面 ============ */

/* 质押页面头部按钮样式 - 模仿资产页面 */
.btc-back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btc-back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.btc-pledge-title {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
}

.btc-pledge-actions {
    display: flex;
    gap: 10px;
}

.btc-help-icon, .btc-history-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btc-help-icon:hover, .btc-history-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 质押页面主要内容区域 */
.btc-pledge-main {
    padding: 20px;
    background: #1f2328;
    min-height: calc(100vh - 200px);
}

/* 质押选项卡样式 */
.pledge-tabs {
    display: flex;
    background: #2a2d32;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 15px;
    width: 100%;
}

.pledge-tab {
    flex: 1;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.pledge-tab.active {
    background: #2979ff;
    color: white;
    box-shadow: 0 2px 4px rgba(41, 121, 255, 0.3);
}

.pledge-tab:hover:not(.active) {
    background: #3a3d42;
    color: #2979ff;
}

/* 重写的质押产品卡片 */
.pledge-product-card {
    background: #1a1b26;
    border-radius: 13px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 120px;
    overflow: visible;
    width: 100%;
}

.pledge-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* 允许内容收缩 */
}

.pledge-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    position: relative;
    flex-shrink: 0; /* 防止右侧区域收缩 */
}

.pledge-product-name {
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pledge-buy-img {
    position: absolute;
    top: -20px;
    right: 0px;
    width: 60px;
    height: 30px;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s;
}

.pledge-buy-img:hover {
    transform: scale(1.1);
}

.pledge-product-icon {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.pledge-card-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pledge-detail-row {
    display: flex;
    align-items: baseline;
    padding: 0px;
    gap: 4px;
}

.pledge-label {
    font-size: 14px;
    color: white;
    min-width: 50px;
}

.pledge-value {
    font-size: 14px;
    color: white;
    font-weight: 500;
    text-align: right;
}

.pledge-value.highlight {
    color: #ffaa00;
    font-weight: bold;
}

/* 产品区域 */
.btc-product-section {
    margin-top: 20px;
}

.btc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.btc-section-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin: 0;
}

.btc-filter-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btc-filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btc-filter-options {
    background: #1a1b26;
    border-radius: 8px;
    margin: 8px 20px;
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
}

.filter-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-option:hover {
    background: #252732;
}

.filter-label {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.filter-desc {
    font-size: 12px;
    color: #999;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btc-product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btc-loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 40px 20px;
    font-size: 16px;
}

/* ============ BTC风格登录注册页面样式 ============ */

/* 删除不再需要的登录头部样式 */

/* 登录注册主要内容区域 */
.btc-login-main {
    padding: 20px;
    background: #1a1a2e;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btc-login-container {
    width: 100%;
    max-width: 400px;
    background: #28283d;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btc-login-header {
    text-align: center;
    margin-bottom: 30px;
}

.btc-login-header h2 {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.btc-login-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* 表单样式 */
.btc-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btc-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btc-input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    position: relative;
}

/* 邀请码输入框特殊样式 - 支持右侧图标 */
#inviteCode {
    padding-right: 50px;
    position: relative;
}

/* 邀请码验证图标 */
.invite-code-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.invite-code-icon.valid {
    color: #4CAF50;
}

.invite-code-icon.invalid {
    color: #f44336;
}

.btc-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btc-input:focus {
    outline: none;
    border-color: #2979ff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.1);
}

.btc-helper-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

/* 按钮样式 */
.btc-login-btn {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btc-login-btn:hover {
    background: linear-gradient(135deg, #1e5ccc 0%, #2979ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(41, 121, 255, 0.3);
}

.btc-login-btn:active {
    transform: translateY(0);
}

/* 链接样式 */
.btc-login-links {
    text-align: center;
    margin-top: 20px;
}

.btc-login-links a {
    color: #2979ff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.btc-login-links a:hover {
    color: #1e5ccc;
}

/* 隐私政策同意条款样式 */
.privacy-agreement {
    margin: 15px 0;
    text-align: center;
}

.agreement-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.privacy-link {
    color: #2979ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: #1e5ccc;
    text-decoration: underline;
}

/* ============ BTC风格资产页面样式 - 完全模仿 ============ */

/* BTC顶部蓝色头部区域 - 精确匹配图片 */
.btc-asset-header {
    background: linear-gradient(135deg, #2979ff 0%, #1e5ccc 100%);
    padding: 32px 20px 40px; /* 减少顶部多余空间 */
    color: white;
    position: relative;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
    margin-top: 0px; /* 移除负边距，让顶部导航可见 */
}

.btc-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.btc-menu-icon, .btc-notification-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: white;
}

.btc-menu-icon:hover, .btc-notification-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.btc-notification-icon {
    color: white;
    background: transparent;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.8); /* 改为1px描边 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btc-menu-img {
    width: 22px;
    height: 16px;
    filter: brightness(0) invert(1); /* 将图片变为白色 */
}

.btc-bell-svg { width: 22px; height: 22px; display: block; }


.btc-asset-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.btc-eye-icon {
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    width: 20px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    border: none; /* 眼睛无描边 */
}

.btc-eye-img { 
    width: 20px; 
    height: 12px; 
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.btc-eye-icon:hover { transform: scale(1.1); }

.btc-balance-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.btc-balance-number {
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 质押页面今日收益特殊样式 - 白色 */
#page-pledge .btc-balance-number,
#pledgeToday,
#pledgeToday.btc-balance-number {
    color: white !important;
}

/* 资产和质押页面背景色 */
#page-user,
#page-pledge {
    background-color: #1f2328 !important;
}

.btc-balance-unit {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.8;
}

.btc-balance-usd {
    font-size: 16px;
    opacity: 0.8;
}

/* 资产显示区域 - 左右布局 */
.btc-asset-display {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* 左侧：总资产区域 */
.btc-total-asset-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 30px; /* 向右移动30px */
}

/* 右侧：资产详情布局 */
.btc-asset-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 120px;
}

.btc-asset-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.btc-asset-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.btc-asset-value {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

/* BTC主要内容区域 - 与底部导航栏同色 */
.btc-main-content {
    background: #1f2328;
    min-height: calc(100vh - 200px);
    padding: 20px;
    position: relative;
}

/* 轮播指示器 */
.btc-carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.btc-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btc-indicator.active {
    background: #2979ff;
    transform: scale(1.2);
}

/* 通知区域 - 叠加效果 */
.btc-notice-section {
    display: flex;
    align-items: center;
    background: rgba(26, 26, 46, 0.4);
    padding: 15px;
    border-radius: 13px;
    margin-bottom: 25px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.btc-speaker-icon {
    font-size: 18px;
    margin-right: 12px;
    color: #ff6b35;
}

.btc-notice-text {
    flex: 1;
    color: white;
    font-size: 14px;
}

.btc-notice-menu {
    cursor: pointer;
    font-size: 16px;
    color: white;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.btc-notice-menu:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 快速操作按钮 */
.btc-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 0;
    margin-bottom: 15px;
}

.btc-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 5px;
    cursor: pointer;
    color: white;
}

.btc-action-item:active {
    background: #3a3d42;
}

.btc-action-icon {
    margin-bottom: 8px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3a3d42 0%, #2a2d32 100%);
    border-radius: 13px;
    color: white;
    border: 1px solid #4a4d52;
}

.btc-action-icon svg {
    display: block;
}

/* 充值按钮图标为白色 */
.btc-action-item:nth-child(1) .btc-action-icon {
    color: white;
}

/* 提现按钮图标为白色 */
.btc-action-item:nth-child(2) .btc-action-icon {
    color: white;
}

/* 抽奖按钮图标为白色 */
.btc-action-item:nth-child(3) .btc-action-icon {
    color: white;
}

/* 签到按钮图标为白色 */
.btc-action-item:nth-child(4) .btc-action-icon {
    color: white;
}

.btc-action-text {
    color: white;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

/* 内容标题 */
.btc-content-sections {
    margin-bottom: 100px;
}

.btc-section-title {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-left: 10px;
    position: relative;
}

.btc-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 2px;
}

/* AI介绍弹窗样式 */
.ai-intro-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.ai-intro-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100000;
    transform: translateZ(0);
    cursor: default;
}

.ai-intro-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
}

.ai-intro-modal .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.ai-intro-modal .modal-close {
    background: #ff4444;
    border: 2px solid #cc0000;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-weight: bold;
    line-height: 1;
    text-shadow: none;
}

.ai-intro-modal .modal-close:hover {
    background: #ff6666;
    color: white;
    border-color: #ff0000;
    transform: scale(1.1);
}

.ai-intro-modal .modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
}

.ai-intro-content {
    line-height: 1.6;
    color: #555;
}

.ai-intro-content h1,
.ai-intro-content h2,
.ai-intro-content h3,
.ai-intro-content h4,
.ai-intro-content h5,
.ai-intro-content h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
}

.ai-intro-content h2 {
    font-size: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
}

.ai-intro-content h3 {
    font-size: 18px;
    color: #007bff;
}

.ai-intro-content p {
    margin-bottom: 15px;
}

.ai-intro-content ul,
.ai-intro-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.ai-intro-content li {
    margin-bottom: 5px;
}

.ai-intro-content strong {
    color: #333;
    font-weight: 600;
}

.ai-intro-modal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

/* AI介绍弹窗响应式样式 */
@media (max-width: 768px) {
    .ai-intro-modal {
        max-width: 95%;
        margin: 10px;
    }
    
    .ai-intro-modal .modal-header {
        padding: 12px 16px;
    }
    
    .ai-intro-modal .modal-title {
        font-size: 16px;
    }
    
    .ai-intro-modal .modal-body {
        padding: 16px;
    }
    
    .ai-intro-modal .modal-footer {
        padding: 12px 16px;
    }
    
    .ai-intro-content h2 {
        font-size: 18px;
    }
    
    .ai-intro-content h3 {
        font-size: 16px;
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .btc-asset-header {
        padding: 50px 15px 30px;
    }
    
    .btc-balance-number {
        font-size: 24px;
    }
    
    .btc-quick-actions {
        gap: 10px;
    }
    
    .btc-action-icon {
        font-size: 20px;
    }
    
    .btc-action-text {
        font-size: 11px;
    }
    
}

/* 原有样式保留 */
.balance-card {
    background: #fff;
    margin: 20px;
    padding: 30px 20px;
    border-radius: 13px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.balance-amount {
    margin-bottom: 0;
}

.balance-number {
    font-size: 32px;
    font-weight: 600;
    color: #333;
}

.balance-unit {
    font-size: 16px;
    color: #666;
    margin-left: 8px;
}

.balance-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-size: 14px;
    color: #666;
}

.detail-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.pledge-detail-content {
    padding: 20px;
}

.detail-section {
    margin-bottom: 30px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.detail-label {
    font-size: 14px;
    color: white;
}

.deposit-link {
    font-size: 14px;
    color: #fcd535;
    text-decoration: none;
    font-weight: 500;
}

.detail-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1b26;
    padding: 15px;
    border-radius: 9px;
}

.detail-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    outline: none;
    color: white;
}

.detail-input::placeholder {
    color: #999;
}

.max-btn {
    background: #fcd535;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
}

/* 固定金额显示样式 */
.detail-amount-display {
    background: #1a1b26;
    padding: 15px;
    border-radius: 9px;
    text-align: center;
}

.fixed-amount {
    font-size: 20px;
    font-weight: 600;
    color: #fcd535;
    margin-bottom: 8px;
}

/* 质押产品进度条样式 */
.pledge-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pledge-progress-bar {
    flex: 1;
    height: 6px;
    background: #2a2d3a;
    border-radius: 3px;
    overflow: hidden;
}

.pledge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fcd535 0%, #ffd700 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pledge-progress-text {
    font-size: 12px;
    color: #fcd535;
    font-weight: 500;
    min-width: 35px;
    text-align: right;
}


.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.detail-info-item {
    text-align: center;
}

.detail-info-label {
    font-size: 12px;
    color: white;
    margin-bottom: 8px;
}

.detail-info-value {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.detail-balance {
    background: #1a1b26;
    padding: 20px;
    border-radius: 9px;
    margin-bottom: 30px;
}

.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: white;
    margin-bottom: 15px;
}

.balance-row:last-child {
    margin-bottom: 0;
}

.balance-row span:last-child {
    color: white;
    font-weight: 500;
}

.confirm-btn {
    width: 100%;
    background: #fcd535;
    border: none;
    padding: 15px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

/* ============ 充币页面 ============ */
.deposit-content {
    padding: 20px;
}

.section-title {
    font-size: 14px;
    color: white;
    margin-bottom: 20px;
}

.currency-list {
    background: #1a1b26;
    border-radius: 9px;
    overflow: hidden;
}

.currency-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    color: white;
}

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

.currency-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #26a69a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.currency-name {
    flex: 1;
    font-size: 16px;
    color: white;
}

.currency-arrow {
    font-size: 24px;
    color: white;
}

/* 充值详情页 */
.deposit-detail-content {
    padding: 20px;
}

.deposit-section {
    margin-bottom: 25px;
}

.deposit-label {
    font-size: 14px;
    color: white;
    margin-bottom: 10px;
}

.deposit-network {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 9px;
    font-size: 16px;
    color: #333;
}

.deposit-address-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 9px;
}

.deposit-address {
    flex: 1;
    font-size: 14px;
    color: #333;
    word-break: break-all;
    line-height: 1.5;
}

.copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666;
}

.deposit-input {
    width: 100%;
    background: #f8f8f8;
    border: none;
    padding: 15px;
    border-radius: 9px;
    font-size: 16px;
    outline: none;
}

.deposit-input::placeholder {
    color: #ccc;
}

.upload-area {
    background: #f8f8f8;
    border: 2px dashed #ddd;
    border-radius: 9px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
}

.upload-icon {
    color: #1f2328;
    margin-bottom: 10px;
}

#uploadPreview {
    margin-top: 15px;
}

#uploadPreview img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.remove-screenshot-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.remove-screenshot-btn:hover {
    background: rgba(0,0,0,0.8);
}

.remove-screenshot-btn:active {
    transform: scale(0.95);
}

/* 二维码页面 */
.qr-content {
    padding: 20px;
}

.qr-code-container {
    background: #1d1e2a;
    padding: 30px;
    border-radius: 9px;
    text-align: center;
    margin-bottom: 30px;
}

.qr-code {
    display: inline-block;
    padding: 20px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 9px;
}

.qr-info-section {
    background: #1d1e2a;
    padding: 20px;
    border-radius: 9px;
}

.qr-label {
    font-size: 14px;
    color: white;
    margin-bottom: 10px;
}

.qr-network {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: white;
}

/* ============ 充值记录页面 ============ */
.history-tabs {
    display: flex;
    background: #1f2329;
    border-bottom: 1px solid #333;
    padding: 0 20px;
}

.history-tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 15px;
    color: #ccc;
    cursor: pointer;
    position: relative;
}

.history-tab.active {
    color: white;
    font-weight: 500;
}

.history-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #fcd535;
    border-radius: 2px 2px 0 0;
}

.history-content {
    padding: 20px;
    min-height: calc(100vh - 160px);
}

.empty-history {
    text-align: center;
    padding: 60px 20px;
}

.empty-history svg {
    width: 200px;
    height: 150px;
    margin-bottom: 20px;
}

.empty-text {
    font-size: 14px;
    color: white;
}

.history-list {
    display: none;
}

.history-list.active {
    display: block;
}

.history-item {
    background: #1a1b26;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 15px;
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.history-currency {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.history-status {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
}

.history-status.pending {
    background: #fff3e0;
    color: #f57c00;
}

.history-status.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.history-status.failed {
    background: #ffebee;
    color: #c62828;
}

.history-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
}

.history-item-row:last-child {
    margin-bottom: 0;
}

.history-item-label {
    color: white;
}

.history-item-value {
    color: white;
}

/* 查看更多按钮样式 */
.load-more-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fcd535 0%, #f4d03f 100%);
    border: none;
    border-radius: 25px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(252, 213, 53, 0.3);
    margin: 0 auto;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.4);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.load-more-text {
    font-weight: 500;
}

.load-more-icon {
    transition: transform 0.3s ease;
}

.load-more-btn:hover .load-more-icon {
    transform: translateY(2px);
}

/* ============ 资产页面快捷功能列表 ============ */
.user-quick-menu {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 15px;
    overflow: hidden;
}

.quick-menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.quick-menu-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.quick-menu-icon {
    margin-right: 12px;
    color: white;
    flex-shrink: 0;
}

.quick-menu-item span {
    flex: 1;
    color: white;
    font-size: 14px;
}

.quick-menu-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    font-weight: 300;
    flex: none !important;
}

/* ============ 合约记录页面样式优化 ============ */
#page-contract-history .history-item {
    padding: 12px;
    margin-bottom: 12px;
}

#page-contract-history .history-item-left {
    flex: 1;
}

#page-contract-history .history-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    margin-left: 12px;
}

#page-contract-history .history-item {
    display: flex;
    justify-content: space-between;
}

#page-contract-history .history-item-header {
    margin-bottom: 8px;
}

#page-contract-history .history-item-symbol {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin-right: 8px;
}

#page-contract-history .history-item-type {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

#page-contract-history .history-item-type.buy {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

#page-contract-history .history-item-type.sell {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
}

#page-contract-history .history-item-details {
    margin-top: 6px;
}

#page-contract-history .history-item-row {
    margin-bottom: 3px;
    font-size: 11px;
}

#page-contract-history .history-item-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

#page-contract-history .history-item-value {
    color: white;
    font-size: 11px;
}

#page-contract-history .history-item-value.win {
    color: #4CAF50;
}

#page-contract-history .history-item-value.lose {
    color: #F44336;
}

#page-contract-history .history-item-value.active {
    color: #FFA726;
}

#page-contract-history .history-item-profit {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

#page-contract-history .history-item-profit.win {
    color: #4CAF50;
}

#page-contract-history .history-item-profit.lose {
    color: #F44336;
}

#page-contract-history .history-item-profit.active {
    color: #FFA726;
}

#page-contract-history .history-item-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============ 提币页面 ============ */
#page-withdraw {
    background-color: #1f2328 !important;
}

#page-withdraw-currency {
    background-color: #1f2328 !important;
}

.withdraw-content {
    padding: 20px;
}

.withdraw-balance {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 20px;
}

.withdraw-balance-amount {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.withdraw-balance-label {
    font-size: 14px;
    color: white;
}

.withdraw-section {
    margin-bottom: 20px;
}

.withdraw-label {
    font-size: 14px;
    color: white;
    margin-bottom: 10px;
}

.withdraw-label .fee-note {
    font-size: 12px;
    color: #999;
    margin-left: 5px;
}

.currency-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1b26;
    padding: 15px;
    border-radius: 9px;
    cursor: pointer;
    color: white;
}

.currency-selected {
    display: flex;
    align-items: center;
    gap: 10px;
}

.withdraw-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1b26;
    padding: 15px;
    border-radius: 9px;
}

.withdraw-input {
    flex: 1;
    background: #1a1b26;
    border: none;
    padding: 15px;
    border-radius: 9px;
    font-size: 16px;
    outline: none;
    width: 100%;
    color: white;
}

.withdraw-input::placeholder {
    color: #999;
}

.withdraw-password-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1b26;
    padding: 15px;
    border-radius: 9px;
}

.withdraw-password-group .withdraw-input {
    padding: 0;
    background: transparent;
}

.toggle-password-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666;
}

/* ============ 底部弹窗 ============ */
.bottom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* PC端底部弹窗定位调整 */
@media (min-width: 768px) {
    .bottom-modal {
        left: 50%;
        transform: translateX(-50%);
        width: 412px;
        max-width: 412px;
    }
}

.bottom-modal.show {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
    cursor: pointer;
}

.modal-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-close-btn {
    background: #ff4444;
    border: 2px solid #cc0000;
    font-size: 20px;
    color: white;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    line-height: 1;
}

.modal-close-btn:hover {
    background: #ff6666;
    border-color: #ff0000;
    transform: scale(1.1);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.modal-body h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 10px 0;
}

.modal-body h4:first-child {
    margin-top: 0;
}

.modal-body h5 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 15px 0 8px 0;
}

.modal-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 10px 0;
}

.modal-body .note {
    background: #fff3e0;
    padding: 10px 15px;
    border-radius: 9px;
    color: #f57c00;
    font-size: 13px;
    margin: 15px 0;
}

.modal-body ol, .modal-body ul {
    margin: 10px 0;
    padding-left: 25px;
}

.modal-body li {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 5px 0;
}

/* ============ 推广中心页面 ============ */
.invite-card {
    background: #1f2328;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 15px;
}

.invite-bg {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    border-radius: 0;
}

.invite-content {
    padding: 20px;
}

.invite-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 0 5px 0;
}

.invite-content p {
    font-size: 13px;
    color: white;
    margin: 0 0 20px 0;
}

.invite-code-section,
.invite-link-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    background: #1a1b26;
    padding: 12px 15px;
    border-radius: 9px;
}

.invite-code-label,
.invite-link-label {
    font-size: 14px;
    color: #ccc;
    white-space: nowrap;
}

.invite-code-value {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.invite-link-value {
    flex: 1;
    font-size: 12px;
    color: #ccc;
    word-break: break-all;
}

.copy-code-btn,
.copy-link-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666;
}

/* 佣金统计网格 */
.commission-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
    background: #1f2328;
    margin-bottom: 15px;
}

.commission-stat-item {
    text-align: center;
    padding: 20px 15px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.commission-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    font-weight: 500;
}

.commission-stat-value {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.team-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px;
    background: #1f2328;
    margin-bottom: 15px;
}

.team-stat-item {
    text-align: center;
    padding: 15px;
    background: #1a1b26;
    border-radius: 9px;
}

.team-stat-label {
    font-size: 13px;
    color: white;
    margin-bottom: 8px;
}

.team-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: white;
}

.team-total {
    background: #1f2328;
    padding: 20px;
    margin-bottom: 15px;
}

.team-total-label {
    font-size: 14px;
    color: white;
    margin-bottom: 10px;
}

.team-total-value {
    font-size: 28px;
    font-weight: 600;
    color: white;
}

.team-total-section {
    background: #1f2328;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.team-total-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.team-total-label {
    font-size: 16px;
    color: white;
    font-weight: 500;
}

.team-total-value {
    font-size: 32px;
    font-weight: 700;
    color: #00d4aa;
    margin-top: -5px;
}

.team-section {
    background: #1f2328;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
}

.team-section-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
}

.team-tabs {
    display: flex;
    gap: 10px;
}

.team-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #1a1b26;
    border-radius: 6px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s;
}

.team-tab.active {
    background: #fcd535;
    color: #333;
    font-weight: 600;
}

.team-list-header {
    display: flex;
    background: #1f2328;
    padding: 15px 20px;
    font-size: 13px;
    color: white;
    border-bottom: 1px solid #333;
}

.th {
    text-align: center;
}

.th-1 {
    flex: 1;
}

.th-2 {
    flex: 1;
}

.th-3 {
    flex: 1;
}

.team-list {
    background: #1f2328;
    min-height: 200px;
}

.team-list-item {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    font-size: 14px;
    color: white;
}

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

.team-list-item > div {
    text-align: center;
}

.td-1 {
    flex: 1;
}

.td-2 {
    flex: 1;
    color: #fcd535;
    font-weight: 600;
}

.td-3 {
    flex: 1;
    font-size: 12px;
    color: white;
}

/* ==================== 抽屉菜单样式 ==================== */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* PC端抽屉菜单完全隐藏 */
@media (min-width: 768px) {
    .drawer {
        display: none !important;
    }
    
    .drawer.open {
        display: block !important;
        left: calc(50% - 206px);
        width: 412px;
        max-width: 412px;
    }
}

.drawer.open {
    pointer-events: auto;
}

.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.drawer.open .drawer-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #232430;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.drawer.open .drawer-content {
    transform: translateX(0);
}

/* 用户信息区域 */
.drawer-user-info {
    position: relative;
    background: #1a1b26;
    padding: 50px 20px 25px;
    color: #fff;
}

.drawer-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 用户主要信息区域（横向布局） */
.drawer-user-main {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* 头像和VIP徽章 */
.drawer-user-avatar-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.drawer-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.vip-badge-new {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 用户详细信息 */
.drawer-user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.drawer-username {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-uid {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.uid-label {
    opacity: 0.8;
}

.uid-value {
    font-weight: 500;
}

.copy-btn-small {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
    margin-left: 2px;
}

.copy-btn-small:hover {
    opacity: 1;
    transform: scale(1.1);
}

.drawer-credit {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
    padding: 5px 10px;
    border-radius: 13px;
    width: fit-content;
}

.credit-icon {
    font-size: 14px;
}

.credit-label {
    opacity: 0.9;
}

.credit-value {
    font-weight: 600;
    color: #ffd700;
}

/* 菜单列表 */
.drawer-menu {
    padding: 10px 0;
}

.drawer-menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #333;
}

.drawer-menu-item:hover {
    background: #2a2d32;
}

.drawer-menu-item:active {
    background: #1f2328;
}

.drawer-menu-icon {
    flex-shrink: 0;
    margin-right: 15px;
    color: #fff;
}

.drawer-menu-item > span:nth-child(2) {
    flex: 1;
    font-size: 15px;
}

.drawer-menu-arrow {
    color: white;
    font-size: 18px;
}


/* ==================== 关于我们页面样式 ==================== */
.about-content {
    padding: 0;
}

.about-section {
    background: #1f2328;
}

.about-main-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 25px 20px;
    margin: 0;
    border-bottom: 1px solid #333;
}

.about-intro {
    padding: 20px;
    background: #2a2d32;
    border-left: 4px solid #667eea;
    margin: 20px;
    border-radius: 4px;
}

.about-intro p {
    margin: 0;
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
}

.about-block {
    padding: 20px;
    border-bottom: 1px solid #333;
}

.about-block:last-child {
    border-bottom: none;
}

.about-block h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #667eea;
    display: inline-block;
}

.about-block h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 15px 0 10px 0;
    padding-left: 10px;
    border-left: 3px solid #667eea;
}

.about-block p {
    font-size: 14px;
    color: #fff;
    line-height: 1.8;
    margin: 10px 0;
    text-align: justify;
}

.about-list {
    margin: 10px 0;
    padding-left: 20px;
}

.about-list li {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 8px 0;
    list-style: none;
    position: relative;
    padding-left: 15px;
}

.about-list li::before {
    content: "•";
    color: #667eea;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
}

.about-list li strong {
    color: #333;
    font-weight: 600;
}

.contact-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 9px;
    margin-top: 10px;
}

.contact-info p {
    margin: 8px 0;
    font-size: 14px;
    color: #555;
}

.contact-info strong {
    color: #333;
    font-weight: 600;
}

.about-footer {
    padding: 20px;
    background: #f8f9fa;
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.about-version {
    font-size: 13px;
    color: white;
    margin: 5px 0;
}

.about-update {
    font-size: 12px;
    color: #bbb;
    margin: 5px 0;
}

.continue-text {
    text-align: center;
    font-size: 13px;
    color: white;
    font-style: italic;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 9px;
    margin: 20px 0;
}

/* ==================== 帮助中心样式 ==================== */
.help-list-container {
    padding: 0;
}

.help-category {
    margin-bottom: 20px;
}

.help-category-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 15px 20px;
    margin: 0;
    background: #1a1b26;
    border-left: 4px solid #667eea;
}

.help-article-list {
    background: #1a1b26;
}

.help-article-item {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}

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

.help-article-item:active {
    background: #2a2d32;
}

.help-article-title {
    font-size: 15px;
    color: #fff;
    flex: 1;
    text-decoration: underline;
}

.help-article-arrow {
    color: white;
    font-size: 14px;
    margin-left: 10px;
}

.help-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: white;
    font-size: 14px;
}

/* 帮助详情页样式 */
.help-detail-container {
    background: #1a1b26;
    padding: 20px;
}

.help-detail-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.help-detail-meta {
    font-size: 13px;
    color: white;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.help-detail-content {
    font-size: 15px;
    color: #fff;
    line-height: 1.8;
}

.help-detail-content p {
    margin: 15px 0;
    text-indent: 0;
}

.help-detail-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 20px 0 10px 0;
}

.help-detail-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 15px 0 10px 0;
}

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

.help-detail-content li {
    margin: 8px 0;
    line-height: 1.6;
}

.help-detail-content strong {
    font-weight: 600;
    color: #fff;
}

.help-detail-content code {
    background: #333;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 14px;
    color: #e83e8c;
}

/* ==================== 实名认证样式 ==================== */
/* 选择页样式 */
.kyc-select-container {
    padding: 20px;
}

.kyc-form-group {
    margin-bottom: 25px;
}

.kyc-label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.kyc-select-box {
    background: #f5f5f5;
    border-radius: 9px;
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.kyc-select-box:active {
    background: #e8e8e8;
}

.kyc-select-flag {
    font-size: 24px;
    margin-right: 12px;
}

.kyc-select-text {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.kyc-select-arrow {
    font-size: 12px;
    color: white;
}

.kyc-doc-type-box {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 9px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s;
    position: relative;
}

.kyc-doc-type-box.active {
    background: #fffbea;
    border-color: #FCD535;
}

.kyc-doc-icon {
    font-size: 24px;
    margin-right: 12px;
}

.kyc-doc-name {
    flex: 1;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.kyc-radio-check {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
}

.kyc-doc-type-box.active .kyc-radio-check {
    border-color: #FCD535;
    background: #FCD535;
}

.kyc-doc-type-box.active .kyc-radio-check::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

.kyc-continue-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.kyc-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.4);
}

.kyc-continue-btn:active {
    transform: translateY(0);
}

/* 上传页样式 */
.kyc-upload-container {
    padding: 20px;
}

.kyc-input {
    width: 100%;
    padding: 12px 15px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: all 0.2s;
}

.kyc-input:focus {
    background: #fff;
    border-color: #FCD535;
}

.kyc-input::placeholder {
    color: white;
}

.kyc-upload-section {
    margin-bottom: 15px;
}

.kyc-upload-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.kyc-upload-box {
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 9px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.kyc-upload-box:hover {
    border-color: #FCD535;
    background: #fffbea;
}

.kyc-upload-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.kyc-upload-text {
    font-size: 14px;
    color: #666;
}

.kyc-image-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f9fa;
    padding: 5px;
}

.kyc-upload-box.has-image {
    padding: 0;
    border-style: solid;
    border-color: #FCD535;
}

.kyc-submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 30px;
}

.kyc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.4);
}

.kyc-submit-btn:active {
    transform: translateY(0);
}

/* 成功页样式 */
.kyc-success-container {
    text-align: center;
    padding: 60px 20px;
}

.kyc-success-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.kyc-success-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 15px 0;
}

.kyc-success-text {
    font-size: 16px;
    color: #666;
    margin: 0 0 10px 0;
}

.kyc-success-tip {
    font-size: 14px;
    color: white;
    margin: 0 0 40px 0;
}

.kyc-back-btn {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.kyc-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.4);
}

.kyc-back-btn:active {
    transform: translateY(0);
}

/* 国家选择弹窗样式 */
.country-search-box {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.country-search-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    font-size: 14px;
    outline: none;
}

.country-search-input:focus {
    border-color: #FCD535;
}

.country-list {
    max-height: 400px;
    overflow-y: auto;
}

.country-item {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}

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

.country-item:active {
    background: #f8f9fa;
}

.country-flag {
    font-size: 24px;
    margin-right: 12px;
}

.country-name {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.country-check {
    color: #FCD535;
    font-size: 20px;
    visibility: hidden;
}

.country-item.selected .country-check {
    visibility: visible;
}

/* 设置登录密码页面样式 */
.password-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 500;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #32363b;
    border-radius: 9px;
    padding: 12px 15px;
}

.input-icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: white;
}

.form-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #fff;
    outline: none;
}

.form-input::placeholder {
    color: #999;
}

.eye-icon {
    flex-shrink: 0;
    margin-left: 10px;
    color: white;
    cursor: pointer;
    transition: color 0.3s;
}

.eye-icon:hover {
    color: #666;
}

.eye-icon:active {
    transform: scale(0.95);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 30px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

/* 暗色模式适配 */
.dark-mode .form-label {
    color: #e0e0e0;
}

.dark-mode .password-input-wrapper {
    background: #2a2a2a;
}

.dark-mode .form-input {
    color: #e0e0e0;
}

.dark-mode .form-input::placeholder {
    color: #666;
}

.dark-mode .input-icon,
.dark-mode .eye-icon {
    color: #666;
}

.dark-mode .eye-icon:hover {
    color: white;
}

.dark-mode .submit-btn {
    color: #1a1a1a;
}

.form-tip {
    font-size: 12px;
    color: white;
    margin-top: 8px;
    line-height: 1.5;
}

.dark-mode .form-tip {
    color: #666;
}

/* ==================== 通知中心样式 ==================== */
.notification-icon {
    position: relative;
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.notification-tabs {
    display: flex;
    padding: 15px;
    gap: 10px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    white-space: nowrap;
}

.notification-tab {
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.notification-tab.active {
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    color: #333;
    font-weight: 600;
}

.notification-list {
    padding: 10px;
    background: #1a1b26;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: #fff;
    border-radius: 11px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.notification-item.unread {
    background: #fffdf0;
    border-left-color: #FCD535;
}

.notification-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.notification-icon-system {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.notification-icon-transaction {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.notification-icon-promotion {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.notification-icon-security {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-time {
    font-size: 12px;
    color: white;
}

.notification-empty {
    text-align: center;
    padding: 60px 20px;
    color: white;
}

.notification-empty svg {
    margin-bottom: 20px;
}

.notification-empty p {
    font-size: 14px;
}

/* 通知详情 */
.notification-detail {
    padding: 20px;
}

.notification-detail-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.notification-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    line-height: 1.5;
}

.notification-detail-time {
    font-size: 13px;
    color: white;
}

.notification-detail-content {
    font-size: 15px;
    color: white;
    line-height: 1.8;
}

.notification-detail-content p {
    margin-bottom: 15px;
}

.notification-detail-content strong {
    font-weight: 600;
    color: white;
}

.notification-detail-content a {
    color: #FCD535;
    text-decoration: none;
}

/* 暗色模式适配 */
.dark-mode .notification-tabs {
    background: #1a1a1a;
    border-bottom-color: #333;
}

.dark-mode .notification-tab {
    color: white;
}

.dark-mode .notification-tab.active {
    color: #1a1a1a;
}

.dark-mode .notification-item {
    background: #2a2a2a;
}

.dark-mode .notification-item.unread {
    background: #3a3a1a;
}

.dark-mode .notification-title {
    color: #e0e0e0;
}

.dark-mode .notification-text {
    color: white;
}

.dark-mode .notification-time {
    color: #666;
}

.dark-mode .notification-empty {
    color: #666;
}

.dark-mode .notification-detail {
    background: #1a1a1a;
}

.dark-mode .notification-detail-header {
    border-bottom-color: #333;
}

.dark-mode .notification-detail-title {
    color: white;
}

.dark-mode .notification-detail-time {
    color: white;
}

.dark-mode .notification-detail-content {
    color: white;
}

.dark-mode .notification-detail-content strong {
    color: white;
}

/* ==================== 行情页面样式 ==================== */
/* 搜索框 */
.market-search-box {
    padding: 15px 20px;
    background: #2a2d32;
    border-bottom: 1px solid #4a4d52;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-icon {
    font-size: 18px;
    color: white;
}

.market-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: white;
    background: transparent;
}

.market-search-input::placeholder {
    color: #ccc;
}

/* 标签栏 */
.market-tabs {
    display: flex;
    background: #2a2d32;
    border-bottom: 1px solid #4a4d52;
    padding: 0 20px;
}

.market-tab {
    flex: 1;
    padding: 12px 5px;
    text-align: center;
    font-size: 14px;
    color: white;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    white-space: nowrap;
}

.market-tab.active {
    color: #FCD535;
    font-weight: 600;
}

.market-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border-radius: 2px;
}

/* 表头 */
.market-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: #2a2d32;
    font-size: 13px;
    color: white;
    font-weight: 500;
}

.market-col-name {
    flex: 2;
    cursor: pointer;
    user-select: none;
}

.market-col-price {
    flex: 1.5;
    text-align: right;
    cursor: pointer;
    user-select: none;
}

.market-col-change {
    flex: 1.2;
    text-align: right;
    cursor: pointer;
    user-select: none;
}

.sort-arrow {
    font-size: 11px;
    margin-left: 3px;
    color: #ccc;
}

/* 币种列表 */
.market-coin-list {
    flex: 1;
    overflow-y: auto;
    background: #2a2d32;
}

.market-coin-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #4a4d52;
    cursor: pointer;
    transition: background 0.2s;
    color: white;
}

.market-coin-item:active {
    background: #3a3d42;
}

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

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

.market-coin-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.market-coin-symbol {
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.market-coin-fullname {
    font-size: 12px;
    color: white;
}

.market-coin-price {
    flex: 1.5;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.market-coin-change {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.market-coin-change.positive {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.market-coin-change.negative {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.market-favorite {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s;
    margin-left: 8px;
}

.market-favorite:active {
    transform: scale(1.2);
}

.market-favorite.active {
    opacity: 1;
}

/* 加载和空状态 */
.market-loading,
.market-empty {
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
    color: white;
}

.market-empty {
    line-height: 1.8;
}

/* 响应式调整 */
@media (max-width: 375px) {
    .market-tab {
        font-size: 13px;
        padding: 10px 3px;
    }
    
    .market-coin-symbol {
        font-size: 14px;
    }
    
    .market-coin-price {
        font-size: 14px;
    }
    
    .market-coin-change {
        font-size: 13px;
    }
}

/* ==================== 币种详情页样式 ==================== */
.coin-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #1f2328;
    border-bottom: 1px solid #333;
    position: relative;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.coin-detail-title {
    flex: 1;
    text-align: center;
}

.coin-detail-symbol {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.coin-detail-content {
    padding: 20px;
    background: #2a2d32;
    min-height: calc(100vh - 60px);
    color: white;
}

/* 顶部价格区域 - 左右布局 */
.coin-detail-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* 左侧价格信息 */
.coin-price-left {
    flex: 1;
}

.coin-current-price {
    font-size: 36px;
    font-weight: 700;
    color: #2ecc71;
    line-height: 1.2;
    margin-bottom: 8px;
}

.coin-price-change {
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
}

.coin-price-change.positive {
    color: #2ecc71;
}

.coin-price-change.negative {
    color: #e74c3c;
}

/* 右侧价格统计 */
.coin-price-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.price-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coin-price-stats .stat-value {
    text-align: left;
}

/* 确保 高/低/量 标签纵向列完美对齐（以"高"为准） */
.coin-price-stats .stat-label {
    width: 48px;
    min-width: 48px;
    text-align: left;
}

.stat-label {
    font-size: 13px;
    color: white;
    width: 40px;
    min-width: 40px;
    text-align: left;
}

.stat-value {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: right;
    min-width: 80px;
}

/* 时间周期选择 */
.chart-timeframe {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.timeframe-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
    text-align: center;
}

.timeframe-btn.active {
    color: #FCD535;
    font-weight: 600;
}

/* K线图容器 */
.chart-container {
    width: 100%;
    height: 350px;
    margin-bottom: 20px;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 交易按钮 */
.trade-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.trade-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.buy-btn {
    background: #2ecc71;
    color: #fff;
}

.buy-btn:active {
    background: #27ae60;
    transform: scale(0.98);
}

.sell-btn {
    background: #e74c3c;
    color: #fff;
}

.sell-btn:active {
    background: #c0392b;
    transform: scale(0.98);
}

/* 响应式调整 */
@media (max-width: 375px) {
    .coin-current-price {
        font-size: 32px;
    }
    
    .coin-price-change {
        font-size: 14px;
    }
    
    .stat-label {
        font-size: 12px;
        text-align: left;
    }
    
    .stat-value {
        font-size: 13px;
        min-width: 70px;
    }
    
    .chart-container {
        height: 320px;
    }
    
    .timeframe-btn {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* ==================== 交易弹窗样式 ==================== */
.trade-modal-body {
    padding: 20px;
}

/* 标题样式 */
.trade-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

#tradeModalSymbol {
    color: #333;
    font-weight: 600;
}

.trade-type-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.trade-type-tag.buy {
    background: #2ecc71;
    color: #fff;
}

.trade-type-tag.sell {
    background: #e74c3c;
    color: #fff;
}

.trade-section {
    margin-bottom: 25px;
}

.trade-section-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 500;
}

/* 周期选择 */
.trade-periods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.trade-period-item {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 9px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.trade-period-item.active {
    background: #FFF9E6;
    border-color: #FCD535;
}

.period-time {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.period-rate {
    font-size: 13px;
    color: #666;
}

.trade-period-item.active .period-rate {
    color: #F7B731;
    font-weight: 600;
}

/* 金额输入 */
.trade-amount-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    transition: border 0.3s;
}

.trade-amount-input:focus {
    border-color: #FCD535;
}

.trade-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.quick-amount-btn {
    padding: 10px 8px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.quick-amount-btn:active {
    background: #FCD535;
    border-color: #FCD535;
    color: #333;
}

.trade-balance {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 13px;
    color: white;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trade-balance .balance-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trade-balance .balance-label {
    color: #888;
    font-size: 12px;
}

.trade-balance .balance-amount {
    color: #4CAF50;
    font-weight: 600;
    font-size: 14px;
    background: rgba(76, 175, 80, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.trade-balance .balance-unit {
    color: #4CAF50;
    font-weight: 500;
    font-size: 12px;
}

.trade-confirm-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.trade-confirm-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* ==================== 资金密码弹窗样式 ==================== */
.password-modal-container {
    max-height: 60vh;
}

.password-modal-body {
    padding: 30px 20px;
}

.password-input-container {
    margin-bottom: 30px;
}

.password-input {
    width: 100%;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 9px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 6px;
    outline: none;
    transition: border 0.3s;
}

.password-input:focus {
    border-color: #FCD535;
}

.password-confirm-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #FCD535 0%, #F7B731 100%);
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.password-confirm-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* ==================== 添加自选页面样式 ==================== */
#page-add-favorite {
    background-color: #1f2328 !important;
}

.add-favorite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #1f2328;
    border-bottom: 1px solid #333;
    position: relative;
    z-index: 1000;
}

.add-favorite-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.complete-btn {
    font-size: 16px;
    color: #FCD535;
    font-weight: 500;
    cursor: pointer;
}

.add-favorite-search {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #1f2328;
    border-bottom: 1px solid #333;
}

.add-favorite-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 8px 12px;
    background: #1a1b26;
    color: white;
    border-radius: 9px;
    margin-left: 8px;
}

.add-favorite-search-input::placeholder {
    color: #999;
}

.add-favorite-coin-list {
    background: #1f2328;
}

.add-favorite-coin-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
}

.add-favorite-coin-info {
    flex: 1;
    display: flex;
    align-items: center;
}

.add-favorite-coin-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
}

.add-favorite-coin-symbol {
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.add-favorite-coin-price {
    font-size: 16px;
    font-weight: 500;
    color: white;
    margin-right: 12px;
    min-width: 80px;
    text-align: right;
}

.add-favorite-coin-change {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 12px;
    min-width: 60px;
    text-align: center;
}

.add-favorite-coin-change.positive {
    background: #e8f5e8;
    color: #27ae60;
}

.add-favorite-coin-change.negative {
    background: #ffebee;
    color: #e74c3c;
}

.add-favorite-star {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s;
}

.add-favorite-star:active {
    transform: scale(1.2);
}

.add-favorite-star.favorited {
    opacity: 1;
    color: #FCD535;
}

.add-favorite-loading {
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
    color: white;
}

.add-favorite-btn {
    background: #FCD535;
    color: #333;
    border: none;
    padding: 12px 24px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 16px;
    transition: all 0.2s;
}

.add-favorite-btn:hover {
    background: #e6c02e;
}

.add-favorite-btn:active {
    transform: scale(0.98);
}

/* ==================== 跟单页面样式 ==================== */
.follow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    position: relative;
}

.follow-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
}

.header-icon {
    font-size: 18px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    margin-left: auto;
}

.header-icon:hover {
    color: #333;
}


.follow-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    gap: 30px;
}

.follow-sort-option {
    color: white;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
    padding: 8px 0;
    position: relative;
}

.follow-sort-option:hover {
    color: #333;
}

.follow-sort-option.active {
    color: #FCD535;
    font-weight: 600;
}

.follow-sort-option.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #FCD535;
}

.follow-trader-list {
    background: #f5f5f5;
    min-height: calc(100vh - 200px);
}

.follow-trader-card {
    background: white;
    margin: 15px;
    border-radius: 13px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trader-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.trader-avatar {
    margin-right: 15px;
}

.avatar-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.trader-info {
    flex: 1;
}

.trader-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.trader-badges {
    display: flex;
    gap: 8px;
}

.level-badge {
    background: #27ae60;
    color: white;
    padding: 4px 8px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 500;
}

.direction-badge {
    padding: 4px 8px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 500;
}

.direction-badge.long {
    background: #e8f5e8;
    color: #27ae60;
}

.direction-badge.short {
    background: #ffebee;
    color: #e74c3c;
}

.follow-btn {
    background: #f5f5f5;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.follow-btn.following {
    background: #FCD535;
    color: #333;
}

.follow-btn:hover {
    opacity: 0.8;
}

.trader-performance {
    color: #333;
}

.performance-title {
    font-size: 14px;
    color: white;
    margin-bottom: 12px;
}

.performance-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.performance-numbers {
    flex: 1;
}

.yield-percent {
    font-size: 24px;
    font-weight: 700;
    color: #27ae60;
    margin-bottom: 4px;
}

.yield-amount {
    font-size: 16px;
    color: #27ae60;
    font-weight: 500;
}

.performance-chart {
    width: 80px;
    height: 40px;
}

.mini-chart {
    width: 100%;
    height: 100%;
}

.trader-stats {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: white;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 14px;
    color: white;
    font-weight: 500;
}

.follow-loading {
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
    color: white;
}
/* 关于页面样式 */
.about-content {
    padding: 20px;
    background: #1a1a2e;
    min-height: calc(100vh - 120px);
    color: white;
}

.about-section {
    margin-bottom: 30px;
}

.about-logo {
    text-align: center;
    margin-bottom: 20px;
}

.about-title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
}

.about-description {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    border-bottom: 2px solid #2979ff;
    padding-bottom: 10px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.feature-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 0 8px 0;
}

.feature-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.contact-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.contact-value {
    font-size: 16px;
    color: white;
    font-weight: 500;
}

.version-info {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0;
}

/* 市场趋势卡片 */
.trend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 15px;
}

.trend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #2a2a2a;
    border-radius: 8px;
    border-left: 4px solid #555;
}

.trend-item.win {
    border-left-color: #27ae60;
}

.trend-item.lose {
    border-left-color: #e74c3c;
}

.trend-symbol {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.symbol-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.trade-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.trade-direction {
    font-size: 12px;
    color: #ccc;
}

.trade-amount {
    font-size: 12px;
    color: #999;
}

.trend-prices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.trend-price {
    font-size: 12px;
    color: #ccc;
}

.trend-price.entry {
    font-weight: bold;
}

.trend-result {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: bold;
}

.trend-result.win {
    color: #27ae60;
}

.trend-result.lose {
    color: #e74c3c;
}

.trend-icon {
    font-size: 16px;
}

.trend-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px;
}

/* 市场趋势卡片 */
.trend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 15px;
}

.trend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #2a2a2a;
    border-radius: 8px;
    border-left: 4px solid #555;
}

.trend-item.win {
    border-left-color: #27ae60;
}

.trend-item.lose {
    border-left-color: #e74c3c;
}

.trend-symbol {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.symbol-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.trade-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.trade-direction {
    font-size: 12px;
    color: #ccc;
}

.trade-amount {
    font-size: 12px;
    color: #999;
}

.trend-prices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.trend-price {
    font-size: 12px;
    color: #ccc;
}

.trend-price.entry {
    font-weight: bold;
}

.trend-result {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: bold;
}

.trend-result.win {
    color: #27ae60;
}

.trend-result.lose {
    color: #e74c3c;
}

.trend-icon {
    font-size: 16px;
}

.trend-empty {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px;
}


/* 结算中状态样式 */
.trend-item.pending {
    border-left-color: #f39c12;
}

.trend-result.pending {
    color: #f39c12;
}

.trend-price.pending {
    color: #f39c12;
    font-weight: bold;
}

/* 资产界面质押产品列表 */
.pledge-product-list {
    margin: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pledge-product-list .pledge-product-card {
    background: #1a1b26;
    border-radius: 13px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 120px;
    overflow: visible;
    width: 100%;
}

.pledge-product-list .pledge-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.pledge-product-list .pledge-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    position: relative;
    flex-shrink: 0;
}

.pledge-product-list .pledge-product-name {
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pledge-product-list .pledge-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pledge-product-list .pledge-detail-row {
    display: flex;
    align-items: baseline;
    padding: 0;
    gap: 4px; /* match pledge page spacing */
}

.pledge-product-list .pledge-label {
    color: #999;
    margin-right: 8px;
    min-width: 50px; /* align with pledge page */
    text-align: left;
}

.pledge-product-list .pledge-value {
    color: #fff;
    font-weight: 500;
    text-align: right; /* match pledge page alignment */
}

.pledge-product-list .pledge-value.highlight {
    color: #FCD535;
    font-weight: bold;
}

.pledge-product-list .pledge-product-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.pledge-product-list .pledge-buy-img {
    position: absolute;
    top: -20px;
    right: 0px;
    width: 60px;
    height: 30px;
    cursor: pointer;
    transition: transform 0.2s;
}

.pledge-product-list .pledge-buy-img:hover {
    transform: scale(1.05);
}

/* 锁定图标样式 */
.lock-icon {
    position: absolute;
    top: -120px;
    right: 0px;
    width: 30px;
    height: 30px;
    fill: #FCD535;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 5;
}

.lock-icon:hover {
    transform: scale(1.05);
}

/* ============ 语言选择器 ============ */
.language-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.language-selector-modal {
    background: #2b2f36;
    border-radius: 16px;
    width: 90%;
    max-width: 350px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.language-selector-header {
    padding: 20px;
    border-bottom: 1px solid #3a3f47;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.language-selector-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.language-close-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s;
}

.language-close-btn:hover {
    color: #fff;
}

.language-list {
    max-height: 400px;
    overflow-y: auto;
}

.language-item {
    padding: 16px 20px;
    border-bottom: 1px solid #3a3f47;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
}

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

.language-item:hover {
    background: #353a42;
}

.language-item.active {
    background: #2a5298;
}

.language-item span {
    font-size: 16px;
    color: #fff;
}

.language-item.active span {
    font-weight: 600;
}

/* PC端语言选择器调整 */
@media (min-width: 768px) {
    .language-selector-overlay {
        left: 50%;
        transform: translateX(-50%);
        max-width: 412px;
    }
}

/* ==================== 充值/提现记录样式 ==================== */
.history-container {
    padding: 16px;
    padding-bottom: 80px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.history-amount {
    font-size: 20px;
    font-weight: 600;
    color: #4ade80;
}

.history-amount.withdraw {
    color: #f87171;
}

.history-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.status-processing {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.status-confirmed,
.status-completed {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.status-failed,
.status-rejected {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.history-item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.history-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.history-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

.history-txid,
.history-address {
    font-family: monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.history-reject {
    color: #f87171;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 400px;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
}