/* 排行榜美化：直接作用于原始 Bootstrap 结构，避免 JS 改 DOM 闪动 */
.container[role="main"] .panel.panel-default:has(table.rank-table),
.page-rank .rank-panel {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(26, 46, 36, 0.08);
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading,
.page-rank .rank-head {
    padding: 22px 24px 18px;
    border: 0;
    background: linear-gradient(135deg, #edf6f1 0%, #f7faf8 60%, #fbfcfb 100%);
    border-bottom: 1px solid #d5e3da;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading > .row > [class*="col-"] {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading h4,
.page-rank .rank-title {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 28px;
    line-height: 1.3;
    color: #1a2e24;
    font-weight: 400;
    text-align: left !important;
}

.page-rank .rank-head,
.page-rank .popularity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading .btn,
.page-rank .rank-actions .btn,
.page-rank .popularity-actions .btn {
    border-radius: 8px;
    border-color: #d5e3da;
    background: #fff;
    color: #1f4d38;
    font-weight: 500;
    box-shadow: none;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading .btn:hover,
.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading .btn:focus,
.page-rank .rank-actions .btn:hover,
.page-rank .rank-actions .btn:focus {
    border-color: #2f6b4f;
    color: #2f6b4f;
    background: #fff;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading .dropdown-menu,
.page-rank .rank-actions .dropdown-menu {
    border-radius: 10px;
    border-color: #d5e3da;
    box-shadow: 0 12px 28px rgba(26, 46, 36, 0.12);
    max-height: 320px;
    overflow-y: auto;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-body,
.page-rank .rank-intro,
.page-rank .popularity-intro {
    padding: 16px 24px;
    color: #4a5f54;
    font-size: 14px;
    line-height: 1.75;
    background: #fff;
    border-bottom: 1px solid #eef3f0;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-body p:last-child,
.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-body ol:last-child,
.container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-body ul:last-child {
    margin-bottom: 0;
}

.container[role="main"] table.rank-table,
.page-rank .rank-table {
    background: transparent;
    margin-bottom: 0;
}

.container[role="main"] table.rank-table > tbody > tr > th,
.page-rank .rank-table > tbody > tr > th {
    background: transparent;
    border-bottom: 2px solid #d5e3da;
    color: #6b7c74;
    font-size: 12px;
    font-weight: 600;
    padding: 14px 12px;
    white-space: nowrap;
}

.container[role="main"] table.rank-table > tbody > tr > td,
.page-rank .rank-table > tbody > tr > td {
    border-top: 1px solid #eef2ef;
    padding: 14px 12px;
    vertical-align: middle;
}

.container[role="main"] table.rank-table > tbody > tr:hover > td,
.page-rank .rank-table > tbody > tr:hover > td {
    background: rgba(232, 243, 236, 0.55);
}

.container[role="main"] table.rank-table > tbody > tr.info > td,
.page-rank .rank-table > tbody > tr.info > td {
    background: rgba(232, 243, 236, 0.35);
}

.container[role="main"] table.rank-table > tbody > tr.info:hover > td,
.page-rank .rank-table > tbody > tr.info:hover > td {
    background: rgba(232, 243, 236, 0.7);
}

/* 排名列徽章（由 rank.js 注入 .rank-mark，或模板内直接输出） */
.page-rank .rank-mark,
.container[role="main"] table.rank-table .rank-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #5f7268;
    background: #eef3f0;
}

.page-rank .rank-mark.is-gold,
.container[role="main"] table.rank-table .rank-mark.is-gold {
    color: #7a5a00;
    background: linear-gradient(145deg, #ffe9a8, #f0d06a);
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.35);
}

.page-rank .rank-mark.is-silver,
.container[role="main"] table.rank-table .rank-mark.is-silver {
    color: #3f4a56;
    background: linear-gradient(145deg, #f0f3f6, #c9d1da);
    box-shadow: 0 2px 8px rgba(138, 148, 160, 0.3);
}

.page-rank .rank-mark.is-bronze,
.container[role="main"] table.rank-table .rank-mark.is-bronze {
    color: #6a3d12;
    background: linear-gradient(145deg, #f5d4b4, #d9a06a);
    box-shadow: 0 2px 8px rgba(184, 115, 51, 0.28);
}

.container[role="main"] table.rank-table img.imgver,
.page-rank .user-cell .imgver {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    vertical-align: middle;
    margin-right: 4px;
}

.page-rank .user-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.container[role="main"] table.rank-table a,
.page-rank .rank-table a {
    color: #2c4469;
    font-weight: 600;
}

.container[role="main"] table.rank-table a:hover,
.page-rank .rank-table a:hover {
    color: #1e3350;
    text-decoration: underline;
}

.container[role="main"] table.rank-table .text-good,
.page-rank .rank-table .text-good {
    color: #c45b7a;
    font-weight: 600;
    margin-left: 2px;
}

.container[role="main"] table.rank-table > tbody > tr > td:last-child,
.page-rank .score-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1f4d38;
}

.page-rank .wl-cell {
    font-variant-numeric: tabular-nums;
    color: #4a5f54;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination,
.page-rank .rank-pager {
    padding: 12px 16px 18px;
    text-align: center;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > li > a,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > li > span,
.page-rank .rank-pager .pagination > li > a,
.page-rank .rank-pager .pagination > li > span {
    border-radius: 8px !important;
    margin: 0 3px;
    border-color: #d5e3da;
    color: #2c4469;
}

.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > a,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > span,
.page-rank .rank-pager .pagination > .active > a,
.page-rank .rank-pager .pagination > .active > span,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > a:hover,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > span:hover,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > a:focus,
.container[role="main"] .panel.panel-default:has(table.rank-table) .pagination > .active > span:focus,
.page-rank .rank-pager .pagination > .active > a:hover,
.page-rank .rank-pager .pagination > .active > span:hover,
.page-rank .rank-pager .pagination > .active > a:focus,
.page-rank .rank-pager .pagination > .active > span:focus {
    background: #2f6b4f !important;
    border-color: #2f6b4f !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(47, 107, 79, 0.35);
}

@media (max-width: 767px) {
    .container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading h4,
    .page-rank .rank-title {
        font-size: 22px;
    }

    .container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-heading,
    .page-rank .rank-head {
        padding: 18px 16px 14px;
    }

    .container[role="main"] .panel.panel-default:has(table.rank-table) > .panel-body,
    .page-rank .rank-intro {
        padding: 14px 16px;
    }

    .container[role="main"] .panel.panel-default:has(table.rank-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container[role="main"] table.rank-table,
    .page-rank .rank-table {
        min-width: 640px;
    }
}