.music-page{
  padding-block:3rem;
}

.music-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:2rem;
  align-items:start;
}

@media (max-width:800px){
  .music-grid{
    grid-template-columns:1fr;
  }
}

.music-profile{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1.5rem;
  text-align:center;
}

.music-profile-avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 1rem;
}

.music-profile-name{
  font-family:var(--font-orbitron);
  font-size:1.1rem;
  color:var(--color-text);
  margin-bottom:.35rem;
}

.music-profile-count{
  font-size:.85rem;
  color:var(--color-text-dim);
  margin-bottom:1rem;
}

.music-profile-link{
  display:inline-block;
  font-size:.8rem;
  color:var(--color-red);
}

.music-profile-error{
  font-size:.85rem;
  color:var(--color-text-dim);
}

.music-recent{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:2rem;
}

.music-recent h1{
  font-family:var(--font-orbitron);
  font-size:1.4rem;
  margin-bottom:1.5rem;
  color:var(--color-text);
}

.music-track-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.music-track-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem;
  border-radius:10px;
  transition:background .2s ease;
}

.music-track-row:hover{
  background:#1f1f1f;
}

.music-track-row.is-playing{
  border:1px solid var(--color-red);
}

.music-track-cover{
  width:44px;
  height:44px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
}

.music-track-info{
  flex:1;
  min-width:0;
}

.music-track-name{
  font-size:.9rem;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-track-artist{
  font-size:.8rem;
  color:var(--color-text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-track-badge{
  font-size:.7rem;
  color:var(--color-red);
  border:1px solid var(--color-red);
  padding:.2rem .5rem;
  border-radius:6px;
  flex-shrink:0;
}