/* SBS Widgets Next - futurist utility layer */
:root {
  --sbs-next-glow: color-mix(in srgb, var(--bs-primary, #0d6efd) 35%, #00ffd5 65%);
  --sbs-next-surface: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, #0b1220 8%);
}

.sbs-next-panel {
  background: radial-gradient(1200px 300px at 10% -20%, color-mix(in srgb, var(--sbs-next-glow) 32%, transparent), transparent), var(--sbs-next-surface);
  border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, var(--sbs-next-glow) 30%);
  border-radius: var(--bs-border-radius-xl, 1rem);
  box-shadow: 0 10px 35px rgba(2, 8, 20, .12);
}

.sbs-next-title {
  letter-spacing: .02em;
  text-wrap: balance;
}

.sbs-next-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sbs-next-glow) 40%, transparent);
  background: color-mix(in srgb, var(--sbs-next-glow) 12%, transparent);
  font-size: .78rem;
}

.sbs-next-media {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl, 1rem);
}

.sbs-next-media::after {
  content: "";
  position: absolute;
  inset: -25% -20%;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0 30%, color-mix(in srgb, var(--sbs-next-glow) 40%, transparent) 45%, transparent 70%);
  filter: blur(24px);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  [data-sbs-next-float] {
    transition: transform .26s ease-out;
    will-change: transform;
  }
}