.cb-pulse {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pulse__input { display: none; }
.cb-pulse__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(61,232,245,.3);
  position: relative; overflow: visible;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-pulse__box::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 13px;
  border: 2px solid #3de8f5; opacity: 0;
}
.cb-pulse__input:checked + .cb-pulse__box {
  background: linear-gradient(135deg, #3de8f5, #06b6d4);
  border-color: #3de8f5; color: #fff;
}
.cb-pulse__input:checked + .cb-pulse__box::after {
  animation: pulse-ring .6s ease-out forwards;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.5); opacity: 0;  }
}