:root {
    --ex-bg: #eef0f2;
    --ex-card: #ffffff;
    --ex-card-soft: #f7f8f9;
    --ex-border: #dfe3e7;
    --ex-border-strong: #cfd5da;
    --ex-text: #22272b;
    --ex-muted: #737d86;
    --ex-link: #075ee5;
    --ex-link-hover: #0047b7;
    --ex-green: #168a52;
    --ex-green-bg: #e9f7ef;
    --ex-gold: #7b5b08;
    --ex-gold-bg: #fff1b9;
    --ex-gold-border: #e8c65b;
    --ex-silver-bg: #e9edf1;
    --ex-silver-border: #c3cbd3;
    --ex-bronze-bg: #f3dfd0;
    --ex-bronze-border: #d8aa87;
}

.extreme-navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.extreme-brand {
    font-size: 25px !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.test-build-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #d9dee2;
    background: rgba(255,255,255,.07);
}

.extreme-page-container {
    margin-top: 26px;
    margin-bottom: 32px;
}

.leaderboard-page {
    width: 100%;
}

.leaderboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 17px;
}

.leaderboard-eyebrow {
    margin-bottom: 2px;
    color: var(--ex-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.leaderboard-heading h1 {
    margin: 0;
    color: var(--ex-text);
    font-size: 31px;
    line-height: 1.08;
    font-weight: 600;
}

.leaderboard-subtitle {
    margin-top: 5px;
    color: #606970;
    font-size: 16px;
}

.leaderboard-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.leaderboard-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    color: #69727a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.leaderboard-search {
    display: flex;
    gap: 8px;
    margin-bottom: 13px;
}

.leaderboard-search .form-control {
    height: 42px;
    border: 1px solid var(--ex-border-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(31, 42, 51, .08);
    font-family: inherit;
    font-size: 14px;
}

.leaderboard-search .form-control:focus {
    border-color: #8eb1e8;
    box-shadow: 0 0 0 3px rgba(37, 106, 211, .10), 0 3px 12px rgba(31, 42, 51, .08);
}

.leaderboard-search-btn {
    min-width: 92px;
    height: 42px;
    border: 1px solid #258b5d;
    border-radius: 8px;
    color: #176943;
    background: #fff;
    font-size: 16px;
}

.leaderboard-search-btn:hover,
.leaderboard-search-btn:focus {
    color: #fff;
    background: #258b5d;
}

.leaderboard-card {
    overflow: hidden;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: var(--ex-card);
    box-shadow: 0 5px 18px rgba(31, 42, 51, .09);
}

.leaderboard-table {
    table-layout: fixed;
    width: 100%;
    color: var(--ex-text);
    background: #fff;
}

.leaderboard-table > :not(caption) > * > * {
    border-bottom-color: #e1e5e8;
}

.leaderboard-table thead th {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid #cbd1d6;
    background: #fafbfc;
    color: #373d42;
    font-size: 18px;
    font-weight: normal;
    vertical-align: middle;
}

.leaderboard-table thead th a {
    color: var(--ex-link);
}

.leaderboard-table tbody td {
    height: 47px;
    padding: 8px 14px;
    vertical-align: middle;
    background: #fff;
    transition: background-color .12s ease;
}

.leaderboard-table tbody tr:nth-child(even) td {
    background: #f5f6f7;
}

.leaderboard-table tbody tr:hover td {
    background: #eef4ff;
}

.rank-col {
    width: 86px;
    text-align: center;
}

.player-col {
    width: 44%;
}

.points-col {
    width: 20%;
    text-align: right;
}

.activity-col {
    width: 28%;
    text-align: left;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d7dce0;
    border-radius: 7px;
    background: #f3f5f6;
    color: #596168;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

.rank-gold {
    border-color: var(--ex-gold-border);
    color: #6d5004;
    background: var(--ex-gold-bg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.rank-silver {
    border-color: var(--ex-silver-border);
    color: #5b636b;
    background: var(--ex-silver-bg);
}

.rank-bronze {
    border-color: var(--ex-bronze-border);
    color: #815334;
    background: var(--ex-bronze-bg);
}

.player-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.player-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ex-link);
    font-weight: 600;
}

.player-name:hover {
    color: var(--ex-link-hover);
}

.vip-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 23px;
    padding: 0 8px;
    border: 1px solid var(--ex-gold-border);
    border-radius: 999px;
    background: linear-gradient(180deg, #fff5ca 0%, #ffe99b 100%);
    color: var(--ex-gold);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.points-value {
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
    color: #2f353a;
}

.activity-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #9dd9b8;
    border-radius: 999px;
    background: var(--ex-green-bg);
    color: #147246;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ex-green);
    box-shadow: 0 0 0 3px rgba(22,138,82,.10);
}

.activity-offline {
    color: #59636b;
    font-size: 16px;
}

.leaderboard-pagination {
    margin-top: 18px;
}

.leaderboard-pagination .page-link {
    border-color: #d7dce0;
    color: #4f5961;
    background: rgba(255,255,255,.92);
}

.leaderboard-pagination .page-item.active .page-link {
    border-color: #343a40;
    background: #343a40;
    color: #fff;
}

/* Shared styling used by search/online views in the test build. */
.stats-section-title {
    margin-bottom: 14px;
    color: var(--ex-text);
    font-size: 25px;
    font-weight: 600;
}

.stats-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--ex-muted);
    background: #fff;
}

.team-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
}

.team-survivor { color: #245fbc; background: #edf4ff; border: 1px solid #bed3f4; }
.team-infected { color: #a23e3e; background: #fff0f0; border: 1px solid #efc2c2; }
.team-spectator { color: #596168; background: #f0f2f4; border: 1px solid #d3d8dc; }

footer {
    padding: 18px 0 22px;
    color: #788189;
    font-size: 14px;
}

@media (max-width: 767.98px) {
    .extreme-page-container { margin-top: 18px; }
    .leaderboard-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .leaderboard-heading h1 { font-size: 26px; }
    .leaderboard-meta { justify-content: flex-start; }
    .leaderboard-search { flex-direction: column; }
    .leaderboard-search-btn { width: 100%; }
    .rank-col { width: 66px; }
    .player-col { width: 48%; }
    .points-col { width: 24%; }
    .activity-col { width: 30%; }
    .leaderboard-table thead th,
    .leaderboard-table tbody td { padding-left: 9px; padding-right: 9px; }
    .activity-offline { font-size: 14px; }
}

@media (max-width: 575.98px) {
    .activity-col { display: none; }
    .player-col { width: auto; }
    .points-col { width: 30%; }
    .vip-badge { height: 21px; padding: 0 6px; font-size: 9px; }
    .rank-badge { min-width: 36px; }
}

.banned-badge,
.profile-entitlement-banned {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dc3545;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}

.rank-banned {
    border-color: #dc3545 !important;
    background: #fff0f1 !important;
    color: #b42332 !important;
}

.top-heading { color:#3073db;font-size:20px;margin:25px 0; }
.top-heading span { font-size:35px; }


.leaderboard-table thead th,
.leaderboard-table tbody td,
.player-name,
.points-value,
.activity-offline {
    font-size: 18px;
}

.leaderboard-table thead th { font-weight: normal; }
.player-name { font-weight: bold; }
.points-value { font-weight: normal; }
.rank-badge {
    min-width: 38px;
    height: 28px;
    font-size: 18px;
    font-weight: normal;
}
.vip-badge {
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
}
.activity-online,
.team-badge {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
}
.leaderboard-search .form-control,
.leaderboard-search-btn {
    font-size: 18px;
}

.rank-col { width: 64px; }
.points-col { width: 17%; text-align: center; }
.player-col { width: 45%; }
.activity-col { width: 30%; }

/* Home */
.home-section {
    margin-top: 28px;
}
.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.home-section-head h2 {
    margin: 0;
    color: var(--ex-text);
    font-size: 24px;
    font-weight: normal;
}
.home-section-head p {
    margin: 4px 0 0;
    color: #667078;
    font-size: 16px;
}
.home-server-records {
    margin-bottom: 22px;
}
.home-server-title {
    margin: 0 0 9px;
    font-size: 19px;
}
.home-server-title a {
    color: var(--ex-link);
}
.record-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.record-card {
    display: flex;
    min-height: 122px;
    flex-direction: column;
    padding: 15px 16px;
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ex-text);
    box-shadow: 0 3px 12px rgba(31,42,51,.07);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.record-card:hover {
    color: var(--ex-text);
    border-color: #c7d5e8;
    box-shadow: 0 6px 16px rgba(31,42,51,.10);
    transform: translateY(-1px);
}
.record-label {
    color: #6a747c;
    font-size: 15px;
}
.record-player {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--ex-link);
    font-size: 18px;
}
.record-value {
    margin-top: auto;
    padding-top: 9px;
    color: #272d32;
    font-size: 20px;
}
.record-value small {
    color: #747d84;
    font-size: 14px;
}
.shop-section {
    margin-bottom: 10px;
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.shop-card {
    padding: 20px;
    border: 1px solid var(--ex-border);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(31,42,51,.07);
}
.shop-vip-card {
    border-color: #e0c36f;
    background: linear-gradient(180deg, #fffdf6 0%, #fff 100%);
}
.shop-card-kicker {
    color: #7b5b08;
    font-size: 14px;
}
.shop-card h3 {
    margin: 4px 0 8px;
    color: var(--ex-text);
    font-size: 23px;
    font-weight: normal;
}
.shop-card p {
    min-height: 54px;
    margin: 0 0 15px;
    color: #636d75;
    font-size: 16px;
}
.shop-btn {
    min-width: 110px;
    border: 1px solid #cfd5da;
    background: #f5f6f7;
    color: #727b82;
    font-size: 17px;
}

@media (max-width: 991.98px) {
    .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .record-grid, .shop-grid { grid-template-columns: 1fr; }
    .rank-col { width: 52px; }
    .points-col { width: 26%; }
    .player-col { width: auto; }
}

/* =========================
   v1.2 — VIP + language UI
   ========================= */
.vip-nav-link {
    color: #ffd966 !important;
    border: 1px solid rgba(255, 217, 102, .5);
    border-radius: 7px;
    padding-left: 11px !important;
    padding-right: 11px !important;
    background: rgba(255, 217, 102, .08);
}
.vip-nav-link:hover,
.vip-nav-link:focus {
    color: #fff2b3 !important;
    border-color: rgba(255, 217, 102, .78);
    background: rgba(255, 217, 102, .15);
}
.lang-switch-wrap { margin-left: 4px; }
.lang-current {
    min-width: 46px;
    text-align: center;
}
.lang-menu { min-width: 140px; }
.lang-menu .dropdown-item.active,
.lang-menu .dropdown-item:active {
    color: #fff;
    background: #343a40;
}

/* Home records no longer block first render. */
.home-records-loader {
    min-height: 130px;
}
.records-loading,
.records-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    border: 1px solid var(--ex-border);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    color: #69727a;
    font-size: 18px;
}
.records-spinner {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 2px solid #cbd1d6;
    border-top-color: #343a40;
    border-radius: 50%;
    animation: ex-spin .75s linear infinite;
}
@keyframes ex-spin { to { transform: rotate(360deg); } }
.shop-card-link { color: inherit; }
.shop-card-link:hover { color: inherit; transform: translateY(-1px); box-shadow: 0 6px 17px rgba(31,42,51,.10); }
.shop-price-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 1px 0 8px;
}
.shop-price-line strong { color: #2c3135; font-size: 22px; font-weight: normal; }
.shop-price-line span { color: #747d84; font-size: 15px; }
.shop-btn-active {
    border-color: #d4b54e;
    color: #624700;
    background: #fff4bf;
}

/* VIP page */
.vip-page { padding-bottom: 8px; }
.vip-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 34px 38px;
    border: 1px solid #d9c26d;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffdf2 0%, #fff8d8 54%, #f1e2a0 100%);
    box-shadow: 0 7px 22px rgba(91,73,19,.10);
}
.vip-eyebrow {
    color: #80630b;
    font-size: 15px;
    letter-spacing: .04em;
}
.vip-hero h1 {
    margin: 2px 0 4px;
    color: #282a2d;
    font-size: 40px;
    font-weight: normal;
}
.vip-subtitle { margin: 0 0 12px; color: #5d6063; font-size: 19px; }
.vip-price { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 8px; }
.vip-price strong { color: #6c4e00; font-size: 35px; font-weight: normal; }
.vip-price span { color: #7c7151; font-size: 18px; }
.vip-command { margin: 0 0 18px; color: #55595c; font-size: 17px; }
.vip-command code {
    padding: 2px 6px;
    border-radius: 5px;
    color: #543d00;
    background: rgba(255,255,255,.68);
    font-family: inherit !important;
    font-size: 17px;
}
.vip-primary-btn,
.vip-pay-btn {
    border: 1px solid #8e6c0b;
    border-radius: 7px;
    color: #fff;
    background: #9b7411;
    font-size: 18px;
}
.vip-primary-btn:hover { color: #fff; background: #826009; }
.vip-hero-badge {
    display: flex;
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #c7a93e;
    border-radius: 50%;
    color: #5f4707;
    background: rgba(255,255,255,.54);
    box-shadow: inset 0 0 0 8px rgba(221,192,87,.10);
}
.vip-hero-badge span { font-size: 43px; line-height: 1; }
.vip-hero-badge small { margin-top: 6px; font-size: 16px; }
.vip-test-notice {
    margin-bottom: 17px;
    padding: 11px 14px;
    border: 1px solid #d7c88d;
    border-radius: 7px;
    color: #625829;
    background: #fffbea;
    font-size: 16px;
}
.vip-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.vip-feature-card,
.vip-checkout-section,
.skins-section,
.vip-rules-box {
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(31,42,51,.07);
}
.vip-feature-card { padding: 20px; }
.vip-feature-card h2,
.vip-section-heading h2,
.skins-content h2,
.vip-rules-box h2 {
    margin: 0 0 12px;
    color: #2d3236;
    font-size: 24px;
    font-weight: normal;
}
.vip-feature-card ul { margin: 0; padding-left: 21px; }
.vip-feature-card li { margin-bottom: 8px; color: #41484d; font-size: 17px; line-height: 1.35; }
.vip-feature-card li::marker { color: #9b7411; }
.vip-muted-feature {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #eceeef;
    color: #8a9095;
    font-size: 15px;
}
.vip-checkout-section { margin-bottom: 20px; padding: 22px; scroll-margin-top: 85px; }
.vip-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.vip-section-heading h2 { margin-bottom: 4px; }
.vip-section-heading p { margin: 0; color: #6b747b; font-size: 16px; }
.vip-checkout-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.vip-checkout-price strong { color: #704f00; font-size: 27px; font-weight: normal; }
.vip-checkout-price span { color: #777f85; font-size: 15px; }
.vip-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.vip-field { display: block; color: #40474c; font-size: 17px; }
.vip-field > span { display: block; margin-bottom: 6px; }
.vip-field .form-control,
.vip-field .form-select {
    min-height: 42px;
    border-color: #cfd5da;
    border-radius: 6px;
    font-size: 18px;
    background-color: #fff;
}
.vip-field .form-control:disabled,
.vip-field .form-select:disabled { opacity: 1; color: #747b80; background: #f5f6f7; }
.vip-checkout-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.vip-pay-btn:disabled { opacity: 1; color: #77631f; border-color: #d6c375; background: #fff5c8; }
.vip-checkout-note { color: #7d858b; font-size: 15px; }
.skins-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
    margin-bottom: 20px;
    scroll-margin-top: 85px;
}
.skins-price-block {
    display: flex;
    min-height: 165px;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    color: #fff;
    background: #343a40;
}
.skins-price-block span { color: #ccd2d6; font-size: 16px; }
.skins-price-block strong { margin-top: 5px; color: #ffe185; font-size: 27px; font-weight: normal; }
.skins-content { padding: 24px 26px; }
.skins-content p { margin: 0 0 9px; color: #555e64; font-size: 17px; }
.skins-note { color: #81888d !important; }
.vip-rules-box { padding: 18px 21px; border-left: 4px solid #c8a83c; }
.vip-rules-box h2 { margin-bottom: 5px; font-size: 21px; }
.vip-rules-box p { margin: 0; color: #656d73; font-size: 16px; }

@media (max-width: 991.98px) {
    .vip-features-grid { grid-template-columns: 1fr; }
    .vip-hero { padding: 28px; }
    .vip-hero-badge { width: 120px; height: 120px; flex-basis: 120px; }
    .vip-hero-badge span { font-size: 35px; }
}
@media (max-width: 767.98px) {
    .vip-hero { align-items: flex-start; }
    .vip-hero-badge { display: none; }
    .vip-form-grid { grid-template-columns: 1fr; }
    .vip-section-heading { align-items: flex-start; flex-direction: column; }
    .skins-section { grid-template-columns: 1fr; }
    .skins-price-block { min-height: auto; }
    .vip-checkout-actions { align-items: flex-start; flex-direction: column; }
}

/* =========================
   v1.3 — prebuilt home cache
   ========================= */
.records-updated {
    flex: 0 0 auto;
    margin-left: 20px;
    color: #7a838a;
    font-size: 14px;
    white-space: nowrap;
}
.record-label {
    color: #343a40;
    font-size: 16px;
}
.record-description {
    display: block;
    margin-top: 3px;
    min-height: 34px;
    color: #747d84;
    font-size: 14px;
    line-height: 1.2;
}
@media (max-width: 575.98px) {
    .home-section-head { align-items: flex-start; gap: 8px; flex-direction: column; }
    .records-updated { margin-left: 0; }
}

/* =========================
   v0.3.4 — VIP checkout redesign
   ========================= */
.vip-checkout-section {
    padding: 24px;
}
.vip-checkout-section .vip-section-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f2;
}
.vip-checkout-form-redesigned {
    margin-top: 2px;
}
.vip-form-grid-redesigned {
    gap: 18px 20px;
}
.vip-field > span {
    font-size: 18px;
    letter-spacing: .01em;
}
.vip-field small,
.vip-provider-hint,
.vip-provider-state,
.vip-pay-subtitle {
    display: block;
    color: #727b82;
    font-size: 15px;
    line-height: 1.4;
}
.vip-days-input {
    max-width: 235px;
}
.vip-provider-field {
    align-self: start;
}
.vip-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.vip-provider-grid-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 330px;
}
.vip-provider-card {
    display: block;
    margin: 0;
    cursor: pointer;
}
.vip-provider-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.vip-provider-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #d8dde1;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vip-provider-card:hover .vip-provider-card-inner {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(31,42,51,.08);
}
.vip-provider-input:checked + .vip-provider-card-inner {
    border-color: #b88810;
    box-shadow: 0 0 0 1px rgba(184,136,16,.20);
    background: #fffdf8;
}
.vip-provider-radio {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #cfd5da;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 24px;
}
.vip-provider-radio::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c39214;
    opacity: 0;
}
.vip-provider-input:checked + .vip-provider-card-inner .vip-provider-radio {
    border-color: #c39214;
}
.vip-provider-input:checked + .vip-provider-card-inner .vip-provider-radio::after {
    opacity: 1;
}
.vip-provider-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    flex: 0 0 38px;
}
.vip-provider-brand-yoo {
    background: linear-gradient(135deg, #7f3ff0 0%, #af3df3 100%);
}
.vip-provider-brand-lava {
    background: linear-gradient(135deg, #f24b2d 0%, #ff7d32 100%);
}
.vip-provider-brand-cent {
    background: linear-gradient(135deg, #0d75ff 0%, #38a0ff 100%);
}
.vip-provider-label {
    color: #2f3438;
    font-size: 18px;
}
.vip-provider-hint {
    margin-top: 10px;
}
.vip-yoo-extra {
    margin-top: 14px;
}
.vip-inline-field > span {
    font-size: 16px;
    margin-bottom: 6px;
}
.vip-inline-field .form-select {
    max-width: 360px;
}
.vip-checkout-summary {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(340px, 1fr);
    gap: 0;
    margin-top: 22px;
    border: 1px solid #eadfbe;
    border-radius: 10px;
    background: #fffdf8;
    overflow: hidden;
}
.vip-summary-total,
.vip-summary-action {
    padding: 18px 22px;
}
.vip-summary-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-right: 1px solid #eadfbe;
}
.vip-summary-total span {
    color: #6b6559;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vip-summary-total strong {
    color: #9b7411;
    font-size: 34px;
    font-weight: normal;
    line-height: 1.05;
}
.vip-summary-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vip-pay-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 12px 24px;
    border: 1px solid #8e6c0b;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, #b88916 0%, #a3750e 100%);
    font-size: 20px;
    line-height: 1.2;
}
.vip-pay-submit:hover {
    color: #fff;
    background: linear-gradient(180deg, #a77c13 0%, #8f650a 100%);
}
.vip-pay-submit:disabled {
    opacity: 1;
    color: #77631f;
    border-color: #d6c375;
    background: #fff5c8;
}
.vip-pay-subtitle {
    margin-top: 8px;
    font-size: 16px;
}
.vip-provider-state {
    margin-top: 10px;
    padding-left: 24px;
    position: relative;
}
.vip-provider-state::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #8b6710;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    background: #f5eac5;
}

@media (max-width: 991.98px) {
    .vip-checkout-summary {
        grid-template-columns: 1fr;
    }
    .vip-summary-total {
        border-right: 0;
        border-bottom: 1px solid #eadfbe;
    }
}

@media (max-width: 767.98px) {
    .vip-provider-grid {
        grid-template-columns: 1fr;
    }
    .vip-inline-field .form-select,
    .vip-days-input {
        max-width: none;
    }
    .vip-summary-total strong {
        font-size: 30px;
    }
    .vip-pay-submit {
        width: 100%;
    }
}

/* =========================
   v0.4 — compact store + LMC checkout
   ========================= */
.vip-yoo-methods {
    display: inline-flex;
    gap: 7px;
    padding: 4px;
    border: 1px solid #dde2e6;
    border-radius: 8px;
    background: #f7f8f9;
}
.vip-yoo-methods label { margin: 0; cursor: pointer; }
.vip-yoo-methods input { position: absolute; opacity: 0; pointer-events: none; }
.vip-yoo-methods span {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    color: #626a70;
    font-size: 15px;
    line-height: 1.2;
}
.vip-yoo-methods input:checked + span {
    color: #5e4508;
    background: #fff;
    box-shadow: 0 1px 5px rgba(31,42,51,.10);
}
.vip-email-field { transition: opacity .15s ease; }
.vip-provider-state { min-height: 21px; }

.skins-store-section { grid-template-columns: 220px minmax(0,1fr); }
.skin-checkout-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eceff1;
}
.skin-checkout-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}
.skin-payment-row {
    display: grid;
    grid-template-columns: minmax(320px,1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.skin-provider-grid { min-width: 300px; }
.skin-provider-grid .vip-provider-card-inner {
    min-height: 58px;
    padding: 10px 13px;
}
.skin-provider-grid .vip-provider-brand {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 19px;
}
.skin-pay-submit {
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid #8e6c0b;
    border-radius: 7px;
    color: #fff;
    background: #9b7411;
    font-size: 17px;
    white-space: nowrap;
}
.skin-pay-submit:hover { color:#fff; background:#826009; }

@media (max-width: 991.98px) {
    .skin-payment-row { grid-template-columns: 1fr; align-items: stretch; }
    .skin-provider-grid { min-width: 0; }
    .skin-pay-submit { width: 100%; }
}
@media (max-width: 767.98px) {
    .skin-checkout-grid { grid-template-columns: 1fr; }
}


/* =========================
   v0.4.2 — skins status + profile purchase links
   ========================= */
.skins-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    border: 1px solid #8aa8b8;
    border-radius: 999px;
    color: #31576a;
    background: linear-gradient(180deg, #f1f8fb 0%, #dcebf2 100%);
    font-family: inherit;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.profile-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 4px;
}
.profile-title-row h1 {
    margin: 0;
}
.profile-entitlements {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.profile-entitlement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}
.profile-entitlement:hover {
    transform: translateY(-1px);
}
.profile-entitlement-vip {
    border: 1px solid #d2b04d;
    color: #5d4406;
    background: #ffe79a;
}
.profile-entitlement-skins {
    border: 1px solid #99b5c4;
    color: #244e61;
    background: #dcebf2;
}
.profile-entitlement-buy {
    border: 1px solid #d4b862;
    color: #ffedb1;
    background: rgba(176,132,23,.22);
}
.profile-entitlement-buy:hover {
    color: #fff7dc;
    background: rgba(176,132,23,.36);
}
.profile-entitlement-buy-skins {
    border: 1px solid #8faebd;
    color: #dff2fa;
    background: rgba(83,126,148,.24);
}
.profile-entitlement-buy-skins:hover {
    color: #fff;
    background: rgba(83,126,148,.38);
}

.skins-lifetime {
    margin: 8px 0 0 !important;
    color: #735817 !important;
    font-size: 16px !important;
}
.skins-lifetime::before {
    content: '✓';
    display: inline-block;
    margin-right: 7px;
    color: #9b7411;
}

@media (max-width: 767.98px) {
    .profile-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================
   v0.6.8 — exact Constantine from the original eXtreme site.
   Fresh family name intentionally bypasses stale @font-face cache.
   ========================================================== */
@font-face {
    font-family: "eXtremeConstantineExact";
    src:
        url("../fonts/Constantine.ttf?v=12") format("truetype"),
        url("../fonts/Constantine.woff2?v=12") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: block;
}

html,
body,
.extreme-page-container,
.extreme-page-container *,
.extreme-navbar,
.extreme-navbar *,
footer,
footer *,
input,
button,
select,
textarea,
.btn,
.form-control,
.table,
.pagination,
.navbar,
.navbar *,
.store-product-module,
.store-product-module * {
    font-family: "eXtremeConstantineExact", serif !important;
}

/* Constantine itself provides the Roman/small-cap appearance. */
body,
.extreme-page-container,
.store-product-module {
    text-transform: none;
}


/* ==========================================================
   v0.7 — store checkout layout
   vip.php uses store-* classes; keep checkout styling in sync.
   ========================================================== */
.store-modules {
    display: grid;
    gap: 22px;
    margin: 22px 0 26px;
}

.store-product-module {
    overflow: hidden;
    border: 1px solid #dde2e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(31, 42, 51, .05);
    scroll-margin-top: 88px;
}

.store-product-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid #edf0f2;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
}

.store-product-heading {
    min-width: 0;
}

.store-product-kicker {
    margin-bottom: 4px;
    color: #9b7411;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.store-product-heading h2 {
    margin: 0 0 7px;
    color: #252a2e;
    font-size: 29px;
    font-weight: normal;
    line-height: 1.15;
}

.store-product-heading p {
    margin: 0;
    color: #626b72;
    font-size: 16px;
    line-height: 1.45;
}

.store-product-price {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
    padding-top: 18px;
    white-space: nowrap;
}

.store-product-price strong {
    color: #8d6810;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
}

.store-product-price span {
    color: #7d858b;
    font-size: 14px;
}

.store-lifetime-note {
    margin-top: 10px;
    color: #735817;
    font-size: 15px;
}

.store-lifetime-note::before {
    content: '✓';
    display: inline-block;
    margin-right: 7px;
    color: #9b7411;
}

.store-product-form {
    padding: 22px 24px 24px;
}

.store-product-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 15px 18px;
}

.store-product-fields-vip {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
}

.store-email-field {
    grid-column: 1 / -1;
}

.store-product-fields .vip-field {
    margin: 0;
}

.store-product-fields .vip-field > span {
    margin-bottom: 6px;
    color: #40474c;
    font-size: 16px;
}

.store-product-fields .form-control {
    min-height: 44px;
    padding: 8px 11px;
    border-color: #cfd5da;
    border-radius: 7px;
    color: #30363a;
    background: #fff;
    font-size: 17px;
    box-shadow: none;
}

.store-product-fields .form-control:focus {
    border-color: #ba921f;
    box-shadow: 0 0 0 3px rgba(184, 136, 16, .12);
}

.store-payment-area {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf0f2;
}

.store-payment-options {
    margin-top: 11px;
}

.store-product-summary {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(300px, 1.3fr);
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #eadfbe;
    border-radius: 10px;
    background: #fffdf8;
}

.store-summary-price,
.store-summary-action {
    padding: 17px 20px;
}

.store-summary-price {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-right: 1px solid #eadfbe;
}

.store-summary-price span {
    color: #6b6559;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.store-summary-price strong {
    color: #9b7411;
    font-size: 31px;
    font-weight: normal;
    line-height: 1.05;
}

.store-summary-action {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
}

.store-pay-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 11px 20px;
    border: 1px solid #8e6c0b;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, #b88916 0%, #9f710b 100%);
    font-size: 18px;
    line-height: 1.2;
}

.store-pay-button:hover,
.store-pay-button:focus {
    color: #fff;
    border-color: #7c5b07;
    background: linear-gradient(180deg, #a97c12 0%, #896008 100%);
}

.store-pay-button:disabled {
    opacity: .7;
}

.store-summary-action small {
    display: block;
    margin-top: 7px;
    color: #737c82;
    font-size: 14px;
    line-height: 1.35;
}

.store-payment-state {
    position: relative;
    min-height: 19px;
}

.store-product-unavailable {
    margin: 22px 24px 24px;
    padding: 14px 16px;
    border: 1px solid #eadfbe;
    border-radius: 8px;
    color: #705b1c;
    background: #fffaf0;
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .store-product-header {
        flex-direction: column;
        gap: 10px;
        padding: 19px 18px 17px;
    }

    .store-product-price {
        align-items: flex-start;
        padding-top: 0;
    }

    .store-product-form {
        padding: 18px;
    }

    .store-product-fields,
    .store-product-fields-vip,
    .store-product-summary {
        grid-template-columns: 1fr;
    }

    .store-email-field {
        grid-column: auto;
    }

    .store-summary-price {
        border-right: 0;
        border-bottom: 1px solid #eadfbe;
    }

    .store-product-heading h2 {
        font-size: 25px;
    }

    .store-summary-price strong {
        font-size: 28px;
    }
}

/* Leaderboard view switch.
   It lives in the same meta row on rating and online pages. */
.leaderboard-meta > a.leaderboard-meta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #8bc9a4;
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    color: var(--ex-green);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.leaderboard-meta > a.leaderboard-meta-action:hover,
.leaderboard-meta > a.leaderboard-meta-action:focus {
    border-color: #68b38a;
    background: #fff;
    color: #0f7a46;
    box-shadow: 0 0 0 2px rgba(22,138,82,.08);
    text-decoration: none;
}

.leaderboard-meta-action .activity-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
}

/* Secondary row data exists only as a mobile replacement for a hidden column. */
.mobile-player-detail {
    display: none !important;
}

@media (max-width: 575.98px) {
    .activity-col {
        display: none !important;
    }

    .mobile-player-detail {
        display: flex !important;
        align-items: center;
        min-height: 16px;
        margin-top: 3px;
        color: #7a838a;
        font-size: 12px;
        line-height: 1.2;
    }

    .mobile-player-detail .activity-offline {
        color: #7a838a;
        font-size: 12px;
        line-height: 1.2;
    }

    .mobile-player-detail .activity-online {
        height: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #39745a;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: none;
    }

    .mobile-player-detail .activity-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 0 2px rgba(22,138,82,.08);
    }

    .mobile-player-detail .team-badge {
        min-height: 20px;
        height: auto;
        padding: 2px 7px;
        font-size: 10px;
        line-height: 1.15;
    }

    .leaderboard-table tbody td {
        height: auto;
        min-height: 47px;
    }
}


@media (max-width: 575.98px) {
    .leaderboard-meta > a.leaderboard-meta-action {
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* Keep the original desktop behavior: clicking the Activity heading opens Online. */
.activity-heading-link {
    color: var(--ex-link);
    text-decoration: none;
}

.activity-heading-link:hover,
.activity-heading-link:focus {
    color: #174f9f;
    text-decoration: underline;
}

/* =========================
   v1.4 — home record top 3
   ========================= */
.record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.record-card.record-card-top3 {
    min-height: 0;
    padding: 17px 18px 13px;
}

.record-card-top3 .record-description {
    min-height: 0;
    margin-bottom: 11px;
}

.record-top-list {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}

.record-top-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 0;
    border-top: 1px solid #edf0f2;
}

.record-top-row:first-child {
    border-top: 0;
}

.record-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 27px;
    border: 1px solid #d7dde2;
    border-radius: 7px;
    background: #f5f7f8;
    color: #58636c;
    font-size: 14px;
    line-height: 1;
}

.record-rank-1 {
    border-color: #efc451;
    background: #fff6d8;
    color: #765506;
}

.record-rank-2 {
    border-color: #cbd4db;
    background: #f1f5f7;
    color: #52616c;
}

.record-rank-3 {
    border-color: #e5b18c;
    background: #fff0e6;
    color: #8a4f26;
}

.record-top-player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.record-top-name {
    min-width: 0;
    overflow: hidden;
    color: var(--ex-link);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-top-value {
    padding-left: 8px;
    color: #272d32;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.record-top-value small {
    color: #7a838a;
    font-size: 12px;
}

.record-top-empty {
    display: block;
    padding: 16px 0 8px;
    color: #7a838a;
    font-size: 14px;
}

@media (max-width: 767.98px) {
    .record-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .record-card.record-card-top3 {
        padding: 15px 14px 11px;
    }

    .record-top-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .record-top-name,
    .record-top-value {
        font-size: 15px;
    }

    .record-top-value small {
        display: none;
    }
}

/* Player profile KPI / efficiency value. Keep the card identical in size
   and layout to the other profile summary cards; only the number changes color. */
.profile-kpd-value {
    font-size: 25px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.profile-kpd-scale {
    margin-left: 1px;
    color: #8d8d8d;
    font-size: 14px;
    font-weight: 400;
}

.profile-kpd-low .profile-kpd-value {
    color: #a04a55;
}

.profile-kpd-mid .profile-kpd-value {
    color: #486d9f;
}

.profile-kpd-high .profile-kpd-value {
    color: #3d7958;
}

.profile-kpd-very-high .profile-kpd-value {
    color: #9a7019;
}

.profile-kpd-elite .profile-kpd-value {
    color: #8a6512;
}

/* rev1: global record navigation and monthly podiums. */
.records-nav > button { border: 0; background: transparent; }
.records-menu { min-width: 17rem; max-width: calc(100vw - 2rem); padding: .4rem 0; }
.records-mode-toggle { cursor: pointer; font-weight: 600; }
.records-mode-toggle::marker { content: ''; }
.records-mode-toggle::-webkit-details-marker { display: none; }
.records-mode-toggle::after { content: '+'; float: right; margin-left: 1.2rem; }
.records-mode[open] > .records-mode-toggle::after { content: '−'; }
.records-submenu { list-style: none; padding: .25rem 0 .4rem .7rem; margin: 0; }
.records-menu .dropdown-item { white-space: normal; font-size: .9375rem; }
.records-mode-toggle:focus-visible { outline: 2px solid #619356; outline-offset: -2px; }
.monthly-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.monthly-card .record-label { color: inherit; }
.monthly-more { margin-top: 1rem; font-size: .9375rem; font-weight: 600; color: #386732; }
.top-period-switch { display: flex; justify-content: center; gap: .5rem; margin: 1rem 0; }
@media (max-width: 767px) {
    .monthly-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .records-menu { max-width: 100%; }
}
.monthly-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.monthly-head-link { font-size: .9rem; font-weight: 600; color: #5a6f85; }
.monthly-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.monthly-more-muted { color: #5a6f85; }
.monthly-history-card .record-label { color: inherit; }
.monthly-history-list { display: flex; flex-direction: column; gap: .9rem; }
.monthly-history-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #e7e4df; }
.monthly-history-row:last-child { padding-bottom: 0; border-bottom: 0; }
.monthly-history-main, .monthly-history-side { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.monthly-history-side { justify-content: flex-end; text-align: right; }
.monthly-chip { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; background: #f6f1df; border: 1px solid #dfc76a; color: #7d6320; font-size: .85rem; line-height: 1.1; }
.monthly-mini-link { display: inline-block; padding: .2rem .55rem; border-radius: 999px; border: 1px solid #cfd7de; color: #54687a; font-size: .84rem; }
.monthly-mini-link:hover, .monthly-head-link:hover, .monthly-more:hover { text-decoration: none; }
.monthly-archive-box { margin: 1rem 0 1.2rem; padding: 1rem 1.1rem; background: #f8f8f7; border: 1px solid #e5e2dc; border-radius: 12px; }
.monthly-archive-title { font-weight: 600; margin-bottom: .75rem; }
.monthly-archive-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.monthly-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 5.25rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid #d7dce2; background: #fff; color: #566677; font-size: .92rem; }
.monthly-pill-active { background: #2f3640; border-color: #2f3640; color: #fff; }
.monthly-pill:hover { text-decoration: none; }
@media (max-width: 767px) {
    .monthly-card-head, .monthly-history-row { flex-direction: column; align-items: flex-start; }
    .monthly-history-side { justify-content: flex-start; text-align: left; }
    .monthly-actions { flex-direction: column; gap: .55rem; }
}
/* rev2: compact monthly category leaders. */
.monthly-server-card { padding: 17px 18px 15px; }
.monthly-server-title { color: var(--ex-text); font-size: 17px; }
.monthly-feature-title { display: inline-block; margin: 3px 0 2px; color: #58636c; font-size: 14px; font-weight: 600; }
.monthly-points-list { margin-bottom: 12px; }
.monthly-records-title { margin: 4px 0 5px; padding-top: 11px; border-top: 1px solid #e8ecef; color: #6a747c; font-size: 14px; font-weight: 600; }
.monthly-records-list { display: flex; flex-direction: column; }
.monthly-record-row { display: grid; grid-template-columns: minmax(145px, .95fr) minmax(0, 1.25fr) auto; align-items: center; gap: 9px; min-height: 38px; padding: 6px 0; border-top: 1px solid #edf0f2; }
.monthly-record-row:first-child { border-top: 0; }
.monthly-record-label { color: #54687a; font-size: 14px; font-weight: 600; }
.monthly-record-player { min-width: 0; overflow-wrap: anywhere; }
.monthly-record-player > a { color: var(--ex-link); font-weight: 600; }
.monthly-record-value { white-space: nowrap; color: #272d32; font-size: 14px; }
.monthly-record-value small { color: #68737c; font-size: 12px; }
.monthly-record-empty { justify-self: end; color: #9aa2a8; }
.monthly-metrics-since { margin-top: -5px; color: #7b858c; font-size: 12px; }
.monthly-note { margin: -.35rem 0 1rem; color: #6d777f; font-size: .9rem; }
@media (max-width: 767px) {
    .monthly-record-row { grid-template-columns: minmax(0, 1fr) auto; }
    .monthly-record-player { grid-column: 1 / -1; grid-row: 2; }
    .monthly-record-value, .monthly-record-empty { grid-column: 2; grid-row: 1; }
}

/* rev5: monthly metric podiums on the homepage. */
.monthly-metric-groups { display: flex; flex-direction: column; }
.monthly-metric-block { padding: 9px 0 4px; border-top: 1px solid #edf0f2; }
.monthly-metric-block:first-child { border-top: 0; }
.monthly-metric-title { margin: 0 0 3px; }
.monthly-metric-list { margin: 0; }
.monthly-metric-empty { min-height: 31px; display: flex; align-items: center; justify-content: flex-end; color: #9aa2a8; }

/* rev7: visually separated monthly category subcards. */
.monthly-server-card {
    padding: 17px 18px 18px;
}
.monthly-server-card .monthly-card-head {
    margin-bottom: 10px;
}
.monthly-category-card {
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid #e0e5e9;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 42, 51, .035);
}
.monthly-category-card:first-of-type {
    margin-top: 0;
}
.monthly-category-head {
    display: flex;
    align-items: center;
    min-height: 37px;
    padding: 8px 11px;
    border-bottom: 1px solid #e7ebee;
    background: #f6f7f8;
}
.monthly-category-points {
    border-color: #dedfda;
}
.monthly-category-points .monthly-category-head {
    background: #f7f5ee;
    border-bottom-color: #e8e3d5;
}
.monthly-category-head .monthly-feature-title,
.monthly-category-head .monthly-metric-title {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: #4f5d68;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}
.monthly-category-head .monthly-feature-title:hover,
.monthly-category-head .monthly-feature-title:focus {
    color: var(--ex-link);
    text-decoration: none;
}
.monthly-category-list {
    margin: 0;
    padding: 0 10px;
}
.monthly-category-list .record-top-row {
    min-height: 42px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.monthly-category-list .record-top-row:last-child {
    border-bottom: 0;
}
.monthly-category-empty {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
    padding: 8px 12px;
    color: #99a2a9;
}
.monthly-category-card-empty .monthly-category-head {
    border-bottom-color: #edf0f2;
}
.monthly-metric-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
}
.monthly-metric-block {
    padding: 0;
    border-top: 0;
}
.monthly-metric-block:first-child {
    border-top: 1px solid #e0e5e9;
}
.monthly-metric-title,
.monthly-metric-list,
.monthly-metric-empty {
    margin: 0;
}
@media (max-width: 767px) {
    .monthly-server-card {
        padding: 14px;
    }
    .monthly-category-list {
        padding: 0 8px;
    }
    .monthly-category-head {
        padding-left: 9px;
        padding-right: 9px;
    }
}


/* rev9: stronger server headings on monthly cards. */
.monthly-server-card .monthly-card-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7ebee;
}
.monthly-server-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.monthly-server-title {
    display: inline-flex;
    align-items: baseline;
    gap: .42rem;
    color: #24313b;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.monthly-server-brand {
    color: #2f3f4b;
    font-weight: 700;
}
.monthly-server-mode {
    color: #516170;
    font-weight: 700;
}
.monthly-server-subtitle {
    color: #77838d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    .monthly-server-title {
        font-size: 20px;
        gap: .35rem;
    }
    .monthly-server-subtitle {
        font-size: 10px;
    }
}


/* rev10: keep monthly subcards equal height with placeholder rows. */
.monthly-row-placeholder .record-top-player,
.monthly-row-placeholder .record-top-value,
.monthly-placeholder-text {
    color: #98a1a9;
}
.monthly-row-placeholder .record-top-name {
    color: #98a1a9;
    pointer-events: none;
    text-decoration: none;
}
.monthly-row-placeholder .record-top-value small {
    color: #a5adb4;
}


/* rev13: compact month archive selector instead of a growing pill list. */
.monthly-archive-box,
.monthly-archive-title,
.monthly-archive-pills {
    display: none;
}
.monthly-month-selector-wrap {
    display: flex;
    justify-content: center;
    margin: .85rem 0 1.1rem;
}
.monthly-month-selector {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    border: 1px solid #d8dde2;
    border-radius: 9px;
    background: #f7f8f8;
}
.monthly-month-selector label {
    margin: 0;
    color: #596773;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}
.monthly-month-selector select {
    min-width: 175px;
    height: 32px;
    padding: 3px 30px 3px 9px;
    border: 1px solid #c9d0d6;
    border-radius: 5px;
    background: #fff;
    color: #29343d;
    font: inherit;
    font-size: .9rem;
}
.monthly-month-selector .btn {
    margin: 0;
    white-space: nowrap;
}
.top-heading > span {
    font-size: 1.55rem;
    line-height: 1.25;
}
@media (max-width: 575px) {
    .monthly-month-selector {
        width: 100%;
        flex-wrap: wrap;
    }
    .monthly-month-selector select {
        flex: 1 1 150px;
        min-width: 0;
    }
}