.cb-ring {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-ring__input { display: none; }
.cb-ring__box {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  position: relative;
  display: flex; align-items: center;
  justify-content: center;
}
.cb-ring__halo {
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    #7c6cff 0%, #ff6c8a 50%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
}
.cb-ring__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#7c6cff,#ff6c8a);
  transform: scale(0);
  transition: transform .35s
    cubic-bezier(.34,1.56,.64,1) .1s;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__halo {
  opacity: 1;
  animation: ring-spin .5s
    cubic-bezier(.23,1,.32,1) forwards;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__dot {
  transform: scale(1);
}
@keyframes ring-spin {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}