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

body{
    background:#121212;
    color:#fff;
    display:flex;
    justify-content:center;
    padding:40px 20px;
}
.hero {
    width: 100%;
    min-height: 100vh;
    background: #020202;
    padding: 10px 10%;
    overflow: hidden;
    position: relative;
}
.logo {
    width: 140px;
    height: auto;
}
.logout-btn {
    text-decoration: none;
    background: #df2883;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
}

.container{
    width:100%;
    max-width:900px;
}

.top-bar{
    margin-bottom:25px;
}

.top-bar h1{
    font-size:38px;
    color:#1DB954;
}

.top-bar p{
    color:#b3b3b3;
    margin-top:5px;
}

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

.track{
    display:flex;
    align-items:center;
    gap:18px;
    background:#181818;
    border-radius:12px;
    padding:15px;
    transition:.3s;
}

.track:hover{
    background:#282828;
}

.track img{
    width:90px;
    height:90px;
    border-radius:10px;
    object-fit:cover;
}

.info{
    flex:1;
}

.info h3{
    margin-bottom:10px;
    font-size:20px;
}

audio{
    width:100%;
    height:40px;
}
.home-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: #a441ad;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.home-btn:hover {
    background: #45a049;
}