.image-share-dialog { box-sizing:border-box; width:520px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); margin:auto; padding:28px; border:1px solid #dbd4cb; border-radius:16px; background:#faf8f4; color:#302a31; box-shadow:0 24px 80px #302a3133; font:15px/1.5 "DM Sans",system-ui,sans-serif; overflow:auto; overscroll-behavior:contain; }
.image-share-dialog::backdrop { background:#302a3177; }
.image-share-dialog * { box-sizing:border-box; }
.image-share-dialog [hidden] { display:none !important; }
.image-share-dialog button,.image-share-dialog input { font:inherit; }
.image-share-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:-28px; z-index:1; padding-top:8px; margin-top:-8px; background:#faf8f4; }
.image-share-heading h2 { margin:0; font-size:23px; font-weight:600; }
.image-share-heading button { border:0; background:none; color:inherit; font-size:28px; width:44px; height:44px; flex-shrink:0; cursor:pointer; }
.image-share-dialog p { margin:12px 0 22px; color:#706770; }
.image-share-dialog button { cursor:pointer; }
.image-share-dialog button:disabled { cursor:wait; opacity:.55; }
.image-share-primary { border:0; border-radius:8px; background:#3c1a47; color:white; padding:13px 20px; width:100%; }
.image-share-fallback label { display:block; margin-bottom:7px; font-size:13px; }
.image-share-fallback input { min-width:0; width:100%; border:1px solid #dbd4cb; border-radius:8px; padding:12px; background:white; color:inherit; font-size:16px; }
.image-share-dialog .buttonGrid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 7px; margin:26px 0; }
.image-share-dialog .button { display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; color:inherit; padding:0; min-width:0; }
.image-share-dialog .button img { width:44px; height:44px; padding:11px; border-radius:50%; background:#706770; }
.image-share-dialog .share-label { font-size:11px; }
.image-share-dialog .link img { background:#3c1a47; }.image-share-dialog .facebook img { background:#4267b2; }.image-share-dialog .twitter img { background:#302a31; }.image-share-dialog .pinterest img { background:#cb2027; }.image-share-dialog .reddit img { background:#ff4500; }.image-share-dialog .whatsapp img { background:#25a853; }.image-share-dialog .snapchat img { background:#fffc00; }.image-share-dialog .wechat img { background:#4ec034; }
.image-share-native,.image-share-stop { display:block; width:100%; min-height:44px; border:1px solid #dbd4cb; border-radius:8px; padding:10px; background:transparent; color:#3c1a47; margin-top:10px; }
.image-share-stop { border:0; text-decoration:underline; font-size:13px!important; }
.image-share-dialog .image-share-status { font-size:13px; margin:14px 0 0; min-height:20px; }
.image-share-dialog .image-share-status:empty { display:none; }
.image-share-dialog :focus-visible { outline:2px solid #6b6b6b; outline-offset:3px; }
@media(max-width:600px) {
  .image-share-dialog { padding:18px; }
  .image-share-heading { top:-18px; }
  .image-share-dialog .buttonGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 8px; margin:22px 0; }
}
/* Keep four actions inside small thumbnails; Download and Share sit together. */
@media(max-width:760px) {
  #imageStudio .studio-card:has([data-action=share]) .studio-actions { display:grid; grid-template-columns:repeat(2,32px); }
  #imageStudio .studio-gallery[data-layout=single] .studio-card:has([data-action=share]) .studio-actions { grid-template-columns:repeat(2,44px); }
  #imageStudio .studio-gallery[data-layout=single] .studio-card:has([data-action=share]) .studio-action { width:44px; height:44px; }
  #imageStudio .studio-gallery[data-layout=three] .studio-card:has([data-action=share]) .studio-actions { grid-template-columns:repeat(2,24px); }
}
/* Editor share offer: one pill in the promo area after the More row. */
#imageStudio .studio-share-offer-slot { position:relative; display:flex; justify-content:center; margin:28px 0 0; }
#imageStudio .studio-share-offer { display:flex; align-items:center; gap:4px; height:40px; padding:0 6px 0 5px; border:1px solid #ebe6ee; border-radius:20px; background:#fff; box-shadow:0 4px 16px rgba(48,42,49,.08); white-space:nowrap; }
#imageStudio .studio-share-offer-open { display:inline-flex; align-items:center; gap:10px; height:38px; color:#38363b; font:15px 'Source Sans Pro',sans-serif; }
#imageStudio .studio-share-offer-open strong { font-weight:400; color:#3c1a47; }
#imageStudio .studio-share-offer-thumb { position:relative; flex:none; width:30px; height:30px; }
#imageStudio .studio-share-offer-thumb img:first-child { display:block; width:30px; height:30px; border-radius:50%; object-fit:cover; }
#imageStudio .studio-share-offer-coin { position:absolute; right:-5px; bottom:-3px; width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 2px #fff; }
#imageStudio .studio-share-offer-dismiss { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#a59fa8; }
#imageStudio .studio-share-offer-dismiss:hover { background:var(--menu-hover); color:#706770; }
#imageStudio .studio-share-offer-dismiss svg { width:11px; height:11px; }
#imageStudio .studio-share-offer.is-entering { animation:studioShareOfferRise .38s cubic-bezier(.2,.8,.2,1) both, studioShareOfferGlow 1.2s ease-in-out .5s both; }
#imageStudio .studio-share-offer.is-entering .studio-share-offer-coin { animation:studioShareOfferCoin .5s cubic-bezier(.3,1.4,.5,1) .3s both; }
@keyframes studioShareOfferRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes studioShareOfferCoin { 0% { transform:scale(0) rotate(-90deg); } 60% { transform:scale(1.25) rotate(10deg); } 100% { transform:none; } }
@keyframes studioShareOfferGlow { 0%,100% { box-shadow:0 4px 16px rgba(48,42,49,.08); } 50% { box-shadow:0 4px 22px rgba(243,152,49,.28); } }
@media (prefers-reduced-motion:reduce) { #imageStudio .studio-share-offer.is-entering, #imageStudio .studio-share-offer.is-entering .studio-share-offer-coin { animation:none; } }
@media (max-width:760px) { #imageStudio .studio-share-offer-open { font-size:14px; gap:8px; } }