.readers-page-outer {
        padding: 20px 0;
    }

    .readers-page-wrap {
        margin: 0;
        padding: 30px 20px;
        background: var(--ymx-bg-card);
        border-radius: 6px;
    }

    .readers-page-title {
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 600;
        color: var(--ymx-text-primary);
    }

    .readers-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 15px;
    }

    /* 前三名：第一排，平均分配宽度 */
    .reader-item-top3 {
        width: calc((100% - 30px) / 3);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border: 1px solid var(--ymx-border-light);
        border-radius: 6px;
        transition: border-color 0.3s ease;
    }

    /* 前三名用更小的 order 值排在第一行（flex 中 order 越小越靠前） */
    .reader-item-top3:nth-child(1) { order: -3; }
    .reader-item-top3:nth-child(2) { order: -2; }
    .reader-item-top3:nth-child(3) { order: -1; }

    .reader-item-normal { order: 0; }

    .reader-item-top3:hover {
        border-color: var(--ymx-text-muted);
    }

    .reader-top3-head {
        font-size: 14px;
        font-weight: 700;
        color: var(--ymx-accent);
        margin-bottom: 12px;
    }

    .reader-top3-info {
        display: flex;
        width: 100%;
        gap: 15px;
        align-items: flex-start;
    }

    .reader-top3-avatar-wrap {
        flex-shrink: 0;
    }

    .reader-top3-avatar-wrap img,
    .reader-normal-avatar img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: block;
    }

    .reader-top3-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .reader-top3-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--ymx-text-primary);
        text-decoration: none;
    }

    .reader-top3-name:hover {
        color: var(--ymx-accent);
    }

    .reader-top3-url {
        font-size: 12px;
        color: var(--ymx-text-secondary);
        text-decoration: none;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .reader-top3-url:hover {
        color: var(--ymx-accent);
    }

    /* 4-100 名：简洁展示 */
    .reader-item-normal {
        width: 80px;
        height: 90px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px;
        border: 1px solid var(--ymx-border-light);
        border-radius: 6px;
        transition: border-color 0.3s ease;
    }

    .reader-item-normal:hover {
        border-color: var(--ymx-text-muted);
    }

    .reader-normal-avatar {
        margin-bottom: 8px;
    }

    .reader-normal-name {
        font-size: 12px;
        font-weight: 400;
        color: var(--ymx-text-muted);
        text-decoration: none;
        text-align: center;
        word-break: break-all;
    }

    .reader-normal-name:hover {
        color: var(--ymx-accent);
    }

    .readers-empty {
        text-align: center;
        color: var(--ymx-text-muted);
        padding: 40px 20px;
        margin: 0;
    }

    @media (max-width: 992px) {
        .reader-item-top3 {
            width: calc((100% - 15px) / 2);
        }

        .reader-item-top3:nth-child(3) {
            width: 100%;
        }

        .reader-item-normal {
            width: 80px;
            height: 90px;
        }
    }

    /* 手机端：前三名竖排，4-100 名固定尺寸 */
    @media (max-width: 576px) {
        .readers-page-outer {
            padding-top: 2px;
            padding-bottom: 2px;
        }

        .readers-page-wrap {
            padding: 0 12px 12px;
        }

        .readers-page-title {
            margin: 0;
            padding: 15px 0;
        }

        .readers-list {
            flex-direction: column;
        }

        .reader-item-top3 {
            width: 100%;
        }

        .reader-item-normal {
            width: 80px;
            height: 90px;
            flex-shrink: 0;
        }
    }

    /* =====================
       夜间模式适配
       ===================== */
    body.ymx-dark-mode .reader-item-top3:hover {
        border-color: #666666;
    }

    body.ymx-dark-mode .reader-top3-url {
        color: #aaaaaa;
    }

    body.ymx-dark-mode .reader-item-normal:hover {
        border-color: #666666;
    }

    body.ymx-dark-mode .readers-empty {
        color: #666666;
    }