*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}

body{
min-height:100vh;
background:radial-gradient(circle at top,#0a0a0a,#000000);
display:flex;
flex-direction:column;
align-items:center;
color:#f5f5f5;
overflow-x:hidden;
position:relative;
}

body::before{
content:"";
position:absolute;
width:650px;
height:650px;
background:#ffffff;
filter:blur(240px);
opacity:0.08;
}

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

.profile, .main, .footer{position:relative;z-index:2;}

.profile{
margin-top:50px;
text-align:center;
max-width:750px;
}

/* LINK CONTACT */
.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.avatar{
width:110px;height:110px;
border-radius:50%;
border:2px solid #ffffff;
box-shadow:0 0 25px rgba(255,255,255,0.15);
margin-bottom:12px;
cursor:pointer;
transition:0.3s;
}

.avatar:hover{transform:scale(1.05);}

.avatar.fade-out{opacity:0;transform:scale(0.92);}
.avatar.fade-in{opacity:1;transform:scale(1);}

.username{font-size:30px;font-weight:700;color:#ffffff;}

.status-container{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:6px;color:#cccccc;}
.status-dot{width:10px;height:10px;border-radius:50%;}

.description{margin-top:15px;opacity:0.85;line-height:1.6;color:#cccccc;}

.info-grid{margin-top:18px;display:grid;gap:8px;font-size:14px;opacity:0.9;color:#cccccc;}
.flag{width:18px;height:12px;object-fit:cover;margin-right:6px;border-radius:2px;}

.socials{margin-top:18px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.social-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;text-decoration:none;color:#ffffff;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);transition:0.25s;}
.social-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,0.12);box-shadow:0 0 20px rgba(255,255,255,0.15);}
.social-btn img{width:18px;height:18px;filter:invert(1);}

.main{
width:100%;
max-width:1050px;
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:35px;
padding:20px;
}

.section{
background:rgba(255,255,255,0.04);
backdrop-filter:blur(22px);
border-radius:22px;
padding:22px;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 0 30px rgba(255,255,255,0.05);
}

.section-title{
font-size:18px;
margin-bottom:14px;
opacity:0.9;
letter-spacing:1px;
color:#ffffff;
}

.featured{
display:block;
border-radius:18px;
padding:26px;
text-decoration:none;
color:white;
position:relative;
overflow:hidden;
background-size:cover;
background-position:center;
transition:0.3s;
box-shadow:0 0 25px rgba(255,255,255,0.10);
}

.featured:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 0 40px rgba(255,255,255,0.25);}

.featured::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,0.75),rgba(0,0,0,0.25));
}

.featured span{position:relative;z-index:2;font-size:18px;font-weight:700;}

.badge{display:inline-block;margin-top:8px;font-size:12px;opacity:0.8;position:relative;z-index:2;}

.playlist-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.playlist{
display:block;
border-radius:16px;
padding:18px;
text-decoration:none;
color:#ffffff;
position:relative;
overflow:hidden;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.1);
transition:0.25s;
}

.playlist:hover{
transform:translateY(-4px);
background:rgba(255,255,255,0.08);
box-shadow:0 0 25px rgba(255,255,255,0.15);
}

.playlist span{font-weight:600;position:relative;}
.playlist small{display:block;margin-top:6px;opacity:0.7;font-size:12px;position:relative;}
.playlist img{position:absolute;top:10px;right:10px;width:28px;height:18px;object-fit:cover;opacity:0.7;border-radius:3px;}

.staff-section{
grid-column:1/-1;
display:flex;
flex-direction:column;
align-items:center;
}

.staff-card{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:10px;
padding:20px;
border-radius:18px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.1);
transition:0.3s;
text-decoration:none;
color:white;
width:320px;
}

.staff-card:hover{
transform:translateY(-4px);
background:rgba(255,255,255,0.08);
box-shadow:0 0 25px rgba(255,255,255,0.15);
}

.staff-card img{
width:90px;
height:90px;
border-radius:14px;
object-fit:cover;
}

.footer{
margin:30px 0;
font-size:12px;
opacity:0.5;
color:#cccccc;
}

.staff-desc{
  display:block;
  margin-top:6px;
  opacity:0.7;
  font-size:12px;
  line-height:1.4;
}
.staff-code{
  position:relative;
  z-index:2;
  cursor:pointer;
}

.staff-code:active{
  transform:scale(0.98);
  opacity:0.8;
}