.badge-group { 
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.badge-ping { 
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: 10;
}
.badge-ping span {
  position: absolute;
  display: inline-flex;
  border-radius: 9999px;
}
.badge-ping .ping-bg {
  height: 20px;
  width: 20px;
  animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
  background-color: #d18aff;
  opacity: 0.6;
}
.badge-ping .ping-count {
  position: relative;
  height: 16px;
  width: 16px;
  background-color: #a56cff;
  color: white;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 0 6px #a56cffaa;
}
@keyframes ping { 75%,100%{ transform: scale(2); opacity:0; } }
.badge-button { 
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(to bottom right,#1a1a1f,#0a0a0d);
  padding:1px;
  box-shadow:0 0 12px #a56cff33;
  transition: box-shadow 0.3s ease;
}
.badge-inner {
  background-color:#111;
  border-radius:14px;
  display:flex;
  align-items:center;
  padding:10px 16px;
  gap:12px;
  transition:background 0.3s ease;
  flex-direction:column;
}
.badge-icon {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:42px;
  width:42px;
  border-radius:10px;
  background:linear-gradient(135deg,#c77dff,#9d4edd);
  box-shadow:0 0 10px #a56cff88;
  transition: transform 0.3s ease;
}
.badge-icon svg { 
  width:22px; 
  height:22px; 
  stroke:white; 
  stroke-width:2;
}
.badge-text { 
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.badge-text span:first-child {
  color:#fff;
  font-size:14px;
  font-weight:600;
}
.badge-text span:last-child {
  color:#b389ff;
  font-size:11px;
}
.badge-dots {
  display:flex;
  gap:3px;
  margin-left:auto;
}
.badge-dots div {
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:#a56cff;
  opacity:0.8;
  transition:transform 0.3s ease;
}
.badge-group:hover .badge-dots div {
  transform:scale(1.4);
}
.badge-group:hover .badge-icon {
  transform:scale(1.1);
}
.badge-group:hover .badge-inner {
  background:#1a1a1f;
}
.badge-group:hover .badge-button {
  box-shadow:0 0 20px #b86fff66;
}