[hidden] { display: none !important; }
#header, .mapTabs, #onlineMaps, #loader { flex-shrink: 0; }
.mapTabs { display: flex; gap: 6px; width: min(1680px, 94vw); margin: 24px auto 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.mapTabs button { padding: 10px 22px; border-radius: 24px; }
.mapTabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: white; }
#onlineMaps { width: min(1680px, 94vw); margin: 28px auto 48px; }
.catalogHeading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.catalogHeading h2 { font-size: clamp(30px, 4vw, 44px); margin: 0; letter-spacing: -1.5px; }
.catalogHeading p { color: #b1a8c3; }
.catalogHeading .eyebrow { color: #ff80c3; font-size: 11px; letter-spacing: 3px; font-weight: 700; margin: 0 0 8px; }
.catalogCount { border: 1px solid var(--line); padding: 8px 14px; border-radius: 20px; color: #b1a8c3; white-space: nowrap; font-size: 13px; }
.catalogFilters { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.catalogFilters label { display: flex; flex-direction: column; gap: 7px; color: #b1a8c3; font-size: 12px; flex: 1; min-width: 140px; }
.catalogFilters .catalogSearch { flex: 3; min-width: 240px; }
.catalogFilters input, .catalogFilters select { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit; font-size: 14px; }
#onlineMaps :focus-visible, .mapTabs :focus-visible { outline: 2px solid var(--lyrics); outline-offset: 4px; }
#catalogStatus { color: #b1a8c3; font-size: 14px; margin-bottom: 16px; }
#catalogStatus:empty { display: none; }
.catalogLayout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); align-items: start; gap: 26px; }
.catalogMain { min-width: 0; container-type: inline-size; }
.catalogGrid { display: flex; flex-direction: column; gap: 28px; }
.editionGroup { min-width: 0; }
.editionHeading { margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.editionSongs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.songCard { min-width: 0; overflow-wrap: anywhere; text-align: left; padding: 0; overflow: hidden; border-radius: 16px; background: var(--panel); transition: transform .15s, border-color .15s; }
.songCard:hover { transform: translateY(-3px); }
.songCard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px #ff3fa430; }
.songCover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; background: radial-gradient(at top left, #61347c, #21132e 80%); overflow: hidden; position: relative; }
.songCover::before { content: '♪'; position: absolute; font-size: 64px; color: #ffb8df; }
.songCover img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.songCardText { display: block; padding: 14px; }
.songCard strong { display: block; font-size: 17px; }
.songArtist { display: block; color: #b1a8c3; margin: 5px 0 14px; }
.songTags { display: flex; flex-wrap: wrap; gap: 6px; }
.songTag { font-size: 11px; color: #dfd5ec; background: #ffffff0b; border: 1px solid #ffffff12; padding: 4px 8px; border-radius: 6px; }
.catalogDetail { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.songHero { aspect-ratio: 16 / 9; position: relative; background: #09070e; overflow: hidden; margin-bottom: 22px; }
.songHero .songPreview { display: block; width: 100%; height: 100%; object-fit: contain; }
.songDetailBody { padding: 0 24px 24px; }
.songDetailBody h3 { font-size: 30px; letter-spacing: -.8px; margin: 0 0 5px; }
.songDetailBody .songArtist { font-size: 17px; }
.songFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin: 24px 0; }
.songFacts dt { color: #b1a8c3; font-size: 11px; margin-bottom: 5px; }
.songFacts dd { margin: 0; font-size: 14px; }
.previewNote { color: #b1a8c3; font-size: 12px; line-height: 1.6; }
.previewError { color: #ffb3bd; font-size: 13px; }
.songCredits { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; color: #b1a8c3; }
.songCredits p { white-space: pre-wrap; line-height: 1.6; }
@container (max-width: 950px) { .editionSongs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 740px) { .editionSongs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 540px) { .editionSongs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 310px) { .editionSongs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .catalogLayout { grid-template-columns: 1fr; }
    .catalogDetail { position: static; max-height: none; }
    .catalogHeading { align-items: flex-start; }
    .catalogHeading p { font-size: 13px; }
    #slots { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .songCard { transition: none; } }

.manageMapsLink { margin-left: auto; order: 2; align-self: center; color: #ff92cd; font-size: 13px; text-decoration: none; padding: 8px; }

.songPlayButton { display: block; width: 100%; padding: 14px 20px; border-radius: 12px; font-size: 18px; font-weight: 700; }
.songPlayButton:disabled { opacity: .65; }

/* Dancer of the Week card (site style: panel, line, accent) */
.dancerOfTheWeek { position: relative; margin: 0 0 18px; padding: 14px 16px 16px; min-height: 108px; border: 1px solid var(--line); border-radius: 14px;
    background: linear-gradient(135deg, #ff3fa41f, #ff3fa405 55%, transparent), #ffffff05; overflow: hidden; }
.dancerOfTheWeek::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent), #b100ff); }
.dancerOfTheWeek.empty { background: #ffffff04; border-style: dashed; }
.dancerOfTheWeek.empty::before { display: none; }
.dotwHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.dotwEyebrow { color: #ff80c3; font-size: 11px; letter-spacing: 2.5px; font-weight: 700; text-transform: uppercase; }
.dotwWhen { color: #b1a8c3; font-size: 12px; white-space: nowrap; }
.dotwBody { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dotwAvatar { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(at 30% 25%, #4b2a63, #21132e 75%);
    box-shadow: 0 0 0 2px var(--accent), 0 0 18px #ff3fa455; }
.dotwAvatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; display: block; }
.dotwAvatar img.coach { object-fit: cover; object-position: top; }
.dotwAvatar .dotwCrown { position: absolute; top: -12px; right: -6px; width: 28px; height: 28px; border-radius: 0; object-fit: contain; transform: rotate(18deg); filter: drop-shadow(0 2px 3px #0008); }
.dotwGuest { box-shadow: 0 0 0 1px var(--line); background: #ffffff08; }
.dotwGuest img { padding: 12px; box-sizing: border-box; opacity: .8; }
.dotwText { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dotwName { font-size: 18px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotwHint { color: #b1a8c3; font-size: 13px; line-height: 1.4; }
.dotwScoreLine { display: flex; align-items: center; gap: 10px; }
.dotwStars { display: inline-flex; align-items: center; }
.dotwStars img { width: 20px; height: 20px; margin-right: -3px; }
.dotwStars img.off { filter: grayscale(1) brightness(.4); opacity: .45; }
.dotwStars img.dotwLogo { width: auto; height: 22px; margin: 0; }
.dotwScore { font-size: 15px; font-weight: 700; color: #ffd36b; font-variant-numeric: tabular-nums; }
/* loading skeleton: same height as the card */
.dancerOfTheWeek.loading::after { content: ""; position: absolute; left: 16px; right: 16px; top: 40px; height: 52px; border-radius: 10px;
    background: linear-gradient(90deg, #ffffff08 25%, #ffffff14 50%, #ffffff08 75%) 0 0 / 200% 100%; animation: dotwShimmer 1.2s linear infinite; }
.dancerOfTheWeek.loading::before { display: none; }
@keyframes dotwShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dancerOfTheWeek.loading::after { animation: none; } }