.hero {
    background: linear-gradient(145deg, #ff8845 0%, #ff4f29 100%);
    color: #fff;
    padding: 24px 10vw 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
}

.hero-info {
    flex: 1 1 320px;
}

    .hero-info h1 {
        margin: 0 0 12px;
        font-size: 32px;
    }

    .hero-info p {
        margin: 6px 0;
        font-size: 16px;
    }

.hero-counter {
    flex: 0 0 300px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

    .hero-counter h2 {
        margin: 0;
        font-size: 22px;
    }

    .hero-counter .value {
        font-size: 33px;
        font-weight: 600;
        margin: 40px 0;
    }

.section-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 30px;
    box-shadow: 0 16px 40px rgba(31, 45, 61, 0.08);
}

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

    .section-header h2 {
        margin: 0;
        font-size: 22px;
    }

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.history-item {
    border: 1px solid #e6ebf5;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    color: #666;
    background: #fafbff;
    transition: transform 0.2s ease;
}

    .history-item:hover {
        transform: translateY(-4px);
    }

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.news-card {
    border: 1px solid #ecf0f6;
    border-radius: 12px;
    padding: 16px 18px;
    background: #f9fbff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .news-card small {
        color: #97a0b2;
    }

    .news-card h3 {
        margin: 0;
        font-size: 18px;
        color: #303850;
    }

    .news-card p {
        margin: 0;
        color: #5c6578;
        line-height: 1.6;
        flex: 1;
    }

    .news-card a {
        color: #ff6b2c;
        font-weight: 600;
        margin-top: 6px;
    }

.top20-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.top20-item {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
}

.rank-tag {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: #fff;
}

.timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.qr-box {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
}

.qr-card {
    text-align: center;
}

    .qr-card img {
        width: 160px;
        height: 160px;
        border-radius: 12px;
        border: 6px solid #f5f5f5;
    }

.submit-tip {
    color: #f56c6c;
    margin-top: 12px;
    font-size: 13px;
}

.mobile-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

footer {
    padding: 24px 0 40px;
    text-align: center;
    color: #9aa5b8;
    font-size: 13px;
}

/* 域名容器样式 */
.domain-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.domain-text {
    font-weight: bold;
    color: #409EFF;
    cursor: pointer;
}

/* 复制图标样式 */
.copy-icon-container {
    margin-left: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    vertical-align: middle;
    padding: 2px;
}

.copy-icon-container:hover svg {
    fill: #409EFF;
}

.copy-icon-container svg {
    transition: fill 0.2s ease;
}

/* 当鼠标悬停在域名容器上时显示复制图标 */
.domain-container:hover .copy-icon-container {
    opacity: 1;
}

/* 修复表格表头对齐问题 - 确保排序图标与文字在同一水平线 */
.el-table th {
    vertical-align: middle !important;
}

.el-table th > .cell {
    display: inline-flex !important;
    align-items: center !important;
}

/* 移除排序图标容器的边框，但保持Element UI默认的图标样式 */
.el-table .caret-wrapper {
    border: none !important;
    outline: none !important;
}

@media (max-width: 960px) {
    .hero {
        padding: 24px 5vw 40px;
    }
 
    .hero-counter {
        flex: 1 1 100%;
    }
}