/* Share panel: link + Copy + Share + QR code. Used on the home page and in the slideshow. */
.sp { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: #18171f; }
.sp-link { display: flex; gap: .5rem; }
.sp-link input { flex: 1; min-width: 0; font: inherit; font-size: .92rem; padding: .7rem .85rem; border-radius: 11px;
                 border: 1px solid #e3e1ea; background: #faf9fc; color: #18171f; }
.sp-link input:focus { outline: 3px solid rgba(139,92,246,.25); border-color: #8b5cf6; }
.sp-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 600; font-size: .92rem;
          border-radius: 11px; cursor: pointer; padding: .62rem .95rem; border: 1px solid #e3e1ea; background: #fff; color: #18171f; text-decoration: none; }
.sp-btn:hover { border-color: #cfcbe0; }
.sp-btn svg { width: 16px; height: 16px; }
.sp-btn.primary { border: 0; color: #fff; background: linear-gradient(180deg, #9d74ff, #7c4dff);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px rgba(124,77,255,.75); }
.sp-btn:focus-visible { outline: 3px solid rgba(139,92,246,.35); outline-offset: 2px; }
.sp-btn.done { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.sp-qr { display: none; margin-top: .8rem; align-items: center; gap: 1rem; background: #faf9fc; border: 1px solid #ecebf1; border-radius: 14px; padding: .8rem; }
.sp-qr.on { display: flex; }
.sp-qr .code { background: #fff; border-radius: 10px; padding: 6px; line-height: 0; flex: none; }
.sp-qr .code svg { width: 148px; height: 148px; display: block; }
.sp-qr p { margin: 0; font-size: .88rem; color: #6e6b7b; }