/* Redesigned-site stylesheet. Classic templates intentionally load styles.css
   instead, so layout, components and theme work can evolve independently. */
.my-radio[hidden], .my-radio [hidden], .my-radio-home-toggle[hidden] { display: none !important; }
.my-radio {
    margin: 28px 0;
    color: var(--color-text, #172a3a);
}
.my-radio-panel {
    padding: 22px;
    border: 1px solid var(--color-border, #dbe5ec);
    border-radius: 18px;
    background: linear-gradient(145deg, #f0f7fc, #fff 65%);
}
.my-radio-home-toggle { border: 1px solid var(--color-border, #dbe5ec); border-radius: 8px; background: var(--color-surface-soft, #f8fafc); color: var(--color-primary-dark, #1d527d); padding: 9px 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.my-radio-home-toggle:hover, .my-radio-home-toggle:focus-visible { color: #fff; background: var(--color-primary, #327bb1); }
.my-radio-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.my-radio-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.my-radio .my-radio-header h2 { margin: 4px 0 0; font-size: 26px; }
.my-radio .track-hero-eyebrow { margin: 0; }
.my-radio-manage, .my-radio-retry, .my-radio-toggle { font-size: 14px; font-weight: 700; }
.my-radio-manage, .my-radio-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border, #dbe5ec); border-radius: 8px; background: #fff; color: var(--color-primary-dark, #1d527d); padding: 9px 12px; cursor: pointer; text-decoration: none; }
.my-radio-manage:hover, .my-radio-manage:focus-visible, .my-radio-toggle:hover, .my-radio-toggle:focus-visible { color: #fff; background: var(--color-primary, #327bb1); }
.my-radio-status { margin: 12px 0 18px; color: var(--color-muted, #576979); font-size: 14px; line-height: 1.6; }
.my-radio progress { display: block; width: 100%; max-width: 320px; height: 8px; margin-bottom: 18px; accent-color: var(--color-primary, #327bb1); }
.my-radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.my-radio-card { min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--color-border, #dbe5ec); border-radius: 12px; }
.my-radio-stations { grid-column: 1 / -1; }
.my-radio .my-radio-card h3 { margin: 0 0 6px; font-size: 17px; }
.my-radio-card > p { margin: 0 0 12px; color: var(--color-muted, #576979); font-size: 13px; line-height: 1.5; }
.my-radio .my-radio-list { list-style: none; margin: 0; padding: 0; }
.my-radio-list > li + li { border-top: 1px solid var(--color-border, #dbe5ec); }
.my-radio-station-link { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.my-radio-rank { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #eaf3fa; color: var(--color-primary-dark, #1d527d); font-size: 13px; font-weight: 700; }
.my-radio-item-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.my-radio-item-text strong { font-size: 14px; line-height: 1.4; }
.my-radio-meta, .my-radio-plays { color: var(--color-muted, #576979); font-size: 12px; line-height: 1.5; }
.my-radio-plays { max-width: 125px; text-align: right; }
.my-radio-track { padding: 13px 0; }
.my-radio-track-link { display: flex; gap: 10px; align-items: center; }
.my-radio-track img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 7px; }
.my-radio-caption { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.my-radio-match { display: inline-block; margin-top: 5px; color: var(--color-muted, #576979); font-size: 11px; }
.my-radio-empty { padding: 12px 0; color: var(--color-muted, #576979); font-size: 13px; line-height: 1.6; }
.my-radio-explanation { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--color-muted, #576979); }
.my-radio-explanation summary { cursor: pointer; width: fit-content; }
.my-radio-explanation p { max-width: 75ch; }
.my-radio-retry { border: 1px solid var(--color-border, #dbe5ec); border-radius: 8px; background: #fff; color: var(--color-primary-dark, #1d527d); padding: 10px 14px; cursor: pointer; }
.my-radio a:focus-visible, .my-radio button:focus-visible, .my-radio summary:focus-visible { outline: 2px solid var(--color-primary, #327bb1); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 1100px) {
    .my-radio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .my-radio { margin: 22px 0; }
    .my-radio-panel { padding: 16px; }
    .my-radio-card { padding: 12px; }
    .my-radio-station-link { flex-wrap: wrap; gap: 8px; }
    .my-radio-plays { flex-basis: 100%; max-width: none; padding-left: 38px; text-align: left; }
}

.privacy-banner {
    position: fixed;
    z-index: 10000;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px;
    border: 1px solid var(--color-border, #dfe6ef);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 50px rgba(24, 34, 53, 0.22);
    color: var(--color-text, #182235);
}

.privacy-banner[hidden],
.privacy-modal[hidden],
.privacy-settings-button[hidden] { display: none !important; }

.privacy-banner-copy { max-width: 720px; }
.privacy-eyebrow { margin: 0 0 6px; color: var(--color-primary, #2f6fbd); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.privacy-banner h2, .privacy-modal h2 { margin: 0 0 8px; font-size: 1.25rem; }
.privacy-banner p:not(.privacy-eyebrow), .privacy-modal-dialog > p { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.privacy-banner-link { margin-top: 8px !important; }
.privacy-banner a, .privacy-modal a { color: var(--color-primary-dark, #205493); text-decoration: underline; }
.privacy-banner-actions, .privacy-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.privacy-button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--color-primary, #2f6fbd); border-radius: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.privacy-button-primary { background: var(--color-primary, #2f6fbd); color: #fff; }
.privacy-button-secondary { background: #fff; color: var(--color-primary-dark, #205493); }
.privacy-button:hover, .privacy-button:focus-visible { box-shadow: 0 0 0 3px rgba(47, 111, 189, 0.2); outline: none; }

.privacy-modal { position: fixed; z-index: 10001; inset: 0; display: grid; place-items: center; padding: 18px; }
.privacy-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 28, 44, 0.54); }
.privacy-modal-dialog { position: relative; width: min(620px, 100%); max-height: min(720px, calc(100vh - 36px)); overflow: auto; padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 22px 70px rgba(10, 20, 35, 0.3); color: var(--color-text, #182235); }
.privacy-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.privacy-modal-close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--color-surface-soft, #f8fafc); color: var(--color-text, #182235); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.privacy-choice { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 15px; border: 1px solid var(--color-border, #dfe6ef); border-radius: 12px; background: var(--color-surface-soft, #f8fafc); cursor: pointer; }
.privacy-choice > span, .privacy-choice > div { display: grid; gap: 4px; }
.privacy-choice strong { font-size: 0.95rem; }
.privacy-choice span span, .privacy-choice div span { color: var(--color-muted, #647084); font-size: 0.82rem; line-height: 1.5; }
.privacy-choice input { flex: 0 0 auto; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--color-primary, #2f6fbd); }
.privacy-choice input:disabled { opacity: 0.7; }
.privacy-modal-actions { margin-top: 20px; }
.privacy-settings-button { position: fixed; z-index: 9998; right: 16px; bottom: 16px; padding: 8px 11px; border: 1px solid var(--color-border, #dfe6ef); border-radius: 8px; background: rgba(255,255,255,0.96); color: var(--color-primary-dark, #205493); box-shadow: 0 5px 18px rgba(24, 34, 53, 0.12); font: inherit; font-size: 0.74rem; cursor: pointer; }
.privacy-settings-button:hover, .privacy-settings-button:focus-visible { border-color: var(--color-primary, #2f6fbd); outline: none; }
.new-design-page .new-site-footer .privacy-settings-button--footer,
.new-design-proxy .new-site-footer .privacy-settings-button--footer { position: static; align-self: flex-end; margin: 0; }
@media (max-width: 760px) {
    .new-design-page .new-site-footer .privacy-settings-button--footer,
    .new-design-proxy .new-site-footer .privacy-settings-button--footer { align-self: flex-start; margin-top: 4px; }
}

.consent-media-placeholder, .consent-audio-placeholder { display: grid; gap: 10px; place-items: center; min-height: 180px; padding: 22px; border: 1px solid var(--color-border, #dfe6ef); border-radius: 12px; background: var(--color-surface-soft, #f8fafc); color: var(--color-muted, #647084); text-align: center; }
.consent-media-placeholder p, .consent-audio-placeholder p { max-width: 42ch; margin: 0; line-height: 1.5; }
.consent-media-button { padding: 9px 14px; border: 1px solid var(--color-primary, #2f6fbd); border-radius: 8px; background: #fff; color: var(--color-primary-dark, #205493); font: inherit; font-weight: 700; cursor: pointer; }
.consent-media-button:hover, .consent-media-button:focus-visible { background: var(--color-primary, #2f6fbd); color: #fff; outline: none; }
.consent-audio[hidden], .consent-audio audio[hidden] { display: none !important; }

@media (max-width: 760px) {
    .privacy-banner { display: block; right: 10px; bottom: 10px; left: 10px; padding: 18px; }
    .privacy-banner-actions, .privacy-modal-actions { justify-content: stretch; margin-top: 16px; }
    .privacy-banner-actions .privacy-button, .privacy-modal-actions .privacy-button { flex: 1 1 100%; }
    .privacy-modal-dialog { padding: 20px; }
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.spa-loading-indicator {
    position: fixed;
    z-index: 10002;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.spa-loading-indicator[hidden] {
    display: none;
}

.spa-loading-indicator__content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px 10px 11px;
    border: 1px solid rgba(47, 111, 189, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(24, 42, 68, 0.16);
    color: var(--color-text, #182235);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.spa-loading-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #d4deea;
    border-top-color: var(--color-primary, #2f6fbd);
    border-radius: 50%;
    animation: spa-loading-spin 700ms linear infinite;
}

@keyframes spa-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spa-loading-spinner { animation-duration: 1.4s; }
}

@media (max-width: 600px) {
    .spa-loading-indicator { top: 12px; }
}

a {
    text-decoration: none;
}

.menu {
    background-color: #333;
    color: white;
}

.menu a {
    text-decoration: none;
    color: #fff;
}

.menu ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu ul li {
    flex: 1;
    text-align: center;
    padding: 10px 0;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.station-box {
    width: 90%;
    background-color: #ddd;
    padding: 8px;
    border-radius: 15px;
    border: 2px solid #aaa;
}

.content {
    display: flex;
    padding-top: 0px;
}

.content a {
    color: #000;
}

.year-releases {
    padding: 20px;
}

.artists-list {
    padding: 20px;
    width: 100%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.artist-search-hero {
    max-width: 760px;
    margin: 28px auto 22px;
    text-align: center;
}

.artist-search-eyebrow {
    margin: 0 0 7px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.artist-search-hero h1 {
    margin-bottom: 10px;
}

.artist-search-intro {
    max-width: 610px;
    margin: 0 auto 24px;
    color: var(--color-muted);
    font-size: 1.04rem;
}

.artist-search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 650px;
    margin: 0 auto;
}

.artist-search-box input {
    width: 100%;
    height: 58px;
    padding: 0 54px;
    border: 2px solid #cbd7e5;
    border-radius: 16px;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 10px 28px rgba(25, 47, 76, 0.09);
    font: inherit;
    font-size: 1.05rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.artist-search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(47, 111, 189, 0.15), 0 0 0 4px rgba(47, 111, 189, 0.1);
    outline: none;
}

.artist-search-icon {
    position: absolute;
    left: 20px;
    z-index: 1;
    width: 18px;
    height: 18px;
    border: 2px solid #6c7d92;
    border-radius: 50%;
    pointer-events: none;
}

.artist-search-icon::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: #6c7d92;
    transform: rotate(45deg);
}

.artist-search-spinner {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #d4deea;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: artist-search-spin 650ms linear infinite;
}

@keyframes artist-search-spin {
    to { transform: rotate(360deg); }
}

.artist-search-hint,
.artist-search-status {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.artist-search-hint {
    margin: 10px 0 0;
}

.artist-search-status {
    min-height: 24px;
    max-width: 920px;
    margin: 4px auto 8px;
}

.artist-search-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 920px;
    margin: 0 auto 30px;
}

.popular-artists {
    max-width: 920px;
    margin: 0 auto 32px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff 0%, #f4f8fc 100%);
    box-shadow: 0 8px 22px rgba(24, 42, 68, 0.06);
}

.popular-artists-header {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.popular-artists-header p {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.popular-artists-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.popular-artists-header span {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.popular-artists-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.popular-artists-grid li { min-width: 0; }

.popular-artists-grid a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    color: #fff;
    background: #e3eaf1;
    aspect-ratio: 0.88;
    box-shadow: 0 3px 10px rgba(24, 42, 68, 0.08);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.popular-artists-grid a:hover,
.popular-artists-grid a:focus-visible {
    box-shadow: 0 9px 20px rgba(24, 52, 84, 0.18);
    color: #fff;
    transform: translateY(-2px);
}

.popular-artists-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-artists-card-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 2px;
    padding: 34px 9px 9px;
    background: linear-gradient(to bottom, transparent, rgba(5, 15, 28, 0.94));
}

.popular-artists-card-content small,
.popular-artists-card-content em {
    color: #dfeeff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
}

.popular-artists-card-content strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.artist-result-card {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(24, 42, 68, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.artist-result-card:hover,
.artist-result-card:focus-visible {
    border-color: #b7cbe1;
    box-shadow: 0 10px 24px rgba(28, 53, 84, 0.11);
    color: inherit;
    transform: translateY(-2px);
}

.artist-result-image {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    margin-right: 14px;
    border-radius: 12px;
    background: #e5ebf2;
    object-fit: cover;
}

.artist-main-image {
    border-radius: 15px;
}

.artist-result-content,
.artist-result-heading,
.artist-result-description {
    display: block;
    min-width: 0;
}

.artist-result-name {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-result-type {
    display: block;
    margin-top: 1px;
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
}

.artist-result-description {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.artist-result-arrow {
    margin-left: auto;
    padding-left: 12px;
    color: var(--color-primary);
    font-size: 1.2rem;
    transition: transform 150ms ease;
}

.artist-result-card:hover .artist-result-arrow,
.artist-result-card:focus-visible .artist-result-arrow {
    transform: translateX(3px);
}

.played-on {
    margin-top: 26px;
    padding-top: 5px;
}

.played-on-header {
    margin-bottom: 13px;
}

.played-on-eyebrow {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.played-on-header h2 {
    margin: 0 0 5px;
    font-size: 1.35rem;
}

.played-on-header h2 + p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.86rem;
}

.played-on-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.played-on-summary span {
    padding: 4px 8px;
    border: 1px solid #d5e2ef;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #f3f8fd;
    font-size: 0.68rem;
    font-weight: 800;
}

.played-on-list {
    display: grid;
    gap: 8px;
}

.played-on-list:not(.is-expanded) .played-on-extra {
    display: none;
}

.played-on-day-label {
    display: flex;
    margin: 10px 0 1px;
    align-items: center;
    gap: 9px;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.played-on-day-label:first-child { margin-top: 0; }

.played-on-day-label::after {
    height: 1px;
    flex: 1;
    background: var(--color-border);
    content: '';
}

.played-on-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.played-on-item:hover,
.played-on-item:focus-visible {
    border-color: #b9cce1;
    box-shadow: 0 6px 17px rgba(26, 49, 78, 0.09);
    color: inherit;
    transform: translateX(2px);
}

.played-on-item.is-latest {
    border-color: #9fc6b8;
    background: linear-gradient(135deg, #fff, #f1fbf7);
}

.played-on-station-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.played-on-station-icon::before,
.played-on-station-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.played-on-station-icon::before {
    width: 9px;
    height: 18px;
}

.played-on-station-icon::after {
    width: 19px;
    height: 27px;
}

.played-on-details {
    display: block;
    min-width: 0;
}

.played-on-details strong,
.played-on-details time {
    display: block;
}

.played-on-details strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.played-on-isrc {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.played-on-details time {
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.played-on-repeat {
    display: block;
    margin-top: 4px;
    color: #63758a;
    font-size: 0.68rem;
    line-height: 1.3;
}

.played-on-latest-label {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #1d674f;
    background: #dff5eb;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.played-on-arrow {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 1.15rem;
    transition: transform 150ms ease;
}

.played-on-item:hover .played-on-arrow,
.played-on-item:focus-visible .played-on-arrow {
    transform: translateX(3px);
}

.played-on-toggle {
    width: 100%;
    margin-top: 11px;
    padding: 9px 12px;
    border: 1px solid #cbd8e6;
    border-radius: 9px;
    color: var(--color-primary-dark);
    background: #f7fafd;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
}

.played-on-toggle:hover,
.played-on-toggle:focus-visible {
    border-color: var(--color-primary);
    background: #edf5fd;
}

.artist-recent-plays {
    margin-top: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}

.artist-recent-plays .played-on-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .artist-recent-plays .played-on-list {
        grid-template-columns: 1fr;
    }
}

.artist-played-on-image {
    display: block;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 9px;
    object-fit: cover;
}

.artist-played-on-item:hover,
.artist-played-on-item:focus-within {
    border-color: #b9cce1;
    box-shadow: 0 6px 17px rgba(26, 49, 78, 0.09);
    transform: translateX(2px);
}

.artist-played-on-item .played-on-details {
    flex: 1;
}

.artist-played-on-item .played-on-details a {
    color: inherit;
}

.artist-played-on-item .played-on-details a:hover,
.artist-played-on-item .played-on-details a:focus-visible {
    color: var(--color-primary);
}

.playlist-track-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid #d8e2ed;
    border-radius: 999px;
    color: #526175;
    background: #f4f7fb;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.playlist-track-time::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #fff;
}

.playlist-track-time span {
    color: #8490a0;
}

.playlist-date-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 26px;
    margin-bottom: 25px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #f4f8fc);
    box-shadow: 0 6px 20px rgba(24, 42, 68, 0.07);
}

.playlist-date-heading {
    flex: 1 1 230px;
    min-width: 0;
}

.playlist-date-controls {
    flex: 1 1 290px;
    min-width: 0;
}

.playlist-date-eyebrow {
    margin: 0 0 4px !important;
    color: var(--color-primary) !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.playlist-date-picker h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.playlist-date-heading > p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.87rem;
}

.playlist-date-label {
    display: block;
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.playlist-date-navigation {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
}

.playlist-date-step {
    display: grid;
    height: 48px;
    padding: 0;
    place-items: center;
    border: 1px solid #cbd7e4;
    border-radius: 10px;
    color: var(--color-primary-dark);
    background: #fff;
    font: inherit;
    font-size: 1.25rem;
}

.playlist-date-step:hover,
.playlist-date-step:focus-visible {
    border-color: var(--color-primary);
    background: #eaf2fb;
}

.playlist-date-step:disabled {
    border-color: var(--color-border);
    color: #99a4b3;
    background: #f0f3f7;
    cursor: not-allowed;
}

.playlist-date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.playlist-date-shortcuts a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #cbd7e4;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.8rem;
    font-weight: 750;
}

.playlist-date-shortcuts a:hover,
.playlist-date-shortcuts a:focus-visible {
    border-color: var(--color-primary);
    background: #eaf2fb;
}

.playlist-date-shortcuts a[aria-current="date"] {
    border-color: var(--color-primary-dark);
    color: #fff;
    background: var(--color-primary-dark);
}

.playlist-date-input-wrap {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
}

.playlist-date-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 34px;
    border: 2px solid #cbd7e4;
    border-radius: 11px;
    color: var(--color-text);
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.playlist-date-input-wrap input:hover {
    border-color: #aebfd2;
}

.playlist-date-input-wrap input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(47, 111, 189, 0.1);
    outline: none;
}

.playlist-date-icon {
    position: absolute;
    left: 10px;
    z-index: 1;
    width: 17px;
    height: 16px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    pointer-events: none;
}

.playlist-date-icon::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    left: 0;
    border-top: 2px solid var(--color-primary);
}

.playlist-date-icon::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 3px;
    width: 7px;
    height: 4px;
    border-right: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
}

.playlist-date-chevron {
    position: absolute;
    right: 11px;
    color: #6c7a8c;
    font-size: 1.15rem;
    pointer-events: none;
}

@media (max-width: 600px) {
    .playlist-date-picker {
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .playlist-date-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .playlist-date-input-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

.ui-datepicker.ui-widget {
    box-sizing: border-box;
    width: min(320px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid #cdd9e6;
    border-radius: 14px;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 18px 45px rgba(17, 35, 58, 0.2);
    font-family: inherit;
}

.ui-datepicker .ui-datepicker-header {
    padding: 8px 5px 12px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 36px;
}

.ui-datepicker .ui-datepicker-title select {
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    color: #fff;
    background: rgba(18, 47, 82, 0.5);
    font: inherit;
    font-size: 0.82rem;
}

.ui-datepicker .ui-datepicker-title select option {
    color: var(--color-text);
    background: #fff;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 8px;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
}

.ui-datepicker .ui-datepicker-prev { left: 7px; }
.ui-datepicker .ui-datepicker-next { right: 7px; }
.ui-datepicker .ui-datepicker-prev-hover { left: 7px; }
.ui-datepicker .ui-datepicker-next-hover { right: 7px; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -4px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    background: none;
    transform: rotate(-45deg);
}

.ui-datepicker .ui-datepicker-next span {
    margin-left: -6px;
    transform: rotate(135deg);
}

.ui-datepicker table {
    margin: 8px 0 4px;
    font-size: 0.82rem;
}

.ui-datepicker th {
    padding: 7px 2px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0 !important;
    border-radius: 9px;
    text-align: center;
}

.ui-datepicker td a.ui-state-default {
    color: var(--color-text);
    background: transparent;
}

.ui-datepicker td a.ui-state-default:hover {
    color: var(--color-primary-dark);
    background: #e8f1fb;
}

.ui-datepicker td a.ui-state-highlight {
    color: var(--color-primary-dark);
    background: #e5effa;
    font-weight: 800;
}

.ui-datepicker td a.ui-state-active {
    color: #fff;
    background: var(--color-primary);
    font-weight: 800;
}

.ui-datepicker td.ui-state-disabled span {
    color: #bbc3ce;
    background: transparent;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 7px 0 0;
    padding: 8px 3px 1px;
    border-top: 1px solid var(--color-border);
}

.ui-datepicker .ui-datepicker-buttonpane button {
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #cbd7e4;
    border-radius: 7px;
    color: var(--color-primary-dark);
    background: #f5f8fb;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .artist-search-results {
        grid-template-columns: 1fr;
    }

    .artist-search-box input {
        height: 54px;
        font-size: 1rem;
    }

    .artist-result-image {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .popular-artists {
        padding: 16px;
    }

    .popular-artists-header {
        flex-wrap: wrap;
        gap: 3px 10px;
    }

    .popular-artists-header p {
        width: 100%;
    }

    .popular-artists-header span {
        margin-left: auto;
    }

    .popular-artists-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }
}

.new-tracks {
    padding: 20px;
    width: 100%;
}

.new-tracks-page { display: block; }

.new-tracks-header {
    max-width: 760px;
    margin-bottom: 24px;
}

.new-tracks-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.new-tracks-header h1 { margin-bottom: 10px; }

.new-tracks-header > p:last-child {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.new-tracks-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 30px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.new-tracks-filters label span {
    display: block;
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.new-tracks-filters select,
.new-tracks-filters button {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font: inherit;
}

.new-tracks-filters select {
    padding: 0 34px 0 11px;
    background: #fff;
}

.new-tracks-filters button {
    padding: 0 17px;
    border-color: var(--color-primary-dark);
    color: #fff;
    background: var(--color-primary-dark);
    cursor: pointer;
    font-weight: 800;
}

.new-tracks-day + .new-tracks-day { margin-top: 32px; }

.new-tracks-day > h2 {
    margin: 0 0 13px;
    font-size: 1.1rem;
}

.new-tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 13px;
}

.new-track-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(24, 42, 68, 0.07);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.new-track-card:hover,
.new-track-card:focus-within {
    border-color: #aac5e0;
    box-shadow: 0 8px 20px rgba(24, 52, 84, 0.13);
    transform: translateY(-2px);
}

.new-track-card > a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.new-track-card img {
    width: 96px;
    height: 100%;
    min-height: 142px;
    object-fit: cover;
}

.new-track-card-content {
    min-width: 0;
    padding: 11px 12px;
}

.new-track-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #185a43;
    background: #dff5eb;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.new-track-card h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.94rem;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.new-track-artist,
.new-track-first-seen,
.new-track-stats { margin: 4px 0 0; }

.new-track-artist {
    overflow: hidden;
    color: #344256;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-track-first-seen {
    color: var(--color-muted);
    font-size: 0.7rem;
}

.new-track-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    color: var(--color-primary-dark);
    font-size: 0.71rem;
    font-weight: 750;
}

.new-tracks-empty {
    padding: 34px;
    border: 1px dashed #bdcad8;
    border-radius: 12px;
    text-align: center;
    background: var(--color-surface-soft);
}

.new-tracks-empty h2 { margin-top: 0; }

.genre-list {
    padding: 20px;
    width: 100%;
}

.left-content, .right-content {
    padding: 20px;
}

.left-content {
    width: 75%;
    background-color: #f4f4f4;
}

.right-content {
    width: 25%;
    background-color: #e4e4e4;
}

.radio-stations .station, .latest-songs .song {
    margin-bottom: 20px;
}

.radio-stations .station h2, .latest-songs .song h3 {
    margin: 10px 0;
}

.song .details p {
    padding: 2px;
}

.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

.footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer ul li {
    margin: 10px 10px;
}

.footer a {
    text-decoration: none;
    color: #fff;
}

.footer ul li a {
    color: white;
    text-decoration: none;
}

.cover-image {
    float:left  !important;
    margin-right: 5px  !important;
    width: 125px !important;
    height: 125px !important;
    border-radius: 15px;
    border: 2px solid #222;
  }

  .cover-mini {
    float:left  !important;
    margin-right: 5px  !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 15px;
    border: 2px solid #222;
    margin: 5px;
  }

  .cover-mini-year {
    float:left  !important;
    margin-right: 5px  !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 15px;
    border: 2px solid #222;
    margin: 5px;
  }

  .song-info img {
    border-radius: 15px;
    border: 2px solid #222;   
  }

  .spotify-button {
    border-radius: 0px !important;
    border: 0px !important;   
  }

#scrollTopBtn {
    position: fixed;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
    left: 16px;
    right: auto;
    z-index: 999;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    display: none; /* hidden by default */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s, background-color 0.3s;
    }

#scrollTopBtn:hover {
  background-color: #555;
}

#scrollTopBtn.show {
  display: block;
  opacity: 1;
}

.chart-container {
      width: 80%;
      margin: 20px auto;
}

.hour-plays {
    margin-top: 28px;
    padding-top: 6px;
}

.chart-explanation {
    margin: 0;
    color: #647084;
    font-size: 0.92rem;
}

.hourly-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -8px 0 16px;
}

.hourly-chart-container {
    position: relative;
    width: 100%;
    height: 360px;
    padding: 18px 14px 10px;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(24, 42, 68, 0.07);
}

@media (max-width: 600px) {
    .hourly-chart-header {
        display: block;
    }

    .hourly-chart-header .plays-chart-reset {
        margin-top: 10px;
    }

    .hourly-chart-container {
        height: 310px;
        padding: 12px 6px 8px;
    }
}

.plays-chart-section {
    margin-top: 32px;
    padding: 22px;
    border: 1px solid #e2e7ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 10px 30px rgba(28, 45, 70, 0.08);
}

.plays-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.plays-chart-header h2 {
    margin: 0 0 5px;
}

.plays-chart-header p,
.plays-chart-message {
    margin: 0;
    color: #657184;
    font-size: 0.9rem;
}

.plays-chart {
    width: 100%;
    height: 430px;
    margin-top: 12px;
}

.plays-chart-reset {
    padding: 8px 12px;
    border: 1px solid #c9d3df;
    border-radius: 8px;
    background: #fff;
    color: #34445a;
    cursor: pointer;
    white-space: nowrap;
}

.plays-chart-reset:hover {
    border-color: #3978c5;
    color: #245eaa;
}

.top-33-history-section {
    margin-top: 26px;
    overflow: hidden;
    padding: 0;
    position: relative;
    border: 1px solid #e2e7ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(28, 45, 70, 0.07);
}

.top-33-history-section::before {
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #205493 0%, #3978c5 55%, #f29b38 100%);
    content: '';
}

.tip-33-history-section::before {
    background: linear-gradient(90deg, #8e3d1d 0%, #cf6b2a 55%, #f2aa38 100%);
}

.tip-33-history-section .top-33-history-header {
    background: linear-gradient(135deg, #fff3eb 0%, #fff 78%);
}

.tip-33-history-eyebrow {
    color: #af5423;
}

.tip-33-history-section .top-33-history-summary > span {
    border-left-color: #cf6b2a;
    background: #fff7f1;
}

.tip-33-history-section .top-33-history-summary > span:nth-child(2) {
    border-left-color: #f2aa38;
}

.top-33-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 17px;
    border-bottom: 1px solid #e6ebf1;
    background: linear-gradient(135deg, #eef5fd 0%, #fff 78%);
}

.top-33-history-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.top-33-history-header h2 {
    margin: 0 0 5px;
}

.top-33-history-header p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.top-33-history-country {
    display: grid;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 150px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.top-33-history-country select {
    min-width: 150px;
    padding: 9px 10px;
    border: 1px solid #c9d3df;
    border-radius: 9px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
}

.top-33-history-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 22px 0;
}

.top-33-history-summary > span {
    display: grid;
    flex: 1 1 150px;
    position: relative;
    gap: 3px;
    min-width: 0;
    min-height: 65px;
    padding: 10px 13px;
    border-left: 3px solid #3978c5;
    border-radius: 8px;
    background: #f5f8fc;
}

.top-33-history-summary > span:nth-child(2) {
    border-left-color: #f29b38;
}

.top-33-history-summary small {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.top-33-history-summary strong {
    color: var(--color-primary-dark);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.top-33-history-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
    margin: 14px 22px 0;
    padding: 9px 12px;
    border: 1px solid #e5ebf2;
    border-radius: 9px;
    background: #fafbfd;
    color: var(--color-muted);
    font-size: 0.74rem;
}

.top-33-history-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid #e2e8ef;
    border-radius: 999px;
    background: #fff;
}

.top-33-history-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f29b38;
}

.top-33-history-legend i.is-peak { background: #3978c5; }
.top-33-history-legend i.is-departure { background: #c94b4b; }
.top-33-history-legend i.is-reentry { background: #7c55b8; }
.top-33-history-legend .top-33-history-legend-line i { width: 16px; height: 3px; border-radius: 99px; background: #3978c5; }

.top-33-history-chart-shell {
    margin: 12px 22px 22px;
    overflow: hidden;
    border: 1px solid #e5ebf2;
    border-radius: 11px;
    background: #fff;
}

.top-33-history-chart-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #edf1f5;
    background: #fafbfd;
}

.top-33-history-chart-caption strong {
    color: #34445a;
    font-size: 0.82rem;
}

.top-33-history-chart-caption span {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.top-33-history-chart {
    width: 100%;
    height: 400px;
}

.top-33-history-chart[hidden],
.top-33-history-message[hidden] {
    display: none;
}

.top-33-history-message {
    margin: 14px 22px 22px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #f5f8fc;
    color: var(--color-muted);
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .plays-chart-section {
        padding: 15px 10px;
    }

    .plays-chart-header {
        display: block;
        padding: 0 8px;
    }

    .plays-chart-reset {
        margin-top: 12px;
    }

    .plays-chart {
        height: 360px;
    }

    .top-33-history-section {
        border-radius: 12px;
    }

    .top-33-history-header {
        display: block;
        padding: 16px;
    }

    .top-33-history-country {
        margin-top: 14px;
        min-width: 0;
    }

    .top-33-history-country select {
        width: 100%;
    }

    .top-33-history-summary {
        margin: 13px 16px 0;
    }

    .top-33-history-summary > span {
        flex-basis: calc(50% - 5px);
        padding: 9px 10px;
    }

    .top-33-history-legend {
        gap: 7px 10px;
        margin: 12px 16px 0;
        padding: 8px 10px;
    }

    .top-33-history-chart-shell {
        margin: 10px 10px 16px;
    }

    .top-33-history-chart-caption {
        padding: 10px 11px 8px;
    }

    .top-33-history-chart {
        height: 340px;
    }

    .top-33-history-message {
        margin: 12px 16px 16px;
    }
}

/* Shared visual system and responsive layout */
:root {
    --color-primary: #2f6fbd;
    --color-primary-dark: #205493;
    --color-text: #182235;
    --color-muted: #647084;
    --color-page: #f3f6fa;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-border: #dfe6ef;
    --radius-small: 9px;
    --radius: 15px;
    --shadow: 0 8px 26px rgba(24, 42, 68, 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    color: var(--color-text);
    background: var(--color-page);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

body.sidebar-open {
    overflow: visible;
}

h1,
h2,
h3 {
    line-height: 1.2;
    text-wrap: balance;
}

h1 {
    margin-top: 0;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
}

h2 {
    margin-top: 1.5em;
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

a {
    color: var(--color-primary-dark);
    transition: color 160ms ease;
}

a:hover {
    color: var(--color-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(47, 111, 189, 0.35);
    outline-offset: 3px;
}

.header {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    height: 88px;
    padding: 0 max(20px, calc((100vw - 1500px) / 2 + 20px));
    color: #fff;
    background-color: #182538;
    background-image: linear-gradient(125deg, rgba(24, 37, 56, 0.72) 0%, rgba(47, 111, 189, 0.68) 60%, rgba(88, 160, 216, 0.7) 100%), url('/images/site/header-background.jpg');
    background-position: center;
    background-size: cover;
}

.site-logo {
    display: inline-flex;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
}

.site-logo:hover,
.site-logo:focus-visible {
    color: #fff;
}

.site-logo__mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #dff4ff;
    filter: drop-shadow(0 3px 8px rgba(4, 19, 38, 0.22));
}

.site-logo__name {
    display: inline-flex;
    align-items: baseline;
    gap: 0.34em;
    color: #fff;
    font-size: clamp(1.15rem, 2.5vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
}

.site-logo__name strong {
    color: #e5f7ff;
    font-weight: 850;
}

.hamburger-menu {
    position: absolute;
    top: 50%;
    left: max(20px, calc((100vw - 1500px) / 2 + 20px));
    z-index: 1101;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font: inherit;
    font-size: 1.45rem;
    transform: translateY(-50%);
}

.hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hamburger-menu__bars {
    display: grid;
    width: 20px;
    gap: 4px;
}

.hamburger-menu__bars span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu__bars span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-search-trigger {
    position: absolute;
    top: 50%;
    right: max(20px, calc((100vw - 1500px) / 2 + 20px));
    z-index: 1101;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font: inherit;
    transform: translateY(-50%);
}

.site-search-trigger:hover {
    background: rgba(255, 255, 255, 0.22);
}

.site-search-trigger-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.site-search-trigger-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.site-search-open {
    overflow: hidden;
}

.full-search-page {
    max-width: 920px;
}

.full-search-header {
    margin-bottom: 18px;
}

.full-search-header h1 {
    margin: 0;
}

.full-search-query {
    margin: 8px 0 0;
    color: var(--color-muted);
}

.full-search-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.full-search-sections a {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.full-search-sections a:hover,
.full-search-sections a:focus-visible,
.full-search-sections a[aria-current="page"] {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary);
}

.full-search-status {
    min-height: 1.4em;
    margin: 0 0 10px;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.full-search-results {
    max-width: 920px;
}

.site-search-modal[hidden] {
    display: none;
}

.site-search-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: start center;
    padding: clamp(88px, 13vh, 138px) 16px 24px;
}

.site-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 34, 0.65);
    backdrop-filter: blur(3px);
}

.site-search-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(720px, calc(100vh - 112px));
    padding: 22px;
    overflow: auto;
    border: 1px solid rgba(223, 230, 239, 0.9);
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: 0 24px 70px rgba(5, 18, 35, 0.32);
}

.site-search-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.site-search-eyebrow {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-search-dialog h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.site-search-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #cbd7e5;
    border-radius: 10px;
    color: var(--color-primary-dark);
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
}

.site-search-close:hover {
    border-color: var(--color-primary);
    background: #edf5fd;
}

.site-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-top: 20px;
}

.site-search-form input,
.site-search-form button {
    min-height: 46px;
    border-radius: 10px;
    font: inherit;
}

.site-search-form input {
    width: 100%;
    padding: 0 13px;
    border: 1px solid #cbd7e5;
    color: var(--color-text);
    background: #fff;
}

.site-search-form input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(47, 111, 189, 0.12);
}

.site-search-form button {
    padding: 0 19px;
    border: 1px solid var(--color-primary-dark);
    color: #fff;
    background: var(--color-primary-dark);
    cursor: pointer;
    font-weight: 750;
}

.site-search-form button:hover {
    background: var(--color-primary);
}

.site-search-status {
    min-height: 1.4em;
    margin: 12px 0 3px;
    color: var(--color-muted);
    font-size: 0.86rem;
}

.site-search-result-group + .site-search-result-group {
    margin-top: 20px;
}

.site-search-result-group h3 {
    margin: 0 0 8px;
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.site-search-result-list {
    display: grid;
    gap: 8px;
}

.site-search-more {
    display: inline-block;
    margin-top: 9px;
    color: var(--color-primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.site-search-more:hover,
.site-search-more:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.site-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: inherit;
    background: #fff;
    box-shadow: 0 3px 10px rgba(24, 42, 68, 0.04);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.site-search-result:hover,
.site-search-result:focus-visible {
    border-color: #b7cbe1;
    color: inherit;
    box-shadow: 0 8px 20px rgba(28, 53, 84, 0.1);
    transform: translateY(-1px);
}

.site-search-result img {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 10px;
    object-fit: cover;
}

.site-search-result-station-icon {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    color: var(--color-primary-dark);
    background: #eaf3fb;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.site-search-result-genre-icon {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    color: #6a4a8c;
    background: #f4edfa;
    font-size: 1.35rem;
    font-weight: 850;
}

.site-search-result-content {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.site-search-result-title,
.site-search-result-meta,
.site-search-result-description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-search-result-title {
    color: var(--color-text);
    font-size: 0.95rem;
    white-space: nowrap;
}

.site-search-result-meta {
    margin-top: 2px;
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.site-search-result-country {
    width: fit-content;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    background: #edf5fb;
}

.site-search-result-description {
    display: -webkit-box;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-search-result-arrow {
    margin-left: auto;
    padding-left: 8px;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.menu {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #182538;
    box-shadow: 0 4px 14px rgba(15, 28, 45, 0.16);
}

.menu ul {
    max-width: 1500px;
    margin: 0 auto;
}

.menu ul li {
    padding: 0;
}

.menu a {
    display: block;
    padding: 13px 12px;
    font-weight: 650;
    white-space: nowrap;
}

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar {
    position: absolute;
    inset: 0 auto auto 0;
    left: -380px;
    z-index: 1100;
    width: min(330px, 88vw);
    height: auto;
    min-height: 100vh;
    padding: 92px 24px 30px;
    overflow: visible;
    border-radius: 0 22px 22px 0;
    background: #182538;
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
    transition: left 220ms ease, visibility 0s linear 220ms;
}

.sidebar.is-open {
    left: 0;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 16px 0 40px rgba(8, 18, 32, 0.28);
    transition-delay: 0s;
}

.sidebar ul li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar a {
    display: inline-block;
    padding: 11px 2px;
    color: #fff;
}

.sidebar .station-country-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 5px;
    border-bottom: 0;
    color: #91cef5;
}

.sidebar .station-country-divider:first-child {
    margin-top: 0;
}

.sidebar .station-country-divider::after {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    content: "";
}

.sidebar .station-country-divider span {
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebar .station-navigation-item a {
    width: 100%;
}

.sidebar .station-navigation-item a[aria-current="page"] {
    color: #91cef5;
    font-weight: 800;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(10, 20, 34, 0.56);
    opacity: 0;
    cursor: default;
    transition: opacity 220ms ease;
}

.sidebar-overlay.is-visible {
    display: block;
    opacity: 1;
}

.now-playing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-soft);
}

.now-playing-toolbar p {
    margin: 0;
    color: var(--color-muted);
    font-size: .82rem;
}

.now-playing-toolbar button {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.now-playing-toolbar button:hover,
.now-playing-toolbar button:focus-visible {
    color: #fff;
    background: var(--color-primary);
}

.now-playing-toolbar button:disabled,
.playlist-button:disabled,
.my-playlist-play:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.homepage-toolbar-row {
    --homepage-control-height: 53px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

.homepage-toolbar-row > .my-radio,
.homepage-toolbar-row > .homepage-station-filter {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin: 0;
}

.homepage-toolbar-row > .now-playing-toolbar { order: 1; }
.homepage-toolbar-row > .my-radio { order: 2; }
.homepage-toolbar-row > .homepage-station-filter { order: 3; }

.homepage-toolbar-row > .my-radio.is-expanded,
.homepage-toolbar-row > .homepage-station-filter.is-expanded {
    order: 4;
    flex-basis: 100%;
}

.homepage-toolbar-row > .my-radio.is-expanded .my-radio-panel,
.homepage-toolbar-row > .homepage-station-filter.is-expanded .station-filter-panel {
    box-sizing: border-box;
    width: 100%;
}

.homepage-toolbar-row > .now-playing-toolbar {
    flex: 1 1 320px;
    min-width: 280px;
    min-height: var(--homepage-control-height);
    box-sizing: border-box;
    margin: 0;
}

.homepage-toolbar-row .my-radio-home-toggle,
.homepage-toolbar-row .station-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 172px;
    min-height: var(--homepage-control-height);
    padding: 0 15px;
    border: 1px solid #b8c9d9;
    border-radius: 10px;
    color: var(--color-primary-dark);
    background: #fff;
    box-shadow: 0 3px 9px rgba(30, 56, 88, .12);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.homepage-toolbar-row .my-radio-home-toggle:hover,
.homepage-toolbar-row .my-radio-home-toggle:focus-visible,
.homepage-toolbar-row .station-filter-toggle:hover,
.homepage-toolbar-row .station-filter-toggle:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    background: #f4f9fd;
    box-shadow: 0 5px 13px rgba(30, 56, 88, .18);
    outline: none;
    transform: translateY(-1px);
}

.my-radio-header-actions,
.station-filter-actions {
    margin-left: auto;
    justify-content: flex-end;
}

.my-radio-header-actions .my-radio-manage,
.station-filter-actions [data-station-filter-reset] {
    order: 1;
}

.my-radio-header-actions [data-radio-close],
.station-filter-actions [data-station-filter-close] {
    order: 2;
}

.homepage-station-filter {
    margin: 22px 0 8px;
}

.station-filter-panel {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #f0f7fc, #fff 72%);
}

.homepage-station-filter[hidden],
.station-filter-panel[hidden],
.station-card[hidden],
.station-filter-empty[hidden] {
    display: none !important;
}

.station-filter-toggle,
.station-filter-close {
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: var(--color-surface-soft);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.station-filter-toggle[hidden],
.station-filter-close[hidden] {
    display: none !important;
}

.station-filter-toggle:hover,
.station-filter-toggle:focus-visible,
.station-filter-close:hover,
.station-filter-close:focus-visible {
    color: #fff;
    background: var(--color-primary);
}

.station-filter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.station-filter-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.station-filter-header h2 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 1.25rem;
}

.station-filter-description {
    max-width: 66ch;
    margin: 0;
    color: var(--color-muted);
    font-size: .86rem;
    line-height: 1.55;
}

.station-filter-reset,
.station-filter-empty button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.station-filter-reset:hover,
.station-filter-reset:focus-visible,
.station-filter-empty button:hover,
.station-filter-empty button:focus-visible {
    color: #fff;
    background: var(--color-primary);
}

.station-filter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.station-filter-status {
    margin: 16px 0 0;
    color: var(--color-muted);
    font-size: .8rem;
}

.station-filter-country-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.station-filter-country {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
}

.station-filter-country summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    color: var(--color-primary-dark);
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.station-filter-country summary::-webkit-details-marker { display: none; }
.station-filter-country summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; border-radius: 9px; }
.station-filter-country-chevron { font-size: 1rem; transition: transform 150ms ease; }
.station-filter-country[open] .station-filter-country-chevron { transform: rotate(180deg); }
.station-filter-country-heading { min-width: 0; }
.station-filter-country-name { display: inline-block; }
.station-filter-country-count { margin-left: 5px; color: var(--color-muted); font-size: .72rem; font-weight: 700; }

.station-filter-country-options {
    padding: 0 12px 12px;
    border-top: 1px solid var(--color-border);
}

.station-filter-station-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    color: var(--color-text);
    font-size: .8rem;
    line-height: 1.35;
    cursor: pointer;
}

.station-filter-station-option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
}

.station-filter-country-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 0;
}

.station-filter-country-action {
    flex: 1 1 120px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    color: var(--color-primary-dark);
    background: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.station-filter-country-action:hover:not(:disabled),
.station-filter-country-action:focus-visible {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary);
    outline: none;
}

.station-filter-country-action:disabled {
    cursor: default;
    opacity: .5;
}

.station-filter-stations {
    max-height: 190px;
    overflow-y: auto;
    border-top: 1px dashed var(--color-border);
}

.station-filter-empty {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    color: var(--color-muted);
    font-size: .88rem;
    text-align: center;
}

.station-filter-empty button { margin-left: 5px; }

.content {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 20px 42px;
    background-color: #e5f0f9;
    background-image: url('/images/site/content-background.jpg');
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}

.content > :only-child {
    grid-column: 1 / -1;
}

.content a {
    color: inherit;
}

.left-content,
.right-content {
    width: auto;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.right-content {
    align-self: start;
    background: var(--color-surface-soft);
}

.year-releases,
.artists-list,
.new-tracks,
.genre-list {
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.year-page { display: block; }

.year-release-header {
    margin-bottom: 20px;
    text-align: center;
}

.year-release-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.year-title-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    gap: 18px;
    align-items: center;
}

.year-title-row h1 { margin: 0; }

.year-step {
    color: var(--color-primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.year-step:first-child { justify-self: start; }
.year-step:last-child { justify-self: end; }

.year-release-header > p:last-child {
    margin: 9px 0 0;
    color: var(--color-muted);
}

.year-release-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.year-release-filters label span {
    display: block;
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.year-release-filters select,
.year-release-filters button {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font: inherit;
}

.year-release-filters select {
    padding: 0 34px 0 11px;
    background: #fff;
}

.year-release-filters button {
    padding: 0 17px;
    border-color: var(--color-primary-dark);
    color: #fff;
    background: var(--color-primary-dark);
    cursor: pointer;
    font-weight: 800;
}

.release-date-note {
    margin-bottom: 22px;
    padding: 11px 14px;
    border-left: 4px solid #d7a430;
    border-radius: 7px;
    color: #5f4a1f;
    background: #fff8e5;
    font-size: 0.82rem;
    line-height: 1.45;
}

.year-release-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 16px;
}

.year-release-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(24, 42, 68, 0.07);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.year-release-card:hover,
.year-release-card:focus-within {
    border-color: #aac5e0;
    box-shadow: 0 8px 20px rgba(24, 52, 84, 0.14);
    transform: translateY(-2px);
}

.year-release-card > a {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.year-release-cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #e7ebf0;
}

.year-release-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.year-release-cover h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    margin: 0;
    padding: 38px 9px 9px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(to bottom, transparent, rgba(5, 15, 28, 0.94));
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.year-release-details { padding: 9px 10px 11px; }

.year-release-artist {
    margin: 0;
    overflow: hidden;
    color: #344256;
    font-size: 0.79rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.year-release-date {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 0.66rem;
    line-height: 1.35;
}

.year-release-empty {
    padding: 36px;
    border: 1px dashed #bdcad8;
    border-radius: 12px;
    text-align: center;
    background: var(--color-surface-soft);
}

.year-release-empty h2 { margin-top: 0; }

.release-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.pagination-pages {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.release-pagination a {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.release-pagination a[aria-current="page"] {
    border-color: var(--color-primary-dark);
    color: #fff;
    background: var(--color-primary-dark);
}

.pagination-direction:first-child { justify-self: start; }
.pagination-direction:last-child { justify-self: end; }

.genre-overview-page,
.genre-detail-page {
    display: block;
}

.genre-directory,
.genre-detail {
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.genre-directory-header,
.genre-detail-hero {
    max-width: 760px;
}

.genre-detail-hero {
    max-width: none;
}

.genre-directory-header { margin-bottom: 22px; }

.genre-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.genre-directory-header h1,
.genre-detail-hero h1 {
    margin: 0 0 9px;
}

.genre-directory-header > p:last-child,
.genre-detail-hero > p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.genre-search-panel {
    display: grid;
    grid-template-columns: minmax(220px, 520px) auto;
    gap: 6px 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.genre-search-panel > label {
    grid-column: 1;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.genre-search-input-wrap {
    position: relative;
    grid-column: 1;
}

.genre-search-input-wrap span {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--color-muted);
    font-size: 1.25rem;
    transform: translateY(-52%);
    pointer-events: none;
}

.genre-search-input-wrap input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px 0 39px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    font: inherit;
}

.genre-search-input-wrap input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(57, 120, 197, 0.13);
    outline: 0;
}

#genre-result-count {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    align-self: center;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.genre-alphabet {
    display: flex;
    gap: 6px;
    margin-bottom: 25px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.genre-alphabet a {
    display: inline-flex;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
}

.genre-alphabet a:hover,
.genre-alphabet a:focus-visible {
    border-color: var(--color-primary);
    background: #edf5fd;
}

.genre-letter-section {
    scroll-margin-top: 20px;
}

.genre-letter-section + .genre-letter-section { margin-top: 28px; }

.genre-letter-section > h2 {
    display: flex;
    margin: 0 0 11px;
    align-items: center;
    gap: 10px;
    color: var(--color-primary-dark);
    font-size: 1rem;
}

.genre-letter-section > h2::after {
    height: 1px;
    flex: 1;
    background: var(--color-border);
    content: '';
}

.genre-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.genre-card {
    display: flex;
    min-width: 0;
    min-height: 58px;
    padding: 12px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #dbe5ef;
    border-radius: 11px;
    color: #24364d;
    background: linear-gradient(135deg, #fff, #f3f8fd);
    box-shadow: 0 2px 7px rgba(24, 42, 68, 0.05);
    font-size: 0.86rem;
    font-weight: 780;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.genre-card[hidden],
.genre-letter-section[hidden],
.genre-search-empty[hidden] {
    display: none !important;
}

.genre-card:hover,
.genre-card:focus-visible {
    border-color: #9abddd;
    box-shadow: 0 7px 16px rgba(24, 52, 84, 0.12);
    transform: translateY(-2px);
}

.genre-card > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genre-card-arrow {
    color: var(--color-primary);
    font-size: 1rem;
}

.genre-search-empty {
    padding: 34px;
    border: 1px dashed #bdcad8;
    border-radius: 12px;
    text-align: center;
    background: var(--color-surface-soft);
}

.genre-search-empty h2 { margin-top: 0; }

.genre-back-link {
    display: inline-flex;
    margin-bottom: 20px;
    color: var(--color-primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.genre-detail-hero {
    position: relative;
    margin-bottom: 25px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid #d8e5f2;
    border-radius: 15px;
    background: linear-gradient(135deg, #f8fbff, #e8f2fc);
}

.genre-detail-hero::after {
    position: absolute;
    top: -55px;
    right: -35px;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: rgba(57, 120, 197, 0.08);
    content: '';
}

.genre-artist-count {
    display: inline-flex;
    margin-top: 15px;
    padding: 6px 10px;
    border: 1px solid #c8dcef;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    font-weight: 850;
}

.genre-artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 15px;
}

.genre-artist-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #e7ebf0;
    box-shadow: 0 3px 10px rgba(24, 42, 68, 0.09);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.genre-artist-card:hover,
.genre-artist-card:focus-within {
    box-shadow: 0 8px 20px rgba(24, 52, 84, 0.17);
    transform: translateY(-2px);
}

.genre-artist-card > a {
    position: relative;
    display: block;
    aspect-ratio: 1;
    color: #fff;
}

.genre-artist-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.genre-artist-card h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    margin: 0;
    padding: 36px 9px 9px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(to bottom, transparent, rgba(5, 15, 28, 0.94));
    font-size: 0.8rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.right-content > div + div {
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.seo-intro {
    max-width: 100%;
    color: #3f4c60;
    font-size: 1.04rem;
}

.station-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

.station-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-soft);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    content-visibility: auto;
    contain-intrinsic-size: 320px;
}

.most-played-genres h3 {
    font-size: 1rem;;
}

.station-card:hover {
    border-color: #c5d5e7;
    box-shadow: 0 10px 24px rgba(30, 56, 88, 0.1);
    transform: translateY(-2px);
}

.station-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 10px 11px 3px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary-dark) !important;
    font-size: 0.9rem;
    font-weight: 700;
}

.station-card-link span {
    font-size: 1.15rem;
    transition: transform 150ms ease;
}

.station-card-link:hover span,
.station-card-link:focus-visible span {
    transform: translateX(3px);
}

.station-box {
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-small);
    color: #fff;
    background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
    font-size: 1.08rem;
}

.station-box a {
    color: #fff;
}

.station-overview {
    margin: 20px 0 18px;
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #f3f8fc 100%);
    box-shadow: 0 10px 28px rgba(24, 42, 68, 0.08);
}

.station-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.station-overview-eyebrow {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.station-overview-header h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.station-overview-freshness {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid #bfe5cf;
    border-radius: 10px;
    background: #f1fbf5;
}

.station-overview-freshness > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #32a56a;
    box-shadow: 0 0 0 4px rgba(50, 165, 106, 0.12);
}

.station-overview-freshness.is-warning {
    border-color: #efd4ad;
    background: #fff8ed;
}

.station-overview-freshness.is-warning > span {
    background: #df8b2a;
    box-shadow: 0 0 0 4px rgba(223, 139, 42, 0.12);
}

.station-overview-freshness.is-critical {
    border-color: #edc5c8;
    background: #fff3f4;
}

.station-overview-freshness.is-critical > span {
    background: #c94b55;
    box-shadow: 0 0 0 4px rgba(201, 75, 85, 0.12);
}

.station-overview-freshness div {
    display: grid;
    gap: 1px;
}

.station-overview-freshness strong,
.station-overview-freshness small {
    display: block;
}

.station-overview-freshness strong {
    color: var(--color-text);
    font-size: 0.77rem;
}

.station-overview-freshness small {
    color: var(--color-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.station-overview-main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
    gap: 12px;
}

.station-overview-latest,
.station-overview-programs {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.station-overview h3 {
    margin: 0 0 10px;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.station-overview-track {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text) !important;
}

.station-overview-track img {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
}

.station-overview-track span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.station-overview-track strong,
.station-overview-track small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-overview-track strong {
    color: var(--color-primary-dark);
    font-size: 0.95rem;
}

.station-overview-track small,
.station-overview-latest > time,
.station-overview-empty {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.station-overview-latest > time {
    display: block;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

.station-overview-empty {
    margin: 0;
}

.station-overview-program + .station-overview-program {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e3eaf1;
}

.station-overview-program {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 7px;
}

.station-overview-program > span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.station-overview-program a {
    overflow: hidden;
    color: var(--color-primary-dark) !important;
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-overview-program time {
    color: var(--color-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.station-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.station-overview-meta li {
    display: flex;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--color-text);
    background: #e9f0f7;
    font-size: 0.78rem;
    font-weight: 700;
}

.station-overview-meta span {
    color: var(--color-muted);
}

.station-overview-meta time {
    font-variant-numeric: tabular-nums;
}

.station-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

.station-overview-metrics > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.station-overview-metrics dt,
.station-overview-metrics small {
    color: var(--color-muted);
    font-size: 0.69rem;
    font-weight: 750;
}

.station-overview-metrics dt {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.station-overview-metrics dd {
    margin: 3px 0 2px;
    color: var(--color-primary-dark);
    font-size: 1.25rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.station-overview-metrics small {
    display: block;
    line-height: 1.35;
}

.station-overview-note {
    margin: 10px 0 0;
    color: var(--color-muted);
    font-size: 0.75rem;
}

@media (max-width: 680px) {
    .station-overview-header {
        display: block;
    }

    .station-overview-freshness {
        display: inline-flex;
        margin-top: 12px;
    }

    .station-overview-main,
    .station-overview-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .station-overview-program {
        grid-template-columns: 1fr auto;
    }

    .station-overview-program > span {
        grid-column: 1 / -1;
    }
}

.song {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border-radius: 11px;
    transition: background-color 150ms ease, transform 150ms ease;
}

a:hover .song,
a:focus-visible .song {
    background: #edf3fa;
    transform: translateX(2px);
}

.song img,
.track-image {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin: 0 12px 0 0;
    border: 0;
    border-radius: 10px;
    background: #e4e9ef;
    object-fit: cover;
}

.song .details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.song .details h3 {
    margin: 0 0 3px;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 1rem;
}

.cover-image,
.cover-mini,
.cover-mini-year {
    border: 0;
    box-shadow: 0 4px 12px rgba(20, 36, 58, 0.14);
    object-fit: cover;
}

.song-info > div:first-child > img:first-of-type {
    width: min(46%, 360px);
    height: auto;
    border: 0;
    box-shadow: var(--shadow);
}

.track-hero {
    display: grid;
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 38px);
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #f2f7fc 100%);
    box-shadow: 0 12px 30px rgba(24, 42, 68, 0.09);
}

.song-info .track-hero-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 0;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(19, 38, 62, 0.2);
}

.track-hero-content {
    min-width: 0;
    align-self: center;
}

.track-hero-eyebrow {
    margin: 0 0 7px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.track-hero h1 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: -0.04em;
    line-height: 1.04;
}

.track-hero-artist {
    margin: 8px 0 22px;
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 700;
}

.track-hero-artist a {
    color: var(--color-primary-dark);
}

.same-title-card {
    margin-top: 32px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(28, 45, 70, 0.08);
}

.same-title-card > h2 {
    margin: 0 0 14px;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.same-title-list > a {
    display: block;
}

.track-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 9px;
    margin: 0 0 18px;
}

.track-metadata > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
}

.track-metadata dt {
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.track-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 750;
}

.track-first-heard {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 9px;
    row-gap: 2px;
    margin: 0 0 18px;
    padding: 11px 13px;
    border: 1px solid #cde4d7;
    border-radius: 11px;
    background: #f1faf5;
}

.track-first-heard p,
.track-first-heard a,
.track-first-heard time {
    margin: 0;
}

.track-first-heard p {
    grid-column: 1 / -1;
    color: #4d7060;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.track-first-heard a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #176a42;
    font-size: 0.98rem;
    font-weight: 850;
}

.track-first-heard time {
    align-self: center;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.track-first-heard small {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.track-preview {
    margin-bottom: 13px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #e7eef6;
}

.track-preview span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: 0.73rem;
    font-weight: 800;
}

.track-preview audio {
    display: block;
    width: 100%;
    height: 38px;
}

.spotify-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #fff !important;
    background: #16833f;
    font-size: 0.88rem;
    font-weight: 800;
    box-shadow: 0 6px 15px rgba(22, 131, 63, 0.22);
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.spotify-link:hover,
.spotify-link:focus-visible {
    background: #116d34;
    box-shadow: 0 9px 20px rgba(22, 131, 63, 0.28);
    transform: translateY(-1px);
}

.spotify-link-icon {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    color: #16833f;
    background: #fff;
}

.playlist-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 15px; border: 0; border-radius: 999px; color: #fff; background: var(--color-primary); font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.playlist-button:hover, .playlist-button:focus-visible { background: var(--color-primary-dark); }
.playlist-button:disabled:hover, .playlist-button:disabled:focus-visible { background: var(--color-muted); }
.playlist-button.is-saved { background: #16833f; }
.playlist-button-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--color-primary); background: #fff; font-size: 1.15rem; line-height: 1; }
.playlist-status { margin-left: 8px; color: var(--color-muted); font-size: .8rem; }
.playlist-button-hint { display: block; margin-top: 7px; color: var(--color-muted); font-size: .78rem; }
.track-plays-page-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--color-primary-dark); font-size: .82rem; font-weight: 800; }
.track-plays-page-link:hover, .track-plays-page-link:focus-visible { color: var(--color-primary); }
.track-facts-card { position: relative; overflow: hidden; padding: 20px !important; border-color: #e8d6a0 !important; background: linear-gradient(145deg, #fffef7 0%, #fff7d8 100%) !important; box-shadow: 0 10px 25px rgba(112, 82, 18, .12) !important; }
.track-facts-card::after { position: absolute; right: -38px; bottom: -52px; width: 132px; height: 132px; border: 1px solid rgba(222, 180, 69, .26); border-radius: 50%; content: ""; box-shadow: 0 0 0 14px rgba(222, 180, 69, .07), 0 0 0 28px rgba(222, 180, 69, .05); }
.track-facts-heading { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.track-facts-eyebrow { margin: 0 0 5px; color: #a87816; font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.track-facts-heading h2 { margin: 0; color: #503b13; font-size: 1.35rem; letter-spacing: -.025em; }
.track-facts-spark { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #d39b1d; font-size: 1.15rem; box-shadow: 0 5px 12px rgba(165, 112, 13, .22); }
.track-facts-viewport { position: relative; z-index: 1; min-height: 78px; margin-top: 18px; }
.track-fact { margin: 0; color: #574721; font-size: .94rem; line-height: 1.6; }
.track-facts-viewport .track-fact + .track-fact { display: none; }
.track-facts-card.is-enhanced .track-facts-viewport { display: grid; }
.track-facts-card.is-enhanced .track-fact { display: block; grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(7px); transition: opacity 360ms ease, transform 360ms ease, visibility 0s linear 360ms; }
.track-facts-card.is-enhanced .track-fact.is-active { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.track-facts-controls { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; }
.track-facts-control { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #e0c875; border-radius: 50%; color: #765712; background: rgba(255, 255, 255, .72); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.track-facts-control:hover, .track-facts-control:focus-visible { border-color: #bd8a17; color: #fff; background: #bd8a17; }
.track-facts-counter { color: #96752e; font-size: .73rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
    .track-facts-card.is-enhanced .track-fact { transition: none; }
}
.track-plays-page { gap: 18px; }
.track-plays-breadcrumb { margin: 0; font-size: .84rem; font-weight: 750; }
.track-plays-breadcrumb a { color: var(--color-primary-dark); }
.track-plays-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--color-border); border-radius: 16px; background: linear-gradient(145deg, #fff 0%, #f2f7fc 100%); box-shadow: 0 10px 26px rgba(24, 42, 68, .08); }
.track-plays-summary img { width: 112px; height: 112px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 18px rgba(19, 38, 62, .16); }
.track-plays-summary h1 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.45rem, 3vw, 2.2rem); letter-spacing: -.035em; line-height: 1.08; }
.track-plays-artists { margin: 7px 0 14px; color: var(--color-muted); font-size: 1rem; font-weight: 750; }
.track-plays-artists a { color: var(--color-primary-dark); }
.track-plays-metadata { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.track-plays-metadata > div { padding: 8px 10px; border: 1px solid #dce5ef; border-radius: 9px; background: rgba(255, 255, 255, .82); }
.track-plays-metadata dt { margin-bottom: 2px; color: var(--color-muted); font-size: .64rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.track-plays-metadata dd { margin: 0; color: var(--color-text); font-size: .82rem; font-weight: 750; }
.track-plays-list-section { padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(28, 45, 70, .06); }
.track-plays-list-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.track-plays-list-header .track-hero-eyebrow { margin-bottom: 5px; }
.track-plays-list-header h2 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.track-plays-list-header > span { color: var(--color-muted); font-size: .8rem; font-weight: 750; white-space: nowrap; }
.track-plays-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.track-play-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.track-play-item:hover, .track-play-item:focus-visible { border-color: #b9cce1; box-shadow: 0 6px 17px rgba(26, 49, 78, .09); color: inherit; transform: translateX(2px); }
.track-play-station-icon { position: relative; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.track-play-station-icon::before, .track-play-station-icon::after { content: ""; position: absolute; top: 50%; left: 50%; border: 2px solid rgba(255, 255, 255, .9); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: translate(-50%, -50%); }
.track-play-station-icon::before { width: 9px; height: 18px; }
.track-play-station-icon::after { width: 19px; height: 27px; }
.track-play-details { display: block; min-width: 0; }
.track-play-details strong, .track-play-details time { display: block; }
.track-play-details strong { overflow: hidden; color: var(--color-text); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.track-play-details time { margin-top: 2px; color: var(--color-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.track-play-arrow { color: var(--color-primary); font-size: 1.1rem; }
.track-plays-empty { margin: 16px 0 0; padding: 18px; border: 1px dashed var(--color-border); border-radius: 10px; color: var(--color-muted); }
.track-plays-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: .84rem; font-weight: 750; }
.track-plays-pagination a { color: var(--color-primary-dark); }
.track-plays-pagination span { color: var(--color-muted); }
@media (max-width: 600px) {
    .track-plays-summary { grid-template-columns: 76px minmax(0, 1fr); gap: 13px; padding: 14px; }
    .track-plays-summary img { width: 76px; height: 76px; border-radius: 9px; }
    .track-plays-artists { margin-bottom: 11px; font-size: .9rem; }
    .track-plays-list-section { padding: 15px 12px; }
    .track-plays-list-header { align-items: flex-start; flex-direction: column; gap: 5px; }
    .track-plays-list-header > span { white-space: normal; }
    .track-plays-pagination { align-items: stretch; flex-direction: column; text-align: center; }
}
.my-playlist-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 26px; border: 1px solid var(--color-border); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, #f2f7fc 100%); }
.my-playlist-header h1 { margin: 0; }
.my-playlist-header p { margin: 8px 0 0; color: var(--color-muted); }
.my-playlist-header label { color: var(--color-muted); font-size: .8rem; font-weight: 800; }
.my-playlist-header select { display: block; margin-top: 6px; padding: 9px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; font: inherit; }
.my-playlist-list { display: grid; gap: 10px; }
.my-playlist-item { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.my-playlist-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.my-playlist-drag { color: var(--color-muted); cursor: grab; letter-spacing: -4px; }
.my-playlist-details a { display: grid; gap: 4px; color: var(--color-text); }
.my-playlist-details span { color: var(--color-muted); }
.my-playlist-remove { border: 0; color: var(--color-muted); background: transparent; font-size: 1.5rem; cursor: pointer; }
.my-playlist-play { padding: 8px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--color-primary); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.playlist-empty { padding: 28px; border: 1px dashed var(--color-border); border-radius: 12px; color: var(--color-muted); background: #fff; }
.playlist-program-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.playlist-program-heading h2, .playlist-program-heading h3 { margin: 0; }
.playlist-program-description { max-width: 70ch; margin: 6px 0 0; color: var(--color-muted); font-size: .9rem; line-height: 1.5; }
.playlist-program-description-label { display: block; margin-bottom: 2px; color: var(--color-text); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.playlist-program-group { margin-top: 24px; padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; scroll-margin-top: 24px; }
.playlist-program-group:first-of-type { margin-top: 0; }
.playlist-program-heading { padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.playlist-program-heading time { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.playlist-program-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 14px; }
.playlist-track-card { min-width: 0; }
.playlist-program-tracks-unlabeled { margin-top: 24px; }
@media (max-width: 640px) {
    .playlist-program-group { padding: 14px 10px; }
    .playlist-program-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 1200px) {
    .playlist-program-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .playlist-program-tracks { grid-template-columns: minmax(0, 1fr); }
}
.my-playlist-player,
#my-playlist-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #111; }
.my-playlist-player iframe { width: 100%; height: 100%; border: 0; }
.playlist-player-controls { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.playlist-player-controls button { flex: 1 1 0; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-primary-dark); background: #fff; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.playlist-player-controls button:hover, .playlist-player-controls button:focus-visible { border-color: var(--color-primary); color: #fff; background: var(--color-primary); outline: none; }
.playlist-player-controls button:disabled { cursor: not-allowed; opacity: .48; }
.playlist-player-card p { color: var(--color-muted); font-size: .86rem; }

.persistent-player-host {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + 40px);
    z-index: 120;
    width: 19.5rem;
    max-width: calc(100vw - 2.5rem);
    filter: drop-shadow(0 1rem 2rem rgba(24, 37, 56, .2));
}

.persistent-player-host[hidden] {
    display: none !important;
}

.persistent-player-host .playlist-player-card {
    position: relative;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(24, 42, 68, .14);
}

.persistent-player-host .playlist-player-card:not([hidden]) + .playlist-player-card:not([hidden]) {
    margin-top: .75rem;
}

.persistent-player-host .sidebar-video-card {
    padding: 14px !important;
    overflow: visible;
    background: #fff !important;
}

.persistent-player-host .youtube-daily-views-card {
    display: none;
}

.playlist-player-close {
    position: absolute;
    top: -.6rem;
    right: -.6rem;
    z-index: 2;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 3px 10px rgba(24, 42, 68, .2);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.playlist-player-close:hover,
.playlist-player-close:focus-visible {
    color: #fff;
    background: var(--color-primary-dark);
}

.playlist-player-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.persistent-player-host .my-playlist-player,
.persistent-player-host #my-playlist-player {
    width: 100%;
    height: 16.875rem;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 10px;
}

.persistent-player-host #my-playlist-player {
    visibility: visible;
    opacity: 1;
}

.persistent-player-host iframe {
    display: block;
    width: 100%;
    height: 16.875rem;
    border: 0;
    visibility: visible;
    opacity: 1;
}

.persistent-player-host .playlist-player-description {
    display: none;
}

.persistent-player-host.is-my-playlist-page .playlist-player-description {
    display: block;
    margin: 8px 0 0;
}

@media (max-width: 600px) {
    .persistent-player-host {
        right: .75rem;
        bottom: calc(.75rem + 40px);
        width: min(19rem, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
    }

    .persistent-player-host .playlist-player-card {
        padding: 7px;
        border-radius: 11px;
    }

    .persistent-player-host .sidebar-video-card {
        padding: 7px !important;
    }

    .persistent-player-host .my-playlist-player,
    .persistent-player-host #my-playlist-player {
        border-radius: 7px;
    }

    .persistent-player-host.is-my-playlist-page .playlist-player-description {
        display: none;
    }
}

.collaborations-intro { margin-bottom: 22px; padding: 26px; border: 1px solid var(--color-border); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, #f2f7fc 100%); }
.collaborations-intro h1 { margin: 0; }
.collaborations-intro p:last-child { max-width: 680px; margin: 10px 0 0; color: var(--color-muted); }
.collaboration-chart-card, .collaboration-table-card { margin-top: 22px; padding: 22px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(28, 45, 70, .08); }
.collaboration-section-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.collaboration-section-header h2, .collaboration-table-card h2 { margin: 0; }
.collaboration-section-header p { margin: 6px 0 0; color: var(--color-muted); font-size: .86rem; }
.collaboration-section-header > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--color-primary-dark); background: #e7eef6; font-size: .78rem; font-weight: 800; }
.collaboration-chart { width: 100%; height: min(680px, 68vw); min-height: 440px; margin-top: 12px; }
.collaboration-table-wrap { overflow-x: auto; margin-top: 12px; }
.collaboration-table-card table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.collaboration-table-card th, .collaboration-table-card td { padding: 11px 10px; border-bottom: 1px solid #e7ebf0; text-align: left; }
.collaboration-table-card th { color: var(--color-muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.collaboration-table-card td:nth-child(n+3), .collaboration-table-card th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.collaboration-table-card tbody tr:last-child td { border-bottom: 0; }
.collaboration-artist-search { max-width: 620px; margin-top: 20px; }
.collaboration-artist-search > label { display: block; margin-bottom: 7px; color: var(--color-text); font-size: .82rem; font-weight: 800; }
.collaboration-search-row { display: flex; gap: 8px; }
.collaboration-search-row input[type="search"] { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.collaboration-search-row button { padding: 10px 14px; border: 0; border-radius: 8px; color: #fff; background: var(--color-primary); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.collaboration-search-row button:disabled { cursor: not-allowed; opacity: .55; }
.collaboration-artist-results { display: grid; gap: 4px; margin-top: 5px; padding: 5px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.collaboration-artist-result { padding: 8px 10px; border: 0; border-radius: 5px; color: var(--color-text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.collaboration-artist-result:hover, .collaboration-artist-result:focus-visible { background: #e7eef6; }
.collaboration-navigation-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.content .collaboration-navigation-links a { color: var(--color-primary-dark); font-size: .82rem; font-weight: 750; }
.collaboration-artist-page-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #c5d8eb; border-radius: 9px; background: #f4f8fd; }
.collaboration-artist-page-link:hover, .collaboration-artist-page-link:focus-visible { border-color: var(--color-primary); color: var(--color-primary-dark); background: #e8f2fc; text-decoration: none; }

@media (max-width: 640px) {
    .my-playlist-header { align-items: stretch; flex-direction: column; }
    .my-playlist-header select { width: 100%; }
    .my-playlist-item { grid-template-columns: 18px 52px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
    .my-playlist-play { grid-column: 3; justify-self: start; }
    .my-playlist-remove { grid-column: 4; grid-row: 1 / span 2; }
    .my-playlist-item img { width: 52px; height: 52px; }
    .collaboration-chart-card, .collaboration-table-card { padding: 16px; }
    .collaboration-section-header { flex-direction: column; }
    .collaboration-chart { height: 560px; min-height: 420px; }
    .collaboration-search-row { flex-direction: column; }
}

.footer {
    padding: 28px 20px;
    background: #182538;
}

.footer ul {
    max-width: 1200px;
    margin: 0 auto;
}

.footer ul li {
    margin: 5px 9px;
}

.footer .station-country-divider {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: #91cef5;
}

.footer .station-country-divider:first-child {
    margin-top: 0;
}

.footer .station-country-divider::before,
.footer .station-country-divider::after {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    content: "";
}

.footer .station-country-divider span {
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#scrollTopBtn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: var(--color-primary-dark);
}

.top-chart-hero {
    margin-bottom: 20px;
    padding: clamp(20px, 4vw, 30px);
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(111, 187, 235, 0.38), transparent 34%),
        linear-gradient(125deg, #17283f 0%, #205493 55%, #2f6fbd 100%);
    box-shadow: 0 14px 32px rgba(29, 71, 119, 0.18);
}

.top-chart-eyebrow {
    margin: 0 0 7px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.top-chart-hero .top-chart-eyebrow {
    color: #b9dcf5;
}

.top-chart-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.top-chart-heading h1 {
    margin: 0 0 7px;
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    letter-spacing: -0.045em;
}

.top-chart-heading p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
}

.top-chart-period {
    display: grid;
    flex: 0 0 auto;
    min-width: 105px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.11);
    text-align: center;
    backdrop-filter: blur(5px);
}

.top-chart-period strong {
    font-size: 0.92rem;
}

.top-chart-period span {
    color: #cce5f7;
    font-size: 0.82rem;
}

.top-country-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.top-country-filters a {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    font-weight: 750;
}

.top-country-filters a:hover,
.top-country-filters a:focus-visible,
.top-country-filters a.is-active {
    border-color: #fff;
    color: var(--color-primary-dark) !important;
    background: #fff;
}

.top-playlist-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 18px;
}

.top-playlist-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}

.top-playlist-button:hover,
.top-playlist-button:focus-visible {
    background: #eaf5fd;
    outline: 2px solid rgba(255, 255, 255, 0.78);
    outline-offset: 2px;
}

.top-playlist-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.top-playlist-announcement-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.82);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.top-playlist-announcement-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #fff;
    cursor: pointer;
}

.top-playlist-status {
    color: rgba(255, 255, 255, 0.78);
    font-size: .78rem;
}

.top-chart-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-chart-entry > a {
    display: grid;
    grid-template-columns: 50px 76px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 15px;
    min-height: 98px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(23, 42, 67, 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.top-chart-entry > a:hover,
.top-chart-entry > a:focus-visible {
    border-color: #bcd0e5;
    color: inherit;
    box-shadow: 0 9px 22px rgba(24, 55, 91, 0.1);
    transform: translateY(-2px);
}

.top-chart-entry.is-podium > a {
    border-color: #d7e1ed;
    background: linear-gradient(100deg, #f7faff 0%, #fff 42%);
}

.top-chart-position {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #47566a;
    background: #edf1f5;
    font-size: 1rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.top-chart-entry:nth-child(1) .top-chart-position {
    color: #654c00;
    background: linear-gradient(145deg, #ffe99a, #efc95b);
    box-shadow: 0 5px 13px rgba(202, 154, 22, 0.22);
}

.top-chart-entry:nth-child(2) .top-chart-position {
    color: #485361;
    background: linear-gradient(145deg, #edf1f5, #c9d1da);
}

.top-chart-entry:nth-child(3) .top-chart-position {
    color: #6f4228;
    background: linear-gradient(145deg, #f0c4a3, #c98b62);
}

.top-chart-entry img {
    width: 76px;
    height: 76px;
    border-radius: 11px;
    background: #e7ebf0;
    box-shadow: 0 4px 12px rgba(19, 38, 62, 0.12);
    object-fit: cover;
}

.top-chart-track {
    min-width: 0;
}

.top-chart-track h2 {
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--color-text);
    font-size: clamp(1rem, 2vw, 1.18rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-chart-track p {
    margin: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-chart-stats {
    display: grid;
    justify-items: end;
    gap: 6px;
    min-width: 90px;
    color: var(--color-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.top-chart-movement {
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.top-chart-movement.is-up {
    color: #187448;
    background: #e2f4e9;
}

.top-chart-movement.is-down {
    color: #a13b3b;
    background: #fbe8e8;
}

.top-chart-movement.is-equal {
    color: #667386;
    background: #edf1f5;
}

.top-chart-movement.is-new {
    color: #76550b;
    background: #fff1c8;
}

.top-chart-arrow {
    color: #9aa7b6;
    font-size: 1.55rem;
    transition: transform 150ms ease;
}

.top-chart-entry > a:hover .top-chart-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

.top-chart-empty {
    padding: 38px 20px;
    border: 1px dashed #cbd7e4;
    border-radius: 14px;
    background: var(--color-surface-soft);
    text-align: center;
}

.top-chart-empty strong {
    font-size: 1.08rem;
}

.top-chart-empty p {
    margin: 5px 0 0;
    color: var(--color-muted);
}

.top-archive-header {
    margin-bottom: 16px;
}

.top-archive-header h2 {
    margin: 0 0 5px;
    font-size: 1.35rem;
}

.top-archive-header > p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.top-archive-years {
    display: grid;
    gap: 8px;
}

.top-archive-years details {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: #fff;
}

.top-archive-years summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.top-archive-years summary::-webkit-details-marker {
    display: none;
}

.top-archive-years summary::after {
    content: "+";
    margin-left: auto;
    color: var(--color-primary);
    font-size: 1.1rem;
}

.top-archive-years details[open] summary::after {
    content: "−";
}

.top-archive-years summary small {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.top-archive-weeks {
    display: grid;
    gap: 1px;
    padding: 0 7px 7px;
}

.top-archive-week {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 7px;
    border-radius: 8px;
}

.top-archive-week:hover,
.top-archive-week.is-current {
    background: #edf4fb;
}

.top-archive-week-main {
    font-size: 0.84rem;
    font-weight: 750;
    white-space: nowrap;
}

.top-archive-week-main[aria-current="page"] {
    color: var(--color-primary);
}

.top-archive-countries {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}

.top-archive-countries a {
    padding: 2px 5px;
    border: 1px solid #d9e2ec;
    border-radius: 5px;
    color: #667386;
    background: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.top-archive-countries a:hover,
.top-archive-countries a[aria-current="page"] {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary);
}

.right-content.sidebar-stack {
    display: grid;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar-stack > .sidebar-card {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(24, 42, 68, 0.07);
}

.sidebar-stack > .amsterdam-clock {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(82, 190, 255, 0.34), transparent 48%),
        linear-gradient(145deg, #182538, #234a70);
}

.amsterdam-clock::after {
    position: absolute;
    right: -34px;
    bottom: -48px;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.amsterdam-clock-eyebrow {
    margin: 0 0 3px;
    color: #a9ddff;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebar-card.amsterdam-clock > h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 1rem;
}

.amsterdam-clock-display,
.amsterdam-clock-time,
.amsterdam-clock-date {
    display: block;
}

.amsterdam-clock-time {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1;
}

.amsterdam-clock-date {
    margin-top: 9px;
    color: #dcefff;
    font-size: .8rem;
    line-height: 1.4;
    text-transform: capitalize;
}

.amsterdam-clock-zone {
    display: inline-flex;
    margin-top: 14px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #dcefff;
    background: rgba(255, 255, 255, 0.08);
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .035em;
}

.amsterdam-clock-noscript {
    margin: 10px 0 0;
    color: #dcefff;
    font-size: .75rem;
}

.sidebar-card > h2:first-child,
.sidebar-card > header:first-child h2 {
    margin: 0 0 14px;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.sidebar-card-intro {
    margin: -.35rem 0 .75rem;
    color: var(--text-dim);
    font-size: .75rem;
    line-height: 1.45;
}

.featured-artists {
    overflow: hidden;
    background: #fff;
}

.featured-artists__list {
    display: grid;
    gap: 0;
}

.featured-artist {
    display: flex !important;
    align-items: center;
    min-width: 0;
    padding: 8px 5px;
    border-radius: 11px;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

.featured-artist + .featured-artist {
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}

.featured-artist:hover,
.featured-artist:focus-visible {
    background: #eef6fc;
    text-decoration: none;
    transform: translateX(2px);
}

.featured-artist img {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    margin: 0 12px 0 0;
    border-radius: 10px;
    object-fit: cover;
    background: #e4e9ef;
}

.featured-artist__details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    color: var(--color-muted);
    font-size: .92rem;
}

.featured-artist__details strong {
    margin: 0 0 3px;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 1rem;
}

.featured-artist__details span {
    font-size: inherit;
}

.sidebar-card > a {
    display: block;
}

.sidebar-card .song {
    padding: 8px 5px;
}

.sidebar-card .song img {
    width: 58px;
    height: 58px;
}

.homepage-tip-33 {
    overflow: hidden;
    border-color: #d7e2ee;
    background: linear-gradient(145deg, #f4f9ff 0%, #fff 62%);
}

.homepage-tip-33__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.homepage-tip-33__eyebrow {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.homepage-tip-33.sidebar-card > .homepage-tip-33__header:first-child h2 {
    margin: 0;
}

.homepage-tip-33__all {
    flex: 0 0 auto;
    padding-top: 3px;
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.homepage-tip-33__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homepage-tip-33__list a {
    display: grid;
    grid-template-columns: 28px 52px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 6px 3px;
    border-radius: 9px;
}

.homepage-tip-33__list a:hover,
.homepage-tip-33__list a:focus-visible {
    background: rgba(226, 239, 251, .8);
    color: inherit;
}

.homepage-tip-33__position {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    color: #596a7d;
    background: #e2eaf2;
    font-size: .78rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.homepage-tip-33__list li:nth-child(1) .homepage-tip-33__position {
    color: #654c00;
    background: linear-gradient(145deg, #ffe99a, #efc95b);
}

.homepage-tip-33__list li:nth-child(2) .homepage-tip-33__position {
    color: #485361;
    background: linear-gradient(145deg, #edf1f5, #c9d1da);
}

.homepage-tip-33__list li:nth-child(3) .homepage-tip-33__position {
    color: #6f4228;
    background: linear-gradient(145deg, #f0c4a3, #c98b62);
}

.homepage-tip-33__list img {
    width: 52px;
    height: 52px;
    border-radius: 9px;
    background: #e4e9ef;
    object-fit: cover;
}

.homepage-tip-33__track {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.homepage-tip-33__track strong,
.homepage-tip-33__track span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.homepage-tip-33__track strong {
    color: var(--color-text);
    font-size: .9rem;
}

.homepage-tip-33__track span {
    color: var(--color-muted);
    font-size: .78rem;
}

.trending-heat {
    display: block;
    position: relative;
    height: 4px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f3;
}

.trending-songs .song .details {
    flex: 1 1 0;
    width: 0;
}

.trending-heat__fill {
    display: block;
    position: relative;
    width: var(--heat-level);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f2c14e 0%, #ff8a3d 45%, #ef4b39 78%, #ffd86a 100%);
    box-shadow: 0 0 8px rgba(239, 75, 57, .45);
}

.trending-heat__fill::after {
    position: absolute;
    top: -3px;
    right: 1px;
    width: 7px;
    height: 10px;
    background: #ffe18a;
    clip-path: polygon(50% 0, 100% 42%, 68% 38%, 100% 100%, 35% 73%, 0 100%, 25% 48%, 0 45%);
    content: "";
    filter: drop-shadow(0 0 3px rgba(255, 139, 61, .8));
}

.sidebar-card .hourly-chart-header {
    display: block;
    margin: -4px 0 13px;
}

.sidebar-card .hourly-chart-header .plays-chart-reset {
    margin-top: 10px;
}

.sidebar-card-chart .hourly-chart-container {
    height: 310px;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-card-chart .chart-container {
    width: 100%;
    max-width: 310px;
    margin: 8px auto 0;
}

.sidebar-stat-card {
    color: var(--color-primary-dark);
    font-size: clamp(1.7rem, 4vw, 2.25rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(145deg, #f8fbff, #eaf3fc) !important;
}

.sidebar-stat-card h2 {
    color: var(--color-text);
    font-size: 1.05rem !important;
}

.top-33-stats {
    background: linear-gradient(145deg, #f8fbff, #eaf3fc) !important;
}

.top-33-stats dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.top-33-stats-single dl {
    grid-template-columns: 1fr;
}

.top-33-stats dl > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid #d8e5f2;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.78);
}

.top-33-stats dt {
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
}

.top-33-stats dd {
    margin: 5px 0 0;
    color: var(--color-primary-dark);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.radio-stats dd.latest-update {
    font-size: clamp(0.88rem, 1.35vw, 1.05rem);
    white-space: nowrap;
}

.latest-update-mobile {
    display: none;
}

.news-on-artist ul,
.news-on-track ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-on-artist li + li,
.news-on-track li + li {
    border-top: 1px solid var(--color-border);
}

.news-on-artist h4,
.news-on-track h4 {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.42;
}

.news-on-artist h4 a,
.news-on-track h4 a {
    display: block;
    padding: 10px 2px 2px;
}

.news-on-artist time,
.news-on-track time {
    display: block;
    padding: 0 2px 10px;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.artist-sidebar-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 9px;
}

.artist-sidebar-tracks h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.artist-sidebar-track-year-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: stretch;
}

.artist-sidebar-track-year-items {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    min-width: 0;
}

.related-track-toggle {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--color-border, #dbe5ec);
    border-radius: 8px;
    color: var(--color-primary-dark, #1d527d);
    background: var(--color-surface-soft, #f8fafc);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.related-track-toggle:hover,
.related-track-toggle:focus-visible {
    border-color: var(--color-primary, #3978c5);
    color: #fff;
    background: var(--color-primary, #3978c5);
    outline: none;
}

.related-track-toggle[hidden] {
    display: none !important;
}

[data-related-track-item][hidden],
[data-related-track-group][hidden] {
    display: none !important;
}

.artist-sidebar-track-year {
    grid-column: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 6px 3px;
    border: 1px solid #c5d8e8;
    border-left: 3px solid var(--color-primary);
    border-radius: 7px;
    color: var(--color-primary-dark);
    background: #eef6fc;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.artist-sidebar-track-year span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    transform: rotate(-90deg);
}

.artist-sidebar-track-grid a {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 10px;
    background: #e7ebf0;
    box-shadow: 0 3px 9px rgba(24, 42, 68, 0.1);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.artist-sidebar-track-grid a:hover,
.artist-sidebar-track-grid a:focus-visible {
    box-shadow: 0 7px 16px rgba(24, 52, 84, 0.17);
    transform: translateY(-2px);
}

.artist-track-kind {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(19, 44, 73, 0.86);
    font-size: 0;
}

.artist-track-kind::before {
    content: '↔';
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.artist-sidebar-track-grid .track-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
}

.artist-sidebar-track-grid .artist-track-title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    padding: 30px 7px 7px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(to bottom, transparent, rgba(5, 15, 28, 0.92));
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.sidebar-video-card {
    padding: 0 !important;
    overflow: hidden;
    background: #081426 !important;
}

.sidebar-video-card iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.sidebar-video-card > .youtube-media-host {
    width: 100%;
}

.sidebar-video-card > .youtube-media-host:has(iframe) {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.youtube-view-count-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px !important;
    background: linear-gradient(145deg, #fffdf8, #fff8ed) !important;
}

.youtube-view-count-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    color: var(--color-text, #1f2933);
}

.youtube-view-count-main strong {
    font-size: 1.05rem;
    white-space: nowrap;
}

.youtube-view-count-main > span:not(.youtube-view-count-fire) {
    color: var(--color-muted, #667085);
    font-size: 0.75rem;
    white-space: nowrap;
}

.youtube-view-count-fire {
    font-size: 1rem;
    line-height: 1;
}

.youtube-daily-views-card {
    padding: 12px 14px 10px;
    border-top: 1px solid #ece5dc;
    color: var(--color-text, #1f2933);
    background: #fff;
}

.youtube-daily-views-header h2 {
    margin: 0;
    font-size: .88rem;
}

.youtube-daily-views-header p {
    margin: 2px 0 0;
    color: var(--color-muted, #667085);
    font-size: .72rem;
}

.youtube-daily-views-chart {
    width: 100%;
    height: 142px;
    margin-top: 7px;
}

.station-status-card {
    background: linear-gradient(145deg, #fffdf8, #fff8ed) !important;
}

.station-status-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.station-status-summary::-webkit-details-marker {
    display: none;
}

.station-status-summary::after {
    flex: 0 0 auto;
    color: #a76216;
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}

.station-status-card[open] .station-status-summary::after {
    content: '−';
}

.station-status-summary-heading {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.station-status-summary-title {
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.station-status-counts {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.station-status-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.station-status-count strong {
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.station-status-count.is-critical {
    border-color: #edc2c2;
    color: #a83232;
    background: #fff0f0;
}

.station-status-count.is-warning {
    border-color: #efd2a8;
    color: #a76216;
    background: #fff7e9;
}

.station-status-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eadfce;
}

.station-status-eyebrow {
    margin: 0 0 4px;
    color: #a76216;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.station-status-card > h2 {
    margin-bottom: 6px !important;
}

.station-status-intro {
    margin: 0 0 13px;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.station-status-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.station-status-item a {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 1px 9px;
    padding: 9px 10px;
    border: 1px solid #eadfce;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
}

.station-status-item a:hover,
.station-status-item a:focus-visible {
    border-color: #d6b98e;
    color: inherit;
    background: #fff;
}

.station-status-dot {
    grid-row: 1 / 3;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #df8b2a;
    box-shadow: 0 0 0 4px rgba(223, 139, 42, 0.12);
}

.station-status-item.is-critical .station-status-dot {
    background: #c94b4b;
    box-shadow: 0 0 0 4px rgba(201, 75, 75, 0.12);
}

.station-status-item strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-status-item a > span:last-child {
    grid-column: 2;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.station-status-page-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: var(--color-primary-dark) !important;
    font-size: 0.78rem;
    font-weight: 800;
}

.station-status-page-link:hover,
.station-status-page-link:focus-visible {
    color: var(--color-primary) !important;
}

.station-status-page-link span {
    transition: transform 150ms ease;
}

.station-status-page-link:hover span,
.station-status-page-link:focus-visible span {
    transform: translateX(3px);
}

.station-status-page {
    display: block;
}

.station-health-dashboard {
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.station-health-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
    padding: clamp(22px, 4vw, 34px);
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 5%, rgba(83, 190, 246, 0.35), transparent 34%),
        linear-gradient(125deg, #17283f 0%, #205493 58%, #2f6fbd 100%);
    box-shadow: 0 14px 32px rgba(29, 71, 119, 0.18);
}

.station-health-eyebrow {
    margin: 0 0 7px;
    color: #b9dcf5;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.station-health-hero h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.045em;
}

.station-health-hero p:last-child {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.station-health-hero > time {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #dcefff;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.station-health-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.station-health-summary article {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fbfdff;
}

.station-health-summary article.is-healthy {
    border-color: #bfe5cf;
    background: #f1fbf5;
}

.station-health-summary article.is-warning {
    border-color: #efd4ad;
    background: #fff8ed;
}

.station-health-summary article.is-critical {
    border-color: #edc5c8;
    background: #fff3f4;
}

.station-health-summary article.is-availability {
    border-color: #c6dced;
    background: #f2f8fd;
}

.station-health-summary .is-availability .station-health-summary-dot {
    background: #3c82b8;
    box-shadow: 0 0 0 4px rgba(60, 130, 184, 0.12);
}

.station-health-summary-dot,
.station-health-pill > span,
.station-health-legend li > span {
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #32a56a;
    box-shadow: 0 0 0 4px rgba(50, 165, 106, 0.12);
}

.station-health-summary .is-warning .station-health-summary-dot,
.station-health-pill.is-warning > span,
.station-health-legend .is-warning > span {
    background: #df8b2a;
    box-shadow: 0 0 0 4px rgba(223, 139, 42, 0.12);
}

.station-health-summary .is-critical .station-health-summary-dot,
.station-health-pill.is-critical > span,
.station-health-legend .is-critical > span {
    background: #c94b55;
    box-shadow: 0 0 0 4px rgba(201, 75, 85, 0.12);
}

.station-health-summary article > div {
    display: grid;
    gap: 2px;
}

.station-health-summary strong {
    color: var(--color-text);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.station-health-summary article span:last-child {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.station-health-explanation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-soft);
}

.station-health-explanation h2 {
    margin: 0 0 3px;
    font-size: 1rem;
}

.station-health-explanation p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.station-health-legend {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.station-health-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-muted);
    font-size: 0.74rem;
    white-space: nowrap;
}

.station-health-legend li > span {
    width: 8px;
    height: 8px;
    box-shadow: none;
}

.station-health-legend .is-future > span {
    background: #dfe6ee;
}

.station-health-list {
    display: grid;
    gap: 9px;
}

.station-health-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(160px, 0.6fr) minmax(0, 3fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid var(--color-border);
    border-left: 4px solid #32a56a;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(23, 42, 67, 0.035);
}

.station-health-row.is-warning {
    border-left-color: #df8b2a;
}

.station-health-row.is-critical {
    border-left-color: #c94b55;
}

.station-health-station {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.station-health-station a {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.94rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-health-station a:hover,
.station-health-station a:focus-visible {
    color: var(--color-primary);
}

.station-health-station span,
.station-health-current > time,
.station-health-current > span:last-child {
    color: var(--color-muted);
    font-size: 0.7rem;
}

.station-health-current .station-health-first-import {
    color: #597084;
    font-size: 0.68rem;
    font-weight: 700;
}

.station-health-first-import time {
    font-variant-numeric: tabular-nums;
}

.station-health-current {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.station-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid #bfe5cf;
    border-radius: 999px;
    color: #247b4d;
    background: #f1fbf5;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.station-health-pill > span {
    width: 7px;
    height: 7px;
    box-shadow: none;
}

.station-health-pill.is-warning {
    border-color: #efd4ad;
    color: #9b5d14;
    background: #fff8ed;
}

.station-health-pill.is-critical {
    border-color: #edc5c8;
    color: #a8323c;
    background: #fff3f4;
}

.station-health-history {
    min-width: 0;
    overflow-x: auto;
    scrollbar-color: #b9c9d8 transparent;
    scrollbar-width: thin;
}

.station-health-days,
.station-health-graph,
.station-health-history > p {
    min-width: 720px;
}

.station-health-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 4px;
}

.station-health-days span {
    color: var(--color-muted);
    font-size: 0.58rem;
    font-weight: 750;
    text-align: center;
    text-transform: uppercase;
}

.station-health-graph {
    display: grid;
    grid-template-columns: repeat(168, minmax(2px, 1fr));
    gap: 1px;
    height: 25px;
    padding: 2px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef2f6;
}

.station-health-graph > span {
    min-width: 0;
    border-radius: 1px;
    background: #32a56a;
}

.station-health-graph > span.is-warning {
    background: #e2942f;
}

.station-health-graph > span.is-critical {
    background: #cf4f58;
}

.station-health-graph > span.is-future {
    background: #dfe6ee;
}

.station-health-graph > span.is-day-start:not(:first-child) {
    box-shadow: inset 2px 0 0 #fff;
}

.station-health-history > p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 0.64rem;
}

.station-health-history > p strong {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.station-health-empty {
    padding: 28px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    text-align: center;
}

.station-health-empty h2 {
    margin: 0 0 4px;
}

.station-health-empty p {
    margin: 0;
    color: var(--color-muted);
}

@media (max-width: 1050px) {
    .station-health-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .station-health-explanation {
        align-items: flex-start;
        flex-direction: column;
    }

    .station-health-legend {
        justify-content: flex-start;
    }

    .station-health-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .station-health-history {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .station-status-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .station-health-dashboard {
        padding: 12px;
    }

    .station-health-hero {
        display: block;
        padding: 21px;
    }

    .station-health-hero > time {
        display: inline-block;
        margin-top: 16px;
    }

    .station-health-summary {
        gap: 8px;
    }

    .station-health-summary article {
        min-height: 82px;
        padding: 12px;
    }

    .station-health-summary strong {
        font-size: 1.45rem;
    }

    .station-health-explanation {
        padding: 14px;
    }

    .station-health-row {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 13px;
    }

    .station-health-current {
        grid-column: 1;
    }

    .station-health-history {
        grid-column: 1;
    }
}

.artist-station-ranking {
    clear: both;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff 0%, #f4f8fc 100%);
    box-shadow: 0 10px 28px rgba(24, 42, 68, 0.08);
}

.artist-popular-tracks {
    clear: both;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(24, 42, 68, 0.06);
}

.artist-popular-tracks-header {
    margin-bottom: 16px;
}

.artist-popular-tracks-eyebrow {
    margin: 0 0 5px !important;
    color: var(--color-primary) !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.artist-popular-tracks-header h2 {
    margin: 0 0 5px;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.artist-popular-tracks-header p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.artist-popular-track-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.artist-popular-track-item {
    border: 1px solid #e0e7ef;
    border-radius: 12px;
    background: #fbfdff;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.artist-popular-track-item:hover,
.artist-popular-track-item:focus-within {
    border-color: #c4d6e9;
    box-shadow: 0 5px 14px rgba(27, 52, 82, 0.08);
    transform: translateY(-1px);
}

.artist-popular-track-item > a {
    display: grid;
    grid-template-columns: 32px 56px minmax(0, 1fr) auto 18px;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 9px 12px;
}

.artist-popular-track-position {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #536174;
    background: #edf1f5;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.artist-popular-track-item:first-child .artist-popular-track-position {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    box-shadow: 0 4px 10px rgba(47, 111, 189, 0.25);
}

.artist-popular-track-item img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
}

.artist-popular-track-details {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.artist-popular-track-details strong,
.artist-popular-track-details span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-popular-track-details strong {
    color: var(--color-text);
    font-size: 0.9rem;
}

.artist-popular-track-details span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.artist-popular-track-plays {
    color: var(--color-primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.artist-popular-track-arrow {
    color: var(--color-primary);
    font-size: 1.1rem;
    transition: transform 150ms ease;
}

.artist-popular-track-item:hover .artist-popular-track-arrow,
.artist-popular-track-item:focus-within .artist-popular-track-arrow {
    transform: translateX(3px);
}

.artist-metadata-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.artist-metadata-card {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}

.artist-metadata-card h2 {
    margin: 0 0 6px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.artist-metadata-card p {
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
}

.artist-genres-card {
    grid-column: 1 / -1;
}

.artist-socials-card {
    grid-column: 1 / -1;
    padding: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);
}

.artist-socials-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.artist-socials-card__heading h2 {
    margin-bottom: 4px;
}

.artist-socials-card__heading p {
    margin: 0;
    color: var(--color-muted, #60758a);
    font-size: 0.88rem;
    font-weight: 500;
}

.artist-socials-card__badge {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 1.25rem;
    font-weight: 850;
    box-shadow: 0 3px 10px rgba(24, 54, 86, 0.08);
}

.artist-social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 11px;
}

.artist-social-link {
    --social-color: #52718f;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 10px 12px 10px 10px;
    border: 1px solid #cbdced;
    border-radius: 15px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(24, 54, 86, 0.07);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.artist-social-link:hover,
.artist-social-link:focus-visible {
    border-color: var(--social-color);
    box-shadow: 0 5px 14px rgba(24, 54, 86, 0.14);
    text-decoration: underline;
    transform: translateY(-2px);
}

.artist-social-link__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    color: #fff;
    background: var(--social-color);
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1;
    text-decoration: none;
}

.artist-social-link__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.artist-social-link__platform {
    white-space: nowrap;
}

.artist-social-link__action {
    color: var(--color-muted, #60758a);
    font-size: 0.74rem;
    font-weight: 600;
}

.artist-social-link__arrow {
    display: inline-block;
    margin-left: 2px;
    color: var(--social-color);
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease;
}

.artist-social-link:hover .artist-social-link__arrow,
.artist-social-link:focus-visible .artist-social-link__arrow {
    transform: translate(2px, -2px);
}

@media (max-width: 520px) {
    .artist-social-links {
        grid-template-columns: 1fr;
    }
}

.artist-social-link--instagram { --social-color: #d62976; }
.artist-social-link--facebook { --social-color: #1877f2; }
.artist-social-link--youtube { --social-color: #ff0033; }
.artist-social-link--tiktok { --social-color: #111820; }
.artist-social-link--twitter { --social-color: #111820; }
.artist-social-link--threads { --social-color: #171717; }
.artist-social-link--bluesky { --social-color: #1185fe; }
.artist-social-link--mastodon { --social-color: #6364ff; }
.artist-social-link--snapchat { --social-color: #766300; }
.artist-social-link--twitch { --social-color: #9146ff; }
.artist-social-link--kick { --social-color: #278d12; }
.artist-social-link--discord { --social-color: #5865f2; }
.artist-social-link--reddit { --social-color: #ff4500; }
.artist-social-link--telegram { --social-color: #229ed9; }
.artist-social-link--linkedin { --social-color: #0a66c2; }
.artist-social-link--soundcloud { --social-color: #ff5500; }
.artist-social-link--bandcamp { --social-color: #1da0c3; }
.artist-social-link--audiomack { --social-color: #a96800; }
.artist-social-link--mixcloud { --social-color: #5000ff; }
.artist-social-link--patreon { --social-color: #f96854; }
.artist-social-link--fiverr { --social-color: #1dbf73; }
.artist-social-link--website { --social-color: #52718f; }

.artist-genre-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.artist-genre-links a {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #eaf2fb;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.artist-genre-links a:hover,
.artist-genre-links a:focus-visible {
    background: #dceaf8;
    text-decoration: underline;
}

.artist-collaboration-action {
    position: relative;
    overflow: hidden;
    padding: 20px !important;
    border: 0 !important;
    color: #fff !important;
    background-color: #205493 !important;
    background: linear-gradient(135deg, #172c49 0%, #2f6fbd 100%) !important;
}

.artist-collaboration-action::after {
    position: absolute;
    right: -38px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border: 18px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
}

.artist-collaboration-action-heading,
.artist-collaboration-description,
.artist-collaboration-link {
    position: relative;
    z-index: 1;
}

.artist-collaboration-action-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.artist-collaboration-action-icon {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
}

.artist-collaboration-action-icon::before,
.artist-collaboration-action-icon::after {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 2px;
    background: #b9d7f7;
    content: "";
    transform-origin: left center;
}

.artist-collaboration-action-icon::before {
    top: 16px;
    transform: rotate(-27deg);
}

.artist-collaboration-action-icon::after {
    top: 19px;
    transform: rotate(27deg);
}

.artist-collaboration-action-icon > span {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2f6fbd;
}

.artist-collaboration-action-icon > span:first-child {
    top: 14px;
    left: 6px;
}

.artist-collaboration-action-icon > span:nth-child(2) {
    top: 6px;
    right: 6px;
}

.artist-collaboration-action-icon > span:last-child {
    right: 6px;
    bottom: 6px;
}

.artist-collaboration-eyebrow {
    margin: 0 0 3px;
    color: #b9d7f7;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.artist-collaboration-action h2 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
}

.artist-collaboration-description {
    margin: 14px 0 17px;
    color: #dceafa;
    font-size: 0.84rem;
    line-height: 1.45;
}

.content .artist-collaboration-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 9px 13px;
    border-radius: 9px;
    color: var(--color-primary-dark);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 150ms ease, transform 150ms ease;
}

.artist-collaboration-link span {
    font-size: 1.05rem;
    line-height: 0.8;
    transition: transform 150ms ease;
}

.content .artist-collaboration-link:hover,
.content .artist-collaboration-link:focus-visible {
    color: var(--color-primary-dark);
    background: #edf6ff;
    text-decoration: none;
    transform: translateY(-1px);
}

.artist-collaboration-link:hover span,
.artist-collaboration-link:focus-visible span {
    transform: translateX(3px);
}

.station-genre-links {
    gap: 9px;
}

.station-genre-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
}

.station-genre-links a small {
    padding-left: 7px;
    border-left: 1px solid #c5d8eb;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.artist-station-ranking-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.artist-station-ranking-eyebrow {
    margin: 0 0 5px !important;
    color: var(--color-primary) !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.artist-station-ranking-header h2 {
    margin: 0 0 5px;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.artist-station-ranking-header > div > p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.artist-station-ranking-total {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #c9d9eb;
    border-radius: 999px;
    color: var(--color-primary-dark);
    background: #eaf2fb;
    font-size: 0.84rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.artist-station-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.artist-station-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border: 1px solid #e0e7ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.artist-station-item:hover {
    border-color: #c4d6e9;
    box-shadow: 0 5px 14px rgba(27, 52, 82, 0.07);
    transform: translateY(-1px);
}

.artist-station-position {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #536174;
    background: #edf1f5;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.artist-station-item:first-child .artist-station-position {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    box-shadow: 0 4px 10px rgba(47, 111, 189, 0.25);
}

.artist-station-details {
    min-width: 0;
    flex: 1;
}

.artist-station-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.artist-station-line a {
    overflow: hidden;
    color: var(--color-text);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-station-line a:hover {
    color: var(--color-primary);
}

.artist-station-amount {
    flex: 0 0 auto;
    color: var(--color-primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.artist-station-amount small {
    margin-left: 4px;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.artist-station-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf4;
}

.artist-station-bar span {
    display: block;
    width: var(--station-bar-width);
    min-width: 4px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary-dark), #5c9bd4);
}

@media (min-width: 901px) and (max-width: 1200px) {
    .sidebar-stack > .sidebar-card {
        padding: 14px;
    }

    .top-33-stats dl {
        gap: 7px;
    }

    .top-33-stats dl > div {
        padding: 10px 8px;
    }

    .top-33-stats dt {
        font-size: 0.6rem;
        letter-spacing: 0.025em;
    }

    .top-33-stats dd {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .radio-stats dd.latest-update {
        font-size: clamp(0.85rem, 1.45vw, 1.05rem);
    }
}

@media (max-width: 900px) {
    .year-release-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .new-tracks-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content {
        grid-template-columns: 1fr;
        padding: 18px 14px 32px;
    }

    .left-content,
    .right-content {
        padding: 21px;
    }

    .menu {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .menu ul {
        width: max-content;
        min-width: 100%;
    }

    .menu ul li {
        flex: 0 0 auto;
    }
}

@media (max-width: 600px) {
    .homepage-toolbar-row {
        flex-direction: column;
    }

    .homepage-toolbar-row > .my-radio,
    .homepage-toolbar-row > .homepage-station-filter,
    .homepage-toolbar-row > .now-playing-toolbar {
        width: 100%;
        min-width: 0;
    }

    .my-radio-home-toggle,
    .station-filter-toggle {
        min-height: 48px;
        width: 100%;
    }

    .station-filter-header {
        flex-direction: column;
    }

    .station-filter-reset {
        width: 100%;
    }

    .station-filter-actions {
        width: 100%;
    }

    .station-filter-actions button {
        flex: 1 1 0;
    }

    .station-filter-country-list {
        grid-template-columns: 1fr;
    }

    .now-playing-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .now-playing-toolbar button {
        width: 100%;
    }

    .latest-update-full {
        display: none;
    }

    .latest-update-mobile {
        display: inline;
    }

    .genre-directory,
    .genre-detail {
        padding: 17px;
    }

    .genre-search-panel {
        grid-template-columns: 1fr;
    }

    #genre-result-count {
        grid-column: 1;
        grid-row: auto;
    }

    .genre-card-grid {
        grid-template-columns: 1fr;
    }

    .genre-artist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .genre-detail-hero {
        padding: 20px;
    }

    .year-releases {
        padding: 17px;
    }

    .year-title-row {
        grid-template-columns: 1fr 1fr;
    }

    .year-title-row h1 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .year-title-row .year-step {
        grid-row: 2;
    }

    .year-title-row .year-step:last-child {
        grid-column: 2;
    }

    .year-release-filters {
        grid-template-columns: 1fr;
    }

    .year-release-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .release-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .pagination-pages {
        order: -1;
        width: 100%;
    }

    .new-tracks {
        padding: 17px;
    }

    .new-tracks-filters {
        grid-template-columns: 1fr;
    }

    .new-tracks-grid {
        grid-template-columns: 1fr;
    }

    .new-track-card > a {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .new-track-card img {
        width: 86px !important;
        height: 100% !important;
    }

    .header {
        height: 74px;
        padding: 0 14px;
    }

    .hamburger-menu {
        width: 42px;
        height: 42px;
        left: 14px;
    }

    .site-search-trigger {
        right: 14px;
        width: 42px;
        height: 42px;
    }

    .site-search-modal {
        padding: 82px 10px 15px;
    }

    .site-search-dialog {
        max-height: calc(100vh - 118px);
        margin-bottom: 20px;
        padding: 17px;
    }

    .site-search-form {
        grid-template-columns: 1fr;
    }

    .site-search-form button {
        width: 100%;
    }

    .left-content,
    .right-content {
        padding: 17px;
        border-radius: 12px;
    }

    .station-grid {
        grid-template-columns: 1fr;
    }

    .song img,
    .track-image,
    .cover-image {
        width: 54px !important;
        height: 54px !important;
    }

    .song-info > div:first-child > img:first-of-type {
        float: none !important;
        width: 100% !important;
        max-width: 360px;
        margin: 0 0 20px !important;
    }

    .track-hero {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .song-info .track-hero-cover {
        width: 100% !important;
        max-width: 360px;
        height: auto !important;
        margin: 0 auto;
    }

    .artist-station-ranking {
        padding: 17px;
    }

    .artist-metadata-cards {
        grid-template-columns: 1fr;
    }

    .artist-genres-card {
        grid-column: auto;
    }

    .artist-station-ranking-header {
        display: block;
    }

    .artist-station-ranking-total {
        display: inline-block;
        margin-top: 12px;
    }

    .artist-station-item {
        gap: 10px;
        padding: 11px 10px;
    }

    .artist-station-position {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
    }

    .top-chart-hero {
        padding: 19px;
    }

    .top-chart-heading {
        display: block;
    }

    .top-chart-period {
        display: inline-grid;
        margin-top: 16px;
    }

    .top-chart-entry > a {
        grid-template-columns: 38px 58px minmax(0, 1fr) 12px;
        gap: 10px;
        min-height: 82px;
        padding: 9px;
    }

    .top-chart-position {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.86rem;
    }

    .top-chart-entry img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 9px;
    }

    .top-chart-stats {
        grid-column: 2 / 4;
        display: flex;
        align-items: center;
        justify-items: initial;
        gap: 8px;
        padding-top: 1px;
    }

    .top-chart-arrow {
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .sidebar-stack > .sidebar-card {
        padding: 16px;
    }

    .artist-sidebar-track-grid .track-image {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Monthly statistics archive and detail pages. */
.monthly-statistics-page {
    min-width: 0;
}

.station-monthly-statistics-link {
    margin: 12px 0 18px;
    font-weight: 750;
}

.station-monthly-statistics-link a {
    color: var(--color-primary-dark) !important;
}

.monthly-statistics-header,
.monthly-statistics-hero {
    margin-bottom: 22px;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 12%, rgba(111, 187, 235, .4), transparent 32%),
        linear-gradient(125deg, #17283f 0%, #205493 58%, #2f6fbd 100%);
    box-shadow: 0 14px 32px rgba(29, 71, 119, .16);
}

.monthly-statistics-header h1,
.monthly-statistics-hero h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.04em;
}

.monthly-statistics-header > div:first-child > p:last-of-type,
.monthly-statistics-hero p:last-child {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .8);
    line-height: 1.55;
}

.monthly-statistics-eyebrow {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.monthly-statistics-header .monthly-statistics-eyebrow,
.monthly-statistics-hero .monthly-statistics-eyebrow {
    color: #b9dcf5;
}

.monthly-statistics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.monthly-statistics-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.monthly-statistics-hero h1 span {
    color: #b9dcf5;
    font-weight: 500;
}

.monthly-hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    max-width: 420px;
}

.monthly-hero-links a,
.monthly-all-link {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9) !important;
    background: rgba(255, 255, 255, .09);
    font-size: .76rem;
    font-weight: 750;
}

.monthly-hero-links a:hover,
.monthly-hero-links a:focus-visible,
.monthly-all-link:hover,
.monthly-all-link:focus-visible {
    color: var(--color-primary-dark) !important;
    background: #fff;
}

.monthly-month-pagination {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.monthly-month-pagination a,
.monthly-month-pagination > span {
    display: grid;
    align-content: center;
    min-height: 57px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
}

.monthly-month-pagination a:hover,
.monthly-month-pagination a:focus-visible {
    border-color: #a8c5e2;
    color: var(--color-primary-dark);
    background: #f5faff;
}

.monthly-month-pagination small {
    color: var(--color-muted);
    font-size: .68rem;
}

.monthly-month-pagination strong {
    color: var(--color-primary-dark);
    font-size: .82rem;
}

.monthly-month-pagination a:last-child,
.monthly-month-pagination > span:last-child {
    text-align: right;
}

.monthly-month-pagination .monthly-month-pagination-current {
    border-color: #bed4e8;
    background: #eef6fd;
    text-align: center;
}

.monthly-month-pagination .is-disabled {
    opacity: .58;
}

.monthly-period-directory {
    display: grid;
    gap: 16px;
}

.monthly-year-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.monthly-year-links a {
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-primary-dark);
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
}

.monthly-year-links a:hover,
.monthly-year-links a:focus-visible,
.monthly-year-links a.is-active {
    border-color: #b8cde2;
    background: #fff;
}

.monthly-year-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.monthly-period-card,
.monthly-card {
    padding: 21px;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    background: var(--color-surface);
    box-shadow: 0 8px 23px rgba(28, 45, 70, .06);
}

.monthly-period-card-header,
.monthly-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.monthly-period-card h2,
.monthly-card h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.monthly-card-heading > span,
.monthly-period-card-header > span {
    color: var(--color-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.monthly-all-link {
    border-color: var(--color-border);
    color: var(--color-primary-dark) !important;
    background: var(--color-surface-soft);
}

.monthly-station-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.monthly-station-country-divider {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    color: var(--color-primary);
}

.monthly-station-country-divider:first-child {
    margin-top: 0;
}

.monthly-station-country-divider::before,
.monthly-station-country-divider::after {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    content: "";
}

.monthly-station-country-divider span {
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.monthly-station-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-soft);
}

.monthly-station-links a:hover,
.monthly-station-links a:focus-visible {
    border-color: #a8c5e2;
    color: var(--color-primary-dark);
    background: #f5faff;
}

.monthly-station-links span {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-station-links small {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: .7rem;
}

.monthly-country-directory {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

.monthly-country-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.monthly-country-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 170px;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface-soft);
}

.monthly-country-links a:hover,
.monthly-country-links a:focus-visible {
    border-color: #a8c5e2;
    color: var(--color-primary-dark);
    background: #f5faff;
}

.monthly-country-links span {
    font-weight: 750;
}

.monthly-country-links small {
    color: var(--color-muted);
    font-size: .7rem;
    white-space: nowrap;
}

.monthly-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.monthly-summary-grid > div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 94px;
    padding: 14px;
    border: 1px solid #d6e3ef;
    border-radius: 12px;
    background: linear-gradient(145deg, #f8fbff, #eaf3fc);
}

.monthly-summary-grid span,
.monthly-summary-grid small {
    color: var(--color-muted);
    font-size: .72rem;
}

.monthly-summary-grid strong {
    color: var(--color-primary-dark);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-variant-numeric: tabular-nums;
}

.monthly-comparison-card {
    margin-bottom: 18px;
}

.monthly-statistics-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.monthly-ranking-card {
    min-width: 0;
}

.monthly-trends-card {
    margin-bottom: 18px;
}

.monthly-trends-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.monthly-trend-panel {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-top: 3px solid #22a06b;
    border-radius: 10px;
    background: #fbfdff;
}

.monthly-trend-panel.monthly-trend-down {
    border-top-color: #d45b67;
}

.monthly-trend-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    margin-bottom: 7px;
}

.monthly-trend-heading h3 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: .83rem;
}

.monthly-trend-heading span {
    color: var(--color-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.monthly-trend-panel .monthly-ranking-list li a {
    grid-template-columns: 25px 32px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 5px 2px;
}

.monthly-trend-panel .monthly-ranking-list img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.monthly-trend-panel .monthly-ranking-name {
    gap: 1px;
}

.monthly-trend-panel .monthly-ranking-name strong {
    font-size: .78rem;
}

.monthly-trend-panel .monthly-ranking-name small {
    font-size: .65rem;
}

.monthly-trend-up .monthly-ranking-list b {
    color: #168653;
}

.monthly-trend-down .monthly-ranking-list b {
    color: #bd3f4d;
}

.monthly-ranking-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monthly-ranking-list li a {
    display: grid;
    grid-template-columns: 28px 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 6px;
    border-radius: 9px;
}

.monthly-ranking-list li a:hover,
.monthly-ranking-list li a:focus-visible {
    color: inherit;
    background: var(--color-surface-soft);
}

.monthly-ranking-list img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e7ebf0;
    object-fit: cover;
}

.monthly-rank-number {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 7px;
    color: var(--color-muted);
    background: #edf1f5;
    font-size: .74rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.monthly-ranking-name {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.monthly-ranking-name strong,
.monthly-ranking-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-ranking-name strong {
    font-size: .88rem;
}

.monthly-ranking-name small {
    color: var(--color-muted);
    font-size: .73rem;
}

.monthly-ranking-list b,
.monthly-genre-list b {
    color: var(--color-primary-dark);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monthly-table-wrap {
    overflow-x: auto;
}

.monthly-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.monthly-table th,
.monthly-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.monthly-table thead th {
    color: var(--color-muted);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.monthly-table tbody th a {
    color: var(--color-primary-dark);
}

.monthly-table tbody tr:last-child th,
.monthly-table tbody tr:last-child td {
    border-bottom: 0;
}

.monthly-gender-card,
.monthly-genres-card {
    min-height: 370px;
}

.monthly-gender-chart {
    width: min(100%, 290px);
    height: 245px;
    margin: 8px auto 0;
}

.monthly-gender-tabs .gender-stat-tab-panel h3 {
    margin: 0;
    color: var(--color-muted);
    font-size: .85rem;
}

.monthly-gender-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    color: var(--color-muted);
    font-size: .78rem;
}

.monthly-gender-table b {
    color: var(--color-primary-dark);
}

.monthly-gender-comparison {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    color: var(--color-muted);
    font-size: .76rem;
}

.monthly-gender-comparison caption {
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: .7rem;
    text-align: left;
}

.monthly-gender-comparison th,
.monthly-gender-comparison td {
    padding: 6px 5px;
    border-bottom: 1px solid var(--color-border);
    text-align: right;
}

.monthly-gender-comparison th:first-child,
.monthly-gender-comparison td:first-child {
    text-align: left;
}

.monthly-gender-comparison thead th {
    color: var(--color-muted);
    font-size: .65rem;
    font-weight: 750;
}

.monthly-gender-comparison tbody th {
    color: var(--color-text);
    font-weight: 650;
}

.monthly-gender-comparison tbody td {
    color: var(--color-primary-dark);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.monthly-gender-comparison tbody tr:last-child th,
.monthly-gender-comparison tbody tr:last-child td {
    border-bottom: 0;
}

.gender-stat-comparison-intro {
    margin: 11px 0 0;
    color: var(--color-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.monthly-genre-list {
    display: grid;
    gap: 6px;
}

.monthly-genre-list a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 5px;
    border-bottom: 1px solid var(--color-border);
}

.monthly-genre-list a:last-child {
    border-bottom: 0;
}

.monthly-genre-list a:hover,
.monthly-genre-list a:focus-visible {
    color: var(--color-primary-dark);
}

.monthly-no-results,
.monthly-empty {
    color: var(--color-muted);
    line-height: 1.5;
}

.monthly-empty {
    padding: 34px;
    border: 1px dashed #bdcad8;
    border-radius: 12px;
    background: var(--color-surface-soft);
    text-align: center;
}

.monthly-empty p {
    margin-bottom: 0;
}

.monthly-note {
    padding: 13px 15px;
    border-left: 4px solid var(--color-primary);
    color: var(--color-muted);
    background: #f1f7fd;
    font-size: .78rem;
    line-height: 1.5;
}

.monthly-note strong {
    color: var(--color-primary-dark);
}

@media (max-width: 1100px) {
    .monthly-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .monthly-trends-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monthly-station-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .monthly-statistics-header,
    .monthly-statistics-hero {
        display: block;
    }

    .monthly-hero-links {
        justify-content: flex-start;
        margin-top: 18px;
    }

    .monthly-summary-grid,
    .monthly-statistics-columns,
    .monthly-trends-grid,
    .monthly-month-pagination {
        grid-template-columns: 1fr;
    }

    .monthly-month-pagination a:last-child,
    .monthly-month-pagination > span:last-child,
    .monthly-month-pagination .monthly-month-pagination-current {
        text-align: left;
    }

    .monthly-summary-grid > div {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .monthly-period-card,
    .monthly-card {
        padding: 16px;
    }

    .monthly-station-links {
        grid-template-columns: 1fr;
    }

    .monthly-period-card-header,
    .monthly-card-heading {
        display: block;
    }

    .monthly-card-heading > span {
        display: block;
        margin-top: 5px;
    }
}

/* Progressive enhancement and accessible data alternatives. */
html:not(.js-enabled) .sidebar {
    position: relative;
    inset: auto;
    left: auto;
    z-index: auto;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 12px 20px;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}

html:not(.js-enabled) .sidebar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

html:not(.js-enabled) .sidebar ul li {
    border-bottom: 0;
}

html:not(.js-enabled) .sidebar-overlay,
html:not(.js-enabled) .hamburger-menu {
    display: none !important;
}

html.js-enabled .sidebar:not(.is-open) {
    visibility: hidden;
    pointer-events: none;
}

html.js-enabled .sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
}

.chart-data-alternative {
    margin-top: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-soft);
}

.chart-data-alternative summary {
    padding: 10px 12px;
    color: var(--color-primary-dark);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.chart-table-wrap {
    max-height: 360px;
    overflow: auto;
    padding: 0 12px 12px;
}

.chart-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.chart-table-wrap caption {
    padding: 0 0 8px;
    color: var(--color-muted);
    font-weight: 700;
    text-align: left;
}

.chart-table-wrap th,
.chart-table-wrap td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.chart-table-wrap th:last-child,
.chart-table-wrap td:last-child {
    text-align: right;
}

.gender-stat-tabs {
    margin-top: 14px;
}

.gender-stat-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.gender-stat-tab {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.gender-stat-tab:hover,
.gender-stat-tab.is-active {
    color: var(--color-primary-dark);
}

.gender-stat-tab.is-active {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 2px 6px rgba(24, 37, 56, .12);
}

.gender-stat-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gender-stat-tab-panel[hidden] {
    display: none;
}

.my-playlist-item {
    grid-template-columns: 24px 64px minmax(0, 1fr) auto auto auto auto;
}

.my-playlist-move-up,
.my-playlist-move-down {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-primary-dark);
    background: #f7faff;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.my-playlist-move-up:hover,
.my-playlist-move-up:focus-visible,
.my-playlist-move-down:hover,
.my-playlist-move-down:focus-visible {
    border-color: var(--color-primary);
    background: #e8f2fc;
}

.my-playlist-move-up:disabled,
.my-playlist-move-down:disabled {
    cursor: not-allowed;
    opacity: .4;
}

@media (max-width: 640px) {
    .my-playlist-item {
        grid-template-columns: 18px 52px minmax(0, 1fr) auto auto;
    }

    .my-playlist-play {
        grid-column: 3;
        grid-row: 2;
        justify-self: start;
    }

    .my-playlist-move-up {
        grid-column: 4;
        grid-row: 2;
    }

    .my-playlist-move-down {
        grid-column: 5;
        grid-row: 2;
    }

    .my-playlist-remove {
        grid-column: 4;
        grid-row: 1;
    }
}

/* New-design theme toggle and dark mode. These selectors are intentionally
   scoped to the redesigned site; classic templates keep their existing look. */
.new-design-page .theme-toggle,
.new-design-proxy .theme-toggle {
    display: inline-flex;
    width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    order: 5;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    border: 1px solid #c2d8e9;
    border-radius: 10px;
    color: #174c78;
    background: #fff;
    box-shadow: 0 4px 12px #10243b0c;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.new-design-page .theme-toggle:hover,
.new-design-page .theme-toggle:focus-visible,
.new-design-proxy .theme-toggle:hover,
.new-design-proxy .theme-toggle:focus-visible { border-color: #8fb9d9; color: #103e66; background: #f1f8fd; }
.theme-toggle__icon { display: inline-grid; width: 18px; height: 18px; place-items: center; font-size: 1.1rem; line-height: 1; }
.new-design-page .theme-toggle__label,
.new-design-proxy .theme-toggle__label { display: none; }
.new-design-page .sidebar .new-design-drawer-theme,
.new-design-proxy .sidebar .new-design-drawer-theme { margin-bottom: 22px; }
.new-design-page .sidebar .theme-toggle--drawer,
.new-design-proxy .sidebar .theme-toggle--drawer {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 10px 12px;
    border-color: #ffffff2e;
    color: #fff;
    background: #ffffff12;
    box-shadow: none;
}
.new-design-page .sidebar .theme-toggle--drawer:hover,
.new-design-page .sidebar .theme-toggle--drawer:focus-visible,
.new-design-proxy .sidebar .theme-toggle--drawer:hover,
.new-design-proxy .sidebar .theme-toggle--drawer:focus-visible {
    border-color: #ffffff52;
    color: #fff;
    background: #ffffff20;
}
.new-design-page .sidebar .theme-toggle--drawer .theme-toggle__label,
.new-design-proxy .sidebar .theme-toggle--drawer .theme-toggle__label { display: inline; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.new-design-page,
html[data-theme="dark"] body.new-design-proxy {
    --color-primary: #78b9ed;
    --color-primary-dark: #a5d3f7;
    --color-text: #e8f1f8;
    --color-muted: #aebdcb;
    --color-page: #0c1521;
    --color-surface: #172536;
    --color-surface-soft: #1d2d3f;
    --color-border: #32485c;
    color: var(--color-text) !important;
    background: #0c1521 !important;
}
html[data-theme="dark"] body.new-design-page .new-site-menu,
html[data-theme="dark"] body.new-design-proxy .new-site-menu { color: #bfd0df !important; }
html[data-theme="dark"] body.new-design-page .site-logo,
html[data-theme="dark"] body.new-design-page .site-logo__name,
html[data-theme="dark"] body.new-design-page .site-logo__name strong,
html[data-theme="dark"] body.new-design-proxy .site-logo,
html[data-theme="dark"] body.new-design-proxy .site-logo__name,
html[data-theme="dark"] body.new-design-proxy .site-logo__name strong { color: #e8f3fb !important; }
html[data-theme="dark"] body.new-design-page .new-site-menu__action,
html[data-theme="dark"] body.new-design-page .hamburger-menu,
html[data-theme="dark"] body.new-design-page .site-search-trigger,
html[data-theme="dark"] body.new-design-proxy .new-site-menu__action,
html[data-theme="dark"] body.new-design-proxy .hamburger-menu,
html[data-theme="dark"] body.new-design-proxy .site-search-trigger,
html[data-theme="dark"] body.new-design-page .theme-toggle,
html[data-theme="dark"] body.new-design-proxy .theme-toggle {
    border-color: #40596f !important;
    color: #d9edfb !important;
    background: #1a2b3d !important;
    box-shadow: 0 5px 15px #020a1426;
}
html[data-theme="dark"] body.new-design-page .new-site-menu__action:hover,
html[data-theme="dark"] body.new-design-page .new-site-menu__action:focus-visible,
html[data-theme="dark"] body.new-design-page .hamburger-menu:hover,
html[data-theme="dark"] body.new-design-page .hamburger-menu:focus-visible,
html[data-theme="dark"] body.new-design-page .site-search-trigger:hover,
html[data-theme="dark"] body.new-design-page .site-search-trigger:focus-visible,
html[data-theme="dark"] body.new-design-page .theme-toggle:hover,
html[data-theme="dark"] body.new-design-page .theme-toggle:focus-visible,
html[data-theme="dark"] body.new-design-proxy .new-site-menu__action:hover,
html[data-theme="dark"] body.new-design-proxy .new-site-menu__action:focus-visible,
html[data-theme="dark"] body.new-design-proxy .hamburger-menu:hover,
html[data-theme="dark"] body.new-design-proxy .hamburger-menu:focus-visible,
html[data-theme="dark"] body.new-design-proxy .site-search-trigger:hover,
html[data-theme="dark"] body.new-design-proxy .site-search-trigger:focus-visible,
html[data-theme="dark"] body.new-design-proxy .theme-toggle:hover,
html[data-theme="dark"] body.new-design-proxy .theme-toggle:focus-visible { border-color: #6285a2 !important; background: #223a50 !important; }
html[data-theme="dark"] body.new-design-page .sidebar,
html[data-theme="dark"] body.new-design-proxy .sidebar { background: #101d2b !important; }
html[data-theme="dark"] body.new-design-page .new-site-footer,
html[data-theme="dark"] body.new-design-proxy .new-site-footer { color: #9eb0c1 !important; }

html[data-theme="dark"] body.new-design-page .homepage-concept__station,
html[data-theme="dark"] body.new-design-page .homepage-concept__discover-card,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-strip,
html[data-theme="dark"] body.new-design-page .homepage-concept__side-card,
html[data-theme="dark"] body.new-design-page .homepage-concept__country-switcher,
html[data-theme="dark"] body.new-design-page .new-design-panel,
html[data-theme="dark"] body.new-design-page .new-design-genre-featured,
html[data-theme="dark"] body.new-design-page .new-design-genre-summary > div,
html[data-theme="dark"] body.new-design-page .new-design-genre-stations,
html[data-theme="dark"] body.new-design-page .new-design-release-results,
html[data-theme="dark"] body.new-design-page .new-design-release-card,
html[data-theme="dark"] body.new-design-proxy .left-content,
html[data-theme="dark"] body.new-design-proxy .right-content,
html[data-theme="dark"] body.new-design-proxy .artists-list,
html[data-theme="dark"] body.new-design-proxy .year-releases,
html[data-theme="dark"] body.new-design-proxy .new-tracks,
html[data-theme="dark"] body.new-design-proxy .genre-list,
html[data-theme="dark"] body.new-design-proxy .top-list,
html[data-theme="dark"] body.new-design-proxy .monthly-statistics,
html[data-theme="dark"] body.new-design-proxy .station-status,
html[data-theme="dark"] body.new-design-proxy .privacy-content,
html[data-theme="dark"] body.new-design-proxy .search-results,
html[data-theme="dark"] body.new-design-proxy .new-design-track-details,
html[data-theme="dark"] body.new-design-proxy .plays-chart-section,
html[data-theme="dark"] body.new-design-proxy .artist-station-ranking,
html[data-theme="dark"] body.new-design-proxy .artist-popular-tracks,
html[data-theme="dark"] body.new-design-proxy .artist-sidebar-tracks,
html[data-theme="dark"] body.new-design-proxy .played-on,
html[data-theme="dark"] body.new-design-proxy .news-on-track,
html[data-theme="dark"] body.new-design-proxy .news-on-artist,
html[data-theme="dark"] body.new-design-proxy .top-33-stats,
html[data-theme="dark"] body.new-design-proxy .track-plays-list-section,
html[data-theme="dark"] body.new-design-proxy .collaboration-chart-card,
html[data-theme="dark"] body.new-design-proxy .collaboration-table-card,
html[data-theme="dark"] body.new-design-proxy .monthly-card,
html[data-theme="dark"] body.new-design-proxy .monthly-period-card {
    border-color: #32485c !important;
    background: #172536 !important;
    box-shadow: 0 8px 24px #020a141f !important;
}
html[data-theme="dark"] body.new-design-proxy .right-content > *:not(.artist-collaboration-action),
html[data-theme="dark"] body.new-design-proxy .artist-info .artist-metadata-card {
    border-color: #32485c !important;
    background: #172536 !important;
}
html[data-theme="dark"] body.new-design-proxy .artist-collaboration-action {
    border-color: #28567c !important;
    color: #fff !important;
    background: linear-gradient(135deg, #164b78, #103354) !important;
}
html[data-theme="dark"] body.new-design-page .homepage-concept__station a,
html[data-theme="dark"] body.new-design-page .homepage-concept__discover-card a,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-strip a,
html[data-theme="dark"] body.new-design-page .homepage-concept__side-card a,
html[data-theme="dark"] body.new-design-page .new-design-panel a,
html[data-theme="dark"] body.new-design-page .new-design-genre-featured a,
html[data-theme="dark"] body.new-design-page .new-design-genre-stations a,
html[data-theme="dark"] body.new-design-page .new-design-release-card a {
    color: #d6ebfa !important;
}
html[data-theme="dark"] body.new-design-page h2,
html[data-theme="dark"] body.new-design-page h3,
html[data-theme="dark"] body.new-design-page h4,
html[data-theme="dark"] body.new-design-proxy .left-content h2,
html[data-theme="dark"] body.new-design-proxy .left-content h3,
html[data-theme="dark"] body.new-design-proxy .left-content h4,
html[data-theme="dark"] body.new-design-proxy .right-content h2,
html[data-theme="dark"] body.new-design-proxy .right-content h3,
html[data-theme="dark"] body.new-design-proxy .right-content h4 { color: #e8f1f8 !important; }
html[data-theme="dark"] body.new-design-page .homepage-concept__station small,
html[data-theme="dark"] body.new-design-page .homepage-concept__discover-card p,
html[data-theme="dark"] body.new-design-page .homepage-concept__side-card p,
html[data-theme="dark"] body.new-design-page .new-design-panel p,
html[data-theme="dark"] body.new-design-page .new-design-panel small,
html[data-theme="dark"] body.new-design-proxy .left-content p,
html[data-theme="dark"] body.new-design-proxy .left-content small,
html[data-theme="dark"] body.new-design-proxy .left-content dt,
html[data-theme="dark"] body.new-design-proxy .right-content p,
html[data-theme="dark"] body.new-design-proxy .right-content small,
html[data-theme="dark"] body.new-design-proxy .right-content dt { color: #afc0ce !important; }
html[data-theme="dark"] body.new-design-page input,
html[data-theme="dark"] body.new-design-page select,
html[data-theme="dark"] body.new-design-page textarea,
html[data-theme="dark"] body.new-design-proxy input,
html[data-theme="dark"] body.new-design-proxy select,
html[data-theme="dark"] body.new-design-proxy textarea {
    border-color: #40596f !important;
    color: #edf5fb !important;
    background: #1a2b3d !important;
}
html[data-theme="dark"] body.new-design-page input::placeholder,
html[data-theme="dark"] body.new-design-proxy input::placeholder { color: #94a8b8 !important; }
html[data-theme="dark"] body.new-design-page form:not(.homepage-concept__search),
html[data-theme="dark"] body.new-design-proxy form:not(.collaboration-artist-search) {
    border-color: #32485c !important;
    background: #142333 !important;
}
html[data-theme="dark"] body.new-design-page table,
html[data-theme="dark"] body.new-design-page th,
html[data-theme="dark"] body.new-design-page td,
html[data-theme="dark"] body.new-design-proxy table,
html[data-theme="dark"] body.new-design-proxy th,
html[data-theme="dark"] body.new-design-proxy td { border-color: #32485c !important; }
html[data-theme="dark"] body.new-design-page .new-design-genre-letter a,
html[data-theme="dark"] body.new-design-page .new-design-genre-artist-grid a,
html[data-theme="dark"] body.new-design-page .new-design-release-pagination a,
html[data-theme="dark"] body.new-design-proxy .track-metadata > div,
html[data-theme="dark"] body.new-design-proxy .track-first-heard,
html[data-theme="dark"] body.new-design-proxy .track-preview,
html[data-theme="dark"] body.new-design-proxy .spotify-link {
    border-color: #3b5369 !important;
    background: #1d2d3f !important;
}
html[data-theme="dark"] body.new-design-page .new-design-genre-letter a:hover,
html[data-theme="dark"] body.new-design-page .new-design-genre-letter a:focus-visible,
html[data-theme="dark"] body.new-design-page .new-design-genre-artist-grid a:hover,
html[data-theme="dark"] body.new-design-page .new-design-genre-artist-grid a:focus-visible,
html[data-theme="dark"] body.new-design-proxy .artist-popular-track-item a:hover,
html[data-theme="dark"] body.new-design-proxy .artist-popular-track-item a:focus-visible { background: #22384c !important; }
@media (max-width: 560px) {
    .new-design-page .theme-toggle,
    .new-design-proxy .theme-toggle { width: 40px; padding-right: 0; padding-left: 0; }
}
@media (max-width: 860px) {
    .new-design-page .new-site-menu,
    .new-design-proxy .new-site-menu { order: 7 !important; }
}

/* Complete dark surfaces for the redesigned pages. Page-specific stylesheets
   load after this file, so these overrides deliberately use scoped !important
   declarations to prevent light component cards from leaking through. */
html[data-theme="dark"] body.new-design-page .homepage-concept__stations,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-strip,
html[data-theme="dark"] body.new-design-page .new-design-station-summary,
html[data-theme="dark"] body.new-design-page .new-design-status-guide,
html[data-theme="dark"] body.new-design-page .new-design-chart-controls,
html[data-theme="dark"] body.new-design-page .new-design-genre-search {
    border-color: #32485c !important;
    color: #e8f1f8 !important;
    background: #172536 !important;
    box-shadow: 0 8px 24px #020a141f !important;
}

html[data-theme="dark"] body.new-design-page .homepage-concept__station,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-list a,
html[data-theme="dark"] body.new-design-page .new-design-artist-ranking li a,
html[data-theme="dark"] body.new-design-page .new-design-chart-list li,
html[data-theme="dark"] body.new-design-page .new-design-chart-list li.is-podium,
html[data-theme="dark"] body.new-design-page .new-design-status-summary article {
    border-color: #32485c !important;
    color: #e8f1f8 !important;
    background: #1d2d3f !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.new-design-page .new-design-status-summary {
    border-color: #32485c !important;
    background: #32485c !important;
    box-shadow: 0 8px 24px #020a141f !important;
}

html[data-theme="dark"] body.new-design-page .new-design-chart-list .is-podium a,
html[data-theme="dark"] body.new-design-page .new-design-status-row.is-critical {
    background: linear-gradient(90deg, #20394b, transparent 68%) !important;
}

html[data-theme="dark"] body.new-design-page .new-design-chart-list li,
html[data-theme="dark"] body.new-design-page .new-design-status-row,
html[data-theme="dark"] body.new-design-page .new-design-playlist li,
html[data-theme="dark"] body.new-design-page .new-design-chart-header,
html[data-theme="dark"] body.new-design-page .homepage-concept__track + .homepage-concept__track,
html[data-theme="dark"] body.new-design-page .homepage-concept__status-link {
    border-color: #32485c !important;
}

html[data-theme="dark"] body.new-design-page .new-design-artist-ranking li a,
html[data-theme="dark"] body.new-design-page .new-design-chart-list a,
html[data-theme="dark"] body.new-design-page .new-design-playlist a,
html[data-theme="dark"] body.new-design-page .new-design-status-station a,
html[data-theme="dark"] body.new-design-page .new-design-status-summary strong,
html[data-theme="dark"] body.new-design-page .homepage-concept__stations strong,
html[data-theme="dark"] body.new-design-page .homepage-concept__stations .homepage-concept__track-title,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-list strong,
html[data-theme="dark"] body.new-design-page .new-design-station-summary dd {
    color: #e8f1f8 !important;
}

html[data-theme="dark"] body.new-design-page .new-design-artist-ranking em,
html[data-theme="dark"] body.new-design-page .new-design-chart-track small,
html[data-theme="dark"] body.new-design-page .new-design-chart-move,
html[data-theme="dark"] body.new-design-page .new-design-playlist small,
html[data-theme="dark"] body.new-design-page .new-design-playlist time,
html[data-theme="dark"] body.new-design-page .new-design-station-summary dt,
html[data-theme="dark"] body.new-design-page .new-design-station-summary dd small,
html[data-theme="dark"] body.new-design-page .new-design-station-summary .new-design-station-genres > span,
html[data-theme="dark"] body.new-design-page .new-design-status-summary small,
html[data-theme="dark"] body.new-design-page .new-design-status-guide div > span,
html[data-theme="dark"] body.new-design-page .new-design-status-guide ul,
html[data-theme="dark"] body.new-design-page .new-design-status-station span,
html[data-theme="dark"] body.new-design-page .new-design-status-current > span,
html[data-theme="dark"] body.new-design-page .new-design-status-days,
html[data-theme="dark"] body.new-design-page .new-design-status-history small,
html[data-theme="dark"] body.new-design-page .homepage-concept__release-list small {
    color: #aebdcb !important;
}

html[data-theme="dark"] body.new-design-page .new-design-alphabet a,
html[data-theme="dark"] body.new-design-page .new-design-station-genres a,
html[data-theme="dark"] body.new-design-page .new-design-station-summary .new-design-station-genres a {
    color: #a9d8fa !important;
    background: #243b50 !important;
}

html[data-theme="dark"] body.new-design-page .new-design-status-pill {
    color: #9de0bd !important;
    background: #173b2d !important;
}
html[data-theme="dark"] body.new-design-page .new-design-status-pill.is-warning {
    color: #f5cb82 !important;
    background: #493719 !important;
}
html[data-theme="dark"] body.new-design-page .new-design-status-pill.is-critical {
    color: #ffadb3 !important;
    background: #48252a !important;
}
html[data-theme="dark"] body.new-design-page .new-design-status-graph i.is-future { background: #32485c !important; }
html[data-theme="dark"] body.new-design-page .new-design-status-graph i.is-day-start { box-shadow: -1px 0 #7890a4 !important; }

html[data-theme="dark"] body.new-design-proxy .monthly-year-pagination,
html[data-theme="dark"] body.new-design-proxy .monthly-month-pagination a,
html[data-theme="dark"] body.new-design-proxy .monthly-month-pagination > span,
html[data-theme="dark"] body.new-design-proxy .monthly-station-links a,
html[data-theme="dark"] body.new-design-proxy .monthly-country-links a,
html[data-theme="dark"] body.new-design-proxy .monthly-summary-grid > div,
html[data-theme="dark"] body.new-design-proxy .monthly-trend-panel,
html[data-theme="dark"] body.new-design-proxy .artist-social-link,
html[data-theme="dark"] body.new-design-proxy .artist-genre-links a,
html[data-theme="dark"] body.new-design-proxy .artist-sidebar-track-year,
html[data-theme="dark"] body.new-design-proxy .track-play-item,
html[data-theme="dark"] body.new-design-proxy .new-design-my-radio-explanation,
html[data-theme="dark"] body.new-design-proxy .top-33-stats dl > div,
html[data-theme="dark"] body.new-design-proxy .my-radio-card,
html[data-theme="dark"] body.new-design-proxy .my-radio-manage,
html[data-theme="dark"] body.new-design-proxy .my-radio-toggle,
html[data-theme="dark"] body.new-design-proxy .my-radio-retry {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #1d2d3f !important;
}

html[data-theme="dark"] body.new-design-proxy .monthly-year-links a:hover,
html[data-theme="dark"] body.new-design-proxy .monthly-year-links a:focus-visible,
html[data-theme="dark"] body.new-design-proxy .monthly-year-links a.is-active,
html[data-theme="dark"] body.new-design-proxy .monthly-month-pagination a:hover,
html[data-theme="dark"] body.new-design-proxy .monthly-station-links a:hover,
html[data-theme="dark"] body.new-design-proxy .monthly-country-links a:hover,
html[data-theme="dark"] body.new-design-proxy .track-play-item:hover,
html[data-theme="dark"] body.new-design-proxy .track-play-item:focus-visible {
    border-color: #6285a2 !important;
    color: #e8f1f8 !important;
    background: #22384c !important;
}

html[data-theme="dark"] body.new-design-proxy .monthly-rank-number,
html[data-theme="dark"] body.new-design-proxy .artist-station-position,
html[data-theme="dark"] body.new-design-proxy .artist-popular-track-position {
    color: #a9d8fa !important;
    background: #243b50 !important;
}

html[data-theme="dark"] body.new-design-page #scrollTopBtn,
html[data-theme="dark"] body.new-design-proxy #scrollTopBtn {
    border-color: #58748c;
    color: #f4f9fd;
    background: #162b3e;
    box-shadow: 0 7px 18px #020a1473;
}
html[data-theme="dark"] body.new-design-page #scrollTopBtn:hover,
html[data-theme="dark"] body.new-design-page #scrollTopBtn:focus-visible,
html[data-theme="dark"] body.new-design-proxy #scrollTopBtn:hover,
html[data-theme="dark"] body.new-design-proxy #scrollTopBtn:focus-visible {
    border-color: #80b8df;
    background: #245f8f;
}
html[data-theme="dark"] body.new-design-proxy .artist-station-bar { background: #32485c !important; }
html[data-theme="dark"] body.new-design-proxy .played-on-summary { background: #20384b !important; }
html[data-theme="dark"] body.new-design-proxy .artist-station-item,
html[data-theme="dark"] body.new-design-proxy .artist-popular-track-item,
html[data-theme="dark"] body.new-design-proxy .played-on-item,
html[data-theme="dark"] body.new-design-proxy .artist-station-ranking-header,
html[data-theme="dark"] body.new-design-proxy .artist-popular-tracks-header,
html[data-theme="dark"] body.new-design-proxy .plays-chart-header,
html[data-theme="dark"] body.new-design-proxy .track-plays-list-header,
html[data-theme="dark"] body.new-design-proxy .my-radio-list > li + li {
    border-color: #32485c !important;
}

html[data-theme="dark"] body.new-design-proxy .artist-station-item,
html[data-theme="dark"] body.new-design-proxy .artist-popular-track-item,
html[data-theme="dark"] body.new-design-proxy .played-on-item {
    background: #1d2d3f !important;
    box-shadow: none !important;
}
html[data-theme="dark"] body.new-design-proxy .artist-station-ranking-total,
html[data-theme="dark"] body.new-design-proxy .track-plays-list-header > span {
    border-color: #40596f !important;
    color: #a9d8fa !important;
    background: #243b50 !important;
}

html[data-theme="dark"] body.new-design-proxy .top-33-stats,
html[data-theme="dark"] body.new-design-proxy .sidebar-stat-card,
html[data-theme="dark"] body.new-design-proxy .youtube-view-count-card {
    color: #e8f1f8 !important;
    background: linear-gradient(145deg, #1d2d3f, #172536) !important;
}
html[data-theme="dark"] body.new-design-proxy .youtube-daily-views-card {
    border-color: #32485c !important;
    color: #e8f1f8 !important;
    background: #172536 !important;
}
html[data-theme="dark"] body.new-design-proxy .plays-chart {
    border-color: #32485c !important;
    color: #aebdcb !important;
    background: #111d2a !important;
}
/* The collaboration network has its own label palette and remains a
   deliberate light data surface until that visualization is themed too. */
html[data-theme="dark"] body.new-design-proxy .collaboration-chart {
    color: #10243b !important;
    background: #f8fbfe !important;
}

html[data-theme="dark"] body.new-design-page .privacy-banner,
html[data-theme="dark"] body.new-design-page .privacy-modal-dialog,
html[data-theme="dark"] body.new-design-proxy .privacy-banner,
html[data-theme="dark"] body.new-design-proxy .privacy-modal-dialog {
    border: 1px solid #40596f !important;
    color: #e8f1f8 !important;
    background: rgba(23, 37, 54, .98) !important;
    box-shadow: 0 20px 60px #020a1470 !important;
}
html[data-theme="dark"] body.new-design-page .privacy-choice,
html[data-theme="dark"] body.new-design-page .privacy-button-secondary,
html[data-theme="dark"] body.new-design-page .privacy-settings-button,
html[data-theme="dark"] body.new-design-page .consent-media-placeholder,
html[data-theme="dark"] body.new-design-page .consent-audio-placeholder,
html[data-theme="dark"] body.new-design-page .consent-media-button,
html[data-theme="dark"] body.new-design-proxy .privacy-choice,
html[data-theme="dark"] body.new-design-proxy .privacy-button-secondary,
html[data-theme="dark"] body.new-design-proxy .privacy-settings-button,
html[data-theme="dark"] body.new-design-proxy .consent-media-placeholder,
html[data-theme="dark"] body.new-design-proxy .consent-audio-placeholder,
html[data-theme="dark"] body.new-design-proxy .consent-media-button {
    border-color: #40596f !important;
    color: #d9edfb !important;
    background: #1d2d3f !important;
}
html[data-theme="dark"] body.new-design-page .privacy-banner a,
html[data-theme="dark"] body.new-design-page .privacy-modal a,
html[data-theme="dark"] body.new-design-proxy .privacy-banner a,
html[data-theme="dark"] body.new-design-proxy .privacy-modal a { color: #8fc8f1 !important; }
html[data-theme="dark"] body.new-design-page .privacy-modal-backdrop,
html[data-theme="dark"] body.new-design-proxy .privacy-modal-backdrop { background: rgba(2, 9, 18, .75) !important; }

/* Keep the current section visible in the persistent SPA navigation. */
.new-design-page .new-site-menu a[aria-current="page"]:not(.new-site-menu__action),
.new-design-proxy .new-site-menu a[aria-current="page"]:not(.new-site-menu__action) {
    color: #1d639e !important;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-color: #67a8d5;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.new-design-page .new-site-menu__action[aria-current="page"],
.new-design-proxy .new-site-menu__action[aria-current="page"] {
    border-color: #76add3 !important;
    color: #155786 !important;
    background: #eaf4fc !important;
}
.new-design-page .new-site-menu .new-site-menu__action,
.new-design-proxy .new-site-menu .new-site-menu__action {
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 12px;
    white-space: nowrap;
}
html[data-theme="dark"] body.new-design-page .new-site-menu a[aria-current="page"]:not(.new-site-menu__action),
html[data-theme="dark"] body.new-design-proxy .new-site-menu a[aria-current="page"]:not(.new-site-menu__action) {
    color: #91d5ff !important;
    text-decoration-color: #4f94c2;
}
html[data-theme="dark"] body.new-design-page .new-site-menu__action[aria-current="page"],
html[data-theme="dark"] body.new-design-proxy .new-site-menu__action[aria-current="page"] {
    border-color: #618fb1 !important;
    color: #bde6ff !important;
    background: #23425a !important;
}
html[data-theme="dark"] body.new-design-page .new-design-drawer-nav a[aria-current="page"],
html[data-theme="dark"] body.new-design-proxy .new-design-drawer-nav a[aria-current="page"] {
    color: #a9dcff !important;
}

/* Remaining redesigned components that carry fixed light colors in their
   page-specific stylesheets. */
html[data-theme="dark"] body.new-design-page .homepage-concept__filter,
html[data-theme="dark"] body.new-design-page .homepage-concept__country-option,
html[data-theme="dark"] body.new-design-page .homepage-concept__my-radio a,
html[data-theme="dark"] body.new-design-page .new-design-new-filters,
html[data-theme="dark"] body.new-design-page .new-design-new-card a,
html[data-theme="dark"] body.new-design-page .new-design-genre-featured-grid a,
html[data-theme="dark"] body.new-design-page .new-design-genre-pagination > a,
html[data-theme="dark"] body.new-design-page .new-design-genre-pagination > div a,
html[data-theme="dark"] body.new-design-page .new-design-stations-summary > div,
html[data-theme="dark"] body.new-design-page .new-design-station-directory-grid a,
html[data-theme="dark"] body.new-design-page .new-design-station-info-card,
html[data-theme="dark"] body.new-design-page .new-design-station-meta div,
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-program-tracks li,
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-date-picker,
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-date-step,
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-date-shortcuts a,
html[data-theme="dark"] body.new-design-page .new-design-release-filters,
html[data-theme="dark"] body.new-design-page .new-design-release-pagination > a,
html[data-theme="dark"] body.new-design-page .new-design-release-pagination > div a,
html[data-theme="dark"] body.new-design-page .new-design-chart-panel .new-design-section-heading button,
html[data-theme="dark"] body.new-design-page .new-design-artist-page .artist-social-link,
html[data-theme="dark"] body.new-design-page .new-design-search-page .full-search-sections a,
html[data-theme="dark"] body.new-design-proxy .menu,
html[data-theme="dark"] body.new-design-proxy .new-track-card,
html[data-theme="dark"] body.new-design-proxy .playlist-date-picker,
html[data-theme="dark"] body.new-design-proxy .playlist-date-step,
html[data-theme="dark"] body.new-design-proxy .playlist-date-shortcuts a,
html[data-theme="dark"] body.new-design-proxy .playlist-program-group,
html[data-theme="dark"] body.new-design-proxy .playlist-track-card .song,
html[data-theme="dark"] body.new-design-proxy .my-playlist-page #my-playlist-empty,
html[data-theme="dark"] body.new-design-proxy .my-playlist-page .my-playlist-item,
html[data-theme="dark"] body.new-design-proxy .track-plays-page .track-plays-breadcrumb a,
html[data-theme="dark"] body.new-design-proxy .collaboration-artist-results,
html[data-theme="dark"] body.new-design-proxy .collaboration-artist-page-link,
html[data-theme="dark"] body.new-design-page .site-search-dialog,
html[data-theme="dark"] body.new-design-proxy .site-search-dialog,
html[data-theme="dark"] body.new-design-page .site-search-close,
html[data-theme="dark"] body.new-design-proxy .site-search-close,
html[data-theme="dark"] body.new-design-page .site-search-result,
html[data-theme="dark"] body.new-design-proxy .site-search-result {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #1d2d3f !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.new-design-page .homepage-concept__country-option:hover,
html[data-theme="dark"] body.new-design-page .homepage-concept__country-option:focus-visible,
html[data-theme="dark"] body.new-design-page .new-design-new-card a:hover,
html[data-theme="dark"] body.new-design-page .new-design-station-directory-grid a:hover,
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-program-tracks li:hover,
html[data-theme="dark"] body.new-design-proxy .playlist-date-shortcuts a:hover,
html[data-theme="dark"] body.new-design-proxy .playlist-track-card > a:hover .song,
html[data-theme="dark"] body.new-design-proxy .playlist-track-card > a:focus-visible .song,
html[data-theme="dark"] body.new-design-page .site-search-result:hover,
html[data-theme="dark"] body.new-design-proxy .site-search-result:hover {
    border-color: #6285a2 !important;
    color: #f2f8fc !important;
    background: #263f55 !important;
}

html[data-theme="dark"] body.new-design-page .homepage-concept__country-option.is-active,
html[data-theme="dark"] body.new-design-page .new-design-genre-pagination a[aria-current="page"],
html[data-theme="dark"] body.new-design-page .new-design-release-pagination a[aria-current="page"],
html[data-theme="dark"] body.new-design-page .new-design-station-page .playlist-date-shortcuts a[aria-current="date"],
html[data-theme="dark"] body.new-design-proxy .playlist-date-shortcuts a[aria-current="date"] {
    border-color: #5ca0d0 !important;
    color: #fff !important;
    background: #236b9f !important;
}

html[data-theme="dark"] body.new-design-page .homepage-concept__my-radio a {
    border: 1px solid #4c6b84 !important;
    color: #dff1ff !important;
    background: #243b50 !important;
}
html[data-theme="dark"] body.new-design-page .homepage-concept__my-radio a:hover,
html[data-theme="dark"] body.new-design-page .homepage-concept__my-radio a:focus-visible {
    border-color: #78acd0 !important;
    background: #2b4b66 !important;
}
html[data-theme="dark"] body.new-design-page .homepage-concept__freshness-heading > span {
    color: #f5cb82 !important;
    background: #493719 !important;
}

html[data-theme="dark"] body.new-design-page .site-search-form input,
html[data-theme="dark"] body.new-design-proxy .site-search-form input,
html[data-theme="dark"] body.new-design-page .station-filter-panel,
html[data-theme="dark"] body.new-design-proxy .station-filter-panel,
html[data-theme="dark"] body.new-design-page .my-radio-panel,
html[data-theme="dark"] body.new-design-proxy .my-radio-panel,
html[data-theme="dark"] body.new-design-page .my-radio-card,
html[data-theme="dark"] body.new-design-page .my-radio-manage,
html[data-theme="dark"] body.new-design-page .my-radio-toggle,
html[data-theme="dark"] body.new-design-page .my-radio-retry,
html[data-theme="dark"] body.new-design-page .my-radio-home-toggle {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #172536 !important;
}
html[data-theme="dark"] body.new-design-page .my-radio-card,
html[data-theme="dark"] body.new-design-proxy .my-radio-card { background: #1d2d3f !important; }
html[data-theme="dark"] body.new-design-page .my-radio-rank,
html[data-theme="dark"] body.new-design-proxy .my-radio-rank {
    color: #a9d8fa !important;
    background: #243b50 !important;
}

html[data-theme="dark"] body.new-design-page .top-33-history-section,
html[data-theme="dark"] body.new-design-page .tip-33-history-section .top-33-history-header,
html[data-theme="dark"] body.new-design-page .top-33-history-header,
html[data-theme="dark"] body.new-design-page .top-33-history-summary > span,
html[data-theme="dark"] body.new-design-page .top-33-history-legend,
html[data-theme="dark"] body.new-design-page .top-33-history-legend span,
html[data-theme="dark"] body.new-design-page .top-33-history-chart-shell,
html[data-theme="dark"] body.new-design-page .top-33-history-chart-caption,
html[data-theme="dark"] body.new-design-page .top-33-history-message,
html[data-theme="dark"] body.new-design-proxy .top-33-history-section,
html[data-theme="dark"] body.new-design-proxy .tip-33-history-section .top-33-history-header,
html[data-theme="dark"] body.new-design-proxy .top-33-history-header,
html[data-theme="dark"] body.new-design-proxy .top-33-history-summary > span,
html[data-theme="dark"] body.new-design-proxy .top-33-history-legend,
html[data-theme="dark"] body.new-design-proxy .top-33-history-legend span,
html[data-theme="dark"] body.new-design-proxy .top-33-history-chart-shell,
html[data-theme="dark"] body.new-design-proxy .top-33-history-chart,
html[data-theme="dark"] body.new-design-proxy .top-33-history-chart-caption,
html[data-theme="dark"] body.new-design-proxy .top-33-history-message {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #172536 !important;
}

html[data-theme="dark"] body.new-design-page .top-chart-entry > a,
html[data-theme="dark"] body.new-design-page .top-archive-years details,
html[data-theme="dark"] body.new-design-page .top-archive-countries a,
html[data-theme="dark"] body.new-design-page .featured-artists,
html[data-theme="dark"] body.new-design-page .homepage-tip-33,
html[data-theme="dark"] body.new-design-proxy .top-chart-entry > a,
html[data-theme="dark"] body.new-design-proxy .top-archive-years details,
html[data-theme="dark"] body.new-design-proxy .top-archive-countries a,
html[data-theme="dark"] body.new-design-proxy .featured-artists,
html[data-theme="dark"] body.new-design-proxy .homepage-tip-33,
html[data-theme="dark"] body.new-design-proxy .station-health-summary article,
html[data-theme="dark"] body.new-design-proxy .station-health-row {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #1d2d3f !important;
}

html[data-theme="dark"] body.new-design-page .new-design-new-card strong,
html[data-theme="dark"] body.new-design-page .new-design-genre-featured-grid strong,
html[data-theme="dark"] body.new-design-page .new-design-station-directory-grid strong,
html[data-theme="dark"] body.new-design-page .new-design-station-info-card h2,
html[data-theme="dark"] body.new-design-page .new-design-station-meta strong,
html[data-theme="dark"] body.new-design-page .new-design-search-page .full-search-sections a,
html[data-theme="dark"] body.new-design-proxy .new-track-card strong,
html[data-theme="dark"] body.new-design-proxy .playlist-program-group h2,
html[data-theme="dark"] body.new-design-proxy .playlist-track-card .song h3,
html[data-theme="dark"] body.new-design-proxy .my-playlist-item strong,
html[data-theme="dark"] body.new-design-page .site-search-result strong,
html[data-theme="dark"] body.new-design-proxy .site-search-result strong {
    color: #e8f1f8 !important;
}
html[data-theme="dark"] body.new-design-page .new-design-new-card small,
html[data-theme="dark"] body.new-design-page .new-design-genre-featured-grid small,
html[data-theme="dark"] body.new-design-page .new-design-station-directory-grid small,
html[data-theme="dark"] body.new-design-page .new-design-station-meta span,
html[data-theme="dark"] body.new-design-proxy .new-track-card small,
html[data-theme="dark"] body.new-design-proxy .playlist-track-card .song p,
html[data-theme="dark"] body.new-design-proxy .my-playlist-item small,
html[data-theme="dark"] body.new-design-page .site-search-result small,
html[data-theme="dark"] body.new-design-proxy .site-search-result small {
    color: #aebdcb !important;
}

html[data-theme="dark"] body.new-design-page .popular-artists,
html[data-theme="dark"] body.new-design-page .artist-result-card,
html[data-theme="dark"] body.new-design-page .same-title-card,
html[data-theme="dark"] body.new-design-page .track-facts-card,
html[data-theme="dark"] body.new-design-page .genre-card,
html[data-theme="dark"] body.new-design-page .release-date-note,
html[data-theme="dark"] body.new-design-page .playlist-empty,
html[data-theme="dark"] body.new-design-page .playlist-player-controls button,
html[data-theme="dark"] body.new-design-page .persistent-player-host .playlist-player-card,
html[data-theme="dark"] body.new-design-proxy .popular-artists,
html[data-theme="dark"] body.new-design-proxy .artist-result-card,
html[data-theme="dark"] body.new-design-proxy .same-title-card,
html[data-theme="dark"] body.new-design-proxy .track-facts-card,
html[data-theme="dark"] body.new-design-proxy .genre-card,
html[data-theme="dark"] body.new-design-proxy .release-date-note,
html[data-theme="dark"] body.new-design-proxy .playlist-empty,
html[data-theme="dark"] body.new-design-proxy .playlist-player-controls button,
html[data-theme="dark"] body.new-design-proxy .persistent-player-host .playlist-player-card {
    border-color: #3b5369 !important;
    color: #e8f1f8 !important;
    background: #1d2d3f !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.new-design-page .ui-datepicker.ui-widget,
html[data-theme="dark"] body.new-design-proxy .ui-datepicker.ui-widget {
    border-color: #40596f !important;
    color: #e8f1f8 !important;
    background: #172536 !important;
}
html[data-theme="dark"] body.new-design-page .ui-datepicker td a,
html[data-theme="dark"] body.new-design-page .ui-datepicker td span,
html[data-theme="dark"] body.new-design-proxy .ui-datepicker td a,
html[data-theme="dark"] body.new-design-proxy .ui-datepicker td span {
    border-color: transparent !important;
    color: #d9edfb !important;
    background: #1d2d3f !important;
}
html[data-theme="dark"] body.new-design-page .ui-datepicker td a:hover,
html[data-theme="dark"] body.new-design-proxy .ui-datepicker td a:hover {
    color: #fff !important;
    background: #2b4b66 !important;
}

html[data-theme="dark"] body.new-design-page .spa-loading-indicator__content,
html[data-theme="dark"] body.new-design-proxy .spa-loading-indicator__content {
    border-color: #40596f !important;
    color: #e8f1f8 !important;
    background: rgba(23, 37, 54, .98) !important;
    box-shadow: 0 10px 30px #020a145c !important;
}
html[data-theme="dark"] body.new-design-page .spa-loading-spinner,
html[data-theme="dark"] body.new-design-proxy .spa-loading-spinner {
    border-color: #40596f !important;
    border-top-color: #91d5ff !important;
}

html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:hover .song,
html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:focus-visible .song,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:hover .song,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:focus-visible .song {
    color: #e8f1f8 !important;
    background: #263f55 !important;
}
html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:hover .song .details,
html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:focus-visible .song .details,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:hover .song .details,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:focus-visible .song .details {
    color: #aebdcb !important;
}
html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:hover .song h3,
html[data-theme="dark"] body.new-design-track-proxy .same-title-card a:focus-visible .song h3,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:hover .song h3,
html[data-theme="dark"] body.new-design-track-proxy .artists-on-track a:focus-visible .song h3 {
    color: #f2f8fc !important;
}