.skill-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
}
.skill-catalog-grid .pick-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.skill-catalog-grid .pick-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.skill-hub-note {
  font: 12px/1.6 system-ui, sans-serif;
  color: var(--text, #e4ecff);
  padding: 12px;
  border: 1px solid #5b86f555;
  border-radius: 10px;
  margin: 14px 0;
  background: #15244399;
}
#pick-bubble .pick-card-media {
  background: linear-gradient(160deg, #2e0854 0%, #581c87 50%, #3b0764 100%) !important;
  border-radius: 0.7rem !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
}
#pick-bubble .pick-card-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  border-radius: 0.7rem !important;
  transition: transform 0.45s ease;
}
#pick-bubble:hover .pick-card-media img {
  transform: scale(1.05);
}
#pick-bubble:hover {
  border-color: #a855f7 !important;
  box-shadow: 0 14px 30px rgba(168, 85, 247, 0.22) !important;
}
#pick-bubble .pick-card-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(147, 51, 234, 0.28) !important;
}
@media (max-width: 360px) {
  .skill-catalog-grid {
    gap: 0.35rem !important;
  }
  .skill-catalog-grid .pick-card {
    padding: 0.35rem !important;
  }
}