/* Compact management UI for panels 01 / 02 only */
.adminGrid>.adminPanel{
  display:flex;
  min-height:0;
  flex-direction:column;
}
.adminCompactHeadCount{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  margin-left:8px;
  padding:4px 8px;
  border:1px solid #d8bddc80;
  border-radius:999px;
  background:#fbf5fc;
  color:#85658c;
  font-size:13px;
  font-weight:400;
  vertical-align:middle;
  white-space:nowrap;
}
.adminFormToggle{
  display:inline-flex;
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding:10px 13px;
  border:1px solid #cfacd675;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#f8eef9);
  box-shadow:inset 0 1px #fff,0 3px 10px #66406f0d;
  color:#704d78;
  font-size:14px;
  font-weight:400;
  text-align:left;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.adminFormToggle::after{
  content:"⌄";
  flex:0 0 auto;
  font-family:Arial,sans-serif;
  font-size:16px;
  line-height:1;
  transition:transform .2s ease;
}
.adminFormToggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.adminFormToggle:hover{
  border-color:#c58bcf;
  background:#f6e8f8;
  box-shadow:inset 0 1px #fff,0 5px 14px #66406f12;
}
.adminFormToggle:focus-visible{
  outline:3px solid #ddb0e6;
  outline-offset:2px;
}
.adminGrid .adminForm[hidden]{display:none}
.adminGrid .adminForm.adminCompactAddForm{
  margin-top:12px;
  padding:15px;
  border:1px solid #dec9e277;
  border-radius:11px;
  background:#fff9;
}

/* Lists stay inside their panels instead of extending the whole page. */
#adminLinkList,
#musicManagerList{
  max-height:520px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#cba7d3 #f5edf7;
  scrollbar-width:thin;
  padding-right:5px;
}
#adminLinkList::-webkit-scrollbar,
#musicManagerList::-webkit-scrollbar{width:8px}
#adminLinkList::-webkit-scrollbar-track,
#musicManagerList::-webkit-scrollbar-track{
  border-radius:999px;
  background:#f5edf7;
}
#adminLinkList::-webkit-scrollbar-thumb,
#musicManagerList::-webkit-scrollbar-thumb{
  border:2px solid #f5edf7;
  border-radius:999px;
  background:#cba7d3;
}

/* Existing carousel-link rows become compact summaries until explicitly edited. */
#adminLinkList .managerRow.adminCompactRow{
  display:block;
  min-width:0;
  padding:12px;
  border-radius:12px;
  background:#fff9;
}
.adminManagerSummary{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
}
.adminManagerThumb{
  display:block;
  width:58px;
  height:58px;
  overflow:hidden;
  border-radius:10px;
  background:#f2e5f5;
  object-fit:cover;
  box-shadow:0 4px 12px #60416c12;
}
.adminManagerCopy{
  min-width:0;
}
.adminManagerCopy strong,
.adminManagerCopy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.adminManagerCopy strong{
  color:#4d3a52;
  font-size:15px;
  font-weight:400;
}
.adminManagerCopy small{
  margin-top:5px;
  color:#8a758f;
  font-size:13px;
}
.adminManagerActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.adminManagerActions a,
.managerEditToggle,
.managerCompactDelete{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  padding:7px 9px;
  border:1px solid #d4b8d96e;
  border-radius:8px;
  background:#fff;
  color:#75577c;
  font-size:13px;
  font-weight:400;
  line-height:1.1;
  text-decoration:none;
}
.managerEditToggle{
  border-color:#cba1d370;
  background:#f8eef9;
  color:#75467f;
}
.managerCompactDelete{
  border-color:#d3a0ae73;
  color:#a64f69;
}
.managerCompactDelete.confirm{
  border-color:#ad4965;
  background:#ad4965;
  color:#fff;
}
.adminManagerActions a:hover,
.managerEditToggle:hover{
  border-color:#c58bcf;
  background:#f5e7f7;
}
.managerCompactDelete:hover{background:#fff7f9}
.managerCompactDelete.confirm:hover{background:#ad4965}
.adminManagerActions button:focus-visible,
.adminManagerActions a:focus-visible{
  outline:3px solid #ddb0e6;
  outline-offset:2px;
}
.managerEditArea{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid #e3d3e671;
}
.managerEditArea[hidden]{display:none!important}
.managerEditArea>.wide,
.managerEditArea>.rowActions{grid-column:1/-1}
#adminLinkList .managerRow.adminCompactRow.expanded{
  border-color:#cda6d47a;
  background:#fff;
  box-shadow:0 8px 20px #60416c0c;
}
#adminLinkList .managerRow.adminCompactRow .rowActions{
  margin-top:1px;
}
#adminLinkList .managerRow.adminCompactRow .rowState{
  min-width:max-content;
}
.managerCompactDelete:disabled,
.managerEditToggle:disabled{
  opacity:.55;
  cursor:wait;
}

/* Playlist items keep their existing compact structure, only the list itself scrolls. */
#musicManagerList .musicManagerItem:first-child{border-top:1px solid var(--line)}
#musicManagerList .musicManagerItem{
  background:#fff5;
}

/* Mobile keeps the same interaction with smaller internal scroll areas. */
@media(max-width:900px){
  #adminLinkList,
  #musicManagerList{max-height:460px}
}
@media(max-width:520px){
  #adminLinkList,
  #musicManagerList{max-height:400px}
  .adminManagerSummary{
    grid-template-columns:52px minmax(0,1fr);
    gap:10px;
  }
  .adminManagerThumb{width:52px;height:52px}
  .adminManagerActions{
    grid-column:1/-1;
    justify-content:flex-start;
    padding-left:62px;
  }
  .managerEditArea{grid-template-columns:1fr}
  .managerEditArea>.wide,
  .managerEditArea>.rowActions{grid-column:1}
  .adminFormToggle{font-size:14px}
}