/* =========================================================
   1. Theme variables and base page styles
   ========================================================= */
:root {
    --pl-maroon: #850000;
    --pl-maroon-dark: #580000;
    --pl-gold: #efbd48;
    --pl-cream: #fff9ed;
    --pl-ink: #1d1b1b;
    --pl-muted: #6b6662;
    --pl-border: #eadfce;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f6f1e8;
    color: var(--pl-ink);
    font-family: "Open Sans", Arial, sans-serif;
}

button,
input,
select {
    font: inherit;
}

.pl-hero-inner,
.pl-main,
.pl-footer {
    width: 94%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

.pl-small-button,
.pl-secondary-button,
.pl-icon-button,
.pl-view-lyric,
.pl-primary-button {
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    transition: 0.16s ease;
}

.pl-small-button,
.pl-secondary-button {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    color: var(--pl-maroon);
    border-color: #d8c8c0;
}

    .pl-small-button:hover,
    .pl-secondary-button:hover {
        background: var(--pl-maroon);
        color: #fff;
        border-color: var(--pl-maroon);
    }

/* =========================================================
   2. Shared controls and keyboard focus
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(239, 189, 72, 0.9);
    outline-offset: 3px;
}

/* =========================================================
   3. Hero
   ========================================================= */

.pl-hero {
    overflow: hidden;
    background: linear-gradient(125deg, #fff9ed 0%, #ffe79d 48%, #d2f0f6 100%);
    border-bottom: 1px solid rgba(88, 0, 0, 0.09);
}

.pl-hero-inner {
    position: relative;
    z-index: 2;
    width: 94%;
    max-width: 1220px;
    min-height: 240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    gap: 26px;
    padding: 28px 0 30px;
}

.pl-hero-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pl-hero-logo-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.pl-hero-logo {
    display: block;
    width: 105px;
    height: 105px;
    object-fit: contain;
    transform: translateY(12px);
}

.pl-hero-title-copy {
    min-width: 0;
}

.pl-kicker {
    margin-bottom: 5px;
    color: var(--pl-maroon);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.pl-hero h1 {
    max-width: none;
    margin: 0;
    color: #4c0a08;
    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
}

.pl-hero p {
    max-width: 760px;
    margin: 14px 0 0 125px;
    color: #554943;
    font-size: 17px;
    line-height: 1.45;
}

.pl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 20px 0 0 125px;
}

.pl-primary-button,
.pl-secondary-button {
    min-height: 46px;
    padding: 0 21px;
}

.pl-primary-button {
    background: var(--pl-maroon);
    color: #fff;
    box-shadow: 0 10px 22px rgba(88, 0, 0, 0.18);
}

    .pl-primary-button:hover {
        background: var(--pl-maroon-dark);
        transform: translateY(-1px);
    }

.pl-hero-art {
    position: relative;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pl-record {
    width: 185px;
    height: 185px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient( circle at center, #f3c75e 0 16%, #8a170d 16% 20%, #151515 20% 34%, #232323 34% 48%, #111111 48% 66%, #262626 66% 82%, #111111 82% 100% );
    box-shadow: 0 24px 48px rgba(62, 34, 16, 0.24);
    transform: rotate(-8deg);
}

.pl-record-label {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f3c75e;
    color: #600;
    font-weight: 800;
}

.pl-hero-free-link {
    color: var(--pl-maroon);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .pl-hero-free-link:hover,
    .pl-hero-free-link:focus {
        color: var(--pl-maroon-dark);
        text-decoration-thickness: 2px;
    }

.pl-music-note {
    position: absolute;
    right: 6%;
    top: 7%;
    color: var(--pl-maroon);
    font-size: 70px;
}

    /* Encoding-safe decorative music note. */
    .pl-music-note::before {
        content: "\266A";
    }

/* =========================================================
   4. Main layout and system messaging
   ========================================================= */

.pl-main {
    margin-top: 24px;
}

.pl-system-message {
    padding: 16px 18px;
    background: #fff5d6;
    border: 1px solid #e3c66f;
    border-left: 5px solid #c49a18;
    border-radius: 12px;
}

.pl-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: start;
}

.pl-player-column {
    position: sticky;
    top: 18px;
}

/* =========================================================
   5. Spotlight card and member profile
   ========================================================= */

.pl-spotlight-card,
.pl-list-card {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(72, 45, 20, 0.075);
}

.pl-spotlight-card {
    overflow: hidden;
    transition: opacity 0.42s ease, transform 0.42s ease;
}

    .pl-spotlight-card.is-fading {
        opacity: 0.16;
        transform: translateY(5px);
    }

.pl-spotlight-top {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px;
    color: #fff;
    background: linear-gradient(135deg, #321514 0%, #760000 58%, #1c1b1b 100%);
}

.pl-member-photo-wrap {
    scroll-margin-top: 12px;
}

.pl-member-photo-wrap {
    width: 120px;
    position: relative;
    height: 120px;
    overflow: hidden;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

    .pl-member-photo-wrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

        .pl-member-photo-wrap img.pl-member-photo-logo {
            object-fit: contain;
            padding: 18px;
            background: #ffffff;
        }

.pl-now-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pl-spotlight-copy h2,
.pl-lyric-reader-head h2 {
    margin: 5px 0;
    color: #fff;
    font-size: 25px;
    line-height: 1.1;
}

.pl-writer-line {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 1.4;
}

.pl-member-name {
    margin-top: 9px;
    color: #ffd76c;
    font-size: 15px;
    font-weight: 800;
}

.pl-member-location {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
}

.pl-member-bio {
    min-height: 92px;
    padding: 18px 22px;
    color: #403936;
    font-size: 14px;
    line-height: 1.55;
    background: var(--pl-cream);
    border-bottom: 1px solid var(--pl-border);
}

.pl-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 13px 22px 0;
}

/* Member-level Awards & Recognition shown with the spotlight profile. */
.pl-member-awards {
    padding: 12px 22px 14px;
    background: var(--pl-cream);
    border-bottom: 1px solid var(--pl-border);
}

.pl-member-awards-title {
    color: #403936;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pl-member-award-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 7px;
}

.pl-member-award-button {
    min-height: 30px;
    padding: 3px 9px 3px 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #ddcfbe;
    border-radius: 999px;
    background: #fff;
    color: #403936;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: 0.16s ease;
}

    .pl-member-award-button:hover,
    .pl-member-award-button:focus {
        border-color: var(--pl-maroon);
        background: #fff8f6;
        color: var(--pl-maroon);
    }

    .pl-member-award-button img {
        display: block;
        width: auto;
        max-width: 24px;
        height: 24px;
        object-fit: contain;
    }

/* Member recognition modal uses the shared modal shell. */
.pl-award-modal {
    max-width: 480px;
}

.pl-award-modal-image-wrap {
    min-height: 48px;
    margin: 10px 48px 10px 0;
    display: flex;
    align-items: center;
}

.pl-award-modal-image {
    display: block;
    width: auto;
    max-width: 48px;
    height: 48px;
    object-fit: contain;
}

.pl-award-modal-body {
    margin: 0;
    color: #403936;
    font-size: 14px;
    line-height: 1.55;
}

/* =========================================================
   6. Audio player
   ========================================================= */

.pl-player {
    position: relative;
    margin: 16px 22px 22px;
    padding: 20px 18px 18px;
    border: 1px solid #d7d8d0;
    border-radius: 16px;
    background: linear-gradient(135deg, #f6efc8 0%, #eef6f5 100%);
    box-shadow: 0 8px 22px rgba(72, 45, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

    .pl-player::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 28px;
        right: 28px;
        height: 3px;
        border-radius: 0 0 999px 999px;
        background: var(--pl-maroon);
        opacity: 0.82;
    }

.pl-player-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pl-big-play,
.pl-round-control {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.pl-big-play {
    width: 66px;
    height: 66px;
    border: 0;
    background: var(--pl-maroon);
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 9px 22px rgba(88, 0, 0, 0.2);
}

.pl-round-control {
    width: 40px;
    height: 40px;
    border: 1px solid #d7ccc5;
    background: #fff;
    color: var(--pl-maroon);
}

.pl-round-control-text {
    display: none;
}

.pl-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
    margin-top: 10px;
    opacity: 0.45;
}

    .pl-visualizer span {
        display: block;
        width: 4px;
        height: 7px;
        border-radius: 999px;
        background: var(--pl-maroon);
        transform-origin: center bottom;
    }

    .pl-visualizer.is-playing span {
        animation: plVisualizerPulse 900ms ease-in-out infinite;
    }

        .pl-visualizer.is-playing span:nth-child(2n) {
            animation-duration: 720ms;
        }

        .pl-visualizer.is-playing span:nth-child(3n) {
            animation-duration: 1040ms;
        }

        .pl-visualizer.is-playing span:nth-child(4n) {
            animation-duration: 820ms;
        }

@keyframes plVisualizerPulse {
    0%, 100% {
        height: 6px;
        opacity: 0.45;
    }

    50% {
        height: 24px;
        opacity: 1;
    }
}

.pl-progress-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.pl-time {
    color: #77706b;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.pl-progress {
    position: relative;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece6e0;
    cursor: pointer;
}

.pl-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--pl-maroon);
}

.pl-player-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.pl-player-status {
    color: var(--pl-muted);
    font-size: 12px;
    font-weight: 800;
}

.pl-volume {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pl-muted);
    font-size: 12px;
    font-weight: 800;
}

    .pl-volume input {
        width: 90px;
        accent-color: var(--pl-maroon);
    }

/* =========================================================
   7. Playlist tools and song cards
   ========================================================= */

.pl-list-card {
    padding: 20px;
}

.pl-list-head,
.pl-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .pl-list-head h2 {
        margin: 0;
        font-size: 27px;
    }

.pl-subhead-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pl-jump-link {
    color: var(--pl-maroon);
    position: relative;
    top: 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    margin-left: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .pl-jump-link:hover,
    .pl-jump-link:focus {
        color: var(--pl-maroon-dark);
        text-decoration-thickness: 2px;
    }

.pl-song-count {
    display: block;
    margin-top: 3px;
    color: var(--pl-muted);
    font-size: 13px;
    font-weight: 700;
}

.pl-tools {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto minmax(230px, 0.7fr);
    align-items: center;
    gap: 12px;
    margin: 18px 0 20px;
    padding: 14px;
    border-radius: 13px;
    background: #f8f3ec;
}

    .pl-tools label {
        font-size: 12px;
        font-weight: 800;
        color: #544b46;
    }

.pl-mobile-top20-jump {
    display: none;
}

.pl-search,
.pl-sort {
    width: 100%;
    min-height: 39px;
    padding: 0 11px;
    border: 1px solid #d9cec5;
    border-radius: 9px;
    background: #fff;
}

.pl-sort {
    min-width: 230px;
}

.pl-track-section + .pl-track-section {
    margin-top: 26px;
}

.pl-subhead {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pl-border);
}

    .pl-subhead h3 {
        margin: 0;
        font-size: 18px;
    }

    .pl-subhead span {
        color: var(--pl-muted);
        font-size: 12px;
        font-weight: 700;
    }

.pl-track-list {
    display: grid;
    gap: 9px;
}

.pl-track-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #e7ddd4;
    border-left: 5px solid var(--pl-maroon);
    border-radius: 12px;
    background: #fff;
}

    .pl-track-card.is-active {
        background: #fff8f6;
        border-color: #d6b8b2;
        box-shadow: 0 7px 20px rgba(88, 0, 0, 0.08);
    }

    .pl-track-card.is-shared-target {
        animation: plTargetPulse 1.3s ease 2;
    }

@keyframes plTargetPulse {
    50% {
        box-shadow: 0 0 0 5px rgba(239, 189, 72, 0.36);
    }
}

.pl-track-play {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--pl-maroon);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

.pl-view-lyric {
    min-height: 34px;
    padding: 0 14px;
    background: #fff0c4;
    color: #684600;
    border-color: #e3c46f;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.pl-vote-button {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #c99d34;
    border-radius: 999px;
    background: #fff3c9;
    color: #6b4300;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.16s ease;
}

    .pl-vote-button:hover,
    .pl-vote-button:focus {
        border-color: var(--pl-maroon);
        background: var(--pl-maroon);
        color: #fff;
    }

    .pl-vote-button i {
        font-size: 12px;
    }

    .pl-vote-button.is-hearted {
        border-color: #b40000;
        background: #c40000;
        color: #fff;
        box-shadow: 0 5px 14px rgba(180, 0, 0, 0.22);
    }

        .pl-vote-button.is-hearted:hover,
        .pl-vote-button.is-hearted:focus {
            border-color: #850000;
            background: #850000;
            color: #fff;
        }


.pl-favorite-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -6px 0 18px;
    padding: 13px 15px;
    border: 1px solid #e3c46f;
    border-radius: 13px;
    background: #fff8df;
    color: #5f4205;
}

.pl-favorite-status-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #c40000;
    color: #fff;
}

.pl-favorite-status-copy {
    min-width: 0;
}

    .pl-favorite-status-copy strong,
    .pl-favorite-status-copy span {
        display: block;
    }

    .pl-favorite-status-copy strong {
        font-size: 13px;
    }

    .pl-favorite-status-copy span {
        margin-top: 2px;
        color: #6b5b3d;
        font-size: 12px;
        line-height: 1.35;
    }

.pl-vote-button:disabled {
    cursor: not-allowed;
}

    .pl-vote-button:disabled:not(.is-limit-disabled) {
        opacity: 0.72;
    }

.pl-vote-button.is-limit-disabled {
    border-color: #ddd3c8;
    background: #f2eee9;
    color: #9c948d;
    box-shadow: none;
    opacity: 0.72;
}

.pl-track-info {
    min-width: 0;
}

.pl-audio-card .pl-track-info {
    cursor: pointer;
}

.pl-track-info h4 {
    margin: 0;
    color: #272323;
    font-size: 15px;
    line-height: 1.25;
}

.pl-track-writers {
    margin-top: 3px;
    color: #5d5550;
    font-size: 12px;
    line-height: 1.35;
}

.pl-track-member {
    margin-top: 2px;
    color: #8a6d2f;
    font-size: 11px;
    font-weight: 800;
}

.pl-track-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Final Top 20 recognition badges */
.pl-award-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.pl-award-badge {
    position: relative;
    min-height: 23px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

    .pl-award-badge + .pl-award-badge::before {
        content: "\2022";
        position: absolute;
        left: -8px;
        color: #9c8d80;
        font-size: 11px;
        font-weight: 700;
    }

.pl-award-badge-top20 {
    border: 1px solid #d6ae45;
    background: #fff1bf;
    color: #724b00;
}

.pl-award-badge-favorite {
    border: 1px solid #d9a19d;
    background: #fff0ee;
    color: #97150f;
}

.pl-award-badge i {
    font-size: 10px;
}

.pl-play-count {
    color: var(--pl-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pl-icon-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    background: #fff;
    color: var(--pl-maroon);
    border-color: #d9cec5;
}

    .pl-icon-button:hover {
        background: var(--pl-maroon);
        color: #fff;
    }

.pl-lyric-card {
    border-left-color: #d6a12b;
    background: #fffdf7;
}

.pl-lyric-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #d9f1f5;
    color: #245d66;
    border: 1px solid #b9dfe6;
    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   8. Lyric-only reader
   ========================================================= */

.pl-lyric-view {
    min-height: 560px;
    padding: 22px;
    background: #2a1715;
    color: #fff;
}

.pl-lyric-reader-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.pl-lyric-body {
    max-height: 620px;
    margin-top: 18px;
    padding: 20px;
    overflow-y: auto;
    border-radius: 12px;
    background: #fffaf1;
    color: #2f2a27;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.pl-lyric-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.pl-empty {
    padding: 14px;
    border: 1px dashed #d4c6b9;
    border-radius: 11px;
    color: #655d58;
    background: #faf6ef;
}

.is-hidden {
    display: none !important;
}

/* =========================================================
   9. Footer
   ========================================================= */

.pl-footer {
    margin-top: 28px;
    padding: 22px 0 48px;
    color: #6e655f;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

    .pl-footer img {
        display: block;
        max-height: 52px;
        width: auto;
        margin: 0 auto 14px;
    }

.pl-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-bottom: 14px;
}

    .pl-footer-links a {
        color: var(--pl-maroon);
        font-weight: 700;
        text-decoration: none;
    }

/* =========================================================
   10. Core responsive layout
   ========================================================= */

@media screen and (max-width: 1050px) {
    .pl-hero h1 {
        font-size: clamp(36px, 4.7vw, 52px);
    }

    .pl-hero-logo {
        width: 88px;
        height: 88px;
    }

    .pl-hero p,
    .pl-hero-actions {
        margin-left: 108px;
    }
}

@media screen and (max-width: 920px) {
    .pl-content-grid {
        grid-template-columns: 1fr;
    }

    .pl-player-column {
        position: static;
    }

    .pl-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .pl-hero h1 {
        white-space: normal;
    }

    .pl-hero-art {
        min-height: auto;
        margin-top: 8px;
    }

    .pl-record,
    .pl-music-note {
        display: none;
    }
}

@media screen and (max-width: 680px) {
    .pl-hero-inner,
    .pl-main,
    .pl-footer {
        width: 92%;
    }

    .pl-member-photo-wrap {
        width: 82px;
        height: 82px;
        border-radius: 12px;
    }

        .pl-member-photo-wrap img.pl-member-photo-logo {
            padding: 11px;
        }

    .pl-hero-inner {
        padding: 24px 0 28px;
    }

    .pl-hero-title-row {
        align-items: flex-start;
        gap: 13px;
    }

    .pl-hero-logo {
        width: 68px;
        height: 68px;
    }

    .pl-kicker {
        font-size: 11px;
    }

    .pl-hero h1 {
        font-size: 36px;
    }

    .pl-hero p,
    .pl-hero-actions {
        margin-left: 0;
    }

    .pl-hero-actions {
        width: 100%;
    }

    .pl-primary-button,
    .pl-secondary-button {
        width: 100%;
    }

    .pl-spotlight-top {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 13px;
        padding: 17px;
    }

    .pl-spotlight-copy h2 {
        font-size: 20px;
    }

    .pl-tools {
        grid-template-columns: 1fr;
    }

    .pl-track-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pl-track-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .pl-list-head {
        align-items: flex-start;
    }

        .pl-list-head .pl-small-button {
            font-size: 0;
            width: 38px;
            padding: 0;
        }

            .pl-list-head .pl-small-button i {
                font-size: 13px;
            }

    .pl-player-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .pl-volume {
        width: 100%;
    }

        .pl-volume input {
            flex: 1;
        }

    .pl-view-lyric {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }

    .pl-vote-button {
        min-height: 34px;
        padding: 0 11px;
    }

    .pl-top20-vote-button {
        font-size: 11px;
    }

    .pl-lyric-reader-head {
        flex-direction: column;
    }

    .pl-lyric-nav {
        flex-wrap: wrap;
    }

    .pl-player-main-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .pl-round-control {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 999px;
        background: #fff;
        color: var(--pl-maroon);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .pl-round-control-text {
        display: inline;
        white-space: nowrap;
    }

    .pl-big-play {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .pl-mobile-top20-jump {
        display: block;
        margin: -6px 0 18px;
    }

        .pl-mobile-top20-jump a {
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 14px;
            border: 1px solid #d8c8c0;
            border-radius: 999px;
            background: var(--pl-maroon);
            color: #fff;
            font-size: 13px;
            font-weight: 800;
            text-decoration: none;
        }

            .pl-mobile-top20-jump a:hover,
            .pl-mobile-top20-jump a:focus {
                background: var(--pl-maroon-dark);
                color: #fff;
            }
}

/* =========================================================
   11. Playing and paused states
   ========================================================= */

.pl-spotlight-card.is-paused .pl-profile-playing-badge {
    display: inline-flex;
    background: #d9f1f5;
    color: #245d66;
    border: 1px solid #b9dfe6;
}

.pl-spotlight-card.is-paused .pl-profile-playing-dot {
    background: #245d66;
    animation: none;
}

.pl-track-card.is-paused-now,
.pl-top20-row.is-paused-now {
    background: #f4fbfc;
    border-color: #b9dfe6;
    box-shadow: 0 8px 24px rgba(36, 93, 102, 0.1);
}

/* Gold ring identifies the song currently loaded in the player. */
.pl-track-card.is-active .pl-track-play,
.pl-top20-row.is-active .pl-top20-play {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(239, 189, 72, 0.95), 0 5px 14px rgba(88, 0, 0, 0.18);
}

.pl-paused-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    background: #d9f1f5;
    color: #245d66;
    border: 1px solid #b9dfe6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .pl-paused-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #245d66;
    }

.pl-member-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

    .pl-member-name-row .pl-member-name {
        margin-top: 0;
    }

.pl-profile-playing-badge {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(88, 0, 0, 0.94);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pl-spotlight-card.is-playing .pl-profile-playing-badge {
    display: inline-flex;
}

.pl-spotlight-card.is-playing .pl-member-photo-wrap {
    animation: plProfilePulse 1.25s ease-in-out infinite;
}

.pl-profile-playing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pl-gold);
    animation: plProfilePlayingDot .9s ease-in-out infinite;
}

@keyframes plProfilePlayingDot {
    0%, 100% {
        opacity: .42;
        transform: scale(.82);
    }

    50% {
        opacity: 1;
        transform: scale(1.22);
    }
}

@keyframes plProfilePulse {
    0%, 100% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .24), 0 0 0 3px rgba(239, 189, 72, .28);
    }

    50% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .24), 0 0 0 7px rgba(239, 189, 72, .9);
    }
}

.pl-track-card.is-playing-now,
.pl-top20-row.is-playing-now {
    background: #fff8f6;
    border-color: #cfae9f;
    box-shadow: 0 8px 24px rgba(128, 0, 0, .12);
}

.pl-now-playing-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--pl-maroon);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .pl-now-playing-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--pl-gold);
        animation: plSongPulse .9s ease-in-out infinite;
    }

@keyframes plSongPulse {
    0%, 100% {
        opacity: .4;
        transform: scale(.82);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* =========================================================
   12. SongU Top 20 listener chart
   ========================================================= */

.pl-top20-section {
    margin-top: 28px;
}

.pl-top20-card {
    overflow: hidden;
    border: 1px solid var(--pl-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(72, 45, 20, 0.09);
}

.pl-top20-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    color: #fff;
    background: radial-gradient( circle at 88% 18%, rgba(239, 189, 72, 0.28), transparent 28% ), linear-gradient( 130deg, #281210 0%, #710000 57%, #271a18 100% );
}

    .pl-top20-header::after {
        content: "\266B";
        position: absolute;
        right: 30px;
        bottom: -25px;
        color: rgba(255, 255, 255, 0.07);
        font-size: 118px;
        line-height: 1;
        pointer-events: none;
    }

.pl-top20-heading {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.pl-top20-kicker {
    color: var(--pl-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pl-top20-heading h2 {
    margin: 4px 0 5px;
    color: #fff;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.pl-top20-heading p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.pl-top20-header .pl-primary-button {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    background: var(--pl-gold);
    color: #4b1800;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

    .pl-top20-header .pl-primary-button:hover {
        background: #ffd368;
        color: #351000;
    }

/* Fan Favorites overrides */
.pl-fan-favorites-card .pl-top20-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #fff7df 0%, #f5c85b 52%, #e7a94a 100% );
    color: #4b170f;
}

.pl-fan-favorites-card .pl-top20-kicker {
    color: #8f1710;
}

.pl-fan-favorites-card .pl-top20-heading h2,
.pl-fan-favorites-card .pl-top20-heading p {
    color: #4b170f;
}

.pl-fan-favorites-deadline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #70140f;
    font-size: 14px;
    line-height: 1.3;
}

    .pl-fan-favorites-deadline i {
        font-size: 15px;
    }

    .pl-fan-favorites-deadline strong {
        font-weight: 800;
    }

.pl-fan-favorites-card .pl-top20-header::after {
    content: "\f004";
    font-family: FontAwesome;
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 125px;
    color: rgba(143, 23, 16, 0.12);
    pointer-events: none;
}

/* Theme-specific Fan Favorites artwork hook.
   Hidden by default so Summer and future themes keep their own base treatment. */
.pl-fan-favorites-theme-art {
    display: none;
}

.pl-fan-favorites-card .pl-top20-rank {
    color: #a91c15;
}

.pl-fan-favorites-card .pl-top20-count {
    color: #8f1710;
}

.pl-fan-favorites-card .pl-top20-row[data-fan-rank="1"],
.pl-fan-favorites-card .pl-top20-row[data-fan-rank="2"],
.pl-fan-favorites-card .pl-top20-row[data-fan-rank="3"] {
    background: linear-gradient( 90deg, rgba(239, 189, 72, 0.15), rgba(255, 255, 255, 0.96) 42% );
}

    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="1"]
    .pl-top20-rank {
        color: #b67a00;
        font-size: 36px;
    }

    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="2"]
    .pl-top20-rank {
        color: #7b7771;
        font-size: 33px;
    }

    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="3"]
    .pl-top20-rank {
        color: #9a5d2f;
        font-size: 31px;
    }

    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="1"].is-active,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="2"].is-active,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="3"].is-active,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="1"].is-playing-now,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="2"].is-playing-now,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="3"].is-playing-now {
        background: #fff8f6;
    }

    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="1"].is-paused-now,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="2"].is-paused-now,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="3"].is-paused-now {
        background: #f4fbfc;
    }

.pl-top20-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #f8f3ec;
}

.pl-top20-column {
    display: grid;
}

    .pl-top20-column:first-child {
        border-right: 1px solid #e8ddd2;
    }

.pl-top20-zero-message {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 11px;
    padding: 18px 22px;
    border-top: 1px solid #e8ddd2;
    background: #f8f3ec;
    color: #655d58;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

    .pl-top20-zero-message i {
        margin-top: 3px;
        color: var(--pl-maroon);
        font-size: 16px;
    }

    .pl-top20-zero-message strong,
    .pl-top20-zero-message span {
        display: block;
    }

    .pl-top20-zero-message strong {
        color: #403936;
        font-size: 14px;
    }

    .pl-top20-zero-message span {
        margin-top: 2px;
    }

/* Fan Favorites voting-period message */
.pl-fan-favorites-voting-message {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e8ddd2;
    background: #fffaf1;
    color: #655d58;
    font-size: 13px;
    line-height: 1.5;
}

    .pl-fan-favorites-voting-message > i {
        flex: 0 0 auto;
        margin-top: 3px;
        color: #a91c15;
        font-size: 18px;
    }

    .pl-fan-favorites-voting-message > div {
        min-width: 0;
    }

    .pl-fan-favorites-voting-message strong,
    .pl-fan-favorites-voting-message span {
        display: block;
    }

    .pl-fan-favorites-voting-message strong {
        color: #403936;
        font-size: 15px;
    }

    .pl-fan-favorites-voting-message span {
        margin-top: 3px;
    }

.pl-top20-row {
    display: grid;
    grid-template-columns: 52px 42px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #e8ddd2;
    background: #fff;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

    .pl-top20-row:hover {
        position: relative;
        z-index: 1;
        background: #fffaf2;
    }

    .pl-top20-row.is-active {
        background: #fff8f6;
        box-shadow: inset 5px 0 0 var(--pl-maroon);
    }

    .pl-top20-row[data-top-rank="1"],
    .pl-top20-row[data-top-rank="2"],
    .pl-top20-row[data-top-rank="3"] {
        background: linear-gradient( 90deg, rgba(239, 189, 72, 0.15), rgba(255, 255, 255, 0.96) 42% );
    }

        .pl-top20-row[data-top-rank="1"].is-active,
        .pl-top20-row[data-top-rank="2"].is-active,
        .pl-top20-row[data-top-rank="3"].is-active {
            background: #fff8f6;
        }

.pl-top20-rank,
.pl-top20-play,
.pl-top20-actions {
    margin-top: 4px;
}

.pl-top20-rank {
    color: #b8a998;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.05em;
}

.pl-top20-row[data-top-rank="1"] .pl-top20-rank {
    color: #b67a00;
    font-size: 36px;
}

.pl-top20-row[data-top-rank="2"] .pl-top20-rank {
    color: #7b7771;
    font-size: 33px;
}

.pl-top20-row[data-top-rank="3"] .pl-top20-rank {
    color: #9a5d2f;
    font-size: 31px;
}

.pl-top20-play {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.pl-top20-info {
    min-width: 0;
    cursor: pointer;
}

    .pl-top20-info h3 {
        margin: 0;
        overflow: hidden;
        color: #272323;
        font-size: 15px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pl-top20-member {
    margin-top: 3px;
    color: #8a6d2f;
    font-size: 11px;
    font-weight: 800;
}

.pl-top20-writers {
    margin-top: 2px;
    overflow: hidden;
    color: #655d58;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-top20-more-wrap {
    margin-top: 5px;
}

.pl-top20-more-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pl-maroon);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .pl-top20-more-link:hover,
    .pl-top20-more-link:focus {
        color: var(--pl-maroon-dark);
        text-decoration-thickness: 2px;
    }

    .pl-top20-more-link span {
        flex: 0 0 auto;
        font-size: 12px;
    }

.pl-top20-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pl-top20-count {
    min-width: 58px;
    color: var(--pl-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.pl-top20-row .pl-now-playing-badge,
.pl-top20-row .pl-paused-badge {
    min-height: 21px;
    padding: 0 7px;
    font-size: 9px;
}

.pl-top20-row.is-playing-now,
.pl-top20-row[data-top-rank="1"].is-playing-now,
.pl-top20-row[data-top-rank="2"].is-playing-now,
.pl-top20-row[data-top-rank="3"].is-playing-now {
    background: #fff8f6;
    border-color: #cfae9f;
    box-shadow: inset 5px 0 0 var(--pl-maroon), 0 8px 24px rgba(128, 0, 0, 0.12);
}

.pl-top20-row.is-paused-now,
.pl-top20-row[data-top-rank="1"].is-paused-now,
.pl-top20-row[data-top-rank="2"].is-paused-now,
.pl-top20-row[data-top-rank="3"].is-paused-now {
    background: #f4fbfc;
    border-color: #b9dfe6;
    box-shadow: inset 5px 0 0 #245d66, 0 8px 24px rgba(36, 93, 102, 0.1);
}

@media screen and (max-width: 920px) {
    .pl-top20-list {
        grid-template-columns: 1fr;
    }

    .pl-top20-column:first-child {
        border-right: 0;
    }
}

/* =========================================================
   13. Current-song lyrics modal
   ========================================================= */
body.pl-modal-open {
    overflow: hidden;
}

.pl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(29, 20, 18, 0.68);
}

    .pl-modal-overlay.is-open {
        display: flex;
    }

.pl-modal {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 44px);
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--pl-border);
    border-radius: 18px;
    background: #fffaf1;
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.32);
}

.pl-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1e8df;
    color: var(--pl-maroon);
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

    .pl-modal-close:hover,
    .pl-modal-close:focus {
        background: var(--pl-maroon);
        color: #fff;
    }

.pl-modal-kicker {
    margin-right: 48px;
    color: var(--pl-maroon);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pl-modal-title {
    margin: 5px 48px 4px 0;
    color: #2f2724;
    font-size: 25px;
    line-height: 1.15;
}

.pl-modal-writer {
    margin-bottom: 16px;
    color: #766b64;
    font-size: 13px;
    font-weight: 700;
}

.pl-modal-lyrics {
    max-height: calc(100vh - 190px);
    padding: 18px;
    overflow-y: auto;
    border: 1px solid #eadfce;
    border-radius: 12px;
    background: #fff;
    color: #2f2a27;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* =========================================================
   14. Desktop-only playlist scrolling
   ========================================================= */
@media screen and (min-width: 921px) {
    .pl-list-card {
        height: clamp(700px, calc(100vh + 60px), 920px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

        .pl-list-card::-webkit-scrollbar {
            width: 10px;
        }

        .pl-list-card::-webkit-scrollbar-track {
            background: #f3ede5;
            border-radius: 999px;
        }

        .pl-list-card::-webkit-scrollbar-thumb {
            background: #c8b4a6;
            border: 2px solid #f3ede5;
            border-radius: 999px;
        }

            .pl-list-card::-webkit-scrollbar-thumb:hover {
                background: var(--pl-maroon);
            }
}

/* =========================================================
   15. Mobile modal and Top 20 adjustments
   ========================================================= */

@media screen and (max-width: 680px) {
    .pl-modal-overlay {
        padding: 12px;
    }

    .pl-modal {
        max-height: calc(100vh - 24px);
        padding: 20px 16px 16px;
    }

    .pl-modal-title {
        font-size: 21px;
    }

    .pl-modal-lyrics {
        max-height: calc(100vh - 165px);
        padding: 14px;
        font-size: 14px;
    }

    .pl-top20-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 18px;
    }

    .pl-top20-heading h2 {
        font-size: 29px;
    }

    .pl-top20-header .pl-primary-button {
        width: 100%;
    }

    .pl-top20-row {
        grid-template-columns: 38px 38px minmax(0, 1fr);
        gap: 9px;
        padding: 12px 10px;
    }

    .pl-top20-rank {
        font-size: 23px;
    }

    .pl-top20-row[data-top-rank="1"] .pl-top20-rank,
    .pl-top20-row[data-top-rank="2"] .pl-top20-rank,
    .pl-top20-row[data-top-rank="3"] .pl-top20-rank,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="1"]
    .pl-top20-rank,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="2"]
    .pl-top20-rank,
    .pl-fan-favorites-card
    .pl-top20-row[data-fan-rank="3"]
    .pl-top20-rank {
        font-size: 27px;
    }

    .pl-top20-play {
        width: 36px;
        height: 36px;
    }

    .pl-top20-actions {
        grid-column: 3;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .pl-top20-info h3,
    .pl-top20-writers {
        white-space: normal;
    }
}

/* =========================================================
   16. Reduced-motion accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   Theme-only decorative artwork defaults

   Decorative elements that exist in the shared ASPX must be hidden
   unless a theme explicitly opts into them. This keeps Summer and
   future themes from inheriting Holiday artwork.
   ========================================================= */

.pl-top20-popcorn-garland,
.pl-top20-fireplace {
    display: none;
}

/* =========================================================
   17. Theme system

   Base values above preserve the original Summer appearance.
   Add future themes by creating another body.pl-theme-<name>
   block and selecting the matching ThemeKey in the code-behind.
   ========================================================= */

/* Summer theme: intentionally inherits the original base palette. */
body.pl-theme-summer {
    --pl-maroon: #850000;
    --pl-maroon-dark: #580000;
    --pl-gold: #efbd48;
    --pl-cream: #fff9ed;
    --pl-ink: #1d1b1b;
    --pl-muted: #6b6662;
    --pl-border: #eadfce;
}

/* ---------------------------------------------------------
   Holiday / Winter Celebration theme

   Broad seasonal palette for Thanksgiving through New Year:
   winter blue, silver, evergreen, champagne gold and restrained
   cranberry accents. The hero includes a decorative light strand.
   --------------------------------------------------------- */
body.pl-theme-holiday {
    --pl-maroon: #8f3048;          /* cranberry accent */
    --pl-maroon-dark: #652235;
    --pl-gold: #d8b567;            /* champagne gold */
    --pl-cream: #fffaf0;
    --pl-ink: #23313d;
    --pl-muted: #69757d;
    --pl-border: #d7dfe4;
    --pl-holiday-navy: #24465b;
    --pl-holiday-navy-dark: #173447;
    --pl-holiday-blue: #4f7f95;
    --pl-holiday-ice: #eaf3f6;
    --pl-holiday-silver: #cfd7dc;
    --pl-holiday-evergreen: #235c50;
    --pl-holiday-evergreen-dark: #173f37;
    --pl-holiday-champagne: #d8b567;
    --pl-holiday-champagne-light: #f0d99a;
    background: #f2f5f6;
}

/* -------------------------
   Holiday hero
   ------------------------- */
body.pl-theme-holiday .pl-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(255,255,255,.92), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(216,181,103,.22), transparent 20%),
        radial-gradient(circle at 72% 85%, rgba(79,127,149,.14), transparent 26%),
        linear-gradient(125deg, #fffaf0 0%, #edf4f6 42%, #dbe8ee 72%, #eef2f2 100%);
    border-bottom-color: rgba(36,70,91,.14);
}

/* Subtle winter sparkle field behind the hero content. */
body.pl-theme-holiday .pl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .44;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.98) 0 1.25px, transparent 1.5px),
        radial-gradient(circle, rgba(216,181,103,.62) 0 1px, transparent 1.25px),
        radial-gradient(circle, rgba(79,127,149,.34) 0 .9px, transparent 1.15px);
    background-size: 42px 42px, 68px 68px, 92px 92px;
    background-position: 6px 8px, 31px 20px, 20px 48px;
}

body.pl-theme-holiday .pl-hero-inner {
    position: relative;
    z-index: 2;
}

/* Loose strand of mixed seasonal lights across the upper hero. */
body.pl-theme-holiday .pl-hero-inner::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 26%;
    right: 4%;
    top: 10px;
    height: 72px;
    pointer-events: none;
    border-top: 2px solid rgba(50,66,72,.34);
    border-radius: 50%;
    transform: rotate(-1deg);
}

body.pl-theme-holiday .pl-hero-inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 27%;
    right: 5%;
    top: 4px;
    height: 76px;
    pointer-events: none;
    background:
        radial-gradient(circle at 3% 20%,  #e4c573 0 5px, rgba(228,197,115,.34) 6px 10px, transparent 11px),
        radial-gradient(circle at 15% 29%, #6c9db4 0 5px, rgba(108,157,180,.28) 6px 10px, transparent 11px),
        radial-gradient(circle at 28% 37%, #a83b54 0 5px, rgba(168,59,84,.26) 6px 10px, transparent 11px),
        radial-gradient(circle at 41% 42%, #3c7464 0 5px, rgba(60,116,100,.27) 6px 10px, transparent 11px),
        radial-gradient(circle at 54% 40%, #f3e5b6 0 5px, rgba(243,229,182,.42) 6px 10px, transparent 11px),
        radial-gradient(circle at 67% 34%, #6c9db4 0 5px, rgba(108,157,180,.28) 6px 10px, transparent 11px),
        radial-gradient(circle at 80% 26%, #e4c573 0 5px, rgba(228,197,115,.34) 6px 10px, transparent 11px),
        radial-gradient(circle at 93% 18%, #a83b54 0 5px, rgba(168,59,84,.26) 6px 10px, transparent 11px);
}

body.pl-theme-holiday .pl-hero-title-row,
body.pl-theme-holiday .pl-hero p,
body.pl-theme-holiday .pl-hero-actions,
body.pl-theme-holiday .pl-hero-art {
    position: relative;
    z-index: 2;
}

body.pl-theme-holiday .pl-kicker {
    color: var(--pl-holiday-evergreen);
}

body.pl-theme-holiday .pl-hero h1 {
    color: var(--pl-holiday-navy-dark);
    text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

body.pl-theme-holiday .pl-hero p {
    color: #55656e;
}

body.pl-theme-holiday .pl-hero-free-link,
body.pl-theme-holiday .pl-jump-link,
body.pl-theme-holiday .pl-footer-links a,
body.pl-theme-holiday .pl-top20-more-link,
body.pl-theme-holiday .pl-icon-button,
body.pl-theme-holiday .pl-round-control,
body.pl-theme-holiday .pl-modal-kicker,
body.pl-theme-holiday .pl-modal-close {
    color: var(--pl-holiday-navy);
}

body.pl-theme-holiday .pl-hero-free-link:hover,
body.pl-theme-holiday .pl-hero-free-link:focus,
body.pl-theme-holiday .pl-jump-link:hover,
body.pl-theme-holiday .pl-jump-link:focus,
body.pl-theme-holiday .pl-top20-more-link:hover,
body.pl-theme-holiday .pl-top20-more-link:focus {
    color: var(--pl-holiday-evergreen-dark);
}

/* Hero record keeps the music identity while adding the seasonal palette. */
body.pl-theme-holiday .pl-record {
    background: radial-gradient(
        circle at center,
        #e1bd68 0 16%,
        #8f3048 16% 20%,
        #132d3b 20% 34%,
        #28596b 34% 48%,
        #122631 48% 66%,
        #245247 66% 82%,
        #0f242c 82% 100%
    );
    box-shadow:
        0 24px 48px rgba(28,54,69,.23),
        0 0 34px rgba(216,181,103,.16);
}

body.pl-theme-holiday .pl-record-label {
    background: var(--pl-holiday-champagne);
    color: var(--pl-holiday-navy-dark);
}

body.pl-theme-holiday .pl-music-note {
    color: var(--pl-holiday-navy);
}

/* -------------------------
   Holiday primary controls
   ------------------------- */
body.pl-theme-holiday .pl-primary-button,
body.pl-theme-holiday .pl-mobile-top20-jump a,
body.pl-theme-holiday .pl-now-playing-badge {
    background: var(--pl-holiday-evergreen);
    color: #fff;
}

body.pl-theme-holiday .pl-primary-button:hover,
body.pl-theme-holiday .pl-mobile-top20-jump a:hover,
body.pl-theme-holiday .pl-mobile-top20-jump a:focus {
    background: var(--pl-holiday-evergreen-dark);
}

body.pl-theme-holiday .pl-secondary-button,
body.pl-theme-holiday .pl-small-button {
    background: rgba(255,255,255,.94);
    color: var(--pl-holiday-navy);
    border-color: #cfd9de;
}

body.pl-theme-holiday .pl-secondary-button:hover,
body.pl-theme-holiday .pl-small-button:hover,
body.pl-theme-holiday .pl-icon-button:hover,
body.pl-theme-holiday .pl-modal-close:hover,
body.pl-theme-holiday .pl-modal-close:focus {
    background: var(--pl-holiday-navy);
    color: #fff;
    border-color: var(--pl-holiday-navy);
}

/* Playlist and main player play controls stay evergreen/dark blue. */
body.pl-theme-holiday .pl-track-play {
    background: var(--pl-holiday-evergreen);
    color: #fff;
}

body.pl-theme-holiday .pl-track-play:hover {
    background: var(--pl-holiday-evergreen-dark);
}

body.pl-theme-holiday .pl-big-play {
    background: var(--pl-holiday-navy);
    color: #fff;
}

body.pl-theme-holiday .pl-big-play:hover {
    background: var(--pl-holiday-navy-dark);
}

/* -------------------------
   Spotlight and player
   ------------------------- */
/* The upper "Ready to Listen" hero is the snowy/sparkly silver element. */
body.pl-theme-holiday .pl-spotlight-top {
    position: relative;
    overflow: hidden;
    color: var(--pl-holiday-navy-dark);
    background:
        radial-gradient(circle at 8% 18%, rgba(255,255,255,.98) 0 1.5px, transparent 1.8px),
        radial-gradient(circle at 20% 78%, rgba(255,255,255,.94) 0 1.2px, transparent 1.55px),
        radial-gradient(circle at 37% 24%, rgba(191,207,217,.76) 0 1px, transparent 1.35px),
        radial-gradient(circle at 54% 70%, rgba(255,255,255,.96) 0 1.4px, transparent 1.75px),
        radial-gradient(circle at 72% 22%, rgba(216,181,103,.42) 0 1px, transparent 1.35px),
        radial-gradient(circle at 88% 64%, rgba(255,255,255,.94) 0 1.4px, transparent 1.75px),
        linear-gradient(135deg, #fbfcfd 0%, #e6ecef 29%, #c7d1d8 55%, #edf2f4 78%, #f9fbfc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(123,143,155,.20);
}

/* Additional scattered snow-glints without changing the markup. */
body.pl-theme-holiday .pl-spotlight-top::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.92) 0 1.2px, transparent 1.5px),
        radial-gradient(circle, rgba(158,177,188,.54) 0 .9px, transparent 1.2px),
        radial-gradient(circle, rgba(232,205,137,.42) 0 .8px, transparent 1.1px);
    background-size: 38px 38px, 61px 61px, 83px 83px;
    background-position: 6px 7px, 26px 19px, 41px 5px;
}

body.pl-theme-holiday .pl-member-photo-wrap,
body.pl-theme-holiday .pl-spotlight-copy {
    position: relative;
    z-index: 1;
}

body.pl-theme-holiday .pl-now-label {
    color: var(--pl-holiday-evergreen);
}

body.pl-theme-holiday .pl-spotlight-copy h2 {
    color: var(--pl-holiday-navy-dark);
    text-shadow: 0 1px 0 rgba(255,255,255,.82);
}

body.pl-theme-holiday .pl-writer-line,
body.pl-theme-holiday .pl-member-location {
    color: #536672;
}

body.pl-theme-holiday .pl-member-name {
    color: #8a6a2f;
}

body.pl-theme-holiday .pl-member-photo-wrap {
    border-color: rgba(255,255,255,.90);
    box-shadow:
        0 12px 28px rgba(43,61,73,.16),
        0 0 0 1px rgba(128,148,159,.16);
}

body.pl-theme-holiday .pl-member-bio {
    background: linear-gradient(135deg, #fffaf0 0%, #f0f5f6 100%);
}

/* The actual audio player carries a softer version of the snowy silver look. */
body.pl-theme-holiday .pl-player {
    position: relative;
    overflow: hidden;
    border-color: #cbd5db;
    background:
        radial-gradient(circle at 7% 18%, rgba(255,255,255,.96) 0 1.2px, transparent 1.5px),
        radial-gradient(circle at 23% 70%, rgba(255,255,255,.92) 0 1px, transparent 1.35px),
        radial-gradient(circle at 47% 26%, rgba(167,185,196,.52) 0 .8px, transparent 1.15px),
        radial-gradient(circle at 66% 76%, rgba(255,255,255,.94) 0 1.1px, transparent 1.45px),
        radial-gradient(circle at 85% 24%, rgba(216,181,103,.34) 0 .8px, transparent 1.15px),
        linear-gradient(135deg, #f9fbfc 0%, #e7edf0 34%, #d3dde2 57%, #eef3f5 82%, #fafcfd 100%);
    box-shadow:
        0 8px 22px rgba(60,76,87,.08),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(120,140,151,.16);
}

body.pl-theme-holiday .pl-player::before {
    background: linear-gradient(
        90deg,
        var(--pl-holiday-evergreen),
        var(--pl-holiday-champagne),
        var(--pl-holiday-navy)
    );
    opacity: .82;
}

body.pl-theme-holiday .pl-progress {
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 2px rgba(84,105,117,.12);
}

body.pl-theme-holiday .pl-progress-fill,
body.pl-theme-holiday .pl-visualizer span {
    background: var(--pl-holiday-navy);
}

body.pl-theme-holiday .pl-volume input {
    accent-color: var(--pl-holiday-navy);
}

/* -------------------------
   Playlist cards
   ------------------------- */
body.pl-theme-holiday .pl-tools,
body.pl-theme-holiday .pl-top20-list,
body.pl-theme-holiday .pl-top20-zero-message {
    background: #f2f5f6;
}

body.pl-theme-holiday .pl-track-card {
    border-color: #dce3e6;
    border-left-color: var(--pl-maroon);
}

body.pl-theme-holiday .pl-track-card.is-active,
body.pl-theme-holiday .pl-track-card.is-playing-now {
    background: #f5faf9;
    border-color: #b8d1ca;
    border-left-color: var(--pl-maroon);
}

/* Subtle alternating backgrounds for the dense upper playlist only. */
body.pl-theme-holiday .pl-track-list .pl-track-card:nth-child(odd) {
    background: #ffffff;
}

body.pl-theme-holiday .pl-track-list .pl-track-card:nth-child(even) {
    background: #f3f6f7;
}

/* Preserve active / playing states over the alternating row treatment. */
body.pl-theme-holiday .pl-track-list .pl-track-card.is-active,
body.pl-theme-holiday .pl-track-list .pl-track-card.is-playing-now {
    background: #f5faf9;
}

body.pl-theme-holiday .pl-track-member,
body.pl-theme-holiday .pl-top20-member {
    color: #8c6f34;
}

body.pl-theme-holiday .pl-icon-button {
    border-color: #d1dade;
}

body.pl-theme-holiday .pl-lyric-card {
    border-left-color: var(--pl-holiday-champagne);
    background: #fffdf7;
}

body.pl-theme-holiday .pl-lyric-badge {
    border-color: #c6dbe3;
    background: #eaf4f7;
    color: #315f72;
}

body.pl-theme-holiday .pl-lyric-view {
    background: #173447;
}

/* Holiday-only Top 20 decorative artwork. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-garland,
body.pl-theme-holiday #top20 .pl-top20-fireplace {
    display: block;
}

/* -------------------------
   Warm fireplace SongU Top 20
   "Hot songs" contrast against the snowy spotlight
   ------------------------- */
body.pl-theme-holiday #top20 .pl-top20-header {
    position: relative;
    overflow: hidden;
    color: #fff9ef;
    background:
        radial-gradient(circle at 13% 20%, rgba(255,229,172,.55) 0 1.1px, transparent 1.5px),
        radial-gradient(circle at 27% 70%, rgba(220,140,58,.42) 0 .9px, transparent 1.3px),
        radial-gradient(circle at 45% 28%, rgba(255,238,198,.40) 0 1px, transparent 1.4px),
        radial-gradient(circle at 63% 72%, rgba(184,72,34,.32) 0 1px, transparent 1.4px),
        radial-gradient(circle at 81% 30%, rgba(244,183,82,.34) 0 1px, transparent 1.4px),
        radial-gradient(circle at 86% 72%, rgba(255,157,58,.27), transparent 22%),
        linear-gradient(130deg, #2b211d 0%, #493027 36%, #6d3a25 67%, #332722 100%);
    border-bottom: 1px solid rgba(79,42,27,.42);
    box-shadow:
        inset 0 -1px 0 rgba(255,221,164,.12),
        inset 0 1px 0 rgba(255,245,221,.05);
}

/* The regular Top 20 uses explicit fireplace markup so the art reads clearly as a hearth. */
body.pl-theme-holiday #top20 .pl-top20-header::before,
body.pl-theme-holiday #top20 .pl-top20-header::after {
    content: none;
    display: none;
}

body.pl-theme-holiday #top20 .pl-top20-fireplace {
    position: absolute;
    z-index: 2;
    right: 235px;
    bottom: 10px;
    width: 158px;
    height: 124px;
    pointer-events: none;
    filter: drop-shadow(0 10px 12px rgba(27,17,12,.26));
}

/* Stone/wood side columns make the silhouette unmistakably fireplace-like. */
body.pl-theme-holiday #top20 .pl-top20-fireplace::before,
body.pl-theme-holiday #top20 .pl-top20-fireplace::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 29px;
    bottom: 14px;
    width: 20px;
    border: 1px solid rgba(255,228,188,.13);
    background: linear-gradient(90deg, #754a30 0%, #9a6a46 48%, #68412c 100%);
    box-shadow: inset 0 0 0 3px rgba(58,31,19,.16);
}

body.pl-theme-holiday #top20 .pl-top20-fireplace::before {
    left: 8px;
    border-radius: 4px 1px 1px 3px;
}

body.pl-theme-holiday #top20 .pl-top20-fireplace::after {
    right: 8px;
    border-radius: 1px 4px 3px 1px;
}

body.pl-theme-holiday #top20 .pl-top20-fireplace-mantel {
    position: absolute;
    z-index: 5;
    top: 8px;
    left: 0;
    width: 158px;
    height: 23px;
    border-radius: 6px 6px 3px 3px;
    border: 1px solid rgba(255,225,181,.18);
    background: linear-gradient(180deg, #a97952 0%, #815538 48%, #65402b 100%);
    box-shadow:
        0 4px 0 #4d2f22,
        inset 0 1px 0 rgba(255,236,204,.22);
}

/* Ember / champagne spark field drifting out from the fireplace. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-garland {
    position: absolute;
    z-index: 2;
    left: 33%;
    right: 23%;
    top: 10px;
    height: 108px;
    pointer-events: none;
    filter:
        drop-shadow(0 2px 3px rgba(40,23,14,.18))
        drop-shadow(0 0 8px rgba(235,170,70,.20));
}

/* Hide the old garland cord; the existing markup is reused as a spark container. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-cord {
    display: none;
}

/*
   Reuse the existing popcorn / cranberry spans as irregular ember and champagne
   spark points so no ASPX markup change is required.
*/
body.pl-theme-holiday #top20 .pl-top20-popcorn,
body.pl-theme-holiday #top20 .pl-top20-cranberry {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff9cf 0 18%,
        #f4d57f 20% 38%,
        #e79b45 40% 58%,
        rgba(215,95,30,.92) 60% 72%,
        rgba(189,79,31,.24) 74% 82%,
        transparent 84%
    );
    box-shadow:
        0 0 10px rgba(247,211,120,.72),
        0 0 20px rgba(231,144,55,.32),
        0 0 28px rgba(201,83,28,.12);
    opacity: .98;
}

body.pl-theme-holiday #top20 .pl-top20-popcorn::before,
body.pl-theme-holiday #top20 .pl-top20-popcorn::after,
body.pl-theme-holiday #top20 .pl-top20-cranberry::before,
body.pl-theme-holiday #top20 .pl-top20-cranberry::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
    box-shadow: inherit;
}

body.pl-theme-holiday #top20 .pl-top20-popcorn::before,
body.pl-theme-holiday #top20 .pl-top20-cranberry::before {
    width: 2px;
    height: 2px;
    left: -4px;
    top: 4px;
    opacity: .55;
}

body.pl-theme-holiday #top20 .pl-top20-popcorn::after,
body.pl-theme-holiday #top20 .pl-top20-cranberry::after {
    width: 3px;
    height: 3px;
    right: -5px;
    top: -3px;
    opacity: .42;
}

/* Irregular scatter drifting from fireplace toward the open header space. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-1    { left: 2%;  top: 66px; transform: scale(.68); opacity: .38; }
body.pl-theme-holiday #top20 .pl-top20-cranberry-1 { left: 9%;  top: 42px; transform: scale(.84); opacity: .54; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-2    { left: 17%; top: 78px; transform: scale(.58); opacity: .34; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-3    { left: 25%; top: 30px; transform: scale(.86); opacity: .66; }
body.pl-theme-holiday #top20 .pl-top20-cranberry-2 { left: 33%; top: 57px; transform: scale(.74); opacity: .62; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-4    { left: 41%; top: 18px; transform: scale(1.12); opacity: .96; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-9    { left: 48%; top: 84px; transform: scale(.62); opacity: .48; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-5    { left: 55%; top: 45px; transform: scale(.90); opacity: .80; }
body.pl-theme-holiday #top20 .pl-top20-cranberry-3 { left: 63%; top: 14px; transform: scale(1.00); opacity: .92; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-6    { left: 71%; top: 66px; transform: scale(.68); opacity: .58; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-7    { left: 79%; top: 35px; transform: scale(.84); opacity: .72; }
body.pl-theme-holiday #top20 .pl-top20-cranberry-4 { left: 88%; top: 9px; transform: scale(1.08); opacity: .98; }
body.pl-theme-holiday #top20 .pl-top20-popcorn-8    { left: 96%; top: 54px; transform: scale(.64); opacity: .52; }

/* Additional ember points using pseudo-elements on the field itself. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-garland::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 2% 58%, rgba(255,231,156,.38) 0 1.5px, rgba(222,118,38,.24) 2.5px, transparent 4.5px),
        radial-gradient(circle at 7% 27%, rgba(255,239,176,.52) 0 1.7px, rgba(225,137,52,.34) 2.7px, transparent 4.7px),
        radial-gradient(circle at 13% 74%, rgba(255,246,202,.62) 0 1.8px, rgba(236,174,72,.40) 2.8px, transparent 4.8px),
        radial-gradient(circle at 19% 45%, rgba(255,231,156,.76) 0 2px, rgba(222,118,38,.52) 3px, transparent 5px),
        radial-gradient(circle at 24% 68%, rgba(255,244,196,.90) 0 2px, rgba(231,154,55,.60) 3px, transparent 5px),
        radial-gradient(circle at 31% 28%, rgba(255,235,166,.94) 0 2px, rgba(225,126,40,.68) 3px, transparent 5px),
        radial-gradient(circle at 38% 78%, rgba(255,247,208,.90) 0 2px, rgba(235,166,65,.60) 3px, transparent 5px),
        radial-gradient(circle at 46% 43%, rgba(255,232,156,.96) 0 2px, rgba(219,111,34,.68) 3px, transparent 5px),
        radial-gradient(circle at 54% 20%, rgba(255,245,198,.94) 0 2px, rgba(231,151,52,.64) 3px, transparent 5px),
        radial-gradient(circle at 61% 66%, rgba(255,237,170,.96) 0 2px, rgba(224,121,38,.70) 3px, transparent 5px),
        radial-gradient(circle at 69% 37%, rgba(255,244,196,.96) 0 2px, rgba(231,154,55,.66) 3px, transparent 5px),
        radial-gradient(circle at 77% 76%, rgba(255,232,156,.94) 0 2px, rgba(219,111,34,.66) 3px, transparent 5px),
        radial-gradient(circle at 84% 27%, rgba(255,247,208,.98) 0 2px, rgba(235,166,65,.70) 3px, transparent 5px),
        radial-gradient(circle at 91% 59%, rgba(255,239,176,.98) 0 2px, rgba(225,137,52,.72) 3px, transparent 5px),
        radial-gradient(circle at 97% 19%, rgba(255,246,202,1) 0 2px, rgba(236,174,72,.76) 3px, transparent 5px);
    filter: drop-shadow(0 0 6px rgba(240,179,73,.46));
    opacity: .98;
}

/* A few star-shaped champagne glints mixed into the ember field. */
body.pl-theme-holiday #top20 .pl-top20-popcorn-garland::before {
    content: "\2726     \2727       \2726        \2727      \2726";
    position: absolute;
    left: 8%;
    top: 1px;
    color: rgba(255,224,145,.92);
    font-size: 15px;
    letter-spacing: .24em;
    text-shadow:
        62px 34px 0 rgba(255,244,205,.70),
        124px 66px 0 rgba(237,182,85,.58),
        188px 20px 0 rgba(255,247,214,.72),
        252px 55px 0 rgba(232,150,56,.52),
        316px 25px 0 rgba(255,240,187,.66);
    opacity: .96;
}

/* Small straight framed SongU keepsake on the mantel. */
body.pl-theme-holiday #top20 .pl-top20-songu-tchotchke {
    position: absolute;
    z-index: 8;
    left: 18px;
    bottom: 17px;
    width: 34px;
    height: 32px;
    padding: 3px;
    display: grid;
    place-items: center;
    border: 2px solid #d3ad64;
    border-radius: 3px;
    background: #fff9e8;
    box-shadow:
        0 3px 5px rgba(29,17,12,.30),
        inset 0 0 0 1px rgba(255,255,255,.70);
    transform: none;
}

body.pl-theme-holiday #top20 .pl-top20-songu-tchotchke::before {
    content: none;
}

body.pl-theme-holiday #top20 .pl-top20-songu-tchotchke::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 18px;
    height: 5px;
    margin-left: -9px;
    border-radius: 50%;
    background: rgba(55,31,21,.28);
    filter: blur(2px);
}

body.pl-theme-holiday #top20 .pl-top20-songu-tchotchke img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body.pl-theme-holiday #top20 .pl-top20-fireplace-body {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    top: 29px;
    bottom: 12px;
    padding: 9px 10px 8px;
    border: 5px solid #75492f;
    border-top-color: #87593a;
    border-radius: 3px 3px 2px 2px;
    background: #4c2f22;
    box-shadow:
        inset 0 0 0 2px rgba(39,20,14,.28),
        inset 0 0 18px rgba(28,16,13,.42);
}

body.pl-theme-holiday #top20 .pl-top20-firebox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px 2px 1px 1px;
    background:
        radial-gradient(ellipse at 50% 93%, rgba(239,91,26,.34) 0 18%, transparent 50%),
        linear-gradient(180deg, #151314 0%, #1d1513 55%, #2a1711 100%);
    box-shadow: inset 0 0 18px rgba(0,0,0,.56);
}

/* Small ember cluster inside the firebox so the outside trail visibly starts at the fire. */
body.pl-theme-holiday #top20 .pl-top20-firebox::after {
    content: "\2726   \2727";
    position: absolute;
    z-index: 5;
    left: 2%;
    right: 58%;
    top: 5%;
    height: 50%;
    pointer-events: none;
    color: rgba(255,228,145,.94);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .18em;
    background:
        radial-gradient(circle at 16% 74%, rgba(255,244,188,.96) 0 1.7px, rgba(236,147,50,.78) 2.7px, transparent 4.7px),
        radial-gradient(circle at 43% 50%, rgba(255,250,215,.98) 0 1.9px, rgba(242,174,68,.82) 2.9px, transparent 4.9px),
        radial-gradient(circle at 70% 28%, rgba(255,236,157,.94) 0 1.6px, rgba(229,120,35,.72) 2.6px, transparent 4.6px);
    text-shadow:
        7px 11px 0 rgba(255,247,205,.80),
        15px 21px 0 rgba(238,177,78,.66);
    filter:
        drop-shadow(0 0 4px rgba(255,196,83,.72))
        drop-shadow(0 0 8px rgba(225,111,32,.28));
    opacity: .96;
}

body.pl-theme-holiday #top20 .pl-top20-hearth {
    position: absolute;
    z-index: 4;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 15px;
    border-radius: 3px 3px 6px 6px;
    background: linear-gradient(180deg, #785039 0%, #56372a 100%);
    box-shadow: inset 0 1px 0 rgba(255,227,187,.13);
}

body.pl-theme-holiday #top20 .pl-top20-log {
    position: absolute;
    z-index: 3;
    bottom: 12px;
    width: 52px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid #3d2118;
    background: linear-gradient(180deg, #8b4b28 0%, #5c2e1d 55%, #3e2118 100%);
    box-shadow: inset 0 2px 0 rgba(225,132,70,.15);
}

body.pl-theme-holiday #top20 .pl-top20-log-left {
    left: 17px;
    transform: rotate(18deg);
}

body.pl-theme-holiday #top20 .pl-top20-log-right {
    right: 17px;
    transform: rotate(-18deg);
}

/* Flame tongues are actual flame silhouettes rather than abstract geometric fills. */
body.pl-theme-holiday #top20 .pl-top20-flame,
body.pl-theme-holiday #top20 .pl-top20-flame-core {
    position: absolute;
    z-index: 4;
    bottom: 18px;
    display: block;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 8px rgba(255,116,30,.40));
}

body.pl-theme-holiday #top20 .pl-top20-flame {
    clip-path: polygon(50% 0%, 69% 25%, 86% 52%, 79% 80%, 61% 100%, 38% 96%, 17% 76%, 15% 49%, 33% 27%);
    border-radius: 45% 45% 52% 48%;
    background: linear-gradient(180deg, #ffd95f 0%, #ff9a2f 40%, #ed5720 76%, #ba3318 100%);
}

body.pl-theme-holiday #top20 .pl-top20-flame-left {
    left: 25px;
    width: 25px;
    height: 39px;
    transform: rotate(-18deg);
    animation: plHolidayFireLeft 1.5s ease-in-out infinite alternate;
}

body.pl-theme-holiday #top20 .pl-top20-flame-center {
    left: 50%;
    width: 34px;
    height: 56px;
    margin-left: -17px;
    border-radius: 68% 28% 64% 36% / 80% 24% 76% 20%;
    background: linear-gradient(180deg, #fff0a0 0%, #ffd44e 24%, #ff8d29 54%, #e5481f 84%, #ae2c17 100%);
    animation: plHolidayFireCenter 1.25s ease-in-out infinite alternate;
}

body.pl-theme-holiday #top20 .pl-top20-flame-right {
    right: 25px;
    width: 24px;
    height: 42px;
    transform: rotate(16deg);
    animation: plHolidayFireRight 1.7s ease-in-out infinite alternate;
}

body.pl-theme-holiday #top20 .pl-top20-flame-core {
    left: 50%;
    width: 18px;
    height: 30px;
    margin-left: -9px;
    clip-path: polygon(50% 0%, 70% 30%, 82% 58%, 70% 86%, 50% 100%, 27% 88%, 18% 59%, 31% 30%);
    border-radius: 45% 45% 52% 48%;
    background: linear-gradient(180deg, #fffbd0 0%, #ffe46c 44%, #ffae35 100%);
    box-shadow: 0 0 14px rgba(255,207,79,.55);
    animation: plHolidayFireCore 1.05s ease-in-out infinite alternate;
}

@keyframes plHolidayFireLeft {
    from { transform: rotate(-18deg) scaleY(.92) scaleX(.96); }
    to   { transform: rotate(-10deg) scaleY(1.08) scaleX(1.02); }
}

@keyframes plHolidayFireCenter {
    from { transform: rotate(-2deg) scaleY(.94) scaleX(.97); }
    to   { transform: rotate(3deg) scaleY(1.08) scaleX(1.02); }
}

@keyframes plHolidayFireRight {
    from { transform: rotate(16deg) scaleY(.94) scaleX(.96); }
    to   { transform: rotate(9deg) scaleY(1.06) scaleX(1.03); }
}

@keyframes plHolidayFireCore {
    from { transform: scaleY(.92) scaleX(.96); opacity: .88; }
    to   { transform: scaleY(1.08) scaleX(1.04); opacity: 1; }
}

body.pl-theme-holiday #top20 .pl-top20-heading,
body.pl-theme-holiday #top20 .pl-top20-header .pl-primary-button {
    position: relative;
    z-index: 3;
}

@media screen and (min-width: 1051px) {
    body.pl-theme-holiday #top20 .pl-top20-heading {
        max-width: calc(100% - 470px);
    }
}

body.pl-theme-holiday #top20 .pl-top20-kicker {
    color: #f0cf82;
}

body.pl-theme-holiday #top20 .pl-top20-heading h2 {
    color: #fff8ec;
    text-shadow: 0 2px 8px rgba(0,0,0,.28);
}

body.pl-theme-holiday #top20 .pl-top20-heading p {
    color: rgba(255,246,230,.82);
}

/* Champagne-gold hero CTA. */
body.pl-theme-holiday #top20 .pl-top20-header .pl-primary-button {
    background: linear-gradient(135deg, #f3dda0 0%, #d8b567 58%, #bd9140 100%);
    color: #3a2d25;
    border-color: rgba(255,245,218,.76);
    box-shadow:
        0 12px 28px rgba(27,18,14,.28),
        inset 0 1px 0 rgba(255,255,255,.78);
}

body.pl-theme-holiday #top20 .pl-top20-header .pl-primary-button:hover {
    background: linear-gradient(135deg, #fae9ba 0%, #e5c77b 58%, #c99f4d 100%);
    color: #2f241f;
}

/* Champagne-gold play circles inside the regular Top 20 only. */
body.pl-theme-holiday #top20 .pl-top20-play {
    background: linear-gradient(135deg, #f1d997 0%, #d8b567 62%, #bc9040 100%);
    color: #443329;
    box-shadow: 0 4px 12px rgba(97,67,42,.20);
}

body.pl-theme-holiday #top20 .pl-top20-play:hover {
    background: linear-gradient(135deg, #f9e9ba 0%, #e4c77d 62%, #caa14f 100%);
    color: #30231d;
}

body.pl-theme-holiday #top20 .pl-top20-row.is-active {
    background: #fff9f2;
    box-shadow: inset 5px 0 0 #9a5a34;
}

/* Slightly stronger rank-number contrast for the regular Top 20. */
body.pl-theme-holiday #top20 .pl-top20-rank {
    color: #9c8874;
}

/* Podium ranks use richer champagne-metal tones. */
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="1"] .pl-top20-rank {
    color: #c99a2f;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="2"] .pl-top20-rank {
    color: #a9a39a;
    text-shadow: 0 1px 0 rgba(255,255,255,.62);
}

body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="3"] .pl-top20-rank {
    color: #b97843;
    text-shadow: 0 1px 0 rgba(255,255,255,.60);
}

body.pl-theme-holiday #top20 .pl-top20-row.is-playing-now,
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="1"].is-playing-now,
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="2"].is-playing-now,
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="3"].is-playing-now {
    background: #fff9f2;
    border-color: #dcc5b3;
    box-shadow: inset 5px 0 0 #9a5a34, 0 8px 24px rgba(105,58,33,.10);
}

/* Top three keep their medal distinction against the warm header. */
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="1"],
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="2"],
body.pl-theme-holiday #top20 .pl-top20-row[data-top-rank="3"] {
    background: linear-gradient(90deg, rgba(216,181,103,.17), rgba(248,238,226,.28) 44%, #fff 82%);
}

/* -------------------------
   Holiday Fan Favorites
   Champagne-toast celebration. This block is scoped only to
   body.pl-theme-holiday, so Summer keeps the original heart treatment.
   ------------------------- */
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-header {
    position: relative;
    overflow: hidden;
    padding-right: 300px;
    background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.54), transparent 22%),
        radial-gradient(circle at 76% 82%, rgba(143,48,72,.08), transparent 24%),
        linear-gradient(135deg, #fffaf0 0%, #f4dfb3 42%, #e7c88e 72%, #f7ecd0 100%);
    color: #4f382f;
}

/* Soft background fizz behind the toast. The clearly visible bubbles themselves
   are individual elements inside .pl-fan-favorites-theme-art below. */
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 50%;
    pointer-events: none;
    opacity: .72;
    background:
        radial-gradient(circle at 56% 78%, rgba(255,255,255,.86) 0 1.7px, transparent 2.4px),
        radial-gradient(circle at 66% 30%, rgba(216,181,103,.68) 0 1.6px, transparent 2.3px),
        radial-gradient(circle at 78% 70%, rgba(143,48,72,.40) 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 90% 24%, rgba(255,255,255,.92) 0 1.8px, transparent 2.5px);
    filter: drop-shadow(0 0 5px rgba(216,181,103,.24));
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-kicker,
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-rank,
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-count {
    color: var(--pl-maroon);
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-heading h2,
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-heading p {
    color: #4f382f;
}

/* Remove the base/Summer oversized heart only for Holiday. */
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-header::after {
    content: none;
    display: none;
}

/* Theme-art containers default to hidden so future/Summer themes remain untouched. */
.pl-fan-favorites-confetti {
    display: none;
}

/* Small celebratory confetti field in the open space between the copy and toast.
   Kept separate from the champagne bubbles so the bubbles still read as fizz. */
body.pl-theme-holiday .pl-fan-favorites-confetti {
    position: absolute;
    z-index: 1;
    right: 248px;
    top: 24px;
    width: 250px;
    height: 140px;
    display: block;
    pointer-events: none;
}

body.pl-theme-holiday .pl-toast-confetti {
    position: absolute;
    display: block;
    width: 7px;
    height: 3px;
    border-radius: 1px;
    opacity: .78;
    box-shadow: 0 1px 2px rgba(80,55,28,.08);
    animation: plHolidayConfettiFloat 4.6s ease-in-out infinite alternate;
}

body.pl-theme-holiday .pl-toast-confetti-1 { left: 8%;  top: 22%; background: #e5c77b; transform: rotate(24deg); animation-delay: -.8s; }
body.pl-theme-holiday .pl-toast-confetti-2 { left: 24%; top: 56%; background: #d8b567; transform: rotate(-34deg); animation-delay: -2.1s; }
body.pl-theme-holiday .pl-toast-confetti-3 { left: 38%; top: 18%; width: 5px; height: 5px; border-radius: 50%; background: #fff7df; box-shadow: 0 0 0 1px rgba(216,181,103,.42); animation-delay: -1.4s; }
body.pl-theme-holiday .pl-toast-confetti-4 { left: 52%; top: 66%; background: #c7d1d7; transform: rotate(48deg); animation-delay: -3.0s; }
body.pl-theme-holiday .pl-toast-confetti-5 { left: 65%; top: 32%; background: #d8b567; transform: rotate(12deg); animation-delay: -.3s; }
body.pl-theme-holiday .pl-toast-confetti-6 { left: 78%; top: 74%; width: 6px; height: 6px; background: transparent; border: 1.5px solid rgba(216,181,103,.72); transform: rotate(45deg); animation-delay: -2.5s; }
body.pl-theme-holiday .pl-toast-confetti-7 { left: 14%; top: 82%; background: #f0d99a; transform: rotate(-14deg); animation-delay: -1.9s; }
body.pl-theme-holiday .pl-toast-confetti-8 { left: 84%; top: 13%; background: #f7ecd0; box-shadow: 0 0 0 1px rgba(216,181,103,.42); transform: rotate(-42deg); animation-delay: -3.5s; }
body.pl-theme-holiday .pl-toast-confetti-9 { left: 48%; top: 43%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 5px rgba(255,245,205,.45); animation-delay: -1.1s; }

/* Three purposeful cranberry pieces stay close to the toast and visibly tumble.
   Their motion distinguishes them from stray marks while the wider field remains
   champagne / ivory / silver. */
body.pl-theme-holiday .pl-toast-confetti-cranberry {
    width: 8px;
    height: 3px;
    border-radius: 1px;
    background: #8f3048;
    opacity: .88;
    box-shadow: 0 1px 2px rgba(101,34,53,.14);
    animation-name: plHolidayCranberryConfettiDrift;
    animation-duration: 3.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

body.pl-theme-holiday .pl-toast-confetti-10 {
    left: 74%;
    top: 29%;
    animation-delay: -.7s;
}

body.pl-theme-holiday .pl-toast-confetti-11 {
    left: 88%;
    top: 52%;
    width: 7px;
    height: 3px;
    animation-delay: -2.0s;
}

body.pl-theme-holiday .pl-toast-confetti-12 {
    left: 81%;
    top: 76%;
    width: 6px;
    height: 4px;
    border-radius: 1px 3px 1px 3px;
    animation-delay: -3.0s;
}

@keyframes plHolidayCranberryConfettiDrift {
    from {
        transform: translate3d(-2px, 4px, 0) rotate(-24deg);
        opacity: .66;
    }

    to {
        transform: translate3d(5px, -8px, 0) rotate(58deg);
        opacity: .96;
    }
}

@keyframes plHolidayConfettiFloat {
    from { translate: 0 2px; opacity: .62; }
    to   { translate: 0 -4px; opacity: .92; }
}

/* Decorative champagne-toast artwork.
   The markup is generic and hidden by default; Holiday is the theme that enables it. */
body.pl-theme-holiday .pl-fan-favorites-theme-art {
    position: absolute;
    z-index: 1;
    right: 54px;
    top: 50%;
    width: 190px;
    height: 126px;
    display: block;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Champagne flute bowl. */
body.pl-theme-holiday .pl-toast-flute {
    position: absolute;
    top: 18px;
    width: 48px;
    height: 70px;
    border: 3px solid rgba(143,48,72,.78);
    border-top: 2px solid rgba(101,34,53,.66);
    border-radius: 7px 7px 22px 22px / 7px 7px 42px 42px;
    background:
        linear-gradient(
            to top,
            rgba(224,178,76,.68) 0%,
            rgba(244,216,145,.58) 34%,
            rgba(255,255,255,.12) 35%,
            rgba(255,255,255,.04) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.66),
        0 8px 18px rgba(112,78,29,.14),
        0 0 0 1px rgba(255,255,255,.20);
    transform-origin: 50% 90%;
}

/* Stem. */
body.pl-theme-holiday .pl-toast-flute::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 66px;
    width: 3px;
    height: 31px;
    margin-left: -1.5px;
    border-radius: 999px;
    background: rgba(143,48,72,.76);
    box-shadow: inset 1px 0 0 rgba(255,255,255,.42), 0 1px 0 rgba(185,147,75,.12);
}

/* Base. */
body.pl-theme-holiday .pl-toast-flute::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 95px;
    width: 34px;
    height: 4px;
    margin-left: -17px;
    border-radius: 50%;
    background: rgba(143,48,72,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 2px 5px rgba(112,78,29,.12);
}

body.pl-theme-holiday .pl-toast-flute-left {
    left: 42px;
    transform: rotate(16deg);
}

body.pl-theme-holiday .pl-toast-flute-right {
    right: 42px;
    transform: rotate(-16deg);
}

/* A tiny champagne highlight near the rims where the glasses meet. */
body.pl-theme-holiday .pl-fan-favorites-theme-art::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 28px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,250,220,.96) 0 18%, rgba(235,190,87,.66) 24% 45%, transparent 48%);
    filter: drop-shadow(0 0 8px rgba(240,197,100,.55));
}

/* Soft champagne glow behind the toast. */
body.pl-theme-holiday .pl-fan-favorites-theme-art::after {
    content: "";
    position: absolute;
    inset: 8px 14px 0;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,245,205,.40) 0%, rgba(231,193,110,.18) 42%, transparent 72%);
    filter: blur(2px);
}

/* Mixed star/diamond glints around the glasses. */
body.pl-theme-holiday .pl-toast-spark {
    position: absolute;
    color: rgba(255,246,207,.96);
    line-height: 1;
    text-shadow:
        0 0 6px rgba(255,225,145,.74),
        0 0 12px rgba(224,168,67,.30);
}

body.pl-theme-holiday .pl-toast-spark-1 {
    left: 20px;
    top: 24px;
    font-size: 17px;
}

body.pl-theme-holiday .pl-toast-spark-2 {
    right: 20px;
    top: 15px;
    font-size: 13px;
}

body.pl-theme-holiday .pl-toast-spark-3 {
    left: 19px;
    bottom: 23px;
    font-size: 11px;
    opacity: .78;
}

body.pl-theme-holiday .pl-toast-spark-4 {
    right: 15px;
    bottom: 30px;
    font-size: 16px;
    opacity: .88;
}

/* A small champagne-bubble trail drifting up the LEFT side of the toast.
   Keep this restrained so the glasses remain the focal point. */
body.pl-theme-holiday .pl-toast-bubble {
    position: absolute;
    z-index: 3;
    display: block;
    border: 2px solid rgba(255,252,239,.94);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.52),
        0 0 0 1px rgba(216,181,103,.18),
        0 0 8px rgba(255,239,191,.30);
    opacity: .96;
    animation: plHolidayChampagneBubble 3.8s ease-in-out infinite alternate;
}

body.pl-theme-holiday .pl-toast-bubble-1 {
    left: -3px;
    bottom: 22px;
    width: 12px;
    height: 12px;
    border-color: rgba(143,48,72,.42);
    animation-delay: -.5s;
}

body.pl-theme-holiday .pl-toast-bubble-2 {
    left: 14px;
    top: 58px;
    width: 9px;
    height: 9px;
    border-color: rgba(255,252,239,.96);
    animation-delay: -1.7s;
}

body.pl-theme-holiday .pl-toast-bubble-3 {
    left: 31px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-color: rgba(216,181,103,.86);
    animation-delay: -2.5s;
}

body.pl-theme-holiday .pl-toast-bubble-4 {
    left: 49px;
    top: 43px;
    width: 7px;
    height: 7px;
    border-color: rgba(255,252,239,.96);
    animation-delay: -.9s;
}

@keyframes plHolidayChampagneBubble {
    from {
        transform: translateY(3px) scale(.94);
        opacity: .68;
    }

    to {
        transform: translateY(-6px) scale(1.04);
        opacity: 1;
    }
}

body.pl-theme-holiday .pl-fan-favorites-deadline {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(165,116,30,.18);
    color: #6f3140;
    box-shadow: 0 8px 20px rgba(130,92,27,.08);
}

body.pl-theme-holiday .pl-fan-favorites-deadline i,
body.pl-theme-holiday .pl-fan-favorites-deadline strong {
    color: #6f3140;
}

/* Fan Favorite podium: warmer champagne/blush than the play-count Top 20. */
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="1"],
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="2"],
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="3"] {
    background: linear-gradient(
        90deg,
        rgba(239,203,125,.24),
        rgba(255,247,243,.68) 42%,
        #fff 88%
    );
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="1"] .pl-top20-rank {
    color: #c49527;
    text-shadow: 0 1px 0 rgba(255,255,255,.66);
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="2"] .pl-top20-rank {
    color: #9e9991;
    text-shadow: 0 1px 0 rgba(255,255,255,.62);
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row[data-fan-rank="3"] .pl-top20-rank {
    color: #b4744b;
    text-shadow: 0 1px 0 rgba(255,255,255,.60);
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row.is-active,
body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row.is-playing-now {
    background: #fff8f4;
}

body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-row.is-paused-now {
    background: #f5fbfc;
}

body.pl-theme-holiday .pl-favorite-status {
    border-color: #dec87f;
    background: linear-gradient(135deg, #fff9e9 0%, #eef5f7 100%);
    color: #594b3d;
}

body.pl-theme-holiday .pl-favorite-status-icon,
body.pl-theme-holiday .pl-vote-button.is-hearted {
    background: var(--pl-maroon);
}

body.pl-theme-holiday .pl-vote-button {
    background: #fff8e6;
    color: #6a4b36;
    border-color: var(--pl-holiday-champagne);
}

body.pl-theme-holiday .pl-vote-button:hover,
body.pl-theme-holiday .pl-vote-button:focus {
    background: var(--pl-maroon);
    color: #fff;
    border-color: var(--pl-maroon);
}

body.pl-theme-holiday .pl-fan-favorites-voting-message,
body.pl-theme-holiday .pl-modal {
    background: #fffaf0;
}

/* Toast artwork scales down, then moves beneath the heading on smaller screens. */
@media screen and (max-width: 1050px) {
    body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-header {
        padding-right: 245px;
    }

    body.pl-theme-holiday .pl-fan-favorites-confetti {
        right: 205px;
        width: 150px;
        opacity: .72;
    }

    body.pl-theme-holiday .pl-fan-favorites-theme-art {
        right: 24px;
        transform: translateY(-50%) scale(.86);
        transform-origin: right center;
    }
}

@media screen and (max-width: 760px) {
    body.pl-theme-holiday .pl-fan-favorites-confetti {
        display: none;
    }

    body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-header {
        padding-right: 18px;
        padding-bottom: 150px;
    }

    body.pl-theme-holiday .pl-fan-favorites-card .pl-top20-heading {
        max-width: none;
    }

    body.pl-theme-holiday .pl-fan-favorites-theme-art {
        right: 50%;
        top: auto;
        bottom: 18px;
        transform: translateX(50%) scale(.82);
        transform-origin: center bottom;
    }
}

body.pl-theme-holiday .pl-profile-playing-badge {
    background: rgba(36,70,91,.95);
}

body.pl-theme-holiday .pl-profile-playing-dot,
body.pl-theme-holiday .pl-now-playing-badge::before {
    background: var(--pl-holiday-champagne-light);
}



@media screen and (max-width: 1180px) {
    body.pl-theme-holiday #top20 .pl-top20-popcorn-garland {
        display: none;
    }
}

@media screen and (max-width: 1050px) {
    body.pl-theme-holiday #top20 .pl-top20-fireplace {
        right: 220px;
        width: 142px;
        height: 112px;
        transform: scale(.90);
        transform-origin: right bottom;
    }
}

/* -------------------------
   Holiday responsive details
   ------------------------- */
@media screen and (max-width: 920px) {
    body.pl-theme-holiday #top20 .pl-top20-fireplace {
        display: none;
    }

    body.pl-theme-holiday .pl-hero-inner::before,
    body.pl-theme-holiday .pl-hero-inner::after {
        left: 46%;
        opacity: .72;
    }

    body.pl-theme-holiday .pl-hero::before {
        background-size: 34px 34px, 53px 53px, 74px 74px;
    }
}

@media screen and (max-width: 680px) {
    body.pl-theme-holiday .pl-hero-inner::before,
    body.pl-theme-holiday .pl-hero-inner::after {
        display: none;
    }
}

/* =========================================================
   Holiday upper-half refinement
   Clearer section separation + deeper evergreen controls
   ========================================================= */

body.pl-theme-holiday {
    background: #e9eef0;
}

body.pl-theme-holiday .pl-hero {
    border-bottom: 1px solid #c5d2d7;
    box-shadow: 0 5px 18px rgba(39, 65, 77, 0.07);
}

body.pl-theme-holiday .pl-content-grid {
    gap: 28px;
}

body.pl-theme-holiday .pl-spotlight-card,
body.pl-theme-holiday .pl-list-card {
    background: #ffffff;
    border-color: #cbd6db;
    box-shadow: 0 14px 34px rgba(35, 57, 68, 0.10);
}

body.pl-theme-holiday .pl-tools {
    background: #f0f4f6;
    border: 1px solid #d7e0e4;
}

body.pl-theme-holiday .pl-primary-button,
body.pl-theme-holiday .pl-track-play,
body.pl-theme-holiday .pl-big-play,
body.pl-theme-holiday .pl-mobile-top20-jump a,
body.pl-theme-holiday .pl-now-playing-badge {
    background: #2A713E;
}

body.pl-theme-holiday .pl-primary-button:hover,
body.pl-theme-holiday .pl-track-play:hover,
body.pl-theme-holiday .pl-big-play:hover,
body.pl-theme-holiday .pl-mobile-top20-jump a:hover,
body.pl-theme-holiday .pl-mobile-top20-jump a:focus {
    background: #215A32;
}

/* Keep the narrow cranberry playlist accent from the prior pass. */
body.pl-theme-holiday .pl-track-card {
    border-left-color: #7b2633;
}

/* =========================================================
   Holiday upper-half festive polish
   Brighter hero lights + champagne/silver glints
   ========================================================= */

/* Make the hero light strand a little brighter and more celebratory. */
body.pl-theme-holiday .pl-hero-inner::before {
    border-top-color: rgba(48, 67, 75, .42);
    box-shadow: 0 -1px 0 rgba(255,255,255,.34);
}

body.pl-theme-holiday .pl-hero-inner::after {
    opacity: 1;
    background:
        radial-gradient(circle at 3% 20%,  #e5c15f 0 6px, rgba(229,193,95,.44) 7px 12px, transparent 13px),
        radial-gradient(circle at 15% 29%, #6298b1 0 6px, rgba(98,152,177,.36) 7px 12px, transparent 13px),
        radial-gradient(circle at 28% 37%, #b33d58 0 6px, rgba(179,61,88,.35) 7px 12px, transparent 13px),
        radial-gradient(circle at 41% 42%, #357060 0 6px, rgba(53,112,96,.35) 7px 12px, transparent 13px),
        radial-gradient(circle at 54% 40%, #f5e5ac 0 6px, rgba(245,229,172,.52) 7px 12px, transparent 13px),
        radial-gradient(circle at 67% 34%, #6298b1 0 6px, rgba(98,152,177,.36) 7px 12px, transparent 13px),
        radial-gradient(circle at 80% 26%, #e5c15f 0 6px, rgba(229,193,95,.44) 7px 12px, transparent 13px),
        radial-gradient(circle at 93% 18%, #b33d58 0 6px, rgba(179,61,88,.35) 7px 12px, transparent 13px);
    filter: drop-shadow(0 2px 3px rgba(43,64,74,.10));
}

/* Decorative snowfall hook. Hidden by default so other themes, including
   Summer, keep their own appearance. */
.pl-spotlight-snow {
    display: none;
}

/* Holiday snow-globe treatment. Tiny static flakes remain in ::after for
   depth; these larger foreground flakes make the motion unmistakably snow. */
body.pl-theme-holiday .pl-spotlight-snow {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

body.pl-theme-holiday .pl-spotlight-snowflake {
    position: absolute;
    top: -24px;
    display: block;
    color: rgba(255,255,255,.96);
    line-height: 1;
    text-shadow:
        0 0 4px rgba(255,255,255,.98),
        0 1px 5px rgba(110,139,155,.20);
    filter: drop-shadow(0 1px 1px rgba(119,145,159,.10));
    animation-name: plHolidaySnowflakeFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

body.pl-theme-holiday .pl-spotlight-snowflake::before {
    content: "\2744";
}

body.pl-theme-holiday .pl-spotlight-snowflake-1 {
    left: 15%;
    font-size: 9px;
    opacity: .72;
    animation-duration: 12s;
    animation-delay: -2s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-2 {
    left: 27%;
    font-size: 13px;
    opacity: .88;
    animation-duration: 15s;
    animation-delay: -9s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-3 {
    left: 39%;
    font-size: 8px;
    opacity: .65;
    animation-duration: 11s;
    animation-delay: -6s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-4 {
    left: 51%;
    font-size: 11px;
    opacity: .82;
    animation-duration: 17s;
    animation-delay: -13s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-5 {
    left: 62%;
    font-size: 14px;
    opacity: .92;
    animation-duration: 14s;
    animation-delay: -4s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-6 {
    left: 71%;
    font-size: 9px;
    opacity: .68;
    animation-duration: 18s;
    animation-delay: -11s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-7 {
    left: 80%;
    font-size: 12px;
    opacity: .86;
    animation-duration: 13s;
    animation-delay: -7s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-8 {
    left: 88%;
    font-size: 8px;
    opacity: .64;
    animation-duration: 16s;
    animation-delay: -14s;
}

body.pl-theme-holiday .pl-spotlight-snowflake-9 {
    left: 95%;
    font-size: 11px;
    opacity: .80;
    animation-duration: 12.5s;
    animation-delay: -5s;
}

@keyframes plHolidaySnowflakeFall {
    0% {
        transform: translate3d(0, -16px, 0) rotate(0deg);
    }

    45% {
        transform: translate3d(10px, 108px, 0) rotate(105deg);
    }

    100% {
        transform: translate3d(-7px, 245px, 0) rotate(220deg);
    }
}

body.pl-theme-holiday .pl-member-photo-wrap,
body.pl-theme-holiday .pl-spotlight-copy {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Holiday hero color/contrast refresh
   Hero-only treatment: snow-globe player, Top 20, Fan Favorites,
   Summer and all shared playlist mechanics remain unchanged.
   ========================================================= */

body.pl-theme-holiday .pl-hero {
    background:
        radial-gradient(circle at 7% 22%, rgba(255,255,255,.90), transparent 19%),
        radial-gradient(circle at 32% 26%, rgba(255,224,139,.56), transparent 34%),
        radial-gradient(circle at 83% 18%, rgba(255,211,102,.24), transparent 20%),
        radial-gradient(circle at 76% 82%, rgba(36,111,139,.22), transparent 29%),
        linear-gradient(112deg,
            #fff4c7 0%,
            #f7e2a4 24%,
            #f1d99a 44%,
            #e9dfb8 57%,
            #cbe1e1 70%,
            #9fcbd8 84%,
            #cce4e6 100%);
    border-bottom-color: rgba(23,52,71,.24);
    box-shadow:
        0 7px 22px rgba(35,73,91,.12),
        inset 0 -1px 0 rgba(255,255,255,.60);
}

/* Keep the fine sparkle texture, but increase its contrast slightly
   against the richer hero background. */
body.pl-theme-holiday .pl-hero::before {
    opacity: .58;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.98) 0 1.3px, transparent 1.65px),
        radial-gradient(circle, rgba(223,180,72,.74) 0 1.05px, transparent 1.4px),
        radial-gradient(circle, rgba(42,105,132,.42) 0 .95px, transparent 1.25px);
}

/* Stronger headline hierarchy. */
body.pl-theme-holiday .pl-kicker {
    color: #7b2633;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

body.pl-theme-holiday .pl-hero h1 {
    color: #6d2030;
    font-family: "Raleway", "Open Sans", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.035em;
    text-shadow:
        0 1px 0 rgba(255,255,255,.80),
        0 3px 12px rgba(92,33,48,.10);
}

body.pl-theme-holiday .pl-hero-description {
    color: #3e5967;
    font-weight: 600;
    margin-top: 0px;
    white-space: normal;
    text-shadow: 0 1px 0 rgba(255,255,255,.52);
}

body.pl-theme-holiday .pl-hero-description-note {
    display: block;
    margin-top: 3px;
    color: #536873;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/* Brighter, more saturated holiday lights with a soft glow. */
body.pl-theme-holiday .pl-hero-inner::before {
    border-top-color: rgba(39,65,75,.52);
    box-shadow: 0 -1px 0 rgba(255,255,255,.48);
}

body.pl-theme-holiday .pl-hero-inner::after {
    opacity: 1;
    background:
        radial-gradient(circle at 3% 20%,  #f2c84f 0 6px, rgba(242,200,79,.50) 7px 13px, transparent 14px),
        radial-gradient(circle at 15% 29%, #4f9dc0 0 6px, rgba(79,157,192,.42) 7px 13px, transparent 14px),
        radial-gradient(circle at 28% 37%, #bd3f5d 0 6px, rgba(189,63,93,.42) 7px 13px, transparent 14px),
        radial-gradient(circle at 41% 42%, #2f8068 0 6px, rgba(47,128,104,.42) 7px 13px, transparent 14px),
        radial-gradient(circle at 54% 40%, #ffe9a2 0 6px, rgba(255,233,162,.62) 7px 13px, transparent 14px),
        radial-gradient(circle at 67% 34%, #4f9dc0 0 6px, rgba(79,157,192,.42) 7px 13px, transparent 14px),
        radial-gradient(circle at 80% 26%, #f2c84f 0 6px, rgba(242,200,79,.50) 7px 13px, transparent 14px),
        radial-gradient(circle at 93% 18%, #bd3f5d 0 6px, rgba(189,63,93,.42) 7px 13px, transparent 14px);
    filter:
        drop-shadow(0 2px 3px rgba(43,64,74,.12))
        drop-shadow(0 0 7px rgba(255,220,132,.24));
}

/* Make the record a stronger visual anchor. */
body.pl-theme-holiday .pl-record {
    background: radial-gradient(
        circle at center,
        #efc55a 0 16%,
        #7b2633 16% 20%,
        #0d3043 20% 34%,
        #2f7892 34% 48%,
        #102c3b 48% 66%,
        #236a57 66% 82%,
        #0b2633 82% 100%
    );
    /* Thin SongU cranberry accent around the winter record palette. */
    border: 5px solid #8f3048;
    box-shadow:
        0 24px 48px rgba(20,55,72,.30),
        0 0 0 3px rgba(255,255,255,.38),
        0 0 0 7px rgba(143,48,72,.24),
        0 0 34px rgba(239,197,90,.27);
}

body.pl-theme-holiday .pl-record-label {
    background: #efc55a;
    color: #12384f;
    box-shadow: inset 0 0 0 2px rgba(255,242,196,.48);
}

body.pl-theme-holiday .pl-music-note {
    /* Slightly larger so the candy-cane treatment reads clearly at a glance. */
    color: transparent;
    font-size: 84px;
    right: 4.5%;
    top: 4%;
    filter:
        drop-shadow(0 2px 0 rgba(255,255,255,.55))
        drop-shadow(0 0 11px rgba(143,48,72,.22));
}

body.pl-theme-holiday .pl-music-note::before {
    /* Tighter cranberry + warm-ivory bands make the candy-cane striping unmistakable. */
    color: transparent;
    background: repeating-linear-gradient(
        -45deg,
        #b32643 0 8px,
        #fff8e8 8px 14px,
        #b32643 14px 22px,
        #fff8e8 22px 28px
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.25px rgba(111,30,48,.82);
}

/* Only the hero's main CTA gets the slightly brighter evergreen.
   Other green play controls retain the established page color. */
body.pl-theme-holiday .pl-hero .pl-primary-button {
    background: #2f7f48;
    box-shadow:
        0 11px 24px rgba(32,91,53,.23),
        inset 0 1px 0 rgba(255,255,255,.15);
}

body.pl-theme-holiday .pl-hero .pl-primary-button:hover {
    background: #246739;
}

body.pl-theme-holiday .pl-hero .pl-secondary-button {
    color: #173f56;
    border-color: rgba(37,80,100,.25);
    box-shadow: 0 5px 14px rgba(29,68,86,.08);
}

body.pl-theme-holiday .pl-hero-free-link {
    color: #173f56;
    font-weight: 700;
}


/* =========================================================
   Holiday title + description mobile refinement
   Keeps Summer unchanged while balancing the longer Holiday title.
   ========================================================= */
@media screen and (max-width: 680px) {
    body.pl-theme-holiday .pl-hero h1 {
        font-size: clamp(29px, 7.8vw, 33px);
        line-height: 1.04;
        letter-spacing: -.03em;
        text-wrap: balance;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    body.pl-theme-holiday .pl-hero-description {
        margin-top: 10px;
        font-size: 17px;
        line-height: 1.45;
    }

    body.pl-theme-holiday .pl-hero-description-note {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 600;
    }
}

/* =========================================================
   Holiday hero title accent
   Only the configured accent word receives the festive display face.
   Other themes keep their normal title rendering.
   ========================================================= */
body.pl-theme-holiday .pl-hero-title-accent {
    display: inline-block;
    margin: 0 .045em 0 .025em;
    color: #7b1f34;
    font-family: "Berkshire Swash", Georgia, serif;
    font-size: 1.10em;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: .92;
    transform: translateY(.015em) rotate(-.7deg);
    text-shadow: 0 1px 0 rgba(255,249,225,.92), 0 3px 0 rgba(113,31,48,.08), 0 4px 12px rgba(139,45,64,.12);
}

body.pl-theme-holiday .pl-hero-title-prefix,
body.pl-theme-holiday .pl-hero-title-suffix {
    font-family: "Raleway", "Open Sans", Arial, sans-serif;
    font-weight: 600;
}

@media screen and (max-width: 680px) {
    body.pl-theme-holiday .pl-hero-title-accent {
        margin-left: .02em;
        margin-right: .035em;
        font-size: 1.08em;
        line-height: .95;
        transform: none;
        white-space: nowrap;
    }
}


/* Holiday 2026: status doubles as an accessible collapse toggle after the freeze. */
.pl-chart-state {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 9px 0 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff3cb;
    color: #66180d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}
.pl-chart-state-dark { background: #800000; color: #fff; }
.pl-chart-state-toggle {
    border: 1px solid rgba(255, 243, 203, .85);
    cursor: pointer;
    text-align: left;
    position: relative;
    z-index: 5;
    line-height: 1.4;
}
.pl-chart-state-toggle:hover,
.pl-chart-state-toggle:focus-visible { background: #fff8e2; border-color: #fff; }
.pl-chart-state-hint { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pl-chart-state-toggle i { font-size: 11px; }
/* Hide ONLY the chart rows and zero-play note. Never hide the Play button. */
.pl-top20-section.is-collapsed .pl-top20-list,
.pl-top20-section.is-collapsed .pl-top20-zero-message { display: none !important; }
.pl-live-heart-count { display:inline-flex; align-items:center; gap:4px; color:#a51a24; font-size:11px; font-weight:800; white-space:nowrap; }
/* Single stable Play button on the right. */
#top20 .pl-top20-header-controls {
    position: relative;
    z-index: 4;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}
#top20 .pl-top20-header-controls #plPlayTop20 {
    position: relative;
    z-index: 4;
    margin: 0;
    white-space: nowrap;
}
@media screen and (max-width: 1050px) {
    #top20 .pl-top20-header-controls { width: 100%; }
    #top20 .pl-top20-header-controls #plPlayTop20 { width: 100%; }
}

/* Holiday 2026: selected hearts must remain legible in every state.
   Override the later holiday default button text color. */
body.pl-theme-holiday .pl-vote-button.is-hearted,
body.pl-theme-holiday .pl-vote-button.is-hearted:hover,
body.pl-theme-holiday .pl-vote-button.is-hearted:focus {
    background: var(--pl-maroon);
    border-color: var(--pl-holiday-champagne);
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(112, 24, 46, 0.22);
}
body.pl-theme-holiday .pl-vote-button.is-hearted i {
    color: #ffffff;
}