/* =========================
   PAGE
========================= */
.page-wrapper{
  min-height:
    calc(100dvh - 50px - 28px);
  padding-bottom:30px;
}

.kategori-box{
  background:#fff;
  color:#000;
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
}

.kategori-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:#f1f1f1;
  border-radius:12px;
  min-height:40px;
  padding:0 20px;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  transition:0.2s;
}

.kategori-header:hover{
  transform:scale(1.01);
}

.kategori-header span:last-child{
  position:absolute;
  right:20px;
  font-size:20px;
}

.kategori-list{
  display:none;
  padding:0 16px 16px;
}

.kategori-list.active{
  display:block;
}

.song-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid #ddd;
}

.song-item:last-child{
  border:none;
}

.song-title{
  display:flex;
  align-items:baseline;
  gap:4px;
  overflow:hidden;
  cursor:pointer;
}

.song-main{
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.song-artist{
  font-size:12px;
  opacity:.8;
  white-space:nowrap;
  flex-shrink:0;
}

.add-btn{
  width:24px;
  height:24px;
  border:none;
  border-radius:8px;
  background:#000;
  color:#fff;
  cursor:pointer;
}

.add-btn.added{
  background:#ff8800;
  color:white;
}

.add-btn{
  transition:.2s;
}

.add-btn:active{
  transform:scale(.92);
}

.preview-title{
  text-align:center;
  margin-top:10px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
}

#preview-setlist{
  display:grid;
  grid-template-columns:
    1fr 1fr;
  gap:20px;
  width:100%;
  max-width:100%;
  margin:20px auto;
  color:white;
  font-size:14px;
  line-height:1;
}

.preview-column{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.preview-song{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.remove-btn{
  width:15px;
  height:15px;
  border:none;
  border-radius:20%;
  background:#aa2222;
  color:white;
  font-size:10px;
  cursor:pointer;
  flex-shrink:0;
}

.bottom-nav{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
}

.bottom-nav button{
  border:none;
  border-radius:12px;
  padding:14px 28px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:768px){
  #preview-setlist{
    gap:8px 10px;
    font-size:12px;
    padding:4 20px;
  }
}