/* ==========================================
   LyricsGroove Button
========================================== */

.lg-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px 28px;

border:none;

border-radius:999px;

font-size:15px;

font-weight:700;

line-height:1;

text-decoration:none;

cursor:pointer;

color:#fff;

background:
linear-gradient(
135deg,
#DE497B,
#7C3AED
);

box-shadow:
0 10px 25px rgba(222,73,123,.25);

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

}

.lg-btn:hover{

transform:
translateY(-3px);

filter:brightness(1.05);

box-shadow:
0 20px 45px rgba(222,73,123,.35);

}

.lg-btn:active{

transform:translateY(-1px);

}

.lg-btn svg{

width:18px;

height:18px;

}


/* ==================================================
   LyricsGroove Hero Quick Actions
================================================== */

.lg-artist-actions{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:14px;

margin-top:28px;

}

.lg-btn-primary{

background:linear-gradient(
90deg,
#1C55FF 0%,
#CF006B 35%,
#3D007A 100%
);

color:#fff;

border:none;

border-radius:14px;

padding:14px 22px;

font-size:15px;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

box-shadow:
0 12px 30px rgba(61,0,122,.28);

transition:
all .35s cubic-bezier(.22,1,.36,1);

}

.lg-btn-primary i{

font-size:16px;

color:#fff;

transition:.35s;

}

.lg-btn-primary:hover{

transform:
translateY(-3px);

box-shadow:
0 20px 40px rgba(61,0,122,.35);

filter:brightness(1.05);

}

.lg-btn-primary:hover i{

transform:scale(1.08);

}


@media (max-width:768px){

.lg-artist-actions{

gap:10px;

justify-content:center;

}

.lg-btn-primary{

flex:1 1 calc(50% - 10px);

min-width:145px;

padding:12px 16px;

font-size:14px;

}

}