html, body {
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 禁止水平滚动 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    touch-action: pan-y; /* 只允许垂直滑动 */
    background-color: #f4f4f4;
    a {
        text-decoration: none;
    }
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    padding: 5px;
}

.nav-bar a {
    flex: 1;
    text-align: center;
    padding: 2px;
    color: #333;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    margin-right: 0;
}

.nav-bar a:last-child {
    margin-right: 0;
}

.nav-bar .active {
    color: #ff5722;
    font-weight: 600;
    border-bottom: 2px solid #ff5722;
}

/* 指标选择区 */
.indicator-section {
    background: #fff;
    margin: 5px 5px 0 5px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 5px 10px 10px 10px;
}

.indicator-title {
    font-size: 18px;
    color: #222;
    font-weight: 600;
    margin-bottom: 10px;
}

.indicator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
    margin-bottom: 16px;
}

.indicator-grid a {
    text-align: center;
    background: #fff;
    border: 1px solid #ff5722;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    padding: 5px 0;
    transition: background 0.2s, color 0.2s;
}

.period-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
    margin-bottom: 16px;
}

.period-grid a {
    background: #fff;
    border: 1px solid #ff5722;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    padding: 5px 0;
    transition: background 0.2s, color 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-grid a.active {
    background: #ff5722;
    color: #fff;
    border-color: #ff5722;
}
.period-grid a.selected {
    background: #ff5722;
    color: #fff;
    border-color: #ff5722;
}


/* 专家排行榜 */
.expert-section {
    background: #fff;
    margin: 5px 5px 0 5px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 5px 10px 10px 10px;
}

.expert-title {
    font-size: 18px;
    color: #222;
    font-weight: 600;
    margin-bottom: 10px;
}

.expert-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.expert-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expert-list li {
    position: relative;
    overflow: hidden;
    background: #fff;
    transition: background 0.2s;
    cursor: pointer;
}

.expert-list li:active,
.expert-list li:focus-within {
    background: #f5f5f5;
}

.expert-list a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.rank {
    width: 22px;
    text-align: center;
    color: #888;
    font-size: 18px;
    font-weight: 600;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden; /* 裁切成圆形，避免图片溢出 */
    flex-shrink: 0; /* 防止在Flex中被压缩变形 */
    background: #eee url('data:image/svg+xml;utf8,<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="18" fill="%23eee"/><circle cx="18" cy="14" r="8" fill="%23ccc"/><ellipse cx="18" cy="28" rx="10" ry="6" fill="%23ccc"/></svg>') no-repeat center/cover;
    margin: 0 10px;
}

/* 头像图片等比填充容器并裁切 */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.score {
    color: red;
    font-weight: bold;
}

.score_z {
    color: #000;
    font-size: 0.2em;
    margin-left: 2px;
}

/* 底部信息和返回顶部 */
.footer-info {
    text-align: center;
    color: #333;
    font-size: 16px;
    margin: 30px 0 20px 0;
    position: relative;
}

.footer-info span {
    margin-right: 16px;
    color: #333;
}

.footer-info a {
    color: #2a7cff;
    text-decoration: underline;
    margin-right: 16px;
}

.footer-info .copyright {
    color: #888;
    font-size: 15px;
    margin-top: 8px;
}

.back-top {
    position: fixed;
    right: 18px;
    bottom: 32px;
    width: 48px;
    height: 48px;
    background: #2a7cff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(42, 124, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
}

.back-top::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 13px auto;
    background: url('data:image/svg+xml;utf8,<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M11 16V6M6 11l5-5 5 5" stroke="%23fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') no-repeat center/cover;
}

.period-btn.active {
    background: #ff5722;
    color: #fff;
    border-color: #ff5722;
}

.load-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: rgba(255, 87, 51, 1);
    margin: 10px;
}



  
  
  
/* PC端两列布局（≥767px） */
@media (min-width: 767px) {
    body {
        width: 80%;
        margin: 0 auto;
        background: #f5f7fa;
    }
    .indicator-section {
        max-width: 1200px;
        margin: 10px auto;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        padding: 15px 16px 18px 16px;
    }   

    .expert-section {
        max-width: 1200px;
        margin: 10px auto;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        padding: 15px 16px 18px 16px;
    }

    /* 两列网格 */
    .expert-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .expert-list li {
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    /* 元素尺寸在PC适配稍大一些 */
    .rank {
        width: 28px;
        font-size: 20px;
    }

    .avatar {
        width: 44px;
        height: 44px;
        margin: 0 14px;
    }

    .name {
        font-size: 16px;
    }

    .score {
        font-size: 16px;
    }

    .load-more-btn {
        font-size: 16px;
        margin: 14px;
    }
}