.share-actions {
    --share-ink: #10172b;
    --share-surface: rgba(17, 25, 47, .72);
    --share-line: rgba(255, 255, 255, .21);
    --share-white: #f8f8f5;
    --share-red: #c0392b;
    position: fixed;
    right: 0;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 40;
    pointer-events: none;
}

.share-actions__dock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3.25rem;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem) scale(.97);
    transition: opacity 240ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 300ms;
}

.share-actions.is-visible .share-actions__dock {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.share-actions__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .26rem;
    width: 2.5rem;
}

.share-actions__button,
.share-actions__cta,
.share-actions__qr-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.share-actions__button {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .34rem 0 0 .34rem;
    background: linear-gradient(145deg, rgba(80, 90, 104, .96), rgba(45, 53, 66, .98));
    box-shadow: 0 7px 14px rgba(3, 9, 21, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: var(--share-white);
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.share-actions__button > svg,
.share-actions__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.58rem;
    height: 1.58rem;
    box-sizing: border-box;
    border: 0;
    color: inherit;
    transition: transform 180ms ease;
}

.share-actions__button > svg { padding: .15rem; }
.share-actions__button[data-share-target="wechat"] > svg { padding: .03rem; fill: currentColor; }
.share-actions__brand { font-size: .47rem; font-weight: 800; letter-spacing: -.05em; }
.share-actions__brand--line { font-size: .58rem; letter-spacing: -.08em; }
.share-actions__brand--x { font-size: 1.1rem; letter-spacing: 0; }
.share-actions__button:hover { background: linear-gradient(145deg, rgba(104, 115, 131, .98), rgba(61, 72, 88, 1)); box-shadow: 0 10px 19px rgba(3, 9, 21, .4), inset 0 1px 0 rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px); }
.share-actions__button:hover > svg,
.share-actions__button:hover .share-actions__brand { transform: scale(1.08); }

.share-actions__button::before {
    position: absolute;
    right: calc(100% + .8rem);
    top: 50%;
    padding: .45rem .62rem;
    border-radius: .45rem;
    background: #111827;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
    color: #fff;
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(.25rem, -50%);
    transition: opacity 160ms ease, transform 160ms ease;
}

.share-actions__button:hover::before,
.share-actions__button:focus-visible::before { opacity: 1; transform: translate(0, -50%); }

.share-actions__cta {
    width: auto;
    min-height: 2.8rem;
    gap: .42rem;
    padding: 0 1rem 0 .8rem;
    border: 0;
    border-radius: 999px 0 0 999px;
    background: var(--share-red);
    box-shadow: 0 12px 28px rgba(137, 24, 31, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
    color: var(--share-white);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .055em;
    backdrop-filter: blur(14px) saturate(120%);
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.share-actions__cta > svg { width: 1.1rem; height: 1.1rem; flex: none; }
.share-actions__cta:hover { background: #9b2c2c; box-shadow: 0 15px 32px rgba(137, 24, 31, .4), inset 0 1px 0 rgba(255, 255, 255, .18); transform: translateY(-2px); }

.share-actions__toast {
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    width: max-content;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: .6rem .75rem;
    border-radius: .55rem;
    background: #111827;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(.35rem);
    transition: opacity 160ms ease, transform 160ms ease;
}

.share-actions__toast.is-visible { opacity: 1; transform: translateY(0); }
.share-actions button:focus-visible, .share-actions a:focus-visible { outline: 3px solid rgba(241, 74, 61, .68); outline-offset: 3px; }

.share-actions__qr-dialog {
    width: min(21rem, calc(100vw - 2rem));
    margin: auto;
    padding: 1.8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1.4rem;
    background: #151d34;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    color: #fff;
    text-align: center;
}

.share-actions__qr-dialog::backdrop { background: rgba(4, 8, 22, .66); backdrop-filter: blur(5px); }
.share-actions__qr-dialog h2 { margin: .2rem 0 1rem; font-size: 1.2rem; }
.share-actions__qr-dialog p:last-child { margin: 1rem 0 0; color: rgba(255, 255, 255, .72); font-size: .8rem; }
.share-actions__qr-kicker { margin: 0; color: #65d391; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.share-actions__qr-image { display: block; width: min(13.75rem, 100%); height: auto; margin: 0 auto; border-radius: .5rem; background: #fff; }
.share-actions__qr-close { position: absolute; top: .7rem; right: .7rem; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #fff; }
.share-actions__qr-close:hover { background: rgba(255, 255, 255, .18); }
.share-actions__qr-close svg { width: 1rem; height: 1rem; }

@media (max-width: 639px) {
    .share-actions { bottom: max(1rem, env(safe-area-inset-bottom)); }
    .share-actions__dock { gap: 2.4rem; }
    .share-actions__rail { width: 2.35rem; gap: .22rem; }
    .share-actions__button { width: 2.35rem; height: 2.35rem; border-radius: .3rem 0 0 .3rem; }
    .share-actions__button > svg, .share-actions__brand { width: 1.5rem; height: 1.5rem; }
    .share-actions__cta { min-height: 2.75rem; padding-inline: .9rem; font-size: .81rem; }
    .share-actions__cta > svg { width: 1.05rem; height: 1.05rem; }
    .share-actions__button::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .share-actions *, .share-actions { transition-duration: .01ms !important; }
}