.share-preview { width: min(calc(100% - 24px), 470px); max-height: min(92vh, 840px); margin: auto; border: 1px solid #5a4145; border-radius: 20px; padding: 0; color: #f8f6f4; background: #211f24; box-shadow: 0 24px 64px #00000088; overflow: auto; }
.share-preview::backdrop { background: #0a090dcc; }
.share-preview__surface { padding: 18px; }
.share-preview__heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.share-preview__title { margin: 0; color: #f8f6f4; font-size: 23px; line-height: 1.05; letter-spacing: -.035em; }
.share-preview__close { display: grid; flex: none; width: 37px; height: 37px; place-items: center; border: 1px solid #625a5e; border-radius: 50%; padding: 0; color: #f8f6f4; background: transparent; font-size: 27px; line-height: 1; }
.share-preview__copy { margin: 8px 0 15px; color: #c9c1c3; font-size: 14px; line-height: 1.4; }
.share-preview__canvas { width: min(100%, 244px); margin: 0 auto; }
.share-preview__canvas canvas { display: block; width: 100%; height: auto; border: 1px solid #4b4548; border-radius: 13px; background: #17161a; box-shadow: 0 10px 24px #00000042; }
.share-preview__privacy { display: flex; align-items: start; gap: 9px; margin: 17px 0 0; color: #f8f6f4; font-size: 14px; font-weight: 750; line-height: 1.3; }
.share-preview__privacy input { width: 18px; height: 18px; margin: 0; accent-color: #ff6b5e; }
.share-preview__privacy-copy { margin: 5px 0 0 27px; color: #c9c1c3; font-size: 12px; line-height: 1.35; }
.share-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.share-preview__actions [data-share-preview-action="share"] { grid-column: 1 / -1; }
.share-preview__actions .button { min-height: 45px; margin: 0; border-radius: 12px; padding: 8px; font-size: 13px; line-height: 1.16; }
.share-preview__status { min-height: 1.25em; margin: 10px 0 0; color: #ffb0a9; font-size: 13px; line-height: 1.3; }
.share-preview__close:focus-visible, .share-preview__privacy input:focus-visible, .share-preview__actions .button:focus-visible { outline: 3px solid #ffaaa2; outline-offset: 3px; }
@media (max-width: 350px) { .share-preview__surface { padding: 15px; } .share-preview__actions { grid-template-columns: 1fr; } .share-preview__actions [data-share-preview-action="share"] { grid-column: auto; } }
@media (prefers-reduced-motion: no-preference) { .share-preview[open] { animation: share-preview-in 180ms ease-out both; } @keyframes share-preview-in { from { transform: translateY(8px); opacity: .7; } to { transform: translateY(0); opacity: 1; } } }