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

body{
font-family:Segoe UI;
background:#0f0f17;
color:white;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:#151522;
border-bottom:1px solid #222;
}

.logo{
font-size:24px;
font-weight:bold;
color:#c084fc;
text-decoration:none;
cursor:pointer;
transition:0.2s;
}

.logo:hover{
color:#a855f7;
transform:scale(1.05);
}

.logo-symbol{
color:#7c3aed;
margin-right:6px;
}

nav a{
margin-left:25px;
text-decoration:none;
color:#ddd;
font-weight:500;
}

nav a:hover{
color:white;
}

/* LAYOUT */

.main-layout{
display:grid;
grid-template-columns:280px 1fr 280px;
gap:40px;
max-width:1400px;
margin:auto;
padding:40px 20px;
}

/* LEFT PANEL */

.left-panel h2{
margin-bottom:20px;
}

.track-card{
background:#1a1a28;
padding:12px;
border-radius:12px;
margin-bottom:15px;
transition:0.25s;
border:1px solid transparent;
cursor:pointer;
}

.track-card:hover{
transform:scale(1.03);
border:1px solid #8d0d87;
box-shadow:0 0 10px rgba(124,58,237,0.4);
}

.track-card img{
width:100%;
border-radius:8px;
margin-bottom:8px;
}

.track-card span{
color:#ffd166;
}

.track-link{
display:block;
text-decoration:none;
color:inherit;
}

.track-card:hover{
transform:scale(1.03);
}

/* FEED */

.feed{
display:flex;
flex-direction:column;
gap:20px;
}

/* CREATE POST */

.create-post{
background:#1a1a28;
padding:20px;
border-radius:12px;
}

.create-post textarea{
width:100%;
height:80px;
background:#101018;
border:none;
border-radius:8px;
padding:10px;
color:white;
margin-bottom:10px;
}

.create-post button{
background:#7c3aed;
border:none;
padding:10px 20px;
border-radius:8px;
color:white;
cursor:pointer;
}

/* POST */

.post{
background:#1a1a28;
padding:18px;
border-radius:12px;
}

.post-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.post-header img{
width:40px;
height:40px;
border-radius:50%;
}

.post-author{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:white;
}

.post-author:hover{
opacity:0.8;
}

.author-name{
font-weight:600;
}

.post-actions{
display:flex;
gap:10px;
margin-top:10px;
}

.post-actions button{
background:#111120;
border:none;
padding:6px 12px;
border-radius:6px;
color:white;
cursor:pointer;
transition:0.2s;
}

.post-actions button:hover{
background:#2a2a3a;
}

.comments{
margin-top:15px;
display:flex;
flex-direction:column;
gap:8px;
}

.comment{
background:#101018;
padding:8px 10px;
border-radius:6px;
font-size:14px;
}

.comment-form{
display:flex;
gap:8px;
margin-top:10px;
}

.comment-form input{
flex:1;
background:#101018;
border:none;
border-radius:6px;
padding:8px;
color:white;
}

.comment-form button{
background:#7c3aed;
border:none;
padding:8px 14px;
border-radius:6px;
color:white;
cursor:pointer;
}

.comment-btn{
background:#111120;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
display:inline-block;
}

.comment-btn:hover{
background:#2a2a3a;
}

summary{
list-style:none;
cursor:pointer;
}

summary::-webkit-details-marker{
display:none;
}

.comments-toggle{
margin-top:10px;
}

.comments-container{
display:none;
margin-top:15px;
}
/* RIGHT PANEL */

.right-panel h2{
margin-bottom:20px;
}

.artist{
display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;
background:#1a1a28;
padding:10px;
border-radius:10px;

border:1px solid transparent;

transition: all 0.25s ease;
cursor:pointer;
}

.artist:hover{
border:1px solid #8d0d87;
box-shadow:0 0 10px rgba(124,58,237,0.4);
transform:translateY(-2px);
}

.artist img{
width:50px;
height:50px;
border-radius:50%;
transition:0.25s;
}

.artist:hover img{
transform:scale(1.08);
}

.feed-title{
margin-bottom:20px;
font-size:22px;
}

.post{
background:#1a1a28;
padding:18px;
border-radius:12px;
transition:0.3s;
}

.post:hover{
background:#202034;
}
/* TRACK PAGE */

.track-page{
max-width:900px;
margin:auto;
padding:40px 20px;
}

.track-header{
display:flex;
gap:30px;
margin-bottom:30px;
}

.track-cover{
width:350px;
border-radius:12px;
}

.track-info h1{
margin-bottom:10px;
}

.criteria{
display:flex;
gap:20px;
margin-bottom:30px;
}

.criterion{
background:#1a1a28;
padding:15px;
border-radius:10px;
}

.comments{
display:flex;
flex-direction:column;
gap:15px;
}

.comment{
background:#1a1a28;
padding:15px;
border-radius:10px;
}