.releases-directory-tabs { background:#fff; color:#17171b; border-bottom:1px solid #e7e6ec; }
.releases-directory-tabs > .preview-section-inner { display:flex; gap:18px; width:min(calc(100% - 40px),1460px); }
.releases-directory-tabs button { appearance:none; background:none; color:inherit; border:0; border-bottom:3px solid transparent; padding:24px 22px 21px; font:inherit; font-size:20px; cursor:pointer; }
.releases-directory-tabs button[aria-selected="true"] { color:#7144ef; border-bottom-color:#7144ef; font-weight:700; }
.releases-directory-tabs button:focus-visible,.releases-artist-card:focus-visible,.releases-artist-dialog button:focus-visible,.releases-artists [data-artists-retry]:focus-visible { outline:3px solid #9b7aff; outline-offset:5px; }
#releases-panel-albums[hidden],#releases-panel-artists[hidden],.releases-directory-tabs[hidden] { display:none !important; }
#releases-panel-albums,#releases-panel-artists { view-transition-name:release-directory-panel; }
::view-transition-old(root),::view-transition-new(root) { animation:none; }
::view-transition-old(release-directory-panel) { animation-duration:180ms; }
::view-transition-new(release-directory-panel) { animation-duration:180ms; }
.releases-artists { background:#f6f6f6; color:#17171b; min-height:720px; padding:74px 0 112px; }
.releases-artists > .preview-section-inner { width:min(calc(100% - 40px),1460px); }
.releases-artists h2 { color:#17171b; font-size:clamp(2.4rem,4vw,4rem); line-height:1.1; letter-spacing:-.045em; margin:0 0 32px; }
.releases-artists-status { min-height:24px; color:#666371; margin:0 0 24px; font-size:15px; }
.releases-artists-status:empty { display:none; }
.releases-artists-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,320px)); gap:28px; }
.releases-artist-card { position:relative; box-sizing:border-box; appearance:none; background:#fff; color:#141419; border:0; border-radius:0; aspect-ratio:1; width:100%; min-width:0; min-height:0; align-self:start; display:grid; grid-template-rows:minmax(0,1fr) 44px 18px; align-items:center; justify-items:center; gap:10px; padding:26px; cursor:pointer; font:inherit; text-align:center; text-decoration:none; }
.releases-artist-card:hover { background:#f5f3fb; }
.releases-artist-portrait { position:relative; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:center; height:100%; max-width:100%; aspect-ratio:1; border-radius:50%; background:#eceaf0; color:#625d71; font-size:52px; font-weight:700; }
.releases-artist-image-content { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; }
.releases-artist-open { position:absolute; z-index:1; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
.releases-artist-open:focus-visible { outline:3px solid #9b7aff; outline-offset:5px; }
.releases-artist-image-change { box-sizing:border-box; position:absolute; z-index:1; pointer-events:none; right:3%; bottom:3%; width:44px; height:44px; padding:0; border:3px solid white; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#17141f; color:white; box-shadow:0 2px 8px #17141f30; opacity:0; transition:opacity 140ms ease; cursor:pointer; }
.releases-artist-image-change svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; }
.releases-artist-card:hover .releases-artist-image-change,.releases-artist-card:focus-within .releases-artist-image-change { opacity:1; pointer-events:auto; }
.releases-artist-image-change:focus-visible { outline:3px solid #9b7aff; outline-offset:3px; }
.releases-artist-image-overlay { box-sizing:border-box; position:absolute; inset:0; pointer-events:none; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,8,18,.72); color:white; font-size:14px; line-height:1.35; opacity:0; transition:opacity 140ms ease; }
.releases-artist-image-change:hover + .releases-artist-image-overlay,.releases-artist-image-change:focus-visible + .releases-artist-image-overlay { opacity:1; }
@media(hover:none),(pointer:coarse) { .releases-artist-image-change { opacity:1; pointer-events:auto; } }
@media(prefers-reduced-motion:reduce) { .releases-artist-image-change,.releases-artist-image-overlay { transition:none; } }
.releases-artist-portrait canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.releases-artist-portrait canvas[hidden] { display:none; }
.releases-artist-name { max-width:100%; font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.releases-artist-count { color:#7144df; font-size:14px; }
.releases-artist-add { border:1px dashed #8c8897; background:transparent; color:#17171b; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; }
.releases-artist-add:hover { background:#ece8f4; }
.releases-artist-add-plus { width:78px; height:78px; border:1px solid #8c8897; border-radius:50%; display:grid; place-items:center; font-size:48px; font-weight:200; line-height:1; }
.releases-artists [data-artists-retry],.releases-artists [data-artists-signin] { margin-top:22px; }
.releases-artist-dialog { color-scheme:light; box-sizing:border-box; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid #d9d6e1; border-radius:12px; background:#fff; color:#17171b; padding:28px; }
.releases-artist-dialog::backdrop { background:rgba(0,0,0,.7); }
.releases-artist-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.releases-artist-dialog h2 { font-size:28px; line-height:1.2; letter-spacing:-.035em; margin:0; }
.releases-artist-dialog-heading button { color:#17171b; border:0; background:none; font:inherit; font-size:28px; width:44px; height:44px; cursor:pointer; }
.releases-artist-dialog p { color:#666371; font-size:14px; line-height:1.5; }
.releases-artist-dialog label:not(.releases-artist-confirm) { display:block; font-size:14px; font-weight:700; margin:24px 0 8px; }
.releases-artist-dialog input[name="artistName"] { box-sizing:border-box; width:100%; border:1px solid #c6c2cf; border-radius:5px; padding:13px 12px; font:inherit; font-size:16px; color:#17171b; background:#fff; }
.releases-artist-confirm { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; margin-top:20px; }
.releases-artist-confirm input { margin:4px 0 0; width:18px; height:18px; flex-shrink:0; accent-color:#7144ef; }
.releases-artist-dialog-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.releases-artist-dialog-actions button:not(.preview-button) { padding:10px 14px; border:1px solid #cbc7d3; border-radius:5px; font:inherit; cursor:pointer; background:white; color:#17171b; }
.releases-artist-dialog-actions a { margin-right:auto; color:#6740cb; font-size:14px; }
.releases-artist-dialog [data-artist-form-status][data-error="true"] { color:#a12839; }
.releases-artist-dialog button:disabled { opacity:.55; cursor:wait; }
@media(max-width:760px) {
  .releases-artists { padding:44px 0 72px; }
  .releases-artists-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .releases-artist-card { padding:18px; }
  .releases-directory-tabs button { padding:20px 18px 17px; font-size:18px; }
}
@media(max-width:520px) {
  .releases-artists-grid { grid-template-columns:minmax(0,340px); justify-content:center; gap:24px; }
  .releases-artist-card { padding:26px; }
  .releases-artist-dialog { padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(release-directory-panel),::view-transition-new(release-directory-panel) { animation:none; }
}


.releases-artist-dialog-actions button[data-artist-cancel]:hover { background:#f0edf7; border-color:#8b76b6; }
.releases-artist-confirm input { color-scheme:light; cursor:pointer; }
.releases-artist-dialog input:focus-visible { outline:3px solid #9b7aff; outline-offset:3px; }