/**
 * Beatstats frontend stylesheet
 *
 * Standalone presentation layer for the rebuilt Beatstats website.
 */

:root {
  color-scheme: dark;
  --bg: #171717;
  --bg-soft: #1c1c1c;
  --sidebar: #111111;
  --surface: #222222;
  --surface-2: #272727;
  --surface-3: #2d2d2d;
  --surface-4: #343434;
  --line: #3a3a3a;
  --line-soft: rgba(255,255,255,.075);
  --text: #f4f4f4;
  --muted: #aaaaaa;
  --muted-2: #747474;
  --lime: #b4e61d;
  --lime-soft: rgba(180,230,29,.12);
  --lime-border: rgba(180,230,29,.36);
  --pink: #ff718f;
  --cyan: #4ddbd8;
  --orange: #ff9a55;
  --red: #ff5f64;
  --shadow: 0 24px 80px rgba(0,0,0,.34);
  --radius: 16px;
  --sidebar-width: 246px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: linear-gradient(180deg, #181818 0, var(--bg) 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }
body.search-open, body.genre-open, body.sidebar-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
kbd { display: inline-grid; min-width: 22px; height: 22px; padding: 0 5px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #0d1215; color: var(--muted); font-size: 11px; font-weight: 700; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--line-soft); background: linear-gradient(180deg, #151515, #101010 72%); box-shadow: 16px 0 50px rgba(0,0,0,.12); }
.sidebar-head { display: flex; height: 84px; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.brand img { width: 172px; height: auto; }
.sidebar-close { display: none; }
.icon-button { display: inline-grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }
.icon-button:hover { border-color: #3a464e; background: var(--surface-3); }
.sidebar-close { display: none; }
.sidebar-search { display: flex; height: 42px; align-items: center; gap: 10px; margin: 10px 14px 18px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: #11171b; color: var(--muted); cursor: pointer; text-align: left; }
.sidebar-search .icon { width: 17px; }
.sidebar-search span { flex: 1; font-size: 12px; }
.sidebar-search:hover { border-color: var(--lime-border); color: var(--text); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 0 12px; }
.nav-group + .nav-group { margin-top: 24px; }
.nav-label { margin: 0 10px 7px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; width: 100%; min-height: 42px; align-items: center; gap: 12px; padding: 0 11px; border: 0; border-radius: 11px; background: transparent; color: #abb4ba; cursor: pointer; font-weight: 650; text-align: left; }
.nav-item .icon { width: 18px; }
.nav-item:hover { background: rgba(255,255,255,.035); color: #eef1f3; }
.nav-item.is-active { border: 1px solid rgba(168,235,18,.13); background: linear-gradient(90deg, rgba(168,235,18,.13), rgba(168,235,18,.045)); color: #eaffb5; }
.nav-item.is-active .icon { color: var(--lime); }
.sidebar-bottom { display: grid; gap: 10px; padding: 12px 14px 16px; }
.update-card { display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: var(--muted); }
.update-card > span:last-child { display: grid; }
.update-card strong { color: #b8c1c6; font-size: 10px; }
.update-card small { font-size: 9px; }
.sidebar-backdrop { display: none; }

.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; height: 76px; align-items: center; gap: 16px; padding: 0 clamp(20px, 2.5vw, 38px); border-bottom: 1px solid var(--line-soft); background: rgba(24,24,24,.94); backdrop-filter: blur(18px); }
.mobile-menu { display: none; }
.period-switcher { display: flex; height: 36px; margin-left: auto; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #101519; }
.period-switcher button { padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.period-switcher button:hover { color: var(--text); }
.period-switcher button.is-active { background: var(--surface-3); color: var(--lime); box-shadow: 0 1px 8px rgba(0,0,0,.24); }

.page-content { width: min(100%, 1650px); margin: 0 auto; padding: 34px clamp(20px, 2.5vw, 40px) 96px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.page-header h1 { margin: 4px 0 6px; font-size: clamp(29px, 3vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.page-header p { max-width: 780px; margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow { display: block; color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.quiet-button, .primary-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 10px; cursor: pointer; font-weight: 750; white-space: nowrap; }
.quiet-button { border: 1px solid var(--line); background: var(--surface); color: #d9dfe2; }
.quiet-button:hover { border-color: #3d4950; background: var(--surface-3); }
.primary-button { border: 1px solid var(--lime-border); background: var(--lime-soft); color: #dcff8c; }
.primary-button:hover { background: rgba(168,235,18,.19); }
.quiet-button .icon, .primary-button .icon { width: 17px; }
.quiet-button--small { min-height: 32px; padding: 0 10px; font-size: 11px; }

.filter-bar { display: flex; min-height: 62px; align-items: stretch; gap: 8px; margin-bottom: 18px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgba(19,25,29,.82); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.filter-control { display: flex; min-width: 250px; align-items: center; gap: 10px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.filter-control:hover { background: var(--surface-3); }
.filter-control > .icon:first-child { color: var(--lime); }
.filter-control > span { display: grid; flex: 1; }
.filter-control small { color: var(--muted-2); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.filter-control b { overflow: hidden; max-width: 250px; color: #e7ebed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.filter-control > .icon:last-child { width: 15px; color: var(--muted); }
.filter-control--compact { min-width: 168px; }
.filter-control--compact b { max-width: 130px; }
.filter-divider { width: 1px; margin: 6px 0; background: var(--line); }
.filter-update { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 0 12px; color: var(--muted-2); font-size: 10px; white-space: nowrap; }
.filter-update .icon { width: 15px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(39,39,39,.99), rgba(31,31,31,.99)); box-shadow: 0 12px 40px rgba(0,0,0,.16); }
.panel-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.panel-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.panel-head h2 { margin: 1px 0 0; font-size: 15px; letter-spacing: -.015em; }
.panel-head small { color: var(--muted-2); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.panel-head > a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.panel-head > a:hover { color: var(--lime); }
.panel-head > a .icon { width: 14px; }
.panel-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #11171b; color: var(--lime); }
.panel-icon .icon { width: 17px; }
.panel-icon--lime { border-color: var(--lime-border); background: var(--lime-soft); }

.leader-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.leader-card { min-width: 0; overflow: hidden; }
.leader-list { display: grid; }
.leader-row { display: grid; min-height: 58px; grid-template-columns: 28px 28px 42px minmax(0,1fr) auto 18px; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); transition: background .16s ease, transform .16s ease; }
.leader-row:hover { z-index: 2; background: var(--surface-3); }
.leader-rank { color: #f4f6f7; font-size: 18px; font-weight: 850; text-align: center; }
.leader-move { display: flex; justify-content: center; }
.leader-row > img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #0b0f12; }
.leader-copy { display: grid; min-width: 0; }
.leader-copy strong { overflow: hidden; font-size: 11px; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.leader-copy span { overflow: hidden; color: #b5bec3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.leader-copy small { color: var(--muted-2); font-size: 8px; }
.genre-pill { max-width: 115px; padding: 3px 6px; overflow: hidden; border: 1px solid rgba(255,113,143,.22); border-radius: 999px; background: rgba(255,113,143,.1); color: #ff9aae; font-size: 7px; font-style: normal; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.movement { display: inline-flex; min-width: 22px; align-items: center; justify-content: center; gap: 1px; font-size: 8px; font-weight: 850; }
.movement .icon { width: 12px; height: 12px; }
.movement--up { color: var(--lime); }
.movement--down { color: var(--red); }
.movement--new { color: #f1ad4c; font-size: 8px; }
.panel-footer-link { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; color: #c5cdd1; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.panel-footer-link:hover { background: rgba(255,255,255,.025); color: var(--lime); }
.panel-footer-link .icon { width: 14px; }

.section-block { margin-top: 32px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.section-heading h2 { margin: 3px 0 3px; font-size: 22px; letter-spacing: -.025em; }
.section-heading p { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; }
.section-heading > a { display: flex; align-items: center; gap: 5px; color: #cbd3d7; font-size: 11px; font-weight: 750; }
.section-heading > a:hover { color: var(--lime); }
.section-heading > a .icon { width: 15px; }
.mover-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.mover-card { display: grid; min-width: 0; grid-template-columns: 62px minmax(0,1fr) 18px; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mover-card:hover { border-color: #3c484f; background: var(--surface-2); transform: translateY(-1px); }
.mover-image { position: relative; }
.mover-image img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; }
.mover-image > span { position: absolute; right: -5px; bottom: -4px; padding: 4px; border: 2px solid var(--surface); border-radius: 8px; background: #11171b; }
.mover-card > div:nth-child(2) { display: grid; min-width: 0; }
.mover-card small { color: var(--lime); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.mover-card strong, .mover-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-card strong { margin-top: 3px; font-size: 12px; }
.mover-card span { color: var(--muted); font-size: 9px; }
.mover-card > .icon { width: 15px; color: var(--muted-2); }

.view-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.view-toggle button { display: grid; width: 34px; height: 30px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.view-toggle button.is-active { background: var(--surface-4); color: var(--lime); }
.view-toggle .icon { width: 16px; }
.chart-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(285px,.72fr); gap: 16px; align-items: start; }
.chart-table-panel { overflow: hidden; }
.chart-table-head { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.chart-table-head > div { display: flex; align-items: center; gap: 10px; }
.chart-table-head h2 { margin: 1px 0 0; font-size: 16px; }
.chart-table-head small { color: var(--muted-2); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.rank-row { display: grid; min-height: 68px; grid-template-columns: 56px 70px 54px minmax(176px,1.4fr) minmax(160px,.8fr) minmax(130px,.55fr) 28px; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.rank-row:hover { background: var(--surface-3); }
.rank-number { font-size: 21px; font-weight: 850; text-align: center; }
.rank-movement { display: flex; justify-content: center; }
.rank-image { width: 50px; height: 50px; border-radius: 9px; object-fit: cover; background: #0b0f12; }
.rank-name { display: grid; min-width: 0; }
.rank-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.rank-points { display: grid; min-width: 0; }
.rank-points small { color: var(--muted-2); font-size: 8px; }
.rank-points strong { font-size: 12px; }
.rank-action { color: var(--muted-2); }
.rank-action .icon { width: 15px; }
.pagination { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 5px; padding: 10px; }
.pagination button { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #11171b; color: var(--muted); cursor: pointer; font-size: 10px; }
.pagination button:hover:not(:disabled), .pagination button.is-active { border-color: var(--lime-border); background: var(--lime-soft); color: var(--lime); }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination span { color: var(--muted-2); }
.trending-panel { position: sticky; top: 94px; overflow: hidden; }
.trend-list { display: grid; }
.trend-list a { display: grid; min-height: 70px; grid-template-columns: 32px 48px minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.trend-list a:hover { background: var(--surface-3); }
.trend-position { font-size: 18px; font-weight: 850; text-align: center; }
.trend-list img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.trend-list a > span:nth-child(3) { display: grid; min-width: 0; }
.trend-list strong, .trend-list small, .trend-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-list strong { font-size: 10px; }
.trend-list small { color: #b4bdc2; font-size: 8px; }
.trend-list em { color: var(--muted-2); font-size: 7px; font-style: normal; }
.trend-list a > .icon { width: 14px; color: var(--muted-2); }
.detail-hero { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 0; overflow: hidden; }
.detail-image-wrap { position: relative; min-height: 230px; background: #0c1114; }
.detail-image-wrap > img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero--label .detail-image-wrap > img { object-fit: cover; }
.detail-image-wrap::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgba(19,25,29,.75)); content: ''; pointer-events: none; }
.detail-rank-badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: grid; min-width: 66px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(7,10,12,.76); backdrop-filter: blur(10px); }
.detail-rank-badge small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.detail-rank-badge b { color: var(--lime); font-size: 23px; }
.detail-main { min-width: 0; padding: 22px; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.detail-title-row h1 { margin: 4px 0 6px; font-size: clamp(30px,4vw,52px); line-height: 1; letter-spacing: -.045em; }
.detail-title-row p { max-width: 740px; margin: 0; color: var(--muted); font-size: 12px; }
.detail-actions { display: flex; gap: 8px; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 22px; }
.detail-stat-grid article { display: grid; min-height: 72px; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(10,14,16,.4); }
.detail-stat-grid article > span:nth-child(2) { display: grid; min-width: 0; }
.detail-stat-grid small { overflow: hidden; color: #c0c8cc; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.detail-stat-grid strong { color: var(--muted); font-size: 8px; font-weight: 550; }
.release-card { position: relative; display: grid; min-width: 0; scroll-snap-align: start; }
.release-cover { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.release-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.release-cover button { position: absolute; right: 10px; bottom: 10px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(8,11,13,.78); color: #fff; opacity: 0; transform: translateY(4px); transition: .2s ease; }
.release-card:hover .release-cover img { transform: scale(1.035); }
.release-card:hover .release-cover button { opacity: 1; transform: none; }
.release-card > .genre-pill { width: max-content; margin-top: 8px; }
.release-card > strong { margin-top: 5px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.release-card > small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.release-card > em { margin-top: 2px; color: var(--muted-2); font-size: 8px; font-style: normal; }
.history-panel { margin-top: 26px; overflow: hidden; }

.track-hero { display: grid; grid-template-columns: 280px minmax(0,1fr) minmax(280px,.72fr); gap: 22px; padding: 20px; }
.track-cover-wrap { position: relative; align-self: start; overflow: hidden; aspect-ratio: 1; border-radius: 14px; }
.track-cover-wrap > img { width: 100%; height: 100%; object-fit: cover; }
.track-main { min-width: 0; padding: 6px 0; }
.track-main h1 { margin: 5px 0 2px; font-size: clamp(32px,4vw,54px); line-height: 1; letter-spacing: -.045em; }
.track-artists { display: flex; align-items: center; gap: 9px; margin: 8px 0 22px; color: #c2cace; font-size: 13px; font-weight: 750; }
.track-artists a:hover { color: var(--lime); }
.track-artists span { color: var(--muted-2); }
.track-links { display: flex; flex-wrap: wrap; gap: 8px; }
.entity-chip { display: grid; min-width: 190px; height: 48px; grid-template-columns: 36px minmax(0,1fr) 14px; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: #11171b; }
.entity-chip:hover { border-color: var(--lime-border); }
.entity-chip img { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; }
.entity-chip > span { display: grid; }
.entity-chip small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
.entity-chip b { font-size: 9px; }
.entity-chip .icon { width: 13px; color: var(--muted-2); }
.track-meta { display: grid; grid-template-columns: repeat(5,minmax(82px,1fr)); margin: 26px 0 0; border-top: 1px solid var(--line-soft); }
.track-meta div { padding: 13px 10px 0 0; }
.track-meta dt { color: var(--muted-2); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.track-meta dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; }
.track-ranking { align-self: stretch; padding: 13px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(10,14,16,.34); }
.track-ranking > .eyebrow { margin: 2px 2px 10px; }
.track-ranking article { display: grid; min-height: 68px; grid-template-columns: 38px 46px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px; border-top: 1px solid var(--line-soft); }
.track-ranking article img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.track-ranking article > span:nth-child(3) { display: grid; min-width: 0; }
.track-ranking article small, .track-ranking article strong, .track-ranking article em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-ranking article small { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.track-ranking article strong { font-size: 9px; }
.track-ranking article em { color: var(--muted-2); font-size: 7px; font-style: normal; }
.track-bottom-grid { display: grid; grid-template-columns: minmax(260px,.6fr) minmax(0,1.4fr); gap: 14px; margin-top: 16px; }
.related-panel { overflow: hidden; }
.mini-release-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 12px; }
.mini-release-row .release-card > .genre-pill { display: none; }

.site-footer { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px,2.5vw,40px); border-top: 1px solid var(--line-soft); color: var(--muted-2); font-size: 9px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a:hover { color: var(--lime); }
.mobile-nav { display: none; }

.overlay { position: fixed; inset: 0; z-index: 100; display: none; }
.search-open .search-overlay, .genre-open .genre-overlay { display: block; }
.overlay-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(4,6,7,.78); backdrop-filter: blur(8px); }
.search-dialog { position: relative; width: min(860px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 60px)); margin: 30px auto; overflow: hidden; border: 1px solid #364148; border-radius: 18px; background: #11171b; box-shadow: var(--shadow); }
.search-input-wrap { display: flex; height: 70px; align-items: center; gap: 12px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line); }
.search-input-wrap > .icon { width: 24px; color: var(--lime); }
.search-input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.search-input-wrap input::placeholder { color: #68747c; }
.search-body { max-height: calc(100vh - 220px); overflow-y: auto; padding: 14px; }
.search-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; padding: 10px 6px 18px; }
.search-intro h2 { margin: 3px 0 4px; font-size: 22px; }
.search-intro p { max-width: 520px; margin: 0; color: var(--muted); font-size: 10px; }
.empty-state { display: grid; min-height: 260px; place-content: center; justify-items: center; text-align: center; }
.empty-state > .icon { width: 34px; height: 34px; color: var(--muted-2); }
.empty-state h2 { margin: 12px 0 4px; font-size: 18px; }
.empty-state p { max-width: 390px; margin: 0; color: var(--muted); font-size: 10px; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 22px 16px; }
.drawer-head h2 { margin: 4px 0 3px; font-size: 26px; letter-spacing: -.03em; }
.drawer-head p { margin: 0; color: var(--muted); font-size: 10px; }
.drawer-search { display: flex; height: 44px; align-items: center; gap: 9px; margin: 0 22px 12px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background: #0c1114; }
.drawer-search .icon { width: 17px; color: var(--muted); }
.drawer-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.genre-groups { padding: 0 14px 30px; }
.genre-group { padding: 12px 8px; border-top: 1px solid var(--line-soft); }
.genre-group h3 { margin: 0 4px 8px; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.genre-group > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.genre-option { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #c2cbd0; cursor: pointer; text-align: left; font-size: 9px; }
.genre-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genre-option:hover { border-color: var(--line); background: var(--surface-2); }
.genre-option.is-active { border-color: var(--lime-border); background: var(--lime-soft); color: var(--lime); }
.genre-option .icon { width: 13px; }
.genre-option[hidden], .genre-group[hidden] { display: none; }

@media (max-width: 1380px) {
  .leader-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .leader-card--label { grid-column: 1 / -1; }
  .leader-card--label .leader-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .leader-card--label .leader-row:nth-child(5) { border-bottom: 0; }
  .detail-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .track-hero { grid-template-columns: 250px minmax(0,1fr); }
  .track-ranking { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px,.5fr) repeat(2,minmax(0,1fr)) minmax(130px,.5fr); align-items: center; }
  .track-ranking > .eyebrow { margin: 0; }
  .track-ranking article { border-top: 0; border-left: 1px solid var(--line-soft); }
}

@media (max-width: 1120px) {
  :root { --sidebar-width: 220px; }
  .brand img { width: 158px; }
  .leader-grid { grid-template-columns: 1fr; }
  .leader-card--label { grid-column: auto; }
  .leader-card .leader-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .leader-card .leader-row:nth-child(5) { border-bottom: 0; }
  .mover-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chart-layout { grid-template-columns: 1fr; }
  .trending-panel { position: static; }
  .trend-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rank-row { grid-template-columns: 48px 50px 50px minmax(160px,1fr) minmax(140px,.7fr) minmax(110px,.45fr) 22px; }
  .detail-hero { grid-template-columns: 250px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .sidebar { width: min(300px,86vw); transform: translateX(-105%); transition: transform .23s ease; }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-close { display: grid; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 45; display: none; width: 100%; height: 100%; border: 0; background: rgba(2,4,5,.7); backdrop-filter: blur(4px); }
  .sidebar-open .sidebar-backdrop { display: block; }
  .app-main { margin-left: 0; }
  .topbar { height: 64px; padding: 0 14px; }
  .mobile-menu { display: grid; }
  .topbar > .period-switcher { display: none; }
  .page-content { padding: 24px 14px 94px; }
  .page-header { align-items: flex-start; }
  .page-header p { font-size: 12px; }
  .filter-bar { overflow-x: auto; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-update { display: none; }
  .filter-control { min-width: 230px; }
  .filter-control--compact { min-width: 160px; }
  .leader-card .leader-list, .leader-card--label .leader-list { grid-template-columns: 1fr; }
  .leader-card .leader-row:nth-child(5), .leader-card--label .leader-row:nth-child(5) { border-bottom: 1px solid var(--line-soft); }
  .detail-hero { grid-template-columns: 220px minmax(0,1fr); }
  .detail-actions { flex-direction: column; }
  .detail-stat-grid { grid-template-columns: 1fr; }
  .detail-stat-grid article { min-height: 58px; }
  .track-bottom-grid { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; right: 10px; bottom: 10px; left: 10px; z-index: 60; display: grid; height: 62px; grid-template-columns: repeat(5,1fr); padding: 4px; border: 1px solid #344047; border-radius: 17px; background: rgba(15,20,23,.92); box-shadow: 0 18px 50px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
  .mobile-nav a, .mobile-nav button { display: grid; align-content: center; justify-items: center; gap: 2px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; font-size: 8px; }
  .mobile-nav .icon { width: 18px; }
  .mobile-nav .is-active { background: var(--lime-soft); color: var(--lime); }
  .site-footer { margin-bottom: 70px; }
}

@media (max-width: 700px) {
  .filter-bar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  .filter-divider { display: none; }
  .filter-control, .filter-control--compact { min-width: 0; min-height: 52px; width: 100%; background: rgba(255,255,255,.018); }
  .filter-control b, .filter-control--compact b { max-width: 122px; }
  .page-header { display: grid; gap: 14px; }
  .page-header h1 { font-size: 34px; }
  .filter-bar { border-radius: 12px; }
  .mover-grid { grid-template-columns: 1fr; }
  .chart-table-head { align-items: flex-start; }
  .rank-row { position: relative; min-height: 78px; grid-template-columns: 40px 46px minmax(0,1fr) 20px; gap: 8px; padding: 8px 10px; }
  .rank-number { grid-row: 1 / 3; font-size: 18px; }
  .rank-movement { position: absolute; left: 13px; bottom: 8px; }
  .rank-image { width: 46px; height: 46px; }
  .rank-name { align-self: end; }
  .rank-points { display: none; }
  .rank-action { grid-column: 4; grid-row: 1 / 3; }
  .trend-list { grid-template-columns: 1fr; }
  .pagination button:nth-of-type(5), .pagination span { display: none; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-image-wrap { min-height: 240px; max-height: 340px; }
  .detail-image-wrap::after { background: linear-gradient(0deg, rgba(19,25,29,.8), transparent 45%); }
  .detail-main { padding: 18px 14px; }
  .detail-title-row { display: grid; }
  .detail-actions { flex-direction: row; }
  .detail-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-stat-grid article { grid-template-columns: 36px minmax(0,1fr); }
  .detail-stat-grid article > .movement { display: none; }
  .track-hero { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .track-cover-wrap { width: min(100%,380px); margin: 0 auto; }
  .track-main { padding: 0; }
  .track-main h1 { font-size: 38px; }
  .track-meta { grid-template-columns: repeat(3,1fr); }
  .track-ranking { grid-column: auto; display: block; }
  .track-ranking article { border-top: 1px solid var(--line-soft); border-left: 0; }
  .mini-release-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .search-dialog { width: 100%; max-height: 100vh; height: 100%; margin: 0; border: 0; border-radius: 0; }
  .search-input-wrap { height: 64px; padding-left: 0; }
  .search-input-wrap input { font-size: 16px; }
  .search-body { max-height: calc(100vh - 150px); }
  .search-intro { grid-template-columns: 1fr; }
  .genre-group > div { grid-template-columns: 1fr; }
  .site-footer { display: grid; justify-items: center; padding: 18px; text-align: center; }
}

@media (max-width: 470px) {
  .page-header h1 { font-size: 31px; }
  .leader-row { grid-template-columns: 24px 24px 40px minmax(0,1fr) 14px; }
  .leader-row > .genre-pill { display: none; }
  .leader-row > img { width: 40px; height: 40px; }
  .leader-copy strong { font-size: 10px; }
  .section-heading { align-items: flex-start; }
  .section-heading > a { display: none; }
  .detail-stat-grid { grid-template-columns: 1fr; }
  .track-meta { grid-template-columns: repeat(2,1fr); }
  .track-links .primary-button, .track-links .quiet-button { flex: 1; }
}


.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;
}

.topbar {
  height: 68px;
  gap: 12px;
}

.top-genre {
  display: flex;
  width: min(580px, 48vw);
  height: 44px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #242424;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.top-genre:hover {
  border-color: var(--lime-border);
  background: #292929;
}
.top-genre > .icon:first-child {
  width: 18px;
  color: var(--lime);
}
.top-genre > .icon:last-child {
  width: 15px;
  margin-left: auto;
}
.top-genre span {
  display: grid;
  min-width: 0;
}
.top-genre small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.top-genre b {
  overflow: hidden;
  color: #f2f2f2;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.songstats-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: #f02d67;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.songstats-mark img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.songstats-nav-cta {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(240,45,103,.38);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(240,45,103,.14), rgba(240,45,103,.05));
}
.songstats-nav-cta:hover {
  border-color: rgba(240,45,103,.7);
  background: rgba(240,45,103,.16);
}
.songstats-nav-cta > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
}
.songstats-nav-cta strong {
  font-size: 11px;
}
.songstats-nav-cta small {
  overflow: hidden;
  color: #c7a4af;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.songstats-nav-cta > .icon {
  width: 14px;
  color: #ff8bae;
}

body[data-page="top10"] .page-content {
  padding-top: 18px;
}
.leader-grid--overview {
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 14px;
}
.leader-grid--overview .leader-card {
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
}
.leader-grid--overview .leader-card--artist {
  border-color: rgba(180,230,29,.3);
  box-shadow: 0 8px 32px rgba(180,230,29,.055), 0 8px 26px rgba(0,0,0,.22);
}
.leader-grid--overview .panel-head {
  min-height: 50px;
  padding: 8px 11px;
}
.leader-grid--overview .panel-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.leader-grid--overview .panel-head h2 {
  font-size: 14px;
}
.leader-grid--overview .leader-row {
  min-height: 47px;
  grid-template-columns: 25px 23px 36px minmax(0,1fr) auto 15px;
  gap: 6px;
  padding: 4px 8px;
}
.leader-grid--overview .leader-row > img {
  width: 36px;
  height: 36px;
  border-radius: 5px;
}
.leader-grid--overview .leader-rank {
  font-size: 16px;
}
.leader-grid--overview .leader-copy strong {
  font-size: 10px;
}
.leader-grid--overview .leader-copy span {
  font-size: 8px;
}
.leader-grid--overview .leader-copy small {
  font-size: 7px;
}
.leader-grid--overview .genre-pill {
  max-width: 92px;
  font-size: 6px;
}
.leader-grid--overview .panel-footer-link {
  min-height: 36px;
  font-size: 9px;
}

.internal-ad-row {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.internal-ad-slot {
  display: grid;
  min-height: 82px;
  align-content: center;
  gap: 2px;
  padding: 13px 16px;
  border: 1px dashed #464646;
  border-radius: 12px;
  background: #1d1d1d;
}
.internal-ad-slot:hover {
  border-color: #666;
  background: #212121;
}
.internal-ad-slot span {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.internal-ad-slot strong {
  color: #e7e7e7;
  font-size: 11px;
}
.internal-ad-slot small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}
.internal-ad-slot small .icon {
  width: 11px;
}
.internal-ad-slot--songstats {
  border-color: rgba(240,45,103,.42);
  background: linear-gradient(110deg, rgba(240,45,103,.13), #202020 52%);
}
.internal-ad-slot--songstats span,
.internal-ad-slot--songstats small .icon {
  color: #ff7fa5;
}

.panel,
.sidebar-search,
.filter-bar,
.chart-table-panel,
.trending-panel {
  border-color: #383838;
}
.genre-pill {
  border-color: rgba(237,86,112,.32);
  background: rgba(237,86,112,.14);
  color: #ff9bab;
}

@media (max-width: 1380px) {
  .leader-grid--overview {
    grid-template-columns: 1.08fr 1fr 1fr;
  }
  .leader-grid--overview .leader-card--label {
    grid-column: auto;
  }
  .leader-grid--overview .leader-card--label .leader-list {
    grid-template-columns: 1fr;
  }
  .internal-ad-row {
    grid-template-columns: 1.08fr 1fr 1fr;
  }
}

@media (max-width: 1120px) {
  .leader-grid--overview,
  .internal-ad-row {
    grid-template-columns: 1fr;
  }
  .leader-grid--overview .leader-card,
  .leader-grid--overview .leader-card--label {
    grid-column: auto;
  }
  .leader-grid--overview .leader-list,
  .leader-grid--overview .leader-card .leader-list,
  .leader-grid--overview .leader-card--label .leader-list {
    grid-template-columns: 1fr;
  }
  .leader-grid--overview .leader-row:nth-child(5),
  .leader-grid--overview .leader-card--label .leader-row:nth-child(5) {
    border-bottom: 1px solid var(--line-soft);
  }
}

@media (max-width: 900px) {
  .topbar {
    height: 64px;
    gap: 9px;
  }
  .top-genre {
    width: auto;
    min-width: 0;
    flex: 1;
  }
  .mobile-nav {
    grid-template-columns: repeat(4,1fr);
  }
  body[data-page="top10"] .page-content {
    padding-top: 14px;
  }
  .internal-ad-row {
    margin-top: 12px;
  }
}

@media (max-width: 700px) {
  .leader-grid--overview .leader-row {
    min-height: 62px;
    grid-template-columns: 34px 42px minmax(0,1fr) 18px;
    gap: 8px;
    padding: 7px 9px;
  }
  .leader-grid--overview .leader-rank {
    grid-row: 1 / 3;
    font-size: 19px;
  }
  .leader-grid--overview .leader-move {
    position: absolute;
    left: 14px;
    bottom: 8px;
  }
  .leader-grid--overview .leader-row > img {
    width: 42px;
    height: 42px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 11px;
  }
  .leader-grid--overview .leader-copy span {
    font-size: 9px;
  }
  .leader-grid--overview .leader-copy small {
    font-size: 8px;
  }
  .leader-grid--overview .genre-pill {
    display: none;
  }
  .internal-ad-slot {
    min-height: 76px;
  }
}

@media (max-width: 470px) {
  .topbar {
    padding-right: 10px;
    padding-left: 10px;
  }
  .top-genre {
    height: 42px;
    padding: 0 9px;
  }
  .top-genre small {
    display: none;
  }
  .top-genre b {
    max-width: 150px;
    font-size: 10px;
  }
}

@media (min-width: 901px) {
  .filter-bar--minimal {
    display: none;
  }
}


:root {
  --songstats: #f02d67;
  --songstats-soft: rgba(240,45,103,.13);
}

body {
  font-size: 14px;
}

.sidebar-search {
  font-size: 13px;
}
.sidebar-search span {
  font-size: 13px;
}

.nav-item {
  min-height: 44px;
  font-size: 13px;
}
.nav-item.is-active {
  box-shadow: inset 3px 0 0 var(--lime);
}

.update-card {
  gap: 10px;
  padding: 10px 8px;
  border-top: 1px solid var(--line-soft);
}
.update-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid rgba(180,230,29,.24);
  border-radius: 8px;
  background: rgba(180,230,29,.055);
  color: var(--lime);
}
.update-icon .icon {
  width: 15px;
}
.update-card strong {
  color: #d6dcdf;
  font-size: 10px;
  font-weight: 750;
}
.update-card small {
  color: var(--muted-2);
  font-size: 8px;
}

.period-switcher {
  height: 38px;
  border-radius: 9px;
}
.period-switcher button {
  padding: 0 11px;
  font-size: 9px;
  letter-spacing: .025em;
}

.mobile-period-select {
  position: relative;
  display: none;
  height: 42px;
  min-width: 66px;
  align-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 10px;
  background: rgba(180,230,29,.08);
  color: var(--lime);
}
.mobile-period-select select {
  width: 100%;
  height: 100%;
  padding: 0 28px 0 12px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.mobile-period-select .icon {
  position: absolute;
  right: 8px;
  width: 13px;
  pointer-events: none;
}

.songstats-context-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 11px 4px 5px;
  border: 1px solid rgba(240,45,103,.52);
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(240,45,103,.2), rgba(240,45,103,.08));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.songstats-context-cta:hover {
  border-color: rgba(240,45,103,.85);
  background: rgba(240,45,103,.22);
}
.songstats-context-cta .songstats-mark {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.songstats-context-cta > .icon {
  width: 14px;
  color: #ff94b3;
}

/* Genre colour system */
.genre-pill--coded {
  display: inline-flex;
  max-width: 100%;
  min-height: 23px;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--genre-color) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--genre-color) 14%, transparent);
  color: color-mix(in srgb, var(--genre-color) 76%, white);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.genre-pill--coded > i,
.genre-option-name > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--genre-color);
  box-shadow: 0 0 9px color-mix(in srgb, var(--genre-color) 45%, transparent);
}
.genre-pill--coded > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.genre-pill--compact {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 6px;
}

/* Top 10 overview */
.leader-grid--overview .leader-row {
  min-height: 49px;
  grid-template-columns: 25px 23px 37px minmax(0,1fr) minmax(66px,.42fr) 62px 14px;
  gap: 6px;
  padding: 4px 8px;
}
.leader-grid--overview .leader-row > img {
  width: 37px;
  height: 37px;
  border-radius: 6px;
}
.leader-grid--overview .leader-copy strong {
  font-size: 10.5px;
}
.leader-grid--overview .leader-copy > span {
  color: #aeb6ba;
  font-size: 7.5px;
}
.leader-mobile-genre {
  display: none;
}
.leader-genre {
  min-width: 0;
  justify-self: end;
}
.leader-points {
  display: grid;
  min-width: 0;
  justify-items: end;
  line-height: 1.05;
}
.leader-points b {
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -.02em;
}
.leader-points small {
  color: var(--muted-2);
  font-size: 7px;
  text-transform: uppercase;
}
.leader-grid--overview .panel-head h2 {
  font-size: 15px;
}
.leader-grid--overview .panel-head small {
  font-size: 8px;
}
.leader-grid--overview .panel-footer-link {
  min-height: 37px;
  font-size: 9px;
}

/* Centred genre selector */
.genre-dialog {
  position: relative;
  width: min(1040px, calc(100% - 40px));
  max-height: min(820px, calc(100vh - 56px));
  margin: 28px auto;
  overflow: hidden;
  border: 1px solid #414141;
  border-radius: 18px;
  background: #171717;
  box-shadow: 0 30px 100px rgba(0,0,0,.62);
}
.genre-dialog .drawer-head {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.genre-dialog .drawer-head h2 {
  font-size: 29px;
}
.genre-dialog .drawer-search {
  margin: 14px 24px 4px;
  background: #111;
}
.genre-dialog .drawer-search input {
  font-size: 13px;
}
.genre-dialog .genre-groups {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 8px 18px 14px;
}
.genre-dialog .genre-group {
  padding: 14px 6px;
}
.genre-dialog .genre-group h3 {
  margin-bottom: 10px;
  font-size: 10px;
}
.genre-dialog .genre-group > div {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.genre-choice {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px;
}
.genre-choice[hidden],
.genre-group[hidden] {
  display: none !important;
}
.genre-dialog .genre-option {
  min-height: 48px;
  padding: 0 11px;
  border: 1px solid #303030;
  border-radius: 10px;
  background: #202020;
  color: #e0e0e0;
  font-size: 11px;
  font-weight: 700;
}
.genre-dialog .genre-option:hover {
  border-color: #565656;
  background: #272727;
}
.genre-dialog .genre-option.is-active {
  border-color: var(--lime-border);
  background: var(--lime-soft);
  color: #efffc4;
}
.genre-option-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.genre-option-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.genre-dialog .genre-option > .icon {
  width: 15px;
  color: var(--lime);
}
.hype-option {
  min-width: 52px;
  border: 1px solid rgba(255,113,143,.34);
  border-radius: 9px;
  background: rgba(255,113,143,.085);
  color: #ff9db1;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}
.hype-option:hover {
  border-color: rgba(255,113,143,.68);
  background: rgba(255,113,143,.15);
}
.genre-dialog-foot {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 0 24px;
  border-top: 1px solid var(--line-soft);
  background: #121212;
  color: var(--muted);
  font-size: 9px;
}
.genre-dialog-foot b {
  color: #ff91aa;
}

/* Full chart pages and working block mode */
.list-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.list-page-heading h2 {
  margin: 3px 0 0;
  font-size: 27px;
  letter-spacing: -.025em;
}
.list-page-heading .eyebrow {
  font-size: 9px;
}
.rank-row {
  min-height: 72px;
  grid-template-columns: 58px 72px 54px minmax(180px,1.35fr) minmax(190px,.85fr) minmax(125px,.5fr) 28px;
  gap: 9px;
  padding: 7px 12px;
}
.rank-number {
  font-size: 22px;
}
.rank-name strong {
  font-size: 13px;
}
.rank-name small {
  margin-top: 2px;
  font-size: 9px;
}
.rank-genre {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 4px;
}
.rank-genre > small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted-2);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-points {
  justify-items: end;
  line-height: 1.05;
}
.rank-points strong {
  color: #fff;
  font-size: 17px;
  font-weight: 880;
  letter-spacing: -.025em;
}
.rank-points small {
  font-size: 8px;
  text-transform: uppercase;
}
.chart-table-panel.is-grid-view .rank-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
  padding: 12px;
  background: #191919;
}
.chart-table-panel.is-grid-view .rank-row {
  position: relative;
  min-height: 250px;
  grid-template-columns: 52px minmax(0,1fr) auto;
  grid-template-rows: auto 118px auto 1fr;
  align-content: start;
  gap: 8px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid #3b3b3b;
  border-radius: 13px;
  background: linear-gradient(180deg,#282828,#202020);
}
.chart-table-panel.is-grid-view .rank-row:hover {
  border-color: var(--lime-border);
  background: linear-gradient(180deg,#2c2c2c,#232323);
}
.chart-table-panel.is-grid-view .rank-number {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 44px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 8px;
  background: rgba(180,230,29,.06);
  color: var(--lime);
}
.chart-table-panel.is-grid-view .rank-movement {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.chart-table-panel.is-grid-view .rank-image {
  width: 100%;
  height: 118px;
  grid-column: 1 / -1;
  grid-row: 2;
  border-radius: 10px;
  object-fit: cover;
}
.chart-table-panel.is-grid-view .rank-name {
  grid-column: 1 / -1;
  grid-row: 3;
}
.chart-table-panel.is-grid-view .rank-name strong {
  font-size: 14px;
}
.chart-table-panel.is-grid-view .rank-genre {
  grid-column: 1 / 3;
  grid-row: 4;
  align-self: end;
}
.chart-table-panel.is-grid-view .rank-points {
  grid-column: 3;
  grid-row: 4;
  align-self: end;
}
.chart-table-panel.is-grid-view .rank-action {
  position: absolute;
  right: 10px;
  top: 138px;
}

/* Detail hero and rankings */
.detail-hero {
  grid-template-columns: 310px minmax(0,1fr);
}
.detail-main {
  padding: 24px;
}
.detail-title-row h1 {
  font-size: clamp(36px,4vw,56px);
}
.detail-title-row p {
  max-width: 690px;
  font-size: 13px;
}
.detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.detail-stat-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  margin-top: 24px;
}
.detail-stat-grid .detail-stat {
  display: grid;
  min-height: 94px;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid #3b3b3b;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(20,20,20,.84), rgba(28,28,28,.68));
}
.detail-stat-grid .detail-stat:hover {
  border-color: rgba(180,230,29,.26);
}
.stat-rank-box {
  display: grid;
  min-height: 62px;
  place-content: center;
  justify-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 9px;
  background: rgba(180,230,29,.055);
}
.stat-rank-box b {
  color: var(--lime);
  font-size: 27px;
  line-height: 1;
}
.stat-rank-box small {
  margin-top: 3px;
  color: #97a26d;
  font-size: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stat-copy {
  display: grid;
  min-width: 0;
  align-content: center;
}
.detail-stat-grid .stat-copy > small {
  overflow: hidden;
  color: #c9ced0;
  font-size: 8px;
  font-weight: 760;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.detail-stat-grid .stat-copy > strong {
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
  font-weight: 880;
  line-height: 1;
  letter-spacing: -.03em;
}
.detail-stat-grid .stat-copy > em {
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 8px;
  font-style: normal;
  text-transform: uppercase;
}
.detail-stat-grid .movement {
  align-self: center;
}
.ranking-more {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  border: 1px solid var(--lime-border);
  border-radius: 10px;
  background: rgba(180,230,29,.045);
  color: #dfff83;
  cursor: pointer;
  font-size: 10px;
  font-weight: 820;
}
.ranking-more:hover {
  background: rgba(180,230,29,.10);
}
.ranking-more .icon {
  width: 14px;
  transition: transform .2s ease;
}
.ranking-more.is-expanded .icon {
  transform: rotate(180deg);
}

/* Scrolling release sections */
.release-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid #393939;
  border-radius: 13px;
  background: linear-gradient(180deg,#262626,#202020);
  scroll-snap-align: start;
}
.release-card:hover {
  border-color: rgba(180,230,29,.3);
  background: linear-gradient(180deg,#2b2b2b,#242424);
}
.release-cover {
  border-radius: 10px;
}
.release-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 8px;
  background: rgba(8,10,8,.88);
  color: var(--lime);
  font-size: 15px;
  font-weight: 900;
  backdrop-filter: blur(7px);
}
.release-card > .genre-pill {
  margin-top: 8px;
}
.release-card > strong {
  margin-top: 7px;
  font-size: 12px;
}
.release-card > small {
  margin-top: 2px;
  font-size: 8px;
}
.release-points {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
}
.release-points b {
  color: #fff;
  font-size: 17px;
  font-weight: 880;
  letter-spacing: -.025em;
}
.release-points em {
  color: var(--muted-2);
  font-size: 8px;
  font-style: normal;
  text-transform: uppercase;
}

/* Highcharts - retains the character of the original Beatstats charts. */
.highchart-canvas {
  width: 100%;
  height: 340px;
  background: #1f1f1f;
}
.highcharts-root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.history-panel {
  overflow: hidden;
}
.history-panel .panel-head {
  background: #242424;
}

/* Track page and listen visualisation */
.track-hero {
  display: grid;
  grid-template-columns: 290px minmax(0,1fr) minmax(320px,.72fr);
  gap: 20px;
  padding: 18px;
}
.track-main h1 {
  font-size: clamp(38px,4vw,58px);
}
.track-meta {
  margin-top: 20px;
}
.track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.track-ranking {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 13px 13px 0;
  overflow: hidden;
}
.track-ranking-list {
  display: grid;
}
.track-ranking-list article {
  display: grid;
  min-height: 72px;
  grid-template-columns: 40px 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-top: 1px solid var(--line-soft);
}
.track-ranking-list article img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.track-ranking-list article > span:nth-child(3) {
  display: grid;
  min-width: 0;
}
.track-ranking-list article small,
.track-ranking-list article strong,
.track-ranking-list article em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-ranking-list article small {
  color: #d2d2d2;
  font-size: 8px;
  text-transform: uppercase;
}
.track-ranking-list article strong {
  font-size: 10px;
}
.track-ranking-list article em {
  color: var(--muted-2);
  font-size: 7px;
  font-style: normal;
}
@keyframes wavePulse {
  from { transform: scaleY(.72); opacity: .72; }
  to { transform: scaleY(1.08); opacity: 1; }
}
@keyframes playhead {
  from { left: 35.5%; }
  to { left: 96%; }
}

/* Responsive refinements */
@media (max-width: 1380px) {
  .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .track-hero {
    grid-template-columns: 255px minmax(0,1fr);
  }
  .track-ranking {
    grid-column: 1 / -1;
    min-height: 0;
  }
  .track-ranking-list {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .track-ranking-list article {
    border-top: 0;
    border-left: 1px solid var(--line-soft);
  }
  .track-ranking-list article:first-child {
    border-left: 0;
  }
}

@media (max-width: 1120px) {
  .leader-grid--overview .leader-row {
    grid-template-columns: 32px 28px 44px minmax(0,1fr) minmax(110px,.45fr) 80px 16px;
    min-height: 58px;
  }
  .leader-grid--overview .leader-row > img {
    width: 44px;
    height: 44px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 12px;
  }
  .leader-grid--overview .leader-copy > span {
    font-size: 9px;
  }
  .leader-points b {
    font-size: 14px;
  }
  .detail-stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .topbar > .period-switcher {
    display: none;
  }
  .mobile-period-select {
    display: flex;
  }
  .top-genre {
    flex: 1;
  }
  .genre-dialog {
    width: min(760px, calc(100% - 24px));
    margin: 12px auto;
    max-height: calc(100vh - 24px);
  }
  .genre-dialog .genre-groups {
    max-height: calc(100vh - 205px);
  }
  .genre-dialog .genre-group > div {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .detail-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .topbar {
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .mobile-menu {
    flex: 0 0 40px;
  }
  .top-genre {
    height: 42px;
    min-width: 0;
    padding: 0 9px;
  }
  .top-genre small {
    display: none;
  }
  .top-genre b {
    max-width: 180px;
    font-size: 11px;
  }
  .mobile-period-select {
    min-width: 62px;
  }

  .leader-grid--overview .leader-row {
    position: relative;
    min-height: 70px;
    grid-template-columns: 34px 48px minmax(0,1fr) 78px 16px;
    gap: 8px;
    padding: 8px 9px;
  }
  .leader-grid--overview .leader-rank {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 20px;
  }
  .leader-grid--overview .leader-move {
    position: absolute;
    left: 13px;
    bottom: 8px;
  }
  .leader-grid--overview .leader-row > img {
    width: 48px;
    height: 48px;
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .leader-grid--overview .leader-copy {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 12px;
  }
  .leader-grid--overview .leader-copy > span {
    font-size: 9px;
  }
  .leader-mobile-genre {
    display: block;
    margin-top: 3px;
  }
  .leader-genre {
    display: none;
  }
  .leader-points {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
  }
  .leader-points b {
    font-size: 14px;
  }

  .genre-dialog .drawer-head h2 {
    font-size: 23px;
  }
  .genre-dialog .genre-group > div {
    grid-template-columns: 1fr;
  }
  .genre-dialog .genre-option {
    font-size: 12px;
  }

  .list-page-heading {
    align-items: center;
  }
  .list-page-heading h2 {
    font-size: 24px;
  }
  .rank-row {
    position: relative;
    min-height: 86px;
    grid-template-columns: 40px 50px minmax(0,1fr) 82px 18px;
    grid-template-rows: 1fr 1fr;
    gap: 5px 8px;
    padding: 8px 9px;
  }
  .rank-number {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 20px;
  }
  .rank-movement {
    position: absolute;
    left: 12px;
    bottom: 8px;
  }
  .rank-image {
    width: 50px;
    height: 50px;
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .rank-name {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }
  .rank-name strong {
    font-size: 12px;
  }
  .rank-genre {
    display: flex;
    min-width: 0;
    grid-column: 3;
    grid-row: 2;
    align-items: flex-start;
    align-self: start;
  }
  .rank-genre > small {
    display: none;
  }
  .rank-points {
    display: grid !important;
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
  }
  .rank-points strong {
    font-size: 15px;
  }
  .rank-action {
    grid-column: 5;
    grid-row: 1 / 3;
  }
  .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: 1fr;
  }
  .chart-table-panel.is-grid-view .rank-row {
    min-height: 290px;
    grid-template-rows: auto 156px auto 1fr;
  }
  .chart-table-panel.is-grid-view .rank-image {
    height: 156px;
  }
  .chart-table-panel.is-grid-view .rank-action {
    top: 176px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }
  .detail-image-wrap {
    min-height: 300px;
  }
  .detail-main {
    padding: 19px 14px;
  }
  .detail-title-row h1 {
    font-size: 42px;
  }
  .detail-title-row p {
    font-size: 12px;
  }
  .detail-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .detail-actions .songstats-context-cta {
    grid-column: 1 / -1;
  }
  .detail-stat-grid {
    grid-template-columns: 1fr;
  }
  .detail-stat-grid .detail-stat {
    min-height: 78px;
  }
  .detail-stat-grid .stat-copy > strong {
    font-size: 22px;
  }
  .release-card > strong {
    font-size: 13px;
  }
  .release-points b {
    font-size: 18px;
  }
  .highchart-canvas {
    height: 270px;
  }

  .track-hero {
    grid-template-columns: 1fr;
    padding: 13px;
  }
  .track-main h1 {
    font-size: 42px;
  }
  .track-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .track-actions .songstats-context-cta {
    grid-column: 1 / -1;
  }
  .track-ranking {
    grid-column: auto;
  }
  .track-ranking-list {
    grid-template-columns: 1fr;
  }
  .track-ranking-list article,
  .track-ranking-list article:first-child {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

@media (max-width: 470px) {
  .top-genre b {
    max-width: 135px;
  }
  .mobile-period-select {
    min-width: 58px;
  }
  .mobile-period-select select {
    padding-left: 9px;
    font-size: 11px;
  }
  .detail-actions {
    grid-template-columns: 1fr;
  }
  .detail-actions .songstats-context-cta {
    grid-column: auto;
  }
  .track-actions {
    grid-template-columns: 1fr;
  }
  .track-actions .songstats-context-cta {
    grid-column: auto;
  }
}


.detail-stat--extra[hidden] {
  display: none !important;
}

@media (min-width: 701px) {
  .detail-title-row > div:first-child {
    min-width: 240px;
    flex: 1 1 240px;
  }
  .detail-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}


@media (max-width: 900px) {
  /* Detail pages are content-first: the chart-section bottom navigation is only
     shown on the overview and long-list pages. */
  body[data-page="artist"] .mobile-nav,
  body[data-page="track"] .mobile-nav,
  body[data-page="label"] .mobile-nav {
    display: none;
  }

  /* Keep the active track available while the user moves through its detail page. */
  body[data-page="track"] .page-content {
    padding-bottom: 112px;
  }
}


@media (min-width: 901px) {
  body[data-page="track"] .app-main {
    padding-bottom: 92px;
  }
}


:root {
  --bg: #181818;
  --bg-soft: #1a1a1a;
  --sidebar: #151515;
  --surface: #212121;
  --surface-2: #212121;
  --surface-3: #2c2c2c;
  --surface-4: #2d2d2d;
  --line: #2d2d2d;
  --line-soft: rgba(255,255,255,.065);
}

html,
body {
  background: #181818;
}
body {
  background-image: none;
}
.sidebar {
  background: #151515;
}
.app-main,
.page-content {
  background: #181818;
}
.topbar {
  background: rgba(24,24,24,.97);
}

/* A highlighted navigation row is enough; no lime rail or lime icon. */
.nav-item.is-active {
  border-color: rgba(255,255,255,.07);
  background: #272727;
  color: #f3f3f3;
  box-shadow: none;
}
.nav-item.is-active .icon {
  color: currentColor;
}

/* With the generic Songstats top CTA removed, periods sit at the far right. */
.period-switcher {
  margin-left: auto;
  margin-right: clamp(4px,1.25vw,24px);
}
.period-switcher button {
  min-width: 58px;
  padding: 0 12px;
}

/* Genre colour is carried by the tag itself, without an extra dot. */
.genre-pill--coded {
  gap: 0;
}
.genre-pill--coded > i {
  display: none !important;
}

/* Unified, heavier movement markers. */
.movement {
  min-width: 28px;
  gap: 3px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.movement .icon {
  width: 14px;
  height: 14px;
  overflow: visible;
}
.movement--new {
  color: #f1ad4c;
  font-size: 9px;
  letter-spacing: .03em;
}

/* Home chart panels use the established Beatstats #181818 / #212121 relationship. */
.leader-grid--overview .leader-card {
  overflow: hidden;
  border-color: #2d2d2d;
  background: #212121;
}
.leader-grid--overview .panel-head,
.leader-grid--overview .panel-footer-link {
  background: #151515;
}
.leader-grid--overview .panel-head {
  border-bottom-color: #2d2d2d;
}
.leader-grid--overview .panel-head small {
  color: #777;
}
.leader-grid--overview .panel-footer-link {
  border-top: 1px solid #2d2d2d;
  color: #d2d2d2;
}
.leader-grid--overview .panel-footer-link > span {
  margin-left: 5px;
  color: #8c8c8c;
  font-size: 12px;
}
.leader-grid--overview .leader-list {
  background: #212121;
}
.leader-grid--overview .leader-row {
  grid-template-columns: 25px 28px 37px minmax(0,1fr) minmax(66px,.42fr) 68px;
  background: #212121;
  border-bottom-color: #151515;
}
.leader-grid--overview .leader-row:hover {
  background: #272626;
}
.leader-grid--overview .leader-copy strong {
  font-size: 12px;
  line-height: 1.15;
}
.leader-grid--overview .leader-copy > span {
  margin-top: 2px;
  font-size: 8.5px;
  line-height: 1.2;
}
.leader-points {
  row-gap: 4px;
  line-height: 1;
}
.leader-points b {
  font-size: 12px;
  line-height: 1;
}
.leader-points small {
  line-height: 1.1;
}

/* Slightly different tones make multi-artist credits easier to parse. */
.artist-list {
  display: inline;
  color: #bec4c7;
}
.artist-list > span {
  color: inherit;
}
.artist-list > .artist-alt {
  color: #8f999e;
}
.artist-list > i {
  color: #626a6e;
  font-style: normal;
}

/* Larger names across the long chart pages. */
.rank-name strong {
  font-size: 15px;
  line-height: 1.18;
}
.rank-name small {
  margin-top: 4px;
  font-size: 10px;
}
.rank-points,
.release-points {
  row-gap: 4px;
}
.rank-points strong,
.release-points b {
  line-height: 1;
}
.rank-points small,
.release-points em {
  line-height: 1.15;
}
.release-card > strong {
  font-size: 13px;
}
.release-card > small {
  font-size: 9px;
}

/* Generic Songstats placements were removed; contextual detail-page links remain. */
.songstats-nav-cta {
  display: none !important;
}

@media (max-width: 900px) {
  .leader-grid--overview .leader-row {
    grid-template-columns: 30px 31px 45px minmax(0,1fr) 80px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 13px;
  }
  .leader-grid--overview .leader-copy > span {
    font-size: 9px;
  }
  .leader-grid--overview .leader-genre {
    display: none;
  }
  .leader-points b {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .period-switcher {
    margin-right: 0;
  }
  .leader-grid--overview .leader-row {
    grid-template-columns: 28px 29px 43px minmax(0,1fr) 72px;
    gap: 7px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 12.5px;
  }
}


/* Keep the main bar flat; elevation belongs to controls and content boxes. */
.topbar {
  background: #181818;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* New supplied wordmark, enlarged 20% with the lower-left corner anchored. */
.sidebar-head {
  align-items: flex-end;
}
.brand {
  display: flex;
  align-items: flex-end;
  transform-origin: left bottom;
}
.brand img {
  width: 206px;
  max-width: none;
  transform-origin: left bottom;
}

/* Songstats remains a paid navigation placement, but not a top-right action. */
.songstats-nav-cta {
  display: flex !important;
  background: #24141a;
  box-shadow: 0 7px 18px rgba(0,0,0,.20);
}

/* Period control and the YEAR expansion. */
.period-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  margin-right: 0;
}
.period-area .period-switcher {
  margin: 0;
}
.year-selector {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101010;
  box-shadow: 0 7px 18px rgba(0,0,0,.20);
  animation: year-selector-in .16s ease-out;
}
.year-selector[hidden] {
  display: none;
}
.year-selector > span {
  padding: 0 7px;
  color: #737373;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
}
.year-selector button {
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9d9d9d;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.year-selector button:hover {
  color: #fff;
}
.year-selector button.is-active {
  background: #2c2c2c;
  color: var(--lime);
}
@keyframes year-selector-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Artist and label panels match; tracks receive the extra width needed for genre data. */
.leader-grid--overview {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);
  gap: 14px;
}
.internal-ad-row {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);
}
.leader-grid--overview .leader-card--artist {
  border-color: #2d2d2d;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.leader-grid--overview .leader-row--artist,
.leader-grid--overview .leader-row--label {
  grid-template-columns: 25px 28px 37px minmax(0,1fr) 76px;
}
.leader-grid--overview .leader-row--track {
  grid-template-columns: 25px 28px 37px minmax(116px,1fr) minmax(72px,.45fr) 76px;
  column-gap: 5px;
}
.leader-grid--overview .leader-row--track .leader-points {
  justify-items: start;
  padding-left: 2px;
}
.leader-grid--overview .leader-row--artist .leader-points,
.leader-grid--overview .leader-row--label .leader-points {
  justify-items: end;
}
.leader-grid--overview .leader-copy strong {
  font-size: 12.5px;
}
.leader-grid--overview .leader-row--track .leader-copy strong {
  font-size: 12.5px;
}
.leader-points {
  row-gap: 6px;
}
.leader-points b {
  font-size: 12.5px;
}
.leader-points small {
  font-size: 7.5px;
}

/* The footer label is enough; no trailing chevron. */
.leader-grid--overview .panel-footer-link {
  gap: 0;
}

/* Non-track chart rows may show context, but never a genre tag. */
.rank-genre--plain {
  display: flex;
  align-items: center;
}
.rank-genre--plain > small {
  color: #8b9397;
  font-size: 9px;
}

/* More visible About / Contact footer links. */
.site-footer {
  min-height: 82px;
  padding-inline: clamp(24px,3vw,52px);
  background: #151515;
  color: #a4a4a4;
  font-size: 13px;
}
.site-footer .footer-brand {
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 700;
}
.site-footer nav {
  gap: 34px;
}
.site-footer nav a {
  color: #ededed;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .07em;
}
.site-footer nav a:hover {
  color: var(--lime);
}

/* Consistent subtle elevation on boxes, not the page chrome. */
.panel,
.top-genre,
.period-switcher,
.filter-bar,
.sidebar-search,
.internal-ad-slot,
.mover-card,
.view-toggle,
.chart-table-panel,
.trending-panel,
.detail-hero,
.release-card,
.history-panel {
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
}

/* Font Awesome angle-style directions throughout. */
.movement .icon,
.rank-action .icon,
.panel-footer-link .icon {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.movement .icon {
  width: 13px;
  height: 13px;
}

@media (max-width: 1240px) {
  .year-selector button:nth-of-type(n+5) {
    display: none;
  }
  .leader-grid--overview {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.16fr) minmax(0,.92fr);
  }
  .internal-ad-row {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.16fr) minmax(0,.92fr);
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 11.5px;
  }
}

@media (max-width: 1100px) {
  .year-selector {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 8;
  }
}

@media (max-width: 900px) {
  .brand img {
    width: 190px;
  }
  .period-area {
    display: none;
  }
  .leader-grid--overview,
  .internal-ad-row {
    grid-template-columns: 1fr;
  }
  .leader-grid--overview .leader-row--artist,
  .leader-grid--overview .leader-row--label,
  .leader-grid--overview .leader-row--track {
    grid-template-columns: 30px 31px 45px minmax(0,1fr) 82px;
  }
  .leader-grid--overview .leader-row--track .leader-genre {
    display: none;
  }
  .leader-grid--overview .leader-row--track .leader-points {
    justify-items: end;
    padding-left: 0;
  }
}


/* Give names a little more breathing room after artwork, matching the supplied alignment guide. */
.leader-grid--overview .leader-copy {
  padding-left: 6px;
}

/* Keep every points column on a common right edge instead of letting track points drift inward. */
.leader-grid--overview .leader-points,
.leader-grid--overview .leader-row--track .leader-points,
.leader-grid--overview .leader-row--artist .leader-points,
.leader-grid--overview .leader-row--label .leader-points {
  justify-items: end;
  padding-right: 7px;
  padding-left: 0;
}

/* Preserve the wider track panel while keeping tag, points and outer padding visually balanced. */
.leader-grid--overview .leader-row--track {
  grid-template-columns: 25px 28px 37px minmax(116px,1fr) minmax(76px,.45fr) 76px;
}

/* Footer follows the classic Beatstats About / BS / Contact arrangement. */
.site-footer {
  justify-content: center;
  min-height: 108px;
  padding: 14px clamp(24px,3vw,52px);
}
.site-footer nav {
  display: grid;
  grid-template-columns: minmax(92px,auto) 72px minmax(92px,auto);
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.site-footer .footer-brand {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
}
.site-footer .footer-brand img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.site-footer nav > a:not(.footer-brand) {
  min-width: 92px;
  text-align: center;
}

@media (max-width: 900px) {
  .leader-grid--overview .leader-copy {
    padding-left: 3px;
  }
  .leader-grid--overview .leader-points,
  .leader-grid--overview .leader-row--track .leader-points,
  .leader-grid--overview .leader-row--artist .leader-points,
  .leader-grid--overview .leader-row--label .leader-points {
    padding-right: 2px;
  }
}

@media (max-width: 560px) {
  .site-footer {
    min-height: 92px;
    padding: 14px 12px 84px;
  }
  .site-footer nav {
    grid-template-columns: auto 56px auto;
    gap: 18px;
  }
  .site-footer .footer-brand,
  .site-footer .footer-brand img {
    width: 56px;
    height: 56px;
  }
  .site-footer nav > a:not(.footer-brand) {
    min-width: 0;
    font-size: 12px;
  }
}


:root {
  --box-shadow: 1px 1px 9px rgba(0,0,0,.25);
}

/* Use one restrained elevation treatment throughout the interface. */
.panel,
.top-genre,
.period-switcher,
.year-selector,
.sidebar-search,
.songstats-nav-cta,
.internal-ad-slot,
.mover-card,
.view-toggle,
.chart-table-panel,
.trending-panel,
.detail-hero,
.detail-stat-grid .detail-stat,
.release-card,
.history-panel,
.filter-bar,
.genre-dialog,
.search-dialog,
.mobile-nav,
.icon-button {
  box-shadow: var(--box-shadow);
}

/* Artists and labels do not carry a genre/rank subtitle. */
.leader-copy--single,
.rank-name--single {
  align-content: center;
}
.leader-copy--single strong,
.rank-name--single strong {
  margin: 0;
}
.rank-row--artist,
.rank-row--label {
  grid-template-columns: 58px 72px 54px minmax(240px,1fr) minmax(125px,.5fr) 28px;
}
.rank-row--artist .rank-genre,
.rank-row--label .rank-genre {
  display: none;
}

/* Mobile/tablet pass: cleaner chrome, larger touch targets and one-row chart entries. */
@media (max-width: 900px) {
  body {
    font-size: 14px;
  }

  .topbar {
    display: grid;
    height: 66px;
    grid-template-columns: 42px minmax(0,1fr) 64px;
    gap: 9px;
    padding: 0 12px;
  }
  .mobile-menu {
    width: 42px;
    height: 42px;
  }
  .top-genre {
    width: auto;
    min-width: 0;
    height: 42px;
    padding-inline: 10px;
  }
  .top-genre b {
    max-width: none;
    font-size: 11px;
  }
  .mobile-period-select {
    display: flex;
    width: 64px;
    min-width: 64px;
    height: 42px;
  }

  .page-content {
    width: 100%;
    padding: 18px 12px 96px;
  }
  .panel,
  .internal-ad-slot,
  .mover-card,
  .release-card,
  .filter-bar,
  .detail-hero,
  .track-hero {
    border-radius: 13px;
  }

  .leader-grid--overview,
  .internal-ad-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .leader-grid--overview .panel-head {
    min-height: 58px;
    padding: 10px 12px;
  }
  .leader-grid--overview .panel-head h2 {
    font-size: 15px;
  }
  .leader-grid--overview .panel-head small {
    font-size: 8px;
  }
  .leader-grid--overview .leader-row--artist,
  .leader-grid--overview .leader-row--label,
  .leader-grid--overview .leader-row--track {
    min-height: 66px;
    grid-template-columns: 30px 30px 46px minmax(0,1fr) 80px;
    gap: 7px;
    padding: 7px 9px;
  }
  .leader-grid--overview .leader-row > img {
    width: 46px;
    height: 46px;
    border-radius: 7px;
  }
  .leader-grid--overview .leader-rank {
    font-size: 19px;
  }
  .leader-grid--overview .leader-copy {
    padding-left: 2px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 13px;
    line-height: 1.15;
  }
  .leader-grid--overview .leader-copy > span {
    margin-top: 3px;
    font-size: 9px;
  }
  .leader-grid--overview .leader-copy--single {
    align-self: center;
  }
  .leader-grid--overview .leader-points {
    padding-right: 0;
  }
  .leader-grid--overview .leader-points b {
    font-size: 14px;
  }
  .leader-grid--overview .leader-points small {
    margin-top: 4px;
    font-size: 7px;
  }
  .leader-grid--overview .panel-footer-link {
    min-height: 42px;
    font-size: 9px;
  }
  .internal-ad-slot {
    min-height: 88px;
    padding: 14px;
  }

  .section-block {
    margin-top: 24px;
  }
  .section-heading {
    margin-bottom: 11px;
  }
  .section-heading h2 {
    font-size: 21px;
  }
  .section-heading p {
    font-size: 11px;
  }
  .mover-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .mover-card {
    min-height: 78px;
  }

  .list-page-heading {
    align-items: center;
    margin-bottom: 12px;
  }
  .list-page-heading h2 {
    font-size: 25px;
  }
  .chart-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .chart-table-head {
    min-height: 60px;
    padding: 10px 12px;
  }
  .chart-table-head h2 {
    font-size: 15px;
  }
  .rank-row,
  .rank-row--artist,
  .rank-row--label,
  .rank-row--track {
    position: relative;
    min-height: 82px;
    grid-template-columns: 36px 28px 52px minmax(0,1fr) 88px 18px;
    grid-template-rows: 1fr;
    gap: 7px;
    padding: 8px 9px;
  }
  .rank-number {
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
  }
  .rank-movement {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .rank-image {
    width: 52px;
    height: 52px;
    grid-column: 3;
    grid-row: 1;
  }
  .rank-name,
  .rank-name--single {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
  }
  .rank-name strong {
    font-size: 13px;
    line-height: 1.15;
  }
  .rank-name small {
    margin-top: 4px;
    font-size: 9px;
  }
  .rank-genre {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    padding-bottom: 2px;
  }
  .rank-row--track .rank-name {
    align-self: start;
    padding-top: 7px;
  }
  .rank-row--track .rank-genre {
    display: flex;
    align-self: end;
  }
  .rank-row--artist .rank-genre,
  .rank-row--label .rank-genre {
    display: none;
  }
  .rank-points {
    display: grid !important;
    grid-column: 5;
    grid-row: 1;
    align-self: center;
    justify-items: end;
  }
  .rank-points strong {
    font-size: 15px;
  }
  .rank-points small {
    margin-top: 4px;
    font-size: 7px;
  }
  .rank-action {
    grid-column: 6;
    grid-row: 1;
    align-self: center;
  }
  .trending-panel {
    position: static;
  }
  .trend-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .detail-title-row p {
    font-size: 12px;
    line-height: 1.55;
  }
  .detail-stat-grid {
    gap: 8px;
  }
  .detail-stat-grid .detail-stat {
    min-height: 86px;
  }
  .ranking-more {
    min-height: 45px;
    font-size: 11px;
  }
  .release-card {
    padding: 9px;
  }
  .release-card > strong {
    font-size: 13px;
  }
  .release-points b {
    font-size: 18px;
  }

  .mobile-nav {
    right: 8px;
    bottom: 8px;
    left: 8px;
    height: 64px;
    grid-template-columns: repeat(4,1fr);
    padding: 4px;
    border-radius: 16px;
    background: rgba(17,17,17,.96);
  }
  .mobile-nav a {
    min-width: 0;
    font-size: 9px;
  }
  .mobile-nav .icon {
    width: 19px;
    height: 19px;
  }

  .site-footer {
    min-height: 88px;
    margin-bottom: 72px;
    padding: 12px 12px 84px;
  }
  body[data-page="artist"] .site-footer,
  body[data-page="track"] .site-footer,
  body[data-page="label"] .site-footer {
    margin-bottom: 0;
    padding-bottom: 16px;
  }
}

@media (max-width: 700px) {
  .page-content {
    padding: 16px 10px 94px;
  }
  .filter-bar {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px;
  }
  .filter-control,
  .filter-control--compact {
    min-height: 48px;
  }

  .leader-grid--overview .leader-row--artist,
  .leader-grid--overview .leader-row--label,
  .leader-grid--overview .leader-row--track {
    min-height: 68px;
    grid-template-columns: 29px 28px 46px minmax(0,1fr) 76px;
  }
  .leader-grid--overview .leader-move {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .leader-grid--overview .leader-rank,
  .leader-grid--overview .leader-row > img,
  .leader-grid--overview .leader-copy,
  .leader-grid--overview .leader-points {
    grid-row: 1;
  }
  .leader-grid--overview .leader-rank {
    grid-column: 1;
  }
  .leader-grid--overview .leader-row > img {
    grid-column: 3;
  }
  .leader-grid--overview .leader-copy {
    grid-column: 4;
  }
  .leader-grid--overview .leader-points {
    grid-column: 5;
  }
  .leader-mobile-genre {
    display: block;
    margin-top: 4px;
  }

  .mover-grid,
  .trend-list {
    grid-template-columns: 1fr;
  }

  .rank-row,
  .rank-row--artist,
  .rank-row--label,
  .rank-row--track {
    min-height: 84px;
    grid-template-columns: 34px 26px 50px minmax(0,1fr) 80px 16px;
    gap: 6px;
    padding: 8px;
  }
  .rank-image {
    width: 50px;
    height: 50px;
  }
  .rank-name strong {
    font-size: 12.5px;
  }
  .rank-points strong {
    font-size: 14px;
  }
  .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }
  .detail-image-wrap {
    min-height: 0;
    aspect-ratio: 4 / 3;
    max-height: none;
  }
  .detail-main {
    padding: 18px 13px;
  }
  .detail-title-row {
    gap: 14px;
  }
  .detail-title-row h1 {
    font-size: 39px;
  }
  .detail-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .detail-actions .songstats-context-cta {
    grid-column: 1 / -1;
  }
  .detail-stat-grid {
    grid-template-columns: 1fr;
  }
  .detail-stat-grid .detail-stat {
    min-height: 82px;
    grid-template-columns: 50px minmax(0,1fr) auto;
  }
  .detail-stat-grid .stat-copy > strong {
    font-size: 21px;
  }

  .track-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  .track-cover-wrap {
    width: min(100%,320px);
  }
  .track-main h1 {
    font-size: 36px;
  }
  .track-meta {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0;
  }
  .track-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .track-actions .songstats-context-cta {
    grid-column: 1 / -1;
  }
  .track-ranking {
    padding: 12px 12px 0;
  }
  .track-ranking-list article {
    min-height: 70px;
  }
  .highchart-canvas {
    height: 250px;
  }

  .genre-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
    border-radius: 14px;
  }
  .genre-dialog .drawer-head {
    padding: 17px 16px 12px;
  }
  .genre-dialog .drawer-head h2 {
    font-size: 22px;
  }
  .genre-dialog .drawer-search {
    margin: 10px 14px 4px;
  }
  .genre-dialog .genre-groups {
    padding: 6px 10px 12px;
  }

  .site-footer nav {
    grid-template-columns: auto 52px auto;
    gap: 16px;
  }
  .site-footer .footer-brand,
  .site-footer .footer-brand img {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 470px) {
  .topbar {
    grid-template-columns: 40px minmax(0,1fr) 58px;
    gap: 7px;
    padding-inline: 8px;
  }
  .mobile-menu {
    width: 40px;
    height: 40px;
  }
  .top-genre,
  .mobile-period-select {
    height: 40px;
  }
  .top-genre {
    padding-inline: 8px;
  }
  .top-genre > .icon:first-child {
    width: 16px;
  }
  .top-genre b {
    max-width: 160px;
    font-size: 10px;
  }
  .mobile-period-select {
    width: 58px;
    min-width: 58px;
  }

  .leader-grid--overview .leader-row--artist,
  .leader-grid--overview .leader-row--label,
  .leader-grid--overview .leader-row--track {
    grid-template-columns: 27px 24px 43px minmax(0,1fr) 70px;
    gap: 5px;
    padding-inline: 7px;
  }
  .leader-grid--overview .leader-row > img {
    width: 43px;
    height: 43px;
  }
  .leader-grid--overview .leader-copy strong {
    font-size: 12px;
  }
  .leader-grid--overview .leader-copy > span {
    font-size: 8px;
  }
  .leader-grid--overview .leader-points b {
    font-size: 13px;
  }

  .rank-row,
  .rank-row--artist,
  .rank-row--label,
  .rank-row--track {
    grid-template-columns: 30px 23px 46px minmax(0,1fr) 70px;
    min-height: 80px;
  }
  .rank-action {
    display: none;
  }
  .rank-image {
    width: 46px;
    height: 46px;
  }
  .rank-name strong {
    font-size: 12px;
  }
  .rank-points {
    grid-column: 5;
  }
  .rank-points strong {
    font-size: 13px;
  }
  .detail-actions,
  .track-actions {
    grid-template-columns: 1fr;
  }
  .detail-actions .songstats-context-cta,
  .track-actions .songstats-context-cta {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .site-footer {
    margin-bottom: 76px;
    padding: 14px 12px;
  }
  body[data-page="artist"] .site-footer,
  body[data-page="label"] .site-footer {
    margin-bottom: 0;
    padding: 14px 12px;
  }
  body[data-page="track"] .site-footer {
    margin-bottom: 92px;
    padding: 14px 12px;
  }
  .leader-mobile-genre .genre-pill--compact {
    min-height: 18px;
    margin-top: 0;
    padding: 2px 6px;
    font-size: 6px;
  }
}


@media (max-width: 900px) {
  body.sidebar-open .mobile-nav {
    display: none !important;
  }
}


/* Breadcrumbs are intentionally removed from detail pages. */

/* Ranking cards: movement gets its own compact box and wide ranks scale safely. */
.detail-stat-grid .detail-stat {
  grid-template-columns: 58px minmax(0,1fr) 48px;
}
.stat-rank-box {
  min-width: 0;
  padding-inline: 5px;
}
.stat-rank-box b {
  font-variant-numeric: tabular-nums;
}
.stat-rank-box--wide b { font-size: 22px; letter-spacing: -.04em; }
.stat-rank-box--xwide b { font-size: 17px; letter-spacing: -.055em; }
.detail-move-box {
  display: grid;
  width: 42px;
  min-height: 42px;
  place-items: center;
  justify-self: end;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  background: #191919;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.detail-move-box .movement {
  min-width: 0;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
}
.detail-move-box .movement .icon {
  width: 16px;
  height: 16px;
}
.detail-move-box .movement--new {
  font-size: 10px;
  letter-spacing: .05em;
}

/* One fast filter for the artist page. */
.artist-quick-filter {
  display: grid;
  min-height: 62px;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 9px 12px;
  border-color: #343434;
  background: #1d1d1d;
}
.artist-quick-filter > .panel-icon {
  width: 38px;
  height: 38px;
}
.artist-quick-filter label {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.artist-quick-filter label small {
  color: #858585;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.artist-quick-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f3f3f3;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}
.artist-quick-filter input::placeholder { color: #777; }
.artist-quick-filter > button {
  display: inline-flex;
  height: 34px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid #3b3b3b;
  border-radius: 8px;
  background: #242424;
  color: #b8b8b8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.artist-quick-filter > button .icon { width: 13px; }

/* Artist section headings. */
.artist-section { margin-top: 26px; }
.artist-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
}
.artist-section-head h2 {
  margin: 3px 0 0;
  font-size: 21px;
  letter-spacing: -.02em;
}
.section-count,
.panel-total {
  color: #858585;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.section-count b,
.panel-total b { color: #d9d9d9; }

/* Latest singles is a fixed six-across grid that expands downward to twelve. */
.latest-singles-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 11px;
}
.latest-singles-grid .release-card {
  min-width: 0;
}
.release-cover-link {
  display: block;
  width: 100%;
  height: 100%;
}
.release-cover-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-actions,
.production-hover-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(4px);
  transition: .18s ease;
  pointer-events: none;
}
.release-action,
.production-hover-actions button,
.production-row-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(8,8,8,.88);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  pointer-events: auto;
}
.release-action:hover,
.production-hover-actions button:hover,
.production-row-actions button:hover {
  border-color: var(--lime-border);
  color: var(--lime);
}
.release-action--buy { color: #e8e8e8; }
.release-action .icon,
.production-hover-actions .icon,
.production-row-actions .icon { width: 15px; }
.release-card:hover .release-actions,
.production-item:hover .production-hover-actions {
  opacity: 1;
  transform: none;
}
.release-card:hover .release-cover img,
.production-item:hover .production-cover img {
  transform: scale(1.04);
}
.release-tags,
.production-tags {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.release-card > .genre-pill { margin-top: 0; }
.release-title {
  margin-top: 7px;
  overflow: hidden;
  color: #f0f0f0;
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-title:hover { color: var(--lime); }
.release-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.release-meta .release-points { margin: 0; }
.release-days {
  color: #858585;
  font-size: 7.5px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.production-type {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid #484848;
  border-radius: 999px;
  background: #292929;
  color: #cfcfcf;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.production-type--remix {
  border-color: rgba(240,45,103,.42);
  background: rgba(240,45,103,.11);
  color: #ff99b7;
}
.production-type--original {
  border-color: rgba(180,230,29,.34);
  background: rgba(180,230,29,.07);
  color: #d8f786;
}
.section-more {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 11px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: #1b1b1b;
  color: #c9c9c9;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}
.section-more:hover { border-color: #515151; background: #222; color: #fff; }
.section-more .icon { width: 13px; }
.section-more.is-expanded .icon { transform: rotate(180deg); }

/* Top productions: dense list by default, user-switchable to card grid. */
.productions-section {
  overflow: hidden;
  background: #1d1d1d;
}
.artist-panel-head {
  min-height: 64px;
  padding: 10px 13px;
  background: #151515;
}
.artist-panel-head h2 {
  font-size: 16px;
  text-transform: uppercase;
}
.artist-panel-head small { font-size: 8px; }
.collection-view-toggle { box-shadow: none; }
.collection-body--list { display: grid; }
.production-item {
  position: relative;
  display: grid;
  min-height: 72px;
  grid-template-columns: 42px 54px minmax(0,1fr) 78px 90px 76px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #151515;
  background: #212121;
}
.production-item:hover { background: #272727; }
.production-rank {
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.production-cover {
  position: relative;
  overflow: hidden;
  width: 54px;
  height: 54px;
  border-radius: 7px;
}
.production-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}
.production-copy {
  display: grid;
  min-width: 0;
  align-content: center;
}
.production-copy strong {
  overflow: hidden;
  color: #f3f3f3;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.production-copy a:hover strong { color: var(--lime); }
.production-copy > small {
  margin-top: 2px;
  overflow: hidden;
  color: #9fa5a8;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.production-tags { margin-top: 5px; }
.production-points {
  display: grid;
  justify-items: end;
  color: #e4e4e4;
  font-size: 13px;
  font-weight: 850;
  font-style: normal;
}
.production-points small {
  margin-top: 3px;
  color: #777;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}
.production-points b { font-size: 16px; }
.production-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.production-row-actions button { width: 31px; height: 31px; }
.production-hover-actions { display: none; }

.collection-body--grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding: 10px;
}
.collection-body--grid .production-item {
  min-height: 0;
  grid-template-columns: 42px minmax(0,1fr);
  grid-template-rows: auto 150px auto auto;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #393939;
  border-radius: 11px;
}
.collection-body--grid .production-rank {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 40px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 7px;
  background: rgba(180,230,29,.055);
  color: var(--lime);
  font-size: 16px;
}
.collection-body--grid .production-cover {
  width: 100%;
  height: 150px;
  grid-column: 1 / -1;
  grid-row: 2;
  border-radius: 9px;
}
.collection-body--grid .production-hover-actions { display: flex; }
.collection-body--grid .production-copy {
  grid-column: 1 / -1;
  grid-row: 3;
}
.collection-body--grid .production-copy strong { font-size: 13px; }
.collection-body--grid .production-points {
  grid-column: 2;
  grid-row: 4;
}
.collection-body--grid .production-row-actions { display: none; }

/* Larger all-data blocks: 12 rows initially, remainder lazy-loads. */
.artist-data-panel {
  overflow: hidden;
  background: #1d1d1d;
}
.artist-panel-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.artist-data-list { display: grid; }
.live-ranking-item {
  display: grid;
  min-height: 64px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid #151515;
  background: #212121;
}
.live-ranking-item:hover { background: #282828; }
.live-ranking-item > img {
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
}
.live-ranking-copy {
  display: grid;
  min-width: 0;
}
.live-ranking-copy strong {
  overflow: hidden;
  color: #f4f4f4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-ranking-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: #8e8e8e;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-ranking-item {
  grid-template-columns: 46px 46px minmax(0,1fr) 58px 48px;
}
.live-rank-box {
  display: grid;
  min-width: 42px;
  height: 42px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 8px;
  background: rgba(180,230,29,.055);
  color: var(--lime);
  font-size: 16px;
  font-weight: 900;
}
.live-ranking-copy > span { margin-top: 4px; }
.live-move-box {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid #3b3b3b;
  border-radius: 8px;
  background: #191919;
}
.live-move-box .movement { min-width: 0; }

/* Live rankings also support a compact grid mode. */
.live-rankings-panel .collection-body--grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  padding: 9px;
}
.live-rankings-panel .collection-body--grid .live-ranking-item {
  min-height: 98px;
  grid-template-columns: 46px 52px minmax(0,1fr) 48px;
  grid-template-rows: auto auto;
  gap: 7px;
  border: 1px solid #393939;
  border-radius: 10px;
}
.live-rankings-panel .collection-body--grid .live-rank-box {
  grid-column: 1;
  grid-row: 1 / 3;
}
.live-rankings-panel .collection-body--grid > .live-ranking-item > img {
  width: 52px;
  height: 52px;
  grid-column: 2;
  grid-row: 1 / 3;
}
.live-rankings-panel .collection-body--grid .live-ranking-copy {
  grid-column: 3;
  grid-row: 1 / 3;
}
.live-rankings-panel .collection-body--grid .live-move-box {
  grid-column: 4;
  grid-row: 1 / 3;
}

.chart-legend-note {
  color: #7f7f7f;
  font-size: 8px;
  font-weight: 700;
}
.history-panel .highchart-canvas { cursor: default; }

@media (max-width: 1280px) {
  .latest-singles-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .collection-body--grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  body[data-page="artist"] .page-content { padding-bottom: 24px; }
  .detail-title-row p { max-width: none; }
  .artist-quick-filter {
    position: sticky;
    top: 72px;
    z-index: 15;
    margin-top: 13px;
    backdrop-filter: blur(14px);
    background: rgba(29,29,29,.95);
  }
  .latest-singles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .release-actions,
  .production-hover-actions { opacity: 1; transform: none; }
  .release-action,
  .production-hover-actions button { width: 32px; height: 32px; }
  .release-meta { display: grid; gap: 4px; }
  .release-days { text-align: left; }
  .collection-body--grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .production-item {
    grid-template-columns: 34px 50px minmax(0,1fr) 72px 78px;
  }
  .production-row-actions { display: none; }
  .collection-body--grid .production-hover-actions { display: flex; }
  .production-cover { width: 50px; height: 50px; }
  .production-points b { font-size: 14px; }
  .artist-data-panel .artist-panel-head { min-height: 62px; }
  .live-ranking-item { min-height: 68px; }
}

@media (max-width: 700px) {
  .detail-stat-grid .detail-stat {
    grid-template-columns: 54px minmax(0,1fr) 44px;
  }
  .detail-move-box { width: 40px; min-height: 40px; }
  .artist-quick-filter {
    top: 70px;
    grid-template-columns: 34px minmax(0,1fr) auto;
    margin-inline: -1px;
    padding: 8px 9px;
  }
  .artist-quick-filter input { font-size: 13px; }
  .artist-quick-filter > button span { display: none; }
  .artist-section-head h2 { font-size: 19px; }
  .latest-singles-grid { gap: 9px; }
  .latest-singles-grid .release-card { padding: 7px; }
  .release-title { font-size: 12px; }
  .release-card > small { font-size: 8px; }
  .release-points b { font-size: 15px; }
  .release-days { font-size: 7px; }
  .artist-panel-head h2 { font-size: 14px; }
  .production-item {
    min-height: 76px;
    grid-template-columns: 32px 50px minmax(0,1fr) 76px;
    gap: 7px;
    padding: 7px 8px;
  }
  .production-rank { font-size: 17px; }
  .production-points { grid-column: 4; }
  .production-copy strong { font-size: 12px; }
  .production-tags { gap: 4px; }
  .collection-body--grid .production-item {
    grid-template-columns: 36px minmax(0,1fr);
    grid-template-rows: auto 130px auto auto;
  }
  .collection-body--grid .production-cover { height: 130px; }
  .live-ranking-item > img { width: 44px; height: 44px; }
  .live-ranking-copy strong { font-size: 10.5px; }
  .live-ranking-item {
    grid-template-columns: 42px 44px minmax(0,1fr) 42px;
  }
  .live-move-box { grid-column: 4; }
  .live-rankings-panel .collection-body--grid { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
  .latest-singles-grid { grid-template-columns: 1fr 1fr; }
  .release-tags { align-items: flex-start; flex-direction: column; gap: 4px; }
  .collection-body--grid { grid-template-columns: 1fr; }
  .collection-body--grid .production-item {
    grid-template-rows: auto 180px auto auto;
  }
  .collection-body--grid .production-cover { height: 180px; }
  .production-item {
    grid-template-columns: 28px 46px minmax(0,1fr) 68px;
  }
  .production-cover { width: 46px; height: 46px; }
  .production-copy strong { font-size: 11.5px; }
  .production-points b { font-size: 13px; }
  .artist-panel-actions .panel-total { display: none; }
  .live-ranking-item > img { width: 42px; height: 42px; }
  .live-ranking-item {
    grid-template-columns: 38px 42px minmax(0,1fr) 38px;
  }
  .live-rank-box { min-width: 36px; height: 38px; font-size: 14px; }
  .live-move-box { min-height: 36px; }
}


.is-extra-single[hidden],
.artist-preview-player[hidden] { display: none !important; }

/* The older release-cover rule absolutely positioned every button; explicitly
   reset the two hover controls so Play and Buy sit at opposite corners. */
.release-actions .release-action { position: static; right: auto; bottom: auto; opacity: 1; transform: none; }
.release-actions { align-items: end; }
.release-actions::before {
  position: absolute;
  inset: -26px -8px -8px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.68));
  content: '';
  pointer-events: none;
}
.release-action--play { margin-right: auto; }
.release-action--buy { margin-left: auto; }

.artist-quick-filter {
  grid-template-columns: 38px minmax(260px,1fr) minmax(145px,.28fr) minmax(145px,.28fr) auto;
  gap: 10px;
}
.artist-filter-select {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid #363636;
}
.artist-filter-select small {
  color: #858585;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.artist-filter-select select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e5e5e5;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}
.artist-filter-select option { background: #1b1b1b; color: #eee; }

/* Top Productions + Live Beatport Rankings share the main working area. */
.artist-activity-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
  margin-top: 26px;
  align-items: start;
}
.artist-activity-grid .artist-section { margin-top: 0; }
.artist-activity-grid .productions-section,
.artist-activity-grid .live-rankings-panel { min-width: 0; }
.artist-activity-grid .artist-panel-head { min-height: 68px; }

/* Half-width production list is intentionally more compact in list mode. */
.artist-activity-grid .production-item {
  min-height: 70px;
  grid-template-columns: 32px 50px minmax(0,1fr) 74px 78px;
  gap: 7px;
  padding: 7px 8px;
}
.artist-activity-grid .production-cover { width: 50px; height: 50px; }
.artist-activity-grid .production-copy strong { font-size: 11.5px; }
.artist-activity-grid .production-copy > small { font-size: 7.5px; }
.artist-activity-grid .production-row-actions { display: none; }
.artist-activity-grid .production-points b { font-size: 14px; }

/* Chunkier grid cards, deliberately closer to Latest Charted Singles. */
.artist-activity-grid .collection-body--grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  padding: 10px;
}
.artist-activity-grid .collection-body--grid .production-item {
  min-height: 0;
  grid-template-columns: 40px minmax(0,1fr);
  grid-template-rows: auto 190px auto auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid #3b3b3b;
  border-radius: 12px;
  background: #222;
  box-shadow: var(--box-shadow);
}
.artist-activity-grid .collection-body--grid .production-cover {
  width: 100%;
  height: 190px;
  grid-column: 1 / -1;
}
.artist-activity-grid .collection-body--grid .production-copy strong { font-size: 13px; }

.live-ranking-item {
  grid-template-columns: 46px 50px minmax(0,1fr) 74px 54px 42px;
  gap: 7px;
  min-height: 70px;
  padding: 7px 8px;
}
.live-cover { position: relative; overflow: hidden; width: 50px; height: 50px; border-radius: 7px; }
.live-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.live-hover-actions {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: .18s ease;
}
.live-hover-actions button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(8,8,8,.9);
  color: #fff;
  cursor: pointer;
}
.live-hover-actions .icon { width: 13px; }
.live-ranking-item:hover .live-hover-actions { opacity: 1; }
.live-ranking-item:hover .live-cover img { transform: scale(1.05); }
.live-points { display: grid; justify-items: end; color: #fff; line-height: 1.05; }
.live-points b { font-size: 13px; }
.live-points small { margin-top: 3px; color: #777; font-size: 7px; text-transform: uppercase; }

.live-rankings-panel .collection-body--grid .live-ranking-item {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr auto;
  grid-template-rows: 190px auto auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid #3b3b3b;
  border-radius: 12px;
  background: #222;
  box-shadow: var(--box-shadow);
}
.live-rankings-panel .collection-body--grid .live-rank-box {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  min-width: 40px;
  height: 34px;
  background: rgba(8,8,8,.88);
  backdrop-filter: blur(6px);
}
.live-rankings-panel .collection-body--grid .live-cover {
  width: 100%;
  height: 190px;
  grid-column: 1 / -1;
  grid-row: 1;
  border-radius: 9px;
}
.live-rankings-panel .collection-body--grid .live-hover-actions { opacity: 1; }
.live-rankings-panel .collection-body--grid .live-ranking-copy {
  grid-column: 1 / -1;
  grid-row: 2;
}
.live-rankings-panel .collection-body--grid .live-ranking-copy strong { font-size: 13px; }
.live-rankings-panel .collection-body--grid .live-points {
  grid-column: 1;
  grid-row: 3;
  justify-items: start;
}
.live-rankings-panel .collection-body--grid .live-points b { font-size: 16px; }
.live-rankings-panel .collection-body--grid .live-move-box { display: none; }

/* Labels become a visual card grid matching the singles section. */
.top-labels-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 11px;
}
.label-summary-card {
  display: grid;
  min-width: 0;
  padding: 8px;
  border: 1px solid #393939;
  border-radius: 13px;
  background: #222;
  box-shadow: var(--box-shadow);
}
.label-summary-card:hover { border-color: rgba(180,230,29,.3); background: #272727; }
.label-summary-art { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: #181818; }
.label-summary-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.label-summary-card:hover .label-summary-art img { transform: scale(1.04); }
.label-summary-art > span {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 8px;
  background: rgba(8,10,8,.88);
  color: var(--lime);
  font-size: 15px;
  font-weight: 900;
}
.label-summary-card > strong { margin-top: 8px; overflow: hidden; color: #f2f2f2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.label-summary-card > small { margin-top: 4px; color: #929292; font-size: 8px; line-height: 1.35; }
.label-summary-card > small b { color: #d3d3d3; }
.label-summary-card > small i { color: #555; font-style: normal; }
.label-summary-points { display: flex; align-items: baseline; gap: 6px; margin-top: 9px; }
.label-summary-points b { color: #fff; font-size: 16px; }
.label-summary-points em { color: #777; font-size: 7px; font-style: normal; text-transform: uppercase; }

/* Working artist-page bottom preview player. */
body[data-page="artist"] .page-content { padding-bottom: 104px; }
.artist-preview-player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: var(--sidebar-w);
  z-index: 80;
  display: grid;
  min-height: 82px;
  grid-template-columns: minmax(220px,.34fr) minmax(260px,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  border-top: 1px solid #3c3c3c;
  background: rgba(17,17,17,.97);
  box-shadow: 0 -4px 18px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
}
@keyframes previewPulse { to { opacity: .55; } }

/* Explicit straight-segment chart treatment. */
.highcharts-graph { stroke-linecap: square; stroke-linejoin: miter; }

@media (max-width: 1180px) {
  .artist-quick-filter { grid-template-columns: 38px minmax(210px,1fr) minmax(120px,.25fr) minmax(120px,.25fr) auto; }
  .top-labels-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .artist-activity-grid .collection-body--grid .production-item,
  .live-rankings-panel .collection-body--grid .live-ranking-item { grid-template-rows: auto 155px auto auto; }
  .artist-activity-grid .collection-body--grid .production-cover,
  .live-rankings-panel .collection-body--grid .live-cover { height: 155px; }
}

@media (max-width: 980px) {
  .artist-activity-grid { grid-template-columns: 1fr; }
  .artist-activity-grid .collection-body--grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .top-labels-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .artist-preview-player { left: 0; }
}

@media (max-width: 820px) {
  .artist-quick-filter {
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 8px;
  }
  .artist-filter-search { grid-column: 2; }
  .artist-filter-select { grid-row: 2; padding: 8px 10px 0 0; border-top: 1px solid #343434; border-left: 0; }
  .artist-filter-select:nth-of-type(2) { grid-column: 2; }
  .artist-filter-select:nth-of-type(3) { grid-column: 3; }
  .artist-quick-filter > button { grid-column: 3; grid-row: 1; }
  .artist-activity-grid .collection-body--grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .top-labels-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-page="artist"] .page-content { padding-bottom: 92px; }
  .artist-preview-player {
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 72px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 8px;
    border: 1px solid #3b3b3b;
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  .artist-activity-grid .collection-body--grid { grid-template-columns: 1fr 1fr; }
  .artist-activity-grid .collection-body--grid .production-item,
  .live-rankings-panel .collection-body--grid .live-ranking-item { grid-template-rows: auto 145px auto auto; }
  .artist-activity-grid .collection-body--grid .production-cover,
  .live-rankings-panel .collection-body--grid .live-cover { height: 145px; }
  .production-item { grid-template-columns: 28px 46px minmax(0,1fr) 68px !important; }
  .live-ranking-item { grid-template-columns: 38px 42px minmax(0,1fr) 68px 38px; }
  .live-cover { width: 42px; height: 42px; }
  .live-points b { font-size: 12px; }
  .top-labels-grid { grid-template-columns: 1fr 1fr; }
  .label-summary-card > strong { font-size: 11.5px; }
  .artist-preview-player { grid-template-columns: minmax(0,1fr) auto; }
}

/* Player vote controls fit the persistent track player in both layouts. */


.artist-activity-grid {
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: 16px;
}

/* Top productions: give the copy room, move days into the copy block, keep actions visible. */
.artist-activity-grid .production-item {
  min-height: 82px;
  grid-template-columns: 30px 56px minmax(0,1fr) 82px 68px;
  gap: 9px;
  padding: 9px 10px;
}
.artist-activity-grid .production-cover {
  width: 56px;
  height: 56px;
}
.artist-activity-grid .production-copy {
  gap: 0;
  padding-right: 2px;
}
.artist-activity-grid .production-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.22;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.artist-activity-grid .production-copy > small {
  margin-top: 3px;
  font-size: 8px;
}
.artist-activity-grid .production-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.artist-activity-grid .production-points {
  min-width: 0;
  justify-items: end;
}
.artist-activity-grid .production-points b { font-size: 15px; }
.artist-activity-grid .production-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.production-row-actions button,
.live-row-actions button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid #454545;
  border-radius: 7px;
  background: #181818;
  color: #d7d7d7;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.production-row-actions button:hover,
.live-row-actions button:hover {
  border-color: var(--lime-border);
  background: #20251a;
  color: var(--lime);
}
.production-row-actions .icon,
.live-row-actions .icon { width: 14px; }
.collection-body--list .production-hover-actions { display: none; }
.artist-activity-grid .collection-body--grid .production-row-actions { display: none; }
.artist-activity-grid .collection-body--grid .production-hover-actions { display: flex; }

/* Live Beatport rankings: one coherent row instead of stacked/stray movement boxes. */
.artist-activity-grid .live-ranking-item {
  min-height: 82px;
  grid-template-columns: 46px 54px minmax(0,1fr) 76px 42px 68px;
  gap: 8px;
  padding: 9px 10px;
}
.artist-activity-grid .live-rank-box {
  min-width: 42px;
  height: 44px;
  padding-inline: 5px;
}
.artist-activity-grid .live-cover {
  width: 54px;
  height: 54px;
}
.artist-activity-grid .live-ranking-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.artist-activity-grid .live-ranking-copy > small {
  margin-top: 3px;
  font-size: 8px;
}
.live-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.live-tags em {
  color: #777;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.artist-activity-grid .live-points { justify-items: end; }
.artist-activity-grid .live-points b { font-size: 14px; }
.artist-activity-grid .live-move-box {
  width: 38px;
  min-height: 34px;
  justify-self: center;
  border-radius: 7px;
}
.live-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.collection-body--list .live-hover-actions { display: none; }
.live-rankings-panel .collection-body--grid .live-row-actions { display: none; }
.live-rankings-panel .collection-body--grid .live-hover-actions { display: flex; }

/* Keep the chunky grid cards, with the media controls over the artwork. */
.artist-activity-grid .collection-body--grid .production-item,
.live-rankings-panel .collection-body--grid .live-ranking-item {
  min-width: 0;
}
.live-rankings-panel .collection-body--grid .live-tags em { display: none; }

@media (max-width: 1180px) {
  .artist-activity-grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); }
  .artist-activity-grid .production-item {
    grid-template-columns: 28px 52px minmax(0,1fr) 76px 64px;
    gap: 7px;
  }
  .artist-activity-grid .production-cover { width: 52px; height: 52px; }
  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 42px 50px minmax(0,1fr) 70px 38px 64px;
    gap: 6px;
  }
  .artist-activity-grid .live-cover { width: 50px; height: 50px; }
}

@media (max-width: 980px) {
  .artist-activity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Mobile list rows get a second meta/action line instead of squeezing six columns. */
  .artist-activity-grid .production-item {
    min-height: 88px;
    grid-template-columns: 28px 48px minmax(0,1fr) 72px !important;
    grid-template-rows: auto auto;
    gap: 7px 8px;
    padding: 9px 8px;
  }
  .artist-activity-grid .production-rank {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .artist-activity-grid .production-cover {
    width: 48px;
    height: 48px;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
  }
  .artist-activity-grid .production-copy {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .artist-activity-grid .production-copy strong { font-size: 12.5px; }
  .artist-activity-grid .production-points {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }
  .artist-activity-grid .production-row-actions {
    display: flex;
    grid-column: 4;
    grid-row: 2;
    align-self: end;
    justify-self: end;
  }
  .artist-activity-grid .production-points b { font-size: 14px; }
  .artist-activity-grid .production-tags { gap: 4px; margin-top: 5px; }

  .artist-activity-grid .live-ranking-item {
    min-height: 94px;
    grid-template-columns: 42px 46px minmax(0,1fr) 74px !important;
    grid-template-rows: auto auto;
    gap: 7px 8px;
    padding: 9px 8px;
  }
  .artist-activity-grid .live-rank-box {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    min-width: 38px;
    height: 42px;
  }
  .artist-activity-grid .live-cover {
    width: 46px;
    height: 46px;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
  }
  .artist-activity-grid .live-ranking-copy {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .artist-activity-grid .live-ranking-copy strong { font-size: 12px; }
  .artist-activity-grid .live-points {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }
  .artist-activity-grid .live-points b { font-size: 14px; }
  .artist-activity-grid .live-move-box {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    width: 36px;
    min-height: 30px;
  }
  .artist-activity-grid .live-row-actions {
    grid-column: 4;
    grid-row: 2;
    align-self: end;
    justify-self: end;
  }
  .live-tags { gap: 5px; margin-top: 5px; }
  .live-tags em { font-size: 7px; }

  .production-row-actions button,
  .live-row-actions button {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }
}

@media (max-width: 470px) {
  .artist-activity-grid .production-item {
    grid-template-columns: 26px 46px minmax(0,1fr) 68px !important;
  }
  .artist-activity-grid .production-cover { width: 46px; height: 46px; }
  .artist-activity-grid .production-copy strong { font-size: 11.5px; }
  .artist-activity-grid .production-copy > small { font-size: 7.5px; }
  .artist-activity-grid .production-points b { font-size: 13px; }

  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 38px 44px minmax(0,1fr) 68px !important;
  }
  .artist-activity-grid .live-cover { width: 44px; height: 44px; }
  .artist-activity-grid .live-ranking-copy strong { font-size: 11.5px; }
  .artist-activity-grid .live-ranking-copy > small { font-size: 7.5px; }
  .artist-activity-grid .live-points b { font-size: 13px; }
}


.artist-activity-grid {
  grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
}

.artist-activity-grid .production-item {
  min-height: 88px;
  grid-template-columns: 30px 58px minmax(0,1fr) 84px 68px;
  gap: 9px 10px;
  padding: 10px 11px;
}
.artist-activity-grid .production-cover {
  width: 58px;
  height: 58px;
}
.artist-activity-grid .production-copy strong {
  font-size: 13.5px;
  line-height: 1.2;
}
.artist-activity-grid .production-copy > small {
  margin-top: 4px;
  font-size: 8.3px;
}
.artist-activity-grid .production-tags {
  gap: 5px;
  margin-top: 7px;
}
.artist-activity-grid .production-points {
  align-self: center;
}
.artist-activity-grid .production-points b {
  font-size: 15.5px;
}

.artist-activity-grid .live-ranking-item {
  min-height: 102px;
  grid-template-columns: 52px 62px minmax(0,1fr) 88px 38px;
  grid-template-rows: auto auto;
  gap: 8px 10px;
  padding: 11px 11px;
  align-items: center;
}
.artist-activity-grid .live-rank-box {
  grid-column: 1;
  grid-row: 1;
  min-width: 52px;
  width: 52px;
  height: 48px;
  padding-inline: 6px;
  border-radius: 12px;
  font-size: 24px;
}
.artist-activity-grid .live-rank-box b {
  font-size: 24px;
  line-height: 1;
}
.artist-activity-grid .live-cover {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 62px;
  height: 62px;
}
.artist-activity-grid .live-ranking-copy {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}
.artist-activity-grid .live-ranking-copy strong {
  font-size: 13px;
  line-height: 1.22;
}
.artist-activity-grid .live-ranking-copy > small {
  margin-top: 4px;
  font-size: 8.3px;
}
.artist-activity-grid .live-tags {
  margin-top: 7px;
  gap: 6px;
}
.artist-activity-grid .live-tags em {
  font-size: 8px;
}
.artist-activity-grid .live-points {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  text-align: right;
}
.artist-activity-grid .live-points b {
  font-size: 15px;
}
.artist-activity-grid .live-move-box {
  grid-column: 1;
  grid-row: 2;
  width: 52px;
  min-height: 34px;
  align-self: start;
  justify-self: start;
  border-radius: 10px;
}
.artist-activity-grid .live-row-actions {
  grid-column: 5;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.artist-activity-grid .live-row-actions button {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

@media (max-width: 1180px) {
  .artist-activity-grid .production-item {
    grid-template-columns: 28px 54px minmax(0,1fr) 78px 64px;
  }
  .artist-activity-grid .production-cover {
    width: 54px;
    height: 54px;
  }
  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 48px 56px minmax(0,1fr) 82px 36px;
    gap: 7px 8px;
  }
  .artist-activity-grid .live-rank-box,
  .artist-activity-grid .live-move-box {
    width: 48px;
    min-width: 48px;
  }
  .artist-activity-grid .live-cover {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 700px) {
  .artist-activity-grid .production-item {
    min-height: 96px;
    grid-template-columns: 28px 52px minmax(0,1fr) 76px !important;
    gap: 8px 9px;
    padding: 10px 8px;
  }
  .artist-activity-grid .production-cover {
    width: 52px;
    height: 52px;
  }
  .artist-activity-grid .production-copy strong {
    font-size: 12.8px;
  }
  .artist-activity-grid .production-row-actions {
    gap: 6px;
  }
  .artist-activity-grid .production-points b {
    font-size: 14.5px;
  }

  .artist-activity-grid .live-ranking-item {
    min-height: 108px;
    grid-template-columns: 42px 52px minmax(0,1fr) 76px !important;
    grid-template-rows: auto auto;
    gap: 8px 8px;
    padding: 10px 8px;
  }
  .artist-activity-grid .live-rank-box {
    grid-column: 1;
    grid-row: 1;
    min-width: 42px;
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  .artist-activity-grid .live-rank-box b { font-size: 20px; }
  .artist-activity-grid .live-move-box {
    grid-column: 1;
    grid-row: 2;
    width: 42px;
    min-height: 30px;
    align-self: start;
    justify-self: start;
  }
  .artist-activity-grid .live-cover {
    width: 52px;
    height: 52px;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .artist-activity-grid .live-ranking-copy {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .artist-activity-grid .live-ranking-copy strong { font-size: 12.4px; }
  .artist-activity-grid .live-points {
    grid-column: 4;
    grid-row: 1;
  }
  .artist-activity-grid .live-points b { font-size: 14.5px; }
  .artist-activity-grid .live-row-actions {
    grid-column: 4;
    grid-row: 2;
    flex-direction: row;
    align-self: end;
    gap: 6px;
  }
  .artist-activity-grid .live-row-actions button {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .artist-activity-grid .live-tags {
    gap: 5px;
    margin-top: 6px;
  }
}

@media (max-width: 470px) {
  .artist-activity-grid .production-item {
    grid-template-columns: 24px 48px minmax(0,1fr) 72px !important;
  }
  .artist-activity-grid .production-cover {
    width: 48px;
    height: 48px;
  }
  .artist-activity-grid .production-copy strong { font-size: 12px; }

  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 38px 48px minmax(0,1fr) 70px !important;
  }
  .artist-activity-grid .live-rank-box,
  .artist-activity-grid .live-move-box {
    width: 38px;
    min-width: 38px;
  }
  .artist-activity-grid .live-cover {
    width: 48px;
    height: 48px;
  }
  .artist-activity-grid .live-ranking-copy strong { font-size: 12px; }
  .artist-activity-grid .live-points b { font-size: 13.5px; }
}


.artist-activity-grid .production-row-actions,
.artist-activity-grid .live-row-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.artist-activity-grid .production-row-actions button,
.artist-activity-grid .live-row-actions button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

/* Keep the artist page sections stacked on tablet/mobile. */
@media (max-width: 980px) {
  .artist-activity-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: every content lane becomes one-per-row, including Latest charted singles. */
@media (max-width: 700px) {
  .latest-singles-grid,
  .top-labels-grid,
  .artist-activity-grid .collection-body--grid,
  .live-rankings-panel .collection-body--grid {
    grid-template-columns: 1fr !important;
  }

  .artist-activity-grid .production-item {
    grid-template-columns: 28px 52px minmax(0,1fr) 76px 74px !important;
  }

  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 42px 52px minmax(0,1fr) 76px 74px !important;
    grid-template-rows: auto auto;
  }

  .artist-activity-grid .live-row-actions {
    grid-column: 5;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}

@media (max-width: 470px) {
  .latest-singles-grid,
  .top-labels-grid,
  .artist-activity-grid .collection-body--grid,
  .live-rankings-panel .collection-body--grid {
    grid-template-columns: 1fr !important;
  }

  .artist-activity-grid .production-item {
    grid-template-columns: 24px 48px minmax(0,1fr) 68px 70px !important;
    gap: 8px;
  }

  .artist-activity-grid .live-ranking-item {
    grid-template-columns: 38px 48px minmax(0,1fr) 68px 70px !important;
    gap: 8px;
  }

  .artist-activity-grid .production-row-actions,
  .artist-activity-grid .live-row-actions {
    gap: 5px;
  }

  .artist-activity-grid .production-row-actions button,
  .artist-activity-grid .live-row-actions button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
}


@media (max-width: 700px) {
  .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 34px 72px minmax(0,1fr) 88px !important;
    grid-template-rows: auto auto !important;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    min-height: 112px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-rank {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    font-size: 18px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-cover {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-copy {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    gap: 6px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-copy strong {
    font-size: 16px;
    line-height: 1.15;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-copy small {
    font-size: 11px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-tags {
    gap: 6px;
    flex-wrap: wrap;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-points {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    text-align: right;
    min-width: 88px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-points b {
    font-size: 18px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-row-actions {
    grid-column: 4;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-row-actions button,
  .artist-activity-grid .live-rankings-panel .collection-body--list .live-row-actions button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 56px 72px minmax(0,1fr) 88px !important;
    grid-template-rows: auto auto !important;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    min-height: 126px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 16px;
    align-self: center;
    justify-self: center;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
    font-size: 22px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    grid-column: 1;
    grid-row: 2;
    width: 56px;
    min-width: 56px;
    min-height: 40px;
    border-radius: 14px;
    justify-self: center;
    align-self: start;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    gap: 7px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy strong {
    font-size: 16px;
    line-height: 1.15;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy small {
    font-size: 11px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-tags {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-tags em {
    font-size: 11px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    text-align: right;
    min-width: 88px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-points b {
    font-size: 18px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-row-actions {
    grid-column: 4;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    align-self: center;
    justify-self: end;
  }
}

@media (max-width: 470px) {
  .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 28px 64px minmax(0,1fr) 78px !important;
    gap: 10px;
    padding: 14px 12px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 64px;
    height: 64px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-points,
  .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    min-width: 78px;
  }

  .artist-activity-grid .productions-section .collection-body--list .production-row-actions button,
  .artist-activity-grid .live-rankings-panel .collection-body--list .live-row-actions button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 48px 64px minmax(0,1fr) 78px !important;
    gap: 10px;
    padding: 14px 12px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
    font-size: 20px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 48px;
    min-width: 48px;
  }

  .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 64px;
    height: 64px;
  }
}


body[data-page="artist"] .release-days,
body[data-page="artist"] .live-tags em {
  display: none !important;
}

body[data-page="artist"] .release-meta {
  gap: 0;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-item {
  grid-template-columns: 36px 64px minmax(0, 1fr) 98px !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 14px;
  min-height: 98px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-rank {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  font-size: 18px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 10px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-copy {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 6px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-copy strong {
  font-size: 15px;
  line-height: 1.18;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-copy small {
  font-size: 10px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-tags {
  margin-top: 4px;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-points {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  text-align: right;
  min-width: 98px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-points b {
  font-size: 18px;
}

body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-row-actions {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
  grid-template-columns: 52px 68px minmax(0, 1fr) 98px !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 14px;
  min-height: 112px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
  grid-column: 1;
  grid-row: 1;
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 16px;
  justify-self: center;
  align-self: center;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
  font-size: 24px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
  grid-column: 1;
  grid-row: 2;
  width: 52px;
  min-width: 52px;
  min-height: 36px;
  border-radius: 12px;
  justify-self: center;
  align-self: start;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 68px;
  height: 68px;
  border-radius: 10px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 6px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy strong {
  font-size: 15px;
  line-height: 1.18;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy small {
  font-size: 10px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-tags {
  margin-top: 4px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  text-align: right;
  min-width: 98px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points b {
  font-size: 18px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-row-actions {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

body[data-page="artist"] .artist-activity-grid .production-row-actions button,
body[data-page="artist"] .artist-activity-grid .live-row-actions button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
}

@media (max-width: 1180px) {
  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 32px 58px minmax(0, 1fr) 90px !important;
    gap: 10px 12px;
    padding: 12px 12px;
  }

  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 58px;
    height: 58px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 48px 60px minmax(0, 1fr) 90px !important;
    gap: 10px 12px;
    padding: 12px 12px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box,
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 48px;
    min-width: 48px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 60px;
    height: 60px;
  }

  body[data-page="artist"] .artist-activity-grid .production-row-actions button,
  body[data-page="artist"] .artist-activity-grid .live-row-actions button {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

@media (max-width: 700px) {
  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 34px 72px minmax(0, 1fr) 88px !important;
    gap: 12px;
    padding: 16px 14px;
    min-height: 112px;
  }

  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 72px;
    height: 72px;
  }

  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-copy strong,
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy strong {
    font-size: 16px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 56px 72px minmax(0, 1fr) 88px !important;
    gap: 12px;
    padding: 16px 14px;
    min-height: 126px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
    font-size: 22px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 56px;
    min-width: 56px;
    min-height: 40px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 72px;
    height: 72px;
  }

  body[data-page="artist"] .artist-activity-grid .production-row-actions button,
  body[data-page="artist"] .artist-activity-grid .live-row-actions button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 470px) {
  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 28px 64px minmax(0, 1fr) 78px !important;
    gap: 10px;
    padding: 14px 12px;
  }

  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 64px;
    height: 64px;
  }

  body[data-page="artist"] .artist-activity-grid .productions-section .collection-body--list .production-points,
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    min-width: 78px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 48px 64px minmax(0, 1fr) 78px !important;
    gap: 10px;
    padding: 14px 12px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box,
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 48px;
    min-width: 48px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 64px;
    height: 64px;
  }

  body[data-page="artist"] .artist-activity-grid .production-row-actions button,
  body[data-page="artist"] .artist-activity-grid .live-row-actions button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}


body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
  grid-template-columns: 48px 68px minmax(0, 1fr) 98px !important;
  gap: 8px 14px;
  min-height: 108px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 14px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
  font-size: 22px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
  width: 48px;
  min-width: 48px;
  min-height: 32px;
  border-radius: 10px;
  padding-inline: 4px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement {
  font-size: 13px;
  gap: 2px;
}

body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement .icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 1180px) {
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 46px 60px minmax(0, 1fr) 90px !important;
    gap: 8px 12px;
    min-height: 104px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 46px;
    min-width: 46px;
    min-height: 30px;
  }
}

@media (max-width: 700px) {
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 46px 72px minmax(0, 1fr) 88px !important;
    gap: 8px 12px;
    padding: 14px 14px;
    min-height: 116px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
    font-size: 20px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 46px;
    min-width: 46px;
    min-height: 30px;
    border-radius: 10px;
  }
}

@media (max-width: 470px) {
  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 42px 64px minmax(0, 1fr) 78px !important;
    gap: 8px 10px;
    padding: 14px 12px;
    min-height: 108px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box b {
    font-size: 18px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 42px;
    min-width: 42px;
    min-height: 28px;
    border-radius: 10px;
  }

  body[data-page="artist"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement {
    font-size: 12px;
  }
}


body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}

body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
  font-size: 24px;
}

body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
  font-size: 20px;
}

body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
  font-size: 12px;
  gap: 2px;
}

@media (max-width: 700px) {
  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box {
    font-size: 24px;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 20px;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 17px;
  }
}

@media (max-width: 470px) {
  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box {
    font-size: 22px;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 18px;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 15px;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
    font-size: 11px;
  }
}


body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
  font-size: 19px !important;
  letter-spacing: -0.05em;
  padding-inline: 2px;
}

body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
  font-size: 16px !important;
  letter-spacing: -0.06em;
  padding-inline: 2px;
}

body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
  font-size: 11px !important;
}

@media (max-width: 700px) {
  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 17px !important;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 15px !important;
  }
}

@media (max-width: 470px) {
  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 15px !important;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 13px !important;
  }

  body[data-page="artist"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
    font-size: 10px !important;
  }
}


/* Index page only: reduce name copy sizing for track / artist / label rows. */
body[data-page="top10"] .rank-name strong,
body[data-page="top10"] .rank-name small,
body[data-page="top10"] .rank-name--single strong,
body[data-page="top10"] .rank-name--single small {
  font-size: 10.5px !important;
  line-height: 1.16;
}

/* Artist hero rankings: switch to 3-across and give movement boxes more room. */
body[data-page="artist"] .detail-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="artist"] .detail-stat-grid .detail-stat {
  grid-template-columns: 58px minmax(0,1fr) 54px;
  gap: 12px;
  padding: 11px;
}

body[data-page="artist"] .detail-move-box {
  width: 54px;
  min-height: 54px;
  border-radius: 10px;
}

body[data-page="artist"] .detail-move-box .movement {
  gap: 4px;
  font-size: 12px;
}

body[data-page="artist"] .detail-move-box .movement .icon {
  width: 14px;
  height: 14px;
}

body[data-page="artist"] .detail-move-box .movement--new {
  font-size: 10px;
}

@media (max-width: 1180px) {
  body[data-page="artist"] .detail-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body[data-page="artist"] .detail-stat-grid .detail-stat {
    grid-template-columns: 54px minmax(0,1fr) 44px;
    gap: 10px;
  }

  body[data-page="artist"] .detail-move-box {
    width: 44px;
    min-height: 44px;
    border-radius: 9px;
  }

  body[data-page="artist"] .detail-move-box .movement {
    gap: 2px;
    font-size: 11px;
  }
}


/* Apply the same artist hero ranking spacing treatment to the label page. */
body[data-page="label"] .detail-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="label"] .detail-stat-grid .detail-stat {
  grid-template-columns: 58px minmax(0,1fr) 54px;
  gap: 12px;
  padding: 11px;
}

body[data-page="label"] .detail-move-box {
  width: 54px;
  min-height: 54px;
  border-radius: 10px;
}

body[data-page="label"] .detail-move-box .movement {
  gap: 4px;
  font-size: 12px;
}

body[data-page="label"] .detail-move-box .movement .icon {
  width: 14px;
  height: 14px;
}

body[data-page="label"] .detail-move-box .movement--new {
  font-size: 10px;
}

@media (max-width: 1180px) {
  body[data-page="label"] .detail-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body[data-page="label"] .detail-stat-grid .detail-stat {
    grid-template-columns: 54px minmax(0,1fr) 44px;
    gap: 10px;
  }

  body[data-page="label"] .detail-move-box {
    width: 44px;
    min-height: 44px;
    border-radius: 9px;
  }

  body[data-page="label"] .detail-move-box .movement {
    gap: 2px;
    font-size: 11px;
  }
}


/* Keep the requested index-page name size, while restoring hierarchy for secondary copy. */
body[data-page="top10"] .rank-name strong,
body[data-page="top10"] .rank-name--single strong,
body[data-page="top10"] .leader-copy strong,
body[data-page="top10"] .leader-copy--single strong {
  font-size: 10.5px !important;
  line-height: 1.15;
}
body[data-page="top10"] .rank-name small,
body[data-page="top10"] .rank-name--single small,
body[data-page="top10"] .leader-copy small,
body[data-page="top10"] .leader-copy--single small {
  font-size: 8.5px !important;
  line-height: 1.2;
}

/* One restrained elevation/shadow language everywhere. */
.panel,
.chart-table-panel,
.detail-hero,
.track-hero,
.track-ranking,
.release-card,
.artist-data-panel,
.internal-ad-slot,
.mover-card,
.filter-bar,
.artist-quick-filter,
.mobile-nav {
  box-shadow: var(--box-shadow) !important;
}

/* Detail-page action buttons use the same dimensions and vertical rhythm. */
body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .quiet-button,
body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .primary-button,
body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .songstats-context-cta {
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  border-radius: 11px;
}

/* Give profile ranking labels/points a little more breathing room. */
body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid .stat-copy > small {
  font-size: 8.5px;
}
body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid .stat-copy > strong {
  font-size: 20px;
}
body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid .stat-copy > em {
  margin-top: 4px;
}

/* TRACK PROFILE --------------------------------------------------------- */
/* Desktop returns to the original three-part hero layout, but the ranking panel
   now prioritises the primary chart placement first. That better reflects the
   real-world data where one placement is common, two is possible and three is
   the upper edge case. */
body[data-page="track"] .track-hero {
  grid-template-columns: 280px minmax(0,1fr) minmax(320px,.86fr);
  gap: 22px;
  align-items: stretch;
}
body[data-page="track"] .track-cover-wrap {
  min-height: 280px;
}
body[data-page="track"] .track-main {
  padding: 8px 4px 4px 0;
}
body[data-page="track"] .track-main h1 {
  margin-top: 5px;
}
body[data-page="track"] .track-actions {
  gap: 8px;
  margin-top: 16px;
}

body[data-page="track"] .track-ranking {
  grid-column: auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #1b1b1b;
}
body[data-page="track"] .track-ranking > .eyebrow {
  margin: 0;
  padding: 14px 16px 10px;
  background: #151515;
  font-size: 9px;
}
body[data-page="track"] .track-rank-box {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--lime-border);
  border-radius: 12px;
  background: rgba(180,230,29,.055);
  color: var(--lime);
  font-size: 17px;
  font-weight: 880;
  font-variant-numeric: tabular-nums;
}
body[data-page="track"] .track-rank-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body[data-page="track"] .track-rank-copy small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 780;
  text-transform: uppercase;
}
body[data-page="track"] .track-rank-copy strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="track"] .track-rank-copy em {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="track"] .track-move-box {
  display: grid;
  width: 42px;
  min-height: 42px;
  place-items: center;
  justify-self: end;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  background: #181818;
}
body[data-page="track"] .track-move-box .movement {
  min-width: 0;
  gap: 2px;
  font-size: 11px;
}
body[data-page="track"] .track-move-box .movement .icon {
  width: 13px;
  height: 13px;
}

/* Track lower content aligns to the same panel/header rhythm as other entities. */
body[data-page="track"] .track-bottom-grid {
  gap: 16px;
}

@media (max-width: 1320px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 260px minmax(0,1fr) minmax(290px,.82fr);
  }
}

@media (max-width: 1120px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 250px minmax(0,1fr);
  }
  body[data-page="track"] .track-ranking {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 240px minmax(0,1fr);
  }
  body[data-page="track"] .track-meta {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .detail-actions,
  body[data-page="track"] .track-actions {
    gap: 7px;
  }

  body[data-page="track"] .track-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  body[data-page="track"] .track-cover-wrap {
    min-height: 0;
  }
  body[data-page="track"] .track-main {
    padding: 0 2px;
  }
  body[data-page="track"] .track-ranking {
    grid-column: auto;
  }
  body[data-page="track"] .track-rank-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
  }
  body[data-page="track"] .track-move-box {
    width: 38px;
    min-height: 38px;
  }
  body[data-page="track"] .track-meta {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  /* One card per row on all mobile list/grid contexts. */
  body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 470px) {
  body[data-page="track"] .track-rank-box {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  body[data-page="track"] .track-move-box {
    width: 36px;
    min-height: 36px;
  }
  body[data-page="track"] .track-rank-copy strong {
    font-size: 12px;
  }
}

/* LIST PAGES ------------------------------------------------------------ */
/* Stabilise right-hand values/actions and keep title area as the flexible column. */
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .rank-points {
  justify-self: end;
  text-align: right;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .rank-points strong {
  font-variant-numeric: tabular-nums;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .rank-name strong {
  line-height: 1.18;
}

/* Release rails across artist/label pages use one consistent card typography. */
body:is([data-page="artist"],[data-page="label"]) .release-card .release-title {
  font-size: 12px;
  line-height: 1.2;
}
body:is([data-page="artist"],[data-page="label"]) .release-card .release-points b {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  body[data-page="track"] .track-ranking-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body[data-page="track"] .track-ranking-list article:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 240px minmax(0,1fr);
  }
  body[data-page="track"] .track-meta {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .detail-actions,
  body[data-page="track"] .track-actions {
    gap: 7px;
  }

  body[data-page="track"] .track-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  body[data-page="track"] .track-cover-wrap {
    min-height: 0;
  }
  body[data-page="track"] .track-main {
    padding: 0 2px;
  }
  body[data-page="track"] .track-ranking {
    grid-column: auto;
  }
  body[data-page="track"] .track-ranking-list {
    grid-template-columns: 1fr;
  }
  body[data-page="track"] .track-ranking-list article,
  body[data-page="track"] .track-ranking-list article:nth-child(3) {
    grid-column: auto;
    min-height: 90px;
    grid-template-columns: 46px 54px minmax(0,1fr) 42px;
    padding: 10px 11px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
  body[data-page="track"] .track-ranking-list article:first-child {
    border-top: 0;
  }
  body[data-page="track"] .track-rank-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 20px;
  }
  body[data-page="track"] .track-ranking-list article img {
    width: 54px;
    height: 54px;
  }
  body[data-page="track"] .track-move-box {
    width: 42px;
    min-height: 42px;
  }
  body[data-page="track"] .track-meta {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  /* One card per row on all mobile list/grid contexts. */
  body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 470px) {
  body[data-page="track"] .track-ranking-list article {
    grid-template-columns: 42px 50px minmax(0,1fr) 38px;
    gap: 8px;
  }
  body[data-page="track"] .track-rank-box {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  body[data-page="track"] .track-ranking-list article img {
    width: 50px;
    height: 50px;
  }
  body[data-page="track"] .track-move-box {
    width: 38px;
    min-height: 38px;
  }
  body[data-page="track"] .track-rank-copy strong {
    font-size: 12px;
  }
}

body[data-page="track"] .track-hero {
  grid-template-columns: 280px minmax(0,1fr) minmax(320px,.92fr);
  gap: 22px;
}
body[data-page="track"] .track-cover-wrap {
  display: block;
  min-height: 280px;
}
body[data-page="track"] .track-cover-wrap > img {
  display: block;
}

body[data-page="track"] .track-ranking {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32,32,32,.98), rgba(27,27,27,.98));
}
body[data-page="track"] .track-ranking > .eyebrow {
  margin: 0;
  padding: 16px 18px 14px;
  background: #101010;
  border-bottom: 1px solid var(--line-soft);
}
body[data-page="track"] .track-ranking-list {
  display: grid;
}
body[data-page="track"] .track-ranking-list article {
  display: grid;
  grid-template-columns: 72px 72px minmax(0,1fr) 64px;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 14px 18px;
  background: #202020;
  border-top: 1px solid var(--line-soft);
}
body[data-page="track"] .track-ranking-list article:first-child {
  border-top: 0;
}
body[data-page="track"] .track-ranking-list article > img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}
body[data-page="track"] .track-rank-box {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 20px;
  border: 1px solid var(--lime-border);
  background: rgba(180,230,29,.07);
  color: var(--lime);
  font-size: 32px;
  line-height: 1;
  font-weight: 880;
  font-variant-numeric: tabular-nums;
}
body[data-page="track"] .track-rank-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
body[data-page="track"] .track-rank-copy small {
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1.1;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-page="track"] .track-rank-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="track"] .track-rank-copy em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="track"] .track-move-box {
  display: grid;
  width: 64px;
  min-height: 64px;
  place-items: center;
  justify-self: end;
  border: 1px solid #3b3b3b;
  border-radius: 18px;
  background: #181818;
}
body[data-page="track"] .track-move-box .movement {
  gap: 2px;
  font-size: 12px;
}
body[data-page="track"] .track-move-box .movement .icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 1320px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 260px minmax(0,1fr) minmax(300px,.9fr);
  }
  body[data-page="track"] .track-ranking-list article {
    grid-template-columns: 66px 66px minmax(0,1fr) 58px;
  }
  body[data-page="track"] .track-rank-box {
    width: 66px;
    height: 66px;
    font-size: 29px;
  }
  body[data-page="track"] .track-ranking-list article > img {
    width: 66px;
    height: 66px;
  }
  body[data-page="track"] .track-move-box {
    width: 58px;
    min-height: 58px;
  }
}

@media (max-width: 1120px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 250px minmax(0,1fr);
  }
  body[data-page="track"] .track-ranking {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  body[data-page="track"] .track-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body[data-page="track"] .track-cover-wrap {
    min-height: 0;
  }
  body[data-page="track"] .track-ranking {
    grid-column: auto;
  }
  body[data-page="track"] .track-ranking > .eyebrow {
    padding: 14px 14px 12px;
  }
  body[data-page="track"] .track-ranking-list article {
    grid-template-columns: 58px 58px minmax(0,1fr) 52px;
    min-height: 96px;
    gap: 10px;
    padding: 12px 14px;
  }
  body[data-page="track"] .track-ranking-list article > img {
    width: 58px;
    height: 58px;
  }
  body[data-page="track"] .track-rank-box {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 24px;
  }
  body[data-page="track"] .track-move-box {
    width: 52px;
    min-height: 52px;
    border-radius: 14px;
  }
  body[data-page="track"] .track-rank-copy strong {
    font-size: 13px;
  }
  body[data-page="track"] .track-rank-copy em {
    white-space: normal;
  }
}


/* Fixed-position player rules otherwise override the native [hidden] rule. */

/* Do not reserve player space before Preview has been opened. */

/* Replace the cramped two-column points treatment with a deliberate score
   block followed by three compact supporting metrics. */


body[data-page="track"] .track-bottom-grid.track-bottom-grid--single {
  grid-template-columns: 1fr;
}
body[data-page="track"] .related-panel.related-panel--full .mini-release-row {
  width: 100%;
}
body[data-page="track"] .related-panel.related-panel--full .mini-release-row > * {
  min-width: 0;
}

/* The design baseline is intentionally wide enough for the longest Beatport
   genre name: ORGANIC HOUSE / DOWNTEMPO. Short names simply gain whitespace. */

/* Fits the longest live Beatport genre name without redefining the desktop grid. */
body[data-page="track"] .track-score-panel-v34 {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  margin-top: 18px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(180,230,29,.66);
  border-radius: 19px;
  background:
    radial-gradient(circle at 7% 20%, rgba(180,230,29,.105), transparent 34%),
    linear-gradient(108deg, rgba(180,230,29,.04), rgba(11,14,15,.98) 47%, rgba(8,11,12,.995));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 1px 1px 9px rgba(0,0,0,.25);
}
body[data-page="track"] .track-score-panel-v34__score,
body[data-page="track"] .track-score-panel-v34__context {
  min-width: 0;
}
body[data-page="track"] .track-score-panel-v34__score {
  display: grid;
  align-content: center;
  justify-items: start;
  padding-right: 20px;
}
body[data-page="track"] .track-score-panel-v34__heading {
  color: var(--lime);
  font-size: 9px;
  font-weight: 840;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__number {
  margin-top: 11px;
  color: #fff;
  font-size: clamp(42px, 3.55vw, 58px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__unit {
  margin-top: 8px;
  color: #a7abad;
  font-size: 9px;
  font-weight: 790;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body[data-page="track"] .track-score-panel-v34__helper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: #aeb2b4;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__helper i {
  position: relative;
  width: 18px;
  height: 10px;
  flex: 0 0 18px;
}
body[data-page="track"] .track-score-panel-v34__helper i::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 2px;
  background: var(--lime);
  clip-path: polygon(0 42%, 24% 42%, 34% 0, 47% 100%, 58% 42%, 100% 42%, 100% 60%, 61% 60%, 48% 100%, 34% 28%, 29% 60%, 0 60%);
}
body[data-page="track"] .track-score-panel-v34__context {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: center;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.10);
}
body[data-page="track"] .track-score-panel-v34__context-heading {
  color: #a8acae;
  font-size: 9px;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
}
body[data-page="track"] .track-score-panel-v34__genre {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 49px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid rgba(180,230,29,.68);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(180,230,29,.035), rgba(0,0,0,.16));
  box-shadow: inset 0 0 14px rgba(180,230,29,.018);
}
body[data-page="track"] .track-score-panel-v34__genre strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f4f5f5;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__eq {
  display: inline-flex;
  height: 22px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
body[data-page="track"] .track-score-panel-v34__eq i {
  width: 3px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 6px rgba(180,230,29,.2);
}
body[data-page="track"] .track-score-panel-v34__eq i:nth-child(1) { height: 8px; }
body[data-page="track"] .track-score-panel-v34__eq i:nth-child(2) { height: 16px; }
body[data-page="track"] .track-score-panel-v34__eq i:nth-child(3) { height: 22px; }
body[data-page="track"] .track-score-panel-v34__eq i:nth-child(4) { height: 15px; }
body[data-page="track"] .track-score-panel-v34__eq i:nth-child(5) { height: 8px; }
body[data-page="track"] .track-score-panel-v34__controls {
  display: grid;
  grid-template-columns: minmax(90px,auto) minmax(118px,auto);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
body[data-page="track"] .track-score-panel-v34__badge {
  display: inline-flex;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(180,230,29,.34);
  border-radius: 10px;
  background: rgba(0,0,0,.21);
  color: #e3e7e9;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .105em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__badge .icon {
  width: 14px;
  height: 14px;
  color: var(--lime);
}
body[data-page="track"] .track-score-panel-v34__badge--hype {
  justify-self: start;
  color: var(--lime);
}
body[data-page="track"] .track-score-panel-v34__badge--period {
  justify-self: end;
}

/* The design baseline is ORGANIC HOUSE / DOWNTEMPO. At the normal desktop
   middle-column width this fits in one line at 13px without increasing the card. */
@media (max-width: 1360px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: minmax(0,42%) minmax(0,58%);
    padding: 16px 18px;
  }
  body[data-page="track"] .track-score-panel-v34__score {
    padding-right: 16px;
  }
  body[data-page="track"] .track-score-panel-v34__context {
    padding-left: 16px;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 45px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 12px;
    letter-spacing: .035em;
  }
}
@media (max-width: 1120px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: minmax(0,44%) minmax(0,56%);
  }
}
@media (max-width: 820px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  body[data-page="track"] .track-score-panel-v34__score {
    padding-right: 0;
  }
  body[data-page="track"] .track-score-panel-v34__context {
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 0;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 46px;
  }
  body[data-page="track"] .track-score-panel-v34__genre {
    height: 47px;
  }
}
@media (max-width: 470px) {
  body[data-page="track"] .track-score-panel-v34 {
    padding: 14px;
    border-radius: 16px;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 40px;
  }
  body[data-page="track"] .track-score-panel-v34__controls {
    grid-template-columns: 1fr 1fr;
  }
  body[data-page="track"] .track-score-panel-v34__badge {
    width: 100%;
    padding-inline: 8px;
    font-size: 8px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 11px;
    letter-spacing: .025em;
  }
}


body[data-page="track"] .track-score-panel-v34 {
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  padding: 17px 18px;
}
body[data-page="track"] .track-score-panel-v34__score {
  padding-right: 18px;
}
body[data-page="track"] .track-score-panel-v34__context {
  padding-left: 18px;
  padding-right: 0;
}
body[data-page="track"] .track-score-panel-v34__genre {
  height: 50px;
  gap: 9px;
  padding-inline: 12px;
}
body[data-page="track"] .track-score-panel-v34__genre strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.12;
  letter-spacing: .028em;
  text-overflow: clip;
  white-space: nowrap;
}
body[data-page="track"] .track-score-panel-v34__eq {
  flex-basis: 24px;
  width: 24px;
  gap: 2px;
}
body[data-page="track"] .track-score-panel-v34__controls {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 10px;
  justify-content: stretch;
}
body[data-page="track"] .track-score-panel-v34__badge {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 34px;
  padding-inline: 8px;
  font-size: 8.5px;
  letter-spacing: .085em;
  overflow: hidden;
}
body[data-page="track"] .track-score-panel-v34__badge--hype,
body[data-page="track"] .track-score-panel-v34__badge--period {
  justify-self: stretch;
}
body[data-page="track"] .track-score-panel-v34__badge--period span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1360px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    padding: 16px;
  }
  body[data-page="track"] .track-score-panel-v34__score {
    padding-right: 14px;
  }
  body[data-page="track"] .track-score-panel-v34__context {
    padding-left: 0;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 43px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 10px;
    letter-spacing: .018em;
  }
}

/* Tablet/mobile: stack the score and genre areas. This prevents the long genre
   or period controls from ever competing horizontally with the score. */
@media (max-width: 820px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }
  body[data-page="track"] .track-score-panel-v34__score {
    padding-right: 0;
  }
  body[data-page="track"] .track-score-panel-v34__context {
    padding: 13px 0 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 0;
  }
  body[data-page="track"] .track-score-panel-v34__genre {
    width: 100%;
    height: 48px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 11px;
  }
  body[data-page="track"] .track-score-panel-v34__controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

@media (max-width: 470px) {
  body[data-page="track"] .track-score-panel-v34 {
    padding: 13px;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 38px;
  }
  body[data-page="track"] .track-score-panel-v34__genre {
    height: auto;
    min-height: 46px;
    padding-block: 8px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 9.5px;
    letter-spacing: .01em;
    white-space: normal;
    overflow-wrap: normal;
  }
  body[data-page="track"] .track-score-panel-v34__controls {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 8px;
  }
  body[data-page="track"] .track-score-panel-v34__badge {
    height: 32px;
    gap: 5px;
    padding-inline: 6px;
    font-size: 7.5px;
    letter-spacing: .05em;
  }
  body[data-page="track"] .track-score-panel-v34__badge .icon {
    width: 12px;
    height: 12px;
  }
}


body[data-page="track"] .track-score-panel-v34 {
  grid-template-columns: minmax(0, 39%) minmax(0, 61%);
}
body[data-page="track"] .track-score-panel-v34__number {
  font-size: clamp(40px, 2.7vw, 46px);
}
body[data-page="track"] .track-score-panel-v34__genre {
  gap: 7px;
  padding-inline: 10px;
}
body[data-page="track"] .track-score-panel-v34__eq {
  width: 22px;
  flex-basis: 22px;
}
body[data-page="track"] .track-score-panel-v34__genre strong {
  font-size: 9.5px;
  letter-spacing: .012em;
}
@media (max-width: 1360px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 40px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 9px;
  }
}
@media (max-width: 820px) {
  body[data-page="track"] .track-score-panel-v34 {
    grid-template-columns: 1fr;
  }
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 44px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 11px;
  }
}
@media (max-width: 470px) {
  body[data-page="track"] .track-score-panel-v34__number {
    font-size: 38px;
  }
  body[data-page="track"] .track-score-panel-v34__genre strong {
    font-size: 9.5px;
  }
}


body[data-page="label"] .page-content { padding-bottom: 104px; }
body[data-page="label"] .artist-section-head,
body[data-page="label"] .artist-panel-head { scroll-margin-top: 86px; }
body[data-page="label"] .top-labels-grid .label-summary-art img { object-position: center; }
@media (max-width: 820px) {
  body[data-page="label"] .page-content { padding-bottom: 92px; }
}


body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-item {
  grid-template-columns: 36px 64px minmax(0, 1fr) 98px !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  min-height: 98px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-rank {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  font-size: 18px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 10px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-copy {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 6px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-copy strong,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy strong {
  font-size: 15px;
  line-height: 1.18;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-copy small,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy small {
  font-size: 10px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-tags,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-tags {
  margin-top: 4px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* The points + action stack is deliberately identical in both panels. */
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  min-width: 98px;
  justify-items: end;
  text-align: right;
  line-height: 1.05;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points b,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points b {
  font-size: 18px;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points small,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points small {
  margin-top: 3px;
  color: #777;
  font-size: 7px;
  text-transform: uppercase;
}
body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-row-actions,
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-row-actions {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body[data-page="label"] .artist-activity-grid .production-row-actions button,
body[data-page="label"] .artist-activity-grid .live-row-actions button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
}

body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
  grid-template-columns: 48px 68px minmax(0, 1fr) 98px !important;
  grid-template-rows: auto auto !important;
  align-items: center;
  gap: 8px 14px;
  padding: 14px;
  min-height: 108px;
}
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 14px;
  justify-self: center;
  align-self: center;
}
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
  grid-column: 1;
  grid-row: 2;
  width: 48px;
  min-width: 48px;
  min-height: 32px;
  padding-inline: 4px;
  border-radius: 10px;
  justify-self: center;
  align-self: start;
}
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 68px;
  height: 68px;
  border-radius: 10px;
}
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 6px;
}

/* Label contributor cards: 12 visible by default, remaining artists expand. */
body[data-page="label"] .artist-labels-section .top-labels-grid {
  align-items: stretch;
}

@media (max-width: 1180px) {
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 32px 58px minmax(0, 1fr) 90px !important;
    gap: 10px 12px;
    padding: 12px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 58px;
    height: 58px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 46px 60px minmax(0, 1fr) 90px !important;
    gap: 8px 12px;
    padding: 12px;
    min-height: 104px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 46px;
    min-width: 46px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 60px;
    height: 60px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    min-width: 90px;
  }
  body[data-page="label"] .artist-activity-grid .production-row-actions button,
  body[data-page="label"] .artist-activity-grid .live-row-actions button {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

@media (max-width: 700px) {
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 34px 72px minmax(0, 1fr) 88px !important;
    gap: 12px;
    padding: 16px 14px;
    min-height: 112px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 72px;
    height: 72px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-copy strong,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-copy strong {
    font-size: 16px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 46px 72px minmax(0, 1fr) 88px !important;
    gap: 8px 12px;
    padding: 14px;
    min-height: 116px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 46px;
    min-width: 46px;
    min-height: 30px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 72px;
    height: 72px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    min-width: 88px;
  }
  body[data-page="label"] .artist-activity-grid .production-row-actions button,
  body[data-page="label"] .artist-activity-grid .live-row-actions button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 470px) {
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-item {
    grid-template-columns: 28px 64px minmax(0, 1fr) 78px !important;
    gap: 10px;
    padding: 14px 12px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-cover {
    width: 64px;
    height: 64px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-ranking-item {
    grid-template-columns: 42px 64px minmax(0, 1fr) 78px !important;
    gap: 8px 10px;
    padding: 14px 12px;
    min-height: 108px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-rank-box,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box {
    width: 42px;
    min-width: 42px;
  }
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-cover {
    width: 64px;
    height: 64px;
  }
  body[data-page="label"] .artist-activity-grid .productions-section .collection-body--list .production-points,
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-points {
    min-width: 78px;
  }
  body[data-page="label"] .artist-activity-grid .production-row-actions button,
  body[data-page="label"] .artist-activity-grid .live-row-actions button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

/* Artist/label lists do not need an empty genre column. */
body:is([data-page="artists"],[data-page="labels"]) .rank-row {
  grid-template-columns: 58px 72px 54px minmax(260px,1fr) minmax(128px,.36fr) 28px;
}
body:is([data-page="artists"],[data-page="labels"]) .rank-row .rank-genre {
  display: none;
}

/* Track title gets more room so the genre naturally begins further right. */
body[data-page="tracks"] .rank-row--track {
  grid-template-columns: 58px 72px 54px minmax(285px,1.5fr) minmax(190px,.72fr) minmax(126px,.42fr) 94px;
  gap: 10px;
}
body[data-page="tracks"] .rank-row--track .rank-genre {
  padding-left: 0;
}
body[data-page="tracks"] .rank-track-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  position: relative;
  z-index: 4;
}
body[data-page="tracks"] .rank-track-actions button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #414141;
  border-radius: 10px;
  background: #1b1b1b;
  color: #c9c9c9;
  cursor: pointer;
}
body[data-page="tracks"] .rank-track-actions button:hover {
  border-color: var(--lime-border);
  color: var(--lime);
  background: rgba(180,230,29,.05);
}
body[data-page="tracks"] .rank-track-actions .icon {
  width: 15px;
  height: 15px;
}

/* Keep the action controls useful in block/grid mode as well. */
body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-row--track {
  grid-template-columns: 52px minmax(0,1fr) auto;
  grid-template-rows: auto 118px auto auto auto;
}
body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-genre {
  grid-column: 1 / 3;
  grid-row: 4;
  padding-left: 0;
  align-self: start;
}
body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-points {
  grid-column: 3;
  grid-row: 4;
  align-self: start;
}
body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-track-actions {
  grid-column: 1 / -1;
  grid-row: 5;
  justify-content: flex-end;
  padding-top: 5px;
}
body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-track-actions button {
  width: 38px;
  height: 38px;
}

/* One universal player, always a small floating card at bottom-right. */
body .artist-preview-player[hidden] {
  display: none !important;
}
body .artist-preview-player {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  z-index: 90;
  width: min(430px, calc(100vw - 36px));
  min-height: 72px;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #404040;
  border-radius: 16px;
  background: rgba(16,16,16,.97);
  box-shadow: 1px 1px 9px rgba(0,0,0,.25), 0 8px 26px rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
}
/* The player floats over the page; do not reserve a full-width player gutter. */
body:is([data-page="artist"],[data-page="label"],[data-page="track"]) .page-content {
  padding-bottom: 28px !important;
}

@media (max-width: 1180px) {
  body:is([data-page="artists"],[data-page="labels"]) .rank-row {
    grid-template-columns: 48px 52px 50px minmax(190px,1fr) minmax(110px,.4fr) 22px;
  }
  body[data-page="tracks"] .rank-row--track {
    grid-template-columns: 48px 52px 50px minmax(210px,1.35fr) minmax(155px,.65fr) minmax(105px,.42fr) 84px;
    gap: 8px;
  }
  body[data-page="tracks"] .rank-row--track .rank-genre {
    padding-left: 0;
  }
  body[data-page="tracks"] .rank-track-actions button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 820px) {
  body:is([data-page="artists"],[data-page="labels"]) .rank-row {
    grid-template-columns: 36px 28px 52px minmax(0,1fr) 88px 18px;
  }
  body[data-page="tracks"] .rank-row--track {
    min-height: 94px;
    grid-template-columns: 34px 26px 52px minmax(0,1fr) 82px;
    grid-template-rows: 1fr 34px;
    gap: 7px;
    padding: 8px 9px;
  }
  body[data-page="tracks"] .rank-row--track .rank-number { grid-column: 1; grid-row: 1 / span 2; }
  body[data-page="tracks"] .rank-row--track .rank-movement { grid-column: 2; grid-row: 1 / span 2; }
  body[data-page="tracks"] .rank-row--track .rank-image { grid-column: 3; grid-row: 1 / span 2; }
  body[data-page="tracks"] .rank-row--track .rank-name { grid-column: 4; grid-row: 1; align-self: center; padding-top: 0; }
  body[data-page="tracks"] .rank-row--track .rank-genre { grid-column: 4; grid-row: 2; align-self: center; padding: 0; }
  body[data-page="tracks"] .rank-row--track .rank-points { grid-column: 5; grid-row: 1; align-self: center; }
  body[data-page="tracks"] .rank-row--track .rank-track-actions { grid-column: 5; grid-row: 2; align-self: center; gap: 5px; }
  body[data-page="tracks"] .rank-track-actions button { width: 31px; height: 31px; border-radius: 9px; }

  body .artist-preview-player {
    right: 8px !important;
    bottom: 8px !important;
    width: min(410px, calc(100vw - 16px));
    min-height: 68px;
    padding: 8px;
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  body[data-page="tracks"] .rank-row--track {
    grid-template-columns: 30px 22px 48px minmax(0,1fr) 76px;
    min-height: 92px;
  }
  body[data-page="tracks"] .rank-row--track .rank-image { width: 48px; height: 48px; }
  body[data-page="tracks"] .rank-row--track .rank-name strong { font-size: 12px; }
  body[data-page="tracks"] .rank-row--track .rank-name small { font-size: 8px; }
  body[data-page="tracks"] .rank-row--track .rank-points strong { font-size: 14px; }
  body[data-page="tracks"] .rank-track-actions button { width: 29px; height: 29px; }
  body .artist-preview-player { width: calc(100vw - 16px); }
}


@media (min-width: 1121px) {
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track {
    position: relative;
    display: grid;
    grid-template-columns: 44px 56px 62px minmax(0,1fr) 220px 116px 82px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 7px 12px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-number,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-movement,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-image,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-name,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-points,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-track-actions {
    position: static;
    inset: auto;
    transform: none;
    min-width: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-name {
    width: auto;
    overflow: hidden;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre {
    width: auto;
    padding: 0 0 0 18px;
    justify-self: stretch;
    overflow: hidden;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre .genre-pill {
    max-width: 100%;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-points {
    width: auto;
    padding: 0;
    justify-self: end;
    text-align: right;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-track-actions {
    width: 82px;
    justify-self: end;
    justify-content: flex-end;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track {
    position: relative;
    display: grid;
    grid-template-columns: 36px 44px 50px minmax(0,1fr) 170px 100px 76px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 7px;
    min-height: 72px;
    padding: 7px 10px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-number,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-movement,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-image,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-name,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-points,
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-track-actions {
    position: static;
    inset: auto;
    transform: none;
    min-width: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-name {
    width: auto;
    overflow: hidden;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre {
    width: auto;
    padding: 0 0 0 8px;
    justify-self: stretch;
    overflow: hidden;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre .genre-pill {
    max-width: 100%;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-points {
    width: auto;
    padding: 0;
    justify-self: end;
    text-align: right;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-track-actions {
    width: 76px;
    justify-self: end;
    justify-content: flex-end;
  }
}


/* Keep the track table usable before mobile: stack Trending underneath once the
   shared two-column layout would starve the list of horizontal space. */
@media (max-width: 1380px) {
  body[data-page="tracks"] .chart-layout {
    grid-template-columns: 1fr;
  }
  body[data-page="tracks"] .trending-panel {
    position: static;
  }
}


@media (min-width: 1121px) {
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre {
    padding-left: 42px;
  }
}

body[data-page="trending"] .period-area,
body[data-page="trending"] .mobile-period-select {
  display: none !important;
}
body[data-page="trending"] .page-content {
  width: min(100%, 1660px);
}

/* Trending grid mode */
@media (max-width: 700px) {
  body[data-page="trending"] .topbar .top-genre { max-width: calc(100vw - 126px); }
}
body[data-page="trending"] .trend-list {
  min-width: 0;
  width: 100%;
}

/* Artist module now uses the same image-led ranked-row language as the site. */
body[data-page="trending"] .trend-hub-widget {
  min-width: 0;
  overflow: hidden;
  box-shadow: 1px 1px 9px rgba(0,0,0,.25);
}
body[data-page="trending"] .trend-hub-widget-head {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(13,13,13,.5);
}
body[data-page="trending"] .trend-hub-widget-head > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
body[data-page="trending"] .trend-hub-widget-head small {
  color: var(--muted-2);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body[data-page="trending"] .trend-hub-widget-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.12;
  font-weight: 850;
}
body[data-page="trending"] .trend-hub-widget-head > b {
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #cad0d4;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-widget-head .panel-icon {
  width: 36px;
  height: 36px;
}
body[data-page="trending"] .trend-hub-rank {
  color: #f3f3f3;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
body[data-page="trending"] .trend-hub-points {
  display: grid;
  min-width: 60px;
  justify-items: end;
  gap: 1px;
  text-align: right;
}
body[data-page="trending"] .trend-hub-points b {
  color: #f4f5f6;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
body[data-page="trending"] .trend-hub-points small {
  color: var(--muted-2);
  font-size: 6px;
  text-transform: uppercase;
}

body[data-page="trending"] .trend-hub-widgets {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 14px;
  margin-top: 14px;
}
body[data-page="trending"] .trend-hub-widget-head { min-height: 72px; }
body[data-page="trending"] .trend-hub-genre-list { display: grid; padding: 0 12px 12px; }
body[data-page="trending"] .trend-hub-genre {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px 12px;
  padding: 11px 2px 9px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: #dce1e3;
  text-align: left;
  cursor: pointer;
}
body[data-page="trending"] .trend-hub-genre > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-page="trending"] .trend-hub-genre > span > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: var(--trend-hub-color);
}
body[data-page="trending"] .trend-hub-genre strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-genre > em {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-genre > em b { font-size: 9px; }
body[data-page="trending"] .trend-hub-genre > em small { color: var(--lime); font-size: 7px; font-weight: 800; }
body[data-page="trending"] .trend-hub-genre > u {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #2b2b2b;
  text-decoration: none;
}
body[data-page="trending"] .trend-hub-genre > u > i {
  display: block;
  width: var(--trend-hub-width);
  height: 100%;
  border-radius: inherit;
  background: var(--trend-hub-color);
}
body[data-page="trending"] .trend-hub-riser-list { display: grid; }
body[data-page="trending"] .trend-hub-riser {
  display: grid;
  min-height: 62px;
  grid-template-columns: 24px 44px minmax(0,1fr) minmax(88px,auto) 40px 64px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}
body[data-page="trending"] .trend-hub-riser:hover { background: rgba(255,255,255,.025); }
body[data-page="trending"] .trend-hub-riser > img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
body[data-page="trending"] .trend-hub-riser > span:nth-child(3) { display: grid; min-width: 0; gap: 2px; }
body[data-page="trending"] .trend-hub-riser > span:nth-child(3) strong,
body[data-page="trending"] .trend-hub-riser > span:nth-child(3) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-riser > span:nth-child(3) strong { font-size: 10px; }
body[data-page="trending"] .trend-hub-riser > span:nth-child(3) small { color: var(--muted); font-size: 7px; }
@media (max-width: 1100px) {
  body[data-page="trending"] .trend-hub-widgets { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body[data-page="trending"] .trend-hub-widget-head { grid-template-columns: 36px minmax(0,1fr) auto; padding: 10px; }
  body[data-page="trending"] .trend-hub-riser {
    grid-template-columns: 22px 42px minmax(0,1fr) 58px;
    grid-template-rows: auto auto;
    gap: 6px;
    padding: 8px 9px;
  }
  body[data-page="trending"] .trend-hub-riser > img { width: 42px; height: 42px; grid-row: 1 / 3; }
  body[data-page="trending"] .trend-hub-riser > span:nth-child(3) { grid-column: 3; grid-row: 1; }
  body[data-page="trending"] .trend-hub-riser > em { grid-column: 4; grid-row: 2; }
  body[data-page="trending"] .trend-hub-riser .trend-hub-points { grid-column: 4; grid-row: 1; }
}
@media (max-width: 430px) {
  body[data-page="trending"] .trend-hub-points { min-width: 52px; }
  body[data-page="trending"] .trend-hub-points b { font-size: 11px; }
  body[data-page="trending"] .trend-hub-genre strong { font-size: 8px; }
}


body[data-page="trending"] .page-content {
  display: grid;
  gap: 16px;
}
body[data-page="trending"] .trending-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
body[data-page="trending"] .trending-page-head h2 {
  margin: 8px 0 8px;
  font-size: clamp(32px, 3.1vw, 50px);
  line-height: .98;
  letter-spacing: -.045em;
}
body[data-page="trending"] .trending-page-head p {
  margin: 0;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 650;
}
body[data-page="trending"] .trending-snapshot-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
body[data-page="trending"] .trending-snapshot-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 12px;
  padding: 16px;
}
body[data-page="trending"] .trending-snapshot-card .panel-icon {
  width: 40px;
  height: 40px;
}
body[data-page="trending"] .trending-snapshot-card div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body[data-page="trending"] .trending-snapshot-card small {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-page="trending"] .trending-snapshot-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="trending"] .trending-snapshot-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="trending"] .trend-overview-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: start;
}
body[data-page="trending"] .trend-widget-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 16px;
}
body[data-page="trending"] .trend-hub-widget {
  min-height: 100%;
}
@media (max-width: 1380px) {
  body[data-page="trending"] .trending-snapshot-row,
  body[data-page="trending"] .trend-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  body[data-page="trending"] .trending-page-head { align-items: start; flex-direction: column; }
  body[data-page="trending"] .trending-snapshot-row,
  body[data-page="trending"] .trend-overview-grid,
  body[data-page="trending"] .trend-widget-grid { grid-template-columns: 1fr; }
  body[data-page="trending"] .trending-snapshot-card strong,
  body[data-page="trending"] .trending-snapshot-card em { white-space: normal; }
}
@media (max-width: 640px) {
  body[data-page="trending"] .trending-page-head h2 { font-size: 29px; }
  body[data-page="trending"] .trending-snapshot-card { padding: 14px; }
}


body[data-page="trending"] .trend-overview-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
body[data-page="trending"] .trend-top-card {
  min-width: 0;
}
body[data-page="trending"] .trend-top-card .panel-head {
  min-height: 62px;
}
body[data-page="trending"] .trend-top-card .panel-head > div > span:last-child {
  min-width: 0;
}
body[data-page="trending"] .trend-top-card .panel-head h2 {
  margin-top: 1px;
}
body[data-page="trending"] .trend-top-note {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="trending"] .trend-top-card .leader-list {
  display: grid;
}
body[data-page="trending"] .trend-top-card .leader-row {
  min-height: 54px;
}
body[data-page="trending"] .trend-top-card .leader-row:nth-child(n+6) {
  display: none;
}
body[data-page="trending"] .trend-top-card .leader-copy > span {
  color: var(--muted);
  font-size: 7px;
}
body[data-page="trending"] .trend-top-card .panel-footer-link {
  min-height: 34px;
}
@media (max-width: 1380px) {
  body[data-page="trending"] .trend-overview-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  body[data-page="trending"] .trend-top-card--label {
    grid-column: auto;
  }
}
@media (max-width: 1100px) {
  body[data-page="trending"] .trend-overview-grid {
    grid-template-columns: 1fr;
  }
}


body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
  font-size: 18px !important;
  letter-spacing: -0.055em;
  padding-inline: 2px;
}
body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
  font-size: 14px !important;
  letter-spacing: -0.065em;
  padding-inline: 1px;
}
body[data-page="label"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
  font-size: 11px !important;
  gap: 2px;
}
@media (max-width: 700px) {
  body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 16px !important;
  }
  body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 13px !important;
  }
}
@media (max-width: 470px) {
  body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--wide {
    font-size: 14px !important;
  }
  body[data-page="label"] .artist-activity-grid .live-ranking-list .live-rank-box.live-rank-box--xwide {
    font-size: 12px !important;
  }
  body[data-page="label"] .artist-activity-grid .live-ranking-list .live-move-box.live-move-box--wide .movement {
    font-size: 10px !important;
  }
}

/* -------------------------------------------------------------------------
   Real-site presentation adapters
   ------------------------------------------------------------------------- */

.period-switcher a {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.period-switcher a:hover { color: var(--text); }
.period-switcher a.is-active { background: var(--surface-3); color: var(--lime); box-shadow: 0 1px 8px rgba(0,0,0,.24); }
.year-selector a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.year-selector a:hover,
.year-selector a.is-active { background: var(--surface-3); color: var(--lime); }

.movement--nc { color: #f1ad4c; font-size: 8px; }
.movement-box { display: inline-grid; place-items: center; }

.filter-control select {
  width: 100%;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e7ebed;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.filter-control select option { color: #f4f4f4; background: #171717; }

.genre-dialog .genre-option,
.genre-dialog .hype-option { text-decoration: none; }
.genre-option-name { display: inline-flex; min-width: 0; align-items: center; gap: 9px; }
.genre-option-name i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--genre-color); box-shadow: 0 0 10px color-mix(in srgb, var(--genre-color) 45%, transparent); }

.rank-row { position: relative; cursor: pointer; }
.rank-row-link { position: absolute; inset: 0; z-index: 1; }
.rank-row > :not(.rank-row-link) { position: relative; z-index: 2; pointer-events: none; }
.rank-row .rank-track-actions,
.rank-row .rank-track-actions * { pointer-events: auto; }
.rank-track-actions a,
.rank-track-actions button,
.production-row-actions a,
.production-row-actions button,
.production-hover-actions a,
.production-hover-actions button,
.live-row-actions a,
.live-row-actions button,
.live-hover-actions a,
.live-hover-actions button,
.release-actions a,
.release-actions button {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  background: #171717;
  color: #d4d8da;
  cursor: pointer;
}
.rank-track-actions a:hover,
.rank-track-actions button:hover,
.production-row-actions a:hover,
.production-row-actions button:hover,
.production-hover-actions a:hover,
.production-hover-actions button:hover,
.live-row-actions a:hover,
.live-row-actions button:hover,
.live-hover-actions a:hover,
.live-hover-actions button:hover,
.release-actions a:hover,
.release-actions button:hover { border-color: var(--lime-border); color: var(--lime); }

.search-page-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.search-page-panel { overflow: hidden; }
.search-page-list { display: grid; }
.search-result-card { display: grid; min-height: 72px; grid-template-columns: 50px minmax(0,1fr) auto 18px; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.search-result-card:hover { background: rgba(255,255,255,.025); }
.search-result-card img { width: 50px; height: 50px; border-radius: 9px; object-fit: cover; }
.search-result-card > span { display: grid; min-width: 0; gap: 3px; }
.search-result-card strong,
.search-result-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-card strong { font-size: 11px; }
.search-result-card small { color: var(--muted); font-size: 8px; }
.search-result-card em { padding: 5px 8px; border-radius: 999px; background: #11171b; color: var(--muted); font-size: 7px; font-style: normal; text-transform: uppercase; }
.search-result-card > .icon { width: 14px; color: var(--muted-2); }

.empty-state--compact { min-height: 120px; }

/* Compact floating player fed by the existing audioplayer endpoint. */
.preview-player[hidden] { display: none !important; }
.preview-player {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 95;
  display: grid;
  width: min(470px, calc(100vw - 36px));
  min-height: 84px;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #404040;
  border-radius: 16px;
  background: rgba(15,15,15,.97);
  box-shadow: 1px 1px 9px rgba(0,0,0,.25), 0 14px 40px rgba(0,0,0,.44);
  backdrop-filter: blur(18px);
}
.preview-player-content { min-width: 0; }
.preview-player .preview-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: #202020; cursor: pointer; }
.preview-player .preview-close .icon { width: 15px; }
.preview-player-loading,
.preview-player-error { padding: 18px; color: var(--muted); font-size: 11px; }
.preview-player #headercontainer { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; }
.preview-player #footer-audioplayer { position: static !important; display: grid !important; width: 100% !important; min-height: 62px !important; height: auto !important; grid-template-columns: 52px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; gap: 1px 10px; padding: 0 !important; background: transparent !important; }
.preview-player #footer-audioplayer-image { position: static !important; grid-column: 1; grid-row: 1 / 4; }
.preview-player #footer-audioplayer-image img { width: 52px !important; height: 52px !important; border-radius: 10px; object-fit: cover; }
.preview-player #top10trackchart-artistname-audioplayer,
.preview-player #top10trackchart-title-audioplayer { position: static !important; width: auto !important; height: auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-player #top10trackchart-artistname-audioplayer { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 8px; }
.preview-player #top10trackchart-title-audioplayer { grid-column: 2; grid-row: 2; color: var(--text); font-size: 11px; }
.preview-player #footer-audioplayer-actual { position: static !important; grid-column: 2; grid-row: 3; width: 100% !important; }
.preview-player audio { width: 100%; height: 28px; }
.preview-player #footer-audioplayer-actual { margin-top: 6px; }
/* The waveform row runs the full width of the card, under the artwork and titles. */
.preview-player #footer-audioplayer { grid-template-rows: auto auto auto; }
.preview-player #footer-audioplayer-image { grid-row: 1 / 3 !important; }
.preview-player #footer-audioplayer-actual { grid-column: 1 / -1 !important; }
@media (min-width: 900px) {
  body .artist-preview-player { width: min(540px, calc(100vw - 36px)); }
}
/* Waveform player (preview-waveform.js) replaces the browser's audio controls. */
.wave-player { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 8px; min-width: 0; }
.wave-play { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--lime); color: #111; cursor: pointer; }
.wave-play svg { width: 16px; height: 16px; }
.wave-play:hover { filter: brightness(1.08); }
.wave-track { min-width: 0; height: 36px; border-radius: 6px; cursor: pointer; touch-action: none; }
.wave-track canvas { display: block; width: 100%; height: 36px; }
.wave-track:focus-visible, .wave-play:focus-visible, .wave-mute:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.wave-time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wave-volume { display: flex; align-items: center; gap: 4px; }
.wave-mute { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.wave-mute:hover { color: var(--text); }
.wave-mute svg { width: 16px; height: 16px; }
.wave-volume-range { width: 56px; accent-color: var(--lime); cursor: pointer; }
@media (max-width: 700px) {
  .wave-volume-range { display: none; }
}

/* Server-side detail pages use the same cards but may have empty datasets. */
.artist-activity-grid > .panel { min-width: 0; }
.production-item,
.live-ranking-item { overflow: hidden; }
.production-copy,
.live-ranking-copy { min-width: 0; }
.production-row-actions a,
.production-row-actions button,
.live-row-actions a,
.live-row-actions button { width: 40px; height: 40px; border-radius: 11px; }
.production-hover-actions a,
.production-hover-actions button,
.live-hover-actions a,
.live-hover-actions button { width: 38px; height: 38px; border-radius: 10px; }
.release-action { width: 42px; height: 42px; border-radius: 11px; }
.release-days { color: var(--muted-2); font-size: 8px; }

/* Trending real-data blocks. */
.trending-page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.trending-page-head h2 { margin: 8px 0 8px; font-size: clamp(32px,3.1vw,50px); line-height: .98; letter-spacing: -.045em; }
.trending-page-head p { margin: 0; color: var(--muted-2); font-size: 13px; }
.trending-snapshot-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.trending-snapshot-card { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; padding: 16px; }
.trending-snapshot-card > div { display: grid; min-width: 0; gap: 3px; }
.trending-snapshot-card small { color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.trending-snapshot-card strong,
.trending-snapshot-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trending-snapshot-card strong { font-size: 14px; }
.trending-snapshot-card em { color: var(--muted); font-size: 9px; font-style: normal; }
.trend-overview-grid { margin-top: 16px; }
.trend-widget-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 16px; margin-top: 16px; }
.trend-hub-genre { text-decoration: none; }

/* Make date/key controls work as native selects without changing the design. */
.filter-control > span { min-width: 0; }
.filter-control > span small { pointer-events: none; }

@media (max-width: 1180px) {
  .search-page-grid { grid-template-columns: 1fr 1fr; }
  .search-page-panel:last-child { grid-column: 1 / -1; }
  .trending-snapshot-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .trend-widget-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .search-page-grid { grid-template-columns: 1fr; }
  .search-page-panel:last-child { grid-column: auto; }
  .trending-snapshot-row { grid-template-columns: 1fr; }
  .preview-player { right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .release-meta { display: grid; gap: 3px; }
}


/* Final staging safeguards ------------------------------------------------ */
/* Trending has one fixed 14-day source period in v1. Style its non-link
   indicator exactly like an active period option on desktop and mobile. */
.period-area--static .period-switcher > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 8px rgba(0,0,0,.24);
}
.mobile-period-static {
  display: none;
  min-width: 62px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lime-border);
  border-radius: 14px;
  background: var(--lime-soft);
  color: var(--lime);
  font-size: 13px;
  font-weight: 900;
}

/* More than half of Beatstats traffic is mobile. Detail rankings therefore
   become one complete ranking per row rather than a compressed two-up grid. */
@media (max-width: 700px) {
  body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid {
    grid-template-columns: 1fr !important;
  }
  body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid .detail-stat {
    width: 100%;
  }
  body[data-page="trending"] .period-area--static { display: none; }
  body[data-page="trending"] .mobile-period-static { display: inline-flex; }
}

/* Override the earlier mockup rule that hid all Trending period areas. */
body[data-page="trending"] .period-area.period-area--static {
  display: flex !important;
}
@media (max-width: 700px) {
  body[data-page="trending"] .period-area.period-area--static {
    display: none !important;
  }
}

/* On mobile the compact player takes over the bottom edge; hide the section
   navigation while it is open rather than stacking two fixed controls. */
@media (max-width: 900px) {
  body.player-open .mobile-nav {
    display: none !important;
  }
}

.profile-period-notice {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 9px 12px;
  border: 1px solid rgba(241,173,76,.25);
  border-radius: 12px;
  background: rgba(241,173,76,.07);
  color: #d7c29e;
  font-size: 10px;
}
.profile-period-notice .icon {
  width: 16px;
  height: 16px;
  color: #f1ad4c;
}

/* Frontend review: component state, action parity and narrow-list geometry. */
[hidden] { display: none !important; }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.filter-empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
[data-fit-rank] {
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.rank-track-actions > :is(a, button) {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  padding: 0;
  border-radius: 10px;
}
:is(.production-row-actions, .live-row-actions) > :is(a, button) {
  flex: 0 0 40px;
  padding: 0;
}
:is(.production-hover-actions, .live-hover-actions) > :is(a, button) {
  flex: 0 0 38px;
  padding: 0;
}
:is(.rank-track-actions, .production-row-actions, .live-row-actions, .release-actions) .icon {
  width: 16px;
  height: 16px;
}
button[data-player-id].is-playing {
  color: var(--lime);
  border-color: var(--lime-border);
  background: var(--lime-soft);
}
.rank-row:focus-within { background: var(--surface-3); }
.preview-player .preview-unavailable { color: var(--muted); font-size: 11px; }

/* Keep the columns in flow. Rank and movement share a compact left stack;
   points and actions share the right stack, leaving the title real space. */
@media (max-width: 820px) {
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track {
    grid-template-columns: 30px 48px minmax(0,1fr) 94px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    min-height: 108px;
    padding: 10px 9px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track > :not(.rank-row-link) {
    position: static;
    inset: auto;
    transform: none;
    min-width: 0;
    margin: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-number {
    grid-column: 1; grid-row: 1; align-self: end; padding: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-movement {
    grid-column: 1; grid-row: 2; align-self: start; width: 30px; padding: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-movement .movement {
    min-width: 0; gap: 1px; font-size: 10px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-movement .icon {
    width: 11px; height: 11px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-image {
    grid-column: 2; grid-row: 1 / 3; width: 48px; height: 48px;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-name {
    grid-column: 3; grid-row: 1; align-self: end; padding: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre {
    grid-column: 3; grid-row: 2; align-self: start; padding: 0; max-width: 100%;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-points {
    grid-column: 4; grid-row: 1; justify-self: end; align-self: end; padding: 0;
  }
  body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-track-actions {
    grid-column: 4; grid-row: 2; align-self: start; justify-self: end; width: 94px; gap: 6px;
  }
  body[data-page="tracks"] .rank-track-actions > :is(a, button) {
    width: 44px; height: 44px; min-width: 44px; flex-basis: 44px;
  }
  .preview-player { bottom: max(8px, env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Native buy links and play buttons share the same actual control styles. */
body[data-page="tracks"] .rank-track-actions > :is(a, button) {
  border: 1px solid #414141;
  border-radius: 10px;
  background: #1b1b1b;
  color: #c9c9c9;
}
body[data-page="tracks"] .rank-track-actions > :is(a, button):hover,
body[data-page="tracks"] .rank-track-actions > button.is-playing {
  border-color: var(--lime-border);
  color: var(--lime);
  background: var(--lime-soft);
}
@media (max-width: 820px) {
  body:is([data-page="artists"], [data-page="labels"]) .chart-table-panel:not(.is-grid-view) .rank-movement,
  body:is([data-page="artists"], [data-page="labels"]) .chart-table-panel:not(.is-grid-view) .rank-movement .movement {
    min-width: 0;
    width: 100%;
    gap: 1px;
  }
  body:is([data-page="artists"], [data-page="labels"]) .chart-table-panel:not(.is-grid-view) .rank-movement .icon {
    width: 11px; height: 11px;
  }
}

/* Gallery mode uses its own grid; list-mode mobile placement must not leak in. */
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto auto auto auto;
  gap: 9px;
  padding: 12px;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > :not(.rank-row-link) {
  position: static;
  inset: auto;
  transform: none;
  min-width: 0;
  margin: 0;
  align-self: center;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-number {
  grid-column: 1; grid-row: 1; width: auto; justify-self: start;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-movement {
  grid-column: 2; grid-row: 1; justify-self: end; width: auto;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-image {
  grid-column: 1 / -1; grid-row: 2; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-name {
  grid-column: 1 / -1; grid-row: 3; width: 100%; padding: 0;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-name strong {
  white-space: normal; overflow-wrap: anywhere; font-size: 14px;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-genre {
  grid-column: 1; grid-row: 4; padding: 0;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-points {
  grid-column: 2; grid-row: 4; padding: 0; justify-self: end;
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > :is(.rank-track-actions,.rank-action) {
  grid-column: 1 / -1; grid-row: 5; justify-self: end; width: auto; padding: 0;
}

@media (max-width: 820px) {
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid {
    grid-template-columns: minmax(0,1fr);
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid > :is(.production-item,.live-ranking-item) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto auto;
    gap: 10px;
    padding: 12px;
    min-height: 0;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-cover,.live-cover) {
    position: relative;
    grid-column: 1 / -1; grid-row: 1;
    width: 100%; height: auto; aspect-ratio: 1;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-cover,.live-cover) img {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-copy,.live-ranking-copy) {
    position: static; grid-column: 1 / -1; grid-row: 2; padding: 0; min-width: 0;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-points,.live-points) {
    position: static; grid-column: 1; grid-row: 3; align-self: center; justify-items: start; padding: 0;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-row-actions,.live-row-actions) {
    position: static; display: flex; grid-column: 2; grid-row: 3; align-self: center; width: auto; gap: 6px;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-hover-actions,.live-hover-actions) { display: none; }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid :is(.production-rank,.live-rank-box) {
    position: absolute; top: 20px; left: 20px; z-index: 3;
    display: grid; place-items: center; width: 44px; height: 38px; min-height: 0; padding: 3px;
    border: 1px solid var(--lime-border); border-radius: 8px; background: rgba(12,12,12,.94); color: var(--lime); font-size: 18px;
  }
  body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid .live-move-box {
    position: absolute; top: 20px; right: 20px; left: auto; z-index: 3;
    display: grid; width: 44px; height: 38px; min-height: 0;
  }
}
@media (max-width: 820px) {
  body:is([data-page="artists"], [data-page="labels"]) .chart-table-panel:not(.is-grid-view) .rank-row > :not(.rank-row-link) {
    position: static;
    inset: auto;
    transform: none;
  }
}
body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-row > .rank-number {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 34px;
  padding: 0 7px;
  font-size: 18px;
}
@media (max-width: 820px) {
  body[data-page="tracks"] .chart-table-panel.is-grid-view .rank-track-actions > :is(a, button) {
    width: 44px; height: 44px; min-width: 44px; flex-basis: 44px;
  }
}
body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid :is(.productions-section,.live-rankings-panel) .collection-body :is(.production-row-actions,.live-row-actions) > :is(a,button) {
  border: 1px solid #414141;
  background: #1b1b1b;
  color: #c9c9c9;
}
body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid :is(.productions-section,.live-rankings-panel) .collection-body :is(.production-row-actions,.live-row-actions) > :is(a,button):hover,
body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid :is(.productions-section,.live-rankings-panel) .collection-body :is(.production-row-actions,.live-row-actions) > button.is-playing {
  border-color: var(--lime-border);
  background: var(--lime-soft);
  color: var(--lime);
}
/* Track placements are a vertical list even at intermediate desktop widths.
   These rows share one compact, fixed-size rank/artwork/action geometry. */
body[data-page="track"] .track-ranking-list {
  grid-template-columns: minmax(0,1fr);
}
body[data-page="track"] .track-ranking-list article {
  grid-template-columns: 52px 52px minmax(0,1fr) 44px;
  min-width: 0;
  min-height: 88px;
  gap: 10px;
  padding: 12px;
}
body[data-page="track"] .track-ranking-list article > img {
  width: 52px;
  height: 52px;
}
body[data-page="track"] .track-ranking-list .track-rank-box {
  width: 52px;
  height: 52px;
  font-size: 24px;
  border-radius: 13px;
}
body[data-page="track"] .track-ranking-list .track-move-box {
  width: 44px;
  min-height: 44px;
  border-radius: 11px;
}
@media (max-width: 470px) {
  body[data-page="track"] .track-ranking-list article {
    grid-template-columns: 42px 44px minmax(0,1fr) 36px;
    gap: 8px;
    padding: 10px;
  }
  body[data-page="track"] .track-ranking-list article > img { width: 44px; height: 44px; }
  body[data-page="track"] .track-ranking-list .track-rank-box { width: 42px; height: 42px; font-size: 20px; }
  body[data-page="track"] .track-ranking-list .track-move-box { width: 36px; min-height: 36px; }
}

/* =========================================================
   STATIC PAGES — ABOUT / CONTACT / 404
   ========================================================= */

.topbar--static { justify-content: flex-start; }
.top-static-title { display: grid; gap: 1px; }
.top-static-title strong { color: var(--text); font-size: 14px; letter-spacing: -.01em; }
.static-page { width: min(100%, 980px); margin: 0 auto; overflow: hidden; }
.static-page-body { padding: clamp(22px, 3vw, 42px); }
.static-page-body > h1,
.static-page-body .about-section h1 { margin: 0 0 14px; font-size: clamp(27px, 3vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
.static-page-body h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.02em; }
.static-page-body p { margin: 0 0 14px; color: #c6c6c6; line-height: 1.65; }
.static-page-body ul { margin: 0 0 18px 22px; padding: 0; color: #c6c6c6; }
.static-page-body li { margin-bottom: 7px; }
.static-page-body a:not(.primary-button):not(.about-button):not(.support-button) { color: var(--lime); }
.static-page-body a:not(.primary-button):not(.about-button):not(.support-button):hover { text-decoration: underline; }
.static-page-error { min-height: 360px; display: grid; place-content: center start; }
.static-page-error .primary-button { width: max-content; margin-top: 10px; }

.about-section { margin-bottom: 38px; }
.about-section + .about-section { padding-top: 28px; border-top: 1px solid var(--line-soft); }
.about-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.about-button,
.support-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--lime-border); border-radius: 10px; background: var(--lime-soft); color: #dcff8c !important; font-weight: 800; text-decoration: none; }
.about-button:hover,
.support-button:hover { background: rgba(180,230,29,.19); text-decoration: none !important; }
.about-button-secondary { border-color: var(--line); background: var(--surface-3); color: var(--text) !important; }
.about-button-secondary:hover { border-color: #4b4b4b; background: var(--surface-4); }
.about-support { margin-bottom: 0; padding-bottom: 0; }
.kofi-button { display: block; width: auto; height: 36px; margin-top: 18px; border: 0; }

.support-notice { margin: 22px 0 30px; padding: 18px; border: 1px solid var(--lime-border); border-left: 4px solid var(--lime); border-radius: 12px; background: rgba(180,230,29,.055); }
.support-notice > strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 15px; }
.support-notice p { margin-bottom: 14px; }
.support-faq { margin-top: 26px; }
.support-group { margin-bottom: 30px; }
.support-group h2 { color: var(--text); }
.support-faq details { margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.support-faq details[open] { border-color: #474747; background: rgba(255,255,255,.025); }
.support-faq summary { position: relative; padding: 14px 46px 14px 16px; color: #e8e8e8; font-size: 14px; font-weight: 750; line-height: 1.4; cursor: pointer; list-style: none; }
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary::after { position: absolute; top: 50%; right: 16px; color: var(--lime); font-size: 21px; line-height: 1; content: "+"; transform: translateY(-50%); }
.support-faq details[open] summary::after { content: "−"; }
.support-highlight { color: var(--lime); }
.support-answer { padding: 2px 16px 17px; border-top: 1px solid var(--line-soft); }
.support-answer p:first-child { margin-top: 14px; }
.support-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.support-contact { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-soft); }

@media (max-width: 700px) {
  .static-page-body { padding: 20px 18px 28px; }
  .about-links, .support-actions { align-items: stretch; flex-direction: column; }
  .about-button, .support-button { width: 100%; }
  .support-actions > a:not(.support-button) { padding: 8px 2px; }
}

/* ============================================================================
   CATALOGUE SEARCH - shared AJAX dialog / results-page cards (Fix 8)
   ============================================================================ */
.search-dialog {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100% - 40px));
  height: auto;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: 24px auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 1px 1px 9px rgba(0,0,0,.25);
}
.catalog-search__dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: #141414;
}
.catalog-search__dialog-head h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.catalog-search-page-head { margin-bottom: 20px; }
.catalog-search-page-head h1 { margin: 6px 0 8px; font-size: clamp(26px,3vw,38px); line-height: 1.15; }
.catalog-search-page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.catalog-search { display: flex; flex-direction: column; min-width: 0; gap: 12px; }
.catalog-search--overlay { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow: hidden; }
.catalog-search__form { display: flex; align-items: stretch; flex: 0 0 auto; gap: 10px; margin: 0; }
.catalog-search__input {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111719;
}
.catalog-search__input:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime-soft); }
.catalog-search__input > .icon { width: 21px; height: 21px; color: var(--lime); }
.catalog-search__input input {
  width: 100%; min-width: 0; border: 0; outline: 0; padding: 12px 0;
  font: inherit; font-size: 16px; color: var(--text); background: transparent;
}
.catalog-search__input input::placeholder { color: #92999c; }
.catalog-search__submit {
  flex: 0 0 auto; padding: 0 20px; min-height: 48px; border: 1px solid var(--lime-border);
  border-radius: 12px; background: var(--lime-soft); color: var(--lime); font-size: 14px; font-weight: 750; cursor: pointer;
}
.catalog-search__submit:hover { background: #303b1c; }
.catalog-search__toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; }
.catalog-search__types { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-search__type {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 13px;
  font-size: 12px; font-weight: 750; border: 1px solid transparent; border-radius: 9px; color: #c1c5c8;
}
.catalog-search__type--artist { --search-type: #b4e61d; }
.catalog-search__type--track { --search-type: #4ddbd8; }
.catalog-search__type--label { --search-type: #ff86b1; }
.catalog-search__type--all { --search-type: #f4f4f4; }
.catalog-search__type[aria-current], .catalog-search__type:hover { border-color: var(--line); background: #282828; color: var(--search-type); }
.catalog-search__view { display: flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #202020; }
.catalog-search__view button { display: grid; width: 38px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #a8adb0; cursor: pointer; }
.catalog-search__view button[aria-pressed="true"] { background: #303030; color: var(--lime); }
.catalog-search__view .icon { width: 18px; height: 18px; }
.catalog-search :is(a,button):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.catalog-search__help { margin: 0; color: #a0a0a0; font-size: 11px; flex: 0 0 auto; }
.catalog-search__status { margin: 0; font-size: 13px; color: var(--muted); }
.catalog-search__status:empty { display: none; }
.catalog-search__status--announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catalog-search__result-area { min-width: 0; min-height: 0; }
.catalog-search--overlay .catalog-search__result-area { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 2px; }
.catalog-search__result-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b9b9b9; font-size: 12px; padding: 2px 0 12px; }
.catalog-search__result-meta > span:last-child { font-size: 11px; color: #929292; }
.catalog-search__result-meta small { font-size: inherit; }
.catalog-search__results-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.catalog-result {
  --search-type: #4ddbd8;
  display: grid;
  min-width: 0;
  grid-template-columns: 80px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 14px 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 1px 1px 9px rgba(0,0,0,.25);
}
.catalog-result--artist { --search-type: #b4e61d; }
.catalog-result--label { --search-type: #ff86b1; }
.catalog-result:hover { border-color: var(--search-type); background: #292929; }
.catalog-result__image { width: 80px; height: 80px; object-fit: cover; border-radius: 9px; background: #171717; }
.catalog-result--label .catalog-result__image { object-fit: contain; }
.catalog-result__copy { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.catalog-result__type { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .045em; color: var(--search-type); }
.catalog-result__type .icon { width: 13px; height: 13px; }
.catalog-result__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin: 0; overflow: hidden; font-size: 14px; line-height: 1.35; font-weight: 750; overflow-wrap: anywhere;
}
.catalog-result mark { background: transparent; color: var(--search-type); }
.catalog-result__subtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; color: #b2b7ba; }
.catalog-result__foot { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.catalog-result__match { font-size: 10px; color: #a5a5a5; }
.catalog-result__points { display: flex; flex-direction: column; align-items: end; gap: 4px; text-align: right; }
.catalog-result__points strong { font-size: 18px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.catalog-result__points small { color: #9a9a9a; font-size: 9px; line-height: 1.35; }
.catalog-search[data-search-layout="list"] .catalog-search__results-grid { grid-template-columns: minmax(0,1fr); }
.catalog-search[data-search-layout="list"] .catalog-result { grid-template-columns: 60px minmax(0,1fr) minmax(120px,auto); grid-template-rows: auto; align-items: center; gap: 14px; }
.catalog-search[data-search-layout="list"] .catalog-result__image { width: 60px; height: 60px; }
.catalog-search[data-search-layout="list"] .catalog-result__foot { grid-column: 3; grid-row: 1; flex-direction: column-reverse; align-items: end; border: 0; padding: 0; gap: 6px; }
.catalog-search__empty { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--muted); }
.catalog-search__empty > .icon { width: 30px; height: 30px; color: var(--lime); }
.catalog-search__empty h3 { margin: 0; font-size: 18px; color: var(--text); }
.catalog-search__empty p { margin: 0; max-width: 400px; font-size: 13px; }
.catalog-search__limit { color: #a4a4a4; font-size: 11px; margin: 14px 0 0; }
.catalog-search__all { display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; margin-top: 16px; padding: 12px; font-size: 13px; font-weight: 700; background: #141414; }
.catalog-search__all:hover { color: var(--lime); }
.catalog-search__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 8px; }
.catalog-search__pagination a { display: grid; min-width: 40px; min-height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; background: var(--surface); }
.catalog-search__pagination a[aria-current] { color: var(--lime); border-color: var(--lime-border); }
@media (max-width: 1100px) {
  .catalog-search__results-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .search-dialog { width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .catalog-search__dialog-head { padding: max(12px,env(safe-area-inset-top)) 14px 12px; }
  .catalog-search--overlay { padding: 14px 12px max(14px,env(safe-area-inset-bottom)); gap: 10px; }
  .catalog-search__input { padding: 0 10px; gap: 8px; min-height: 48px; }
  .catalog-search__input > .icon { width: 18px; }
  .catalog-search__submit { padding: 0 12px; font-size: 13px; }
  .catalog-search__toolbar { gap: 6px; }
  .catalog-search__types { gap: 2px; }
  .catalog-search__type { min-height: 38px; padding: 6px 8px; font-size: 11px; }
  .catalog-search__view { padding: 3px; gap: 2px; }
  .catalog-search__view button { width: 31px; height: 34px; }
  .catalog-search__help { font-size: 10px; }
  .catalog-search__results-grid { grid-template-columns: minmax(0,1fr); }
  .catalog-result { grid-template-columns: 72px minmax(0,1fr); }
  .catalog-result__image { width: 72px; height: 72px; }
  .catalog-search[data-search-layout="list"] .catalog-result { grid-template-columns: 48px minmax(0,1fr) 78px; gap: 9px; padding: 11px; }
  .catalog-search[data-search-layout="list"] .catalog-result__image { width: 48px; height: 48px; }
  .catalog-search[data-search-layout="list"] .catalog-result__title { font-size: 12px; }
  .catalog-search[data-search-layout="list"] .catalog-result__points strong { font-size: 15px; }
  .catalog-search[data-search-layout="list"] .catalog-result__points small { font-size: 8px; }
  .catalog-search[data-search-layout="list"] .catalog-result__match { font-size: 9px; }
}

/* FIX9: database-grouped genre selector and simplified Trending page */
.genre-dialog {
  width: min(1160px, calc(100% - 40px));
}
.genre-dialog .genre-groups {
  padding-top: 4px;
}
.genre-dialog .genre-group {
  padding: 18px 6px;
}
.genre-dialog .genre-group h3 {
  margin: 0 5px 13px;
  color: #888;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.genre-dialog .genre-group > div {
  gap: 10px;
}
.genre-choice {
  min-height: 56px;
  gap: 7px;
}
.genre-dialog .genre-option {
  min-height: 56px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 11.5px;
}
.genre-option-name {
  gap: 10px;
}
.genre-option-name i {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}
.hype-option {
  display: inline-flex;
  min-width: 58px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  text-align: center;
  line-height: 1;
}
.hype-option.is-active {
  border-color: rgba(255,113,143,.85);
  background: rgba(255,113,143,.22);
  color: #ffd0da;
}

body[data-page="trending"] .trend-overview-grid {
  margin-top: 20px;
}
body[data-page="trending"] .trend-top-card .panel-head {
  min-height: 78px;
}
body[data-page="trending"] .trend-top-note {
  max-width: 320px;
  margin-top: 5px;
  overflow: visible;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}
body[data-page="trending"] .trend-leader-row {
  grid-template-columns: 28px 42px minmax(0,1fr) 78px;
  column-gap: 9px;
}
body[data-page="trending"] .trend-leader-row > img {
  grid-column: 2;
}
body[data-page="trending"] .trend-leader-row .leader-copy {
  grid-column: 3;
}
body[data-page="trending"] .trend-leader-row .leader-points {
  grid-column: 4;
}
body[data-page="trending"] .trend-widget-grid--single {
  grid-template-columns: 1fr;
  margin-top: 18px;
}
body[data-page="trending"] .trend-hub-genres--full {
  width: 100%;
}
body[data-page="trending"] .trend-hub-genre-list {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 18px;
}
body[data-page="trending"] .trend-hub-genre {
  cursor: default;
}
body[data-page="trending"] .trend-hub-genre > em b {
  font-size: 11px;
}
body[data-page="trending"] .trend-hub-genre > em small {
  color: var(--muted);
  font-size: 8px;
}
@media (max-width: 900px) {
  .genre-dialog .genre-group > div {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body[data-page="trending"] .trend-hub-genre-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .genre-dialog .genre-group > div {
    grid-template-columns: 1fr;
  }
  .genre-choice,
  .genre-dialog .genre-option,
  .hype-option {
    min-height: 52px;
  }
  body[data-page="trending"] .trend-leader-row {
    grid-template-columns: 28px 42px minmax(0,1fr) 70px;
  }
}

/* FIX10: Trending expansion controls and relative Top Genres ranking */
body[data-page="trending"] .trend-overview-grid {
  align-items: start;
}
body[data-page="trending"] .trend-top-card .leader-row:nth-child(n+6) {
  display: grid;
}
body[data-page="trending"] .trend-expand-button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
body[data-page="trending"] .trend-expand-button:hover,
body[data-page="trending"] .trend-expand-button:focus-visible {
  color: var(--lime);
  background: rgba(255,255,255,.025);
}
body[data-page="trending"] .trend-hub-genre-list {
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  padding: 0 16px 12px;
}
body[data-page="trending"] .trend-hub-genre {
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 7px 12px;
  padding: 13px 2px 11px;
}
body[data-page="trending"] .trend-hub-genre-rank {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: #f1f3f4;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body[data-page="trending"] .trend-hub-genre-name {
  grid-column: 2;
  grid-row: 1;
}
body[data-page="trending"] .trend-hub-genre > em {
  grid-column: 3;
  grid-row: 1;
}
body[data-page="trending"] .trend-hub-genre > u {
  grid-column: 2 / -1;
  grid-row: 2;
  height: 5px;
}
body[data-page="trending"] .trend-hub-genre strong {
  font-size: 10px;
}
body[data-page="trending"] .trend-hub-genre > em b {
  min-width: 36px;
  font-size: 12px;
  text-align: right;
}
body[data-page="trending"] .trend-hub-genre > em small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}
body[data-page="trending"] .trend-hub-genre[hidden],
body[data-page="trending"] [data-trend-extra][hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  body[data-page="trending"] .trend-hub-genre-list {
    padding-inline: 10px;
  }
  body[data-page="trending"] .trend-hub-genre {
    grid-template-columns: 24px minmax(0,1fr);
    gap: 6px 8px;
  }
  body[data-page="trending"] .trend-hub-genre-rank {
    font-size: 11px;
  }
  body[data-page="trending"] .trend-hub-genre > em {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
  body[data-page="trending"] .trend-hub-genre > u {
    grid-column: 2;
    grid-row: 3;
  }
}

/* FIX11: points-based Trending genres + modern chart pagination */
body[data-page="trending"] .trend-hub-widget-head > span:nth-child(2) > small {
  letter-spacing: .14em;
}
body[data-page="trending"] .trend-hub-genre {
  grid-template-columns: 34px minmax(0,1fr) minmax(150px,auto);
  column-gap: 14px;
}
body[data-page="trending"] .trend-hub-genre > em {
  min-width: 0;
  align-items: flex-end;
}
body[data-page="trending"] .trend-hub-genre > em b {
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-genre > em small {
  color: var(--muted-2);
  white-space: nowrap;
}
body[data-page="trending"] .trend-hub-genre > u {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
}
body[data-page="trending"] .trend-hub-genre > u > i {
  display: block;
  width: var(--trend-hub-width);
  height: 100%;
  border-radius: inherit;
  background: var(--trend-hub-color);
}

.pagination {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.025));
}
.pagination__summary {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
  min-width: 150px;
}
.pagination__summary strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.pagination__summary span {
  color: var(--muted);
  font-size: 9px;
}
.pagination__summary small {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pagination__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.pagination__page,
.pagination__direction {
  display: inline-flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #11171b;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.pagination__page {
  min-width: 38px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}
.pagination__direction {
  gap: 6px;
  min-width: 92px;
  padding: 0 12px;
}
.pagination__direction .icon {
  width: 13px;
  height: 13px;
}
.pagination__page:hover,
.pagination__direction:hover {
  transform: translateY(-1px);
  border-color: rgba(168,255,0,.38);
  color: #eef3f5;
  background: rgba(168,255,0,.055);
}
.pagination__page.is-active {
  border-color: var(--lime-border);
  background: var(--lime-soft);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(168,255,0,.07);
}
.pagination__direction.is-disabled {
  opacity: .28;
  cursor: default;
}
.pagination__ellipsis {
  display: grid;
  width: 22px;
  height: 38px;
  place-items: center;
  color: var(--muted-2);
  font-size: 12px;
}

@media (max-width: 760px) {
  body[data-page="trending"] .trend-hub-genre {
    grid-template-columns: 28px minmax(0,1fr);
  }
  body[data-page="trending"] .trend-hub-genre > em {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
  }
  body[data-page="trending"] .trend-hub-genre > u {
    grid-column: 2;
    grid-row: 3;
  }
  .pagination {
    display: grid;
    justify-content: stretch;
    gap: 10px;
    padding: 12px 10px;
  }
  .pagination__summary {
    display: flex;
    justify-content: center;
    gap: 5px;
    min-width: 0;
  }
  .pagination__summary small {
    margin: 0 0 0 5px;
  }
  .pagination__controls {
    justify-content: center;
  }
  .pagination__direction {
    min-width: 38px;
    width: 38px;
    padding: 0;
  }
  .pagination__direction > span {
    display: none;
  }
  .pagination__page {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
  }
  .pagination__ellipsis {
    width: 14px;
    height: 36px;
  }
}

@media (max-width: 430px) {
  .pagination__summary span {
    display: inline;
  }
  .pagination__summary small {
    display: none;
  }
  .pagination__controls {
    gap: 4px;
  }
  .pagination__page {
    min-width: 34px;
    width: 34px;
    padding: 0;
  }
}

/* FIX12: polished track filters + denser grouped genre selector */
.filter-picker {
  position: relative;
  flex: 0 0 auto;
}
.filter-picker__trigger {
  width: 206px;
  min-width: 206px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid transparent;
  background: transparent;
}
.filter-picker__trigger:hover,
.filter-picker.is-open .filter-picker__trigger {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}
.filter-picker.is-open .filter-picker__trigger > .icon:last-child {
  transform: rotate(180deg);
}
.filter-picker__trigger > .icon:last-child {
  transition: transform .16s ease;
}
.filter-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 28px));
  max-height: min(420px, calc(100vh - 160px));
  padding: 7px;
  overflow: auto;
  border: 1px solid #424242;
  border-radius: 13px;
  background: rgba(20,20,20,.985);
  box-shadow: 0 24px 65px rgba(0,0,0,.55);
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}
.filter-picker__menu[hidden] {
  display: none;
}
.filter-picker--key .filter-picker__menu {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px;
}
.filter-picker--key .filter-picker__menu[hidden] {
  display: none;
}
.filter-picker--date .filter-picker__menu {
  width: min(300px, calc(100vw - 28px));
}
.filter-picker__option {
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #d8dcde;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.filter-picker__option > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-picker__option:hover,
.filter-picker__option:focus-visible {
  outline: 0;
  border-color: rgba(255,255,255,.08);
  background: #292929;
  color: #fff;
}
.filter-picker__option.is-selected {
  border-color: var(--lime-border);
  background: var(--lime-soft);
  color: #efffc4;
}
.filter-picker__option .icon {
  width: 14px;
  height: 14px;
  color: var(--lime);
}
.filter-picker__check {
  width: 14px;
  height: 14px;
}

/* The chart-selector data is already grouped in PHP. Keep the modal dense enough
   to scan as a selector rather than making it feel like a long page. */
.genre-dialog {
  width: min(1180px, calc(100% - 32px));
  max-height: min(780px, calc(100dvh - 28px));
  margin: 14px auto;
}
.genre-dialog .drawer-head {
  padding: 16px 20px 11px;
}
.genre-dialog .drawer-head h2 {
  margin-top: 2px;
  font-size: 27px;
}
.genre-dialog .drawer-search {
  height: 40px;
  margin: 10px 20px 2px;
}
.genre-dialog .genre-groups {
  max-height: calc(100dvh - 174px);
  padding: 3px 14px 7px;
}
.genre-dialog .genre-group {
  padding: 9px 4px;
}
.genre-dialog .genre-group h3 {
  margin: 0 3px 7px;
  font-size: 9px;
  line-height: 1.2;
}
.genre-dialog .genre-group > div {
  gap: 6px 8px;
}
.genre-choice {
  min-height: 0;
  gap: 0;
}
.genre-choice.has-hype {
  display: grid;
  grid-template-columns: minmax(0,1fr) 52px;
  align-items: stretch;
  gap: 6px;
}
.genre-dialog .genre-option {
  min-height: 40px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 10.5px;
}
.genre-option-name {
  gap: 8px;
}
.genre-option-name i {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
}
.hype-option {
  width: 52px;
  min-width: 52px;
  min-height: 40px;
  height: 100%;
  align-self: stretch;
  padding: 0;
  border-radius: 9px;
  line-height: 1;
}
.genre-dialog-foot {
  min-height: 32px;
  padding: 0 20px;
  font-size: 8px;
}

@media (max-width: 900px) {
  .filter-bar {
    overflow: visible;
  }
  .filter-picker {
    min-width: 0;
  }
  .filter-picker__trigger,
  .filter-control--compact.filter-picker__trigger {
    width: 186px;
    min-width: 186px;
  }
  .genre-dialog .genre-group > div {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .filter-picker,
  .filter-picker__trigger,
  .filter-control--compact.filter-picker__trigger {
    width: 100%;
    min-width: 0;
  }
  .filter-picker__menu,
  .filter-picker--date .filter-picker__menu {
    width: 100%;
    max-width: none;
  }
  .filter-picker--key .filter-picker__menu {
    grid-template-columns: 1fr;
  }
  .genre-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    border-radius: 14px;
  }
  .genre-dialog .drawer-head {
    padding: 13px 14px 9px;
  }
  .genre-dialog .drawer-head h2 {
    font-size: 24px;
  }
  .genre-dialog .drawer-search {
    margin: 8px 14px 2px;
  }
  .genre-dialog .genre-groups {
    max-height: calc(100dvh - 160px);
    padding: 2px 9px 7px;
  }
  .genre-dialog .genre-group {
    padding: 8px 2px;
  }
  .genre-dialog .genre-group > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .genre-dialog .genre-option,
  .hype-option {
    min-height: 40px;
  }
  .genre-dialog-foot {
    display: none;
  }
}

/* FIX13: Camelot key picker — paired Minor/Major columns, no desktop scrolling */
.filter-picker--key .key-picker {
  display: block;
  width: min(620px, calc(100vw - 28px));
  max-height: none;
  padding: 10px;
  overflow: visible;
}
.filter-picker--key .key-picker[hidden] {
  display: none;
}
.key-picker__any {
  grid-template-columns: minmax(0,1fr) auto 18px;
  min-height: 42px;
  margin-bottom: 8px;
  padding: 7px 10px 7px 12px;
  border-color: #343434;
  background: #1d1d1d;
}
.key-picker__any > span:first-child {
  color: #f3f5f6;
  font-size: 11px;
}
.key-picker__any > small {
  color: #7e8589;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.key-picker__any.is-selected {
  border-color: var(--lime-border);
  background: var(--lime-soft);
}
.key-picker__columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.key-picker__group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #343434;
  border-radius: 11px;
  background: #191919;
}
.key-picker__group > header {
  display: flex;
  min-height: 37px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 11px;
  border-bottom: 1px solid #303030;
  background: #202020;
}
.key-picker__group > header > span {
  color: #eceff0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.key-picker__group > header > small {
  color: #747b7f;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.key-picker__list {
  display: grid;
  gap: 2px;
  padding: 4px;
}
.filter-picker__option.key-picker__option {
  --key-color: #98a1a6;
  min-height: 31px;
  grid-template-columns: 41px minmax(0,1fr) 15px;
  gap: 7px;
  padding: 3px 6px 3px 4px;
  border-radius: 7px;
  font-size: 9.5px;
}
.key-picker__option .key-picker__code {
  display: grid;
  width: 37px;
  height: 23px;
  place-items: center;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--key-color) 58%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--key-color) 12%, transparent);
  color: var(--key-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  text-overflow: clip;
}
.key-picker__option .key-picker__name {
  min-width: 0;
  overflow: hidden;
  color: #d7dbdd;
  font-size: 9.5px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.key-picker__option:hover .key-picker__name,
.key-picker__option:focus-visible .key-picker__name,
.key-picker__option.is-selected .key-picker__name {
  color: #fff;
}
.filter-picker__option.key-picker__option.is-selected {
  border-color: color-mix(in srgb, var(--key-color) 58%, #303030);
  background: color-mix(in srgb, var(--key-color) 9%, #242424);
}
.key-picker__option.is-selected .icon {
  color: var(--key-color);
}
.key-color-1  { --key-color: #ff6b93 !important; }
.key-color-2  { --key-color: #ff7a67 !important; }
.key-color-3  { --key-color: #ff9b59 !important; }
.key-color-4  { --key-color: #e7bb4f !important; }
.key-color-5  { --key-color: #a7d85c !important; }
.key-color-6  { --key-color: #62d197 !important; }
.key-color-7  { --key-color: #46c8c6 !important; }
.key-color-8  { --key-color: #50b2ef !important; }
.key-color-9  { --key-color: #7188ff !important; }
.key-color-10 { --key-color: #9a7df2 !important; }
.key-color-11 { --key-color: #c870db !important; }
.key-color-12 { --key-color: #e467aa !important; }

@media (max-width: 700px) {
  .filter-picker--key .key-picker {
    width: min(560px, calc(100vw - 20px));
    max-height: none;
    padding: 7px;
  }
  .key-picker__columns {
    gap: 5px;
  }
  .key-picker__group > header {
    min-height: 34px;
    padding: 0 7px;
  }
  .key-picker__group > header > small {
    display: none;
  }
  .key-picker__list {
    padding: 3px;
  }
  .filter-picker__option.key-picker__option {
    min-height: 29px;
    grid-template-columns: 35px minmax(0,1fr) 13px;
    gap: 4px;
    padding: 2px 4px 2px 3px;
  }
  .key-picker__option .key-picker__code {
    width: 32px;
    height: 21px;
    font-size: 8.5px;
  }
  .key-picker__option .key-picker__name {
    font-size: 8.5px;
  }
  .key-picker__any > small {
    display: none;
  }
}

/* Marks pages served by the dev environment. */
.env-badge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10000;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font: 700 11px/1.4 system-ui, sans-serif;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* 6.2.2 / 6.4.1: on phones, cover grids show two per row (as Related tracks does), not one
   full-width cover each. Overrides the one-per-row rules above. */
@media (max-width: 700px) {
  .latest-singles-grid,
  .top-labels-grid,
  .artist-activity-grid .collection-body--grid,
  .live-rankings-panel .collection-body--grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px;
  }
}

/* 6.3.0 search: live results, Top match, tab counts, recent searches. */
.catalog-search__result-area { transition: opacity .15s ease; }
.catalog-search.is-searching .catalog-search__result-area { opacity: .55; }
.catalog-search__input { position: relative; overflow: hidden; }
.catalog-search.is-searching .catalog-search__input::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; background: var(--lime);
  animation: catalog-search-scan 0.9s ease-in-out infinite;
}
@keyframes catalog-search-scan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .catalog-search.is-searching .catalog-search__input::after { animation: none; width: 100%; opacity: .5; } }

.catalog-search__count:empty { display: none; }
.catalog-search__count {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #303030; color: #c9cdcf;
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.catalog-search__type[aria-current] .catalog-search__count { background: var(--search-type); color: #111; }

.catalog-featured {
  --search-type: #4ddbd8;
  display: grid; grid-template-columns: 132px minmax(0,1fr) auto; align-items: center; gap: 18px;
  margin-bottom: 12px; padding: 16px; border: 1px solid var(--search-type); border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--search-type) 14%, #1d1d1d) 0%, #1f1f1f 55%);
  box-shadow: 1px 1px 9px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25);
}
.catalog-featured.catalog-result--artist { --search-type: #b4e61d; }
.catalog-featured.catalog-result--label { --search-type: #ff86b1; }
.catalog-featured__cover img { width: 132px; height: 132px; border-radius: 12px; object-fit: cover; background: #171717; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.catalog-featured.catalog-result--artist .catalog-featured__cover img { border-radius: 50%; }
.catalog-featured.catalog-result--label .catalog-featured__cover img { object-fit: contain; }
.catalog-featured__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.catalog-featured__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--search-type); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.catalog-featured__eyebrow .icon { width: 13px; height: 13px; }
.catalog-featured__title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }
.catalog-featured__title mark, .catalog-featured__subtitle mark { background: transparent; color: var(--search-type); }
.catalog-featured__subtitle { margin: 0; color: #b2b7ba; font-size: 13px; }
.catalog-featured__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.catalog-featured__open, .catalog-featured__play {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 12px; font-weight: 750; cursor: pointer;
}
.catalog-featured__open { border: 1px solid var(--search-type); background: var(--search-type); color: #111; }
.catalog-featured__open .icon { width: 15px; height: 15px; }
.catalog-featured__play { border: 1px solid var(--line); background: #262626; color: var(--text); }
.catalog-featured__play .icon { width: 13px; height: 13px; }
.catalog-featured__play.is-playing, .catalog-featured__play:hover { border-color: var(--lime); color: var(--lime); }
.catalog-featured__points { display: flex; flex-direction: column; align-items: end; gap: 4px; text-align: right; }
.catalog-featured__points strong { font-size: 26px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.catalog-featured__points small { color: #9a9a9a; font-size: 9px; }
.catalog-featured__match { margin-top: 6px; color: #a5a5a5; font-size: 10px; }
.catalog-result:focus-visible { border-color: var(--search-type); background: #292929; }

.catalog-search__recent { display: grid; gap: 10px; width: 100%; max-width: 520px; margin-top: 8px; }
.catalog-search__recent-head { display: flex; justify-content: space-between; align-items: center; color: #b9b9b9; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.catalog-search__recent-head button { border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.catalog-search__recent-head button:hover { color: var(--text); }
.catalog-search__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.catalog-search__chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #222; color: var(--text); font-size: 12px; cursor: pointer; }
.catalog-search__chip:hover { border-color: var(--lime-border); color: var(--lime); }

@media (max-width: 600px) {
  .catalog-featured { grid-template-columns: 84px minmax(0,1fr); gap: 12px; padding: 12px; }
  .catalog-featured__cover img { width: 84px; height: 84px; }
  .catalog-featured__title { font-size: 18px; }
  .catalog-featured__points { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .catalog-featured__points strong { font-size: 20px; }
  .catalog-featured__match { margin: 0; }
}
/* A preview started from search (Top match) shows above the search overlay. */
body.search-open .artist-preview-player { z-index: 120 !important; }

/* 6.4.0 mobile section navigation (section-nav.js). */
.section-nav { display: none; }
@media (max-width: 900px) {
  .section-nav {
    position: fixed; left: 10px; right: 10px; bottom: var(--section-nav-bottom, 8px); z-index: 59;
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px;
    border: 1px solid #344047; border-radius: 14px; background: rgba(15,20,23,.92);
    box-shadow: 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(16px);
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav button {
    flex: 1 0 auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
    color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .section-nav button.is-active { background: var(--lime-soft); color: var(--lime); }
  body:is(.player-open,.sidebar-open,.search-open,.genre-open) .section-nav { display: none; }
  .section-nav-target { scroll-margin-top: 72px; }
  body.has-section-nav { padding-bottom: 48px; }
}
/* 6.4.2: the phone period picker's list follows the dark theme (lime text on white before). */
.mobile-period-select select { color-scheme: dark; }
.mobile-period-select select option,
.mobile-period-select select optgroup { background: #1c1c1c; color: var(--text); }
/* Room for a year ("2026") in the phone period picker (was cut to "YEA"/"202"). */
@media (max-width: 900px) {
  .mobile-period-select { width: auto !important; min-width: 76px !important; }
  .mobile-period-select select { padding: 0 26px 0 11px; }
}
/* 6.4.3: the topbar's last column was 58px, too narrow for the wider period picker on small
   phones (it poked out on the right). */
@media (max-width: 470px) {
  .topbar { grid-template-columns: 40px minmax(0,1fr) 76px; }
}
/* 6.4.3: on artist and label lists the "minimal" filter bar only holds "Updated …", which is
   hidden on phones, so it showed as an empty box. Desktop already hid it; hide it everywhere. */
.filter-bar--minimal { display: none !important; }
/* 6.5.0: between tablet and wide desktop (including 200% zoom and small laptops) the three
   Top 10 / Trending boards were ~210px each and cut names to "HU…". Stack them full width. */
@media (min-width: 901px) and (max-width: 1350px) {
  .leader-grid--overview { grid-template-columns: minmax(0,1fr) !important; }
}
/* 6.6.0 Chart data panel: Beatport collection and BeatStats ranking status per genre. */
.status-card { align-items: flex-start; }
.status-card .status-copy { display: grid; gap: 3px; min-width: 0; }
.status-line { display: grid; grid-template-columns: 7px auto minmax(0,1fr); align-items: center; gap: 6px; font-size: 9px; color: var(--muted); }
.status-line i { width: 7px; height: 7px; border-radius: 50%; background: #5c5c5c; }
.status-line b { color: #c9cfd2; font-weight: 750; }
.status-line em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line--ok i { background: var(--lime); box-shadow: 0 0 6px rgba(180,230,29,.6); }
.status-line--queued i, .status-line--partial i { background: var(--orange); animation: status-pulse 1.6s ease-in-out infinite; }
.status-line--wait i { background: #6b6b6b; }
@keyframes status-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status-line--queued i, .status-line--partial i { animation: none; } }
/* 6.6.2: Biggest movers label each card's type, in the search type colours. */
.mover-card { --mover-type: #4ddbd8; }
.mover-card--artist { --mover-type: #b4e61d; }
.mover-card--label { --mover-type: #ff86b1; }
.mover-card .mover-type {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-bottom: 3px; padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--mover-type) 45%, transparent); border-radius: 999px;
  color: var(--mover-type); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .05em;
}
.mover-card .mover-type .icon { width: 10px; height: 10px; }
.mover-card small { color: var(--text); }
/* 6.6.3: movers drop the coloured side bar and outlined pill: the type is a plain coloured kicker,
   and the climb arrow on the artwork is green (the generic muted card span colour had won). */
.mover-card .mover-type { padding: 0; border: 0; border-radius: 0; margin-bottom: 4px; letter-spacing: .08em; }
.mover-card .mover-image .movement--up { color: var(--lime); }
.mover-card small { color: var(--muted); font-size: 8px; }
/* 6.6.3 Chart data panel: no icon box; a small heading and two status rows, each a dot and
   label with its detail underneath. */
.status-card { display: block; padding: 12px 10px 10px; }
.status-card .status-copy { gap: 8px; }
.status-card .status-copy > strong { color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-line { grid-template-columns: 7px minmax(0,1fr); row-gap: 1px; column-gap: 8px; }
.status-line b { font-size: 10px; }
.status-line em { grid-column: 2; font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 6.6.4 Chart data panel ("ring in the icon", chosen from mockups): the clock sits inside a ring
   that fills as BeatStats ranks today's charts; two short lines beside it, full text as tooltip. */
.status-card { display: flex; align-items: center; gap: 10px; padding: 10px 8px; }
.status-card .status-copy { gap: 2px; }
.status-card .status-copy > strong { color: #d6dcdf; font-size: 10px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.status-ring-wrap { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; color: var(--lime); }
.status-ring-wrap > .icon { width: 15px; height: 15px; }
.status-ring { position: absolute; inset: 0; width: 34px; height: 34px; transform: rotate(-90deg); }
.status-ring circle { fill: none; stroke: #2a2a2a; stroke-width: 2.5; }
.status-ring .status-ring__fill { stroke: var(--lime); stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.status-card--queued .status-ring__fill, .status-card--partial .status-ring__fill { stroke: var(--orange); }
.status-card--wait .status-ring__fill { stroke: #6b6b6b; }
.status-card .status-line { display: block; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-card .status-line b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.status-card .status-line--queued b, .status-card .status-line--partial b { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .status-ring .status-ring__fill { transition: none; } }
/* 6.6.6-6.6.7 Track hero between tablet and wide desktop (including 200% zoom and small laptops).
   The wide layout's fixed columns squeezed the details to ~280px: the artwork overlapped the title,
   the meta row ran under the rankings and the points panel's genre chip sat on the score.
   1121-1599px: keep the three columns, with a smaller cover and a compact rankings column.
   701-1120px: artwork and details side by side, rankings full width below (as before). */
@media (min-width: 1121px) and (max-width: 1599px) {
  body[data-page="track"] .track-hero { grid-template-columns: minmax(170px, 220px) minmax(0,1fr) minmax(240px, 270px); gap: 18px; }
  body[data-page="track"] .track-ranking-list article { grid-template-columns: 46px 46px minmax(0,1fr) 42px; gap: 10px; min-height: 0; padding: 11px 12px; }
  body[data-page="track"] .track-rank-box { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
  body[data-page="track"] .track-ranking-list article > img { width: 46px; height: 46px; border-radius: 9px; }
  body[data-page="track"] .track-move-box { width: 42px; min-height: 42px; border-radius: 12px; }
  body[data-page="track"] .track-rank-copy strong { font-size: 13px; }
}
@media (min-width: 701px) and (max-width: 1120px) {
  body[data-page="track"] .track-hero { grid-template-columns: minmax(200px, 260px) minmax(0,1fr); }
  body[data-page="track"] .track-ranking { grid-column: 1 / -1; }
}
@media (min-width: 701px) {
  body[data-page="track"] .track-cover-wrap { min-width: 0; min-height: 0; }
  body[data-page="track"] .track-cover-wrap > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
  body[data-page="track"] .track-meta { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}
/* When the details column is narrow, stack the points panel (score, then genre and period). */
body[data-page="track"] .track-main { container-type: inline-size; }
@container (max-width: 500px) {
  body[data-page="track"] .track-score-panel-v34 { grid-template-columns: minmax(0,1fr) !important; row-gap: 12px; }
  body[data-page="track"] .track-score-panel-v34__context { border-left: 0; padding-left: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
}
/* 6.6.7 Rankings heading: the same icon + kicker + title head as the other panels, instead of the
   black tab with spaced capitals. */
body[data-page="track"] .track-ranking > .track-ranking-head { min-height: 0; padding: 14px 16px; background: transparent; }
body[data-page="track"] .track-ranking-head h2 { font-size: 14px; }
body[data-page="track"] .track-ranking-head .panel-icon { width: 30px; height: 30px; border-color: var(--lime-border); background: var(--lime-soft); }
body[data-page="track"] .track-ranking-head .panel-icon .icon { width: 15px; }
/* 6.6.8 Track hero, option 1 "artwork glow" (chosen from mockups). Replaces the old track-hero layout
   on track pages: blurred artwork behind, cover | title, facts, label, actions | points + live
   Beatport positions (up to three: genre, Hype, Top 100). */
.track-hero-v2 { position: relative; overflow: hidden; isolation: isolate; padding: 24px; }
.track-hero-v2 .th-glow { position: absolute; inset: -80px; z-index: -2; background-position: center; background-size: cover; filter: blur(70px) saturate(1.4); opacity: .3; }
.track-hero-v2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,24,24,.3), rgba(24,24,24,.9) 55%); }
.th-grid { display: grid; grid-template-columns: 240px minmax(0,1fr) 260px; gap: 26px; align-items: center; }
.th-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.th-main { min-width: 0; }
.th-main h1 { margin: 6px 0 8px; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.th-main .track-artists { margin: 0; }
.th-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 14px 0 16px; color: var(--muted); font-size: 12px; }
.th-facts > span:not(.genre-pill)::after { content: "·"; margin: 0 8px; color: var(--muted-2); }
.th-main .track-links { margin: 0 0 16px; }
.th-main .track-actions { margin: 0; }
.th-side { display: grid; gap: 10px; align-content: center; min-width: 0; }
.th-card { display: grid; gap: 2px; min-width: 0; padding: 15px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(10,10,10,.55); }
.th-card--points { align-content: center; border-color: rgba(180,230,29,.35); }
.th-k { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.th-card--points .th-k { color: var(--lime); }
.th-card--points strong { font-size: 36px; font-weight: 880; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.th-card--points small { color: var(--muted); font-size: 11px; }
.th-card--charts { gap: 0; }
.th-card--charts .th-k { margin-bottom: 4px; }
.th-chart { display: grid; grid-template-columns: minmax(0,1fr) auto 38px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.th-card--charts .th-k + .th-chart { border-top: 0; }
.th-chart__name { overflow: hidden; color: #d6dcdf; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.th-chart__pos { font-size: 22px; font-weight: 880; font-variant-numeric: tabular-nums; }
.th-chart:first-of-type .th-chart__pos { font-size: 30px; }
.th-chart__move { justify-self: end; }
.th-chart__move .movement { font-size: 11px; }
.th-empty { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 1299px) {
  .th-grid { grid-template-columns: 200px minmax(0,1fr); }
  .th-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
}
@media (max-width: 700px) {
  .track-hero-v2 { padding: 14px; }
  .th-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .th-cover { max-width: 320px; }
  .th-side { grid-template-columns: minmax(0,1fr); }
}
/* 6.6.10 HYPE pill. Hype charts are their own genres ("HYPE - <genre>"); wherever one is named, the
   genre name is followed by this pill. Pink matches the genre picker's Hype option. */
.hype-pill { display: inline-flex; flex: none; align-items: center; padding: 1px 5px; border: 1px solid rgba(255,113,143,.55); border-radius: 999px; background: rgba(255,113,143,.16); color: #ffb3c3; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.chart-name { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; vertical-align: middle; }
.chart-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.highcharts-legend-item .hype-pill { margin-left: 2px; font-size: 7px; }
.top-genre .chart-name { display: inline-flex; }
.top-genre .chart-name__text { display: block; }
.top-genre .hype-pill { display: inline-flex; }
/* 6.6.12 In the artist/label hero ranking boxes the name column can be ~36px wide on narrow screens.
   There the HYPE pill wraps under the genre name instead of being clipped. */
.stat-copy .chart-name { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.stat-copy .chart-name__text { flex: 0 1 auto; max-width: 100%; }
/* 6.6.13 Between 701px and 900px the artist/label hero ranking boxes sat two to a row at 150-235px wide,
   which clipped point totals and genre names. They stack one per row there, as they already do below 701px. */
@media (min-width: 701px) and (max-width: 900px) {
  body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid { grid-template-columns: minmax(0,1fr); }
}
/* 6.6.15 Mobile block view on the artist, track and label lists: two per row, as the other grids. */
@media (max-width: 700px) {
  html body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
  html body:is([data-page="artists"],[data-page="tracks"],[data-page="labels"]) .chart-table-panel.is-grid-view .rank-name strong { font-size: 12px; }
}
/* 6.6.15 Genre names in the chart picker and the top bar always upper case (database names vary). */
.top-genre b, .genre-option-name > span { text-transform: uppercase; }
/* 6.6.15 Track hero "Beatport now": every position the same size; long chart names wrap. */
.th-chart__pos, .th-chart:first-of-type .th-chart__pos { font-size: 24px; }
.th-chart__name { white-space: normal; line-height: 1.25; }
.th-chart__name .chart-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.th-empty { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 2px; }
.th-empty__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 10px; background: #151515; color: var(--muted); }
.th-empty__icon .icon { width: 16px; }
.th-empty > div { display: grid; gap: 3px; min-width: 0; }
.th-empty strong { color: var(--text); font-size: 14px; }
.th-empty span { color: var(--muted); font-size: 12px; }
.th-empty b { color: var(--lime); font-weight: 850; }
/* 6.6.16 Logo row on phones and tablets (where the sidebar with the logo is hidden). Not sticky:
   it shows when a page opens and scrolls away; the top bar below stays sticky as before. */
.mobile-brand { display: none; }
@media (max-width: 900px) {
  .mobile-brand { display: flex; align-items: center; justify-content: center; padding: 12px 16px 2px; }
  .mobile-brand img { display: block; height: 30px; width: auto; }
}
/* 6.6.18 About and Contact pages, in the style of the rest of the site: a hero panel, then cards
   with the standard panel head (icon, kicker, title). */
.info-page { display: grid; gap: 18px; max-width: 1180px; }
.info-hero { position: relative; overflow: hidden; padding: 30px 30px 26px; background: radial-gradient(120% 140% at 100% 0%, rgba(180,230,29,.09), transparent 55%), var(--surface); }
.info-hero h1 { max-width: 760px; margin: 8px 0 10px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.035em; }
.info-hero > p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.info-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.info-stats > div { display: grid; gap: 2px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(10,10,10,.35); }
.info-stats b { color: var(--lime); font-size: 20px; font-weight: 880; letter-spacing: -.02em; }
.info-stats span { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.info-card { overflow: hidden; }
.info-card__body { padding: 16px 18px 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.info-card__body p { margin: 0 0 10px; }
.info-card__body strong { color: var(--text); }
.info-muted { color: var(--muted-2); font-size: 12px; }
.info-points { display: grid; gap: 7px; margin: 14px 0 16px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(10,10,10,.3); }
.info-points__row { display: grid; grid-template-columns: 40px minmax(0,1fr) 36px; align-items: center; gap: 10px; }
.info-points__pos { color: var(--text); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.info-points__bar { height: 8px; border-radius: 99px; background: #2a2a2a; overflow: hidden; }
.info-points__bar i { display: block; min-width: 4px; height: 100%; border-radius: 99px; background: var(--lime); }
.info-points b { justify-self: end; color: var(--lime); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.info-timeline { position: relative; display: grid; gap: 16px; margin: 4px 0 0; padding: 0 0 0 22px; list-style: none; }
.info-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.info-timeline li { position: relative; display: grid; gap: 2px; }
.info-timeline li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border: 2px solid var(--lime); border-radius: 50%; background: var(--surface); }
.info-timeline b { color: var(--text); font-size: 18px; font-weight: 880; }
.info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.info-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; background: #1b1b1b; color: var(--text); font-size: 13px; font-weight: 750; }
.info-button .icon { width: 15px; }
.info-button:hover { border-color: #4a4a4a; background: #232323; }
.info-button--primary { border-color: var(--lime-border); background: var(--lime-soft); color: #efffc4; }
.info-button--primary:hover { border-color: var(--lime); background: rgba(180,230,29,.14); }
.info-button--kofi { border-color: rgba(255,94,91,.45); background: rgba(255,94,91,.1); }
.info-button--kofi:hover { border-color: #ff5e5b; background: rgba(255,94,91,.16); }
.info-contact { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; max-width: 760px; margin-top: 22px; }
.info-contact__card { display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,10,10,.35); color: var(--text); }
.info-contact__card:hover { border-color: #4a4a4a; background: rgba(30,30,30,.6); }
.info-contact__card--primary { border-color: var(--lime-border); }
.info-contact__card b { display: block; font-size: 14px; }
.info-contact__card small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.info-contact__card > .icon { width: 14px; color: var(--muted-2); }
.info-notice { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255,154,85,.3); border-radius: 12px; background: rgba(255,154,85,.06); color: var(--muted); font-size: 12px; line-height: 1.5; }
.info-notice .icon { width: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--orange); }
.info-notice p { margin: 0; }
.info-notice strong { color: var(--text); }
.support-faq { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; }
.support-list { display: grid; }
.support-item { border-top: 1px solid var(--line-soft); }
.support-item:first-child { border-top: 0; }
.support-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; color: #e3e7e9; font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.support-item summary::-webkit-details-marker { display: none; }
.support-item summary .icon { width: 15px; flex: 0 0 15px; color: var(--muted-2); transition: transform .2s ease; }
.support-item[open] summary .icon { transform: rotate(180deg); color: var(--lime); }
.support-item summary:hover { background: rgba(255,255,255,.025); }
.support-item .support-highlight { color: var(--lime); }
.support-answer { padding: 0 18px 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.support-answer p { margin: 0 0 9px; }
.support-answer ul { margin: 0 0 10px; padding-left: 18px; }
.support-answer li { margin: 3px 0; }
.support-answer__more { margin-top: 12px !important; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted-2); font-size: 12px; }
.support-answer__more a { color: var(--lime); font-weight: 700; }
.info-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; }
.info-cta h2 { margin: 0 0 4px; font-size: 18px; }
.info-cta p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.info-cta .info-actions { flex: none; margin: 0; }
@media (max-width: 1100px) {
  .info-grid, .support-faq { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  .info-hero { padding: 20px 16px 18px; }
  .info-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .info-contact { grid-template-columns: minmax(0,1fr); }
  .info-cta { flex-direction: column; align-items: stretch; }
}
/* 6.6.19 Contact FAQ: undo the old boxed question styling inside the new cards, and flow the group
   cards in two balanced columns. */
.support-faq { display: block; margin-top: 0; columns: 2; column-gap: 18px; }
.support-faq .support-group { margin: 0 0 18px; break-inside: avoid; }
.support-faq details.support-item { margin: 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.support-faq details.support-item:first-child { border-top: 0; }
.support-faq details.support-item[open] { background: rgba(255,255,255,.02); }
.support-faq .support-item summary { padding: 14px 18px; font-size: 13px; font-weight: 650; }
.support-faq .support-item summary::after { content: none; }
@media (max-width: 1100px) { .support-faq { columns: 1; } }
/* 6.6.23 Contact: "Type your question" fuzzy search over the FAQ (faq-search.js). */
.faq-search { max-width: 760px; margin-top: 20px; }
.faq-search__box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--lime-border); border-radius: 14px; background: rgba(10,10,10,.45); }
.faq-search__box:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(180,230,29,.12); }
.faq-search__box .icon { width: 18px; flex: 0 0 18px; color: var(--lime); }
.faq-search__box input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.faq-search__box input::placeholder { color: var(--muted-2); }
.faq-search__results { display: grid; gap: 8px; margin-top: 10px; }
.faq-search__label { margin: 4px 2px 0; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.faq-search__result { display: grid; gap: 3px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,10,10,.35); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.faq-search__result:hover, .faq-search__result:focus-visible { border-color: var(--lime-border); background: rgba(30,30,30,.6); outline: 0; }
.faq-search__result b { font-size: 14px; }
.faq-search__result span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.faq-search__result em { color: var(--lime); font-size: 11px; font-style: normal; font-weight: 800; }
.faq-search__empty { margin: 2px; color: var(--muted); font-size: 13px; }
.faq-search__empty a { color: var(--lime); font-weight: 700; }
/* 6.6.26 Logo is now an SVG (crisp at any zoom). It has no padding, unlike the old PNG, so it's sized to
   match the old lettering, with a subtle drop shadow. */
.brand img, .mobile-brand img { height: auto; }
/* 6.6.28 The shadow is drawn inside the SVG itself (feDropShadow, with room in the viewBox), because
   Safari still cut a CSS drop-shadow off at the image box. The negative margins cancel that room so
   the lettering sits where it did. */
.brand img { width: 200px; margin: -3px 0 -7px -5px; }
@media (max-width: 900px) { .brand img { width: 185px; margin: -3px 0 -6px -4px; } .mobile-brand img { width: auto; height: 30px; margin: -2px 0 -4px; } }
/* 6.6.29 Artist/label hero rankings: at 901px+ the boxes were a fixed 3 (2 below 1181px) across, which made them
   164-193px wide at 980-1280px (incl. 200% zoom) and the movement box covered the genre name and points. Each box
   now gets at least 220px, up to 3 per row. The title row wraps, so "View on Songstats" no longer runs off the
   hero at 768-1024px. */
@media (min-width: 901px) {
  body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 32px) / 3)), 1fr)); }
}
body:is([data-page="artist"],[data-page="label"]) .detail-title-row { flex-wrap: wrap; }
body:is([data-page="artist"],[data-page="label"]) .detail-title-row > div:first-child { min-width: 0; }
/* 6.6.29 The YEAR strip (2026 back to 2011) was wider than the top bar at about 1180-1400px, so the page scrolled
   sideways and the older years were off-screen. It now scrolls on its own. 6.6.30: the chart button shares
   the space with it (shrinking to 200px at most); 6.6.29 stopped it shrinking, which pushed the period buttons
   off the right edge at 980-1024px. */
.topbar .top-genre { min-width: 200px; }
.topbar .period-area { min-width: 0; }
.year-selector { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.year-selector::-webkit-scrollbar { display: none; }
.year-selector > * { flex-shrink: 0; }
/* 6.6.31 404 page: unknown URLs now reach the site's own 404 (ErrorDocument in .htaccess), styled like About. */
.notfound-page { display: grid; gap: 16px; width: min(100%, 980px); }
.notfound-hero { position: relative; overflow: hidden; padding: 34px 32px 30px; background: radial-gradient(120% 140% at 100% 0%, rgba(180,230,29,.1), transparent 55%), var(--surface); }
.notfound-code { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); color: transparent; font-size: clamp(120px, 17vw, 220px); font-weight: 900; line-height: 1; letter-spacing: -.06em; -webkit-text-stroke: 1px rgba(180,230,29,.22); pointer-events: none; user-select: none; }
.notfound-hero > :not(.notfound-code) { position: relative; }
.notfound-hero h1 { max-width: 620px; margin: 8px 0 10px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.035em; }
.notfound-hero > p { max-width: 560px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.notfound-actions .primary-button, .notfound-actions .quiet-button { min-height: 44px; padding: 0 16px; border-radius: 11px; }
.notfound-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.notfound-link { display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--box-shadow); }
.notfound-link:hover, .notfound-link:focus-visible { border-color: var(--lime-border); background: var(--surface-3); }
.notfound-link b { display: block; font-size: 14px; }
.notfound-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.notfound-link > .icon { width: 16px; color: var(--muted); }
@media (max-width: 700px) {
  .notfound-hero { padding: 24px 18px 22px; }
  .notfound-code { top: 14px; right: 12px; transform: none; font-size: 96px; }
  .notfound-actions > * { flex: 1 1 100%; }
  .notfound-links { grid-template-columns: minmax(0,1fr); }
}
/* 6.6.32 / 6.6.33 Play + buy on track rows outside the main charts: the Trending tracks panel on the list pages,
   the Top 10 tracks card and the Trending page tracks card. Side by side, styled like the chart rows' buttons
   (6.6.32 stacked them, which looked cramped). Rows are a div with a full-row link underneath (.leader-row-link),
   so the buttons sit beside the link, not inside it. */
.mini-track-actions { display: flex; gap: 6px; }
html body .mini-track-actions > :is(a, button) { display: grid; width: 32px; min-height: 0; height: 32px; place-items: center; padding: 0; border: 1px solid #414141; border-radius: 9px; background: #1b1b1b; color: #c9c9c9; cursor: pointer; pointer-events: auto; }
html body .mini-track-actions > :is(a, button):hover, html body .mini-track-actions > :is(a, button):focus-visible { border-color: var(--lime-border); background: #1f2412; color: var(--lime); }
html body .mini-track-actions .icon { width: 14px; height: 14px; }
/* Trending tracks panel: the buttons take the chevron's column. In a narrow panel (e.g. 1440px) the rank, artwork
   and buttons get a little smaller so the title keeps its room. */
.trend-list { container-type: inline-size; }
.trend-list .trend-item { position: relative; display: grid; }
.trend-list .trend-item > a { grid-template-columns: 32px 48px minmax(0,1fr) 70px; }
.trend-list .trend-item > a > .icon { visibility: hidden; }
.trend-list .trend-actions { position: absolute; top: 50%; right: 10px; z-index: 2; transform: translateY(-50%); }
@container (max-width: 330px) {
  .trend-list .trend-item > a { grid-template-columns: 24px 40px minmax(0,1fr) 60px; gap: 7px; }
  .trend-list .trend-item > a img { width: 40px; height: 40px; }
  html body .trend-list .trend-actions { gap: 4px; }
  html body .trend-list .trend-actions > :is(a, button) { width: 28px; height: 28px; border-radius: 8px; }
}
/* Top 10 and Trending page track rows: buttons at the right, after the points. In a narrow card they sit under
   the points instead (phones, and the Trending page at about 1440px), and the rows in those cards are a little
   taller so the three cards stay level. Top 10 on desktop never stacks: in a narrow card (about 1300-1500px) the
   small genre pill makes way for the buttons, so its rows keep the same height as the artist and label cards. */
.leader-list { container-type: inline-size; }
html body .leader-list .leader-row.leader-row--actions { position: relative; padding-right: 84px; }
/* The transparent link sits over the row's cells (which keep their own positioning); only the buttons sit above it. */
.leader-row-link { position: absolute; inset: 0; z-index: 1; }
.leader-row--actions > .mini-track-actions { position: absolute; top: 50%; right: 10px; z-index: 3; transform: translateY(-50%); }
@container (max-width: 420px) {
  html body[data-page="trending"] .trend-top-card .leader-list .leader-row { min-height: 66px; }
  html body .leader-list .leader-row.trend-leader-row.leader-row--actions { padding-right: 10px; }
  .trend-leader-row.leader-row--actions .leader-points { align-self: start; }
  .trend-leader-row.leader-row--actions .leader-points small { display: none; }
  html body .trend-leader-row.leader-row--actions > .mini-track-actions { top: auto; bottom: 7px; transform: none; gap: 4px; }
  html body .trend-leader-row.leader-row--actions > .mini-track-actions > :is(a, button) { width: 28px; height: 28px; border-radius: 8px; }
}
@media (max-width: 700px) {
  @container (max-width: 420px) {
    html body[data-page] .leader-list:has(.leader-row--actions) .leader-row { min-height: 66px; }
    html body .leader-list .leader-row.leader-row--actions { padding-right: 10px; }
    .leader-row--actions .leader-points { align-self: start; }
    .leader-row--actions .leader-points small { display: none; }
    html body .leader-row--actions > .mini-track-actions { top: auto; bottom: 7px; transform: none; gap: 4px; }
    html body .leader-row--actions > .mini-track-actions > :is(a, button) { width: 28px; height: 28px; border-radius: 8px; }
  }
}
@media (min-width: 701px) {
  @container (max-width: 520px) {
    html body .leader-list .leader-row.leader-row--actions:not(.trend-leader-row) { padding-right: 8px; }
    .leader-row--actions:not(.trend-leader-row) .leader-genre { display: none; }
  }
}
/* 6.6.37 Artist, label, track and search pages: the top bar names what's open (no genre button, which
   changed nothing there). Same box as the genre button, so the period controls stay where they are. */
.top-genre--context { border-color: transparent; background: transparent; cursor: default; }
.top-genre--context:hover { border-color: transparent; background: transparent; }
.top-genre--context > .icon { color: var(--lime); }
.top-genre--context > span { min-width: 0; }
.top-genre--context b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 6.6.38 "Where am I in this chart?": an artist or label page's ranking boxes link to that chart, at the
   right page, with their row highlighted (as the old site did). */
.detail-stat-grid article { position: relative; }
.detail-stat-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.detail-stat-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.detail-stat-grid article:has(.detail-stat-link) { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.detail-stat-grid article:has(.detail-stat-link):hover { border-color: var(--lime-border); background-color: rgba(180,230,29,.05); }
.chart-table-panel .rank-row.is-highlighted { background: rgba(180,230,29,.09) !important; box-shadow: inset 0 0 0 1px var(--lime-border); scroll-margin-top: 140px; }
.chart-table-panel .rank-row.is-highlighted .rank-name strong { color: var(--lime); }
/* 6.6.39 Artist and label track lists show chart positions again: the big number is the track's position
   on its best chart, with its move; the pills list every chart it's on ("#17 HOUSE", "#69 TOP 100"). */
.production-rank { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; }
.production-rank > b { font-weight: 900; line-height: 1; white-space: nowrap; }
.production-rank .movement { font-size: 9px; }
.production-rank .movement .icon { width: 10px; height: 10px; }
.collection-body--grid .production-rank .movement { display: none; }
.production-tags { flex-wrap: wrap; row-gap: 4px; }
.chart-pos b { margin-right: 2px; color: var(--text); font-weight: 900; }
.chart-pos:not(.chart-pos--best) { opacity: .8; }
.production-days { color: var(--muted-2); font-size: 9px; white-space: nowrap; }
/* 6.6.41 Desktop section bar on artist and label pages (section-nav.js): the phone strip's links as a bar
   at the top of the page that sticks under the top bar. */
@media (min-width: 901px) {
  .section-nav--bar {
    position: sticky; top: 68px; z-index: 30;
    display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 16px; padding: 4px;
    border: 1px solid #2f2f2f; border-radius: 12px; background: rgba(24,24,24,.94);
    box-shadow: 0 8px 22px rgba(0,0,0,.35); backdrop-filter: blur(14px);
  }
  .section-nav--bar::-webkit-scrollbar { display: none; }
  .section-nav--bar button {
    min-height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
    color: var(--muted); font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .section-nav--bar button:hover { background: rgba(255,255,255,.05); color: var(--text); }
  .section-nav--bar button.is-active { background: var(--lime-soft); color: var(--lime); }
  .section-nav--bar button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
  body:is(.search-open,.genre-open) .section-nav--bar { visibility: hidden; }
}
/* 6.6.42 Polish: the desktop section bar is a full-width strip (content no longer shows beside it while it's
   stuck); ranking boxes with no movement to show (12 MONTH drops, 3 MONTH) hide the empty move box; the
   chart-position pills on artist and label track lists are a little larger. */
@media (min-width: 901px) {
  .section-nav--bar { width: auto; max-width: none; margin: 0 0 16px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: rgba(24,24,24,.97); box-shadow: none; }
}
.detail-move-box:has(> .movement--none) { visibility: hidden; }
.production-tags .chart-pos { font-size: 9px; }
/* 6.6.49 Track credits: who made the track, their BeatStats rank, and who earns its points (lime) versus
   credited only (grey). */
.credits-section { margin-top: 18px; }
.credits-flow-wrap { margin-bottom: 14px; }
.credits-flow { display: flex; gap: 4px; overflow: hidden; border-radius: 12px; }
.credits-flow__seg { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 8px; padding: 7px 10px; background: #262626; color: var(--muted); font-size: 11px; font-weight: 700; }
.credits-flow__seg.is-scoring { flex-grow: 2; background: linear-gradient(90deg, rgba(180,230,29,.28), rgba(180,230,29,.14)); color: #efffc4; }
.credits-flow__seg img { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; object-fit: cover; }
.credits-flow__seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credits-flow__seg:hover { filter: brightness(1.15); }
.credits-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 2px 0; color: var(--muted); font-size: 12px; }
.credits-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.credits-key i { width: 10px; height: 10px; border-radius: 3px; background: #3a3a3a; }
.credits-key i.is-scoring { background: var(--lime); }
.credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.credit-card { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.credit-card.is-scoring { border-color: var(--lime-border); background: linear-gradient(180deg, rgba(180,230,29,.06), rgba(180,230,29,.02)), var(--surface); }
.credit-photo img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.credit-card:not(.is-scoring) .credit-photo img { filter: grayscale(.6); opacity: .85; }
.credit-copy { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; min-width: 0; } /* minmax: an auto column grew to the widest pill (6.6.106) */
.credit-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.credit-role { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.credit-score { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--lime-soft); color: var(--lime); font-size: 9px; font-weight: 800; }
.credit-score .icon { width: 10px; height: 10px; }
.credit-score--none { background: #2a2a2a; color: var(--muted-2); }
.credit-name strong { display: block; overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.credit-name:hover strong { color: var(--lime); }
.credit-ranks { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.credit-ranks .chart-pos { min-width: 0; font-size: 9px; } /* min-width: a flex item otherwise grows to its text and a long chart name ran out of the card (6.6.106) */
.credit-ranks .chart-pos b { margin-right: 2px; color: var(--text); font-weight: 900; }
.credit-unranked { color: var(--muted-2); font-size: 11px; }
@media (max-width: 700px) {
  .credits-flow { flex-wrap: wrap; }
  .credits-flow__seg { flex-basis: 40%; }
  .credits-grid { grid-template-columns: minmax(0,1fr); }
}
/* 6.6.51 "Beatport now" when not charting: a long chart name with a HYPE pill ran out of the card (the
   name didn't wrap, and the card's span rule made the pill 12px). */
.th-empty .chart-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.th-empty .chart-name__text { white-space: normal; overflow: visible; }
.th-empty .hype-pill { color: #ffb3c3; font-size: 8px; }
/* 6.6.54 Credits: the points rule as one short pill ("Remix → points to remixer") instead of a sentence. */
.credits-rule { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border: 1px solid var(--lime-border); border-radius: 999px; background: var(--lime-soft); color: #dff5a0; font-size: 11px; font-weight: 700; }
.credits-rule b { color: var(--lime); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.credits-rule .icon { width: 12px; height: 12px; color: var(--lime); }
@media (max-width: 700px) { .credits-rule { margin-left: 0; } }
/* 6.6.55 Track rows and cards open the track from anywhere on them, not just the title: Live Beatport rankings,
   Productions / Catalogue, Latest singles and Related tracks; 6.6.56 adds track credit cards and the search top match. A transparent link sits underneath (as on the chart
   tables); play, buy, artist names and pills stay clickable on their own. */
.has-row-link { position: relative; cursor: pointer; }
.has-row-link > .row-link { position: absolute; inset: 0; z-index: 1; }
.has-row-link > :not(.row-link) { position: relative; z-index: 2; pointer-events: none; }
.has-row-link :is(a, button):not(.row-link) { pointer-events: auto; }
/* 6.6.59 Explain my points: the Contact page's promo card and the tool's dialog (points-explainer.js). */
.px-promo { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; margin: 18px 0; padding: 20px 22px; border-color: var(--lime-border); background: radial-gradient(120% 140% at 0% 0%, rgba(180,230,29,.13), transparent 55%), var(--surface); }
.px-promo__art svg { display: block; width: 200px; height: auto; }
.px-promo__copy h2 { margin: 4px 0 6px; font-size: 22px; letter-spacing: -.01em; }
.px-promo__copy p { margin: 0; color: var(--muted); font-size: 13.5px; }
.px-promo__button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border: 0; border-radius: 16px; background: var(--lime); color: #111; cursor: pointer; font: inherit; text-align: left; box-shadow: 0 10px 30px rgba(180,230,29,.25); transition: transform .15s ease, box-shadow .15s ease; }
.px-promo__button:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(180,230,29,.35); }
.px-promo__button-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(0,0,0,.14); }
.px-promo__button .icon { width: 20px; height: 20px; }
.px-promo__button b { display: block; font-size: 15px; font-weight: 900; }
.px-promo__button small { display: block; font-size: 11.5px; opacity: .75; }

.px-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(92vh, 1400px); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 30px 120px rgba(0,0,0,.6); }
.px-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.px-dialog[open] { display: flex; flex-direction: column; }
body.px-open { overflow: hidden; }
.px-close { position: absolute; top: 14px; right: 14px; z-index: 5; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #202020; color: var(--text); cursor: pointer; }
.px-close:hover { border-color: var(--lime-border); color: var(--lime); }
.px-search { padding: 34px 28px; overflow-y: auto; }
.px-search h2 { margin: 4px 0 16px; font-size: 26px; }
.px-search__box { display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 0 14px; border: 1px solid var(--lime-border); border-radius: 14px; background: #1c1c1c; }
.px-search__box .icon { width: 18px; color: var(--lime); }
.px-search__box input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; }
.px-results { display: grid; gap: 6px; max-width: 640px; margin-top: 14px; }
.px-result { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.px-result:hover, .px-result:focus-visible { border-color: var(--lime-border); background: #262626; outline: 0; }
.px-result img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
.px-result img.is-round, .px-head img.is-round { border-radius: 50%; }
.px-result strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.px-result small { color: var(--muted-2); font-size: 11.5px; }
.px-result em { color: var(--lime); font-size: 12px; font-style: normal; font-weight: 800; }
.px-hint { margin: 6px 2px; color: var(--muted); font-size: 13px; }
.px-body { flex: 1; padding: 22px 24px 30px; overflow-y: auto; }
.px-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; color: var(--muted); }
.px-spinner { width: 22px; height: 22px; border: 3px solid #333; border-top-color: var(--lime); border-radius: 50%; animation: px-spin .8s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.px-link { padding: 0; border: 0; background: none; color: var(--lime); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.px-empty { margin-top: 18px; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.px-dialog .in { color: var(--lime); }
.px-dialog .out { color: var(--red); }

.px-head { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 16px; padding-right: 48px; }
.px-head img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.px-eyebrow { color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.px-head h2 { margin: 2px 0 4px; font-size: 26px; letter-spacing: -.01em; }
.px-head__links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; }
.px-head__links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.px-period { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: #1c1c1c; }
.px-period button { padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.px-period button[aria-pressed="true"] { background: var(--lime-soft); color: var(--lime); }
.px-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.px-pill { cursor: pointer; font: inherit; font-size: 11px; opacity: .55; transition: opacity .15s ease; }
.px-pill b { margin-left: 3px; font-weight: 900; }
.px-pill:hover, .px-pill[aria-pressed="true"] { opacity: 1; }
.px-pill[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--genre-color), 0 0 14px color-mix(in srgb, var(--genre-color) 35%, transparent); }

.px-lead { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 18px; padding: 18px; border: 1px solid color-mix(in srgb, var(--genre-color) 45%, transparent); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--genre-color) 12%, transparent), transparent 60%), var(--surface); }
.px-lead__rank { display: grid; align-content: center; justify-items: start; padding-right: 18px; border-right: 1px solid var(--line); }
.px-lead__rank small { color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.px-lead__rank b { color: var(--lime); font-size: 44px; font-weight: 900; line-height: 1.05; }
.px-lead__rank span { color: var(--muted); font-size: 13px; }
.px-lead__text p { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.px-lead__text p b { font-weight: 900; }
.px-verdict { color: var(--text) !important; font-size: 22px !important; font-weight: 800; letter-spacing: -.01em; }
.px-verdict em { font-style: normal; }
.px-callout { margin-top: 10px !important; padding: 10px 12px; border-left: 3px solid var(--lime); border-radius: 0 10px 10px 0; background: var(--lime-soft); color: #e7f7bd !important; }

.px-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.px-card { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.px-grid > .px-card { min-width: 0; }
.px-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.px-card__icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--lime-border); border-radius: 10px; background: var(--lime-soft); color: var(--lime); }
.px-card__icon .icon { width: 16px; height: 16px; }
.px-card header small { display: block; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.px-card h3 { margin: 0; font-size: 16px; }
.px-card h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.px-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.px-chart { min-height: 240px; }

.px-days { display: grid; gap: 8px; }
.px-day { display: grid; grid-template-columns: 96px repeat(3, minmax(0,1fr)); align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #1c1c1c; }
.px-day:first-child { border-color: #474747; background: #242424; }
.px-day > span { display: grid; min-width: 0; }
.px-day b { font-size: 20px; font-weight: 900; }
.px-day small { color: var(--muted-2); font-size: 10.5px; }
.px-day__when b { font-size: 15px; }

.px-belt { display: grid; grid-template-columns: 96px minmax(0,1fr) 96px; align-items: center; gap: 12px; }
.px-belt__box { display: grid; gap: 2px; padding: 10px 6px; border: 1px solid; border-radius: 12px; text-align: center; }
.px-belt__box b { font-size: 19px; font-weight: 900; }
.px-belt__box small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.px-belt__box.is-out { border-color: rgba(255,95,100,.45); background: rgba(255,95,100,.1); color: var(--red); }
.px-belt__box.is-in { border-color: var(--lime-border); background: var(--lime-soft); color: var(--lime); }
.px-belt__strip { padding: 8px 10px 6px; border: 1px dashed color-mix(in srgb, var(--genre-color) 55%, transparent); border-radius: 12px; }
.px-belt__strip svg { display: block; width: 100%; height: 70px; }
.px-belt__strip rect { fill: var(--lime); opacity: .4; }
.px-belt__strip rect.is-leaving { fill: var(--red); opacity: 1; }
.px-belt__strip rect.is-newest { fill: var(--lime); opacity: 1; }
.px-belt__strip > span { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; color: var(--muted-2); font-size: 9.5px; font-weight: 700; text-transform: uppercase; }

.px-tiles { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.px-tiles > div { display: grid; align-content: start; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.px-tiles small { color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.px-tiles b { font-size: 22px; font-weight: 900; }
.px-tiles span { color: var(--muted); font-size: 11.5px; }

.px-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.px-track { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 6px; padding: 6px 10px 6px 6px; border-radius: 10px; background: #1c1c1c; color: var(--text); }
.px-track:hover { background: #282828; }
.px-track img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; }
.px-track span { display: grid; min-width: 0; }
.px-track strong, .px-track small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-track strong { font-size: 12.5px; }
.px-track small { color: var(--muted-2); font-size: 11px; }
.px-track b { font-size: 14px; font-weight: 900; }

.px-table { display: grid; gap: 6px; }
.px-row { display: grid; grid-template-columns: 22px 40px minmax(0,2fr) repeat(4, minmax(0,1fr)); align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: #1c1c1c; color: var(--text); }
.px-row:hover { background: #282828; }
.px-row__n { color: var(--muted-2); font-size: 12px; font-weight: 800; text-align: center; }
.px-row img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; }
.px-row__name { position: relative; display: grid; min-width: 0; padding-bottom: 6px; }
.px-row__name strong, .px-row__name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-row__name strong { font-size: 12.5px; }
.px-row__name small { color: var(--muted-2); font-size: 11px; }
.px-row__name i { position: absolute; bottom: 0; left: 0; width: var(--w); height: 3px; border-radius: 2px; background: var(--lime); opacity: .7; }
.px-row__num { display: grid; min-width: 0; }
.px-row__num b { font-size: 13px; font-weight: 900; }
.px-row__num small { color: var(--muted-2); font-size: 10px; }

.px-faq details { border-bottom: 1px solid var(--line); }
.px-faq summary { padding: 11px 2px; cursor: pointer; font-weight: 700; }
.px-faq p { margin: 0 2px 12px; color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
  .px-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .px-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .px-promo { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 18px 16px; }
  .px-promo__art svg { width: 100%; max-width: 280px; }
  .px-promo__button { justify-self: stretch; }
  .px-dialog { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .px-search { padding: 24px 16px; }
  .px-body { padding: 16px 12px 28px; }
  .px-head { grid-template-columns: 56px minmax(0,1fr); gap: 12px; }
  .px-head img { width: 56px; height: 56px; }
  .px-head h2 { font-size: 21px; }
  .px-period { grid-column: 1 / -1; justify-self: start; }
  .px-lead { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .px-lead__rank { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .px-verdict { font-size: 19px !important; }
  .px-day { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .px-day__when { grid-column: 1 / -1; display: flex !important; gap: 8px; align-items: baseline; }
  .px-day b { font-size: 17px; }
  .px-belt { grid-template-columns: 1fr 1fr; }
  .px-belt__strip { grid-column: 1 / -1; grid-row: 1; }
  .px-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .px-two { grid-template-columns: minmax(0,1fr); }
  .px-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .px-row__n { display: none; }
  .px-row img { width: 34px; height: 34px; }
  .px-row__num:nth-child(n+5) { display: none; }
}
/* 6.6.61 Tracks "Released": custom date range at the bottom of the picker. */
.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; padding: 10px 6px 4px; border-top: 1px solid #333; }
.date-range__title { grid-column: 1 / -1; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.date-range.is-selected .date-range__title { color: var(--lime); }
.date-range label { display: grid; gap: 3px; min-width: 0; }
.date-range small { color: var(--muted); font-size: 10.5px; }
.date-range input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid #424242; border-radius: 9px; background: #1c1c1c; color: var(--text); font: inherit; font-size: 12.5px; color-scheme: dark; }
.date-range input:focus { border-color: var(--lime-border); outline: 0; }
.date-range button { grid-column: 1 / -1; height: 36px; border: 0; border-radius: 9px; background: var(--lime); color: #111; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; }
/* 6.6.65 QA fixes. Tablets (471-900px): the top bar's last column fits the period picker (it ran into the right
   edge; the 76px column only applied on phones). */
@media (min-width: 471px) and (max-width: 900px) {
  .topbar { grid-template-columns: 42px minmax(0,1fr) minmax(76px,auto); }
}
/* The Trending panel beside a chart list only sticks when the screen is tall enough to show all of it
   (at 1280x800 its last row stayed hidden while it stuck). */
@media (max-height: 879px) {
  .trending-panel { position: static; }
}
/* About: no single word left alone on the hero heading's second line. */
.info-hero h1 { text-wrap: balance; }
/* Search help: the arrow-key and Enter hint only where there's a keyboard. */
@media (hover: none) { .kbd-hint { display: none; } }
/* 6.6.66 Rank numbers fit their column whatever the digit count. On phones and tablets the column is 30px
   (tracks) or 36px (artists, labels): "101" ran into the artwork and "1126" lost its last digit. */
html body .chart-table-panel:not(.is-grid-view) .rank-number--d4 { font-size: 17px; letter-spacing: -.02em; }
html body .chart-table-panel:not(.is-grid-view) .rank-number--d5 { font-size: 14px; letter-spacing: -.03em; }
@media (max-width: 820px) {
  html body .chart-table-panel:not(.is-grid-view) .rank-number--d3 { font-size: 16px; letter-spacing: -.02em; }
  html body .chart-table-panel:not(.is-grid-view) .rank-number--d4 { font-size: 12.5px; letter-spacing: -.03em; }
  html body .chart-table-panel:not(.is-grid-view) .rank-number--d5 { font-size: 10.5px; letter-spacing: -.03em; }
}
/* Tracks list on desktop: the title gets the room. The genre column was 220px plus a 42px indent for a pill of at
   most about 130px, which cut titles at about 16 characters. */
@media (min-width: 1121px) {
  html body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track {
    grid-template-columns: 44px 56px 62px minmax(0,1fr) 150px 100px 82px;
  }
  html body[data-page="tracks"] .chart-table-panel:not(.is-grid-view) .rank-row--track .rank-genre { padding-left: 0; }
}
/* Trending page cards in a narrow column (about 1440px wide, and phones): the track rows put the points above
   the play/buy buttons. They sat on the row's top edge with no caption; now they have room and say "points".
   The artist and label rows grow by the same amount so the three cards stay level. */
@container (max-width: 420px) {
  html body[data-page="trending"] .trend-top-card .leader-list .leader-row { min-height: 74px; }
  html body .trend-leader-row.leader-row--actions .leader-points { display: flex; align-items: baseline; gap: 3px; padding-top: 4px; }
  html body .trend-leader-row.leader-row--actions .leader-points small { display: inline; }
  html body .trend-leader-row.leader-row--actions > .mini-track-actions { bottom: 8px; }
}
/* 6.6.67 (6.6.79: tablets too) Quick filter on phones (artist and label pages). It no longer sticks to the top: with the top bar it
   covered about a fifth of the screen, and page content showed in a gap above it. The Genre and Production menus
   share the second row as proper boxes (they were 16px tall to tap); their small labels go, since "All genres"
   and "All types" say what they are. */
@media (max-width: 900px) {
  html body .artist-quick-filter {
    position: static;
    grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr) auto;
    row-gap: 8px;
  }
  html body .artist-quick-filter > .panel-icon { grid-column: 1; grid-row: 1; }
  html body .artist-quick-filter .artist-filter-search { grid-column: 2 / 4; grid-row: 1; }
  html body .artist-quick-filter > button { grid-column: 4; grid-row: 1; }
  html body .artist-quick-filter .artist-filter-select { grid-row: 2; padding: 0; border: 0; }
  html body .artist-quick-filter .artist-filter-select:nth-of-type(2) { grid-column: 1 / 3; }
  html body .artist-quick-filter .artist-filter-select:nth-of-type(3) { grid-column: 3 / 5; }
  html body .artist-quick-filter .artist-filter-select small { display: none; }
  html body .artist-quick-filter .artist-filter-select select {
    min-height: 40px;
    padding: 0 8px 0 10px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    background: #232323;
    font-size: 12px;
  }
}
/* Trending page track rows (6.6.66): the points sit right-aligned above the play/buy buttons. */
@container (max-width: 420px) {
  html body .trend-leader-row.leader-row--actions .leader-points { justify-content: flex-end; }
}
/* 6.6.68 "Show 25 more" under the Productions and Live rankings lists. */
.section-more--panel { width: auto; margin: 10px 12px 12px; }
/* Quick filter on phones (6.6.67): the Genre and Production menus the same width. */
@media (max-width: 900px) {
  html body .artist-quick-filter { grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr) 34px; }
}
/* 6.6.71 Explain my points: the search step in a dialog sized to it; "+N more tracks" under the in/out lists; the
   track table's note hidden on phones, where its column isn't shown. */
.px-dialog.is-searching { width: min(720px, calc(100vw - 32px)); height: min(680px, 92vh); }
.px-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; padding: 8px 10px; border: 1px dashed #333; border-radius: 10px; color: var(--muted); font-size: 12px; }
.px-more b { font-size: 14px; font-weight: 900; }
@media (max-width: 760px) {
  .px-dialog.is-searching { width: 100vw; height: 100dvh; }
  .px-note--wide { display: none; }
}
/* 6.6.73 (6.6.74: only where text was smaller; 6.6.78: tablets too, up to 900px) Minimum text sizes on phones. The redesign used 6-8px for tags, captions and artist names, which
   phones can't really show. Desktop is unchanged. !important because these are minimums over many page-specific
   rules. */
@media (max-width: 900px) {
  /* Names under a title: artists on track rows, cards and boards. */
  html body .artist-list,
  html body .artist-list > span,
  html body .artist-list > i,
  html body .leader-copy > span { font-size: 10.5px !important; }
  /* Titles that were smaller than the artist line would now be. */
  html body .leader-copy > strong { font-size: 13px !important; }
  html body .trend-list strong { font-size: 12px !important; }
  /* Pills and tags: genre, HYPE, ORIGINAL / REMIX. */
  html body .genre-pill:not(.px-pill),
  html body .genre-pill:not(.px-pill) > span,
  html body .hype-pill,
  html body .production-type { font-size: 9px !important; }
  /* "points" and other captions under a number. */
  html body .rank-points small,
  html body .leader-points small,
  html body .production-points small,
  html body .live-points small,
  html body .release-points em,
  html body .label-summary-points em,
  html body .stat-copy em,
  html body .leader-row .movement--nc b,
  html body:is([data-page="artists"],[data-page="labels"]) .rank-row .movement--nc b,
  html body .production-rank .movement--nc b { font-size: 9px !important; }
  html body .stat-rank-box small { font-size: 8.5px !important; }
  html body .stat-copy small { font-size: 9.5px !important; }
  /* Small headings and labels. */
  html body .panel-head small,
  html body .artist-panel-head small,
  html body .chart-table-head small,
  html body .trend-hub-widget-head small,
  html body .trend-hub-widget-head > b,
  html body .detail-rank-badge small,
  html body .artist-filter-search small,
  html body .mover-type,
  html body .entity-chip small,
  html body .release-days,
  html body .trend-hub-genre em small { font-size: 9px !important; }
  /* Short descriptions. */
  html body .trend-top-note,
  html body .trend-list em,
  html body .mover-card small,
  html body .label-summary-card > small { font-size: 10px !important; }
  /* The preview player's artist line (8px). */
  html body .songstats-nav-cta small { font-size: 9px !important; }
  html body #top10trackchart-artistname-audioplayer { font-size: 11px !important; }
}
/* 6.6.75 Desktop YEAR picker beside the period switcher (replaces the year strip). Styled like the switcher; its
   menu opens from the right edge so it never runs off the screen. */
.period-area .filter-picker--year .filter-picker__trigger {
  width: auto;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  gap: 8px;
  padding: 0 10px 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101010;
}
.period-area .filter-picker--year .filter-picker__trigger > span { display: flex; align-items: baseline; gap: 7px; }
.period-area .filter-picker--year .filter-picker__trigger > .icon:first-child { width: 15px; }
.period-area .filter-picker--year .filter-picker__trigger b { color: var(--lime); font-size: 12px; }
.period-area .filter-picker--year .filter-picker__menu {
  left: auto;
  right: 0;
  width: 170px;
  max-height: min(470px, calc(100vh - 110px));
}
/* The period controls keep their size; the chart button narrows instead (at 1024px the YEAR picker was squeezed
   to "YEAR 20" and its menu ran off the screen). */
.topbar > .period-area { flex: 0 0 auto; }
/* 6.6.78 The open preview player no longer covers the end of the page (the list's page buttons on desktop). */
html body.player-open .page-content { padding-bottom: 150px; }
/* The YEAR menu in two columns, so every year shows without scrolling (2014-2011 were hidden below the fold). */
.period-area .filter-picker--year .filter-picker__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px;
  width: 214px;
}
/* 6.6.79 QA follow-ups. Block view of Productions and Live rankings on tablets (701-820px): two cards a row, not
   one 700px card each (a one-per-row rule for that range overrode the two-per-row rule, which stopped at 700px). */
@media (min-width: 701px) and (max-width: 820px) {
  html body:is([data-page="artist"],[data-page="label"]) .artist-activity-grid .collection-body--grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
}
/* "Show 25 more" as a full-width bar like "Show 6 more" (a button with width:auto shrank to its text). */
html body .section-more--panel { width: calc(100% - 24px); }
/* Hype lines in the history charts show as dashes (square line ends closed the gaps). */
.highcharts-graph[stroke-dasharray]:not([stroke-dasharray="none"]) { stroke-linecap: butt; }
/* Label pages: the live list's NC and move figures the size artist pages use (they were 8-9px). */
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement { font-size: 13px; gap: 2px; }
body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement .icon { width: 12px; height: 12px; }
@media (max-width: 1180px) {
  body[data-page="label"] .artist-activity-grid .live-rankings-panel .collection-body--list .live-move-box .movement { font-size: 12px; }
}
/* Label logos in the hero are never cropped ("DEFECTE" at 1280px and on tablets). */
.detail-hero--label .detail-image-wrap > img { object-fit: contain; }
/* 6.6.81 Polish from the second QA pass. */
/* Trending has no period button: on phones and tablets the chart button takes its place. */
@media (max-width: 900px) {
  html body[data-page="trending"] .topbar .top-genre { grid-column: 2 / -1; width: auto; max-width: none; }
}
/* Trending's heading: no word left alone on the last line. */
body[data-page="trending"] .trending-page-head h2 { text-wrap: balance; }
/* Top 10 boards stacked full width (901-1350px): readable, uncut genre pills (were 6px, cut at 92px). */
@media (min-width: 901px) and (max-width: 1350px) {
  html body .leader-grid--overview .genre-pill { max-width: none; font-size: 8px; }
}
/* "See trending" on Top 10: a bigger target to tap (was 88x20). */
.section-heading > a { min-height: 32px; padding: 0 8px; margin-right: -8px; border-radius: 8px; }
/* 404 page: four link cards two by two on tablets (they were 3 + 1), and the heading and text keep clear of the
   outlined "404". */
@media (min-width: 701px) and (max-width: 1100px) {
  .notfound-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 701px) {
  .notfound-hero h1, .notfound-hero > p { max-width: min(620px, calc(100% - clamp(205px, 29vw, 375px))); }
}
@media (max-width: 700px) {
  .notfound-code { font-size: 72px; opacity: .7; }
  .notfound-hero h1 { padding-right: 96px; }
}
/* Ranking boxes on artist and label pages: a long chart name wraps onto a second line instead of being cut
   ("DJ TOOLS / ACAPE..."). */
html body .detail-stat-grid .stat-copy > small {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Explain my points: 14px between stacked cards, as elsewhere (cards in a grid had grid gap + card margin). */
.px-grid { margin-top: 14px; }
.px-grid > .px-card { margin-top: 0; }
/* Preview player on phones and tablets: the title stays bigger than the artist line (both were 11px). */
@media (max-width: 900px) {
  html body .preview-player #top10trackchart-title-audioplayer { font-size: 13px !important; }
}
/* 6.6.92 Artist and label pages for regular users (owner, after user feedback). */
/* Live Beatport rankings grouped by chart: a heading per chart in readable type and the genre's colour. */
.live-group-head {
  display: flex; align-items: center; gap: 8px; grid-column: 1 / -1;
  margin-top: 6px; padding: 10px 12px 6px; border-top: 1px solid var(--line-soft);
  color: var(--text); font-size: 12px; font-weight: 850; letter-spacing: .04em;
}
.live-group-head[hidden] { display: none; }
.live-group-head:first-child { margin-top: 0; border-top: 0; }
.live-group-head::before { content: ''; flex: 0 0 4px; height: 15px; border-radius: 2px; background: var(--genre-color); }
.live-group-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.live-group-head small { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
/* Chart names readable wherever a rank appears (desktop showed 6-8.5px). */
@media (min-width: 901px) {
  html body .genre-pill--compact,
  html body .genre-pill--compact > span { font-size: 10px; }
  html body .production-type { font-size: 9px; }
  html body .production-tags .chart-pos,
  html body .production-tags .chart-pos > span { font-size: 11px; }
  html body .credit-ranks .chart-pos { font-size: 10px; }
  html body:is([data-page="artist"],[data-page="label"]) .detail-stat-grid .stat-copy > small { font-size: 11px; }
}
@media (max-width: 900px) {
  html body .production-tags .chart-pos,
  html body .production-tags .chart-pos > span { font-size: 10px !important; }
  html body .detail-stat-grid .stat-copy > small { font-size: 10.5px !important; }
}
/* Latest singles now follows the productions and live lists. */
.artist-activity-grid + .artist-singles-section { margin-top: 26px; }
/* 6.6.105 Artist and label pages, more feedback from regular users. */
/* Phones and tablets: Live Beatport rankings before Top productions / catalogue (what people come to check). */
@media (max-width: 900px) {
  html body .artist-activity-grid > .live-rankings-panel { order: -1; }
}
/* Top labels / Top artists now straight after the history graph. */
.history-panel + .artist-labels-section { margin-top: 26px; }
.artist-labels-section + .artist-quick-filter { margin-top: 22px; }
/* The Hype charts switch in the quick filter bar. */
.artist-quick-filter .artist-filter-hype { display: flex; grid-auto-flow: column; align-items: center; gap: 8px; align-self: end; min-height: 38px; padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; user-select: none; }
.artist-filter-hype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.artist-filter-hype .hype-switch { position: relative; flex: 0 0 34px; width: 34px; height: 20px; border-radius: 999px; background: #3a3a3a; transition: background .2s ease; }
.artist-filter-hype .hype-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d8d8d8; transition: transform .2s ease; }
.artist-filter-hype input:checked + .hype-switch { background: #ff718f; }
.artist-filter-hype input:checked + .hype-switch::after { transform: translateX(14px); background: #fff; }
.artist-filter-hype input:focus-visible + .hype-switch { outline: 2px solid var(--lime); outline-offset: 2px; }
.artist-filter-hype input:checked ~ span:last-child { color: var(--text); }
/* Hype off: Hype chart pills on productions go too (rows and ranking boxes are hidden by site.js). */
body.hide-hype .chart-pos[data-hype] { display: none !important; }
/* The Hype switch's place in the filter bar: its own column on desktop and tablets, its own row on phones. */
@media (min-width: 901px) {
  html body .artist-quick-filter { grid-template-columns: 38px minmax(240px,1fr) minmax(140px,.28fr) minmax(140px,.28fr) auto auto; }
  html body .artist-quick-filter .artist-filter-hype { align-self: center; padding: 0 6px 0 10px; border-left: 1px solid #343434; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  html body .artist-quick-filter { grid-template-columns: 38px minmax(180px,1fr) minmax(110px,.25fr) minmax(110px,.25fr) auto auto; }
}
@media (max-width: 900px) {
  html body .artist-quick-filter .artist-filter-hype { grid-column: 1 / -1; grid-row: 3; justify-self: start; min-height: 30px; }
}
/* The line under Live rankings when Hype charts are hidden. */
.hype-hidden-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.hype-hidden-note[hidden] { display: none; }
.hype-hidden-note .icon { width: 14px; height: 14px; color: #ff718f; }
.hype-hidden-note button { margin-left: auto; padding: 5px 10px; border: 1px solid rgba(255,113,143,.45); border-radius: 999px; background: rgba(255,113,143,.1); color: #ff9bb1; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.hype-hidden-note button:hover { background: rgba(255,113,143,.2); }
/* Live rank numbers: fixed sizes, no fit-to-box script (6.6.105). The boxes change width with their text, so measuring
   gave a different size depending on the state it started from (a jump when the Hype switch refitted, a flicker with
   a resize observer). Positions only run 1-100: 1-2 digits one size, "100" smaller. */
html body .live-rank-box > .live-rank-number { font-size: 23px !important; line-height: 1; white-space: nowrap; }
html body .live-rank-box--wide > .live-rank-number,
html body .live-rank-box--xwide > .live-rank-number { font-size: 17px !important; }
@media (max-width: 900px) {
  html body .live-rank-box > .live-rank-number { font-size: 19px !important; }
  html body .live-rank-box--wide > .live-rank-number,
  html body .live-rank-box--xwide > .live-rank-number { font-size: 15px !important; }
}
/* 6.6.107 Home Top 10 boards: genre pills 8px on desktop, the same as the full chart lists (they were 10px above
   1350px wide since 6.6.92 made compact pills readable on artist pages, and looked heavy in the narrow rows). */
@media (min-width: 901px) {
  html body .leader-grid--overview .genre-pill--compact,
  html body .leader-grid--overview .genre-pill--compact > span { font-size: 8px; }
}