.generation-share-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 72px; height: 64px; flex: 0 0 auto; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.generation-share-entry svg { display: block; width: 32px; height: 28px; fill: currentColor; }
.generation-share-entry:hover:enabled { background: color-mix(in srgb, var(--text) 10%, var(--bg-panel)); }
.generation-share-entry:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.generation-share-entry:disabled { opacity: .35; cursor: default; }
.generation-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.generation-share-row > :first-child { margin-right: auto; }
.generation-share-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: var(--bg-panel); color: var(--text); }
.generation-share-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.generation-share-dialog h2 { font-size: 20px; margin: 0; }
.generation-share-dialog p { line-height: 1.5; }
.generation-share-body { display: grid; gap: 24px; margin-top: 24px; }
.generation-share-preview { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.generation-share-preview img { display: block; max-width: 100%; max-height: min(62dvh, 570px); object-fit: contain; box-shadow: 0 8px 24px rgb(0 0 0 / 28%); }
.generation-share-preview img:not([src]) { visibility: hidden; }
.generation-share-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.generation-share-field { display: grid; gap: 7px; font-size: 13px; flex: 1; min-width: 0; }
.generation-share-field input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; background: var(--bg); color: var(--text); }
.generation-share-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.generation-share-action { display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; padding: 12px; border: 2px solid currentColor; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; }
.generation-share-action svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.generation-share-action:hover:enabled { background: color-mix(in srgb, var(--text) 10%, transparent); }
.generation-share-action:disabled { opacity: 0.35; cursor: default; }
.generation-share-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#generationShareStatus { min-height: 1.5em; margin: 12px 0 0; font-size: 12px; }
.generation-share-dialog :focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 3px; }
@media (max-width: 520px) {
 .generation-share-dialog { padding: 14px; }
 .generation-share-body { gap: 20px; margin-top: 20px; }
 .generation-share-footer { flex-wrap: wrap; gap: 16px; }
 .generation-share-field { flex-basis: 100%; }
 .generation-share-actions { margin-left: auto; }
 .generation-share-preview img { max-height: min(48dvh, 400px); }
}