/* =========================================================
   Music FM — Home Chart Widget
========================================================= */

.mf-home-chart-widget{
    overflow:hidden;
    min-height:0!important;
    border:1px solid #dfe7f1!important;
    border-radius:4px!important;
    background:#fff!important;
    color:#101828!important;
    box-shadow:0 10px 28px rgba(15,35,70,.055)!important;
}

.mf-home-chart-head{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border-bottom:1px solid #e8edf3;
    background:#fbfdff;
}

.mf-home-chart-head span{
    display:block;
    color:#147cff;
    font-size:11px;
    line-height:1;
    font-weight:950;
    letter-spacing:.4px;
}

.mf-home-chart-head h2{
    margin:7px 0 0;
    color:#101828;
    font-size:22px;
    line-height:1;
    font-weight:950;
}

.mf-home-chart-head>a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#147cff;
    font-size:12px;
    font-weight:950;
    text-decoration:none;
}

.mf-home-chart-leader{
    min-height:116px;
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 42px;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid #e8edf3;
    background:
        radial-gradient(circle at 100% 0,rgba(89,199,255,.09),transparent 36%),
        #fff;
}

.mf-home-chart-leader-cover{
    position:relative;
    width:64px;
    height:64px;
}

.mf-home-chart-leader-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:4px;
    background:#eef2f7;
}

.mf-home-chart-leader-cover b{
    position:absolute;
    right:-6px;
    top:-6px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:3px solid #fff;
    border-radius:50%;
    background:#147cff;
    color:#fff;
    font-size:12px;
    font-weight:950;
}

.mf-home-chart-leader-text{
    min-width:0;
}

.mf-home-chart-leader-text small{
    display:block;
    color:#147cff;
    font-size:10px;
    font-weight:950;
}

.mf-home-chart-leader-text strong,
.mf-home-chart-leader-text span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mf-home-chart-leader-text strong{
    margin-top:4px;
    color:#101828;
    font-size:17px;
    font-weight:950;
}

.mf-home-chart-leader-text span{
    margin-top:3px;
    color:#667085;
    font-size:12px;
    font-weight:800;
}

.mf-home-chart-play,
.mf-home-chart-row-play{
    display:grid!important;
    place-items:center!important;
    border:1px solid #d5dee9!important;
    border-radius:4px!important;
    background:#fff!important;
    color:#147cff!important;
    cursor:pointer;
    transition:.16s ease;
}

.mf-home-chart-play{
    width:42px;
    height:42px;
}

.mf-home-chart-row-play{
    width:34px;
    height:34px;
}

.mf-home-chart-play:hover,
.mf-home-chart-row-play:hover{
    border-color:#147cff!important;
    background:#147cff!important;
    color:#fff!important;
}

.mf-home-chart-list{
    display:grid;
}

.mf-home-chart-row{
    min-height:72px;
    display:grid;
    grid-template-columns:34px 48px minmax(0,1fr) auto 34px;
    gap:9px;
    align-items:center;
    padding:10px 14px;
    border-bottom:1px solid #edf1f5;
    background:#fff;
    transition:.16s ease;
}

.mf-home-chart-row:last-child{
    border-bottom:0;
}

.mf-home-chart-row:hover{
    background:#f8fbff;
}

.mf-home-chart-rank{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:3px;
    background:#eef6ff;
    color:#147cff;
    font-size:12px;
    font-weight:950;
}

.mf-home-chart-row>img{
    width:48px;
    height:48px;
    display:block;
    object-fit:cover;
    border-radius:3px;
    background:#eef2f7;
}

.mf-home-chart-song{
    min-width:0;
}

.mf-home-chart-song strong,
.mf-home-chart-song span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mf-home-chart-song strong{
    color:#101828;
    font-size:13px;
    font-weight:950;
}

.mf-home-chart-song span{
    margin-top:4px;
    color:#667085;
    font-size:10px;
    font-weight:800;
}

.mf-home-chart-change{
    min-height:25px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:0 7px;
    border-radius:3px;
    background:#f2f4f7;
    color:#667085;
    font-size:9px;
    font-style:normal;
    font-weight:950;
    white-space:nowrap;
}

.mf-home-chart-change.is-up{
    background:#ecfdf3;
    color:#087443;
}

.mf-home-chart-change.is-down{
    background:#fff1f2;
    color:#be123c;
}

.mf-home-chart-change.is-new{
    background:#eef6ff;
    color:#147cff;
}

.mf-home-chart-footer{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 14px;
    border-top:1px solid #e8edf3;
    background:#fbfdff;
}

.mf-home-chart-footer span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#667085;
    font-size:10px;
    font-weight:800;
}

.mf-home-chart-footer a{
    color:#147cff;
    font-size:10px;
    font-weight:950;
    text-decoration:none;
}

.mf-home-chart-empty{
    min-height:250px;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:7px;
    padding:24px;
    text-align:center;
}

.mf-home-chart-empty i{
    color:#147cff;
    font-size:28px;
}

.mf-home-chart-empty strong{
    color:#101828;
    font-size:15px;
    font-weight:950;
}

.mf-home-chart-empty span{
    max-width:280px;
    color:#667085;
    font-size:11px;
    line-height:1.6;
    font-weight:800;
}

@media(max-width:720px){
    .mf-home-chart-row{
        grid-template-columns:30px 44px minmax(0,1fr) 32px;
        padding-inline:10px;
    }

    .mf-home-chart-row>img{
        width:44px;
        height:44px;
    }

    .mf-home-chart-change{
        display:none;
    }

    .mf-home-chart-footer{
        align-items:flex-start;
        flex-direction:column;
    }
}