/* 现代化TOP15页面样式，基于比赛历史页面UI */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #1a1a1a;
    font-family: "Geologica", Arial, sans-serif;
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题栏样式 */
.title-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(30, 30, 30, 0.5));
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.1);
    box-sizing: border-box;
    overflow: hidden;
    flex-wrap: wrap;
}

.back-button {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.4));
    color: #FFD700;
    padding: 8px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.back-button:before {
    content: '←';
    font-size: 16px;
}

.back-button:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(0, 0, 0, 0.5));
    color: #FFFF00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

h1 {
    color: #FFD700;
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
}

/* 表格容器样式 */
.table-container {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(135deg, rgba(10, 10, 20, 0.7), rgba(30, 30, 40, 0.7));
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    overflow-x: auto;
    overflow-y: visible;
    backdrop-filter: blur(5px);
    margin-bottom: 25px;
    box-sizing: border-box;
    /* 添加平滑滚动 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) rgba(0, 0, 0, 0.2);
}

/* 自定义滚动条样式（Webkit浏览器） */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* 表格样式 */
table {
    width: 100%;
    min-width: 0; /* 移除表格最小宽度限制，允许完全自由缩小 */
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(5, 5, 15, 0.4);
    border-radius: 10px;
    overflow: visible;
    font-size: 16px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    table-layout: auto; /* 使用自动布局，让列宽根据内容和容器大小自动调整 */
    box-sizing: border-box;
}

/* 表头样式 */
thead {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(40, 40, 50, 0.8));
    position: relative;
}

th {
    padding: 8px 5px;
    text-align: center;
    color: #FFD700;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    letter-spacing: 0.5px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    min-width: 0 !important; /* 强制移除最小宽度限制 */
    width: auto !important; /* 强制使用自动宽度 */
}

/* 确保表头中的图标和链接不影响宽度计算 */
th a,
th img {
    display: inline-block;
    vertical-align: middle;
}

th img#himg2 {
    width: 20px;
    height: 20px;
    margin: 0 2px;
}

/* 为各列设置最大宽度限制，允许列宽随容器大小自由缩小，不设最小宽度 */
th#top,
td:nth-child(1) {
    width: auto;
}

/* 名字列 - 减少30%宽度，从25%减少到17.5% */
th:nth-child(2),
td#sp {
    max-width: 17.5%; /* 减少30%：25% * 0.7 = 17.5% */
    width: auto;
}

th:nth-child(3),
th:nth-child(4),
td:nth-child(3),
td:nth-child(4) {
    width: auto;
}

th:nth-child(5),
td:nth-child(5) {
    width: auto;
}

th:nth-child(6),
td:nth-child(6) {
    width: auto;
}

th:nth-child(7),
th:nth-child(8),
td:nth-child(7),
td:nth-child(8) {
    width: auto;
}

th:nth-child(9),
th:nth-child(10),
th:nth-child(11),
td:nth-child(9),
td:nth-child(10),
td:nth-child(11) {
    width: auto;
}

th:nth-child(12),
th:nth-child(13),
th:nth-child(14),
td:nth-child(12),
td:nth-child(13),
td:nth-child(14) {
    width: auto;
}

th:nth-child(15),
td:nth-child(15) {
    width: auto;
}

th:nth-child(16),
td:nth-child(16) {
    width: auto;
}

th#v,
td:nth-child(17) {
    width: auto;
}

th a:link, th a:visited {
    color: inherit;
    text-decoration: none;
}

th:hover {
    color: white;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* 表格行样式 */
tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

tbody tr:hover {
    background: rgba(255, 215, 0, 0.08);
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

td {
    padding: 8px 5px;
    text-align: center;
    color: #e0e0e0;
    border: none;
    font-size: 14px;
    position: relative;
    text-shadow: 0px 1px 3px black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0 !important; /* 强制移除最小宽度限制 */
    width: auto !important; /* 强制使用自动宽度 */
    box-sizing: border-box;
}

/* 名字列特殊处理 - 左对齐，允许自适应宽度 */
td#sp {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:hover {
    color: white;
}

/* 特殊单元格样式 */
#sp {
    text-align: left;
    width: auto !important; /* 确保名字列可以自由调整宽度 */
    min-width: 0 !important; /* 移除任何可能的最小宽度 */
}

#sp a:hover {
    cursor: pointer;
    text-decoration: underline;
}

/* 排名图标样式 - 保持原有形状 */
#z:hover, #w:hover, #y:hover { 
    transform: scale(1.1); 
    transition: all 0.3s ease;
}

#z, #w, #y {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

#z { background-image: url('./img/icon-first.png'); }
#w { background-image: url('./img/icon-second.png'); }
#y { background-image: url('./img/icon-third.png'); }

/* 军衔图标样式 - 保持原有形状 */
#r1:hover, #r2:hover, #r3:hover, #r4:hover, #r5:hover, #r6:hover, #r7:hover, #r8:hover, #r9:hover, #r10:hover, #r11:hover, #r12:hover, #r13:hover, #r14:hover, #r15:hover, #r16:hover, #r17:hover, #r18:hover, #r19:hover, #r20:hover, #r21:hover, #r22:hover, #r23:hover, #r24:hover, #r25:hover, #r26:hover, #r27:hover, #r28:hover, #r29:hover, #r30:hover, #r31:hover, #r32:hover, #r33:hover, #r34:hover, #r35:hover, #r36:hover, #r37:hover, #r38:hover, #r39:hover, #r40:hover, #r41:hover, #r42:hover, #r43:hover, #r44:hover, #r45:hover, #r46:hover, #r47:hover, #r48:hover, #r49:hover, #r50:hover, #r51:hover, #r52:hover, #r53:hover { 
    background-size: contain; 
    transition: all 0.3s ease;
}

#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, #r11, #r12, #r13, #r14, #r15, #r16, #r17, #r18, #r19, #r20, #r21, #r22, #r23, #r24, #r25, #r26, #r27, #r28, #r29, #r30, #r31, #r32, #r33, #r34, #r35, #r36, #r37, #r38, #r39, #r40, #r41, #r42, #r43, #r44, #r45, #r46, #r47, #r48, #r49, #r50, #r51, #r52, #r53 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    width:10%;
}

/* 保持原有的军衔图标 */
#r1 { background-image: url('./img/ranks/rank0.png'); }
#r2 { background-image: url('./img/ranks/rank1.png'); }
#r3 { background-image: url('./img/ranks/rank2.png'); }
#r4 { background-image: url('./img/ranks/rank3.png'); }
#r5 { background-image: url('./img/ranks/rank4.png'); }
#r6 { background-image: url('./img/ranks/rank5.png'); }
#r7 { background-image: url('./img/ranks/rank6.png'); }
#r8 { background-image: url('./img/ranks/rank7.png'); }
#r9 { background-image: url('./img/ranks/rank8.png'); }
#r10 { background-image: url('./img/ranks/rank9.png'); }
#r11 { background-image: url('./img/ranks/rank10.png'); }
#r12 { background-image: url('./img/ranks/rank11.png'); }
#r13 { background-image: url('./img/ranks/rank12.png'); }
#r14 { background-image: url('./img/ranks/rank13.png'); }
#r15 { background-image: url('./img/ranks/rank14.png'); }
#r16 { background-image: url('./img/ranks/rank15.png'); }
#r17 { background-image: url('./img/ranks/rank16.png'); }
#r18 { background-image: url('./img/ranks/rank17.png'); }
#r19 { background-image: url('./img/ranks/rank18.png'); }
#r20 { background-image: url('./img/ranks/rank19.png'); }
#r21 { background-image: url('./img/ranks/rank20.png'); }
#r22 { background-image: url('./img/ranks/rank21.png'); }
#r23 { background-image: url('./img/ranks/rank22.png'); }
#r24 { background-image: url('./img/ranks/rank23.png'); }
#r25 { background-image: url('./img/ranks/rank24.png'); }
#r26 { background-image: url('./img/ranks/rank25.png'); }
#r27 { background-image: url('./img/ranks/rank26.png'); }
#r28 { background-image: url('./img/ranks/rank27.png'); }
#r29 { background-image: url('./img/ranks/rank28.png'); }
#r30 { background-image: url('./img/ranks/rank29.png'); }
#r31 { background-image: url('./img/ranks/rank30.png'); }
#r32 { background-image: url('./img/ranks/rank31.png'); }
#r33 { background-image: url('./img/ranks/rank32.png'); }
#r34 { background-image: url('./img/ranks/rank33.png'); }
#r35 { background-image: url('./img/ranks/rank34.png'); }
#r36 { background-image: url('./img/ranks/rank35.png'); }
#r37 { background-image: url('./img/ranks/rank36.png'); }
#r38 { background-image: url('./img/ranks/rank37.png'); }
#r39 { background-image: url('./img/ranks/rank38.png'); }
#r40 { background-image: url('./img/ranks/rank39.png'); }
#r41 { background-image: url('./img/ranks/rank40.png'); }
#r42 { background-image: url('./img/ranks/rank41.png'); }
#r43 { background-image: url('./img/ranks/rank42.png'); }
#r44 { background-image: url('./img/ranks/rank43.png'); }
#r45 { background-image: url('./img/ranks/rank44.png'); }
#r46 { background-image: url('./img/ranks/rank45.png'); }
#r47 { background-image: url('./img/ranks/rank46.png'); }
#r48 { background-image: url('./img/ranks/rank47.png'); }
#r49 { background-image: url('./img/ranks/rank48.png'); }
#r50 { background-image: url('./img/ranks/rank49.png'); }
#r51 { background-image: url('./img/ranks/rank50.png'); }
#r52 { background-image: url('./img/ranks/rank51.png'); }
#r53 { background-image: url('./img/ranks/rank52.png'); }

/* 保持原有的国旗图标 */
#o0, #o1 {
    display:inline-block;
    background-size:20px;
    background-repeat: no-repeat;
    background-position-y:center;
    padding-left:25px;
    width: auto; /* 移除固定宽度，允许自适应 */
    max-width: 100%; /* 最多占父容器100% */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#o0 { background-image: url('./img/offline.png'); }
#o1 { background-image: url('./img/online.png'); }

/* 保持原有的国旗样式 */
#nn, #ad, #ae, #af, #ag, #ai, #al, #am, #ao, #aq, #ar, #as, #at, #au, #aw, #az, #ba, #bb, #bd, #be, #bf, #bg, #bh, #bi, #bj, #bm, #bn, #bo, #br, #bs, #bt, #bw, #by, #bz, #ca, #cc, #cd, #cf, #cg, #ch, #ci, #ck, #cl, #cm, #cn, #co, #cr, #cu, #cw, #cx, #cy, #cz, #de, #dj, #dk, #dm, #do, #dz, #ec, #ee, #eg, #eh, #er, #es, #et, #fi, #fj, #fk, #fo, #fr, #ga, #gb, #gd, #ge, #gg, #gh, #gi, #gl, #gm, #gn, #gq, #gr, #gt, #gu, #gw, #gy, #hk, #hn, #hr, #ht, #hu, #id, #ie, #il, #im, #in, #io, #iq, #ir, #is, #it, #je, #jm, #jo, #jp, #ke, #kg, #kh, #ki, #km, #kn, #kp, #kr, #kw, #ky, #kz, #la, #lb, #lc, #li, #lk, #lr, #ls, #lt, #lu, #lv, #ly, #ma, #mc, #md, #me, #mg, #mh, #mk, #ml, #mm, #mn, #mp, #mr, #ms, #mt, #mu, #mv, #mw, #mx, #my, #mz, #na, #ne, #ng, #ni, #nl, #np, #nr, #nu, #nz, #om, #pa, #pe, #pf, #pg, #ph, #pk, #pl, #pn, #pr, #pt, #pw, #py, #qa, #ro, #rs, #ru, #rw, #sa, #sb, #sc, #sd, #se, #sg, #sh, #si, #sj, #sk, #sl, #sm, #sn, #so, #sr, #ss, #st, #sv, #sx, #sy, #sz, #tc, #td, #tg, #th, #tj, #tk, #tm, #tn, #to, #tr, #tt, #tv, #tw, #tz, #ua, #ug, #us, #uy, #uz, #vc, #ve, #vn, #vu, #wf, #ws, #ye, #yt, #xk, #za, #zm, #zw {
    display:inline-block;
    background-repeat: no-repeat;
    background-position-y:center;
    background-size:20px;
    padding-left:25px;
}

/* 保持原有的国旗图片路径 */
#nn { background-image: url('./img/countries/nn.png'); }
#ad { background-image: url('./img/countries/ad.png'); }
#ae { background-image: url('./img/countries/ae.png'); }
#af { background-image: url('./img/countries/af.png'); }
/* ... 其他国旗样式保持不变 ... */

/* 保持原有的段位样式 */
#sk1 td {
    color: black;
    text-shadow: 0px 0px 0px black;
}

#sk1 {
    width: auto; /* 移除固定宽度，允许自适应 */
    min-width: 0; /* 移除最小宽度限制 */
    max-width: 100%; /* 最多占父容器100% */
    line-height:10px;
    margin:auto;
    border-style:solid;
    border-width:0;
    border-spacing:1px;
    box-shadow: 0px 0px 0px;
    border-radius:3px;
}

#sk11 {
    font-size:12px;
    width: auto; /* 移除固定宽度，允许自适应 */
    min-width: 0; /* 移除最小宽度限制 */
    max-width: 100%; /* 最多占父容器100% */
    font-weight:bold;
}

#sk12 {
    font-size:11px;
    width: auto; /* 移除固定宽度，允许自适应 */
    min-width: 0; /* 移除最小宽度限制 */
    max-width: 100%; /* 最多占父容器100% */
    background: rgba(255, 255 ,255, 0.9);
    border-radius:3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 保持原有的头像和其他图标样式 */
#avatar { width: 15px; }
#vip { width: 15px; }
#steam { width:10px; }
#new {
    height: 15px;
    padding-left:5px;
}

#himg {
    width: 25px;
    display: block;
    margin: 0 auto;
}

#himg2 {
    width: 20px;
    display: block;
    margin: 0 auto;
}

/* 保持原有的爆头率样式 */
#hs { white-space: nowrap; }
#hs a:hover { color:white; }
#hs a {
    font-size:11px;
    color:#a9a9a9;
    height:17px;
}

/* 保持原有的MVP样式 */
#s { white-space: nowrap; }
#s a:hover { color:white; }
#s a {
    font-size:11px;
    display:inline;
    position:relative;
    bottom:6px;
    right:2px;
    color:#a9a9a9;
}

/* 保持原有的表格行样式 */
#a {
    height:35px;
    background: rgba(93, 94, 105, 0.7);
}

#b {
    background: rgba(0, 0, 0, 0.3);
}

#i {
    background: rgba(255, 215, 0, 0.2);
}

/* 现代化按钮样式 */
.button {
    height:30px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.4));
    color: #FFD700;
    font-size: 17px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius:5px;
    font-weight:bold;
    transition: all 0.3s ease;
    padding: 5px 15px;
    cursor: pointer;
}

.button:hover {
    color: #FFFF00;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(0, 0, 0, 0.5));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

/* 现代化搜索栏样式 */
.search-bar {
    height:30px;
    font-size: 17px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius:5px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 0 10px;
}

.search-bar:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* 分页容器样式 */
.pagination-container {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* 现代化分页样式 */
.pagination {
    margin: 0;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.pagination a, .pagination strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-left: 3px solid rgba(255, 215, 0, 0.5);
    border-right: 3px solid rgba(255, 215, 0, 0.5);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background: rgba(255, 215, 0, 0.2);
    color: #FFFF00;
    transform: translateY(-2px);
}

.pagination strong {
    background: rgba(255, 215, 0, 0.3);
    color: #FFFF00;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* 表单控件样式 */
.form-control {
    padding-top:15px;
    padding-left:0;
    text-align:center;
    white-space: nowrap;
    overflow: visible;
    display: inline-block;
    vertical-align: middle;
}

/* 国旗样式 */
#nn, #ad, #ae, #af, #ag, #ai, #al, #am, #ao, #aq, #ar, #as, #at, #au, #aw, #az, #ba, #bb, #bd, #be, #bf, #bg, #bh, #bi, #bj, #bm, #bn, #bo, #br, #bs, #bt, #bw, #by, #bz, #ca, #cc, #cd, #cf, #cg, #ch, #ci, #ck, #cl, #cm, #cn, #co, #cr, #cu, #cw, #cx, #cy, #cz, #de, #dj, #dk, #dm, #do, #dz, #ec, #ee, #eg, #eh, #er, #es, #et, #fi, #fj, #fk, #fo, #fr, #ga, #gb, #gd, #ge, #gg, #gh, #gi, #gl, #gm, #gn, #gq, #gr, #gt, #gu, #gw, #gy, #hk, #hn, #hr, #ht, #hu, #id, #ie, #il, #im, #in, #io, #iq, #ir, #is, #it, #je, #jm, #jo, #jp, #ke, #kg, #kh, #ki, #km, #kn, #kp, #kr, #kw, #ky, #kz, #la, #lb, #lc, #li, #lk, #lr, #ls, #lt, #lu, #lv, #ly, #ma, #mc, #md, #me, #mg, #mh, #mk, #ml, #mm, #mn, #mp, #mr, #ms, #mt, #mu, #mv, #mw, #mx, #my, #mz, #na, #ne, #ng, #ni, #nl, #np, #nr, #nu, #nz, #om, #pa, #pe, #pf, #pg, #ph, #pk, #pl, #pn, #pr, #pt, #pw, #py, #qa, #ro, #rs, #ru, #rw, #sa, #sb, #sc, #sd, #se, #sg, #sh, #si, #sj, #sk, #sl, #sm, #sn, #so, #sr, #ss, #st, #sv, #sx, #sy, #sz, #tc, #td, #tg, #th, #tj, #tk, #tm, #tn, #to, #tr, #tt, #tv, #tw, #tz, #ua, #ug, #us, #uy, #uz, #vc, #ve, #vn, #vu, #wf, #ws, #ye, #yt, #xk, #za, #zm, #zw
{
	display:inline-block;
    background-repeat: no-repeat;
	background-position-y:center;
	background-size:20px;
	padding-left:25px;
}
#nn { background-image: url('./img/countries/nn.png'); }
#ad { background-image: url('./img/countries/ad.png'); }
#ae { background-image: url('./img/countries/ae.png'); }
#af { background-image: url('./img/countries/af.png'); }
#ag { background-image: url('./img/countries/ag.png'); }
#ai { background-image: url('./img/countries/ai.png'); }
#al { background-image: url('./img/countries/al.png'); }
#am { background-image: url('./img/countries/am.png'); }
#ao { background-image: url('./img/countries/ao.png'); }
#aq { background-image: url('./img/countries/aq.png'); }
#ar { background-image: url('./img/countries/ar.png'); }
#as { background-image: url('./img/countries/as.png'); }
#at { background-image: url('./img/countries/at.png'); }
#au { background-image: url('./img/countries/au.png'); }
#aw { background-image: url('./img/countries/aw.png'); }
#az { background-image: url('./img/countries/az.png'); }
#ba { background-image: url('./img/countries/ba.png'); }
#bb { background-image: url('./img/countries/bb.png'); }
#bd { background-image: url('./img/countries/bd.png'); }
#be { background-image: url('./img/countries/be.png'); }
#bf { background-image: url('./img/countries/bf.png'); }
#bg { background-image: url('./img/countries/bg.png'); }
#bh { background-image: url('./img/countries/bh.png'); }
#bi { background-image: url('./img/countries/bi.png'); }
#bj { background-image: url('./img/countries/bj.png'); }
#bm { background-image: url('./img/countries/bm.png'); }
#bn { background-image: url('./img/countries/bn.png'); }
#bo { background-image: url('./img/countries/bo.png'); }
#br { background-image: url('./img/countries/br.png'); }
#bs { background-image: url('./img/countries/bs.png'); }
#bt { background-image: url('./img/countries/bt.png'); }
#bw { background-image: url('./img/countries/bw.png'); }
#by { background-image: url('./img/countries/by.png'); }
#bz { background-image: url('./img/countries/bz.png'); }
#ca { background-image: url('./img/countries/ca.png'); }
#cc { background-image: url('./img/countries/cc.png'); }
#cd { background-image: url('./img/countries/cd.png'); }
#cf { background-image: url('./img/countries/cf.png'); }
#cg { background-image: url('./img/countries/cg.png'); }
#ch { background-image: url('./img/countries/ch.png'); }
#ci { background-image: url('./img/countries/ci.png'); }
#ck { background-image: url('./img/countries/ck.png'); }
#cl { background-image: url('./img/countries/cl.png'); }
#cm { background-image: url('./img/countries/cm.png'); }
#cn { background-image: url('./img/countries/cn.png'); }
#co { background-image: url('./img/countries/co.png'); }
#cr { background-image: url('./img/countries/cr.png'); }
#cu { background-image: url('./img/countries/cu.png'); }
#cw { background-image: url('./img/countries/cw.png'); }
#cx { background-image: url('./img/countries/cx.png'); }
#cy { background-image: url('./img/countries/cy.png'); }
#cz { background-image: url('./img/countries/cz.png'); }
#de { background-image: url('./img/countries/de.png'); }
#dj { background-image: url('./img/countries/dj.png'); }
#dk { background-image: url('./img/countries/dk.png'); }
#dm { background-image: url('./img/countries/dm.png'); }
#do { background-image: url('./img/countries/do.png'); }
#dz { background-image: url('./img/countries/dz.png'); }
#ec { background-image: url('./img/countries/ec.png'); }
#ee { background-image: url('./img/countries/ee.png'); }
#eg { background-image: url('./img/countries/eg.png'); }
#eh { background-image: url('./img/countries/eh.png'); }
#er { background-image: url('./img/countries/er.png'); }
#es { background-image: url('./img/countries/es.png'); }
#et { background-image: url('./img/countries/et.png'); }
#fi { background-image: url('./img/countries/fi.png'); }
#fj { background-image: url('./img/countries/fj.png'); }
#fk { background-image: url('./img/countries/fk.png'); }
#fo { background-image: url('./img/countries/fo.png'); }
#fr { background-image: url('./img/countries/fr.png'); }
#ga { background-image: url('./img/countries/ga.png'); }
#gb { background-image: url('./img/countries/gb.png'); }
#gd { background-image: url('./img/countries/gd.png'); }
#ge { background-image: url('./img/countries/ge.png'); }
#gg { background-image: url('./img/countries/gg.png'); }
#gh { background-image: url('./img/countries/gh.png'); }
#gi { background-image: url('./img/countries/gi.png'); }
#gl { background-image: url('./img/countries/gl.png'); }
#gm { background-image: url('./img/countries/gm.png'); }
#gn { background-image: url('./img/countries/gn.png'); }
#gq { background-image: url('./img/countries/gq.png'); }
#gr { background-image: url('./img/countries/gr.png'); }
#gt { background-image: url('./img/countries/gt.png'); }
#gu { background-image: url('./img/countries/gu.png'); }
#gw { background-image: url('./img/countries/gw.png'); }
#gy { background-image: url('./img/countries/gy.png'); }
#hk { background-image: url('./img/countries/hk.png'); }
#hn { background-image: url('./img/countries/hn.png'); }
#hr { background-image: url('./img/countries/hr.png'); }
#ht { background-image: url('./img/countries/ht.png'); }
#hu { background-image: url('./img/countries/hu.png'); }
#id { background-image: url('./img/countries/id.png'); }
#ie { background-image: url('./img/countries/ie.png'); }
#il { background-image: url('./img/countries/il.png'); }
#im { background-image: url('./img/countries/im.png'); }
#in { background-image: url('./img/countries/in.png'); }
#io { background-image: url('./img/countries/io.png'); }
#iq { background-image: url('./img/countries/iq.png'); }
#ir { background-image: url('./img/countries/ir.png'); }
#is { background-image: url('./img/countries/is.png'); }
#it { background-image: url('./img/countries/it.png'); }
#je { background-image: url('./img/countries/je.png'); }
#jm { background-image: url('./img/countries/jm.png'); }
#jo { background-image: url('./img/countries/jo.png'); }
#jp { background-image: url('./img/countries/jp.png'); }
#ke { background-image: url('./img/countries/ke.png'); }
#kg { background-image: url('./img/countries/kg.png'); }
#kh { background-image: url('./img/countries/kh.png'); }
#ki { background-image: url('./img/countries/ki.png'); }
#km { background-image: url('./img/countries/km.png'); }
#kn { background-image: url('./img/countries/kn.png'); }
#kp { background-image: url('./img/countries/kp.png'); }
#kr { background-image: url('./img/countries/kr.png'); }
#kw { background-image: url('./img/countries/kw.png'); }
#ky { background-image: url('./img/countries/ky.png'); }
#kz { background-image: url('./img/countries/kz.png'); }
#la { background-image: url('./img/countries/la.png'); }
#lb { background-image: url('./img/countries/lb.png'); }
#lc { background-image: url('./img/countries/lc.png'); }
#li { background-image: url('./img/countries/li.png'); }
#lk { background-image: url('./img/countries/lk.png'); }
#lr { background-image: url('./img/countries/lr.png'); }
#ls { background-image: url('./img/countries/ls.png'); }
#lt { background-image: url('./img/countries/lt.png'); }
#lu { background-image: url('./img/countries/lu.png'); }
#lv { background-image: url('./img/countries/lv.png'); }
#ly { background-image: url('./img/countries/ly.png'); }
#ma { background-image: url('./img/countries/ma.png'); }
#mc { background-image: url('./img/countries/mc.png'); }
#md { background-image: url('./img/countries/md.png'); }
#me { background-image: url('./img/countries/me.png'); }
#mg { background-image: url('./img/countries/mg.png'); }
#mh { background-image: url('./img/countries/mh.png'); }
#mk { background-image: url('./img/countries/mk.png'); }
#ml { background-image: url('./img/countries/ml.png'); }
#mm { background-image: url('./img/countries/mm.png'); }
#mn { background-image: url('./img/countries/mn.png'); }
#mp { background-image: url('./img/countries/mp.png'); }
#mr { background-image: url('./img/countries/mr.png'); }
#ms { background-image: url('./img/countries/ms.png'); }
#mt { background-image: url('./img/countries/mt.png'); }
#mu { background-image: url('./img/countries/mu.png'); }
#mv { background-image: url('./img/countries/mv.png'); }
#mw { background-image: url('./img/countries/mw.png'); }
#mx { background-image: url('./img/countries/mx.png'); }
#my { background-image: url('./img/countries/my.png'); }
#mz { background-image: url('./img/countries/mz.png'); }
#na { background-image: url('./img/countries/na.png'); }
#ne { background-image: url('./img/countries/ne.png'); }
#ng { background-image: url('./img/countries/ng.png'); }
#ni { background-image: url('./img/countries/ni.png'); }
#nl { background-image: url('./img/countries/nl.png'); }
#np { background-image: url('./img/countries/np.png'); }
#nr { background-image: url('./img/countries/nr.png'); }
#nu { background-image: url('./img/countries/nu.png'); }
#nz { background-image: url('./img/countries/nz.png'); }
#om { background-image: url('./img/countries/om.png'); }
#pa { background-image: url('./img/countries/pa.png'); }
#pe { background-image: url('./img/countries/pe.png'); }
#pf { background-image: url('./img/countries/pf.png'); }
#pg { background-image: url('./img/countries/pg.png'); }
#ph { background-image: url('./img/countries/ph.png'); }
#pk { background-image: url('./img/countries/pk.png'); }
#pl { background-image: url('./img/countries/pl.png'); }
#pn { background-image: url('./img/countries/pn.png'); }
#pr { background-image: url('./img/countries/pr.png'); }
#pt { background-image: url('./img/countries/pt.png'); }
#pw { background-image: url('./img/countries/pw.png'); }
#py { background-image: url('./img/countries/py.png'); }
#qa { background-image: url('./img/countries/qa.png'); }
#ro { background-image: url('./img/countries/ro.png'); }
#rs { background-image: url('./img/countries/rs.png'); }
#ru { background-image: url('./img/countries/ru.png'); }
#rw { background-image: url('./img/countries/rw.png'); }
#sa { background-image: url('./img/countries/sa.png'); }
#sb { background-image: url('./img/countries/sb.png'); }
#sc { background-image: url('./img/countries/sc.png'); }
#sd { background-image: url('./img/countries/sd.png'); }
#se { background-image: url('./img/countries/se.png'); }
#sg { background-image: url('./img/countries/sg.png'); }
#sh { background-image: url('./img/countries/sh.png'); }
#si { background-image: url('./img/countries/si.png'); }
#sj { background-image: url('./img/countries/sj.png'); }
#sk { background-image: url('./img/countries/sk.png'); }
#sl { background-image: url('./img/countries/sl.png'); }
#sm { background-image: url('./img/countries/sm.png'); }
#sn { background-image: url('./img/countries/sn.png'); }
#so { background-image: url('./img/countries/so.png'); }
#sr { background-image: url('./img/countries/sr.png'); }
#ss { background-image: url('./img/countries/ss.png'); }
#st { background-image: url('./img/countries/st.png'); }
#sv { background-image: url('./img/countries/sv.png'); }
#sx { background-image: url('./img/countries/sx.png'); }
#sy { background-image: url('./img/countries/sy.png'); }
#sz { background-image: url('./img/countries/sz.png'); }
#tc { background-image: url('./img/countries/tc.png'); }
#td { background-image: url('./img/countries/td.png'); }
#tg { background-image: url('./img/countries/tg.png'); }
#th { background-image: url('./img/countries/th.png'); }
#tj { background-image: url('./img/countries/tj.png'); }
#tk { background-image: url('./img/countries/tk.png'); }
#tm { background-image: url('./img/countries/tm.png'); }
#tn { background-image: url('./img/countries/tn.png'); }
#to { background-image: url('./img/countries/to.png'); }
#tr { background-image: url('./img/countries/tr.png'); }
#tt { background-image: url('./img/countries/tt.png'); }
#tv { background-image: url('./img/countries/tv.png'); }
#tw { background-image: url('./img/countries/tw.png'); }
#tz { background-image: url('./img/countries/tz.png'); }
#ua { background-image: url('./img/countries/ua.png'); }
#ug { background-image: url('./img/countries/ug.png'); }
#us { background-image: url('./img/countries/us.png'); }
#uy { background-image: url('./img/countries/uy.png'); }
#uz { background-image: url('./img/countries/uz.png'); }
#vc { background-image: url('./img/countries/vc.png'); }
#ve { background-image: url('./img/countries/ve.png'); }
#vn { background-image: url('./img/countries/vn.png'); }
#vu { background-image: url('./img/countries/vu.png'); }
#wf { background-image: url('./img/countries/wf.png'); }
#ws { background-image: url('./img/countries/ws.png'); }
#ye { background-image: url('./img/countries/ye.png'); }
#yt { background-image: url('./img/countries/yt.png'); }
#xk { background-image: url('./img/countries/xk.png'); }
#za { background-image: url('./img/countries/za.png'); }
#zm { background-image: url('./img/countries/zm.png'); }
#zw { background-image: url('./img/countries/zw.png'); }

/* 在线状态图标样式 */
#o0, #o1 {
	display:inline-block;
	background-size:8px;
	background-repeat: no-repeat;
	background-position-y:center;
	padding-left:15px;
	width: auto; /* 移除固定宽度，允许自适应 */
	max-width: 100%; /* 最多占父容器100% */
   	overflow: hidden;
   	text-overflow: ellipsis;
   	white-space: nowrap;
}
#o0 { background-image: url('./img/offline.png'); }
#o1 { background-image: url('./img/online.png'); }

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .title-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .table-container {
        padding: 10px;
        /* 确保在小屏幕上可以横向滚动 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 12px;
        /* 小屏幕上使用更小的字体，让更多内容可见 */
    }

    th, td {
        padding: 6px 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        box-sizing: border-box;
    }

    /* 小屏幕上移除所有宽度限制，允许列宽完全自由缩小 */
    th#top,
    td:nth-child(1) {
        width: auto;
    }

    th:nth-child(2),
    td#sp {
        max-width: 21%; /* 减少30%：30% * 0.7 = 21% */
        width: auto;
    }

    th:nth-child(3),
    th:nth-child(4),
    td:nth-child(3),
    td:nth-child(4) {
        width: auto;
    }

    th:nth-child(5),
    td:nth-child(5) {
        width: auto;
    }

    th:nth-child(6),
    td:nth-child(6) {
        width: auto;
    }

    th:nth-child(7),
    th:nth-child(8),
    td:nth-child(7),
    td:nth-child(8) {
        width: auto;
    }

    th:nth-child(9),
    th:nth-child(10),
    th:nth-child(11),
    th:nth-child(12),
    th:nth-child(13),
    th:nth-child(14),
    td:nth-child(9),
    td:nth-child(10),
    td:nth-child(11),
    td:nth-child(12),
    td:nth-child(13),
    td:nth-child(14) {
        width: auto;
    }

    th:nth-child(15),
    td:nth-child(15) {
        width: auto;
    }

    th:nth-child(16),
    th#v,
    td:nth-child(16),
    td:nth-child(17) {
        width: auto;
    }

    .button {
        padding: 5px 10px;
        font-size: 14px;
    }

    .search-bar {
        width: 150px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .table-container {
        /* 中等屏幕上也可以横向滚动 */
        overflow-x: auto;
    }

    table {
        font-size: 14px;
    }

    th, td {
        padding: 10px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* 中等屏幕上移除所有宽度限制，允许列宽完全自由缩小 */
    th#top,
    td:nth-child(1) {
        width: auto;
    }

    th:nth-child(2),
    td#sp {
        max-width: 15.4%; /* 减少30%：22% * 0.7 = 15.4% */
        width: auto;
    }

    th:nth-child(3),
    th:nth-child(4),
    td:nth-child(3),
    td:nth-child(4) {
        width: auto;
    }

    th:nth-child(5),
    td:nth-child(5) {
        width: auto;
    }

    th:nth-child(6),
    td:nth-child(6) {
        width: auto;
    }

    th:nth-child(7),
    th:nth-child(8),
    td:nth-child(7),
    td:nth-child(8) {
        width: auto;
    }

    th:nth-child(9),
    th:nth-child(10),
    th:nth-child(11),
    th:nth-child(12),
    th:nth-child(13),
    th:nth-child(14),
    td:nth-child(9),
    td:nth-child(10),
    td:nth-child(11),
    td:nth-child(12),
    td:nth-child(13),
    td:nth-child(14) {
        width: auto;
    }

    th:nth-child(15),
    td:nth-child(15) {
        width: auto;
    }

    th:nth-child(16),
    th#v,
    td:nth-child(16),
    td:nth-child(17) {
        width: auto;
    }
}