.ranking-shell{display:grid;gap:20px}
.ranking-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 28px}
.ranking-eyebrow{display:block;color:#43a8c9;font-size:10px;font-weight:900;letter-spacing:2px}
.ranking-intro h2{margin:5px 0 6px;font-size:22px;color:#214c63}
.ranking-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.ranking-intro .refresh-note{text-align:right;flex:none;color:#528195;font-size:11px;line-height:1.8}
.ranking-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.ranking-tabs button{min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #d8e9ef;border-radius:14px;background:#f8fcfd;color:#527184;font-size:12px;font-weight:900;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s;cursor:pointer}
.ranking-tabs button:hover{border-color:#7cc9df;transform:translateY(-1px)}
.ranking-tabs button.active{border-color:#3eb0d4;background:linear-gradient(135deg,#e7f9ff,#fff8db);color:#176f92;box-shadow:0 8px 20px rgba(41,155,194,.12)}
.ranking-tabs button span{color:#69a9bd;font-size:10px;letter-spacing:1px}
.ranking-panel{padding:0;overflow:hidden}
.ranking-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 26px;border-bottom:1px solid var(--line)}
.ranking-caption h2{margin:0;font-size:20px}
.ranking-caption span{padding:6px 10px;border-radius:999px;background:#edf8fb;color:#477284;font-size:11px;font-weight:800}
.ranking-scroll{overflow-x:auto}
.ranking-table{width:100%;min-width:700px;border-collapse:collapse;text-align:left;font-size:13px}
.ranking-table th{background:#f1f9fb;color:#628395;font-size:11px;font-weight:900}
.ranking-table th,.ranking-table td{padding:12px 20px;border-bottom:1px solid #e5f0f3}
.ranking-table th:first-child,.ranking-table td:first-child{width:90px;padding-left:26px}
.ranking-table th:nth-child(2),.ranking-table td:nth-child(2){min-width:190px}
.ranking-table tbody tr:last-child td{border-bottom:0}
.ranking-table tbody tr:hover{background:#f7fcfe}
.ranking-table td{height:59px;color:#587486}
.ranking-table .character{color:#214c63;font-weight:900;overflow-wrap:anywhere}
.ranking-table .score{color:#167da7;font-weight:900;font-variant-numeric:tabular-nums}
.ranking-table .numeric{font-variant-numeric:tabular-nums}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:37px;height:34px;border-radius:10px;background:#e9f4f8;color:#4785a1;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.rank-badge.first{background:linear-gradient(135deg,#f5af35,#ffd670);color:#754b08}
.rank-badge.second{background:linear-gradient(135deg,#a2bac7,#dce9ed);color:#4b6575}
.rank-badge.third{background:linear-gradient(135deg,#eb9b73,#f7c6a2);color:#754228}
.ranking-message{text-align:center;margin:0;padding:38px 20px;color:var(--muted);font-size:13px}
.ranking-footnote{margin:0 3px;color:var(--muted);font-size:11px;line-height:1.7}
@media(max-width:900px){.ranking-shell{margin:-25px 15px 50px}.ranking-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.ranking-intro{align-items:flex-start}.ranking-intro .refresh-note{white-space:normal}}
@media(max-width:520px){.ranking-shell{gap:15px}.ranking-intro{display:block;padding:21px}.ranking-intro .refresh-note{text-align:left;margin-top:12px}.ranking-tabs{gap:7px;padding:11px}.ranking-tabs button{min-height:52px;padding:8px;font-size:10px}.ranking-tabs button span{font-size:9px}.ranking-caption{padding:17px}.ranking-table th,.ranking-table td{padding:10px 12px}.ranking-table th:first-child,.ranking-table td:first-child{padding-left:16px}}