/* Shared live/clone selectors: background previews remove IDs but retain data attributes. */
/* V313.2: compact artwork + metadata + SVG controls, isolated from global pills. */
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"])[hidden], :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"])[hidden], :is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) [hidden], :is(#profileMusicPreview, [data-profile-music-part="profileMusicPreview"]) { display: none !important; }
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) { margin: 10px auto; padding: 8px 10px; width: 100%; max-width: 340px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb, var(--primary) 7%, var(--card)); text-align: left; }
.profile-music-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
:is(#profileMusicArtwork, [data-profile-music-part="profileMusicArtwork"]), :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .music-verification-art { width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px; border-radius: 9px !important; overflow: hidden; object-fit: cover; }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .music-verification-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-music-copy, :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .music-verification-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
:is(#profileMusicTitle, [data-profile-music-part="profileMusicTitle"]), :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) strong { font-size: 12px !important; line-height: 1.25; font-weight: 650; }
:is(#profileMusicArtist, [data-profile-music-part="profileMusicArtist"]), :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .music-verification-copy > span { font-size: 11px !important; line-height: 1.2; color: var(--secondary-text); }
:is(#profileMusicTitle, [data-profile-music-part="profileMusicTitle"]), :is(#profileMusicArtist, [data-profile-music-part="profileMusicArtist"]), :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) strong, :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .music-verification-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) .profile-music-toggle, :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-toggle { display: grid !important; place-items: center; position: relative; flex: 0 0 30px; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 0 !important; background: color-mix(in srgb, var(--primary) 17%, transparent) !important; color: var(--primary) !important; box-shadow: none !important; transform: none !important; }
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) .profile-music-toggle::before, :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-toggle::before { content: ''; position: absolute; inset: -7px; }
.profile-music-toggle svg { width: 15px !important; height: 15px !important; fill: currentColor; stroke: none; pointer-events: none; }
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) .profile-music-toggle:focus-visible, :is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-toggle:focus-visible, :is(#profileMusicLink, [data-profile-music-part="profileMusicLink"]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.profile-music-progress { display: flex; align-items: center; gap: 5px; height: 10px; margin-top: 2px; }
:is(#profileMusicTime, [data-profile-music-part="profileMusicTime"]), .profile-music-preview-time { font-size: 9px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--secondary-text); }
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]) :is(#profileMusicSeek, [data-profile-music-part="profileMusicSeek"]) { -webkit-appearance: none !important; appearance: none !important; flex: 1; width: 100%; min-width: 0; height: 10px !important; min-height: 10px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
:is(#profileMusicSeek, [data-profile-music-part="profileMusicSeek"])::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 40%, var(--border)); }
:is(#profileMusicSeek, [data-profile-music-part="profileMusicSeek"])::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 7px; height: 7px; margin-top: -2.5px; border-radius: 50%; border: 0; background: var(--primary); }
:is(#profileMusicSeek, [data-profile-music-part="profileMusicSeek"])::-moz-range-track { height: 2px; border-radius: 2px; background: var(--border); }
:is(#profileMusicSeek, [data-profile-music-part="profileMusicSeek"])::-moz-range-thumb { width: 7px; height: 7px; border-radius: 50%; border: 0; background: var(--primary); }
:is(#profileMusicLink, [data-profile-music-part="profileMusicLink"]) { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 32px; padding: 0; margin: 0; color: var(--secondary-text); }
:is(#profileMusicLink, [data-profile-music-part="profileMusicLink"]) svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(#profileMusicNotice, [data-profile-music-part="profileMusicNotice"]):empty, :is(#profileMusicEditStatus, [data-profile-music-part="profileMusicEditStatus"]):empty { display: none; }
:is(#profileMusicNotice, [data-profile-music-part="profileMusicNotice"]), :is(#profileMusicEditStatus, [data-profile-music-part="profileMusicEditStatus"]) { font-size: 11px; margin: 6px 0 0; color: var(--secondary-text); }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) { margin: 14px 0; padding: 12px; min-width: 0; border: 1px solid var(--border); border-radius: 22px; }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) h3 { margin: 0 0 4px; font-size: 15px; }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) > p { margin: 0 0 10px; font-size: 12px; color: var(--secondary-text); }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) .profile-field { margin-top: 10px; }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) .music-platform-choices { flex-wrap: wrap; }
.profile-music-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) .profile-music-actions button { min-height: 34px !important; height: 34px !important; padding: 6px 12px !important; font-size: 12px !important; }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px !important; min-height: 0 !important; border: 1px solid var(--border); border-radius: 18px !important; background: color-mix(in srgb, var(--primary) 7%, var(--card)); }

/* V313.6: the editor result is the same compact player as the saved profile song. */
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) { max-width: 340px; box-sizing: border-box; }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-progress input[type="range"] { -webkit-appearance: none !important; appearance: none !important; flex: 1; width: 100%; min-width: 0; height: 10px !important; min-height: 10px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-progress input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 40%, var(--border)); }
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) .profile-music-progress input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 7px; height: 7px; margin-top: -2.5px; border-radius: 50%; border: 0; background: var(--primary); }
.profile-music-preview-link { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 32px; padding: 0; margin: 0; color: var(--secondary-text); }
.profile-music-preview-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
\n\n/* V313.13: editor result artwork MUST match the saved profile song card. */\n#profileMusicMatch > .music-verification-art,\n[data-profile-music-part="profileMusicMatch"] > .music-verification-art {\n  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;\n  max-width: 36px !important; max-height: 36px !important;\n  flex: 0 0 36px !important;\n  border-radius: 9px !important;\n  clip-path: none !important;\n  overflow: hidden !important;\n}\n#profileMusicMatch > .music-verification-art > img,\n[data-profile-music-part="profileMusicMatch"] > .music-verification-art > img {\n  width: 100% !important; height: 100% !important; object-fit: cover !important;\n  border-radius: 9px !important; clip-path: none !important;\n}\n

/* V313.15: editor music UI uses its own artwork component so global Yap Music
   avatar/circle rules can never turn album artwork into a profile picture. */
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) {
  border-radius: 24px !important;
  padding: 18px !important;
  overflow: hidden;
  background-clip: padding-box;
}

:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) > .profile-music-editor-art {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  clip-path: none !important;
  background: var(--glass-control);
}

:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) > .profile-music-editor-art > .profile-music-editor-art-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Keep the editor preview's geometry in lockstep with the saved profile card. */
:is(#profileMusicPlayer, [data-profile-music-part="profileMusicPlayer"]),
:is(#profileMusicMatch, [data-profile-music-part="profileMusicMatch"]) {
  min-height: 54px !important;
}


/* V313.16: profile-song editor card matches the standard Yap card corner radius exactly. */
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) {
  border-radius: 24px !important;
}


/* v3.19: profile-song editor outer card matches the profile-status editor shell. */
:is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  border-radius: var(--ui-radius-panel, 34px) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 54%),
    var(--bubble) !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent) !important;
}

@media (max-width: 700px) {
  :is(#profileMusicEditor, [data-profile-music-part="profileMusicEditor"]) {
    padding: 14px !important;
    border-radius: 29px !important;
  }
}