/* Music FM - base.css */

:root{
    --mf-bg:#f4f7fb;
    --mf-white:#ffffff;
    --mf-primary:#59c7ff;
    --mf-primary-dark:#1696d6;
    --mf-text:#142033;
    --mf-muted:#6b7280;
    --mf-border:rgba(15,23,42,.08);
    --mf-shadow:0 10px 30px rgba(15,23,42,.07);
    --mf-radius-sm:12px;
    --mf-radius-md:20px;
    --mf-radius-lg:32px;
    --mf-container:1250px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--mf-bg);
    color:var(--mf-text);
    font-family:'Heebo',sans-serif;
    overflow-x:hidden;
}

.player-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    background:rgba(5,10,20,.72) !important;
    backdrop-filter:blur(12px) !important;
    z-index:99999999 !important;
    display:none;
    align-items:center !important;
    justify-content:center !important;
}

.player-modal.active{
    display:flex !important;
}

.player-box{
    position:relative !important;
    width:min(900px,92vw) !important;
    background:rgba(5,10,20,.94) !important;
    border-radius:26px !important;
    padding:22px !important;
}

.trend-crown{
    display:inline-flex;
    align-items:center;
    margin:0 0 6px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(255,184,28,.12);
    border:1px solid rgba(255,184,28,.22);
    color:#9a6400;
    font-size:10px;
    font-weight:800;
}

.trend-live-meta{
    display:inline-flex;
    align-items:center;
    margin-top:5px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.04);
    border:1px solid rgba(15,23,42,.07);
    color:#667085;
    font-size:10px;
    font-weight:700;
}

.trend-movement{
    display:inline-flex;
    align-items:center;
    margin-top:5px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.04);
    border:1px solid rgba(15,23,42,.07);
    color:#667085;
    font-size:10px;
    font-weight:800;
}
.trend-movement{
    color:#667085 !important;
}

.trend-movement:has(.up),
.trend-movement.up{
    color:#079455 !important;
    background:rgba(7,148,85,.08) !important;
    border-color:rgba(7,148,85,.18) !important;
}

.trend-movement:has(.down),
.trend-movement.down{
    color:#d92d20 !important;
    background:rgba(217,45,32,.08) !important;
    border-color:rgba(217,45,32,.18) !important;
}