.share-dialog { box-sizing:border-box; width:min(580px,calc(100vw - 32px)); max-height:calc(100svh - 32px); padding:22px 24px 16px; overflow:auto; border:1px solid #a29bf233; border-radius:22px; background:radial-gradient(ellipse at top left,#7565e815,transparent 60%),#10162a; color:#e8eafb; box-shadow:0 32px 100px #0009; }
.share-dialog::backdrop { background:#030817bd; backdrop-filter:blur(7px); }
.share-dialog button,.share-dialog input { font:inherit; }
.share-dialog button { cursor:pointer; }
.share-dialog svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.share-heading { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.share-heading-mark { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid #a89bfa30; border-radius:13px; background:#8a76ef16; color:#c5b6ff; }
.share-heading h2 { margin:0; color:#f0efff; font-size:22px; font-weight:600; letter-spacing:-.6px; }
.share-heading p { margin:5px 0 0; color:#919dbb; font-size:12px; }
#share-close { align-self:flex-start; margin:-7px -8px 0 auto; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:#9aa5be; font-size:25px; line-height:1; }
#share-close:hover { color:white; background:#ffffff0a; }
.share-preview-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:9px; letter-spacing:1.5px; color:#929ab8; }
#share-visibility { display:flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #ffffff12; border-radius:20px; color:#a8b2cc; font-size:10px; letter-spacing:0; }
#share-visibility::before { content:''; width:5px; height:5px; border-radius:50%; background:#78839f; }
.share-dialog[data-active=true] #share-visibility { color:#a5d8c7; border-color:#68c9a833; background:#68c9a808; }
.share-dialog[data-active=true] #share-visibility::before { background:#7bd4b6; }
.share-preview { overflow:hidden; border:1px solid #ffffff12; border-radius:13px; background:#090f20; }
.share-preview-note { margin:8px 0 14px; font-size:10px; line-height:1.6; color:#7f8ba7; }
.share-link-section label { display:block; margin-bottom:9px; color:#cbd1e4; font-size:12px; font-weight:500; }
.share-link-row { display:flex; gap:7px; }
#share-link { box-sizing:border-box; width:0; min-width:0; flex:1; padding:11px 12px; border:1px solid #ffffff14; border-radius:9px; background:#080e20; color:#c8c5ed; font:11px var(--mono); text-overflow:ellipsis; }
#share-link::placeholder { color:#6f7b98; font:11px var(--sans); }
#share-create { display:flex; align-items:center; justify-content:center; gap:8px; min-width:112px; padding:11px 15px; border:1px solid #a396f277; border-radius:9px; background:#7564dc; color:white; font-size:12px; font-weight:500; box-shadow:0 2px 8px #0002; }
#share-create:hover { background:#8372e7; }
#share-status { margin:8px 0 0; color:#a5d8c7; font-size:11px; line-height:1.5; }
#share-status:empty { display:none; }
#share-status[data-error=true] { color:#f3a4ad; }
.share-access { display:flex; align-items:flex-start; gap:10px; padding:10px 0; margin-top:10px; border-block:1px solid #ffffff0b; }
.share-access svg { width:16px; height:16px; flex-shrink:0; color:#9495bd; }
.share-access strong { display:block; font-size:11px; color:#bfc7de; font-weight:500; }
.share-access p { margin:5px 0; color:#909db8; font-size:11px; line-height:1.6; }
.share-access small { color:#737f9d; font-size:10px; line-height:1.6; }
.share-dialog .share-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:0; padding:10px 0 0!important; }
#share-footer-note { color:#7f8ba7; font-size:10px; line-height:1.6; }
.share-dialog[data-active=true] #share-footer-note { flex-basis:100%; }
#share-open { color:#bdb4ee; font-size:11px; text-decoration:none; }
#share-open:hover { color:#eee9ff; }
#share-revoke { border:0; background:transparent; color:#bd909e; padding:4px 0; font-size:11px; }
#share-revoke:hover { color:#ffafbc; }
.share-dialog button:disabled { opacity:.6; cursor:wait; }
.share-dialog :is(button,a,input):focus-visible { outline:2px solid #c6baff; outline-offset:3px; }
@media(max-width:480px) { .share-dialog { padding:20px; border-radius:18px; } .share-heading { gap:10px; } .share-heading h2 { font-size:19px; } .share-heading-mark { width:36px; height:36px; } .share-link-row { flex-wrap:wrap; } #share-link { flex-basis:100%; width:100%; } #share-create { width:100%; } }

.share-preview-switch { display:flex; gap:4px; margin-bottom:12px; padding:3px; width:fit-content; border:1px solid #ffffff0c; border-radius:8px; background:#080e20; }
.share-preview-switch button { padding:6px 12px; border:0; border-radius:5px; background:transparent; color:#909bb7; font-size:11px; }
.share-preview-switch button[aria-pressed=true] { background:#7564dc30; color:#ded7ff; }
.share-platform-preview { padding:10px; border:1px solid #ffffff12; border-radius:12px; font-family:Arial,sans-serif; }
.share-platform-preview h3 { margin:6px 0 8px; font-size:14px; line-height:1.4; font-weight:600; overflow-wrap:anywhere; letter-spacing:0; }
.share-platform-preview p { margin:0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.share-platform-site { font-size:10px; }
.share-discord-preview { background:#313338; }
.share-discord-card { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:12px; border-left:4px solid #202225; border-radius:4px; background:#2b2d31; }
.share-discord-card>div { flex:1; min-width:0; }
.share-discord-card .share-platform-site { color:#b5bac1; }
.share-discord-card h3 { color:#00a8fc; }
.share-discord-card p { color:#dbdee1; }
.share-discord-card>img { width:100%; height:auto; display:block; border-radius:4px; }
.share-twitter-preview { background:#000; }
.share-twitter-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #2f3336; border-radius:12px; }
.share-twitter-image { background:#14171a; border-bottom:1px solid #2f3336; }
.share-twitter-image img { display:block; width:100%; height:auto; }
.share-twitter-card>div:last-child { padding:12px; min-width:0; }
.share-twitter-card .share-platform-site { color:#71767b; }
.share-twitter-card h3 { margin:4px 0; color:#e7e9ea; }
.share-twitter-card p { color:#8b9095; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:380px) { .share-platform-preview { padding:10px; } .share-discord-card { gap:8px; padding:10px; } }

.share-image-preview { overflow:hidden; border-radius:12px; border:1px solid #ffffff12; }
.share-image-preview img { display:block; width:100%; height:auto; }

/* Keep the complete image visible while reserving room for sharing controls. */
.share-image-preview img { max-height:clamp(160px,calc(100svh - 440px),260px); object-fit:contain; background:#0b1022; }
.share-platform-preview img { max-height:clamp(130px,calc(100svh - 550px),210px); object-fit:contain; background:#0b1022; }
.share-discord-card p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }