/* Shareable cards ---------------------------------------------------------- */
.share-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-secondary); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.share-btn:hover, .share-btn:focus-visible { border-color: var(--accent); color: var(--text-primary); outline: none; }
.share-btn.icon-only { padding: 6px; }
.share-btn .share-ico { flex: none; }
.share-btn.busy { opacity: .6; cursor: progress; }
.share-btn.busy .share-ico { animation: share-pulse .8s ease-in-out infinite alternate; }
@keyframes share-pulse { to { opacity: .3; } }

.share-panel .share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.share-panel .share-row:first-of-type { border-top: 0; }
.share-panel .share-row > div { min-width: 0; display: flex; flex-direction: column; }
.share-panel .share-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.share-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, rgba(0,0,0,.6)); backdrop-filter: blur(6px); }
.share-modal { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; max-width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.share-img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 190px); aspect-ratio: 1080 / 1350; margin: 0 auto; border-radius: 10px; border: 1px solid var(--line); background: #0b0d10; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.share-hint { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }

.share-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--surface-3); color: var(--text-primary); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); z-index: 130; font-size: 13px; }