/* UserPackSection component styles */
.userpack-card {
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  padding: .65rem .9rem .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
body.dark-mode .userpack-card { background:#23272a; border-color:#36393f; }
.userpack-title { font-size:1.05rem; line-height:1.2; }
.userpack-meta { font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.userpack-meta .badge { font-size:.55rem; padding: .3rem .45rem; }
.userpack-progress-wrapper { display:flex; flex-direction:column; gap:.25rem; }
.userpack-progress { height:32px; border-radius:6px; overflow:hidden; }
.userpack-progress .progress-bar { font-size:.7rem; display:flex; align-items:center; justify-content:center; }
.userpack-mainline { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.userpack-mainline-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.userpack-channel-editor { margin-top:.35rem; }
.userpack-channel-editor input.form-control-sm { height:32px; }
.userpack-channel-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.userpack-channel-row > * { flex:1 1 auto; }
.userpack-channel-row button { flex:0 0 auto; }
@media (max-width: 650px) {
  .userpack-progress { height:28px; }
  .userpack-channel-editor input.form-control-sm { height:28px; }
}