/* src/client/components/GradientBadge.css */
.gradient-badge {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}

.gradient-badge-mesh {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px);
  opacity: .9;
  background: radial-gradient(closest-side at 12.5% 25%, #272e3d 0%, #0000 100%), radial-gradient(closest-side at 37.5% 25%, #ff7e10 0%, #0000 100%), radial-gradient(closest-side at 62.5% 25%, #fa7745 0%, #0000 100%), radial-gradient(closest-side at 87.5% 25%, #e47673 0%, #0000 100%), radial-gradient(closest-side at 87.5% 75%, #e47673 0%, #0000 100%), radial-gradient(closest-side at 62.5% 75%, #c56780 0%, #0000 100%), radial-gradient(closest-side at 37.5% 75%, #8d517d 0%, #0000 100%), radial-gradient(closest-side at 12.5% 75%, #554264 0%, #0000 100%);
  border-radius: 9999px;
  inset: -34px -28px;
}

.gradient-badge-fill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  letter-spacing: -.01em;
  color: #ffffffeb;
  isolation: isolate;
  background: #0009;
  border-radius: 6px;
  justify-content: center;
  align-items:  center;
  padding: 14px 22px;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 19px;
  font-weight: 500;
}

.gradient-badge-fill:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: radial-gradient(farthest-side at 12.5% 25%, #3e4a63 50%, #0000 100%), radial-gradient(farthest-side at 37.5% 25%, #ff7e10 50%, #0000 100%), radial-gradient(farthest-side at 62.5% 25%, #fa7745 50%, #0000 100%), radial-gradient(farthest-side at 87.5% 25%, #e47673 50%, #0000 100%), radial-gradient(farthest-side at 87.5% 75%, #e47673 50%, #0000 100%), radial-gradient(farthest-side at 62.5% 75%, #c56780 50%, #0000 100%), radial-gradient(farthest-side at 37.5% 75%, #8d517d 50%, #0000 100%), radial-gradient(farthest-side at 12.5% 75%, #554264 50%, #0000 100%);
  padding: 1px;
  inset: 0;
}