.msb-charts{position:relative;margin:16px 18px 10px;padding:20px;border:1px solid rgba(255,255,255,.075);border-radius:24px;background:radial-gradient(circle at 94% -8%,rgba(30,215,96,.13),transparent 33%),linear-gradient(160deg,rgba(18,20,19,.99),rgba(10,11,11,.995));color:var(--text,#fff);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.17)}
.msb-charts:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(102deg,transparent 0,rgba(255,255,255,.018) 45%,transparent 73%);opacity:.7}
.msb-charts>*{position:relative;z-index:1}
.msb-charts__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}
.msb-charts__title-wrap{min-width:0}
.msb-charts__title-wrap h2{display:flex;align-items:center;gap:10px;margin:0;font-size:22px;line-height:1.35;font-weight:950;letter-spacing:-.35px}
.msb-charts__title-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(30,215,96,.22);border-radius:11px;background:rgba(30,215,96,.105);color:var(--primary,#1ed760);box-shadow:inset 0 0 0 1px rgba(30,215,96,.025)}
.msb-charts__title-icon i{font-size:14px}
.msb-charts__title-wrap p{margin:6px 0 0;color:var(--text-sec,#929792);font-size:10.2px;line-height:1.8}
.msb-charts__tabs{display:flex;align-items:center;gap:7px;margin:0 0 14px;padding:2px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.msb-charts__tabs::-webkit-scrollbar{display:none}
.msb-charts__tab{appearance:none;min-height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(255,255,255,.022);color:#aab0ab;font:inherit;font-size:9.5px;font-weight:850;white-space:nowrap;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}
.msb-charts__tab:hover{border-color:rgba(30,215,96,.18);color:#dce1dd}
.msb-charts__tab:active{transform:scale(.98)}
.msb-charts__tab.is-active{border-color:rgba(30,215,96,.27);background:linear-gradient(135deg,rgba(30,215,96,.16),rgba(30,215,96,.075));color:var(--primary,#1ed760);box-shadow:inset 0 0 0 1px rgba(30,215,96,.025)}
.msb-charts__panel[hidden]{display:none!important}
.msb-charts__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;min-width:0}
.msb-chart-track{position:relative;box-sizing:border-box;display:grid;grid-template-columns:27px 56px minmax(0,1fr) 40px;align-items:center;gap:9px;min-width:0;min-height:88px;padding:9px;border:1px solid rgba(255,255,255,.072);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012));box-shadow:0 7px 22px rgba(0,0,0,.085);transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;contain:layout paint}
.msb-chart-track:after{content:"";position:absolute;inset-inline-start:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:transparent;opacity:0;transition:opacity .16s ease}
.msb-chart-track:hover{border-color:rgba(30,215,96,.21);background:linear-gradient(145deg,rgba(30,215,96,.055),rgba(255,255,255,.016));transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.msb-chart-track:nth-child(-n+3){border-color:rgba(30,215,96,.12);background:linear-gradient(145deg,rgba(30,215,96,.047),rgba(255,255,255,.012))}
.msb-chart-track:nth-child(-n+3):after{background:var(--primary,#1ed760);opacity:.42}
.msb-chart-track:nth-child(1){border-color:rgba(30,215,96,.25);box-shadow:inset 0 0 0 1px rgba(30,215,96,.022),0 9px 26px rgba(0,0,0,.11)}
.msb-chart-track:nth-child(1):after{opacity:.9}
.msb-chart-track__rank{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid rgba(255,255,255,.065);border-radius:8px;background:rgba(255,255,255,.025);color:#838a84;font-size:10.5px;font-weight:950;text-align:center}
.msb-chart-track:nth-child(-n+3) .msb-chart-track__rank{border-color:rgba(30,215,96,.15);background:rgba(30,215,96,.075);color:var(--primary,#1ed760)}
.msb-chart-track:nth-child(1) .msb-chart-track__rank{border-color:rgba(30,215,96,.3);background:var(--primary,#1ed760);color:#07120a;box-shadow:0 5px 14px rgba(30,215,96,.13)}
.msb-chart-track__cover{position:relative;width:56px;height:56px;border-radius:13px;overflow:hidden;background:#171a18;box-shadow:0 6px 18px rgba(0,0,0,.23)}
.msb-chart-track__cover:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.06);border-radius:inherit;pointer-events:none}
.msb-chart-track__cover img{display:block;width:100%;height:100%;object-fit:cover}
.msb-chart-track__meta{min-width:0;overflow:hidden}
.msb-chart-track__meta>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text,#fff);font-size:11.8px;line-height:1.45;font-weight:900;text-decoration:none}
.msb-chart-track__meta>a:hover{color:var(--primary,#1ed760)}
.msb-chart-track__subline{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px}
.msb-chart-track__artist{display:block;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-sec,#979d98);font-size:8.9px;line-height:1.45}
.msb-chart-track__new{display:inline-flex;align-items:center;min-height:16px;padding:0 5px;border:1px solid rgba(30,215,96,.13);border-radius:999px;background:rgba(30,215,96,.078);color:var(--primary,#1ed760);font-size:7.2px;font-weight:900;white-space:nowrap}
.msb-chart-track__metrics{display:flex;align-items:stretch;gap:5px;min-width:0;margin-top:5px;overflow:hidden}
.msb-chart-track__metric{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;height:23px;padding:0 7px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.018);color:#8e958f;direction:inherit;line-height:1;white-space:nowrap}
.msb-chart-track__metric>i{flex:0 0 auto;font-size:7.8px;color:#858d87}
.msb-chart-track__metric--listeners{border-color:rgba(30,215,96,.09);background:rgba(30,215,96,.025)}
.msb-chart-track__metric--listeners>i{color:rgba(30,215,96,.9)}
.msb-chart-track__metric-copy{display:flex;align-items:center;gap:4px;min-width:0}
.msb-chart-track__metric em{overflow:hidden;text-overflow:ellipsis;color:#747b75;font-size:6.7px;font-style:normal;font-weight:750}
.msb-chart-track__metric b{color:#b7bdb8;font-size:8.2px;font-weight:950;font-variant-numeric:tabular-nums}
.msb-chart-track__metric--listeners b{color:#a8dcb8}
.msb-chart-track__play{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(30,215,96,.17);border-radius:13px;background:rgba(30,215,96,.09);color:var(--primary,#1ed760);cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;box-shadow:none}
.msb-chart-track__play:hover{border-color:rgba(30,215,96,.35);background:rgba(30,215,96,.17);transform:scale(1.04)}
.msb-chart-track__play:active{transform:scale(.97)}
.msb-chart-track__play i{font-size:11px}
.msb-chart-track__play.playing,.msb-chart-track__play.is-playing{border-color:var(--primary,#1ed760);background:var(--primary,#1ed760);color:#06110a}
.msb-charts__mobile-more{display:none}
.msb-trending-hub{isolation:isolate}
@media(max-width:1120px){.msb-charts__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
.msb-charts{margin:12px 10px 8px;padding:14px;border-radius:20px;background:radial-gradient(circle at 92% -5%,rgba(30,215,96,.14),transparent 37%),linear-gradient(160deg,rgba(17,19,18,.99),rgba(9,10,10,.995))}
.msb-charts__head{align-items:flex-start;flex-wrap:wrap;gap:8px 10px;margin-bottom:11px}
.msb-charts__title-wrap{flex:1 1 220px}
.msb-charts__title-wrap h2{font-size:19px;gap:8px}
.msb-charts__title-icon{width:32px;height:32px;border-radius:10px}
.msb-charts__title-wrap p{margin-top:5px;font-size:8.8px;line-height:1.7;max-width:520px}
.msb-charts__tabs{gap:6px;margin-bottom:11px;padding-bottom:1px}
.msb-charts__tab{min-height:32px;padding:0 11px;font-size:8.9px}
.msb-charts__list{grid-template-columns:1fr;gap:8px}
.msb-chart-track{grid-template-columns:26px 60px minmax(0,1fr) 42px;min-height:86px;padding:9px;gap:9px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.042),rgba(255,255,255,.012))}
.msb-chart-track:hover{transform:none}
.msb-chart-track__cover{width:60px;height:60px;border-radius:13px}
.msb-chart-track__rank{width:25px;height:25px;border-radius:8px;font-size:10.5px}
.msb-chart-track__meta>a{font-size:12.3px;line-height:1.45}
.msb-chart-track__artist{font-size:9.1px}
.msb-chart-track__play{width:42px;height:42px;border-radius:13px}
.msb-chart-track__metrics{margin-top:6px;gap:5px;overflow:visible}
.msb-chart-track__metric{height:24px;max-width:none;padding:0 6px;border-radius:8px}
.msb-chart-track__metric-copy{gap:4px}
.msb-chart-track__metric em{font-size:6.9px}
.msb-chart-track__metric b{font-size:8.5px}
.msb-chart-track--mobile-extra{display:none}
.msb-charts__list.is-expanded .msb-chart-track--mobile-extra{display:grid}
.msb-charts__mobile-more{appearance:none;width:100%;min-height:38px;margin:9px 0 0;padding:0 13px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025);color:#9ba29c;font:inherit;font-size:9.2px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.msb-charts__mobile-more i{font-size:8px;color:var(--primary,#1ed760);transition:transform .18s ease}
.msb-charts__mobile-more[aria-expanded="true"] i{transform:rotate(180deg)}
}
@media(max-width:430px){
.msb-charts{margin-inline:8px;padding:13px 11px;border-radius:19px}
.msb-charts__head{margin-bottom:10px}
.msb-charts__title-wrap{flex-basis:100%}
.msb-charts__title-wrap h2{font-size:18px}
.msb-charts__title-wrap p{font-size:8.5px}
.msb-charts__tab{min-height:31px;padding-inline:10px;font-size:8.5px}
.msb-chart-track{grid-template-columns:24px 56px minmax(0,1fr) 39px;min-height:82px;padding:8px;gap:8px;border-radius:15px}
.msb-chart-track__cover{width:56px;height:56px;border-radius:12px}
.msb-chart-track__rank{width:23px;height:23px;font-size:10px}
.msb-chart-track__meta>a{font-size:11.8px}
.msb-chart-track__artist{font-size:8.8px}
.msb-chart-track__new{min-height:15px;font-size:6.8px}
.msb-chart-track__metrics{gap:4px}
.msb-chart-track__metric{height:23px;padding-inline:5px;gap:4px}
.msb-chart-track__metric em{font-size:6.5px}
.msb-chart-track__metric b{font-size:8px}
.msb-chart-track__play{width:39px;height:39px;border-radius:12px}
}
@media(max-width:365px){
.msb-chart-track{grid-template-columns:22px 50px minmax(0,1fr) 36px;gap:7px}
.msb-chart-track__cover{width:50px;height:50px}
.msb-chart-track__play{width:36px;height:36px}
.msb-chart-track__metric em{font-size:6.1px}
.msb-chart-track__metric b{font-size:7.7px}
}
@media(prefers-reduced-motion:reduce){.msb-charts__tab,.msb-chart-track,.msb-chart-track__play,.msb-charts__mobile-more i{transition:none!important}}