:root {
  --share-rgb-a: 255, 79, 139;
  --share-rgb-b: 47, 143, 238;
  --share-ink: #111728;
  --share-song-stage-background:
    radial-gradient(circle at 88% 27%, rgba(255, 72, 111, 0.15), transparent 15%),
    radial-gradient(circle at 12% 33%, rgba(0, 200, 255, 0.22), transparent 18%),
    radial-gradient(circle at 82% 52%, rgba(52, 229, 155, 0.2), transparent 17%),
    radial-gradient(circle at 18% 72%, rgba(138, 92, 255, 0.18), transparent 18%),
    radial-gradient(circle at 72% 88%, rgba(255, 228, 92, 0.22), transparent 17%),
    linear-gradient(180deg, #f7fbff 0%, #fff8f4 24%, #f4fbff 42%, #f9f7ff 62%, #effcff 80%, #fff8ee 100%);
}

.share-page-loading body > :not(.share-loading-mask) {
  visibility: hidden;
  opacity: 0;
}

.share-loading-mask {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(var(--share-rgb-a), 0.08), rgba(255, 255, 255, 0.96) 50%, rgba(var(--share-rgb-b), 0.08)),
    #f7f9fc;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.share-loading-spinner {
  width: clamp(38px, 6vw, 52px);
  aspect-ratio: 1;
  border: 4px solid rgba(126, 137, 163, 0.18);
  border-top-color: rgb(var(--share-rgb-a));
  border-right-color: rgb(var(--share-rgb-b));
  border-radius: 50%;
  animation: shareLoadingSpin 760ms linear infinite;
}

.share-page-ready .share-loading-mask {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.share-page-ready .share-page-shell {
  animation: sharePageReveal 240ms ease-out both;
}

@keyframes shareLoadingSpin {
  to { transform: rotate(1turn); }
}

@keyframes sharePageReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.share-page-body {
  min-height: 100dvh;
  color: var(--share-ink);
  background:
    radial-gradient(circle at 12% 30%, rgba(var(--share-rgb-a), 0.1), transparent 24%),
    radial-gradient(circle at 88% 66%, rgba(var(--share-rgb-b), 0.1), transparent 26%),
    linear-gradient(
      135deg,
      rgba(var(--share-rgb-a), 0.12),
      rgba(249, 251, 255, 0.9) 48%,
      rgba(var(--share-rgb-b), 0.12)
    ),
    #f7f9fc;
}

/* Album chrome keeps the product background; only its content surface is cover-tinted. */
.album-share-body.share-page-body {
  background: var(--share-song-stage-background);
}

.share-page-body::before,
.share-page-body::after {
  display: none;
}

.share-page-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1440px, 100%);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 34px);
}

.share-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  margin-bottom: clamp(16px, 2vh, 26px);
  background: transparent;
}

.share-nav-leading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.share-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--share-ink);
  font-size: 18px;
  font-weight: 850;
  text-decoration: none;
}

.share-nav-brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: none;
}

.share-nav-language {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--share-ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.6)) padding-box,
    linear-gradient(115deg, rgba(var(--share-rgb-a), 0.52), rgba(var(--share-rgb-b), 0.52)) border-box;
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.share-nav-language > svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.share-nav-language select {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  height: 34px;
  padding: 0 22px 0 2px;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.share-album-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(var(--share-rgb-b), 0.2);
  border-radius: 8px;
  color: var(--share-ink);
  background: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 800;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.share-album-back[hidden] {
  display: none;
}

.share-album-back svg {
  width: 18px;
  height: 18px;
}

/* Social platform colors are shared by song and album share sheets. */
[data-share-channel="whatsapp"] > .share-platform-icon { background: #25d366; }
[data-share-channel="telegram"] > .share-platform-icon { background: #229ed9; }
[data-share-channel="facebook"] > .share-platform-icon { background: #1877f2; }
[data-share-channel="x"] > .share-platform-icon { background: #050505; }
[data-share-channel="reddit"] > .share-platform-icon { background: #ff4500; }

.share-platform-icon img,
.share-platform-icon svg {
  display: block;
}

.share-page-content {
  min-height: 0;
}

.public-share-main.share-page-shell {
  min-height: 0;
}

.public-share-card.share-page-content {
  position: relative;
  align-self: stretch;
  width: min(1100px, 100%);
  height: 100%;
  min-height: 0;
}

.public-album-back {
  justify-self: start;
  margin: 0;
}

.public-share-card.has-album-context {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.share-enter-from-album .share-page-content,
.share-enter-from-song .share-page-content {
  will-change: opacity;
  animation: shareFadeIn 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.share-leave-to-song .share-page-content,
.share-leave-to-album .share-page-content {
  will-change: opacity;
  animation: shareFadeOut 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes shareFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shareFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 720px) {
  .share-page-shell {
    padding: 14px;
  }

  .share-nav {
    min-height: 42px;
    margin-bottom: 10px;
  }

  .share-nav-leading {
    gap: 7px;
  }

  .share-nav-brand {
    gap: 7px;
    font-size: 15px;
  }

  .share-nav-brand img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .share-nav-language,
  .share-album-back {
    height: 36px;
  }

  .share-nav-language {
    gap: 4px;
    padding: 0 6px;
  }

  .share-nav-language select {
    height: 30px;
    padding-right: 2px;
    font-size: 12px;
  }

  .share-album-back {
    min-width: 36px;
    padding: 0 8px;
  }

  .share-album-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

}

/* Song composition switches together at 680px; album/navigation retain 720px. */
@media (max-width: 680px) {
  .public-share-card.share-page-content {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    padding:
      12px
      max(22px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(22px, env(safe-area-inset-left));
  }

  .public-share-card .public-album-back {
    position: absolute;
    z-index: 8;
    top: 27px;
    right: max(22px, env(safe-area-inset-right));
    margin: 0;
  }

  .public-share-card.has-album-context {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .public-share-card.has-album-context .public-share-content h1 {
    padding-right: 44px;
  }

  .public-share-card .public-share-layout {
    column-gap: 19px;
    padding-left: 7px;
    grid-template-rows:
      15px
      auto
      auto
      minmax(44px, auto)
      minmax(24px, 1fr)
      auto
      minmax(0, 2fr);
  }
}

@media (max-width: 420px) {
  .share-page-shell {
    padding: 10px;
  }
}

/* Keep shared chrome proportional on standard laptops with limited CSS height. */
@media (min-width: 721px) and (max-height: 700px) {
  .share-page-shell {
    padding: 10px clamp(18px, 2.2vw, 28px);
  }

  .share-nav {
    min-height: 40px;
    margin-bottom: 8px;
  }

  .share-nav-leading,
  .share-nav-brand {
    gap: 8px;
  }

  .share-nav-brand {
    font-size: 15px;
  }

  .share-nav-brand img {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .share-nav-language,
  .share-album-back {
    height: 34px;
  }

  .share-nav-language > svg {
    width: 15px;
    height: 15px;
  }

  .share-nav-language select {
    height: 30px;
    font-size: 12px;
  }

  .share-album-back {
    min-width: 34px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .share-album-back svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 680px) and (max-height: 740px) {
  .public-share-card .public-album-back {
    top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .share-loading-spinner {
    animation-duration: 1400ms;
  }

  .share-page-ready .share-page-shell {
    animation: none;
  }

  .share-enter-from-album .share-page-content,
  .share-enter-from-song .share-page-content,
  .share-leave-to-song .share-page-content,
  .share-leave-to-album .share-page-content {
    animation: none;
  }
}

html.share-album-embed,
html.share-album-embed body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

html.share-album-embed body {
  background: transparent;
}

.share-title-marquee {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.share-title-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-width: max-content;
  will-change: transform;
}

.share-title-marquee.is-overflowing .share-title-marquee-track {
  animation: share-song-title-marquee var(--share-title-duration, 12s) linear infinite;
}

.share-title-marquee:not(.is-overflowing) .share-title-marquee-track {
  gap: 0;
  transform: translateX(0);
}

.share-title-marquee-item {
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.share-title-marquee:hover .share-title-marquee-track {
  animation-play-state: paused;
}

@keyframes share-song-title-marquee {
  to {
    transform: translateX(calc(-1 * var(--share-title-distance, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .share-title-marquee.is-overflowing .share-title-marquee-track {
    animation: none;
    transform: translateX(0);
  }
}

.share-album-embed .public-share-main.share-page-shell {
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.share-album-embed .public-share-main.share-page-shell::before {
  content: none;
  display: none;
}

.share-album-embed .public-share-main.share-page-shell::after {
  content: none;
  display: none;
}

.share-album-embed .public-share-topbar {
  display: none;
}

.share-album-embed .share-loading-mask {
  position: absolute;
  border-radius: 8px;
  background: transparent;
}