/* =====================================================
   DISCOVER LYRICS
===================================================== */

.lg-discover-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    radial-gradient(circle at 0% 20%,rgba(255,0,140,.18),transparent 28%),

    radial-gradient(circle at 100% 0%,rgba(130,60,255,.20),transparent 30%),

    radial-gradient(circle at 100% 100%,rgba(255,0,180,.12),transparent 22%),

    linear-gradient(
        135deg,
        #07072f 0%,
        #101b63 45%,
        #173f92 100%
    );

}

.lg-discover-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:38px 38px;

    opacity:.25;

    pointer-events:none;

}

.lg-discover-grid{

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

    margin-top:70px;

}

/*=====================================================
DISCOVER CARD
=====================================================*/

.lg-discover-column{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:32px;

    border-radius:28px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(28px);

    transition:.35s;

    box-shadow:
    0 18px 50px rgba(0,0,0,.22);

}

.lg-discover-column:hover{

    transform:translateY(-8px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.35);

}

/*=====================================================
HEADER
=====================================================*/

.lg-discover-heading{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}



.lg-heading-content{

    flex:1;

}

.lg-heading-content h3{

    margin:0;

    color:#fff;

    font-size:26px;

    font-weight:800;

}

.lg-heading-content p{

    margin:6px 0 0;

    color:rgba(255,255,255,.65);

    font-size:14px;

}

.lg-heading-count{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #6d3dff,
        #ff1493
    );

}

.lg-discover-heading h3{

    color:#fff;

    font-size:30px;

    font-weight:800;

    margin:0;

}

.lg-discover-heading span{

    display:block;

    margin-top:8px;

    color:#bfc9f5;

    font-size:15px;

}

.lg-discover-shape{
    display:none;
}


/*=============================
Premium Discover Cards
=============================*/

.lg-discover-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:24px;

}

/* =====================================================
   PREMIUM DISCOVER SONG CARD
===================================================== */

.lg-discover-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:17px 18px;

    margin-bottom:0;

    min-height:78px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(255,255,255,.075);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 24px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    overflow:hidden;

}

.lg-discover-item:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    background:
        linear-gradient(
            180deg,
            #ff1493,
            #7d3cff,
            #00d4ff
        );

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.lg-discover-item:hover{

    transform:translateX(10px);

    background:
        linear-gradient(
            90deg,
            rgba(255,20,147,.12),
            rgba(124,60,255,.08)
        );

    border-color:#ff2ca5;

    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 35px rgba(255,20,147,.22);

}

.lg-discover-item:hover:before{

    transform:scaleY(1);

}

.lg-discover-rank{

    width:46px;

    height:46px;

    flex:0 0 46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:800;

    letter-spacing:.2px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #8b3dff
        );

    box-shadow:
        0 8px 20px rgba(255,20,147,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/* ===========================
   TOP 3 PREMIUM RANKS
=========================== */

.lg-discover-item:nth-child(1) .lg-discover-rank{

    background:linear-gradient(
        135deg,
        #FFD84D,
        #FFB400
    );

    color:#111;

    box-shadow:
        0 0 25px rgba(255,210,80,.45);

}

.lg-discover-item:nth-child(2) .lg-discover-rank{

    background:linear-gradient(
        135deg,
        #ECECEC,
        #BFC4D7
    );

    color:#111;

    box-shadow:
        0 0 22px rgba(255,255,255,.25);

}

.lg-discover-item:nth-child(3) .lg-discover-rank{

    background:linear-gradient(
        135deg,
        #F39C53,
        #C96B20
    );

    box-shadow:
        0 0 22px rgba(243,156,83,.35);

}

.lg-discover-content{

    flex:1;

    min-width:0;

}

.lg-discover-content h4{

    margin:0 0 8px;

    color:#fff;

    font-size:20px;

    font-weight:700;

    line-height:1.4;

}

.lg-discover-views{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    color:rgba(255,255,255,.65);

    font-size:15px;

}

.lg-discover-arrow{

    width:38px;

    height:38px;

    flex:0 0 38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:12px;

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #7a39ff
        );

    box-shadow:
        0 8px 20px rgba(255,20,147,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.lg-discover-item:hover .lg-discover-arrow{

    transform:
        translateX(8px)
        rotate(-45deg);

    box-shadow:
        0 0 20px rgba(255,20,147,.35);

}


.lg-discover-item:hover h4{

    color:#ff5ec7;

}

/* ===============================
   Premium Text Animation
================================ */

.lg-discover-content h4{

    transition:.35s;

}

.lg-discover-item:hover h4{

    color:#ff72cb;

}

.lg-discover-item:hover .lg-discover-rank{

    transform:scale(1.08);

}

.lg-discover-rank{

    transition:.35s;

}


/* =====================================================
   PREMIUM COLUMN ACCENTS
===================================================== */

/* ---------- Trending ---------- */

.lg-discover-column:nth-child(1) .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #ff4db8
        );

    box-shadow:
        0 12px 32px rgba(255,20,147,.35),
        0 0 35px rgba(255,20,147,.15);

}

.lg-discover-column:nth-child(1) .lg-heading-count{

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #8b3dff
        );

}


/* ---------- Top Songs ---------- */

.lg-discover-column:nth-child(2) .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ffd84d,
            #ff9f1c
        );

    box-shadow:
        0 12px 32px rgba(255,190,50,.30),
        0 0 35px rgba(255,190,50,.12);

}

.lg-discover-column:nth-child(2) .lg-heading-count{

    background:
        linear-gradient(
            135deg,
            #ffb400,
            #ff7a18
        );

}


/* ---------- Popular Lyrics ---------- */

.lg-discover-column:nth-child(3) .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #00d4ff,
            #526cff
        );

    box-shadow:
        0 12px 32px rgba(0,212,255,.28),
        0 0 35px rgba(0,212,255,.12);

}

.lg-discover-column:nth-child(3) .lg-heading-count{

    background:
        linear-gradient(
            135deg,
            #526cff,
            #7b3cff
        );

}


/* =====================================================
   HEADER DIVIDER
===================================================== */

.lg-discover-heading{

    position:relative;

    padding-bottom:24px;

}

.lg-discover-heading::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.04),
            transparent
        );

}


/* =====================================================
   ICON MICRO ANIMATION
===================================================== */

.lg-heading-icon{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.lg-discover-column:hover .lg-heading-icon{

    transform:
        translateY(-2px)
        scale(1.04);

}


/* =====================================================
   COUNT MICRO ANIMATION
===================================================== */

.lg-heading-count{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.lg-discover-column:hover .lg-heading-count{

    transform:scale(1.06);

    box-shadow:
        0 0 24px rgba(255,20,147,.18);

}


/* =====================================================
   DISCOVER LYRICS — PREMIUM HEADER REFINEMENT
===================================================== */


/* =====================================================
   MAIN DISCOVER LYRICS HEADER
===================================================== */

.lg-discover-section .lg-section-header h2,
.lg-discover-section .section-header h2{

    color:#ffffff !important;

    font-size:42px !important;

    font-weight:800 !important;

    line-height:1.15;

    letter-spacing:-1px;

    margin-bottom:12px;

}

.lg-discover-section .lg-section-header p,
.lg-discover-section .section-header p{

    color:rgba(255,255,255,.68) !important;

    font-size:16px !important;

    font-weight:400;

}


/* =====================================================
   COLUMN HEADERS
===================================================== */

.lg-discover-heading{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:0;

    padding-bottom:22px;

    position:relative;

}


/* Clear divider between heading and lyrics */

.lg-discover-heading::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

}


/* =====================================================
   COLUMN TITLE
===================================================== */

.lg-heading-content h3{

    margin:0;

    color:#ffffff;

    font-size:24px;

    font-weight:750;

    line-height:1.2;

    letter-spacing:-.3px;

}

.lg-heading-content p{

    margin:7px 0 0;

    color:rgba(255,255,255,.58);

    font-size:13px;

    font-weight:500;

}


/* =====================================================
   ICON — CLEANER PREMIUM LOOK
===================================================== */

.lg-heading-icon{

    width:58px;

    height:58px;

    flex:0 0 58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    color:#ffffff;

    position:relative;

    overflow:hidden;

}


/* Soft inner highlight */

.lg-heading-icon::after{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:17px;

    border:1px solid rgba(255,255,255,.18);

    pointer-events:none;

}


/* =====================================================
   COUNT BADGE
===================================================== */

.lg-heading-count{

    width:46px;

    height:46px;

    flex:0 0 46px;

    font-size:16px;

    font-weight:800;

}


/* =====================================================
   LYRICS LIST
===================================================== */

.lg-discover-list{

    margin-top:24px;

    gap:12px;

}


/* =====================================================
   LYRICS ITEM
===================================================== */

.lg-discover-item{

    padding:17px 20px;

    margin-bottom:0;

    border-radius:18px;

    gap:15px;

}


/* =====================================================
   RANK
===================================================== */

.lg-discover-rank{

    width:46px;

    height:46px;

    flex:0 0 46px;

    font-size:15px;

}


/* =====================================================
   SONG TITLE
===================================================== */

.lg-discover-content h4{

    margin:0;

    color:#ffffff;

    font-size:16px;

    font-weight:650;

    line-height:1.35;

    letter-spacing:-.1px;

}


/* =====================================================
   VIEWS
===================================================== */

.lg-discover-views{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:5px;

    color:rgba(255,255,255,.55);

    font-size:13px;

    font-weight:500;

}


/* =====================================================
   ARROW
===================================================== */

.lg-discover-arrow{

    width:38px;

    height:38px;

    flex:0 0 38px;

    font-size:13px;

}


/* =====================================================
   DISCOVER CARD DEPTH
===================================================== */

.lg-discover-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.06),
            transparent 35%
        );

    opacity:0;

    pointer-events:none;

    transition:opacity .35s ease;

}

.lg-discover-item:hover::after{

    opacity:1;

}

.lg-discover-item:hover{

    transform:translateX(6px);

    background:
        linear-gradient(
            135deg,
            rgba(255,20,147,.10),
            rgba(100,60,255,.08)
        );

    border-color:
        rgba(255,44,165,.35);

    box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        0 0 28px rgba(255,20,147,.12);

}

.lg-discover-item:hover .lg-discover-rank{

    transform:scale(1.06);

}

.lg-discover-item:hover .lg-discover-arrow{

    transform:translateX(5px);

}

/* =====================================================
   DISCOVER HEADER ICONS
===================================================== */

.lg-heading-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}




/* Trending */

.lg-discover-column:nth-child(1)
.lg-heading-icon
.lg-icon-symbol{

    color:#ffffff !important;

}


/* Top Songs */

.lg-discover-column:nth-child(2)
.lg-heading-icon
.lg-icon-symbol{

    color:#ffffff !important;

}


/* Popular Lyrics */

.lg-discover-column:nth-child(3)
.lg-heading-icon
.lg-icon-symbol{

    color:#ffffff !important;

}


/* Trending */

.lg-discover-column:nth-child(1) .lg-heading-icon i{

    color:#ffffff !important;

}


/* Top Songs */

.lg-discover-column:nth-child(2) .lg-heading-icon i{

    color:#ffffff !important;

}


/* Popular Lyrics */

.lg-discover-column:nth-child(3) .lg-heading-icon i{

    color:#ffffff !important;

}




/* =====================================================
   DISCOVER — PREMIUM ARROW + HEADER GRAPHICS
===================================================== */


/* =====================================================
   1. FIX SONG ARROW
===================================================== */

.lg-discover-arrow{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:0 !important;

    color:transparent !important;

}


/* Hide any broken Font Awesome / text icon */

.lg-discover-arrow i,
.lg-discover-arrow span{

    display:none !important;

}


/* Create clean CSS chevron */

.lg-discover-arrow::before{

    content:"";

    width:9px;

    height:9px;

    border-top:2px solid rgba(255,255,255,.95);

    border-right:2px solid rgba(255,255,255,.95);

    transform:rotate(45deg);

    margin-left:-4px;

    transition:
        transform .3s ease,
        border-color .3s ease;

}


/* Hover */

.lg-discover-item:hover .lg-discover-arrow{

    transform:translateX(5px) !important;

}

.lg-discover-item:hover .lg-discover-arrow::before{

    border-color:#ffffff;

}


/* =====================================================
   2. REMOVE BIG NUMBER FROM HEADER
===================================================== */

.lg-heading-count{

    font-size:0 !important;

    color:transparent !important;

    position:relative !important;

    overflow:hidden !important;

}


/* Hide the number/text */

.lg-heading-count{

    text-indent:-9999px;

}


/* =====================================================
   3. TRENDING — MINI GLOWING GRAPHIC
===================================================== */

.lg-discover-column:nth-child(1)
.lg-heading-count::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:4px;

    height:14px;

    transform:
        translate(-50%,-50%);

    border-radius:4px;

    background:#ff72cb;

    box-shadow:

        -9px 4px 0 -1px rgba(255,114,203,.55),

        -4px -3px 0 -1px rgba(255,114,203,.75),

        5px -6px 0 -1px rgba(255,114,203,.95),

        10px 2px 0 -1px rgba(255,114,203,.55),

        0 0 14px rgba(255,20,147,.8);

}


/* =====================================================
   4. TOP SONGS — MINI GLOWING GRAPHIC
===================================================== */

.lg-discover-column:nth-child(2)
.lg-heading-count::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:18px;

    height:18px;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    border-radius:4px;

    border:2px solid rgba(255,220,110,.85);

    background:
        rgba(255,216,77,.10);

    box-shadow:

        0 0 10px rgba(255,190,40,.75),

        0 0 22px rgba(255,190,40,.35);

}


/* Inner sparkle */

.lg-discover-column:nth-child(2)
.lg-heading-count::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:6px;

    height:6px;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    background:#fff2b0;

    border-radius:2px;

    box-shadow:
        0 0 10px #ffd84d;

}


/* =====================================================
   5. POPULAR — MINI GLOWING WAVE
===================================================== */

.lg-discover-column:nth-child(3)
.lg-heading-count::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:24px;

    height:16px;

    transform:
        translate(-50%,-50%);

    background:

        linear-gradient(
            90deg,
            transparent 0 8%,
            rgba(110,220,255,.55) 8% 18%,
            transparent 18% 28%,
            rgba(110,220,255,.75) 28% 40%,
            transparent 40% 50%,
            rgba(110,220,255,1) 50% 62%,
            transparent 62% 72%,
            rgba(110,220,255,.75) 72% 84%,
            transparent 84%
        );

    border-radius:4px;

    box-shadow:
        0 0 14px rgba(0,212,255,.75);

}


/* =====================================================
   6. SOFT HEADER GRAPHIC GLOW
===================================================== */

.lg-discover-column:nth-child(1)
.lg-heading-count{

    box-shadow:
        0 0 18px rgba(255,20,147,.18);

}


.lg-discover-column:nth-child(2)
.lg-heading-count{

    box-shadow:
        0 0 18px rgba(255,190,40,.18);

}


.lg-discover-column:nth-child(3)
.lg-heading-count{

    box-shadow:
        0 0 18px rgba(0,212,255,.18);

}

/* =====================================================
   DISCOVER HEADER GRAPHICS — NO CIRCLE BACKGROUND
===================================================== */

/* Remove the colored circular badge */

.lg-discover-column .lg-heading-count{

    background:transparent !important;

    box-shadow:none !important;

    border:none !important;

    border-radius:0 !important;

    overflow:visible !important;

}


/* Keep the graphic centered */

.lg-discover-column .lg-heading-count::before{

    z-index:2;

}


/* Trending graphic glow */

.lg-discover-column:nth-child(1)
.lg-heading-count::before{

    filter:
        drop-shadow(0 0 5px rgba(255,20,147,.75))
        drop-shadow(0 0 12px rgba(255,20,147,.45));

}


/* Top Songs graphic glow */

.lg-discover-column:nth-child(2)
.lg-heading-count::before{

    filter:
        drop-shadow(0 0 5px rgba(255,210,70,.8))
        drop-shadow(0 0 12px rgba(255,190,40,.45));

}


/* Top Songs inner glow */

.lg-discover-column:nth-child(2)
.lg-heading-count::after{

    filter:
        drop-shadow(0 0 5px rgba(255,235,150,.9));

}


/* Popular graphic glow */

.lg-discover-column:nth-child(3)
.lg-heading-count::before{

    filter:
        drop-shadow(0 0 5px rgba(0,212,255,.8))
        drop-shadow(0 0 12px rgba(0,212,255,.45));

}

/* =====================================================
   DISCOVER HEADER — SMALL GLOWING GRAPHICS
===================================================== */

/* Header graphic container */

.lg-discover-column .lg-heading-count{

    position:relative !important;

    width:48px !important;

    height:48px !important;

    flex:0 0 48px !important;

    margin-left:auto !important;

    padding:0 !important;

    background:transparent !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

    text-indent:0 !important;

    font-size:0 !important;

}


/* Remove old secondary graphic */

.lg-discover-column .lg-heading-count::after{

    content:none !important;

}


/* =====================================================
   TRENDING — RISING GRAPH
===================================================== */

.lg-discover-column:nth-child(1)
.lg-heading-count::before{

    content:"↗" !important;

    position:absolute !important;

    top:50% !important;

    left:50% !important;

    width:auto !important;

    height:auto !important;

    margin:0 !important;

    padding:0 !important;

    transform:translate(-50%,-50%) !important;

    display:block !important;

    color:#ff72cb !important;

    background:none !important;

    border:0 !important;

    font-family:Arial,sans-serif !important;

    font-size:30px !important;

    font-weight:700 !important;

    line-height:1 !important;

    text-indent:0 !important;

    box-shadow:none !important;

    text-shadow:
        0 0 6px rgba(255,20,147,.95),
        0 0 14px rgba(255,20,147,.65),
        0 0 28px rgba(255,20,147,.35) !important;

}


/* =====================================================
   TOP SONGS — CROWN
===================================================== */

.lg-discover-column:nth-child(2)
.lg-heading-count::before{

    content:"♛" !important;

    position:absolute !important;

    top:50% !important;

    left:50% !important;

    width:auto !important;

    height:auto !important;

    margin:0 !important;

    padding:0 !important;

    transform:translate(-50%,-50%) !important;

    display:block !important;

    color:#ffe58a !important;

    background:none !important;

    border:0 !important;

    font-family:Georgia,serif !important;

    font-size:29px !important;

    font-weight:700 !important;

    line-height:1 !important;

    text-indent:0 !important;

    box-shadow:none !important;

    text-shadow:
        0 0 6px rgba(255,210,70,.95),
        0 0 14px rgba(255,190,40,.70),
        0 0 28px rgba(255,190,40,.35) !important;

}


/* =====================================================
   POPULAR — MUSIC NOTE
===================================================== */

.lg-discover-column:nth-child(3)
.lg-heading-count::before{

    content:"♫" !important;

    position:absolute !important;

    top:50% !important;

    left:50% !important;

    width:auto !important;

    height:auto !important;

    margin:0 !important;

    padding:0 !important;

    transform:translate(-50%,-50%) !important;

    display:block !important;

    color:#72ddff !important;

    background:none !important;

    border:0 !important;

    font-family:Arial,sans-serif !important;

    font-size:30px !important;

    font-weight:700 !important;

    line-height:1 !important;

    text-indent:0 !important;

    box-shadow:none !important;

    text-shadow:
        0 0 6px rgba(0,212,255,.95),
        0 0 14px rgba(0,212,255,.70),
        0 0 28px rgba(0,212,255,.35) !important;

}


/* =========================================================
   DISCOVER LYRICS — PREMIUM CENTERED COLUMN HEADERS
   Remove right-side graphics + responsive columns
========================================================= */


/* =========================================================
   1. DISCOVER GRID — RESPONSIVE
========================================================= */

.lg-discover-grid{

    display:grid !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:28px !important;

    width:100% !important;

    align-items:start !important;

}


/* =========================================================
   2. COLUMN
========================================================= */

.lg-discover-column{

    min-width:0 !important;

    width:100% !important;

    box-sizing:border-box !important;

}


/* =========================================================
   3. HEADER — VERTICAL CENTERED LAYOUT
========================================================= */

.lg-discover-heading{

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    min-height:auto !important;

    margin:0 0 24px !important;

    padding:0 0 20px !important;

    text-align:center !important;

    border-bottom:1px solid rgba(255,255,255,.18) !important;

    box-sizing:border-box !important;

}


/* =========================================================
   4. ICON — KEEP THE COLORED BACKGROUND
========================================================= */

.lg-heading-icon{

    position:relative !important;

    width:58px !important;

    height:58px !important;

    min-width:58px !important;

    flex:0 0 58px !important;

    margin:0 0 14px !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:16px !important;

}


/* =========================================================
   5. ICON SYMBOL
========================================================= */

.lg-heading-icon .lg-icon-symbol{

    position:static !important;

    inset:auto !important;

    width:auto !important;

    height:auto !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin:0 !important;

    padding:0 !important;

    font-size:38px !important;

    line-height:1 !important;

    color:#ffffff !important;

    text-indent:0 !important;

}


/* =========================================================
   6. HEADER CONTENT
========================================================= */

.lg-heading-content{

    width:100% !important;

    min-width:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

}


/* =========================================================
   7. COLUMN TITLE
========================================================= */

.lg-heading-content h3{

    width:100% !important;

    margin:0 0 6px !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:22px !important;

    font-weight:700 !important;

    line-height:1.25 !important;

    text-align:center !important;

}


/* =========================================================
   8. DESCRIPTION
========================================================= */

.lg-heading-content p{

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    color:rgba(255,255,255,.62) !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:1.5 !important;

    text-align:center !important;

}


/* =========================================================
   9. REMOVE THE OLD BIG NUMBER / GRAPHIC
========================================================= */

.lg-heading-count{

    display:none !important;

}


/* Remove all old generated graphics */

.lg-heading-count::before,
.lg-heading-count::after{

    content:none !important;

    display:none !important;

}


/* =========================================================
   10. REMOVE ANY OLD RIGHT-SIDE GRAPHIC
========================================================= */

.lg-discover-heading::before,
.lg-discover-heading::after{

    box-sizing:border-box;

}


/* =========================================================
   11. TRENDING ICON
========================================================= */

.lg-discover-column:nth-child(1)
.lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #a832ff
        ) !important;

    box-shadow:
        0 8px 24px rgba(255,20,147,.28) !important;

}


/* =========================================================
   12. TOP SONGS ICON
========================================================= */

.lg-discover-column:nth-child(2)
.lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ffc83d,
            #ff9d00
        ) !important;

    box-shadow:
        0 8px 24px rgba(255,185,40,.25) !important;

}


/* =========================================================
   13. POPULAR ICON
========================================================= */

.lg-discover-column:nth-child(3)
.lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #00cfff,
            #4778ff
        ) !important;

    box-shadow:
        0 8px 24px rgba(0,190,255,.25) !important;

}


/* =========================================================
   14. TABLET
========================================================= */

@media (max-width:1100px){

    .lg-discover-grid{

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:24px !important;

    }

}


/* =========================================================
   15. MOBILE
========================================================= */

@media (max-width:700px){

    .lg-discover-grid{

        grid-template-columns:1fr !important;

        gap:22px !important;

    }


    .lg-discover-column{

        width:100% !important;

    }


    .lg-discover-heading{

        margin-bottom:20px !important;

        padding-bottom:18px !important;

    }


    .lg-heading-icon{

        width:54px !important;

        height:54px !important;

        min-width:54px !important;

        flex-basis:54px !important;

        border-radius:15px !important;

        margin-bottom:12px !important;

    }


    .lg-heading-icon .lg-icon-symbol{

        font-size:34px !important;

    }


    .lg-heading-content h3{

        font-size:20px !important;

        line-height:1.3 !important;

    }


    .lg-heading-content p{

        font-size:13px !important;

    }

}


/* =========================================================
   16. SMALL PHONES
========================================================= */

@media (max-width:420px){

    .lg-discover-grid{

        gap:18px !important;

    }


    .lg-heading-icon{

        width:50px !important;

        height:50px !important;

        min-width:50px !important;

        flex-basis:50px !important;

    }


    .lg-heading-icon .lg-icon-symbol{

        font-size:31px !important;

    }


    .lg-heading-content h3{

        font-size:19px !important;

    }

}


/* =========================================================
   DISCOVER LYRICS — PREMIUM EYE-CATCHING HEADERS
========================================================= */


/* =========================================================
   HEADER BASE
========================================================= */

.lg-discover-heading{

    position:relative !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    padding:8px 10px 24px !important;

    margin:0 0 22px !important;

    text-align:center !important;

    overflow:visible !important;

}


/* =========================================================
   ICON WRAPPER
========================================================= */

.lg-discover-heading .lg-heading-icon{

    position:relative !important;

    width:68px !important;

    height:68px !important;

    min-width:68px !important;

    min-height:68px !important;

    margin:0 0 16px !important;

    border-radius:20px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    z-index:2 !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease !important;

}


/* Soft glass highlight */

.lg-discover-heading .lg-heading-icon::after{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:19px;

    border:1px solid rgba(255,255,255,.20);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            transparent 55%
        );

    pointer-events:none;

}


/* =========================================================
   ICON SYMBOL
========================================================= */

.lg-discover-heading .lg-icon-symbol{

    position:relative !important;

    z-index:3 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    height:100% !important;

    color:#ffffff !important;

    font-size:38px !important;

    line-height:1 !important;

    text-align:center !important;

}


/* =========================================================
   TRENDING — PINK
========================================================= */

.lg-discover-column:nth-child(1)
.lg-heading-icon{

    background:
        linear-gradient(
            145deg,
            #ff1493 0%,
            #d72cff 55%,
            #7b3dff 100%
        ) !important;

    box-shadow:
        0 14px 35px rgba(255,20,147,.28),
        0 0 45px rgba(180,45,255,.16) !important;

}


/* =========================================================
   TOP SONGS — GOLD
========================================================= */

.lg-discover-column:nth-child(2)
.lg-heading-icon{

    background:
        linear-gradient(
            145deg,
            #ffd84d 0%,
            #ffb000 55%,
            #ff7a18 100%
        ) !important;

    box-shadow:
        0 14px 35px rgba(255,184,35,.26),
        0 0 45px rgba(255,160,20,.14) !important;

}


/* =========================================================
   POPULAR — CYAN / BLUE
========================================================= */

.lg-discover-column:nth-child(3)
.lg-heading-icon{

    background:
        linear-gradient(
            145deg,
            #00e1ff 0%,
            #168dff 55%,
            #554bff 100%
        ) !important;

    box-shadow:
        0 14px 35px rgba(0,190,255,.26),
        0 0 45px rgba(45,110,255,.15) !important;

}


/* =========================================================
   TITLE
========================================================= */

.lg-discover-heading .lg-heading-content{

    position:relative !important;

    width:100% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    text-align:center !important;

}


.lg-discover-heading .lg-heading-content h3{

    margin:0 !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:23px !important;

    font-weight:750 !important;

    line-height:1.25 !important;

    letter-spacing:-.35px !important;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.lg-discover-heading .lg-heading-content p{

    margin:7px 0 0 !important;

    padding:0 !important;

    color:rgba(255,255,255,.60) !important;

    font-size:13px !important;

    font-weight:450 !important;

    line-height:1.45 !important;

}


/* =========================================================
   PREMIUM DIVIDER
========================================================= */

.lg-discover-heading::after{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            rgba(255,255,255,.28),
            rgba(255,255,255,.16),
            transparent
        );

}


/* Small glowing center point */

.lg-discover-heading::before{

    content:"";

    position:absolute;

    bottom:-2px;

    left:50%;

    width:5px;

    height:5px;

    border-radius:50%;

    transform:translateX(-50%);

    background:#ffffff;

    box-shadow:
        0 0 8px rgba(255,255,255,.75);

    z-index:2;

}


/* =========================================================
   HOVER
========================================================= */

.lg-discover-column:hover
.lg-heading-icon{

    transform:
        translateY(-4px)
        scale(1.04);

}


/* =========================================================
   COLUMN-SPECIFIC DIVIDER GLOW
========================================================= */

.lg-discover-column:nth-child(1)
.lg-discover-heading::after{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,20,147,.12),
            rgba(255,20,147,.45),
            rgba(255,20,147,.12),
            transparent
        );

}


.lg-discover-column:nth-child(2)
.lg-discover-heading::after{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,200,70,.12),
            rgba(255,200,70,.45),
            rgba(255,200,70,.12),
            transparent
        );

}


.lg-discover-column:nth-child(3)
.lg-discover-heading::after{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,210,255,.12),
            rgba(0,210,255,.45),
            rgba(0,210,255,.12),
            transparent
        );

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-discover-heading{

        padding-bottom:20px !important;

        margin-bottom:18px !important;

    }

    .lg-discover-heading .lg-heading-icon{

        width:60px !important;

        height:60px !important;

        min-width:60px !important;

        min-height:60px !important;

        border-radius:18px !important;

        margin-bottom:13px !important;

    }

    .lg-discover-heading .lg-icon-symbol{

        font-size:34px !important;

    }

    .lg-discover-heading .lg-heading-content h3{

        font-size:20px !important;

    }

    .lg-discover-heading .lg-heading-content p{

        font-size:12px !important;

    }

}

/* =====================================================
   DISCOVER VIEW ICON
===================================================== */

.lg-discover-views{

    display:inline-flex;

    align-items:center;

    gap:7px;

}

.lg-view-icon{

    width:15px;

    height:15px;

    flex:0 0 15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

    opacity:.68;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.lg-discover-item:hover .lg-view-icon{

    opacity:1;

    transform:scale(1.08);

}

/* =====================================================
   DISCOVER — CLEAN ARROW
===================================================== */

.lg-discover-arrow{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:38px !important;

    height:38px !important;

    min-width:38px !important;

    border-radius:50% !important;

    flex:0 0 38px !important;

}


.lg-arrow-chevron{

    display:block !important;

    color:#ffffff !important;

    font-family:Arial, Helvetica, sans-serif !important;

    font-size:29px !important;

    font-weight:400 !important;

    line-height:30px !important;

    width:auto !important;

    height:30px !important;

    margin:0 !important;

    padding:0 !important;

    transform:translate(1px,-1px) !important;

    transition:
        transform .25s ease,
        opacity .25s ease !important;

}


/* Clean hover movement */

.lg-discover-item:hover .lg-arrow-chevron{

    transform:translate(4px,-1px) !important;

    opacity:.95 !important;

}

/* =========================================================
   DISCOVER LYRICS
   5 → 10 SYNCHRONIZED EXPANSION
========================================================= */


/* Initially show only the first 5 items */

.lg-discover-column
.lg-discover-list
.lg-discover-item:nth-child(n+6){

    display:none !important;

}


/* After View More is clicked,
   reveal items 6–10 in ALL columns */

.lg-discover-grid.lg-discover-expanded
.lg-discover-column
.lg-discover-list
.lg-discover-item:nth-child(n+6){

    display:flex !important;

}


/* Smooth reveal */

.lg-discover-column
.lg-discover-list
.lg-discover-item{

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;

}


/* Expanded state */

.lg-discover-grid.lg-discover-expanded
.lg-discover-column
.lg-discover-list
.lg-discover-item:nth-child(n+6){

    animation:lgDiscoverReveal .45s ease both;

}


@keyframes lgDiscoverReveal{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   DISCOVER HEADER ICONS — FINAL STABLE VERSION
========================================================= */


/* Never generate replacement icons */

.lg-discover-heading .lg-heading-icon::before{

    content:none !important;

}


/* Never hide the real PHP icon */

.lg-discover-heading .lg-heading-icon .lg-icon-symbol{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    position:relative !important;

    z-index:3 !important;

    width:100% !important;

    height:100% !important;

    color:#ffffff !important;

}


/* =========================================================
   TRENDING
========================================================= */

.lg-discover-trending .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ff1493,
            #8b3dff
        ) !important;

    box-shadow:
        0 12px 32px rgba(255,20,147,.35),
        0 0 35px rgba(255,20,147,.18) !important;

}


.lg-discover-trending .lg-icon-symbol{

    font-size:38px !important;

    color:#ffffff !important;

}


/* =========================================================
   TOP SONGS
========================================================= */

.lg-discover-top-songs .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #ffd84d,
            #ff9f1c
        ) !important;

    box-shadow:
        0 12px 32px rgba(255,190,50,.30),
        0 0 35px rgba(255,190,50,.18) !important;

}


.lg-discover-top-songs .lg-icon-symbol{

    font-size:38px !important;

    color:#ffffff !important;

}


/* =========================================================
   POPULAR LYRICS
========================================================= */

.lg-discover-popular .lg-heading-icon{

    background:
        linear-gradient(
            135deg,
            #00d4ff,
            #526cff
        ) !important;

    box-shadow:
        0 12px 32px rgba(0,212,255,.28),
        0 0 35px rgba(0,212,255,.18) !important;

}


.lg-discover-popular .lg-icon-symbol{

    font-size:38px !important;

    color:#ffffff !important;

}


/* =========================================================
   ICON POSITION
========================================================= */

.lg-discover-heading .lg-heading-icon{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-shrink:0 !important;

}


/* Keep the glass highlight behind the icon */

.lg-discover-heading .lg-heading-icon::after{

    z-index:1 !important;

}

/* =========================================================
   TOP SONGS HEADER ICON — RESTORE GOLD COLOR
========================================================= */

.lg-discover-column.lg-discover-top-songs
.lg-heading-icon{

    background:
        linear-gradient(
            145deg,
            #ffd84d 0%,
            #ffb000 55%,
            #ff8a00 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(255,180,30,.38),
        0 0 35px rgba(255,190,40,.22) !important;

}


.lg-discover-column.lg-discover-top-songs
.lg-heading-icon
.lg-icon-symbol{

    color:#ffffff !important;

    font-size:38px !important;

    text-shadow:
        0 2px 8px rgba(255,255,255,.20) !important;

}


/* =========================================================
   DISCOVER — SYNCHRONIZED 5 → 10 EXPANSION
========================================================= */


/* ---------------------------------------------------------
   INITIAL STATE
   Show only the first 5 lyrics in each column
--------------------------------------------------------- */

.lg-discover-grid
.lg-discover-column
.lg-discover-list
.lg-discover-item:nth-child(n+6){

    display:none !important;

}


/* ---------------------------------------------------------
   EXPANDED STATE
   Show lyrics 6–10 in ALL THREE COLUMNS
--------------------------------------------------------- */

.lg-discover-grid.lg-discover-expanded
.lg-discover-column
.lg-discover-list
.lg-discover-item:nth-child(n+6){

    display:flex !important;

}


/* ---------------------------------------------------------
   Hide the three individual View More buttons
   after expansion
--------------------------------------------------------- */

.lg-discover-grid.lg-discover-expanded
.lg-discover-column
.lg-discover-more{

    display:none !important;

}


/* ---------------------------------------------------------
   Reveal animation for items 6–10
--------------------------------------------------------- */

.lg-discover-grid.lg-discover-expanded
.lg-discover-item:nth-child(n+6){

    animation:lgDiscoverRevealItems .45s ease both;

}


@keyframes lgDiscoverRevealItems{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   EXPLORE LATEST LYRICS
========================================================= */


/* Hidden on initial page load */

.lg-discover-explore-latest{

    display:none !important;

    width:100% !important;

    margin:32px 0 0 !important;

}


/* Show only after the 3-column grid expands */

.lg-discover-grid.lg-discover-expanded
+ .lg-discover-explore-latest{

    display:block !important;

}


/* =========================================================
   FULL WIDTH BUTTON
========================================================= */

.lg-explore-latest-button{

    width:100% !important;

    min-height:62px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:12px !important;

    box-sizing:border-box !important;

    padding:18px 28px !important;

    border-radius:18px !important;

    border:1px solid rgba(255,255,255,.16) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,20,147,.18),
            rgba(105,55,255,.20),
            rgba(0,190,255,.12)
        ) !important;

    color:#ffffff !important;

    text-decoration:none !important;

    font-size:16px !important;

    font-weight:700 !important;

    line-height:1.3 !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.20),
        0 0 30px rgba(120,70,255,.10) !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;

}


/* Hover */

.lg-explore-latest-button:hover{

    transform:translateY(-2px) !important;

    border-color:rgba(255,255,255,.30) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.25),
        0 0 35px rgba(150,80,255,.16) !important;

    color:#ffffff !important;

}


/* Arrow */

.lg-explore-latest-arrow{

    font-size:23px !important;

    line-height:1 !important;

    transition:transform .25s ease !important;

}


.lg-explore-latest-button:hover
.lg-explore-latest-arrow{

    transform:translateX(4px) !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-discover-explore-latest{

        margin-top:24px !important;

    }

    .lg-explore-latest-button{

        min-height:56px !important;

        padding:16px 20px !important;

        border-radius:15px !important;

        font-size:15px !important;

    }

    .lg-explore-latest-arrow{

        font-size:21px !important;

    }

}


/* =========================================================
   DISCOVER BUTTONS — FINAL VISUAL STYLE
========================================================= */


/* =========================================================
   INDIVIDUAL VIEW MORE BUTTONS
========================================================= */

.lg-discover-more{

    display:block !important;

    width:100% !important;

    margin-top:10px !important;

    text-align:center !important;

}


.lg-discover-more a,
.lg-discover-more .lg-discover-expand-trigger{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    min-width:120px !important;

    min-height:38px !important;

    box-sizing:border-box !important;

    padding:9px 18px !important;

    border-radius:999px !important;

    border:1px solid rgba(255,220,80,.65) !important;

    background:
        linear-gradient(
            135deg,
            #ffe45c 0%,
            #ffc928 50%,
            #ffb300 100%
        ) !important;

    color:#111111 !important;

    font-size:14px !important;

    font-weight:800 !important;

    line-height:1 !important;

    text-align:center !important;

    text-decoration:none !important;

    text-shadow:none !important;

    box-shadow:
        0 7px 18px rgba(255,190,30,.20),
        0 0 18px rgba(255,205,50,.10) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease !important;

}


/* View More hover */

.lg-discover-more a:hover,
.lg-discover-more .lg-discover-expand-trigger:hover{

    color:#000000 !important;

    background:
        linear-gradient(
            135deg,
            #fff06a 0%,
            #ffd13b 50%,
            #ffb300 100%
        ) !important;

    transform:translateY(-2px) !important;

    box-shadow:
        0 10px 24px rgba(255,190,30,.30),
        0 0 24px rgba(255,210,60,.16) !important;

}


/* =========================================================
   EXPLORE LATEST LYRICS
   LIGHT / PREMIUM / GRADIENT
========================================================= */

.lg-discover-explore-latest{

    width:100% !important;

    margin:32px 0 0 !important;

    padding:0 !important;

}


/* Main button */

.lg-explore-latest-button{

    position:relative !important;

    width:100% !important;

    min-height:68px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:14px !important;

    box-sizing:border-box !important;

    padding:18px 30px !important;

    border-radius:20px !important;

    border:1px solid rgba(255,255,255,.75) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98) 0%,
            rgba(248,250,255,.98) 45%,
            rgba(238,247,255,.98) 100%
        ) !important;

    color:#7b2cff !important;

    text-decoration:none !important;

    font-size:17px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

    text-align:center !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        0 0 35px rgba(255,255,255,.10) !important;

    overflow:hidden !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;

}


/* Soft colorful glow inside button */

.lg-explore-latest-button::before{

    content:"" !important;

    position:absolute !important;

    inset:-50% !important;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,40,170,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(125,70,255,.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(0,190,255,.18),
            transparent 30%
        ) !important;

    pointer-events:none !important;

}


/* Keep text above glow */

.lg-explore-latest-text,
.lg-explore-latest-arrow{

    position:relative !important;

    z-index:2 !important;

}


/* Gradient text */

.lg-explore-latest-text{

    background:
        linear-gradient(
            90deg,
            #ff1493 0%,
            #9b3cff 45%,
            #168cff 100%
        ) !important;

    -webkit-background-clip:text !important;

    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

}


/* Gradient arrow */

.lg-explore-latest-arrow{

    font-size:25px !important;

    font-weight:900 !important;

    line-height:1 !important;

    background:
        linear-gradient(
            90deg,
            #9b3cff,
            #168cff
        ) !important;

    -webkit-background-clip:text !important;

    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

    transition:
        transform .25s ease !important;

}


/* Hover */

.lg-explore-latest-button:hover{

    transform:translateY(-3px) !important;

    border-color:
        rgba(255,255,255,.95) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 0 45px rgba(150,90,255,.16) !important;

}


/* Arrow hover */

.lg-explore-latest-button:hover
.lg-explore-latest-arrow{

    transform:translateX(5px) !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-discover-more{

        margin-top:8px !important;

    }

    .lg-discover-more a,
    .lg-discover-more .lg-discover-expand-trigger{

        min-width:112px !important;

        min-height:36px !important;

        padding:8px 16px !important;

        font-size:13px !important;

    }

    .lg-discover-explore-latest{

        margin-top:24px !important;

    }

    .lg-explore-latest-button{

        min-height:60px !important;

        padding:16px 20px !important;

        border-radius:17px !important;

        font-size:15px !important;

    }

}

/* =========================================================
   VIEW MORE LYRICS — PREMIUM BUTTON
========================================================= */


/* More space between last lyric and button */

.lg-discover-more{

    display:block !important;

    width:100% !important;

    margin-top:22px !important;

    padding-top:0 !important;

    text-align:center !important;

}


/* Wider yellow button */

.lg-discover-more a,
.lg-discover-more .lg-discover-expand-trigger{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-width:170px !important;

    min-height:42px !important;

    padding:10px 24px !important;

    box-sizing:border-box !important;

    border-radius:999px !important;

    border:1px solid rgba(255,225,80,.75) !important;

    background:
        linear-gradient(
            135deg,
            #fff06a 0%,
            #ffd33d 48%,
            #ffb800 100%
        ) !important;

    color:#111111 !important;

    font-size:14px !important;

    font-weight:800 !important;

    line-height:1 !important;

    text-align:center !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    box-shadow:
        0 9px 22px rgba(255,185,25,.22),
        0 0 18px rgba(255,210,50,.10) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease !important;

}


.lg-discover-more a:hover,
.lg-discover-more .lg-discover-expand-trigger:hover{

    color:#000000 !important;

    transform:translateY(-2px) !important;

    filter:brightness(1.04) !important;

    box-shadow:
        0 12px 28px rgba(255,185,25,.32),
        0 0 24px rgba(255,220,70,.18) !important;

}


/* Mobile */

@media (max-width:700px){

    .lg-discover-more{

        margin-top:18px !important;

    }

    .lg-discover-more a,
    .lg-discover-more .lg-discover-expand-trigger{

        min-width:155px !important;

        min-height:40px !important;

        padding:9px 20px !important;

        font-size:13px !important;

    }

}


/* =========================================================
   EXPLORE ARTIST'S LATEST LYRICS
   PREMIUM LIGHT BUTTON
========================================================= */


/* Button container */

.lg-discover-explore-latest{

    width:100% !important;

    margin:34px 0 0 !important;

    padding:0 !important;

}


/* Main button */

.lg-explore-latest-button{

    position:relative !important;

    width:100% !important;

    min-height:70px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:14px !important;

    box-sizing:border-box !important;

    padding:18px 30px !important;

    border-radius:20px !important;

    border:1px solid rgba(255,255,255,.90) !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfbff 35%,
            #f4f8ff 70%,
            #ffffff 100%
        ) !important;

    color:#111827 !important;

    text-decoration:none !important;

    font-size:17px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

    text-align:center !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.18),
        0 0 35px rgba(255,255,255,.12) !important;

    overflow:hidden !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;

}


/* Very soft colorful light across the button */

.lg-explore-latest-button::before{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,20,147,.07),
            rgba(125,65,255,.06),
            rgba(0,190,255,.07)
        ) !important;

    pointer-events:none !important;

}


/* Keep text above background glow */

.lg-explore-latest-text,
.lg-explore-latest-arrow{

    position:relative !important;

    z-index:2 !important;

}


/* Deep premium text */

.lg-explore-latest-text{

    color:#111827 !important;

    -webkit-text-fill-color:#111827 !important;

}


/* Arrow */

.lg-explore-latest-arrow{

    color:#111827 !important;

    -webkit-text-fill-color:#111827 !important;

    font-size:25px !important;

    font-weight:900 !important;

    line-height:1 !important;

    transition:
        transform .25s ease !important;

}


/* Hover */

.lg-explore-latest-button:hover{

    transform:translateY(-3px) !important;

    border-color:#ffffff !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 0 45px rgba(255,255,255,.18) !important;

    color:#000000 !important;

}


/* Arrow movement */

.lg-explore-latest-button:hover
.lg-explore-latest-arrow{

    transform:translateX(5px) !important;

}


/* Mobile */

@media (max-width:700px){

    .lg-discover-explore-latest{

        margin-top:26px !important;

    }

    .lg-explore-latest-button{

        min-height:60px !important;

        padding:16px 20px !important;

        border-radius:17px !important;

        font-size:15px !important;

        gap:10px !important;

    }

    .lg-explore-latest-arrow{

        font-size:22px !important;

    }

}



/* =========================================================
   EXPLORE ARTIST'S LATEST LYRICS
   PREMIUM HERO BUTTON
   FINAL STYLE
========================================================= */


/* ---------------------------------------------------------
   OUTER CONTAINER
--------------------------------------------------------- */

.lg-discover-explore-latest{

    width:100% !important;

    margin:36px 0 0 !important;

    padding:0 !important;

}


/* ---------------------------------------------------------
   MAIN BUTTON
--------------------------------------------------------- */

.lg-explore-latest-button{

    position:relative !important;

    width:100% !important;

    min-height:88px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-sizing:border-box !important;

    padding:18px 90px 18px 100px !important;

    border-radius:22px !important;

    border:2px solid transparent !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffaff 38%,
            #f7f8ff 68%,
            #f3fbff 100%
        ) padding-box,

        linear-gradient(
            105deg,
            #ff4ab8 0%,
            #b74cff 35%,
            #6d7cff 68%,
            #34cfff 100%
        ) border-box !important;

    color:#111111 !important;

    text-decoration:none !important;

    overflow:hidden !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.16),
        0 0 24px rgba(255,60,190,.18),
        0 0 34px rgba(60,150,255,.16) !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease !important;

}


/* ---------------------------------------------------------
   SOFT LIGHT INSIDE BUTTON
--------------------------------------------------------- */

.lg-explore-latest-button::before{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(255,45,180,.13),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 0%,
            rgba(170,70,255,.08),
            transparent 35%
        ),

        radial-gradient(
            circle at 92% 50%,
            rgba(30,190,255,.13),
            transparent 25%
        ) !important;

    pointer-events:none !important;

}


/* ---------------------------------------------------------
   MUSIC ICON
--------------------------------------------------------- */

.lg-explore-latest-icon{

    position:absolute !important;

    left:34px !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    width:58px !important;

    height:58px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-sizing:border-box !important;

    border-radius:50% !important;

    background:
        linear-gradient(
            145deg,
            #ff4bb8 0%,
            #a83dff 48%,
            #387dff 100%
        ) !important;

    color:#ffffff !important;

    font-size:31px !important;

    font-weight:700 !important;

    line-height:1 !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.15) !important;

    box-shadow:
        0 8px 20px rgba(160,55,255,.32),
        0 0 25px rgba(70,120,255,.20) !important;

    z-index:3 !important;

}


/* ---------------------------------------------------------
   TEXT AREA
--------------------------------------------------------- */

.lg-explore-latest-text{

    position:relative !important;

    z-index:3 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-wrap:wrap !important;

    text-align:center !important;

    font-size:25px !important;

    font-weight:800 !important;

    line-height:1.25 !important;

    letter-spacing:-.3px !important;

    color:#111111 !important;

    -webkit-text-fill-color:#111111 !important;

}


/* Normal words */

.lg-explore-word{

    color:#111111 !important;

    -webkit-text-fill-color:#111111 !important;

}


/* ---------------------------------------------------------
   ARTIST NAME
--------------------------------------------------------- */

.lg-explore-artist{

    margin:0 5px !important;

    background:
        linear-gradient(
            90deg,
            #a82cff 0%,
            #7b3dff 45%,
            #477cff 100%
        ) !important;

    -webkit-background-clip:text !important;

    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

    font-weight:900 !important;

}


/* ---------------------------------------------------------
   RIGHT ARROW
--------------------------------------------------------- */

.lg-explore-latest-arrow{

    position:absolute !important;

    right:48px !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    z-index:3 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    color:#111111 !important;

    -webkit-text-fill-color:#111111 !important;

    font-size:43px !important;

    font-weight:400 !important;

    line-height:1 !important;

    transition:
        transform .25s ease !important;

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.lg-explore-latest-button:hover{

    transform:translateY(-3px) !important;

    filter:brightness(1.01) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20),
        0 0 30px rgba(255,55,190,.24),
        0 0 42px rgba(55,150,255,.22) !important;

}


/* Arrow moves */

.lg-explore-latest-button:hover
.lg-explore-latest-arrow{

    transform:
        translateY(-50%)
        translateX(7px) !important;

}


/* Icon slightly lifts */

.lg-explore-latest-button:hover
.lg-explore-latest-icon{

    box-shadow:
        0 10px 24px rgba(160,55,255,.38),
        0 0 30px rgba(70,120,255,.25) !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    .lg-explore-latest-button{

        min-height:80px !important;

        padding-left:88px !important;

        padding-right:78px !important;

    }

    .lg-explore-latest-icon{

        left:28px !important;

        width:52px !important;

        height:52px !important;

        font-size:28px !important;

    }

    .lg-explore-latest-text{

        font-size:21px !important;

    }

    .lg-explore-latest-arrow{

        right:32px !important;

        font-size:36px !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px){

    .lg-discover-explore-latest{

        margin-top:28px !important;

    }

    .lg-explore-latest-button{

        min-height:76px !important;

        padding:
            16px
            54px
            16px
            78px !important;

        border-radius:18px !important;

    }

    .lg-explore-latest-icon{

        left:18px !important;

        width:48px !important;

        height:48px !important;

        font-size:25px !important;

    }

    .lg-explore-latest-text{

        font-size:17px !important;

        line-height:1.3 !important;

    }

    .lg-explore-artist{

        margin:0 4px !important;

    }

    .lg-explore-latest-arrow{

        right:18px !important;

        font-size:30px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    .lg-explore-latest-button{

        padding-left:70px !important;

        padding-right:45px !important;

    }

    .lg-explore-latest-icon{

        left:14px !important;

        width:44px !important;

        height:44px !important;

        font-size:23px !important;

    }

    .lg-explore-latest-text{

        font-size:15px !important;

    }

    .lg-explore-latest-arrow{

        right:14px !important;

        font-size:27px !important;

    }

}


/* =========================================================
   LATEST LYRICS FROM ARTIST
   PREMIUM 5-COLUMN CONTAINER
========================================================= */


/* ---------------------------------------------------------
   MAIN SECTION
--------------------------------------------------------- */

.lg-latest-lyrics-section{

    width:100% !important;

    margin-top:38px !important;

    padding:0 !important;

    scroll-margin-top:30px !important;

}


/* ---------------------------------------------------------
   MAIN OUTER CONTAINER
--------------------------------------------------------- */

.lg-latest-lyrics-inner{

    position:relative !important;

    width:100% !important;

    box-sizing:border-box !important;

    padding:38px 30px 34px !important;

    border-radius:26px !important;

    border:1px solid rgba(255,255,255,.65) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,250,255,.94) 38%,
            rgba(247,248,255,.95) 68%,
            rgba(241,251,255,.96) 100%
        ) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.18),
        0 0 35px rgba(255,70,190,.12),
        0 0 45px rgba(60,150,255,.12) !important;

    overflow:hidden !important;

}


/* ---------------------------------------------------------
   SOFT COLOR GLOW
--------------------------------------------------------- */

.lg-latest-lyrics-inner::before{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    pointer-events:none !important;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(255,40,180,.10),
            transparent 24%
        ),

        radial-gradient(
            circle at 50% 0%,
            rgba(145,65,255,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 95% 30%,
            rgba(0,190,255,.10),
            transparent 25%
        ) !important;

}


/* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */

.lg-latest-lyrics-heading{

    position:relative !important;

    z-index:2 !important;

    margin:0 0 30px !important;

    text-align:center !important;

}


.lg-latest-lyrics-heading h2{

    margin:0 !important;

    padding:0 !important;

    color:#111827 !important;

    font-size:27px !important;

    font-weight:850 !important;

    line-height:1.3 !important;

}


.lg-latest-lyrics-heading h2 span{

    background:
        linear-gradient(
            90deg,
            #a82cff 0%,
            #7b3dff 45%,
            #397dff 100%
        ) !important;

    -webkit-background-clip:text !important;

    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

}


.lg-latest-lyrics-heading p{

    margin:7px 0 0 !important;

    color:#667085 !important;

    font-size:14px !important;

    font-weight:500 !important;

}


/* ---------------------------------------------------------
   5 COLUMN GRID
--------------------------------------------------------- */

.lg-latest-lyrics-grid{

    position:relative !important;

    z-index:2 !important;

    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap:16px !important;

}


/* ---------------------------------------------------------
   INDIVIDUAL COLUMN
--------------------------------------------------------- */

.lg-latest-lyrics-column{

    min-width:0 !important;

    min-height:180px !important;

    box-sizing:border-box !important;

    padding:16px !important;

    border-radius:18px !important;

    border:1px solid rgba(115,100,180,.16) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(246,247,255,.82)
        ) !important;

    box-shadow:
        0 8px 24px rgba(80,70,150,.08) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;

}


/* Column hover */

.lg-latest-lyrics-column:hover{

    transform:translateY(-3px) !important;

    border-color:
        rgba(150,90,255,.25) !important;

    box-shadow:
        0 12px 30px rgba(80,70,150,.13),
        0 0 22px rgba(150,90,255,.08) !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1000px){

    .lg-latest-lyrics-inner{

        padding:32px 22px 28px !important;

    }

    .lg-latest-lyrics-grid{

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-latest-lyrics-section{

        margin-top:28px !important;

    }

    .lg-latest-lyrics-inner{

        padding:28px 16px 22px !important;

        border-radius:21px !important;

    }

    .lg-latest-lyrics-heading{

        margin-bottom:22px !important;

    }

    .lg-latest-lyrics-heading h2{

        font-size:22px !important;

    }

    .lg-latest-lyrics-heading p{

        font-size:13px !important;

    }

    .lg-latest-lyrics-grid{

        grid-template-columns:1fr !important;

        gap:12px !important;

    }

    .lg-latest-lyrics-column{

        min-height:100px !important;

    }

}


/* =========================================================
   LATEST LYRICS — 50 SONG DIRECTORY
========================================================= */


/* ---------------------------------------------------------
   5 COLUMN GRID
--------------------------------------------------------- */

.lg-latest-lyrics-grid{

    position:relative !important;

    z-index:3 !important;

    display:grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap:16px !important;

    width:100% !important;

}


/* ---------------------------------------------------------
   COLUMN
--------------------------------------------------------- */

.lg-latest-lyrics-column{

    min-width:0 !important;

    padding:0 !important;

    border-radius:18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(247,248,255,.70)
        ) !important;

    border:1px solid
        rgba(120,100,190,.12) !important;

    box-shadow:
        0 8px 25px
        rgba(80,70,150,.07) !important;

    overflow:hidden !important;

}


/* ---------------------------------------------------------
   LIST
--------------------------------------------------------- */

.lg-latest-lyrics-list{

    display:flex !important;

    flex-direction:column !important;

}


/* ---------------------------------------------------------
   LYRICS ITEM
--------------------------------------------------------- */

.lg-latest-lyrics-item{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    min-height:74px !important;

    box-sizing:border-box !important;

    padding:13px 15px !important;

    text-decoration:none !important;

    border-bottom:1px solid
        rgba(90,90,130,.10) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.62),
            rgba(249,250,255,.42)
        ) !important;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;

}


/* Remove last divider */

.lg-latest-lyrics-item:last-child{

    border-bottom:none !important;

}


/* ---------------------------------------------------------
   MUSIC ICON
--------------------------------------------------------- */

.lg-latest-lyrics-icon{

    flex:0 0 38px !important;

    width:38px !important;

    height:38px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:50% !important;

    background:
        linear-gradient(
            145deg,
            #ff39a9 0%,
            #a83cff 48%,
            #3d86ff 100%
        ) !important;

    color:#ffffff !important;

    font-size:18px !important;

    font-weight:700 !important;

    line-height:1 !important;

    flex-shrink:0 !important;

    box-shadow:
        0 6px 15px
        rgba(150,55,255,.22) !important;

}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.lg-latest-lyrics-content{

    min-width:0 !important;

    max-width:100% !important;

    flex:1 1 auto !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    overflow:hidden !important;

}


/* =========================================================
   LATEST LYRICS TITLE
   Show full cleaned title — maximum 2 lines
========================================================= */

.lg-latest-lyrics-title{

    display:-webkit-box !important;

    width:100% !important;

    max-width:100% !important;

    color:#111827 !important;

    font-size:14px !important;

    font-weight:750 !important;

    line-height:1.4 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    white-space:normal !important;

    overflow-wrap:break-word !important;

    word-break:normal !important;

    -webkit-line-clamp:2 !important;

    -webkit-box-orient:vertical !important;

}


/* ---------------------------------------------------------
   ALBUM
--------------------------------------------------------- */

.lg-latest-lyrics-album{

    display:block !important;

    margin-top:4px !important;

    color:#7b8498 !important;

    font-size:11px !important;

    font-weight:500 !important;

    line-height:1.3 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    white-space:nowrap !important;

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.lg-latest-lyrics-item:hover{

    background:
        linear-gradient(
            90deg,
            rgba(255,235,250,.90),
            rgba(235,245,255,.90)
        ) !important;

    transform:translateX(3px) !important;

    box-shadow:
        inset 3px 0 0
        rgba(160,55,255,.65) !important;

}


.lg-latest-lyrics-item:hover
.lg-latest-lyrics-icon{

    box-shadow:
        0 8px 20px
        rgba(160,55,255,.34) !important;

    transform:scale(1.05) !important;

}


/* ---------------------------------------------------------
   EMPTY
--------------------------------------------------------- */

.lg-latest-lyrics-empty{

    padding:30px 15px !important;

    text-align:center !important;

    color:#7a8499 !important;

    font-size:13px !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .lg-latest-lyrics-grid{

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-latest-lyrics-grid{

        grid-template-columns:1fr !important;

        gap:12px !important;

    }

    .lg-latest-lyrics-column{

        border-radius:16px !important;

    }

    .lg-latest-lyrics-item{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    gap:13px !important;

    min-height:78px !important;

    box-sizing:border-box !important;

    padding:13px 15px !important;

    text-decoration:none !important;

    border-bottom:1px solid
        rgba(90,90,130,.10) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.62),
            rgba(249,250,255,.42)
        ) !important;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;

}

    .lg-latest-lyrics-icon{

        flex-basis:36px !important;

        width:36px !important;

        height:36px !important;

        font-size:18px !important;

    }

    .lg-latest-lyrics-title{

        font-size:14px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    .lg-latest-lyrics-item{

        min-height:64px !important;

    }

    .lg-latest-lyrics-title{

        font-size:13px !important;

    }

}


@media (max-width:700px){

    .lg-latest-lyrics-item{

        min-height:72px !important;

        padding:11px 13px !important;

        gap:11px !important;

    }

    .lg-latest-lyrics-icon{

        flex:0 0 36px !important;

        width:36px !important;

        height:36px !important;

        font-size:17px !important;

    }

    .lg-latest-lyrics-title{

        font-size:13px !important;

        line-height:1.4 !important;

        -webkit-line-clamp:2 !important;

    }

}


/* =========================================================
   RELATED / EXPLORE ARTIST BUTTONS
   PREMIUM DEEP GRADIENT CONTAINER
========================================================= */


/* =========================================================
   RELATED EXPLORE AREA
   INSIDE 50-LYRICS CONTAINER
========================================================= */

.lg-related-explore-section{

    width:100% !important;

    box-sizing:border-box !important;

    margin:24px 0 0 !important;

    padding:18px 20px !important;

    border-radius:22px !important;

    border:1px solid rgba(255,255,255,.48) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        ) !important;

    box-shadow:
        0 0 18px rgba(255,80,210,.14),
        0 0 22px rgba(70,160,255,.13),
        inset 0 1px 0 rgba(255,255,255,.10) !important;

}


/* ---------------------------------------------------------
   SOFT BACKGROUND GLOW
--------------------------------------------------------- */

.lg-related-explore-section{

    position:relative !important;

    width:100% !important;

    box-sizing:border-box !important;

    margin:20px 0 0 !important;

    padding:18px 20px !important;

    border-radius:22px !important;

    border:1px solid rgba(255,255,255,.48) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        ) !important;

    box-shadow:
        0 0 18px rgba(255,80,210,.14),
        0 0 22px rgba(70,160,255,.13),
        inset 0 1px 0 rgba(255,255,255,.10) !important;

}


/* ---------------------------------------------------------
   BUTTON WRAPPER
--------------------------------------------------------- */

.lg-related-explore-buttons{

    position:relative !important;

    z-index:2 !important;

    width:100% !important;

    display:flex !important;

    flex-wrap:wrap !important;

    align-items:center !important;

    justify-content:center !important;

    gap:13px !important;

}



/* ---------------------------------------------------------
   INDIVIDUAL BUTTON
   AUTO WIDTH — NEVER FIXED
--------------------------------------------------------- */

.lg-related-explore-button{

    position:relative !important;

    flex:0 0 auto !important;

    width:auto !important;

    max-width:100% !important;

    min-height:46px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:9px !important;

    box-sizing:border-box !important;

    padding:11px 18px !important;

    border-radius:999px !important;

    border:1.5px solid transparent !important;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffaff 40%,
            #f5f8ff 72%,
            #ffffff 100%
        ) padding-box,

        linear-gradient(
            100deg,
            #ff45b5 0%,
            #b53cff 42%,
            #6474ff 72%,
            #35caff 100%
        ) border-box !important;

    color:#111827 !important;

    font-size:14px !important;

    font-weight:750 !important;

    line-height:1.25 !important;

    text-align:center !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    box-shadow:

        0 7px 20px
        rgba(0,0,0,.18),

        0 0 17px
        rgba(255,50,180,.12),

        0 0 20px
        rgba(55,155,255,.10) !important;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease,

        filter .25s ease !important;

}


/* ---------------------------------------------------------
   BUTTON ARROW
--------------------------------------------------------- */

.lg-related-explore-arrow{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    color:#151827 !important;

    font-size:17px !important;

    font-weight:800 !important;

    line-height:1 !important;

    transition:
        transform .25s ease !important;

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.lg-related-explore-button:hover{

    transform:translateY(-3px) !important;

    color:#111111 !important;

    filter:brightness(1.015) !important;

    box-shadow:

        0 11px 27px
        rgba(0,0,0,.22),

        0 0 24px
        rgba(255,45,180,.20),

        0 0 28px
        rgba(55,155,255,.17) !important;

}


.lg-related-explore-button:hover
.lg-related-explore-arrow{

    transform:translateX(4px) !important;

}


/* ---------------------------------------------------------
   ACTIVE
--------------------------------------------------------- */

.lg-related-explore-button:active{

    transform:translateY(-1px)
        scale(.985) !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    .lg-related-explore-section{

        padding:24px !important;

        border-radius:21px !important;

    }

    .lg-related-explore-buttons{

        gap:11px !important;

    }

    .lg-related-explore-button{

        min-height:44px !important;

        padding:10px 16px !important;

        font-size:13px !important;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px){

    .lg-related-explore-section{

        margin-top:24px !important;

        padding:20px 15px !important;

        border-radius:19px !important;

    }

    .lg-related-explore-buttons{

        justify-content:center !important;

        gap:9px !important;

    }

    .lg-related-explore-button{

        min-height:42px !important;

        padding:9px 14px !important;

        font-size:12px !important;

    }

    .lg-related-explore-arrow{

        font-size:15px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    .lg-related-explore-section{

        padding:17px 12px !important;

    }

    .lg-related-explore-button{

        padding:8px 12px !important;

        font-size:11px !important;

    }

}

/* =========================================================
   REMOVE THEME GAP AROUND DISCOVER SECTIONS
========================================================= */

.lg-latest-lyrics-section,
.lg-related-explore-section{

    margin-bottom:0 !important;

}


/* Keep only the intentional 20px gap */

.lg-related-explore-section{

    margin-top:20px !important;

}

.lg-latest-lyrics-section + .lg-related-explore-section{

    margin-top:20px !important;

}

.lg-related-explore-section{

    width:100% !important;

    max-width:100% !important;

}


/* =========================================================
   EXPLORE BUTTONS — MOBILE ONLY
   Keep desktop + tablet design unchanged
========================================================= */

@media (max-width:700px){

    .lg-related-explore-section{

        margin-top:20px !important;

        padding:20px 14px !important;

        border-radius:19px !important;

    }


    .lg-related-explore-buttons{

        width:100% !important;

        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:center !important;

        align-items:center !important;

        gap:9px !important;

    }


    .lg-related-explore-button{

        flex:0 0 auto !important;

        width:auto !important;

        max-width:100% !important;

        min-height:42px !important;

        padding:9px 14px !important;

        box-sizing:border-box !important;

        font-size:12px !important;

        line-height:1.3 !important;

        white-space:normal !important;

        text-align:center !important;

    }


    .lg-related-explore-arrow{

        flex-shrink:0 !important;

        font-size:15px !important;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:380px){

    .lg-related-explore-section{

        margin-top:20px !important;

        padding:17px 11px !important;

        border-radius:17px !important;

    }


    .lg-related-explore-buttons{

        gap:8px !important;

    }


    .lg-related-explore-button{

        min-height:40px !important;

        padding:8px 11px !important;

        font-size:11px !important;

    }

}

/* =========================================================
   CONNECT 50 LYRICS → EXPLORE BUTTONS
   REMOVE EXCESSIVE VERTICAL GAP
========================================================= */

.lg-latest-lyrics-section
+ .lg-related-explore-section{

    margin-top:-10px !important;

}


@media (max-width:700px){

    .lg-related-explore-section{

        margin-top:20px !important;

        padding:15px 12px !important;

        border-radius:18px !important;

    }

    .lg-related-explore-buttons{

        gap:9px !important;

    }

    .lg-related-explore-button{

        max-width:100% !important;

        padding:9px 13px !important;

        font-size:12px !important;

        line-height:1.3 !important;

        white-space:normal !important;

        text-align:center !important;

    }

}


/* =========================================================
   EXPLORE BUTTONS — TRANSPARENT YELLOW GLOW
========================================================= */

.lg-related-explore-section{

    background:transparent !important;

    border:1.5px solid rgba(255,220,70,.80) !important;

    box-shadow:
        0 0 12px rgba(255,210,50,.18),
        0 0 24px rgba(255,200,40,.10) !important;

    border-radius:22px !important;

}









/* =========================================================
   DISCOVER LYRICS — FINAL RESPONSIVE FIX
   TABLET = 1 COLUMN
   MOBILE = FULL-WIDTH / STRETCHED LYRIC CARDS
========================================================= */


/* =========================================================
   TABLET
   1100px and below = ONE COLUMN
========================================================= */

@media (max-width:1100px){

    .lg-discover-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        gap:28px !important;

    }

    .lg-discover-column{

        width:100% !important;

        min-width:0 !important;

        box-sizing:border-box !important;

    }

    .lg-discover-list{

        width:100% !important;

    }

    .lg-discover-item{

        width:100% !important;

        max-width:100% !important;

        box-sizing:border-box !important;

    }

}


/* =========================================================
   MOBILE
   STRETCH LYRIC CARDS
========================================================= */

@media (max-width:700px){

    .lg-discover-grid{

        width:100% !important;

        grid-template-columns:1fr !important;

        gap:22px !important;

    }

    .lg-discover-column{

        width:100% !important;

        min-width:0 !important;

        box-sizing:border-box !important;

        padding-left:10px !important;

        padding-right:10px !important;

    }

    .lg-discover-list{

        width:100% !important;

        margin-left:0 !important;

        margin-right:0 !important;

    }

    .lg-discover-item{

        width:100% !important;

        max-width:none !important;

        box-sizing:border-box !important;

        margin-left:0 !important;

        margin-right:0 !important;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:420px){

    .lg-discover-column{

        padding-left:6px !important;

        padding-right:6px !important;

    }

    .lg-discover-item{

        width:100% !important;

    }

}



/* =========================================================
   DISCOVER LYRICS — EMPTY STATE
========================================================= */

.lg-discover-empty {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    opacity: 1 !important;
    width: 100%;
    padding: 18px 12px;
    box-sizing: border-box;
}


















/* =========================================================
   LATEST LYRICS — FINAL WIDTH & RESPONSIVE GRID FIX
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   Keep 5 columns, but give each column slightly more width.
   --------------------------------------------------------- */

@media (min-width: 1101px) {

    .lg-latest-lyrics-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 12px !important;

        width: calc(100% + 10px) !important;

        margin-left: -5px !important;
    }

}


/* ---------------------------------------------------------
   TABLET
   IMPORTANT:
   5 PHP columns = 5 visual rows.
   Each row contains ONE full-width column.
   
   This removes the existing 3-column tablet layout.
   --------------------------------------------------------- */

@media (min-width: 701px) and (max-width: 1100px) {

    .lg-latest-lyrics-grid {
        grid-template-columns: 1fr !important;

        gap: 16px !important;

        width: calc(100% + 20px) !important;

        margin-left: -10px !important;
    }


    .lg-latest-lyrics-column {
        width: 100% !important;

        min-width: 0 !important;
    }


    .lg-latest-lyrics-item {
        width: 100% !important;

        box-sizing: border-box !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   One column, stretched wider inside the section.
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .lg-latest-lyrics-grid {
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        width: calc(100% + 12px) !important;

        margin-left: -6px !important;
    }


    .lg-latest-lyrics-column {
        width: 100% !important;

        min-width: 0 !important;
    }


    .lg-latest-lyrics-item {
        width: 100% !important;

        box-sizing: border-box !important;
    }

}