.connecto-share-shell {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  top: 58%;
  z-index: 45;
  display: grid;
  gap: 0.7rem;
}

.connecto-share-shell.connecto-share-fab--right {
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  left: auto;
}

.connecto-share-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: 2.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-button, 999px);
  border: 1px solid color-mix(in srgb, var(--border-color-card, rgba(255,255,255,0.18)) 72%, transparent);
  background: color-mix(in srgb, var(--color-brand-dark, rgba(17,24,39,1)) 58%, transparent);
  color: var(--color-on-surface-inverse, #fff);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.84;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.connecto-share-fab__icon {
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
}

.connecto-share-fab__icon svg {
  width: 100%;
  height: 100%;
}

.connecto-share-fab:hover,
.connecto-share-fab:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-brand-dark, rgba(17,24,39,1)) 72%, transparent);
}

.connecto-share-fab:focus-visible,
.connecto-share-panel__action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent, #f97316) 60%, transparent);
  outline-offset: 3px;
}

.connecto-share-panel {
  display: grid;
  gap: 0.6rem;
  min-width: 13rem;
  padding: 0.8rem;
  border-radius: var(--radius-card, 1rem);
  border: 1px solid color-mix(in srgb, var(--border-color-card, rgba(255,255,255,0.18)) 72%, transparent);
  background: color-mix(in srgb, var(--color-brand-dark, rgba(17,24,39,1)) 82%, transparent);
  color: var(--color-on-surface-inverse, #fff);
  box-shadow: var(--shadow-card, 0 16px 40px rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.connecto-share-panel__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--border-color-card, rgba(255,255,255,0.18)) 72%, transparent);
  border-radius: var(--radius-button, 999px);
  background: color-mix(in srgb, var(--color-surface, rgba(255,255,255,0.08)) 82%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.connecto-share-panel__qr {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding-top: 0.2rem;
}

.connecto-share-panel__qr img {
  width: 11rem;
  height: 11rem;
  border-radius: calc(var(--radius-card, 1rem) * 0.8);
  background: #fff;
  padding: 0.55rem;
}

.connecto-share-toast {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-button, 999px);
  border: 1px solid color-mix(in srgb, var(--border-color-card, rgba(255,255,255,0.18)) 70%, transparent);
  background: color-mix(in srgb, var(--color-brand-dark, rgba(17,24,39,1)) 82%, transparent);
  color: var(--color-on-surface-inverse, #fff);
  box-shadow: var(--shadow-card, 0 16px 40px rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.connecto-share-shell.connecto-share-fab--right ~ .connecto-share-toast {
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  left: auto;
}

.hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .connecto-share-shell {
    top: auto;
    bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 5.5rem));
    left: max(0.75rem, env(safe-area-inset-left, 0px));
  }

  .connecto-share-shell.connecto-share-fab--right {
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    left: auto;
  }

  .connecto-share-fab {
    min-height: 2.7rem;
    min-width: 2.7rem;
    padding-inline: 0.8rem;
  }

  .connecto-share-panel {
    min-width: min(13rem, calc(100vw - 2rem));
  }
}