/* ---------- BACKGROUND ---------- */

body{
margin:0;
font-family:Segoe UI,Arial,sans-serif;

background:
linear-gradient(
135deg,
#5a2cff,
#8a46ff 40%,
#ffd84d 100%
);

background-attachment:fixed;
color:white;
}


/* ---------- HEADER ---------- */

header{

position:sticky;
top:0;

background:rgba(20,0,40,0.65);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.25);

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 35px;

z-index:1000;

}

h1{
margin:0;
font-size:22px;
letter-spacing:1px;
}


/* ---------- SEARCH ---------- */

.searchContainer{
position:relative;
display:flex;
align-items:center;
}

#searchIcon{
font-size:22px;
cursor:pointer;
transition:0.2s;
}

#searchIcon:hover{
transform:scale(1.1);
}

#searchBar{

position:absolute;
right:40px;

width:0;
opacity:0;

padding:8px 12px;

border-radius:20px;
border:none;
outline:none;

transition:0.25s;

}

.searchOpen #searchBar{
width:240px;
opacity:1;
}


/* ---------- GRID ---------- */

#songList{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));

gap:28px;

padding:35px;

}


/* ---------- CARD ---------- */

.songCard{

position:relative;

background:rgba(0,0,0,0.55);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.18);

padding:22px;

border-radius:22px;

color:white;

box-shadow:

0 8px 25px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.08);

transition:

transform 0.25s ease,
box-shadow 0.25s ease,
border 0.25s ease;

}


/* GRADIENT ONLY ON HOVER */

.songCard:hover{

transform:
translateY(-8px)
scale(1.025);

border:1px solid transparent;

background:

linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.55)
) padding-box,

linear-gradient(
90deg,
#7a3cff,
#ffd84d
) border-box;

box-shadow:

0 25px 60px rgba(0,0,0,0.6),
0 0 30px rgba(122,60,255,0.25);

}



/* ---------- TITLE ---------- */

.songTitle{
font-size:18px;
font-weight:700;
margin-bottom:6px;
}

.songArtist{
font-size:14px;
opacity:0.8;
margin-bottom:18px;
}


/* ---------- META BOXES ---------- */

.songMeta{

display:flex;
gap:10px;
justify-content:center;
margin-bottom:18px;
flex-wrap:wrap;

}


.metaBox{

flex:1 1 90px;
min-width:0;
max-width:100%;

background:rgba(0,0,0,0.55);

border-radius:12px;

border:1px solid rgba(255,255,255,0.25);

padding:8px;

}


.metaLabel{
font-size:11px;
opacity:0.7;
margin-bottom:4px;
}

.metaValue{
font-size:14px;
font-weight:600;

word-break:break-word;
overflow-wrap:break-word;
}



/* ---------- BUTTONS ---------- */

.buttonRow{

margin-top:14px;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

flex-wrap:nowrap;

}


button{

background:rgba(0,0,0,0.6);

border:1px solid rgba(255,255,255,0.3);

color:white;

padding:10px 16px;

border-radius:14px;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:0.25s;

width:120px;

}


button:hover{

transform:translateY(-3px);

background:rgba(0,0,0,0.8);

box-shadow:
0 15px 25px rgba(0,0,0,0.4);

}



/* ---------- LOADER ---------- */

#loading{

text-align:center;

padding-top:120px;

}


.loader{

width:50px;
height:50px;

margin:auto;

border-radius:50%;

border:4px solid rgba(255,255,255,0.2);

border-top:4px solid #ffd84d;

animation:spin 1s linear infinite;

}


.loadingText{

margin-top:15px;

opacity:0.8;

font-size:14px;

}


@keyframes spin{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}