/* Tracklist (scoped) */
.cr-tracklist{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(30,30,40,0.35);
  overflow: hidden;
}

.cr-tracklist__toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: #eaeaf2;
  cursor: pointer;
  font-weight: 800;
}

.cr-tracklist__chev{ opacity: 0.8; }

.cr-tracklist__body{
  padding: 12px 14px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.cr-tl-public{
  display: grid;
  gap: 10px;
}

.cr-tl-item{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.20);
  padding: 10px 12px;
}

.cr-tl-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.cr-tl-num{ opacity: 0.8; margin-right: 6px; }

.cr-tl-meta{
  font-size: 12px;
  opacity: 0.8;
}

.cr-tracklist__admin{
  margin-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  padding-top: 12px;
}

.cr-tracklist__authbar{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.cr-tracklist__authpanel{ margin-top: 10px; }

.cr-tracklist__authcard{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.20);
  padding: 12px;
}

.cr-tracklist__authtitle{ font-weight: 800; opacity: 0.9; margin-bottom: 8px; }

.cr-tracklist__authrow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cr-tl-key{
  flex: 1;
  min-width: 200px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: #eaeaf2;
  padding: 0 14px;
  outline: none;
}

.cr-tracklist__authmsg{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}
.cr-tracklist__authmsg.is-err{ color: rgba(255,190,190,0.95); opacity: 0.95; }
.cr-tracklist__authmsg.is-ok{ color: rgba(185,255,205,0.95); opacity: 0.95; }

.cr-tracklist__admin-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cr-tracklist__admin-title{ font-weight: 800; opacity: 0.9; }

.cr-tl-raw{
  width: 100%;
  min-height: 110px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: #eaeaf2;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
}

.cr-tracklist__buttons{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.cr-tl-count{
  margin-left: auto;
  font-size: 12px;
  opacity: 0.75;
}

.cr-tracklist__preview{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.cr-tracklist__hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}

.cr-tracklist__footer{
  margin-top: 10px;
  display:flex;
  justify-content: flex-end;
}

/* reuse buttons from comments-v2 if present */
.cr-btn{
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #eef1f5;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700;
}
.cr-btn:hover{ background: rgba(255,255,255,.06); }
.cr-btn:active{ transform: translateY(1px); }
.cr-btn:disabled{ opacity: 0.55; cursor: not-allowed; transform: none; }

.cr-btn-primary{
  background: rgba(145,108,255,.16);
  border-color: rgba(145,108,255,.55);
}
.cr-btn-ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* Admin editor visibility is controlled by the [hidden] attribute */
.cr-tracklist__admin { display: block; }
.cr-tracklist__admin[hidden] { display: none !important; }

/* --- Tracklist UI polish: align auth buttons + match reaction buttons --- */
.cr-tracklist__authbar{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 10px 12px 0;
}
.cr-tracklist__authpanel{
  padding: 10px 12px 0;
}

/* Put admin editor ABOVE the published list visually */
.cr-tracklist__admin{
  margin-top: 6px;
}

/* Make tracklist buttons look like reaction buttons */
.cr-tracklist .cr-btn,
.cr-tracklist__authbar button,
.cr-tl-filebtn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cr-tracklist .cr-btn:hover,
.cr-tracklist__authbar button:hover,
.cr-tl-filebtn:hover{
  background: rgba(255,255,255,0.10);
}
.cr-tracklist .cr-btn-primary{
  background: rgba(128,90,213,0.65);
  border-color: rgba(128,90,213,0.9);
}
.cr-tracklist .cr-btn-primary:hover{
  background: rgba(128,90,213,0.78);
}

/* File name text beside custom file button */
.cr-tl-filename{
  opacity: 0.75;
  font-size: 13px;
  padding: 0 6px;
}

/* Buttons row: keep things on one line when possible */
.cr-tracklist__buttons{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap:10px;
}