/* Public share page (/v/<token>) – extends style.css */
.share-page { padding-bottom: calc(24px + var(--safe-b)); }
.sp { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.sp-video { position: relative; border-radius: 26px; overflow: hidden; background: #000; aspect-ratio: 9 / 15; max-height: 74vh; max-height: 74dvh; margin: 0 auto; width: min(100%, calc(74dvh * 9 / 15)); animation: rise .6s var(--ease); }
.sp-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sp-video:fullscreen { width: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.p-bigplay { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .45)); transition: opacity .25s; }
.p-bigplay .ic { width: 72px; height: 72px; padding: 20px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s var(--ease); }
.p-bigplay:hover .ic { transform: scale(1.08); }
.sp-video.playing .p-bigplay { opacity: 0; pointer-events: none; }
.p-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 26px 12px calc(10px + var(--safe-b)); background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 1; transition: opacity .3s; }
.sp-video.playing:not(:hover):not(.show-bar) .p-bar { opacity: 0; }
.p-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; transition: background .2s, transform .2s var(--ease); }
.p-btn:hover { background: rgba(255, 255, 255, .14); }
.p-btn:active { transform: scale(.9); }
.p-btn.big { width: 62px; height: 62px; background: var(--grad); color: var(--accent-ink); box-shadow: var(--glow); }
.p-btn.big:hover { background: var(--grad); }
.p-btn.big .ic { width: 26px; height: 26px; }
.p-time, .p-times { font-size: 12.5px; color: #e5e1d6; font-variant-numeric: tabular-nums; white-space: nowrap; }
#p-seek { flex: 1; min-width: 0; }

.sp-audio { display: grid; justify-items: center; gap: 18px; padding: 24px 18px 20px; border-radius: 28px; animation: rise .6s var(--ease); }
.sp-cover { position: relative; width: min(280px, 68vw); aspect-ratio: 1; border-radius: 28px; background: #1a1a22 center / cover no-repeat; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--border); overflow: hidden; }
.sp-cover.no-art { background: linear-gradient(135deg, #3a2f12, #0e0e14); }
.sp-cover .bars { position: absolute; inset: auto 10% 8% 10%; height: 38%; display: flex; align-items: flex-end; justify-content: center; gap: 5px; opacity: .55; }
.sp-cover .bars i { flex: 1; max-width: 12px; height: 18%; border-radius: 99px; background: var(--grad); }
.sp-audio.playing .bars { opacity: .95; }
.sp-audio.playing .bars i { animation: eq .9s ease-in-out infinite; }
.sp-cover .bars i:nth-child(2) { animation-delay: -.7s; } .sp-cover .bars i:nth-child(3) { animation-delay: -.3s; } .sp-cover .bars i:nth-child(4) { animation-delay: -.55s; }
.sp-cover .bars i:nth-child(5) { animation-delay: -.15s; } .sp-cover .bars i:nth-child(6) { animation-delay: -.8s; } .sp-cover .bars i:nth-child(7) { animation-delay: -.4s; }
@keyframes eq { 0%, 100% { height: 18%; } 25% { height: 90%; } 50% { height: 42%; } 75% { height: 72%; } }
.sp-controls { width: 100%; display: flex; align-items: center; gap: 14px; }
.p-seekwrap { flex: 1; min-width: 0; }
.p-times { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); }

.sp-info { display: grid; gap: 10px; }
.sp-info h1 { font: 800 clamp(22px, 6vw, 30px)/1.2 var(--font-head); letter-spacing: -.02em; word-break: break-word; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font: 600 12px var(--font-head); color: var(--muted); }
.sp-actions { display: grid; gap: 10px; }
.sp-actions .btn-lg { width: 100%; }
.gone { min-height: 70vh; align-content: center; }
.gone-card { display: grid; justify-items: center; gap: 14px; padding: 36px 24px; border-radius: 28px; text-align: center; }
.gone-card h1 { font: 800 26px var(--font-head); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .sp { padding-top: 32px; } .toasts { bottom: 24px; } }