.rank-demos { padding-bottom:30px; }
.rank-demo-intro { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; }
.rank-redesign .rank-demo-intro h2 { display:flex; align-items:center; gap:10px; margin:0 0 5px; color:#edf2ef; font-size:20px; font-weight:750; }
.rank-demo-intro h2 .d90x-icon { color:#a2c8ba; }
.rank-demo-intro p { margin:0; color:#99aaa5; font-size:12px; }
.rank-demo-format { flex:none; border:1px solid #3b4742; border-radius:4px; padding:4px 8px; color:#a8bdb3; font-size:10px; }
.rank-demo-servers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.rank-redesign .rank-demo-server { display:block; min-width:0; border:1px solid #35423d; border-radius:7px; padding:15px 16px; background:#1a211e; color:#c6d7ce; }
.rank-redesign .rank-demo-server:hover,.rank-redesign .rank-demo-server.is-selected { border-color:#82ab98; background:#202c26; }
.rank-demo-server[data-game="cssv34"] { border-color:#494333; background:#211f19; }
.rank-demo-server[data-game="csgo"] { border-color:#394354; background:#1c2029; }
.rank-demo-server-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:7px; }
.rank-demo-server-top > strong { color:#e5eee7; font-size:15px; font-weight:750; }
.rank-demo-status { display:flex; align-items:center; gap:6px; color:#90a89b; font-size:10px; }
.rank-demo-status > span { width:5px; height:5px; background:#6a7b70; border-radius:50%; }
.rank-demo-status-recording,.rank-demo-status-closing { color:#a3d2b8; }
.rank-demo-status-recording > span { background:#91d5ac; }
.rank-demo-status-closing > span { background:#e0c38b; }
.rank-demo-status-unavailable { color:#b4a994; }
.rank-demo-status-unavailable > span { background:#b1a17d; }
.rank-demo-server-name,.rank-demo-server-sync { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-demo-server-name { color:#9cacaa; font-size:11px; }
.rank-demo-server-sync { margin-top:11px; color:#83978d; font-size:10px; font-variant-numeric:tabular-nums; }
.rank-demo-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; padding:16px; margin:0 0 22px; border:1px solid #343f3a; border-radius:7px; background:#171e1b; }
.rank-demo-filters label { display:flex; flex-direction:column; gap:6px; min-width:145px; margin:0; }
.rank-demo-filters label > span { color:#a6b7af; font-size:10px; }
.rank-redesign .rank-demo-filters select,.rank-redesign .rank-demo-filters input[type="date"] { display:block; width:100%; height:39px; min-height:39px; margin:0; padding:8px 10px; border:1px solid #46544e; border-radius:4px; background:#232c27; color:#e0e9e2; font-size:12px; color-scheme:dark; }
.rank-demo-map-filter { flex:1; max-width:280px; }
.rank-redesign .rank-demo-filters button { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:39px; min-height:39px; padding:8px 15px; border:1px solid #82ac95; border-radius:4px; background:#a8cbb6; color:#17241c; font-size:12px; font-weight:700; }
.rank-redesign .rank-demo-filters button:hover { background:#c1e0cb; }
.rank-redesign .rank-demo-reset { display:inline-flex; align-items:center; min-height:39px; padding:8px 4px; color:#a6b7ad; font-size:11px; }
.rank-demo-notice { border:1px solid #5c5139; border-radius:5px; padding:11px 14px; margin:0 0 20px; background:#29251b; color:#d7c9a7; font-size:12px; }
.rank-demo-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 11px; }
.rank-redesign .rank-demo-list-heading h3 { margin:0; color:#dbe7df; font-size:14px; font-weight:700; }
.rank-demo-list-heading > span { color:#90a399; font-size:11px; }
.rank-demo-table-wrap { border:1px solid #35423b; border-radius:6px; overflow:hidden; background:#191f1c; }
.rank-redesign .rank-demo-table { width:100%; border-collapse:collapse; margin:0; font-size:12px; }
.rank-redesign .rank-demo-table th { padding:11px 16px; border:0; border-bottom:1px solid #3b4941; background:#242d27; color:#a1b5a8; font-size:10px; font-weight:650; text-align:left; white-space:nowrap; }
.rank-redesign .rank-demo-table td { padding:13px 16px; border:0; border-bottom:1px solid #303c34; background:transparent; color:#c5d2c9; vertical-align:middle; }
.rank-demo-table tbody tr:last-child > td { border-bottom:0; }
.rank-redesign .rank-demo-table tbody tr:hover > td { background:#202b23; }
.rank-demo-time { width:140px; font-variant-numeric:tabular-nums; }
.rank-demo-time time { display:flex; flex-direction:column; gap:2px; }
.rank-demo-time strong { color:#e0ebe2; font-size:13px; font-weight:650; }
.rank-demo-time time > span { color:#8b9f92; font-size:10px; }
.rank-demo-map > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.rank-demo-map strong { color:#e1eae1; font-weight:650; overflow-wrap:anywhere; }
.rank-demo-map > span { display:block; margin-top:3px; color:#90a094; font-size:10px; overflow-wrap:anywhere; }
.rank-demo-duration,.rank-demo-size { white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-demo-download-cell { width:160px; text-align:right; }
.rank-redesign .rank-demo-download { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:35px; border:1px solid #4e6957; border-radius:4px; padding:7px 10px; color:#cbe2d0; background:#233328; font-size:11px; white-space:nowrap; }
.rank-redesign .rank-demo-download:hover { border-color:#94bd9e; background:#304536; color:#f0f8ef; }
.rank-demo-download .d90x-icon { width:14px; height:14px; }
.rank-demo-download > span { color:#829b88; font-size:9px; }
.rank-redesign .rank-demo-empty td { padding:42px 18px; text-align:center; }
.rank-demo-empty .d90x-icon { display:block; width:27px; height:27px; margin:0 auto 12px; color:#749281; }
.rank-demo-empty strong,.rank-demo-empty span { display:block; }
.rank-demo-empty strong { color:#c1d3c5; font-size:13px; font-weight:650; }
.rank-demo-empty span { margin-top:5px; color:#8da495; font-size:11px; }
.rank-demo-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 0 18px; }
.rank-demo-bottom > p { max-width:700px; margin:0; color:#82968a; font-size:10px; }
.rank-demo-pagination { display:flex; align-items:center; gap:13px; }
.rank-demo-pagination > span { color:#9eafa3; font-size:11px; font-variant-numeric:tabular-nums; }
.rank-redesign .rank-demo-pagination > a { display:flex; align-items:center; gap:5px; border:1px solid #425749; border-radius:4px; padding:5px 9px; color:#c7ddcc; font-size:11px; }
.rank-demo-pagination .d90x-icon { width:14px; height:14px; }
.rank-demo-help { border-top:1px solid #303e34; padding-top:16px; }
.rank-demo-help summary { display:flex; align-items:center; gap:8px; width:fit-content; color:#a4c5af; font-size:12px; cursor:pointer; }
.rank-demo-help summary .d90x-icon { width:16px; height:16px; }
.rank-demo-help > div { max-width:850px; color:#91a697; font-size:11px; }
.rank-demo-help p { margin:12px 0 0; }
.rank-demo-help code,.rank-demo-help kbd { padding:2px 4px; border:1px solid #3e5043; border-radius:3px; background:#202c24; color:#c2d5c6; font-size:11px; }
.rank-demo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.rank-demos :is(a,button,input,select,summary):focus-visible { outline:2px solid #bcdbc6; outline-offset:3px; }
@media(max-width:850px) {
    .rank-demo-server-top { display:block; }
    .rank-demo-status { margin-top:5px; }
    .rank-demo-filters label { flex:1; min-width:130px; }
    .rank-demo-map-filter { max-width:none; }
    .rank-redesign .rank-demo-table th,.rank-redesign .rank-demo-table td { padding-left:11px; padding-right:11px; }
    .rank-demo-time { width:105px; }
    .rank-demo-download-cell { width:auto; }
    .rank-demo-download > span { display:none; }
}
@media(max-width:600px) {
    .rank-demo-intro { align-items:flex-start; margin-bottom:17px; }
    .rank-demo-format { display:none; }
    .rank-demo-servers { grid-template-columns:1fr; gap:8px; margin-bottom:17px; }
    .rank-redesign .rank-demo-server { padding:11px 13px; }
    .rank-demo-server-top { display:flex; margin-bottom:2px; }
    .rank-demo-server-top > strong { font-size:13px; }
    .rank-demo-status { margin-top:0; }
    .rank-demo-server-name { display:none; }
    .rank-demo-server-sync { margin-top:2px; font-size:9px; }
    .rank-demo-filters { gap:10px; padding:12px; }
    .rank-demo-filters label { min-width:calc(50% - 10px); }
    .rank-demo-filters .rank-demo-map-filter { flex:1 1 100%; }
    .rank-demo-filters button { flex:1; }
    .rank-demo-reset { padding-left:9px !important; padding-right:9px !important; }
    .rank-demo-table thead { display:none; }
    .rank-demo-table,.rank-demo-table tbody { display:block; width:100%; }
    .rank-demo-table tr { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; padding:14px 13px; border-bottom:1px solid #35423a; }
    .rank-demo-table tr:last-child { border-bottom:0; }
    .rank-redesign .rank-demo-table td { display:block; width:auto; padding:0; border:0; background:transparent !important; }
    .rank-demo-table td::before { display:block; margin-bottom:3px; color:#849b8b; font-size:9px; content:attr(data-label); }
    .rank-demo-table td.rank-demo-map { grid-column:1 / -1; grid-row:1; padding-bottom:4px; }
    .rank-demo-map::before,.rank-demo-download-cell::before { display:none !important; }
    .rank-demo-map > div { gap:7px; }
    .rank-demo-map strong { font-size:14px; }
    .rank-demo-time time { display:flex; flex-direction:row; align-items:baseline; gap:6px; }
    .rank-demo-time strong { font-size:12px; }
    .rank-demo-download-cell { display:flex !important; align-items:flex-end; justify-content:flex-end; grid-column:2; grid-row:3 / 5; }
    .rank-demo-size { grid-column:1; }
    .rank-redesign .rank-demo-download { min-height:37px; padding:8px 12px; }
    .rank-demo-download > span { display:inline; }
    .rank-demo-table tr.rank-demo-empty { display:block; padding:30px 14px; }
    .rank-demo-empty td::before { display:none; }
    .rank-demo-pagination { width:100%; justify-content:flex-end; }
}