#hostbee-spin, #hostbee-spin-pill {
  --hbs-ink: #0f1f1a !important;
  --hbs-muted: #5b6b65 !important;
  --hbs-line: #e3e8e5 !important;
  --hbs-soft: #f3f6f4 !important;
  --hbs-brand: #0d3a30 !important;
  --hbs-brand-hover: #155446 !important;
  --hbs-accent: #15803d !important;
  --hbs-green: #28d058 !important;
  --hbs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
#hostbee-spin *, #hostbee-spin *::before, #hostbee-spin *::after, #hostbee-spin-pill * { box-sizing: border-box !important; }
#hostbee-spin h2, #hostbee-spin p, #hostbee-spin a, #hostbee-spin button, #hostbee-spin strong, #hostbee-spin span, #hostbee-spin div,
#hostbee-spin-pill, #hostbee-spin-pill span {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important;
  font-family: inherit !important; font-style: normal !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; text-align: inherit !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; width: auto !important; height: auto !important; float: none !important; line-height: 1.5 !important; color: inherit !important;
  -webkit-appearance: none !important; appearance: none !important; visibility: visible !important;
}
#hostbee-spin svg, #hostbee-spin svg * { max-width: none !important; box-shadow: none !important; }
#hostbee-spin button:focus-visible, #hostbee-spin a:focus-visible, #hostbee-spin-pill:focus-visible { outline: 3px solid rgba(40, 208, 88, .55) !important; outline-offset: 2px !important; }

#hostbee-spin {
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2147483000 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 16px !important; background: rgba(10, 14, 13, .55) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important; transition: opacity .25s ease !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--hbs-ink) !important; text-align: center !important;
}
#hostbee-spin.is-open { opacity: 1 !important; }
#hostbee-spin .hbs-card {
  position: relative !important; width: 100% !important; max-width: 432px !important; max-height: calc(100vh - 32px) !important; overflow-x: hidden !important; overflow-y: auto !important;
  padding: 56px 24px 24px !important; border-radius: 24px !important; background: #ffffff !important; color: var(--hbs-ink) !important; text-align: center !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
  transform: translateY(16px) scale(.98) !important; transition: transform .3s cubic-bezier(.2, .8, .3, 1) !important;
}
#hostbee-spin.is-open .hbs-card { transform: none !important; }
#hostbee-spin.is-leaving { transition: opacity .38s ease !important; }
#hostbee-spin.is-leaving .hbs-card { transform: translate(calc(-50vw + 72px), calc(50vh - 40px)) scale(.08) !important; opacity: .4 !important; transition: transform .38s cubic-bezier(.5, 0, .75, 0), opacity .38s ease !important; }
#hostbee-spin .hbs-tag {
  position: absolute !important; top: 18px !important; left: 18px !important; display: inline-block !important; padding: 3px 10px !important; border-radius: 8px !important;
  background: var(--hbs-ink) !important; color: #ffffff !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 700 !important;
}
#hostbee-spin .hbs-close {
  position: absolute !important; top: 12px !important; right: 12px !important; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  width: 36px !important; height: 36px !important; border-radius: 10px !important; background: transparent !important; color: var(--hbs-ink) !important; cursor: pointer !important; transition: background .2s ease !important;
}
#hostbee-spin .hbs-close:hover, #hostbee-spin .hbs-close:focus { background: var(--hbs-soft) !important; color: var(--hbs-ink) !important; }
#hostbee-spin .hbs-close svg { display: block !important; width: 22px !important; height: 22px !important; }

#hostbee-spin .hbs-head, #hostbee-spin .hbs-result { position: relative !important; z-index: 1 !important; display: block !important; }
#hostbee-spin .hbs-title { display: block !important; margin: 0 0 12px !important; color: var(--hbs-ink) !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 400 !important; letter-spacing: -.02em !important; }
#hostbee-spin .hbs-lead { display: block !important; color: var(--hbs-ink) !important; }
#hostbee-spin .hbs-accent { display: block !important; color: var(--hbs-accent) !important; font-weight: 700 !important; }
#hostbee-spin .hbs-title.is-back .hbs-lead { margin: 0 0 4px !important; color: var(--hbs-muted) !important; font-size: 17px !important; line-height: 1.4 !important; }
#hostbee-spin .hbs-title.is-back .hbs-accent { font-size: 28px !important; line-height: 1.2 !important; }
#hostbee-spin .hbs-again { margin: 8px 0 0 !important; }
#hostbee-spin .hbs-sub { display: block !important; margin: 0 0 20px !important; color: var(--hbs-muted) !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; }

#hostbee-spin .hbs-tile {
  display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; margin: 0 auto 16px !important; border-radius: 16px !important;
  background: linear-gradient(140deg, #34d36a, #15803d) !important; color: #ffffff !important; box-shadow: 0 10px 20px rgba(21, 128, 61, .28) !important;
  animation: hbs-tilt 3s ease-in-out infinite !important;
}
#hostbee-spin .hbs-tile svg { display: block !important; width: 28px !important; height: 28px !important; }

#hostbee-spin .hbs-wheel { position: relative !important; display: block !important; width: min(288px, 74vw) !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 8px auto 24px !important; }
#hostbee-spin .hbs-face { display: block !important; width: 100% !important; height: 100% !important; overflow: visible !important; filter: drop-shadow(0 8px 20px rgba(15, 31, 26, .12)) !important; }
#hostbee-spin .hbs-t-small { font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; pointer-events: none !important; }
#hostbee-spin .hbs-t-big { font-family: inherit !important; font-weight: 700 !important; letter-spacing: -.02em !important; pointer-events: none !important; }
#hostbee-spin .hbs-flash { pointer-events: none !important; }
#hostbee-spin .hbs-flash.is-on { animation: hbs-flash .35s ease-in-out 3 alternate !important; }
#hostbee-spin .hbs-pointer {
  position: absolute !important; top: -12px !important; left: 50% !important; z-index: 2 !important; display: block !important; width: 32px !important; height: 40px !important; margin-left: -16px !important;
  transform-origin: 50% 32% !important; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)) !important;
}

#hostbee-spin .hbs-label { display: block !important; margin: 0 0 8px !important; color: var(--hbs-ink) !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important; text-align: left !important; }
#hostbee-spin .hbs-code {
  display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 16px !important; padding: 6px 6px 6px 16px !important;
  border: 1px solid var(--hbs-line) !important; border-radius: 12px !important; background: #ffffff !important; text-align: left !important;
}
#hostbee-spin .hbs-code-value { flex: 1 !important; display: block !important; color: var(--hbs-ink) !important; font-family: var(--hbs-mono) !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: .04em !important; word-break: break-all !important; }
#hostbee-spin .hbs-copy {
  display: inline-block !important; flex-shrink: 0 !important; padding: 8px 14px !important; border-radius: 8px !important; background: var(--hbs-soft) !important; color: var(--hbs-ink) !important;
  font-family: inherit !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 700 !important; cursor: pointer !important; transition: background .2s ease !important;
}
#hostbee-spin .hbs-copy:hover, #hostbee-spin .hbs-copy:focus { background: var(--hbs-line) !important; color: var(--hbs-ink) !important; }

#hostbee-spin .hbs-spin, #hostbee-spin .hbs-claim {
  display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; padding: 12px 24px !important;
  border-radius: 12px !important; background: var(--hbs-brand) !important; color: #ffffff !important;
  font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 700 !important; cursor: pointer !important;
  transition: background .2s ease, transform .15s ease !important;
}
#hostbee-spin .hbs-spin:hover, #hostbee-spin .hbs-spin:focus, #hostbee-spin .hbs-claim:hover, #hostbee-spin .hbs-claim:focus,
#hostbee-spin .hbs-claim:visited, #hostbee-spin .hbs-claim:active { background: var(--hbs-brand-hover) !important; color: #ffffff !important; border: 0 !important; text-decoration: none !important; }
#hostbee-spin .hbs-claim:visited { background: var(--hbs-brand) !important; }
#hostbee-spin .hbs-spin:active, #hostbee-spin .hbs-claim:active { transform: scale(.99) !important; }
#hostbee-spin .hbs-spin:disabled { cursor: wait !important; background: var(--hbs-soft) !important; color: #8a9893 !important; transform: none !important; }
#hostbee-spin .hbs-error { display: block !important; min-height: 20px !important; margin: 8px 0 0 !important; color: #b91c1c !important; font-size: 13px !important; line-height: 1.4 !important; }
#hostbee-spin .hbs-skip {
  display: inline-block !important; margin: 0 !important; padding: 8px !important; background: none !important; color: var(--hbs-muted) !important;
  font-family: inherit !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 400 !important; cursor: pointer !important;
  text-decoration: underline !important; text-underline-offset: 3px !important;
}
#hostbee-spin .hbs-skip:hover, #hostbee-spin .hbs-skip:focus { background: none !important; color: var(--hbs-ink) !important; border: 0 !important; }

#hostbee-spin .hbs-result { animation: hbs-pop .4s cubic-bezier(.2, .8, .3, 1.2) !important; }
#hostbee-spin .hbs-timer { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 12px 0 0 !important; color: var(--hbs-muted) !important; font-size: 13px !important; line-height: 1.4 !important; }
#hostbee-spin .hbs-timer span { color: var(--hbs-muted) !important; }
#hostbee-spin .hbs-timer strong { color: var(--hbs-ink) !important; font-family: var(--hbs-mono) !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
#hostbee-spin .hbs-timer.is-urgent strong { color: #b91c1c !important; }
#hostbee-spin .hbs-terms { display: block !important; margin: 8px 0 0 !important; color: #8a9893 !important; font-size: 12px !important; line-height: 1.5 !important; }
#hostbee-spin .hbs-confetti { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 3 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; }

#hostbee-spin-pill {
  position: fixed !important; left: 16px !important; bottom: 16px !important; z-index: 2147482999 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important; padding: 10px 16px !important; border: 1px solid #e3e8e5 !important; border-radius: 999px !important; background: #ffffff !important; color: #0f1f1a !important;
  font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important; cursor: pointer !important; animation: hbs-slide .4s ease-out !important; transition: box-shadow .2s ease !important;
}
#hostbee-spin-pill:hover, #hostbee-spin-pill:focus { background: #ffffff !important; color: #0f1f1a !important; border: 1px solid #e3e8e5 !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important; }
#hostbee-spin-pill .hbs-pill-text { color: #0f1f1a !important; }
#hostbee-spin-pill .hbs-pill-dot { display: block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #28d058 !important; animation: hbs-blink 1s ease-in-out infinite alternate !important; }
#hostbee-spin-pill .hbs-pill-time { color: #15803d !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-variant-numeric: tabular-nums !important; }

@keyframes hbs-blink { from { opacity: .35; } to { opacity: 1; } }
@keyframes hbs-flash { from { opacity: 0; } to { opacity: .35; } }
@keyframes hbs-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hbs-slide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hbs-tilt { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-3px); } }

@media (max-width: 480px) {
  #hostbee-spin .hbs-card { padding: 52px 18px 18px !important; border-radius: 20px !important; }
  #hostbee-spin .hbs-title { font-size: 24px !important; }
  #hostbee-spin .hbs-title.is-back .hbs-accent { font-size: 24px !important; }
  #hostbee-spin .hbs-wheel { width: min(260px, 76vw) !important; }
  #hostbee-spin-pill { left: 12px !important; bottom: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #hostbee-spin .hbs-tile, #hostbee-spin .hbs-flash.is-on, #hostbee-spin .hbs-result, #hostbee-spin-pill, #hostbee-spin-pill .hbs-pill-dot { animation: none !important; }
}
#hostbee-spin [hidden] { display: none !important; }
#hostbee-spin .hbs-plans { display: block !important; animation: hbs-slide .35s ease both !important; }
#hostbee-spin .hbs-tabs { display: flex !important; gap: 4px !important; padding: 4px !important; margin: 0 0 16px !important; border-radius: 12px !important; background: var(--hbs-soft) !important; }
#hostbee-spin .hbs-tab {
  flex: 1 !important; display: block !important; padding: 8px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--hbs-muted) !important; font: inherit !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 600 !important;
  cursor: pointer !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; transition: background .2s ease, color .2s ease !important;
}
#hostbee-spin .hbs-tab:hover { background: transparent !important; color: var(--hbs-ink) !important; }
#hostbee-spin .hbs-tab.is-on, #hostbee-spin .hbs-tab.is-on:hover { background: #ffffff !important; color: var(--hbs-ink) !important; box-shadow: 0 1px 3px rgba(15, 31, 26, .12) !important; }
#hostbee-spin .hbs-tab:focus-visible { outline: 2px solid var(--hbs-accent) !important; outline-offset: 1px !important; }
#hostbee-spin .hbs-plan-list { display: block !important; margin: 0 0 16px !important; max-height: 50vh !important; overflow-y: auto !important; text-align: left !important; border: 1px solid var(--hbs-line) !important; border-radius: 16px !important; }
#hostbee-spin .hbs-plan {
  display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px !important; margin: 0 !important;
  border: 0 !important; border-top: 1px solid var(--hbs-line) !important; border-radius: 0 !important; background: #ffffff !important; color: var(--hbs-ink) !important;
  text-decoration: none !important; box-shadow: none !important; transition: background .2s ease !important;
}
#hostbee-spin .hbs-plan:first-child { border-top: 0 !important; }
#hostbee-spin .hbs-plan:hover, #hostbee-spin .hbs-plan:focus { background: #f4fbf6 !important; color: var(--hbs-ink) !important; text-decoration: none !important; outline: none !important; }
#hostbee-spin .hbs-plan:focus-visible { box-shadow: inset 0 0 0 2px var(--hbs-accent) !important; }
#hostbee-spin .hbs-plan-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
#hostbee-spin .hbs-plan-name { display: block !important; color: var(--hbs-ink) !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important; }
#hostbee-spin .hbs-plan-was { display: block !important; color: var(--hbs-muted) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; text-decoration: line-through !important; }
#hostbee-spin .hbs-plan-now { display: flex !important; flex-direction: column !important; align-items: flex-end !important; flex-shrink: 0 !important; color: var(--hbs-accent) !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; white-space: nowrap !important; }
#hostbee-spin .hbs-plan-now small { display: block !important; color: var(--hbs-muted) !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 400 !important; }
#hostbee-spin .hbs-plan-go { display: inline-flex !important; flex-shrink: 0 !important; color: var(--hbs-muted) !important; transition: transform .2s ease, color .2s ease !important; }
#hostbee-spin .hbs-plan:hover .hbs-plan-go { color: var(--hbs-accent) !important; transform: translateX(2px) !important; }
#hostbee-spin .hbs-plans-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin: 0 !important; }
#hostbee-spin .hbs-plans-foot .hbs-skip { padding: 8px 0 !important; }
#hostbee-spin .hbs-more {
  display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 8px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--hbs-accent) !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 600 !important; text-decoration: none !important; transition: color .2s ease !important;
}
#hostbee-spin .hbs-more svg { transition: transform .2s ease !important; }
#hostbee-spin .hbs-more:hover, #hostbee-spin .hbs-more:focus { color: var(--hbs-brand) !important; background: none !important; text-decoration: none !important; }
#hostbee-spin .hbs-more:hover svg { transform: translate(2px, -2px) !important; }
#hostbee-spin-pill.is-spin { padding: 8px 16px 8px 8px !important; animation: hbs-pop .35s cubic-bezier(.2, .9, .3, 1.3) both !important; }
#hostbee-spin-pill .hbs-pill-wheel { display: block !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px #e3e8e5 !important; animation: hbs-turn 6s linear infinite !important; }
#hostbee-spin-pill.is-spin:hover .hbs-pill-wheel { animation-duration: 1.2s !important; }
@keyframes hbs-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #hostbee-spin-pill .hbs-pill-wheel, #hostbee-spin-pill.is-spin { animation: none !important; }
}