/*
Theme Name: HOT100 Zimbabwe
Theme URI: https://zimbabwehot100.co.zw
Author: 16Bars Media Corporation Pvt Ltd
Version: 4.4.0
License: Proprietary
Text Domain: hot100zw
*/

/* Google Fonts are enqueued once in functions.php for better mobile performance. */

/* ── RESET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: 'Space Grotesk', sans-serif;
  background: #FFFFFF; color: #111111;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── DESIGN TOKENS ───────────────────────────────── */
:root {
  --bg:   #FFFFFF;
  --bg2:  #F7F7F5;
  --ink:  #111111;
  --ink2: #666666;
  --bd:   #E8E8E8;
  --gold: #F2C200;
  --f-display: 'Archivo Black', sans-serif;
  --f-ui:      'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-num:     'Bebas Neue', sans-serif;
}

/* Legacy aliases (template backward-compat) */
:root {
  --k: var(--ink); --w: var(--bg); --of: var(--bg2);
  --m: var(--ink2); --g: #111111; --bd2: var(--bd);
}

/* Utility */
.bb  { font-family: var(--f-num); }
.sr  { font-family: var(--f-display); font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }

/* Movement badges */
.up  { color: var(--ink);  font-weight: 700; font-size: 11px; font-family: var(--f-ui); }
.dn  { color: var(--ink2); font-weight: 700; font-size: 11px; font-family: var(--f-ui); }
.eq  { color: var(--bd); }
.nw  {
  font-family: var(--f-ui); font-size: 8px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); padding: 2px 5px;
  white-space: nowrap;
}

/* ── TOPBAR ──────────────────────────────────────── */
.topbar {
  background: var(--ink);
  height: 32px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-l {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.6); white-space: nowrap;
}
.topbar-flag { font-size: 14px; line-height: 1; }
.topbar-sep  { opacity: .25; }
.topbar-r { display: flex; gap: 22px; }
.topbar-r a {
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5); transition: color .15s;
}
.topbar-r a:hover { color: #fff; }

/* ── MASTHEAD ─────────────────────────────────────── */
.mast {
  height: 106px;
  padding: 0 34px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}

/* Logo */
.logo { text-decoration: none; display: flex; align-items: center; }
.logo-lockup { display: flex; flex-direction: column; }
.logo-wordmark {
  font-family: var(--f-display);
  font-size: 54px; font-weight: 900;
  letter-spacing: -.07em; line-height: .88;
  text-transform: uppercase; color: var(--ink);
}
.logo-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.logo-bars { display: flex; flex-direction: column; gap: 3px; }
.logo-bars i { display: block; width: 24px; height: 2px; background: var(--ink); }
.logo-zimbabwe {
  font-family: var(--f-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .48em; text-transform: uppercase; color: var(--ink);
}

/* Nav */
nav.mnav { display: flex; }
.mnav ul { display: flex; list-style: none; }
.mnav ul li a {
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink2); padding: 0 16px;
  height: 106px; display: flex; align-items: center;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s;
}
.mnav ul li a:hover,
.mnav ul li.current-menu-item a { color: var(--ink); border-bottom-color: var(--ink); }

/* Right controls */
.mast-r { display: flex; align-items: center; gap: 18px; margin-left: auto; padding-left: 18px; border-left: 1px solid var(--bd); flex-shrink: 0; }

/* Search button — bordered rectangle */
.mast-search-wrap { position: relative; }
.mast-search-btn {
  height: 44px; border: 1.5px solid var(--ink); background: var(--bg);
  padding: 0 22px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 6px; cursor: pointer; transition: background .15s;
  color: var(--ink);
}
.mast-search-btn:hover { background: var(--bg2); }
.mast-search-ic {
  width: 16px; height: 16px;
  border: 2.5px solid var(--ink); border-radius: 50%;
  position: relative; flex-shrink: 0; display: block;
}
.mast-search-ic::after {
  content: ''; width: 8px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  position: absolute; right: -7px; bottom: -3px;
  transform: rotate(45deg);
}
.search-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg); border: 1.5px solid var(--ink);
  border-radius: 6px; padding: 14px; z-index: 300; min-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.search-dropdown.open { display: block; animation: fadeDown .18s ease; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.search-dropdown input[type="search"] {
  width: 100%; border: 1.5px solid var(--bd);
  padding: 9px 14px; font-family: var(--f-ui); font-size: 13px;
  outline: none; background: var(--bg2); border-radius: 4px;
}
.search-dropdown input:focus { border-color: var(--ink); background: var(--bg); }

/* LIVE pill — gold, authoritative */
.mast-live-pill {
  height: 44px; padding: 0 24px;
  background: var(--gold); color: #000;
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 6px;
  font-family: var(--f-ui); font-size: 14px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(242,194,0,.22);
  cursor: default; user-select: none;
  flex-shrink: 0;
}
.mast-live-dot {
  width: 9px; height: 9px; background: #000;
  border-radius: 50%; flex-shrink: 0;
  animation: live-blink 1.4s ease-in-out infinite;
}
@keyframes live-blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

/* Week label */
.mast-week {
  font-family: var(--f-ui); font-size: 16px; font-weight: 800;
  letter-spacing: -.02em; white-space: nowrap; color: var(--ink);
}

/* Mobile hamburger */
.hmb { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hmb span { display: block; height: 2px; width: 22px; background: var(--ink); }

/* ── SPONSOR STRIP ────────────────────────────────── */
.spon {
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  padding: 0 34px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.spon-lbl {
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink2); white-space: nowrap; flex-shrink: 0;
}
.spon-divider { width: 1px; height: 22px; background: var(--bd); flex-shrink: 0; }
.spon-items { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spon-sl {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .03em; padding: 7px 18px;
  border: 1px solid var(--bd); color: var(--ink2);
  transition: all .15s; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.spon-sl.spon-active { border-color: var(--ink); color: var(--ink); }
.spon-sl.spon-active img { height: 22px; width: auto; filter: grayscale(1); }
.spon-sl.spon-vacant { border-style: dashed; color: var(--ink2); font-size: 10px; }
.spon-sl.spon-vacant:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.spon-plus { font-size: 14px; font-weight: 400; line-height: 1; }

/* ── GENRE STRIP ──────────────────────────────────── */
.gs { border-bottom: 1px solid var(--bd); overflow-x: auto; background: var(--bg); }
.gsi { display: flex; padding: 0 34px; white-space: nowrap; }
.gt {
  font-family: var(--f-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border: none; background: none; cursor: pointer;
  padding: 12px 14px; color: var(--ink2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .15s;
}
.gt:hover { color: var(--ink); }
.gt.on   { color: var(--ink); border-bottom-color: var(--ink); }

/* ── ARCHIVE BAR ──────────────────────────────────── */
.arch-bar {
  background: var(--bg2); border-bottom: 1px solid var(--bd);
  padding: 8px 34px; display: flex; align-items: center; gap: 8px; overflow-x: auto;
}
.arch-label {
  font-family: var(--f-ui); font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); white-space: nowrap;
}
.arch-wk {
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border: 1px solid var(--bd);
  cursor: pointer; color: var(--ink2); white-space: nowrap; transition: all .15s;
}
.arch-wk.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.arch-wk:hover { border-color: var(--ink); color: var(--ink); }

/* ── CAROUSEL ─────────────────────────────────────── */
.car { position: relative; overflow: hidden; background: var(--ink); height: 440px; }
.car-sl { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); height: 440px; }
.car-slide { min-width: 100%; position: relative; overflow: hidden; }
.car-slide img { width: 100%; height: 440px; object-fit: cover; opacity: .35; display: block; }
.car-slide-video { width: 100%; height: 440px; position: relative; background: #000; overflow: hidden; }
.car-slide-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; pointer-events: none; }
.car-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 56px; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.12) 65%, transparent 100%); pointer-events: none; }
.car-badge { display: inline-block; background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px; align-self: flex-start; }
.car-title { font-family: var(--f-display); font-weight: 900; font-size: 56px; letter-spacing: -.05em; line-height: .92; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.car-sub { font-family: var(--f-ui); font-size: 15px; color: rgba(255,255,255,.5); max-width: 560px; }
.cdots { position: absolute; bottom: 20px; right: 24px; display: flex; gap: 5px; z-index: 5; }
.cd { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: all .25s; }
.cd.on { background: var(--bg); width: 18px; border-radius: 3px; }
.cpbtn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); width: 44px; height: 44px; cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: all .2s; z-index: 5; }
.cpbtn:hover { background: rgba(255,255,255,.15); color: #fff; }
.cpbtn.prev { left: 20px; }
.cpbtn.next { right: 20px; }

/* ── LAYOUT: MAIN + SIDEBAR ───────────────────────── */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; width: 100%; }
.mc { border-right: 1px solid var(--bd); min-width: 0; overflow: hidden; }

/* ── HERO: #1 ROW ─────────────────────────────────── */
.hero { display: grid; grid-template-columns: 72px 156px 1fr; border-bottom: 1px solid var(--bd); background: var(--bg); }
.hrk { background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; min-width: 72px; }
.hrk .num { font-family: var(--f-num); font-size: 84px; line-height: 1; color: var(--bg); letter-spacing: .02em; }
.hrk .lbl { font-family: var(--f-ui); font-size: 7px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.hi { width: 156px; height: 156px; object-fit: cover; display: block; }
.hb { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.htags { display: flex; gap: 5px; flex-wrap: wrap; }
.ht { display: inline-block; font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--bd); color: var(--ink2); }
.hty { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.htit { font-family: var(--f-display); font-size: 36px; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; color: var(--ink); }
.hart { font-family: var(--f-ui); font-size: 14px; font-weight: 500; color: var(--ink2); }
.hst { display: flex; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
.hst-item .v { font-family: var(--f-num); font-size: 30px; line-height: 1; color: var(--ink); }
.hst-item .l { font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }

/* ── COLUMN HEADER ────────────────────────────────── */
.ch {
  display: grid;
  grid-template-columns: 60px 72px 44px 1fr 52px 44px 44px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bd); border-top: 1px solid var(--bd);
  position: sticky; top: 106px; z-index: 100;
}
.ch div { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); padding: 8px 4px; text-align: center; }
.ch .ch-t { text-align: left; padding-left: 14px; }

/* ── CHART ROW ────────────────────────────────────── */
.chart-row {
  display: grid;
  grid-template-columns: 60px 72px 44px 1fr 52px 44px 44px;
  align-items: stretch;
  border-bottom: 1px solid var(--bd);
  background: var(--bg); cursor: pointer; transition: background .1s;
}
.chart-row:hover { background: var(--bg2); }
.chart-row.new-entry { border-left: 2px solid var(--ink); }
.chart-row.chart-hidden { display: none; }
.cr-pos { font-family: var(--f-num); font-size: 32px; letter-spacing: .02em; color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.cr-img { width: 72px; height: 72px; object-fit: cover; display: block; }
.cr-ph  { width: 72px; height: 72px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 18px; color: var(--bd); }
.cr-mv  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.cr-info { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; overflow: hidden; }
.cr-info h3 { font-family: var(--f-ui); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-info .artist { font-family: var(--f-ui); font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genre-pill, .g-dd,.g-hh,.g-gp,.g-af,.g-ug,.g-ap,.g-tr,.g-am,.g-su {
  display: inline-block; font-family: var(--f-ui); font-size: 8px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; background: var(--bg2); color: var(--ink2); border: 1px solid var(--bd);
}
.ten-badge  { display: inline-block; font-family: var(--f-ui); font-size: 7px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ink); color: var(--ink); padding: 1px 5px; margin-left: 4px; }
.cert-badge { display: inline-block; font-family: var(--f-ui); font-size: 7px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--bd); color: var(--ink2); padding: 1px 5px; margin-left: 4px; }
.cr-stat    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cr-stat .sv { font-family: var(--f-num); font-size: 20px; line-height: 1; color: var(--ink); }
.cr-stat.pk .sv { color: var(--ink2); }
.cr-stat .sl { font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.cr-stat.sc { display: none; } /* Score in detail panel */
.cr-spt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.spt-btn { background: var(--ink); border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; border-radius: 50%; }
.spt-btn:hover { background: #333; }
.spt-btn svg { width: 13px; height: 13px; fill: #fff; }
.row-detail { display: none; grid-column: 1/-1; background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 10px 20px; font-family: var(--f-ui); font-size: 12px; color: var(--ink2); }
.row-detail.open { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.rd-pill { text-align: center; }
.rp-n { font-family: var(--f-num); font-size: 22px; color: var(--ink); }
.rp-l { font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-top: 2px; }
.rd-bar { height: 2px; background: var(--bd); margin-top: 5px; }
.rd-fill { height: 2px; background: var(--ink); }

/* Demo banner */
.demo-banner { background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 9px 20px; display: flex; align-items: center; gap: 10px; }
.demo-banner strong { font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.demo-banner span { font-family: var(--f-body); font-size: 12px; color: var(--ink2); }

/* Sentinel */
#scroll-sentinel { height: 1px; }

/* ── SECTION HEADER ───────────────────────────────── */
.sec-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bd); background: var(--bg); }
.sec-hdr-t { font-family: var(--f-display); font-size: 22px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); }
.sec-hdr-m { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--bd); padding-bottom: 1px; transition: all .15s; }
.sec-hdr-m:hover { color: var(--ink); border-color: var(--ink); }

/* ── CHART FAMILY ─────────────────────────────────── */
.chart-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: var(--bd); }
.cg-card { position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.cg-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.3) grayscale(.4); display: block; transition: filter .3s; }
.cg-card:hover img { filter: brightness(.2) grayscale(.6); }
.cg-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; }
.cg-sub { font-family: var(--f-ui); font-size: 7px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.cg-tit { font-family: var(--f-display); font-size: 14px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: #fff; line-height: 1.1; }

/* ── NMF ──────────────────────────────────────────── */
.nmf-section { }
.nmf-hdr { background: var(--ink); padding: 18px 24px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.nmft { font-family: var(--f-display); font-size: 26px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--bg); }
.nmf-hdr-s { font-family: var(--f-ui); font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }
.nmf-btn { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); padding: 7px 16px; text-decoration: none; transition: all .15s; }
.nmf-btn:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.nmf-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--bd); }
.nmf-card { background: var(--bg); cursor: pointer; transition: background .1s; }
.nmf-card:hover { background: var(--bg2); }
.nmf-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.nmf-card-ph { width: 100%; aspect-ratio: 1; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 40px; color: var(--bd); }
.nmf-body { padding: 12px 14px; }
.nmf-cat  { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.nmftit   { font-family: var(--f-display); font-size: 14px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); line-height: 1.15; margin-bottom: 3px; }
.nmf-art  { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); }
.nmf-date { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); margin-top: 4px; }
.nmf-tag  { display: inline-block; border: 1px solid var(--bd); color: var(--ink2); font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; margin-top: 6px; }
.nmf-cta  { padding: 12px 24px; background: var(--bg2); border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nmf-cta p { font-family: var(--f-body); font-size: 12px; color: var(--ink2); line-height: 1.6; }
.nmf-cta .nmf-btn { color: var(--ink); border-color: var(--bd); }
.nmf-cta .nmf-btn:hover { border-color: var(--ink); }

/* ── WHAT'S HOT ───────────────────────────────────── */
.whats-hot-section { }
.wh-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 2px solid var(--ink); }
.wh-title { font-family: var(--f-display); font-size: 26px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); }
.wh-all-link { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--bd); padding-bottom: 1px; transition: all .15s; }
.wh-all-link:hover { color: var(--ink); border-color: var(--ink); }
.wh-featured { display: grid; grid-template-columns: 300px 1fr; border-bottom: 1px solid var(--bd); text-decoration: none; color: inherit; transition: background .1s; }
.wh-featured:hover { background: var(--bg2); }
.wh-feat-img { width: 300px; height: 210px; object-fit: cover; display: block; }
.wh-feat-ph  { width: 300px; height: 210px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 40px; color: var(--bd); }
.wh-feat-body { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.wh-feat-meta { display: flex; align-items: center; gap: 10px; }
.wh-feat-cat  { font-family: var(--f-ui); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--bd); padding: 2px 9px; }
.wh-feat-date { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); }
.wh-feat-title   { font-family: var(--f-display); font-size: 26px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); line-height: 1.05; }
.wh-feat-summary { font-family: var(--f-body); font-size: 13px; color: var(--ink2); line-height: 1.7; }
.wh-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bd); }
.wh-card { background: var(--bg); text-decoration: none; color: inherit; transition: background .1s; }
.wh-card:hover { background: var(--bg2); }
.wh-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.wh-card-ph  { width: 100%; aspect-ratio: 16/9; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 30px; color: var(--bd); }
.wh-card-body { padding: 12px 14px; }
.wh-card-cat   { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 5px; }
.wh-card-title { font-family: var(--f-display); font-size: 15px; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 5px; }
.wh-card-date  { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); }

/* ── SIDEBAR ──────────────────────────────────────── */
.sidebar { background: var(--bg); display: flex; flex-direction: column; }
.sb-block { border-bottom: 1px solid var(--bd); }
.sb-block-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; }
.sb-block-hdr span { font-family: var(--f-display); font-size: 12px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.sb-block-link { font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--bd); }
.sb-block-link:hover { color: var(--ink); border-color: var(--ink); }
.sb-hero { position: relative; overflow: hidden; }
.sb-hero-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.sb-hero-ph  { width: 100%; height: 160px; background: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 56px; font-weight: 900; color: #2a2a2a; }
.sb-hero-over { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%); display: flex; align-items: flex-end; gap: 8px; }
.sb-hero-pos  { font-family: var(--f-num); font-size: 48px; color: #fff; line-height: 1; flex-shrink: 0; }
.sb-hero-title { font-family: var(--f-display); font-size: 14px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-hero-art   { font-family: var(--f-ui); font-size: 11px; color: rgba(255,255,255,.6); }
.sb-prog-row { padding: 8px 16px; }
.sb-prog { height: 2px; background: var(--bd); }
.sb-pf   { height: 2px; background: var(--ink); width: 0; }
.sb-row     { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--bd); }
.sb-row:last-child { border-bottom: none; }
.sb-row-img, .sb-row-ph { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; }
.sb-row-ph  { background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 13px; color: var(--bd); }
.sb-row-info { flex: 1; min-width: 0; }
.sb-row-pos-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.sb-row-num  { font-family: var(--f-num); font-size: 16px; color: var(--ink); line-height: 1; }
.sb-badge-new { font-family: var(--f-ui); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 2px 5px; }
.sb-mvmt-up  { font-family: var(--f-ui); font-size: 9px; font-weight: 700; color: var(--ink); }
.sb-mvmt-dn  { font-family: var(--f-ui); font-size: 9px; font-weight: 700; color: var(--ink2); }
.sb-wks-badge { font-family: var(--f-ui); font-size: 9px; font-weight: 600; color: var(--ink2); border: 1px solid var(--bd); padding: 1px 5px; }
.sb-row-title { font-family: var(--f-ui); font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row-art   { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); }
.sb-artist-row  { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--bd); }
.sb-artist-row:last-child { border-bottom: none; }
.sb-artist-rank { font-family: var(--f-num); font-size: 22px; color: var(--bd); width: 20px; text-align: center; flex-shrink: 0; }
.sb-artist-img, .sb-artist-ph { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sb-artist-ph   { background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-ui); font-size: 12px; font-weight: 700; color: var(--ink2); }
.sb-artist-name  { font-family: var(--f-ui); font-size: 12px; font-weight: 700; color: var(--ink); }
.sb-artist-songs { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); }
.sb-artist-score { font-family: var(--f-num); font-size: 12px; color: var(--ink); letter-spacing: .02em; }
.sb-archive-row  { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--bd); text-decoration: none; transition: background .1s; }
.sb-archive-row:hover { background: var(--bg2); }
.sb-archive-row.current { background: var(--ink); }
.sb-arc-week { font-family: var(--f-ui); font-size: 11px; font-weight: 600; color: var(--ink); }
.sb-archive-row.current .sb-arc-week { color: var(--bg); }
.sb-arc-live { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sb-arc-all  { display: block; padding: 9px 16px; font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); text-decoration: none; transition: color .15s; }
.sb-arc-all:hover { color: var(--ink); }
.sb-sub-block { background: var(--bg2); }
.sb-sub-desc  { font-family: var(--f-body); font-size: 12px; color: var(--ink2); padding: 0 16px 8px; line-height: 1.6; }
.sb-sub-form  { padding: 0 16px 14px; }
.sb-sub-form input[type="email"] { width: 100%; border: 1px solid var(--bd); padding: 8px 10px; font-family: var(--f-ui); font-size: 12px; margin-bottom: 8px; outline: none; background: var(--bg); }
.sb-sub-form input:focus { border-color: var(--ink); }
.sb-sub-form button { width: 100%; padding: 9px; background: var(--ink); color: var(--bg); border: none; font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.sb-sub-form button:hover { background: #333; }
.sb-sub-msg  { font-family: var(--f-ui); font-size: 11px; margin-top: 7px; min-height: 14px; }
.sb-sub-msg.success { color: #16a34a; }
.sb-sub-msg.error   { color: #dc2626; }
.sb-socials  { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.sb-social-btn { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--bd); font-family: var(--f-ui); font-size: 11px; font-weight: 500; color: var(--ink); text-decoration: none; transition: all .15s; }
.sb-social-btn:hover { border-color: var(--ink); background: var(--bg2); }
.sb-social-btn.sb-soc-empty { color: var(--ink2); opacity: .5; }
.sb-social-btn svg { fill: currentColor; flex-shrink: 0; }
.sb-cert-carousel { position: relative; overflow: hidden; }
.sb-cert-track { display: flex; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.sb-cert-card  { min-width: 100%; display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--bd); }
.sb-cert-img, .sb-cert-ph { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.sb-cert-ph  { background: var(--bg2); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 22px; color: var(--bd); }
.sb-cert-lvl  { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 2px 6px; display: inline-block; margin-bottom: 5px; }
.sb-cert-title { font-family: var(--f-display); font-size: 14px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.sb-cert-art   { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); margin-top: 2px; }
.sb-cert-date  { font-family: var(--f-ui); font-size: 9px; color: var(--ink2); margin-top: 3px; }
.sb-cert-controls { display: flex; padding: 6px 16px; gap: 4px; border-bottom: 1px solid var(--bd); }
.sb-cert-prev, .sb-cert-next { background: none; border: 1px solid var(--bd); color: var(--ink2); width: 28px; height: 28px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.sb-cert-prev:hover, .sb-cert-next:hover { border-color: var(--ink); color: var(--ink); }
.sb-footnote { padding: 14px 16px; font-family: var(--f-body); font-size: 9px; color: var(--ink2); line-height: 1.7; border-top: 1px solid var(--bd); background: var(--bg2); margin-top: auto; }

/* ── SPONSOR LOGOS FOOTER BAR ─────────────────────── */
.spon-logos-bar { background: var(--bg2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.spon-logos-inner { max-width: 1200px; margin: 0 auto; padding: 22px 34px; }
.spon-logos-lbl { font-family: var(--f-ui); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-bottom: 14px; }
.spon-logos-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spon-logo-chip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 1px solid var(--bd); background: var(--bg); min-height: 58px; transition: border-color .2s; font-family: var(--f-ui); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.spon-logo-chip.active { border-color: var(--ink); }
.spon-logo-chip.active:hover { background: var(--bg2); }
.spon-logo-chip.vacant { border-style: dashed; opacity: .5; font-size: 10px; font-weight: 600; color: var(--ink2); }
.spon-logo-chip.vacant:hover { opacity: 1; border-style: solid; border-color: var(--ink); color: var(--ink); text-decoration: none; }
.spon-logo-chip img { height: 28px; width: auto; filter: grayscale(1); }
.vacant-plus { font-size: 16px; font-weight: 400; }

/* ── FOOTER ───────────────────────────────────────── */
footer { background: var(--ink); padding: 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 44px 34px 36px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 36px; }
.f-logo-link { text-decoration: none; display: inline-block; margin-bottom: 14px; }
.f-logo-lockup { display: flex; flex-direction: column; }
.f-logo-wordmark { font-family: var(--f-display); font-size: 38px; font-weight: 900; letter-spacing: -.07em; line-height: .88; text-transform: uppercase; color: #fff; }
.f-logo-sub { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.f-logo-bars { display: flex; flex-direction: column; gap: 2.5px; }
.f-logo-bars i { display: block; height: 1.5px; background: #2a2a2a; width: 14px; }
.f-logo-zw { font-family: var(--f-ui); font-size: 7px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #555; }
.f-tagline { font-family: var(--f-body); font-size: 12px; color: #666; line-height: 1.7; max-width: 240px; }
.f-socials { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.f-soc-btn { width: 30px; height: 30px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; transition: background .15s; color: #666; }
.f-soc-btn:hover { background: #2a2a2a; color: #fff; }
.f-soc-btn svg { fill: currentColor; width: 14px; height: 14px; }
.f-col h4 { font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; }
.f-col a  { display: block; font-family: var(--f-ui); font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 8px; text-decoration: none; transition: color .15s; line-height: 1.3; }
.f-col a:hover { color: #fff; }
.f-sub-desc { font-family: var(--f-body); font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 12px; line-height: 1.6; }
.f-sub-form { }
.f-sub-row  { display: flex; }
.f-sub-row input[type="email"] { flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a; border-right: none; color: #fff; font-family: var(--f-ui); font-size: 12px; padding: 9px 12px; outline: none; }
.f-sub-row input::placeholder { color: #444; }
.f-sub-row input:focus { border-color: #444; }
.f-sub-row button { background: rgba(255,255,255,.1); border: 1px solid #2a2a2a; color: rgba(255,255,255,.6); padding: 9px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.f-sub-row button:hover { background: rgba(255,255,255,.2); color: #fff; }
.f-sub-msg { font-family: var(--f-ui); font-size: 11px; margin-top: 8px; min-height: 16px; }
.f-sub-msg.success { color: #4ade80; }
.f-sub-msg.error   { color: #f87171; }
.footer-bottom { border-top: 1px solid #1a1a1a; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.footer-bottom p { font-family: var(--f-ui); font-size: 10px; color: rgba(255,255,255,.3); }
.footer-bottom-links { display: flex; gap: 4px; align-items: center; }
.footer-bottom-links a { font-family: var(--f-ui); font-size: 10px; color: rgba(255,255,255,.3); text-decoration: none; transition: color .15s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }
.footer-bottom-links span { color: #2a2a2a; }

/* ── PAGE TEMPLATE ────────────────────────────────── */
.page-inner { max-width: 860px; margin: 0 auto; padding: 52px 34px 88px; }
.page-inner h1 { font-family: var(--f-display); font-size: 48px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); line-height: .92; margin-bottom: 24px; border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
.page-inner h2 { font-family: var(--f-display); font-size: 28px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); margin: 32px 0 14px; }
.page-inner h3 { font-family: var(--f-ui); font-size: 16px; font-weight: 700; color: var(--ink); margin: 24px 0 10px; }
.page-inner p   { font-family: var(--f-body); font-size: 16px; color: var(--ink2); line-height: 1.85; margin-bottom: 16px; }
.page-inner a   { color: var(--ink); text-decoration: underline; }
.page-inner ul, .page-inner ol { font-family: var(--f-body); font-size: 16px; color: var(--ink2); line-height: 1.85; padding-left: 20px; margin-bottom: 16px; }
.page-inner .page-meta { font-family: var(--f-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin-bottom: 24px; display: flex; gap: 16px; }
.large-intro { font-family: var(--f-body); font-size: 20px; font-weight: 400; line-height: 1.7; color: var(--ink); margin-bottom: 28px !important; }

/* ── METHODOLOGY / PLAQUES ────────────────────────── */
.meth-wrap { border-bottom: 1px solid var(--bd); background: var(--bg2); }
.meth-hdr  { display: flex; align-items: flex-end; justify-content: space-between; padding: 28px 24px 0; flex-wrap: wrap; gap: 12px; }
.meth-eyebrow { font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; }
.meth-title { font-family: var(--f-display); font-weight: 900; font-size: 28px; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); }
.meth-read-more { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--bd); padding-bottom: 2px; text-decoration: none; white-space: nowrap; transition: border-color .15s; }
.meth-read-more:hover { border-color: var(--ink); }
.meth-intro { padding: 12px 24px 0; font-family: var(--f-body); font-size: 13px; color: var(--ink2); line-height: 1.7; max-width: 700px; }
.mth-bar-wrap { display: flex; height: 3px; margin: 16px 24px 0; gap: 1px; }
.mth-bar-seg  { height: 100%; background: var(--ink); transition: opacity .3s; }
.meth-tabs    { display: flex; margin: 0 24px; border-bottom: 1px solid var(--bd); gap: 0; margin-top: 14px; }
.mth-tab      { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all .15s; }
.mth-tab:hover{ background: var(--bg); }
.mth-tab.on   { border-bottom-color: var(--ink); background: var(--bg); }
.mth-tab-pct  { font-family: var(--f-num); font-size: 22px; letter-spacing: .02em; color: var(--ink); line-height: 1; }
.mth-tab-lbl  { font-family: var(--f-ui); font-size: 7px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.mth-panels   { padding: 0 24px 24px; }
.mth-panel    { display: none; }
.mth-panel.on { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; padding-top: 20px; animation: fadeSlide .2s ease; }
@keyframes fadeSlide { from { opacity:0; transform: translateY(5px); } to { opacity:1; transform: none; } }
.mth-panel-num  { font-family: var(--f-num); font-size: 60px; letter-spacing: .02em; line-height: 1; color: var(--ink); }
.mth-panel-name { font-family: var(--f-display); font-size: 18px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.mth-panel-desc { font-family: var(--f-body); font-size: 12px; color: var(--ink2); line-height: 1.8; }
.mth-formula     { margin-top: 14px; padding: 12px; background: var(--ink); }
.mth-formula-lbl { font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.mth-formula-code { font-family: monospace; font-size: 10px; color: var(--bg); line-height: 1.7; display: block; word-break: break-all; }
.mth-signal-badge { display: inline-block; border: 1px solid var(--bd); font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; margin-top: 14px; color: var(--ink2); }
.mth-plat-title { font-family: var(--f-ui); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-bottom: 12px; }
.mth-plat-row   { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bd); }
.mth-plat-row:last-child { border-bottom: none; }
.mth-plat-name  { font-family: var(--f-ui); font-size: 12px; font-weight: 700; color: var(--ink); display: block; }
.mth-plat-desc  { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); display: block; margin-top: 2px; }
.mth-plat-bar-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; width: 120px; }
.mth-plat-bar  { flex: 1; height: 2px; background: var(--bd); overflow: hidden; }
.mth-plat-fill { height: 2px; background: var(--ink); }
.mth-plat-pct  { font-family: var(--f-num); font-size: 16px; color: var(--ink); letter-spacing: .02em; min-width: 30px; text-align: right; }
.mth-plat-tier { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--bg); white-space: nowrap; }
.mth-engage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 4px; }
.mth-eng-card   { border: 1px solid var(--bd); border-top: 2px solid var(--ink); padding: 12px 10px; text-align: center; background: var(--bg); }
.mth-eng-icon   { font-size: 18px; color: var(--ink); margin-bottom: 5px; }
.mth-eng-name   { font-family: var(--f-display); font-size: 12px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.mth-eng-note   { font-family: var(--f-body); font-size: 10px; color: var(--ink2); line-height: 1.5; }
.mth-cap-note   { font-family: var(--f-body); font-size: 10px; color: var(--ink2); margin-top: 10px; font-style: italic; }
.mth-mandate-list { display: flex; flex-direction: column; gap: 6px; }
.mth-mandate-item { display: flex; align-items: flex-start; gap: 8px; font-family: var(--f-ui); font-size: 12px; color: var(--ink); line-height: 1.4; }
.mth-mandate-check { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.mth-mandate-no { color: var(--ink2); }
.mth-board-note { font-family: var(--f-body); font-size: 10px; color: var(--ink2); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bd); }
.mth-anti       { background: var(--ink); padding: 16px 24px 20px; }
.mth-anti-title { font-family: var(--f-display); font-size: 13px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 12px; }
.mth-anti-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mth-anti-item  { display: flex; align-items: flex-start; gap: 6px; font-family: var(--f-ui); font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.5; }
.mth-anti-ico   { color: rgba(255,255,255,.15); font-size: 10px; flex-shrink: 0; margin-top: 2px; }
.plq-wrap        { border-bottom: 1px solid var(--bd); background: var(--bg); }
.plq-hdr         { display: flex; align-items: flex-end; justify-content: space-between; padding: 28px 24px 0; flex-wrap: wrap; gap: 12px; }
.plq-eyebrow     { font-family: var(--f-ui); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; }
.plq-title       { font-family: var(--f-display); font-size: 28px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); }
.plq-cta-hdr     { font-family: var(--f-ui); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--bd); padding-bottom: 2px; text-decoration: none; }
.plq-intro       { padding: 12px 24px 20px; font-family: var(--f-body); font-size: 13px; color: var(--ink2); line-height: 1.7; max-width: 700px; }
.plq-grid-outer  { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--bd); }
.plq-card-outer  { background: var(--bg); position: relative; display: flex; flex-direction: column; }
.plq-featured    { background: var(--bg2); }
.plq-feat-badge  { background: var(--ink); color: var(--bg); font-family: var(--f-ui); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 4px 8px; position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.plq-preview     { padding: 16px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.plq-preview-img { width: 100%; max-width: 180px; aspect-ratio: 3/4; object-fit: cover; display: block; border: 1px solid var(--bd); }
.plq-mockup      { width: 100%; aspect-ratio: 3/4; border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; background: var(--bg2); max-width: 180px; }
.plq-mock-inner  { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; width: 100%; }
.plq-mock-logo   { font-family: var(--f-display); font-size: 18px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.plq-mock-lines  { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.plq-mock-lines i { display: block; height: 1px; background: var(--bd); width: 36px; }
.plq-mock-zw     { font-family: var(--f-ui); font-size: 6px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink2); }
.plq-mock-div    { height: 1px; width: 60%; margin: 6px auto; background: var(--bd); }
.plq-mock-cert   { font-family: var(--f-ui); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.plq-mock-milestone { font-family: var(--f-body); font-size: 5px; color: var(--ink2); text-align: center; line-height: 1.4; max-width: 90%; }
.plq-mock-artist { font-family: var(--f-display); font-size: 10px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
.plq-mock-song   { font-family: var(--f-ui); font-size: 8px; color: var(--ink2); }
.plq-mock-date   { font-family: var(--f-ui); font-size: 6px; color: var(--ink2); margin-top: 1px; }
.plq-mock-icon   { font-size: 16px; margin-top: 3px; color: var(--ink2); }
.plq-upload-hint { font-family: var(--f-body); font-size: 8px; color: var(--ink2); text-align: center; line-height: 1.5; }
.plq-upload-hint a { color: var(--ink); text-decoration: underline; }
.plq-info        { padding: 12px 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--bd); }
.plq-badge       { font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; display: inline-block; align-self: flex-start; background: var(--ink); color: var(--bg); }
.plq-sub         { font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.plq-price       { font-family: var(--f-num); font-size: 20px; letter-spacing: .02em; color: var(--ink); line-height: 1; }
.plq-desc-text   { font-family: var(--f-body); font-size: 10px; color: var(--ink2); line-height: 1.6; flex: 1; }
.plq-milestone-tag { font-family: var(--f-ui); font-size: 9px; color: var(--ink2); padding-left: 8px; line-height: 1.5; border-left: 2px solid var(--bd); }
.plq-order-btn   { display: block; text-align: center; font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; margin-top: 8px; background: var(--ink); color: var(--bg); text-decoration: none; transition: background .15s; }
.plq-order-btn:hover { background: #333; }
.plq-bottom-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: var(--bg2); border-top: 1px solid var(--bd); flex-wrap: wrap; }
.plq-bottom-q    { font-family: var(--f-display); font-size: 18px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); margin-bottom: 5px; }
.plq-bottom-p    { font-family: var(--f-body); font-size: 12px; color: var(--ink2); line-height: 1.6; max-width: 480px; }
.plq-main-cta    { font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 13px 26px; text-decoration: none; white-space: nowrap; transition: background .15s; flex-shrink: 0; }
.plq-main-cta:hover { background: #333; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .chart-grid { grid-template-columns: repeat(4,1fr); }
  .plq-grid-outer { grid-template-columns: repeat(3,1fr); }
  .mth-anti-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand, .f-col:last-child { grid-column: 1/-1; }
}
@media (max-width: 768px) {
  .topbar { display: none; }
  .mast { height: auto; min-height: 84px; padding: 18px 20px; flex-wrap: wrap; gap: 14px; }
  .logo-wordmark { font-size: 42px; }
  .mast-r { gap: 10px; }
  .mast-week { font-size: 13px; }
  .mast-live-pill { height: 38px; padding: 0 16px; font-size: 12px; }
  .mast-search-btn { height: 38px; padding: 0 16px; font-size: 12px; }
  .spon { height: auto; padding: 10px 20px; flex-wrap: wrap; }
  .mnav { display: none !important; }
  .hmb { display: flex; }
  .ch, .chart-row { grid-template-columns: 44px 60px 36px 1fr 46px 40px 36px; }
  .cr-img, .cr-ph { width: 60px; height: 60px; }
  .cr-stat:last-child { display: none; }
  .hero { grid-template-columns: 56px 120px 1fr; }
  .hrk .num { font-size: 64px; }
  .hi { width: 120px; height: 120px; }
  .htit { font-size: 26px; }
  .chart-grid { grid-template-columns: repeat(3,1fr); }
  .nmf-grid { grid-template-columns: repeat(2,1fr); }
  .wh-featured { grid-template-columns: 1fr; }
  .wh-feat-img,.wh-feat-ph { width: 100%; height: 180px; }
  .wh-grid { grid-template-columns: 1fr 1fr; }
  .plq-grid-outer { grid-template-columns: repeat(2,1fr); }
  .mth-panel.on { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .car { height: 300px; }
  .car-sl, .car-slide img, .car-slide-video { height: 300px; }
  .car-title { font-size: 36px; }
  .car-ov { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .mast { padding: 14px 16px; }
  .logo-wordmark { font-size: 36px; }
  .spon { padding: 8px 16px; }
  .gsi { padding: 0 16px; }
  .wh-grid { grid-template-columns: 1fr; }
  .nmf-grid { grid-template-columns: 1fr 1fr; }
  .plq-grid-outer { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   v3.4.1 — RADIO LAUNCHER + WEEK-OF STRIP
═══════════════════════════════════════════════════ */

/* ── RADIO LAUNCHER — yellow, bottom-left ───────── */
.radio-launcher {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #F2C200;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 9px 16px 9px 13px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: transform .18s, box-shadow .18s;
  font-family: var(--f-ui);
}
.radio-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.radio-launcher.hidden-state {
  /* keep visible — launcher always shows */
  opacity: 0.7;
}
.rl-icon {
  flex-shrink: 0;
  stroke: #000;
  width: 16px;
  height: 16px;
}
.rl-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.rl-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}
.rl-sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.rl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
  animation: cds-blink 1.6s ease-in-out infinite;
}

/* ── RADIO PLAYER BAR — full-width, bottom dock ─── */

/* Override previous player bar definition */
.radio-player-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
  background: #111 !important;
  border-top: 1px solid #222 !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  transform: translateY(100%) !important;
  transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
}
.radio-player-bar.visible {
  transform: translateY(0) !important;
}

/* LEFT: station identity + track info */
.rpb-left {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px 0 20px;
  flex-shrink: 0;
  min-width: 280px;
  border-right: 1px solid #1e1e1e;
  height: 100%;
}
.rpb-logo-box {
  background: #F2C200;
  color: #000;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 2px;
}
.rpb-logo-h {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #000;
}
.rpb-logo-r {
  font-family: var(--f-ui);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
  margin-top: 1px;
}
.rpb-track-art {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rpb-track-art img { width:100%; height:100%; object-fit:cover; display:block; }
.rpb-track-art-ph { font-family:var(--f-num); font-size:18px; color:#333; }
.rpb-track-info {
  min-width: 0;
  flex: 1;
}
.rpb-track-title {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rpb-track-artist {
  font-family: var(--f-ui);
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CENTER: controls + progress */
.rpb-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
  min-width: 0;
}
.rpb-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rpb-btn-ctrl {
  background: none;
  border: none;
  color: #555;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color .15s;
  font-size: 13px;
  font-family: var(--f-ui);
}
.rpb-btn-ctrl:hover { color: rgba(255,255,255,.8); }
.rpb-play-btn {
  width: 40px !important;
  height: 40px !important;
  background: #fff !important;
  color: #000 !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  transition: background .15s !important;
}
.rpb-play-btn:hover { background: #eee !important; }
.rpb-play-btn svg { fill: #000; pointer-events: none; }

.rpb-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.rpb-elapsed {
  font-family: var(--f-num);
  font-size: 11px;
  color: #444;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.rpb-total { text-align: left !important; }
.rpb-progress-track {
  flex: 1;
  height: 2px;
  background: #222;
  cursor: pointer;
  position: relative;
}
.rpb-progress-fill {
  height: 2px;
  background: rgba(255,255,255,.35);
  width: 0;
  transition: width .25s linear;
  pointer-events: none;
}

/* RIGHT: volume + close */
.rpb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
  border-left: 1px solid #1e1e1e;
  height: 100%;
}
.rpb-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #2a2a2a;
  flex-shrink: 0;
}
.rpb-live-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%; background: rgba(255,255,255,.4);
  animation: cds-blink 1.4s ease-in-out infinite;
}
.rpb-live-badge-text {
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.rpb-vol-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rpb-vol-icon {
  color: #444;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.rpb-vol-icon svg { fill: #444; }
.rpb-vol-slider {
  width: 72px;
  height: 2px;
  accent-color: rgba(255,255,255,.4);
  cursor: pointer;
}
.rpb-close-btn {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
  flex-shrink: 0;
}
.rpb-close-btn:hover { color: rgba(255,255,255,.7); }
.rpb-close-btn svg { stroke: currentColor; }

/* When player is open: push launcher up */
.radio-launcher.player-open {
  bottom: 92px;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
  .radio-launcher { left: 16px; bottom: 16px; padding: 8px 13px 8px 11px; }
  .rpb-left { min-width: 200px; padding: 0 14px; gap: 10px; }
  .rpb-center { padding: 0 16px; }
  .rpb-right { padding: 0 14px; }
  .rpb-vol-wrap { display: none; }
  .rpb-live-badge { display: none; }
}
@media (max-width: 480px) {
  .rpb-logo-box { display: none; }
  .rpb-left { min-width: 140px; }
  .rpb-elapsed, .rpb-total { display: none; }
}

/* ── v3.5 — ARTIST IMPACT SCORE ─────────────────── */
.sb-artist-score {
  font-family: var(--f-num);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .02em;
}

/* ── v3.5 — CHART ARCHIVE PAGE ─────────────────── */
.arch-page-hdr { background:var(--ink); padding:32px 24px 0; border-bottom:1px solid #1e1e1e; }
.arch-page-inner { max-width:900px; }
.arch-page-meta { font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:10px; }
.arch-page-title { font-family:var(--f-display); font-size:44px; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; color:#fff; line-height:.92; margin-bottom:10px; }
.arch-page-sub { font-family:var(--f-body); font-size:13px; color:rgba(255,255,255,.45); margin-bottom:20px; line-height:1.6; }
.arch-week-nav { display:flex; gap:0; overflow-x:auto; margin-top:16px; }
.arch-wk-btn { display:flex; align-items:center; gap:8px; font-family:var(--f-ui); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.45); padding:12px 18px; border-right:1px solid #1e1e1e; text-decoration:none; transition:all .15s; white-space:nowrap; flex-shrink:0; }
.arch-wk-btn:hover { color:#fff; background:rgba(255,255,255,.05); }
.arch-wk-btn.on { color:#fff; background:rgba(255,255,255,.1); border-bottom:2px solid var(--bg); }
.arch-current-badge { font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:#F2C200; color:#000; padding:2px 6px; border-radius:1px; }

/* ══════════════════════════════════════════
   MOBILE FIX — compact hero + chart rows
   Only reduces padding/sizes. No layout change.
══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE SYSTEM — v3.6.4 FINAL
   
   All mobile rules consolidated here.
   Desktop (>860px): unchanged 7-col grid.
   Tablet (640–860px): compact 7-col.
   Mobile (<640px): 5-col with peak+play always visible.
   Small (<380px): further tight.
══════════════════════════════════════════════════ */

/* Gold stat fix - always ink on hero stats */
.hst-item .v { color: var(--ink) !important; }

/* ── TABLET 640px–860px ──────────────────────────── */
@media (max-width: 860px) {
  .hero { grid-template-columns: 56px 120px 1fr; }
  .hrk .num { font-size: 64px; }
  .hi { width: 120px; height: 120px; }
  .hb { padding: 14px 18px; }
  .htit { font-size: 26px; }
  .ch,
  .chart-row,
  .chart-row.chart-collapsed.chart-revealed {
    grid-template-columns: 44px 60px 36px 1fr 46px 40px 36px;
  }
  .cr-img, .cr-ph { width: 60px; height: 60px; }
  .cr-pos { font-size: 26px; }
  .cr-stat:last-child { display: none; }
}

/* ── MOBILE <640px ───────────────────────────────── */
@media (max-width: 640px) {

  /* HERO: full-width stacked layout */
  .hero {
    display: block !important;
    position: relative;
  }
  .hrk {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    width: 50px; height: 50px;
    padding: 0;
    background: var(--ink);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hrk .num { font-size: 34px; line-height: 1; color: var(--bg); }
  .hrk .lbl { display: none; }
  .hi {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 20%;
  }
  .hb {
    width: 100%;
    padding: 11px 14px 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .htags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  .ht    { font-size: 8px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }
  .ht:nth-child(n+3) { display: none; }
  .htit  { font-size: 22px; letter-spacing: -.04em; line-height: .95; }
  .hart  { font-size: 12px; }
  .hst   { display: flex; gap: 14px; margin-top: 5px; }
  .hst-item .v { font-size: 20px; color: var(--ink) !important; }
  .hst-item .l { font-size: 7px; }
  .hst-item:last-child { display: none; }

  /* CHART COLUMN HEADER — 5 cols matching chart rows */
  .ch {
    grid-template-columns: 38px 48px 1fr 42px 36px !important;
    position: relative;
    top: 0;
  }
  /* Hide movement column header on mobile */
  .ch div:nth-child(3) { display: none; }
  /* Hide weeks column header on mobile */
  .ch div:nth-child(6),
  .ch div:nth-child(7) { display: none; }

  /* CHART ROWS — 5-col grid, explicit assignment, peak+play ALWAYS visible */
  .chart-row,
  .chart-row.chart-collapsed.chart-revealed {
    display: grid !important;
    grid-template-columns: 38px 48px 1fr 42px 36px !important;
    grid-template-rows: auto;
    align-items: stretch;
    min-height: 48px;
  }

  /* Explicit grid placement — each child pinned to its column */
  .cr-pos  { grid-column: 1 !important; font-size: 20px; padding: 0 2px; }
  .cr-img,
  .cr-ph   { grid-column: 2 !important; width: 48px; height: 48px; }
  .cr-ph   { font-size: 12px; }
  .cr-mv   { display: none !important; }    /* hidden — no space */
  .cr-info { grid-column: 3 !important; padding: 5px 7px; gap: 2px; overflow: hidden; }
  .cr-info h3     { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-info .artist { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .genre-pill { display: none; }
  .ten-badge  { display: none; }

  /* PEAK: column 4 — always visible */
  .cr-stat.pk {
    grid-column: 4 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 42px;
    min-width: 42px;
  }
  .cr-stat.pk .sv { font-size: 15px !important; color: var(--ink2); }
  .cr-stat.pk .sl { font-size: 6px !important; }

  /* Hide weeks and score stats */
  .cr-stat.wk { display: none !important; }
  .cr-stat.sc { display: none !important; }

  /* PLAY BUTTON: column 5 — always visible */
  .cr-spt {
    grid-column: 5 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
  }
  .spt-btn { width: 22px !important; height: 22px !important; flex-shrink: 0; }
  .spt-lbl { display: none; }

  /* Row detail panel on mobile */
  .row-detail.open,
  .song-detail-panel.open {
    display: block !important;
    grid-column: 1 / -1;
  }
  .sdp-inner { padding: 10px 12px; }
  .sdp-plat-row  { grid-template-columns: 28px 1fr 30px 42px 40px; gap: 5px; padding: 6px 8px; }
  .sdp-total-row { grid-template-columns: 28px 1fr 30px 42px 40px; padding: 7px 8px; }
  .sdp-song-rank  { font-size: 24px; }
  .sdp-song-title { font-size: 13px; }
  .sdp-score-num  { font-size: 20px; }
  .sdp-links { gap: 6px; flex-wrap: wrap; }
  .sdp-link  { font-size: 10px; padding: 5px 10px; }
  .sdp-sparkline { height: 36px; }

}


/* ── SMALL PHONES <380px ─────────────────────────── */
@media (max-width: 380px) {
  .hi { height: 155px; }
  .htit { font-size: 19px; }
  .hst-item .v { font-size: 17px; }
  .ch,
  .chart-row,
  .chart-row.chart-collapsed.chart-revealed {
    grid-template-columns: 34px 42px 1fr 38px 32px !important;
  }
  .cr-img, .cr-ph { width: 42px !important; height: 42px !important; }
  .cr-pos  { font-size: 18px; }
  .cr-info h3 { font-size: 11px; }
  .cr-stat.pk { width: 38px !important; min-width: 38px !important; }
  .cr-stat.pk .sv { font-size: 13px !important; }
  .spt-btn { width: 19px !important; height: 19px !important; }
  .cr-spt  { width: 32px !important; min-width: 32px !important; }
  .logo-wordmark { font-size: 36px; }
}

/* ══════════════════════════════════════════════════
   v3.6 — ALL NEW FEATURES CSS
══════════════════════════════════════════════════ */

/* ── SPOTIFY CTA STRIP (below genre filter) ─────── */
.spotify-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.spotify-strip p {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--ink2);
}
.spotify-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1DB954;
  color: #000;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.spotify-cta-btn:hover { background: #1ed760; }
.spotify-cta-btn svg { fill: #000; }

/* Footer Spotify CTA */
.f-spotify-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1DB954;
  color: #000 !important;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  margin-top: 12px;
  transition: background .15s;
}
.f-spotify-cta:hover { background: #1ed760; }

/* ── SONG DETAIL PLATFORM BREAKDOWN PANEL ─────────── */
.song-detail-panel {
  display: none;
  grid-column: 1 / -1;
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
  padding: 0;
}
.song-detail-panel.open {
  display: block !important;
}
.sdp-inner {
  padding: 16px 24px 20px;
}

/* Song header in detail */
.sdp-song-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}
.sdp-song-rank {
  font-family: var(--f-num);
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.sdp-song-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.sdp-song-artist { font-family: var(--f-ui); font-size: 13px; color: var(--ink2); margin-top: 2px; }
.sdp-total-score { margin-left: auto; text-align: center; flex-shrink: 0; }
.sdp-score-num   { font-size: 28px; letter-spacing: .02em; color: var(--ink); line-height: 1; }
.sdp-score-lbl   { font-family: var(--f-ui); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-top: 2px; }

/* Section label */
.sdp-section-lbl {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  margin: 0 0 8px;
}

/* Platform rows */
.sdp-platforms {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--bd);
}
.sdp-plat-row {
  display: grid;
  grid-template-columns: 36px 1fr 40px 52px 52px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
}
.sdp-plat-row:last-child { border-bottom: none; }
.sdp-plat-icon {
  font-family: var(--f-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bg);
  background: var(--ink);
  padding: 3px 4px;
  text-align: center;
  border-radius: 2px;
}
.sdp-plat-name {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.sdp-plat-bar-wrap { margin-top: 3px; }
.sdp-plat-bar {
  height: 3px;
  background: var(--bd);
  border-radius: 2px;
  overflow: hidden;
}
.sdp-plat-fill {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: width .4s ease;
}
.sdp-plat-weight {
  font-family: var(--f-ui);
  font-size: 10px;
  color: var(--ink2);
  text-align: right;
}
.sdp-plat-score {
  font-family: var(--f-num);
  font-size: 16px;
  color: var(--ink);
  text-align: right;
}
.sdp-plat-pts {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  text-align: right;
}

/* Total row */
.sdp-total-row {
  display: grid;
  grid-template-columns: 36px 1fr 40px 52px 52px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ink);
}
.sdp-total-lbl {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.sdp-total-val {
  font-size: 20px;
  color: #fff;
  text-align: right;
}

/* Sparkline */
.sdp-sparkline-wrap {
  margin-bottom: 14px;
}
.sdp-sparkline {
  width: 100%;
  height: 40px;
  display: block;
  overflow: visible;
}
.sdp-spark-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: 9px;
  color: var(--ink2);
  margin-top: 3px;
}

/* Detail links */
.sdp-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sdp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  text-decoration: none;
  border: 1px solid var(--bd);
  color: var(--ink);
  transition: all .15s;
}
.sdp-link:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sdp-link-spotify { background: #1DB954; color: #000 !important; border-color: #1DB954; border-radius: 999px; }
.sdp-link-spotify:hover { background: #1ed760; border-color: #1ed760; color: #000 !important; }
.sdp-link-yt { border-color: var(--bd); }
.sdp-no-data { font-family: var(--f-body); font-size: 12px; color: var(--ink2); padding: 16px 0; }
.sdp-no-data a { color: var(--ink); text-decoration: underline; }

/* ── PEOPLE'S CHOICE CHART PAGE ──────────────────── */
.pcc-wrap { max-width: 100%; }

.pcc-hdr {
  background: var(--ink);
  padding: 40px 34px 36px;
  border-bottom: 4px solid #F2C200;
}
.pcc-hdr-inner { max-width: 800px; }
.pcc-eyebrow {
  font-family: var(--f-ui);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #F2C200; margin-bottom: 8px;
}
.pcc-title {
  font-family: var(--f-display);
  font-size: 52px; font-weight: 900; letter-spacing: -.05em;
  text-transform: uppercase; color: #fff; line-height: .92; margin-bottom: 14px;
}
.pcc-sub {
  font-family: var(--f-body);
  font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 560px;
}
.pcc-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 7px 16px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.pcc-status.open  { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.pcc-status.closed { background: rgba(255,255,255,.06); color: #888; border: 1px solid #2a2a2a; }
.pcc-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  animation: live-blink 1.4s ease-in-out infinite;
}
.pcc-status.open  .pcc-status-dot { background: #4ade80; }
.pcc-status.closed .pcc-status-dot { background: #555; animation: none; }

.pcc-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  align-items: start;
}

/* Standings column */
.pcc-standings { border-right: 1px solid var(--bd); min-height: 60vh; }
.pcc-section-hdr {
  padding: 16px 24px;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between;
}
.pcc-section-title {
  font-family: var(--f-display);
  font-size: 20px; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase;
}
.pcc-section-sub {
  font-family: var(--f-ui); font-size: 11px; color: var(--ink2);
}
.pcc-chart-list { }
.pcc-loading {
  padding: 32px; text-align: center;
  font-family: var(--f-ui); font-size: 13px; color: var(--ink2);
}

/* PCC chart row */
.pcc-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
  transition: background .1s;
}
.pcc-row:hover { background: var(--bg2); }
.pcc-row-pos {
  font-family: var(--f-num); font-size: 26px; color: var(--ink); text-align: center;
}
.pcc-row-pos.top3 { color: #F2C200; }
.pcc-row-info h4 { font-family: var(--f-ui); font-size: 14px; font-weight: 700; color: var(--ink); }
.pcc-row-info p  { font-family: var(--f-ui); font-size: 12px; color: var(--ink2); margin-top: 2px; }
.pcc-row-genre { display: inline-block; font-family: var(--f-ui); font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--bd); color: var(--ink2); padding: 1px 6px; margin-top: 4px; }
.pcc-vote-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--ink); color: var(--bg); border: none;
  padding: 8px 14px; cursor: pointer; font-family: var(--f-ui);
  transition: background .15s; flex-shrink: 0;
}
.pcc-vote-btn:hover { background: #333; }
.pcc-vote-btn.voted { background: #F2C200; color: #000; }
.pcc-vote-num  { font-family: var(--f-num); font-size: 18px; line-height: 1; }
.pcc-vote-lbl  { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Submit column */
.pcc-submit-col { padding: 0; background: var(--bg2); }

.pcc-form-card, .pcc-closed-card, .pcc-how-card {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
}
.pcc-form-hdr { margin-bottom: 16px; }
.pcc-form-title {
  font-family: var(--f-display); font-size: 18px; font-weight: 900;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--ink);
}
.pcc-form-sub { font-family: var(--f-body); font-size: 12px; color: var(--ink2); margin-top: 4px; line-height: 1.6; }

.pcc-field { margin-bottom: 12px; }
.pcc-field label {
  display: block; font-family: var(--f-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 5px;
}
.pcc-field input,
.pcc-field select {
  width: 100%; border: 1.5px solid var(--bd); padding: 9px 12px;
  font-family: var(--f-ui); font-size: 13px; background: var(--bg2); color: var(--ink);
  outline: none; transition: border-color .15s;
}
.pcc-field input:focus,
.pcc-field select:focus { border-color: var(--ink); background: var(--bg); }
.req { color: #dc2626; font-size: 12px; }
.opt { color: var(--ink2); font-size: 10px; font-weight: 400; }

.pcc-submit-btn {
  width: 100%; background: #F2C200; color: #000; border: none;
  padding: 13px; font-family: var(--f-display); font-size: 16px; font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase; cursor: pointer;
  transition: background .15s; margin-top: 4px;
}
.pcc-submit-btn:hover { background: #e6b800; }
.pcc-msg {
  margin-top: 10px; font-family: var(--f-ui); font-size: 12px; min-height: 16px;
}
.pcc-msg.success { color: #16a34a; }
.pcc-msg.error   { color: #dc2626; }

.pcc-closed-card { text-align: center; padding: 32px 24px; }
.pcc-closed-icon { font-size: 40px; margin-bottom: 12px; }
.pcc-closed-title {
  font-family: var(--f-display); font-size: 20px; font-weight: 900;
  letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 8px;
}
.pcc-closed-text { font-family: var(--f-body); font-size: 13px; color: var(--ink2); line-height: 1.7; }
.pcc-closed-timer { font-family: var(--f-num); font-size: 24px; color: var(--ink); margin-top: 14px; }

.pcc-how-card { background: var(--bg2); }
.pcc-how-title {
  font-family: var(--f-display); font-size: 14px; font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 14px;
}
.pcc-how-steps { display: flex; flex-direction: column; gap: 10px; }
.pcc-step { display: flex; gap: 10px; align-items: flex-start; font-family: var(--f-body); font-size: 12px; color: var(--ink2); line-height: 1.6; }
.pcc-step-n {
  font-family: var(--f-num); font-size: 18px; color: var(--bg);
  background: var(--ink); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
}


/* ── PEOPLE'S CHOICE — live progress upgrades ───────────────── */
.pcc-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bd);
  border-bottom: 2px solid var(--ink);
  background: var(--bg);
}
.pcc-metric {
  padding: 18px 22px;
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pcc-metric:last-child { border-right: none; }
.pcc-metric-num {
  font-family: var(--f-num);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
.pcc-metric-label {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.pcc-metric-week {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.pcc-refresh-btn {
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.pcc-refresh-btn:hover { border-color: var(--ink); background: var(--bg2); }
.pcc-sample-note {
  padding: 12px 20px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg2);
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--ink2);
}
.pcc-progress {
  height: 5px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  margin-top: 8px;
  overflow: hidden;
}
.pcc-progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  width: 0;
  transition: width .25s ease;
}
.pcc-progress-label {
  margin-top: 4px;
  font-family: var(--f-ui);
  font-size: 9px;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pcc-vote-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--bd);
  padding: 8px 14px;
  min-width: 68px;
  background: var(--bg2);
}
.pcc-row-links {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.pcc-row-links a {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--bd);
  padding: 3px 6px;
}
.pcc-row-links a:hover { border-color: var(--ink); }
.pcc-ideas-card { border-top: 1px solid var(--bd); }
.pcc-vote-btn:disabled { cursor: default; opacity: .82; }
@media (max-width: 860px) {
  .pcc-dashboard { grid-template-columns: repeat(2, 1fr); }
  .pcc-metric:nth-child(2) { border-right: none; }
  .pcc-metric:nth-child(1), .pcc-metric:nth-child(2) { border-bottom: 1px solid var(--bd); }
}
@media (max-width: 640px) {
  .pcc-dashboard { grid-template-columns: 1fr; }
  .pcc-metric { border-right: none; border-bottom: 1px solid var(--bd); }
  .pcc-metric:last-child { border-bottom: none; }
  .pcc-row { grid-template-columns: 42px 1fr 62px; padding: 11px 12px; gap: 8px; }
  .pcc-section-hdr { padding: 14px 14px; align-items: center; }
  .pcc-metric-num { font-size: 26px; }
}

/* ── BADGE GENERATOR PAGE ────────────────────────── */
.hot100-badge-gen { max-width: 800px; margin: 0 auto; }
.hbg-form { display: flex; flex-direction: column; gap: 16px; }
.hbg-row  { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; }
.hbg-field label { display: block; font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 5px; }
.hbg-field input,
.hbg-field select { width: 100%; border: 1.5px solid var(--bd); padding: 9px 12px; font-family: var(--f-ui); font-size: 13px; outline: none; background: var(--bg2); color: var(--ink); transition: border-color .15s; }
.hbg-field input:focus,
.hbg-field select:focus { border-color: var(--ink); background: var(--bg); }
.hbg-actions { margin-top: 8px; }
.hbg-btn-generate {
  background: var(--ink); color: var(--bg); border: none;
  padding: 13px 32px; font-family: var(--f-display); font-size: 16px; font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.hbg-btn-generate:hover { background: #333; }
.hbg-prev-wrap svg { width: 100%; max-width: 500px; display: block; border: 1px solid var(--bd); }
.hbg-prev-actions { display: flex; gap: 10px; margin-top: 14px; }
.hbg-btn-download {
  background: #F2C200; color: #000; border: none;
  padding: 11px 24px; font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border-radius: 4px;
}
.hbg-btn-back {
  background: var(--bg2); color: var(--ink); border: 1.5px solid var(--bd);
  padding: 11px 20px; font-family: var(--f-ui); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ── BUG FIX: row-detail mobile ─────────────────── */
@media (max-width: 640px) {
  .song-detail-panel .sdp-inner { padding: 12px 14px; }
  .sdp-platforms { font-size: 11px; }
  .sdp-plat-row  { grid-template-columns: 30px 1fr 32px 44px 44px; gap: 5px; padding: 7px 10px; }
  .sdp-total-row { grid-template-columns: 30px 1fr 32px 44px 44px; gap: 5px; padding: 8px 10px; }
  .sdp-song-rank { font-size: 26px; }
  .sdp-song-title { font-size: 14px; }
  .sdp-score-num { font-size: 22px; }
  .pcc-layout    { grid-template-columns: 1fr; }
  .pcc-title     { font-size: 36px; }
  .pcc-standings { border-right: none; border-bottom: 1px solid var(--bd); }
  .pcc-submit-col { border-top: 2px solid var(--ink); }
}

/* ── BUG FIX: chart expand after genre filter ───── */
.chart-row.chart-collapsed:not(.chart-revealed) {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   MOBILE NAVIGATION — v3.6.1
   Hamburger opens full-screen overlay with all page links
══════════════════════════════════════════════════ */

/* Remove !important hide — JS controls visibility via class */
@media (max-width: 768px) {
  nav.mnav { display: none; }
  nav.mnav.mob-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
    background: var(--ink);
    overflow-y: auto;
    animation: mobNavIn .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mobNavIn {
    from { opacity:0; transform:translateX(-8px); }
    to   { opacity:1; transform:translateX(0); }
  }
}

/* Close button (injected by JS) */
.mob-nav-close {
  display: none;
}
@media (max-width: 768px) {
  .mob-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px; right: 18px;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid #2a2a2a;
    color: rgba(255,255,255,.5);
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all .15s;
  }
  .mob-nav-close:hover {
    border-color: rgba(255,255,255,.3);
    color: #fff;
  }

  /* Logo inside menu */
  .mob-nav-brand {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #1e1e1e;
    flex-shrink: 0;
  }
  .mob-nav-brand-logo {
    font-family: 'Archivo Black', sans-serif;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.06em;
    color: #fff;
    line-height: 1;
  }
  .mob-nav-brand-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: #444;
    margin-top: 5px;
  }

  /* Nav links */
  nav.mnav.mob-open ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 12px 0;
    margin: 0;
    flex: 1;
  }
  nav.mnav.mob-open ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    border-left: 3px solid transparent;
    height: auto;
    transition: all .12s;
  }
  nav.mnav.mob-open ul li a:hover,
  nav.mnav.mob-open ul li.current-menu-item a {
    color: #fff;
    border-left-color: #F2C200;
    background: rgba(255,255,255,.03);
    padding-left: 27px;
  }
  nav.mnav.mob-open ul li a::after {
    content: '›';
    font-size: 18px;
    color: rgba(255,255,255,.2);
    font-weight: 300;
  }

  /* Footer inside mobile menu */
  .mob-nav-footer {
    padding: 16px 24px;
    border-top: 1px solid #1a1a1a;
    flex-shrink: 0;
  }
  .mob-nav-footer p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #333;
  }

  /* Hamburger → X animation */
  .hmb.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hmb.active span:nth-child(2) { opacity: 0; }
  .hmb.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .hmb span { transition: all .2s ease; }
}

/* ══════════════════════════════════════════════════
   EXPAND BUTTON — View Full Chart
   Redesigned to match HOT100 institutional standard
══════════════════════════════════════════════════ */

.chart-expand-wrap {
  background: var(--bg);
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
}

.chart-expand-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg);
  border: none;
  border-top: 3px solid var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background .15s;
  text-decoration: none;
}
.chart-expand-btn:hover {
  background: var(--ink);
}
.chart-expand-btn:hover .ceb-label,
.chart-expand-btn:hover .ceb-eyebrow {
  color: var(--bg);
}
.chart-expand-btn:hover .ceb-count {
  color: rgba(255,255,255,.4);
}
.chart-expand-btn:hover .ceb-arrow {
  color: var(--bg);
  border-color: rgba(255,255,255,.2);
}

/* Left: text block */
.ceb-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 24px;
  gap: 3px;
}
.ceb-eyebrow {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink2);
  line-height: 1;
}
.ceb-label {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

/* Right: count + arrow */
.ceb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 18px 0;
  flex-shrink: 0;
}
.ceb-count {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
}
.ceb-arrow {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .15s;
}
.chart-expand-btn[aria-expanded="true"] .ceb-arrow {
  transform: rotate(180deg);
}

/* Revealed rows animation */
.chart-row.chart-collapsed.chart-revealed {
  animation: rowFadeIn .18s ease forwards;
}
@keyframes rowFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 640px) {
  /* EXPAND BUTTON on mobile (matches desktop design, proportional) */
    .ceb-inner   { padding: 16px 16px !important; gap: 3px !important; }
    .ceb-eyebrow { font-size: 8px !important; letter-spacing: .16em !important; }
    .ceb-label   { font-size: 17px !important; }
    .ceb-right   { padding: 16px 14px 16px 0 !important; gap: 8px !important; }
    .ceb-count   { font-size: 9px !important; }
    .ceb-arrow   { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  
    /* Sponsor strip */
    .spon { height: auto; padding: 8px 14px; flex-wrap: wrap; gap: 5px; }
    .spon-lbl { font-size: 8px; }
    .spon-sl  { font-size: 9px; padding: 5px 10px; }
  
    /* Genre strip */
    .gsi { padding: 0 14px; }
    .gt  { font-size: 10px; padding: 10px 10px; }
  
    /* Spotify strip */
    .spotify-strip { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 14px; }
    .spotify-strip p { font-size: 11px; }
  
    /* Sections */
    .nmf-grid { grid-template-columns: 1fr 1fr; }
    .nmf-hdr  { padding: 14px 14px; }
    .nmft     { font-size: 20px; }
    .nmf-body { padding: 9px 10px; }
    .nmftit   { font-size: 12px; }
  
    .wh-feat-title { font-size: 18px; }
    .wh-feat-body  { padding: 12px 14px; }
    .wh-grid       { grid-template-columns: 1fr; }
  
    /* Footer */
    .footer-grid  { grid-template-columns: 1fr; }
    .footer-inner { padding: 28px 14px 80px; }
    .f-logo-wordmark { font-size: 28px; }
  
    /* Radio launcher */
    .radio-launcher { bottom: 16px; left: 16px; padding: 8px 12px 8px 10px; gap: 7px; }
    .rl-label { font-size: 11px; }
    .rl-sub   { font-size: 7px; }
  
    /* PCC page */
    .pcc-layout { grid-template-columns: 1fr; }
    .pcc-title  { font-size: 32px; }
    .pcc-hdr    { padding: 28px 14px 24px; }
    .pcc-standings { border-right: none; }
  
  
    /* Detail panel mobile */
    .song-detail-panel .sdp-inner { padding: 12px 14px; }
      .sdp-platforms { font-size: 11px; }
      .sdp-plat-row  { grid-template-columns: 30px 1fr 32px 44px 44px; gap: 5px; padding: 7px 10px; }
      .sdp-total-row { grid-template-columns: 30px 1fr 32px 44px 44px; gap: 5px; padding: 8px 10px; }
      .sdp-song-rank { font-size: 26px; }
      .sdp-song-title { font-size: 14px; }
      .sdp-score-num { font-size: 22px; }
      .pcc-layout    { grid-template-columns: 1fr; }
      .pcc-title     { font-size: 36px; }
      .pcc-standings { border-right: none; border-bottom: 1px solid var(--bd); }
      .pcc-submit-col { border-top: 2px solid var(--ink); }
  
    /* Expand button mobile */
    .ceb-inner   { padding: 16px 16px; gap: 3px; }
      .ceb-eyebrow { font-size: 8px; letter-spacing: .16em; }
      .ceb-label   { font-size: 17px; }
      .ceb-right   { padding: 16px 14px 16px 0; gap: 8px; }
      .ceb-count   { font-size: 9px; letter-spacing: .08em; }
      .ceb-arrow   { width: 32px; height: 32px; font-size: 15px; }
}

/* Mobile: expand button scaled to match desktop standard */
@media (max-width: 640px) {
  .ceb-inner   { padding: 16px 16px; gap: 3px; }
  .ceb-eyebrow { font-size: 8px; letter-spacing: .16em; }
  .ceb-label   { font-size: 17px; }
  .ceb-right   { padding: 16px 14px 16px 0; gap: 8px; }
  .ceb-count   { font-size: 9px; letter-spacing: .08em; }
  .ceb-arrow   { width: 32px; height: 32px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════
   MOBILE NAV OVERLAY — v3.6.4
   Self-contained. Always works. No WP menu dependency.
══════════════════════════════════════════════════ */

/* Backdrop */
#hot100-mobile-nav-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 498;
  background: rgba(0,0,0,.6);
}
#hot100-mobile-nav-bg.open { display: block; }

/* Overlay panel — slides in from left */
#hot100-mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  z-index: 499;
  background: #111;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
}
#hot100-mobile-nav.open {
  display: flex;
  animation: mobnav-in .22s cubic-bezier(.4,0,.2,1);
}
@keyframes mobnav-in {
  from { transform: translateX(-100%); opacity: .5; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Header row inside overlay */
.mobnav-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
}
.mobnav-logo { text-decoration: none; }
.mobnav-logo-word {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.06em;
  color: #fff;
  line-height: 1;
}
.mobnav-logo-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #444;
  margin-top: 3px;
}
.mobnav-close {
  width: 38px; height: 38px;
  background: none;
  border: 1px solid #2a2a2a;
  color: rgba(255,255,255,.4);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.mobnav-close:hover { border-color: rgba(255,255,255,.3); color: #fff; }

/* Nav links */
.mobnav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}
.mobnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
  border-left: 3px solid transparent;
  transition: all .12s;
}
.mobnav-link:hover,
.mobnav-link.mobnav-active {
  background: rgba(255,255,255,.04);
  border-left-color: #F2C200;
  padding-left: 23px;
}
.mobnav-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobnav-link-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.mobnav-link.mobnav-active .mobnav-link-title,
.mobnav-link:hover .mobnav-link-title { color: #fff; }
.mobnav-link-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  color: #444;
}
.mobnav-link:hover .mobnav-link-sub { color: #666; }
.mobnav-arrow {
  font-size: 20px;
  color: #2a2a2a;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s;
}
.mobnav-link:hover .mobnav-arrow { color: rgba(255,255,255,.3); }

/* Social pills */
.mobnav-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.mobnav-soc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 5px 10px;
  border: 1px solid #2a2a2a;
  color: #555;
  text-decoration: none;
  transition: all .15s;
}
.mobnav-soc:hover { border-color: #F2C200; color: #F2C200; }

/* Footer text */
.mobnav-foot {
  padding: 12px 20px;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.mobnav-foot p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  color: #2a2a2a;
  line-height: 1.5;
}

/* Hamburger → X animation */
.hmb.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hmb.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hmb.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.hmb span { transition: all .2s ease; }

/* Lock body scroll when nav open */
body.nav-open { overflow: hidden; }

/* ══════════════════════════════════════════════════
   v3.6.4 — SIDEBAR ADS + PLATFORM RANK BADGE
══════════════════════════════════════════════════ */

/* Platform rank badge (e.g. "#1" next to YouTube) */
.sdp-plat-rank {
  display: inline-block;
  font-family: var(--f-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── SIDEBAR AD ─────────────────────────────────── */
.sb-ad {
  margin: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--bd);
  position: relative;
  background: var(--bg2);
}
.sb-ad-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--f-ui);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  background: var(--bg);
  border: 1px solid var(--bd);
  padding: 2px 6px;
  z-index: 2;
}
.sb-ad-link {
  display: block;
  text-decoration: none;
}
.sb-ad-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}
.sb-ad-msg {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--ink);
  padding: 12px 14px;
  line-height: 1.5;
}

/* Placeholder when no ad is active */
.sb-ad-placeholder {
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  background: var(--bg);
}
.sb-ad-ph-inner {
  padding: 24px 20px;
  text-align: center;
}
.sb-ad-ph-icon {
  font-size: 28px;
  color: var(--bd);
  margin-bottom: 8px;
  line-height: 1;
  font-family: var(--f-num);
}
.sb-ad-ph-title {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.sb-ad-ph-sub {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--ink2);
  margin-bottom: 14px;
  line-height: 1.5;
}
.sb-ad-ph-btn {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 7px 16px;
  text-decoration: none;
  transition: all .15s;
}
.sb-ad-ph-btn:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ══════════════════════════════════════════════════
   CHART ARCHIVE — v3.6.5
══════════════════════════════════════════════════ */
.archive-wrap { max-width: 100%; }

.arc-hdr {
  background: var(--ink);
  padding: 36px 34px 32px;
  border-bottom: 4px solid var(--bd);
}
.arc-hdr-inner { max-width: 860px; }
.arc-eyebrow {
  font-family: var(--f-ui);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px;
}
.arc-title {
  font-family: var(--f-display);
  font-size: 40px; font-weight: 900; letter-spacing: -.05em;
  text-transform: uppercase; color: #fff; line-height: .95; margin-bottom: 10px;
}
.arc-sub {
  font-family: var(--f-body);
  font-size: 15px; color: rgba(255,255,255,.45); max-width: 560px; line-height: 1.7;
}
.arc-meta {
  font-family: var(--f-ui); font-size: 12px; color: rgba(255,255,255,.4);
  margin-top: 10px;
}
.arc-back-link {
  color: rgba(255,255,255,.5); text-decoration: none;
}
.arc-back-link:hover { color: #fff; }

/* Individual week layout */
.arc-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  align-items: start;
}
.arc-chart { border-right: 1px solid var(--bd); }

/* Sidebar cards */
.arc-sidebar { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.arc-info-card {
  border: 2px solid var(--ink);
  padding: 16px;
}
.arc-info-label {
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px;
}
.arc-info-title {
  font-family: var(--f-display); font-size: 22px; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); line-height: 1;
}
.arc-info-date { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); margin-top: 4px; }
.arc-info-count { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); margin-top: 2px; }

.arc-n1-card {
  background: var(--ink);
  padding: 16px;
}
.arc-n1-label {
  font-family: var(--f-ui); font-size: 8px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px;
}
.arc-n1-num {
  font-family: var(--f-num); font-size: 48px; color: #F2C200; line-height: 1;
}
.arc-n1-title {
  font-family: var(--f-display); font-size: 20px; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: #fff; line-height: 1; margin-top: 4px;
}
.arc-n1-artist { font-family: var(--f-ui); font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.arc-n1-badge {
  display: inline-block; margin-top: 10px;
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: #F2C200; color: #000; padding: 3px 8px;
}

.arc-browse { border: 1px solid var(--bd); }
.arc-browse-title {
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink2);
  padding: 10px 14px; border-bottom: 1px solid var(--bd); background: var(--bg2);
}
.arc-browse-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bd);
  text-decoration: none; font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  color: var(--ink2); transition: all .12s;
  border-left: 3px solid transparent;
}
.arc-browse-link:hover { color: var(--ink); background: var(--bg2); border-left-color: var(--ink); }
.arc-browse-link.arc-browse-current { color: var(--ink); border-left-color: #F2C200; background: var(--bg2); }
.arc-browse-count {
  font-family: var(--f-num); font-size: 14px; color: var(--bd);
}

/* Archive index page */
.arc-index-wrap { padding: 24px 34px; }
.arc-index-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  font-family: var(--f-ui); font-size: 12px; color: var(--ink2);
}
.arc-index-count { font-weight: 700; color: var(--ink); }

.arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
}
.arc-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--bg);
  text-decoration: none;
  transition: background .12s;
}
.arc-card:hover { background: var(--bg2); }
.arc-card-num {
  font-family: var(--f-num); font-size: 32px; color: var(--bd); flex-shrink: 0; line-height: 1;
}
.arc-card-body { flex: 1; min-width: 0; }
.arc-card-label {
  font-family: var(--f-ui); font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arc-card-date { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); margin-top: 2px; }
.arc-card-count { font-family: var(--f-ui); font-size: 10px; color: var(--bd); margin-top: 2px; }
.arc-card-arrow { font-size: 18px; color: var(--bd); flex-shrink: 0; }
.arc-card:hover .arc-card-arrow { color: var(--ink); }

/* Empty state */
.arc-empty {
  text-align: center; padding: 60px 24px;
}
.arc-empty-icon { font-size: 48px; margin-bottom: 14px; }
.arc-empty-title {
  font-family: var(--f-display); font-size: 28px; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--ink);
}
.arc-empty-sub {
  font-family: var(--f-body); font-size: 14px; color: var(--ink2);
  max-width: 420px; margin: 10px auto 20px; line-height: 1.7;
}
.arc-admin-link {
  font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: underline;
}

/* Mobile archive */
@media (max-width: 640px) {
  .arc-hdr { padding: 24px 16px 20px; }
  .arc-title { font-size: 28px; }
  .arc-layout { grid-template-columns: 1fr; }
  .arc-chart { border-right: none; }
  .arc-sidebar { padding: 14px 14px; }
  .arc-index-wrap { padding: 16px 14px; }
  .arc-grid { grid-template-columns: 1fr; }
}


/* ── PHASE 1D: functional additions, restored to original HOT100 visual language ── */
#hot100-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity .25s ease, visibility .25s ease;
}
#hot100-loader.hot100-loader-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.hot100-loader-card { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: hot100Float 1.8s ease-in-out infinite; }
.hot100-loader-mark { font-family: var(--f-d); font-size: 38px; letter-spacing: -.07em; color: var(--ink); line-height: .9; }
.hot100-loader-line { width: 62px; height: 2px; background: var(--gold); animation: hot100Pulse 1.2s ease-in-out infinite; }
.hot100-loader-text { font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
@keyframes hot100Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hot100Pulse { 0%,100% { opacity: .35; transform: scaleX(.72); } 50% { opacity: 1; transform: scaleX(1); } }

.sdp-note { font-family: var(--f-ui); font-size: 10px; color: var(--ink2); line-height: 1.45; margin: -3px 0 9px; border-left: 2px solid var(--bd); padding: 6px 9px; background: var(--bg2); }
.sdp-link-vote { border-color: var(--ink) !important; color: var(--ink) !important; }
.sdp-link-vote:hover { background: var(--ink) !important; color: var(--bg) !important; }
.pcc-prefill-note { margin: 14px auto 0; max-width: 680px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--bd); font-family: var(--f-ui); font-size: 12px; color: var(--ink); }

/* Keep partner areas in the original visual system; only improve logo visibility. */
.spon-sl.spon-active img { height: 30px; max-width: 150px; object-fit: contain; }
.spon-logo-chip img { height: 40px; max-width: 170px; object-fit: contain; }
.spon-logo-chip { min-height: 68px; }
@media(max-width:768px){
  .hot100-loader-mark { font-size: 32px; }
  .hot100-loader-text { font-size: 10px; text-align: center; }
  .spon-sl.spon-active img { height: 26px; }
  .spon-logo-chip img { height: 34px; max-width: 140px; }
}

/* Keep advert images neat without changing the original advert card styling. */
.sb-ad-img-wrap { display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; }
.sb-ad-img { object-fit: contain; max-height: 220px; background: var(--bg2); }

.h100-cm-weekbox { background:#fff; border:1px solid #dcdcde; border-left:4px solid #111; padding:18px 20px; margin:18px 0 16px; }
.h100-cm-week-title { font-family:var(--f-ui,Arial,sans-serif); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#111; margin-bottom:12px; }
.h100-cm-week-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:12px; align-items:end; }
.h100-cm-week-grid label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#555; }
.h100-cm-week-grid input[type=text], .h100-cm-week-grid input[type=date] { min-height:38px; border:1px solid #c3c4c7; padding:7px 10px; border-radius:0; background:#fff; font-size:13px; text-transform:none; letter-spacing:0; color:#111; font-weight:600; }
.h100-cm-week-grid .h100-cm-check { display:flex; flex-direction:row; gap:8px; align-items:center; background:#f7f7f7; border:1px solid #e4e4e4; padding:10px 12px; min-height:38px; color:#222; }
.h100-cm-weekbox p { margin:10px 0 0; color:#777; font-size:12px; }
.arc-demo-note { max-width:1180px; margin:18px auto 0; padding:12px 16px; background:var(--bg2); border:1px solid var(--bd); font-family:var(--f-ui,Arial,sans-serif); font-size:12px; font-weight:700; color:var(--ink); }
.arc-demo-badge { display:inline-flex; margin-left:8px; padding:3px 6px; border:1px solid var(--bd); background:var(--bg2); font-size:9px; letter-spacing:.12em; font-weight:800; color:var(--ink); vertical-align:middle; }
@media(max-width:900px){ .h100-cm-week-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .h100-cm-week-grid{ grid-template-columns:1fr; } }

/* ────────────────────────────────────────────────────────────
   Phase 2B — Vote For Your Song refined presentation
   Uses the existing HOT100 visual system: monochrome, gold accent,
   tight borders, bold headline type, clean editorial spacing.
──────────────────────────────────────────────────────────── */
.pcc-wrap { background: var(--bg); color: var(--ink); }
.pcc-hdr { background: var(--bg); border-bottom: 1px solid var(--bd); padding: 46px 22px 34px; text-align: center; }
.pcc-hdr-inner { max-width: 920px; margin: 0 auto; }
.pcc-eyebrow { font-family: var(--f-ui); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.pcc-title { font-family: var(--f-head); font-size: clamp(44px, 7vw, 92px); line-height: .88; margin: 9px 0 10px; letter-spacing: -.04em; text-transform: uppercase; }
.pcc-sub { max-width: 720px; margin: 0 auto; font-family: var(--f-body); font-size: 15px; line-height: 1.7; color: var(--ink2); }
.pcc-status-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pcc-window { font-family: var(--f-ui); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--bd); padding: 8px 10px; background: var(--bg2); color: var(--ink2); }
.pcc-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 0; padding: 8px 11px; font-family: var(--f-ui); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pcc-status.open { background: #101010; color: #fff; border: 1px solid #101010; }
.pcc-status.closed { background: var(--bg2); color: var(--ink2); border: 1px solid var(--bd); }
.pcc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #F2C200; box-shadow: 0 0 0 4px rgba(242,194,0,.16); animation: pccPulse 1.8s infinite; }
.pcc-status.closed .pcc-status-dot { background: #777; box-shadow: none; animation: none; }

.pcc-selected-song { display: grid; grid-template-columns: 120px 1fr; gap: 22px; max-width: 1120px; margin: 22px auto 0; padding: 18px 22px; border: 1px solid var(--bd); background: var(--bg2); align-items: center; }
.pcc-selected-cover { aspect-ratio: 1/1; background: #fff; border: 1px solid var(--bd); overflow: hidden; }
.pcc-selected-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcc-selected-kicker { font-family: var(--f-ui); font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.pcc-selected-body h2 { font-family: var(--f-head); font-size: clamp(28px, 4vw, 54px); line-height: .95; margin: 4px 0 0; text-transform: uppercase; letter-spacing: -.03em; }
.pcc-selected-body p { font-family: var(--f-ui); color: var(--ink2); margin: 4px 0 0; }
.pcc-selected-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.pcc-selected-meta span { font-family: var(--f-ui); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--bd); padding: 5px 7px; background: var(--bg); }
.pcc-selected-note { max-width: 720px; font-size: 13px; line-height: 1.55; }

.pcc-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); margin-top: 22px; background: var(--bg); }
.pcc-metric { padding: 20px 18px; border-right: 1px solid var(--bd); text-align: center; }
.pcc-metric:last-child { border-right: 0; }
.pcc-metric-num { font-family: var(--f-num); font-size: 36px; line-height: 1; font-weight: 900; display: block; }
.pcc-metric-label { margin-top: 6px; display: block; font-family: var(--f-ui); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.pcc-metric-week { font-family: var(--f-head); font-size: 30px; text-transform: uppercase; letter-spacing: -.02em; }

.pcc-layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); }
.pcc-standings { border-right: 1px solid var(--bd); min-height: 60vh; background: var(--bg); }
.pcc-section-hdr { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--bd); }
.pcc-section-title { font-family: var(--f-head); font-size: 29px; line-height: .95; text-transform: uppercase; letter-spacing: -.03em; }
.pcc-section-sub { font-family: var(--f-ui); font-size: 11px; color: var(--ink2); margin-top: 4px; }
.pcc-refresh-btn { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 10px 14px; font-family: var(--f-ui); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pcc-refresh-btn:hover { background: var(--bg); color: var(--ink); }
.pcc-chart-list { display: flex; flex-direction: column; }
.pcc-loading, .pcc-sample-note { padding: 22px; font-family: var(--f-body); color: var(--ink2); border-bottom: 1px solid var(--bd); background: var(--bg2); }
.pcc-sample-note { font-size: 12px; }

.pcc-song-card { display: grid; grid-template-columns: 54px 86px minmax(0,1fr) 132px; gap: 14px; align-items: stretch; padding: 16px 18px; border-bottom: 1px solid var(--bd); background: var(--bg); transition: background .16s ease; }
.pcc-song-card:hover { background: var(--bg2); }
.pcc-rank-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--bd); padding-right: 10px; }
.pcc-rank-badge span { font-family: var(--f-num); font-size: 33px; line-height: 1; font-weight: 900; }
.pcc-rank-badge small { font-family: var(--f-ui); font-size: 8px; letter-spacing: .12em; font-weight: 900; color: var(--ink2); }
.pcc-rank-badge.top3 span { color: #F2C200; -webkit-text-stroke: 1px #111; }
.pcc-art { aspect-ratio: 1/1; border: 1px solid var(--bd); background: #fff; overflow: hidden; align-self: center; }
.pcc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcc-song-main { min-width: 0; }
.pcc-song-kicker { font-family: var(--f-ui); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.pcc-song-main h3 { font-family: var(--f-head); font-size: 30px; line-height: .96; margin: 3px 0 0; letter-spacing: -.025em; text-transform: uppercase; }
.pcc-song-main p { font-family: var(--f-ui); font-size: 13px; font-weight: 700; color: var(--ink2); margin: 3px 0 0; }
.pcc-meta-line, .pcc-chart-meta, .pcc-platform-pills, .pcc-links-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pcc-meta-line span, .pcc-chart-meta span, .pcc-platform-pills span { font-family: var(--f-ui); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--bd); padding: 4px 6px; background: var(--bg); color: var(--ink2); }
.pcc-links-row a, .pcc-no-links { font-family: var(--f-ui); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.pcc-no-links { color: var(--ink2); border-bottom-color: var(--bd); }
.pcc-progress-wrap { margin-top: 10px; }
.pcc-progress { width: 100%; height: 8px; border: 1px solid var(--bd); background: var(--bg2); overflow: hidden; }
.pcc-progress span { display: block; height: 100%; background: var(--ink); transition: width .35s ease; }
.pcc-progress-label { font-family: var(--f-ui); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-top: 4px; }
.pcc-song-side { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; align-items: stretch; }
.pcc-mini-graph { height: 66px; border: 1px solid var(--bd); display: flex; gap: 5px; align-items: end; justify-content: center; padding: 7px 8px; background: var(--bg2); }
.pcc-mini-graph span { width: 20px; background: var(--ink); display: flex; align-items: end; justify-content: center; min-height: 14px; position: relative; }
.pcc-mini-graph span:nth-child(2) { background: #F2C200; }
.pcc-mini-graph em { position: absolute; bottom: -14px; font-style: normal; font-family: var(--f-ui); font-size: 7px; color: var(--ink2); font-weight: 900; }
.pcc-vote-btn, .pcc-vote-count { min-height: 58px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; width: 100%; }
.pcc-vote-btn:hover { background: #F2C200; color: #111; border-color: #111; }
.pcc-vote-btn.voted, .pcc-vote-btn:disabled { background: #F2C200; color: #111; border-color: #111; cursor: default; opacity: 1; }
.pcc-vote-count { background: var(--bg2); color: var(--ink); border-color: var(--bd); }
.pcc-vote-num { font-family: var(--f-num); font-size: 28px; line-height: .9; font-weight: 900; }
.pcc-vote-lbl { font-family: var(--f-ui); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }

.pcc-submit-col { background: var(--bg2); padding: 0; }
.pcc-form-card, .pcc-closed-card, .pcc-how-card { background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 22px; }
.pcc-form-title, .pcc-how-title, .pcc-closed-title { font-family: var(--f-head); font-size: 31px; line-height: .95; text-transform: uppercase; letter-spacing: -.03em; }
.pcc-form-sub, .pcc-closed-text { font-family: var(--f-body); font-size: 12px; color: var(--ink2); margin-top: 7px; line-height: 1.65; }
.pcc-field { margin-top: 13px; }
.pcc-field label { display: block; font-family: var(--f-ui); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; }
.pcc-field input, .pcc-field select { width: 100%; border: 1px solid var(--bd); background: var(--bg); color: var(--ink); padding: 12px 11px; font-family: var(--f-ui); font-size: 13px; border-radius: 0; }
.pcc-field input:focus, .pcc-field select:focus { outline: none; border-color: var(--ink); box-shadow: none; }
.pcc-submit-btn { width: 100%; margin-top: 15px; border: 1px solid var(--ink); background: #F2C200; color: #111; padding: 14px 12px; font-family: var(--f-ui); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.pcc-submit-btn:hover { background: var(--ink); color: var(--bg); }
.pcc-msg { min-height: 18px; margin-top: 12px; font-family: var(--f-ui); font-size: 11px; line-height: 1.5; }
.pcc-msg.success { color: #157a34; }
.pcc-msg.error { color: #c01818; }
.pcc-step { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-family: var(--f-body); font-size: 12px; color: var(--ink2); line-height: 1.6; }
.pcc-step-n { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-family: var(--f-ui); font-size: 10px; font-weight: 900; }
.pcc-closed-card { text-align: center; }
.pcc-closed-icon { font-family: var(--f-head); font-size: 48px; line-height: 1; }
.pcc-closed-timer { font-family: var(--f-num); font-size: 30px; margin-top: 10px; }

@media (max-width: 980px) {
  .pcc-layout { grid-template-columns: 1fr; border-left: none; border-right: none; }
  .pcc-standings { border-right: none; }
  .pcc-song-card { grid-template-columns: 46px 70px 1fr; }
  .pcc-song-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 130px; }
  .pcc-dashboard { grid-template-columns: repeat(2,1fr); }
  .pcc-metric:nth-child(2) { border-right: 0; }
  .pcc-metric:nth-child(1), .pcc-metric:nth-child(2) { border-bottom: 1px solid var(--bd); }
}
@media (max-width: 640px) {
  .pcc-hdr { padding: 34px 14px 26px; }
  .pcc-selected-song { grid-template-columns: 80px 1fr; margin: 14px 12px 0; padding: 12px; gap: 12px; }
  .pcc-dashboard { grid-template-columns: 1fr; }
  .pcc-metric { border-right: 0; border-bottom: 1px solid var(--bd); }
  .pcc-song-card { grid-template-columns: 42px 62px 1fr; gap: 10px; padding: 12px; }
  .pcc-rank-badge span { font-size: 26px; }
  .pcc-song-main h3 { font-size: 22px; }
  .pcc-song-side { grid-template-columns: 1fr; }
  .pcc-mini-graph { display: none; }
  .pcc-section-hdr { padding: 14px 12px; }
  .pcc-section-title { font-size: 24px; }
}

/* Phase 2D/3: editable Vote For Your Song intro copy — uses existing HOT100 type rhythm */
.pcc-editable-copy{max-width:860px;margin:16px auto 0;color:rgba(255,255,255,.82);font-family:var(--font-body,Inter,Arial,sans-serif);font-size:15px;line-height:1.75}
.pcc-editable-copy p{margin:0 0 10px}.pcc-editable-copy strong{color:#fff}.pcc-editable-copy a{color:#F2C200;text-decoration:none;border-bottom:1px solid rgba(242,194,0,.35)}

/* Phase 3 central payment request system — restrained HOT100 theme styling */
.hot100-payment-request{border:1px solid rgba(0,0,0,.10);background:#fff;padding:24px;margin:24px 0;font-family:var(--font-body,Inter,Arial,sans-serif)}
.hot100-payment-request-head .kicker{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#777;font-weight:800;margin-bottom:8px}
.hot100-payment-request-head h2{margin:0 0 8px;font-family:var(--font-display,'Archivo Black',Impact,sans-serif);text-transform:uppercase;letter-spacing:-.02em}.hot100-payment-request-head p{color:#555;max-width:760px;line-height:1.6}
.hot100-payment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.hot100-payment-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#333}.hot100-payment-form input,.hot100-payment-form textarea{border:1px solid #ddd;padding:12px;font:inherit;text-transform:none;letter-spacing:0}.hot100-payment-form textarea,.hot100-payment-fixed{grid-column:1/-1}.hot100-payment-fixed{border:1px solid rgba(0,0,0,.10);background:#fafafa;padding:14px}.hot100-payment-btn{grid-column:1/-1;background:#111;color:#F2C200;border:0;padding:14px 18px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.hot100-payment-success{border-left:4px solid #F2C200;background:#fafafa;padding:14px;margin:14px 0}.hot100-payment-error{border-left:4px solid #b91c1c;background:#fff5f5;padding:14px;margin:14px 0}.hot100-payment-details-box{border:1px solid rgba(0,0,0,.12);padding:20px;background:#fff;margin-top:16px}.hot100-payment-details-box h3{margin-top:0;text-transform:uppercase}.hot100-pay-block{border-top:1px solid rgba(0,0,0,.08);padding-top:12px;margin-top:12px;line-height:1.6}.hot100-pay-whatsapp{margin-top:14px;font-weight:900}.hot100-payment-details-box code{background:#111;color:#F2C200;padding:4px 8px}
@media(max-width:760px){.hot100-payment-form{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════
   PHASE 4 — Clean standalone pages
   Keeps the original HOT100 visual language: editorial, restrained, sharp.
════════════════════════════════════════════ */
.hot100-page-hero{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--bd);border-left:0;border-right:0;
  padding:28px 0 24px;margin:0 0 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;background:var(--bg)
}
.hot100-page-hero h1{border:0!important;padding:0!important;margin:0 0 10px!important;font-family:var(--f-display);font-size:clamp(38px,6vw,68px);font-weight:900;letter-spacing:-.055em;text-transform:uppercase;line-height:.88;color:var(--ink)}
.hot100-page-hero p{font-family:var(--f-body);font-size:16px;line-height:1.65;color:var(--ink2);max-width:720px;margin:0!important}.hot100-eyebrow,.hot100-card-meta{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}.hot100-page-cta,.hot100-page-form button{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:12px 16px;text-decoration:none!important;white-space:nowrap;cursor:pointer}.hot100-page-cta:hover,.hot100-page-form button:hover{background:#F2C200;color:#111}.hot100-editable-block{border:1px solid var(--bd);padding:18px;margin:0 0 24px;background:var(--bg2)}
.hot100-section-head{border-bottom:1px solid var(--bd);padding-bottom:10px;margin:30px 0 16px}.hot100-section-head h2{margin:0!important;font-size:clamp(24px,3vw,38px)!important}.hot100-section-head p{margin:7px 0 0!important;max-width:760px;color:var(--ink2);line-height:1.6}.hot100-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 28px}.hot100-card-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.hot100-info-card{border:1px solid var(--bd);background:var(--bg);padding:16px;min-height:0;transition:transform .18s ease,box-shadow .18s ease}.hot100-info-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.055)}.hot100-info-card h3{font-family:var(--f-display)!important;font-size:21px!important;line-height:.98!important;letter-spacing:-.04em!important;text-transform:uppercase!important;margin:0 0 10px!important;color:var(--ink)!important}.hot100-info-card p{font-family:var(--f-body);font-size:13.5px!important;line-height:1.58!important;margin:0!important;color:var(--ink2)}.hot100-info-card strong{color:var(--ink)}
.hot100-page-notice{border-left:4px solid #F2C200;background:#fffdf0;padding:13px 16px;margin:0 0 20px;font-family:var(--f-ui);font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#111}.hot100-form-panel{border:1px solid var(--bd);padding:20px;margin:30px 0;background:var(--bg)}.hot100-form-panel h2{margin-top:0!important}.hot100-form-panel p{color:var(--ink2);line-height:1.6;max-width:780px}.hot100-page-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hot100-page-form input,.hot100-page-form select,.hot100-page-form textarea{width:100%;border:1px solid var(--bd);background:var(--bg2);padding:12px 13px;font-family:var(--f-ui);font-size:13px;color:var(--ink);box-sizing:border-box}.hot100-page-form textarea{grid-column:1/-1;min-height:110px}.hot100-page-form button,.hot100-file-label,.hot100-consent{grid-column:1/-1}.hot100-file-label{font-family:var(--f-ui);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);border:1px dashed var(--bd);padding:12px;background:var(--bg2)}.hot100-file-label input{margin-top:9px;background:#fff}.hot100-consent{font-family:var(--f-body);font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start}.hot100-consent input{width:auto;margin-top:3px}.hot100-split{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;border:1px solid var(--bd);padding:20px;margin:24px 0;background:var(--bg)}.hot100-split h2{margin-top:0!important}.hot100-split p{color:var(--ink2);line-height:1.62}.hot100-data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hot100-data-list span{border:1px solid var(--bd);background:var(--bg2);padding:9px 10px;font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.hot100-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 26px}.hot100-chip-list span{border:1px solid var(--bd);background:var(--bg2);padding:9px 11px;font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}.hot100-feature-line{border:1px solid var(--bd);background:var(--bg2);padding:16px 18px;margin:18px 0 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}.hot100-feature-line h2{margin:0!important}.hot100-feature-line p{margin:4px 0 0!important;color:var(--ink2);line-height:1.55}.hot100-feature-price{font-family:var(--f-display);font-size:38px;font-weight:900;letter-spacing:-.05em;white-space:nowrap;color:var(--ink)}
.hot100-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 34px}.hot100-story-card{border:1px solid var(--bd);background:var(--bg);padding:0;overflow:hidden}.hot100-story-card.lead{grid-column:span 2;grid-row:span 2}.hot100-story-card img,.hot100-story-image{width:100%;height:162px;object-fit:cover;background:#111;color:#2c2c2c;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:36px;font-weight:900;letter-spacing:-.07em}.hot100-story-card.lead img,.hot100-story-card.lead .hot100-story-image{height:318px}.hot100-story-card .hot100-card-meta,.hot100-story-card h2,.hot100-story-card p,.hot100-story-card a{margin-left:15px;margin-right:15px}.hot100-story-card .hot100-card-meta{margin-top:15px}.hot100-story-card h2{font-family:var(--f-display);font-size:26px;line-height:.96;letter-spacing:-.04em;text-transform:uppercase;margin-top:0;margin-bottom:9px;color:var(--ink)}.hot100-story-card p{font-size:13.5px;line-height:1.58;color:var(--ink2)}.hot100-story-card a{display:inline-block;margin-bottom:16px;font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink)}
.hot100-radio-page-player{border:1px solid var(--ink);background:#111;color:#fff;padding:22px;display:grid;grid-template-columns:1fr 140px;gap:18px;align-items:center;margin-bottom:28px}.hot100-radio-page-player h2{color:#fff!important;margin:0 0 8px!important}.hot100-radio-page-player p{color:rgba(255,255,255,.7)!important;margin:0!important}.hot100-radio-disc{width:128px;height:128px;border-radius:50%;border:2px solid #F2C200;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:30px;font-weight:900;letter-spacing:-.07em;color:#F2C200;justify-self:end}
@media(max-width:980px){.hot100-card-grid,.hot100-card-grid.compact,.hot100-story-grid{grid-template-columns:1fr 1fr}.hot100-story-card.lead{grid-column:span 2}.hot100-page-hero{grid-template-columns:1fr}.hot100-page-cta{justify-self:start}.mnav ul li a{padding-left:8px!important;padding-right:8px!important;font-size:11px!important}.hot100-feature-line{align-items:flex-start;flex-direction:column}.hot100-feature-price{font-size:32px}}
@media(max-width:720px){.hot100-card-grid,.hot100-card-grid.compact,.hot100-story-grid,.hot100-split,.hot100-page-form,.hot100-radio-page-player{grid-template-columns:1fr}.hot100-story-card.lead{grid-column:span 1}.hot100-story-card.lead img,.hot100-story-card.lead .hot100-story-image{height:215px}.hot100-page-hero{padding:22px 0}.hot100-radio-disc{justify-self:start;width:100px;height:100px;font-size:24px}.hot100-data-list{grid-template-columns:1fr}.hot100-feature-price{font-size:30px}}


/* v3.7.9 — Header cleanup: no Charts menu clutter, clear spacing for LIVE + chart week */
.mast { gap: 20px; }
nav.mnav { min-width: 0; }
.mnav ul li a { white-space: nowrap; }
.mast-r { margin-left: auto; padding-left: 18px; border-left: 1px solid var(--bd); flex-shrink: 0; }
.mast-week { min-width: max-content; }
@media (max-width:1180px){
  .logo-wordmark{font-size:48px;}
  .mnav ul li a,.hot100-more-btn{padding-left:10px;padding-right:10px;}
  .mast-r{gap:12px;padding-left:14px;}
  .mast-search-btn{padding-left:16px;padding-right:16px;}
  .mast-live-pill{padding-left:18px;padding-right:18px;}
  .mast-week{font-size:14px;}
}
@media (max-width:768px){
  .hot100-more{display:none;}
  .mast-r{margin-left:0;padding-left:0;border-left:0;width:100%;justify-content:space-between;}
}


/* v3.7.10 — Chart row + mobile menu restoration pass
   Removes certification clutter from song cards and preserves the original mobile nav feel. */
.chart-row .cert-badge, .song-card .cert-badge, .sdp .cert-badge { display:none!important; }
@media (max-width:768px){
  html, body { overflow-x:hidden; }
  .chart-row { max-width:100%; }
  .mast { align-items:center; }
  .mast-r { min-width:0; }
  .mast-week { overflow:hidden; text-overflow:ellipsis; }
  #h100-nm a { -webkit-tap-highlight-color:transparent; }
}
@media (max-width:420px){
  .mast-search-btn { gap:8px; }
  .mast-live-pill { gap:8px; }
}


/* Phase 6 QA polish: safe responsive containment without changing HOT100 visual identity */
.hot100-page-notice{border:1px solid var(--bd,#E8E8E8);background:#fff;padding:12px 14px;font-family:var(--f-ui,'Space Grotesk',sans-serif);font-size:13px;font-weight:700;margin:14px 0;}

/* ═════════════════════════════════════════════════════
   v3.8.1 — Artist Intelligence, Engagement + Chart Cards
   Uses existing HOT100 theme variables and visual language.
═════════════════════════════════════════════════════ */
.hot100-ai-page{max-width:1240px;margin:0 auto;padding:34px 18px 70px;color:var(--ink);}
.hot100-ai-hero,.hot100-artist-hero,.hot100-song-hero{border:1px solid var(--bd);background:var(--bg);padding:28px;display:grid;gap:24px;margin-bottom:18px;}
.hot100-ai-hero{min-height:220px;align-content:end;background:linear-gradient(135deg,var(--bg),var(--bg2));}
.hot100-ai-hero .eyebrow,.hot100-artist-hero .eyebrow,.hot100-song-hero .eyebrow{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px;}
.hot100-ai-hero h1,.hot100-artist-hero h1,.hot100-song-hero h1{font-family:var(--f-display);font-size:clamp(42px,7vw,96px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;margin:0;color:var(--ink);}
.hot100-ai-hero p,.hot100-artist-hero p,.hot100-song-hero p{font-family:var(--f-body);font-size:15px;line-height:1.65;color:var(--ink2);max-width:760px;margin:0;}
.hot100-ai-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--bd);background:var(--bg);padding:12px;margin-bottom:18px;}
.hot100-ai-tools input{flex:1;border:1px solid var(--bd);background:var(--bg2);padding:13px 14px;font-family:var(--f-ui);font-size:12px;font-weight:700;color:var(--ink);}
.hot100-ai-tools span{font-family:var(--f-ui);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--ink2);white-space:nowrap;}
.hot100-artist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.hot100-artist-card{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;border:1px solid var(--bd);background:var(--bg);padding:12px;text-decoration:none;color:var(--ink);transition:background .15s ease, transform .15s ease;}
.hot100-artist-card:hover{background:var(--bg2);transform:translateY(-1px);}
.hot100-artist-card img{width:74px;height:74px;object-fit:cover;border:1px solid var(--bd);filter:grayscale(20%);}
.hot100-artist-card .artist-name{font-family:var(--f-ui);font-size:14px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1.1;}
.hot100-artist-card .artist-genre{font-family:var(--f-ui);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);margin-top:4px;}
.hot100-artist-card .artist-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.hot100-artist-card .artist-stats span,.meta-pills span{font-family:var(--f-ui);font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--bd);padding:4px 6px;color:var(--ink2);background:var(--bg2);}
.hot100-artist-hero,.hot100-song-hero{grid-template-columns:280px minmax(0,1fr);align-items:end;background:linear-gradient(135deg,var(--bg),var(--bg2));}
.artist-hero-image img,.song-cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--bd);display:block;}
.artist-actions,.song-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.hot100-ai-btn{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--bg)!important;border:1px solid var(--ink);padding:12px 15px;text-decoration:none!important;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.hot100-ai-btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--bd);}
.hot100-ai-btn:hover{background:#F2C200!important;color:#111!important;border-color:#F2C200!important;}
.hot100-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);margin-bottom:18px;}
.hot100-stat-strip>div{background:var(--bg);padding:18px 16px;min-height:86px;}
.hot100-stat-strip strong{font-family:var(--f-num);font-size:34px;font-weight:900;line-height:1;color:var(--ink);display:block;letter-spacing:-.04em;}
.hot100-stat-strip span{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:8px;display:block;}
.hot100-ai-section{border:1px solid var(--bd);background:var(--bg);padding:20px;margin:18px 0;}
.hot100-ai-section .section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;border-bottom:1px solid var(--bd);padding-bottom:12px;margin-bottom:14px;}
.hot100-ai-section h2{font-family:var(--f-display);font-size:clamp(26px,4vw,46px);line-height:1;text-transform:uppercase;letter-spacing:-.04em;margin:0;color:var(--ink);}
.hot100-ai-section .section-head span{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);}
.hot100-song-intel-list{display:grid;gap:8px;}
.hot100-song-intel-card{display:grid;grid-template-columns:56px 72px minmax(0,1fr) 96px;gap:12px;align-items:center;border:1px solid var(--bd);background:var(--bg);padding:10px;}
.hot100-song-intel-card .rank{font-family:var(--f-num);font-size:22px;font-weight:900;text-align:center;color:var(--ink);}
.hot100-song-intel-card img{width:72px;height:72px;object-fit:cover;border:1px solid var(--bd);}
.hot100-song-intel-card .song-info a{font-family:var(--f-ui);font-size:14px;font-weight:900;text-transform:uppercase;color:var(--ink);text-decoration:none;}
.hot100-song-intel-card .song-info span{display:block;font-family:var(--f-ui);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);margin-top:4px;}
.hot100-song-intel-card .song-actions{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;}
.hot100-song-intel-card .song-actions a,.hot100-song-intel-card .song-actions button{font-family:var(--f-ui);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--bd);background:var(--bg2);color:var(--ink);padding:7px 8px;text-decoration:none;cursor:pointer;}
.mini-history{height:34px;display:flex;align-items:flex-end;gap:3px;margin-top:8px;max-width:420px;}
.mini-history.large{height:180px;gap:8px;border:1px solid var(--bd);padding:14px;background:var(--bg2);max-width:none;}
.mini-history span{width:12px;min-height:6px;background:var(--ink);display:flex;align-items:flex-start;justify-content:center;position:relative;}
.mini-history.large span{width:28px;background:#F2C200;}
.mini-history em{display:none;position:absolute;bottom:100%;font-style:normal;font-family:var(--f-ui);font-size:8px;font-weight:900;color:var(--ink);margin-bottom:4px;}
.mini-history.large em{display:block;}
.hot100-timeline{display:grid;gap:1px;background:var(--bd);border:1px solid var(--bd);}
.hot100-timeline>div{background:var(--bg);padding:12px 14px;display:grid;grid-template-columns:180px 1fr;gap:12px;}
.hot100-timeline strong{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.hot100-timeline span{font-family:var(--f-body);font-size:13px;color:var(--ink2);}
.hot100-meta-panel{display:grid;gap:12px;}
.meta-links{display:flex;gap:8px;flex-wrap:wrap;}
.meta-links a,.meta-links span{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--bd);padding:10px 12px;color:var(--ink);text-decoration:none;background:var(--bg2);}
.meta-links a:hover{background:var(--ink);color:var(--bg);}
.hot100-engage{display:grid;gap:14px;}
.reaction-row{display:flex;gap:8px;flex-wrap:wrap;}
.reaction-row button{border:1px solid var(--bd);background:var(--bg2);padding:10px 12px;font-family:var(--f-ui);font-size:18px;cursor:pointer;}
.reaction-row button span{font-size:11px;font-weight:900;margin-left:4px;color:var(--ink2);}
.fan-wall{display:grid;gap:8px;}
.fan-wall blockquote{margin:0;border-left:3px solid #F2C200;background:var(--bg2);padding:10px 12px;font-family:var(--f-body);font-size:13px;color:var(--ink2);}
.fan-wall strong{font-family:var(--f-ui);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin-right:8px;}
.fan-form{display:grid;grid-template-columns:220px 1fr 140px;gap:8px;}
.fan-form input,.fan-form textarea{border:1px solid var(--bd);background:var(--bg2);padding:11px 12px;font-family:var(--f-ui);font-size:12px;color:var(--ink);}
.fan-form textarea{min-height:43px;resize:vertical;}
.fan-form button{border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-family:var(--f-ui);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;}
.hcg-preview svg{max-width:100%;height:auto;display:block;}
@media(max-width:980px){.hot100-artist-grid{grid-template-columns:repeat(2,1fr)}.hot100-artist-hero,.hot100-song-hero{grid-template-columns:180px 1fr}.hot100-stat-strip{grid-template-columns:repeat(2,1fr)}.fan-form{grid-template-columns:1fr}.hot100-song-intel-card{grid-template-columns:46px 58px 1fr}.hot100-song-intel-card .song-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:620px){.hot100-ai-page{padding:18px 10px 50px}.hot100-ai-hero,.hot100-artist-hero,.hot100-song-hero{padding:18px;grid-template-columns:1fr}.hot100-artist-grid{grid-template-columns:1fr}.hot100-ai-tools{display:grid}.hot100-stat-strip{grid-template-columns:1fr 1fr}.hot100-ai-section .section-head{display:block}.hot100-timeline>div{grid-template-columns:1fr}.artist-hero-image,.song-cover{max-width:220px}.hot100-song-intel-card{gap:8px;padding:8px}.hot100-song-intel-card img{width:58px;height:58px}.hot100-song-intel-card .song-info a{font-size:12px}.mini-history.large{height:130px}.mini-history.large span{width:20px}}


/* HOT100 v3.8.9 — Song detail access + front-page fan engagement */
.sdp-link-song{
  background:var(--ink)!important;
  color:var(--bg)!important;
  border-color:var(--ink)!important;
}
.sdp-link-song:hover{
  background:var(--gold)!important;
  color:var(--ink)!important;
  border-color:var(--gold)!important;
}
.hot100-front-engage-section{
  margin:36px 0 0;
  border:1px solid var(--bd);
  background:var(--bg);
  padding:22px;
}
.hfe-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--bd);
  padding-bottom:16px;
  margin-bottom:18px;
}
.hfe-kicker{
  display:block;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:6px;
}
.hfe-head h2{
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,52px);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:var(--ink);
}
.hfe-head p{
  margin:10px 0 0;
  max-width:640px;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.55;
  color:var(--ink2);
}
.hfe-all{
  flex:0 0 auto;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  padding:11px 13px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
}
.hfe-all:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.hfe-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.hfe-card{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hfe-song-top{
  display:grid;
  grid-template-columns:auto 58px 1fr;
  gap:10px;
  align-items:center;
}
.hfe-rank{
  font-family:var(--f-num);
  font-size:30px;
  line-height:1;
  color:var(--ink);
  min-width:42px;
}
.hfe-song-top img{
  width:58px;
  height:58px;
  object-fit:cover;
  border:1px solid var(--bd);
  background:var(--bg);
}
.hfe-song-copy{min-width:0;}
.hfe-song-title{
  display:block;
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
  color:var(--ink);
  text-decoration:none;
  line-height:1.2;
}
.hfe-song-copy span{
  display:block;
  margin-top:4px;
  font-family:var(--f-body);
  font-size:12px;
  color:var(--ink2);
}
.hfe-card .hot100-engage{
  gap:10px;
}
.hfe-card .reaction-row{
  gap:6px;
}
.hfe-card .reaction-row button{
  flex:1 1 42px;
  background:var(--bg);
  padding:8px 8px;
  font-size:15px;
}
.hfe-card .fan-wall blockquote{
  background:var(--bg);
  font-size:12px;
}
.hfe-card .fan-form{
  grid-template-columns:1fr;
}
.hfe-card .fan-form input,
.hfe-card .fan-form textarea{
  background:var(--bg);
  font-size:12px;
}
.hfe-card .fan-form button{
  min-height:38px;
}
.hfe-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
}
.hfe-actions a{
  border:1px solid var(--ink);
  padding:9px 10px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:var(--bg);
}
.hfe-actions a:first-child{
  background:var(--ink);
  color:var(--bg);
}
@media(max-width:980px){
  .hfe-grid{grid-template-columns:1fr;}
  .hfe-head{align-items:flex-start;flex-direction:column;}
}
@media(max-width:560px){
  .hot100-front-engage-section{padding:16px;margin-top:24px;}
  .hfe-song-top{grid-template-columns:auto 50px 1fr;}
  .hfe-song-top img{width:50px;height:50px;}
  .hfe-card .reaction-row button{font-size:14px;}
}



/* HOT100 v3.9.3 — Fan Pulse premium front-cover redesign */
.hot100-front-engage-section.hot100-open-pulse-section{
  margin:46px 0 0;
  padding:0;
  border:0;
  background:transparent;
  position:relative;
  isolation:isolate;
}
.hot100-front-engage-section.hot100-open-pulse-section *{
  box-sizing:border-box;
}
.hot100-open-pulse-section .hfp-shell{
  position:relative;
  overflow:hidden;
  border:1px solid var(--bd);
  background:
    radial-gradient(circle at 88% 4%, rgba(242,194,0,.10), transparent 26%),
    linear-gradient(180deg,var(--bg) 0%, #fbfaf6 100%);
  padding:26px;
}
.hot100-open-pulse-section .hfp-shell:before{
  content:"";
  position:absolute;
  right:22px;
  top:20px;
  width:210px;
  height:160px;
  background-image:radial-gradient(var(--gold) 1.1px, transparent 1.2px);
  background-size:12px 12px;
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
.hot100-open-pulse-section .hfp-shell:after{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-95px;
  width:320px;
  height:320px;
  border:1px solid rgba(242,194,0,.16);
  border-radius:50%;
  box-shadow:0 0 0 36px rgba(242,194,0,.025),0 0 0 80px rgba(242,194,0,.015);
  pointer-events:none;
  z-index:0;
}
.hfp-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:end;
  border-bottom:1px solid var(--bd);
  padding-bottom:20px;
  margin-bottom:20px;
}
.hfp-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.hfp-kicker:before{
  content:"";
  width:34px;
  height:2px;
  background:var(--gold);
  display:inline-block;
}
.hfp-head h2{
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(42px,5.8vw,84px);
  line-height:.86;
  letter-spacing:-.07em;
  text-transform:uppercase;
  color:var(--ink);
}
.hfp-head p{
  margin:12px 0 0;
  max-width:820px;
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.55;
  color:var(--ink2);
}
.hfp-week-card{
  min-width:210px;
  border:1px solid var(--bd);
  border-left:5px solid var(--gold);
  background:rgba(255,255,255,.92);
  padding:14px 16px;
  box-shadow:0 12px 26px rgba(0,0,0,.035);
}
.hfp-week-card span{
  display:block;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--ink2);
  text-transform:uppercase;
}
.hfp-week-card strong{
  display:block;
  margin-top:7px;
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.25;
  font-weight:900;
  color:var(--ink);
}
.hfp-board{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(280px,.34fr) minmax(0,.66fr);
  gap:18px;
  align-items:stretch;
}
.hfp-intro-panel{
  position:relative;
  overflow:hidden;
  min-height:392px;
  border:1px solid var(--bd);
  background:
    linear-gradient(145deg,var(--ink) 0%, #171717 58%, #070707 100%);
  color:var(--bg);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 20px 42px rgba(0,0,0,.10);
}
.hfp-intro-panel:after{
  content:"";
  position:absolute;
  right:-46px;
  top:-46px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(242,194,0,.13);
  border:1px solid rgba(242,194,0,.32);
}
.hfp-live-pill{
  position:relative;
  z-index:1;
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(242,194,0,.38);
  background:rgba(242,194,0,.08);
  color:var(--gold);
  padding:8px 10px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hfp-live-pill i{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(242,194,0,.14);
}
.hfp-intro-panel h3{
  position:relative;
  z-index:1;
  margin:18px 0 0;
  max-width:330px;
  font-family:var(--f-display);
  font-size:clamp(28px,3.2vw,48px);
  line-height:.92;
  letter-spacing:-.05em;
  text-transform:uppercase;
  color:var(--bg);
}
.hfp-intro-panel p{
  position:relative;
  z-index:1;
  margin:14px 0 18px;
  max-width:340px;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.hfp-mini-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 18px;
}
.hfp-mini-grid span{
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.05);
  padding:9px 10px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  color:rgba(255,255,255,.86);
}
.hfp-vote-link{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  width:100%;
  border:1px solid var(--gold);
  background:var(--gold);
  color:var(--ink);
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:transform .16s ease, background .16s ease;
}
.hfp-vote-link:hover{
  transform:translateY(-2px);
  background:var(--bg);
}
.hfp-comment-panel{
  border:1px solid var(--bd);
  background:rgba(255,255,255,.94);
  padding:18px;
  box-shadow:0 16px 34px rgba(0,0,0,.045);
}
.hfp-comment-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--bd);
  padding-bottom:14px;
  margin-bottom:14px;
}
.hfp-panel-label{
  display:block;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:4px;
}
.hfp-comment-top strong{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(22px,2.6vw,36px);
  line-height:.95;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
}
.hfp-safe{
  flex:0 0 auto;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:8px 10px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}
.hot100-chart-pulse-box{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hot100-chart-pulse-box .reaction-row-chart{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  border:0;
}
.hot100-chart-pulse-box .reaction-row-chart button{
  min-height:42px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--bg2);
  color:var(--ink);
  padding:8px 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.hot100-chart-pulse-box .reaction-row-chart button:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  background:var(--bg);
  box-shadow:0 10px 22px rgba(0,0,0,.05);
}
.hot100-chart-pulse-box .reaction-row-chart .h100-emoji{
  font-size:18px;
  line-height:1;
}
.hot100-chart-pulse-box .reaction-row-chart .h100-count{
  font-family:var(--f-ui);
  font-size:11px;
  font-weight:900;
  color:var(--ink2);
}
.hot100-chart-pulse-box .chart-fan-wall{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:390px;
  overflow:auto;
  padding-right:6px;
}
.hot100-chart-pulse-box .chart-fan-wall::-webkit-scrollbar{width:6px;}
.hot100-chart-pulse-box .chart-fan-wall::-webkit-scrollbar-thumb{background:var(--gold);}
.hot100-chart-pulse-box .chart-fan-wall blockquote{
  margin:0;
  border:1px solid var(--bd);
  border-radius:14px;
  background:var(--bg2);
  padding:13px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:11px;
  align-items:start;
}
.hot100-chart-pulse-box .fan-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
  box-shadow:inset 0 -3px 0 rgba(242,194,0,.35);
}
.hot100-chart-pulse-box .fan-comment-body{
  min-width:0;
  display:block;
}
.hot100-chart-pulse-box .fan-comment-body strong{
  display:inline-block;
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
  color:var(--ink);
  margin-right:7px;
}
.hot100-chart-pulse-box .fan-comment-body em{
  font-style:normal;
  font-family:var(--f-body);
  font-size:11px;
  color:var(--ink2);
}
.hot100-chart-pulse-box .fan-comment-body span{
  display:block;
  margin-top:5px;
  font-family:var(--f-body);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink);
  word-break:break-word;
}
.hot100-chart-pulse-box .fan-empty{
  border:1px dashed var(--bd);
  border-radius:14px;
  background:var(--bg2);
  padding:28px 18px;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.5;
  color:var(--ink2);
  text-align:center;
}
.hot100-chart-pulse-box .chart-fan-form{
  display:grid;
  grid-template-columns:minmax(170px,.30fr) minmax(0,.70fr) auto;
  gap:10px;
  align-items:stretch;
  border-top:1px solid var(--bd);
  padding-top:14px;
}
.hot100-chart-pulse-box .chart-fan-form input,
.hot100-chart-pulse-box .chart-fan-form textarea{
  width:100%;
  border:1px solid var(--bd);
  border-radius:12px;
  background:var(--bg2);
  color:var(--ink);
  padding:13px 14px;
  font-family:var(--f-body);
  font-size:13px;
  min-height:48px;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.hot100-chart-pulse-box .chart-fan-form textarea{
  min-height:96px;
  resize:vertical;
}
.hot100-chart-pulse-box .chart-fan-form input:focus,
.hot100-chart-pulse-box .chart-fan-form textarea:focus{
  background:var(--bg);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(242,194,0,.12);
}
.hot100-chart-pulse-box .chart-fan-form > button{
  min-height:48px;
  border:1px solid var(--ink);
  border-radius:12px;
  background:var(--ink);
  color:var(--bg);
  padding:0 16px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.hot100-chart-pulse-box .chart-fan-form > button:hover{
  transform:translateY(-2px);
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.hot100-chart-pulse-box .emoji-pack{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px;
  border:1px solid var(--bd);
  border-radius:14px;
  background:rgba(255,255,255,.62);
  order:4;
}
.hot100-chart-pulse-box .emoji-pack button{
  width:34px;
  height:34px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.hot100-chart-pulse-box .emoji-pack button:hover{
  transform:translateY(-2px) scale(1.04);
  border-color:var(--bd);
  background:var(--bg);
}
.hot100-chart-pulse-box .fan-moderation-note{
  margin:0;
  border-top:1px solid var(--bd);
  padding-top:10px;
  font-family:var(--f-body);
  font-size:11px;
  line-height:1.45;
  color:var(--ink2);
}
@media(max-width:1050px){
  .hfp-board{grid-template-columns:1fr;}
  .hfp-intro-panel{min-height:auto;}
}
@media(max-width:820px){
  .hot100-open-pulse-section .hfp-shell{padding:18px;}
  .hfp-head{grid-template-columns:1fr;align-items:start;}
  .hfp-week-card{width:100%;min-width:0;}
  .hot100-chart-pulse-box .chart-fan-form{grid-template-columns:1fr;}
  .hot100-chart-pulse-box .chart-fan-form > button{width:100%;}
}
@media(max-width:560px){
  .hot100-front-engage-section.hot100-open-pulse-section{margin-top:28px;}
  .hot100-open-pulse-section .hfp-shell{padding:14px;}
  .hfp-head h2{font-size:42px;}
  .hfp-intro-panel,.hfp-comment-panel{padding:14px;}
  .hfp-mini-grid{grid-template-columns:1fr 1fr;}
  .hot100-chart-pulse-box .reaction-row-chart button{flex:1 1 52px;padding:8px 8px;}
  .hot100-chart-pulse-box .chart-fan-wall{max-height:330px;}
  .hot100-chart-pulse-box .fan-comment-body span{font-size:13px;}
  .hfp-comment-top{align-items:flex-start;flex-direction:column;}
}



/* HOT100 v3.9.4 — bugfixes: dropdown voting, share graphics and removed homepage fan pulse */
.sdp-link-graphic{
  background:var(--gold)!important;
  color:var(--ink)!important;
  border-color:var(--gold)!important;
}
.sdp-link-graphic:hover{
  background:var(--ink)!important;
  color:var(--bg)!important;
  border-color:var(--ink)!important;
}
.hot100-song-share-section{
  border-color:var(--bd);
}
.hot100-song-share-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--bd);
  background:
    radial-gradient(circle at 92% 8%, rgba(242,194,0,.08), transparent 28%),
    var(--bg);
  padding:18px;
}
.hot100-song-share-card strong{
  display:block;
  font-family:var(--f-ui);
  font-size:15px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:7px;
}
.hot100-song-share-card p{
  margin:0;
  max-width:720px;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.55;
  color:var(--ink2);
}
.hot100-song-share-card .hot100-ai-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
@media(max-width:760px){
  .hot100-song-share-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .hot100-song-share-card .hot100-ai-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}


/* HOT100 v3.9.5 — Artist Power Rankings */
.hot100-ai-formula{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  border:1px solid var(--bd);
  border-left:4px solid var(--gold);
  background:var(--bg);
  padding:16px 18px;
  margin:18px 0;
}
.hot100-ai-formula strong{
  font-family:var(--f-ui);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.hot100-ai-formula span{
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.55;
  color:var(--ink2);
}
.hot100-artist-power-grid .hot100-power-artist-card{
  position:relative;
  grid-template-columns:54px 84px 1fr;
  align-items:center;
}
.hot100-power-artist-card .power-rank{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--gold);
  background:var(--ink);
  color:var(--gold);
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
}
.hot100-power-artist-card .artist-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.hot100-power-artist-card .artist-stats span{
  display:inline-flex;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:5px 7px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:800;
  color:var(--ink2);
}
.sb-artist-songs.small{
  opacity:.72;
  font-size:10px;
  margin-top:2px;
}
@media(max-width:640px){
  .hot100-ai-formula{grid-template-columns:1fr;}
  .hot100-artist-power-grid .hot100-power-artist-card{grid-template-columns:44px 64px 1fr;}
  .hot100-power-artist-card .power-rank{width:36px;height:36px;font-size:11px;}
}

/* HOT100 v3.9.6 — usability and discovery improvements */
.cr-info h3 a,
.htit a,
.sdp-song-title a,
.sdp-song-artist a,
.artist a,
.hart a{
  color:inherit;
  text-decoration:none;
}
.cr-info h3 a:hover,
.htit a:hover,
.sdp-song-title a:hover,
.sdp-song-artist a:hover,
.artist a:hover,
.hart a:hover{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.hot100-weekly-highlights{
  margin:34px 0 0;
  border:1px solid var(--bd);
  background:
    radial-gradient(circle at 94% 0%, rgba(242,194,0,.10), transparent 28%),
    var(--bg);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.hot100-weekly-highlights:before{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:160px;
  height:120px;
  background-image:radial-gradient(var(--gold) 1px, transparent 1px);
  background-size:12px 12px;
  opacity:.18;
  pointer-events:none;
}
.hwh-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--bd);
  padding-bottom:14px;
  margin-bottom:14px;
}
.hwh-head span{
  font-family:var(--f-display);
  font-size:clamp(24px,3.2vw,42px);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:var(--ink);
}
.hwh-head a{
  flex:0 0 auto;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  text-decoration:none;
  padding:10px 12px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hwh-head a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.hwh-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.hwh-card{
  position:relative;
  min-height:142px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid var(--bd);
  background:var(--bg2);
  color:var(--ink);
  text-decoration:none;
  padding:14px;
  overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hwh-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 14px 28px rgba(0,0,0,.06);
}
.hwh-card em{
  position:absolute;
  left:14px;
  top:12px;
  font-family:var(--f-ui);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.hwh-card strong{
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.18;
  font-weight:900;
  color:var(--ink);
  max-width:78%;
}
.hwh-card span{
  display:block;
  margin-top:5px;
  font-family:var(--f-body);
  font-size:12px;
  color:var(--ink2);
}
.hwh-card b{
  position:absolute;
  right:12px;
  bottom:12px;
  font-family:var(--f-num);
  font-size:34px;
  line-height:1;
  color:rgba(0,0,0,.10);
  letter-spacing:-.02em;
}
.hot100-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hot100-related-card{
  display:grid;
  grid-template-columns:64px 1fr;
  grid-template-areas:"img tag" "img title" "img meta";
  gap:3px 10px;
  align-items:center;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:10px;
  text-decoration:none;
  color:var(--ink);
}
.hot100-related-card:hover{border-color:var(--gold);background:var(--bg);}
.hot100-related-card img{grid-area:img;width:64px;height:64px;object-fit:cover;border:1px solid var(--bd);}
.hot100-related-card span{grid-area:tag;font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.hot100-related-card strong{grid-area:title;font-family:var(--f-ui);font-size:13px;line-height:1.2;font-weight:900;}
.hot100-related-card em{grid-area:meta;font-style:normal;font-family:var(--f-body);font-size:12px;color:var(--ink2);}
.hot100-ai-formula{
  border-left:4px solid var(--gold);
  background:var(--bg2);
  padding:14px 16px;
}
.hot100-ai-formula strong{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px;color:var(--gold);}
.hot100-ai-formula span{font-family:var(--f-body);font-size:13px;line-height:1.55;color:var(--ink2);}
.hot100-power-artist-card .power-rank{
  font-family:var(--f-num);
  font-size:34px;
  color:var(--gold);
  line-height:1;
}
@media(max-width:900px){
  .hwh-grid{grid-template-columns:1fr 1fr;}
  .hot100-related-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .hwh-head{align-items:flex-start;flex-direction:column;}
  .hwh-head a{width:100%;text-align:center;}
  .hwh-grid{grid-template-columns:1fr;}
  .hwh-card{min-height:118px;}
}


/* HOT100 v3.9.7 — Accurate chart position history */
.hot100-history-note,
.sdp-sparkline-wrap .hot100-history-note{
  margin-top:10px;
  border:1px solid var(--bd);
  border-left:3px solid var(--gold);
  background:var(--bg2);
  padding:9px 11px;
  font-family:var(--f-body);
  font-size:12px;
  line-height:1.45;
  color:var(--ink2);
}
.sdp-history-single{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:12px;
  font-family:var(--f-body);
  font-size:13px;
  color:var(--ink2);
}
.sdp-history-single strong{
  font-family:var(--f-ui);
  color:var(--ink);
}
.mini-history.single span{
  min-width:28px;
  opacity:.95;
}


/* HOT100 v3.9.8 — header/page/content polish */
.hot100-ai-note{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:14px 16px;
  margin:0 0 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hot100-ai-note strong{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  flex:0 0 auto;
}
.hot100-ai-note span{
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.5;
  color:var(--ink2);
}
.hot100-power-artist-card img,
.sb-artist-img,
.artist-hero-image img{
  object-fit:cover;
  background:var(--bg2);
}
@media(max-width:760px){
  .hot100-ai-note{display:block;}
  .hot100-ai-note strong{display:block;margin-bottom:6px;}
}


/* HOT100 v4.0.0 — premium song information interface + share graphic reliability */
.hot100-song-profile-premium{
  max-width:1280px;
}
.hot100-song-hero-premium{
  position:relative;
  overflow:hidden;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  align-items:center;
  padding:34px;
  background:
    radial-gradient(circle at 88% 8%, rgba(242,194,0,.10), transparent 28%),
    linear-gradient(135deg,var(--bg),var(--bg2));
}
.hot100-song-hero-premium:after{
  content:"";
  position:absolute;
  right:22px;
  top:22px;
  width:190px;
  height:150px;
  background-image:radial-gradient(var(--gold) 1.1px, transparent 1.2px);
  background-size:12px 12px;
  opacity:.16;
  pointer-events:none;
}
.hot100-song-hero-premium .song-cover{
  position:relative;
  z-index:1;
}
.hot100-song-hero-premium .song-cover:before{
  content:"";
  position:absolute;
  inset:-12px;
  border:1px solid var(--gold);
  background:rgba(242,194,0,.08);
  z-index:-1;
}
.hot100-song-hero-premium .song-cover img{
  box-shadow:0 22px 48px rgba(0,0,0,.12);
  background:var(--bg);
}
.hot100-song-hero-premium .song-copy{
  position:relative;
  z-index:1;
}
.hot100-song-hero-premium .song-copy h1{
  max-width:800px;
  font-size:clamp(44px,7vw,102px);
}
.song-artist-line a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  font-weight:800;
}
.song-mini-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
}
.song-mini-metrics span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--bd);
  background:var(--bg);
  padding:9px 11px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink2);
}
.song-mini-metrics b{
  font-family:var(--f-num);
  font-size:22px;
  line-height:1;
  color:var(--ink);
  letter-spacing:0;
}
.hot100-stat-strip-premium{
  grid-template-columns:repeat(5,1fr);
}
.hot100-stat-strip-premium > div{
  min-height:96px;
}
.hot100-song-share-section-premium{
  background:
    radial-gradient(circle at 96% 0%, rgba(242,194,0,.08), transparent 30%),
    var(--bg);
}
.hot100-song-share-section-premium .hot100-song-share-card{
  border:1px solid var(--bd);
  border-left:5px solid var(--gold);
  box-shadow:0 14px 30px rgba(0,0,0,.035);
}
.hot100-song-share-section-premium .hot100-song-share-card strong{
  font-size:16px;
}
.hot100-card-modal .hot100-ai-btn{
  min-height:40px;
  border-radius:0;
}
.hot100-card-modal select,
.hot100-card-modal button{
  font-family:var(--f-ui);
}
.page-inner{
  max-width:980px;
}
.page-inner h1{
  font-size:clamp(38px,6vw,68px);
}
.page-inner p,
.hot100-page-hero p,
.hot100-info-card p,
.hot100-section-head p{
  text-wrap:pretty;
}
.hot100-card-grid,
.hot100-story-grid{
  align-items:stretch;
}
.hot100-info-card,
.hot100-story-card,
.hot100-form-panel,
.hot100-editable-block{
  overflow-wrap:anywhere;
}
@media(max-width:900px){
  .hot100-song-hero-premium{
    grid-template-columns:1fr;
    padding:22px;
  }
  .hot100-song-hero-premium .song-cover{
    max-width:420px;
  }
  .hot100-stat-strip-premium{
    grid-template-columns:repeat(2,1fr);
  }
  .hot100-stat-strip-premium > div:last-child{
    grid-column:1/-1;
  }
}
@media(max-width:680px){
  .hot100-ai-page{
    padding:22px 12px 54px;
  }
  .hot100-song-hero-premium{
    padding:16px;
    gap:18px;
  }
  .hot100-song-hero-premium .song-cover{
    max-width:100%;
  }
  .hot100-song-hero-premium .song-copy h1{
    font-size:clamp(34px,12vw,52px);
    line-height:.92;
    letter-spacing:-.045em;
  }
  .hot100-song-hero-premium .eyebrow{
    font-size:9px;
    line-height:1.4;
  }
  .song-mini-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .song-mini-metrics span{
    justify-content:space-between;
    padding:9px;
    font-size:8.5px;
  }
  .song-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .song-actions .hot100-ai-btn{
    width:100%;
  }
  .hot100-stat-strip-premium{
    grid-template-columns:1fr 1fr;
  }
  .hot100-stat-strip strong{
    font-size:30px;
  }
  .hot100-ai-section{
    padding:15px;
  }
  .hot100-ai-section .section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .hot100-ai-section h2{
    font-size:clamp(24px,9vw,38px);
  }
  .hot100-song-share-card{
    padding:15px;
  }
  .page-inner{
    padding:34px 18px 68px;
  }
  .page-inner .page-meta{
    flex-wrap:wrap;
    gap:8px;
  }
  .page-inner h1{
    font-size:clamp(34px,11vw,48px);
  }
  .page-inner p,
  .page-inner ul,
  .page-inner ol{
    font-size:15px;
    line-height:1.7;
  }
  .hot100-card-grid{
    grid-template-columns:1fr!important;
  }
  .hot100-page-hero{
    grid-template-columns:1fr;
    padding-top:22px;
  }
  .hot100-page-hero h1{
    font-size:clamp(34px,10vw,50px);
  }
}


/* HOT100 v4.0.2 — standalone share graphic fallback page */
.hot100-share-page{
  max-width:1240px;
  margin:0 auto;
  padding:34px 18px 76px;
}
.hot100-share-page-hero{
  border:1px solid var(--bd);
  background:linear-gradient(135deg,var(--bg),var(--bg2));
  padding:26px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:18px;
}
.hot100-share-page-hero .eyebrow{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.hot100-share-page-hero h1{
  font-family:var(--f-display);
  font-size:clamp(38px,6vw,74px);
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.hot100-share-page-hero p{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink2);
  line-height:1.6;
}
.hot100-share-page-grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:18px;
}
.hot100-share-page-controls,
.hot100-share-page-preview{
  border:1px solid var(--bd);
  background:var(--bg);
  padding:16px;
}
.hot100-share-page-controls h2{
  margin:0 0 12px;
  font-family:var(--f-display);
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:-.04em;
}
.hot100-share-format-links{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}
.hot100-share-format-links a{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:12px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.hot100-share-format-links a.active{
  border-color:var(--gold);
  background:var(--ink);
  color:var(--gold);
}
.hot100-share-page-controls textarea{
  width:100%;
  min-height:120px;
  margin-top:12px;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:12px;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
}
.hot100-share-page-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
  overflow:auto;
  background:#f7f7f7;
}
.hot100-share-page-preview svg{
  max-width:100%;
  height:auto;
  display:block;
}
@media(max-width:860px){
  .hot100-share-page-grid{grid-template-columns:1fr;}
  .hot100-share-page-hero{flex-direction:column;align-items:flex-start;}
  .hot100-share-page-preview{min-height:320px;}
}


/* HOT100 v4.0.3 — verified chart position line graph restored */
.mini-history-line{
  width:100%;
  max-width:240px;
  height:58px;
  display:block;
}
.mini-history-line.large{
  max-width:100%;
  height:auto;
  min-height:230px;
}
.mini-history-line svg{
  width:100%;
  height:100%;
  min-height:58px;
  display:block;
}
.mini-history-line.large svg{
  min-height:230px;
}
.hline-bg{
  fill:var(--bg2);
  stroke:var(--bd);
  stroke-width:1;
}
.hline-grid{
  stroke:rgba(0,0,0,.10);
  stroke-width:1;
  stroke-dasharray:5 6;
}
.hline-poly{
  fill:none;
  stroke:var(--gold);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mini-history-line:not(.large) .hline-poly{
  stroke-width:3;
}
.hline-dot{
  fill:var(--ink);
  stroke:var(--gold);
  stroke-width:2;
}
.hline-axis,
.hline-week{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  fill:var(--ink2);
}
.hline-pos{
  font-family:var(--f-ui);
  font-size:12px;
  font-weight:900;
  fill:var(--ink);
}
.hot100-history-graph{
  display:grid;
  gap:10px;
}
.hot100-history-note{
  border:1px solid var(--bd);
  border-left:4px solid var(--gold);
  background:var(--bg2);
  padding:11px 13px;
  font-family:var(--f-body);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink2);
}
.hot100-history-note.verified{
  color:var(--ink);
}
.hot100-meta-table textarea.hot100-textarea,
.hot100-history-admin-box textarea{
  width:100%;
  min-height:120px;
  font-family:monospace;
  line-height:1.5;
}
.hot100-history-admin-box{
  border:1px solid #ddd;
  background:#fff;
  padding:14px;
}
.hot100-history-admin-box p{
  margin:0 0 10px;
}
@media(max-width:680px){
  .mini-history-line.large svg{
    min-height:190px;
  }
  .hline-week{
    font-size:8px;
  }
  .hline-pos{
    font-size:10px;
  }
}


/* HOT100 v4.0.6 — NMF frontend now uses backend-managed features only */
.nmf-empty{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:22px;
  margin:12px 0;
  display:grid;
  gap:6px;
}
.nmf-empty strong{
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.nmf-empty span{
  font-family:var(--f-body);
  font-size:13px;
  color:var(--ink2);
}
@media(max-width:1100px){
  .h100-nmf-row .h100-field{
    min-width:0;
  }
}


/* HOT100 v4.0.8 — Premium news article reading interface */
.hot100-article-page{
  max-width:1240px;
  margin:0 auto;
  padding:34px 18px 80px;
  color:var(--ink);
}
.hot100-article{
  background:var(--bg);
}
.hot100-article-hero{
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--bd);
  padding:38px 0 30px;
  max-width:980px;
  margin:0 auto 24px;
}
.hot100-article-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.hot100-article-kicker:before{
  content:"";
  width:38px;
  height:2px;
  background:var(--gold);
}
.hot100-article-hero h1{
  margin:0;
  max-width:1020px;
  font-family:var(--f-display);
  font-size:clamp(42px,7.4vw,104px);
  line-height:.88;
  letter-spacing:-.065em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
.hot100-article-dek{
  margin:18px 0 0;
  max-width:760px;
  font-family:var(--f-body);
  font-size:clamp(18px,2vw,23px);
  line-height:1.55;
  color:var(--ink2);
  text-wrap:pretty;
}
.hot100-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--bd);
}
.hot100-article-meta span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:0 10px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}
.hot100-article-featured{
  max-width:1120px;
  margin:0 auto 30px;
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:10px;
}
.hot100-article-featured img{
  display:block;
  width:100%;
  max-height:680px;
  object-fit:cover;
  aspect-ratio:16/9;
  background:var(--bg2);
}
.hot100-article-featured figcaption{
  margin:9px 4px 0;
  font-family:var(--f-body);
  font-size:12px;
  line-height:1.5;
  color:var(--ink2);
}
.hot100-article-shell{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:160px minmax(0,760px);
  gap:38px;
  align-items:start;
}
.hot100-article-rail{
  position:sticky;
  top:92px;
}
.hot100-article-rail-card{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:12px;
  display:grid;
  gap:8px;
}
.hot100-article-rail-card span{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink2);
}
.hot100-article-rail-card a,
.hot100-article-rail-card button{
  width:100%;
  min-height:36px;
  border:1px solid var(--ink);
  background:var(--bg);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.hot100-article-rail-card a:first-of-type{
  background:var(--ink);
  color:var(--bg);
}
.hot100-article-content{
  max-width:760px;
  margin:0;
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.82;
  color:var(--ink);
}
.hot100-article-content > *:first-child{
  margin-top:0;
}
.hot100-article-content p{
  margin:0 0 25px;
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.82;
  color:var(--ink);
  text-wrap:pretty;
}
.hot100-article-content p:first-of-type{
  font-size:20px;
  line-height:1.75;
}
.hot100-article-content h2,
.hot100-article-content h3,
.hot100-article-content h4{
  color:var(--ink);
  text-wrap:balance;
}
.hot100-article-content h2{
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,50px);
  line-height:1;
  letter-spacing:-.05em;
  text-transform:uppercase;
  margin:46px 0 16px;
  padding-top:16px;
  border-top:1px solid var(--bd);
}
.hot100-article-content h3{
  font-family:var(--f-ui);
  font-size:22px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.02em;
  margin:34px 0 12px;
}
.hot100-article-content h4{
  font-family:var(--f-ui);
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:28px 0 10px;
}
.hot100-article-content a{
  color:var(--ink);
  text-decoration-color:var(--gold);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.hot100-article-content blockquote{
  position:relative;
  margin:38px 0;
  padding:26px 30px 26px 34px;
  border-left:5px solid var(--gold);
  background:
    radial-gradient(circle at 94% 12%, rgba(242,194,0,.08), transparent 30%),
    var(--bg2);
  color:var(--ink);
}
.hot100-article-content blockquote:before{
  content:"“";
  position:absolute;
  left:12px;
  top:-8px;
  font-family:Georgia,serif;
  font-size:74px;
  line-height:1;
  color:rgba(184,137,35,.22);
}
.hot100-article-content blockquote p{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(22px,3vw,34px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.02em;
}
.hot100-article-content ul,
.hot100-article-content ol{
  margin:0 0 26px 24px;
  padding:0;
  font-size:17px;
  line-height:1.75;
}
.hot100-article-content li{
  margin-bottom:10px;
}
.hot100-article-content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:34px auto;
  border:1px solid var(--bd);
  background:var(--bg2);
}
.hot100-article-content figure{
  margin:34px 0;
}
.hot100-article-content figcaption{
  font-family:var(--f-body);
  font-size:12px;
  line-height:1.5;
  color:var(--ink2);
  margin-top:8px;
}
.hot100-article-content table{
  width:100%;
  border-collapse:collapse;
  margin:32px 0;
  font-family:var(--f-ui);
  font-size:13px;
}
.hot100-article-content th,
.hot100-article-content td{
  border:1px solid var(--bd);
  padding:10px 12px;
  text-align:left;
}
.hot100-article-content th{
  background:var(--ink);
  color:var(--bg);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hot100-article-content .wp-caption{
  max-width:100%;
}
.hot100-related-news{
  max-width:1120px;
  margin:56px auto 0;
  border-top:2px solid var(--ink);
  padding-top:22px;
}
.hot100-related-news-head span{
  display:block;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:7px;
}
.hot100-related-news-head h2{
  margin:0 0 18px;
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,52px);
  line-height:1;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.hot100-related-news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hot100-related-news-card{
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--ink);
  text-decoration:none;
  display:grid;
  grid-template-rows:auto 1fr;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.hot100-related-news-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.055);
  background:var(--bg2);
}
.hot100-related-news-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-bottom:1px solid var(--bd);
}
.hot100-related-news-card div{
  padding:13px;
}
.hot100-related-news-card span{
  display:block;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:7px;
}
.hot100-related-news-card strong{
  display:block;
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.15;
  font-weight:900;
  text-transform:uppercase;
  color:var(--ink);
}
.hot100-related-news-card em{
  display:block;
  margin-top:9px;
  font-style:normal;
  font-family:var(--f-body);
  font-size:12px;
  color:var(--ink2);
}
@media(max-width:980px){
  .hot100-article-shell{
    grid-template-columns:1fr;
    gap:20px;
  }
  .hot100-article-rail{
    position:static;
    order:2;
  }
  .hot100-article-rail-card{
    grid-template-columns:auto repeat(3,minmax(0,1fr));
    align-items:center;
  }
  .hot100-article-content{
    max-width:100%;
  }
}
@media(max-width:700px){
  .hot100-article-page{
    padding:24px 14px 64px;
  }
  .hot100-article-hero{
    padding:28px 0 22px;
  }
  .hot100-article-hero h1{
    font-size:clamp(36px,12vw,58px);
    line-height:.9;
  }
  .hot100-article-dek{
    font-size:17px;
  }
  .hot100-article-meta span{
    width:100%;
    justify-content:space-between;
  }
  .hot100-article-featured{
    padding:7px;
    margin-bottom:22px;
  }
  .hot100-article-featured img{
    aspect-ratio:4/3;
  }
  .hot100-article-content,
  .hot100-article-content p{
    font-size:16px;
    line-height:1.72;
  }
  .hot100-article-content p:first-of-type{
    font-size:17px;
  }
  .hot100-article-content h2{
    margin-top:36px;
  }
  .hot100-article-content blockquote{
    margin:30px 0;
    padding:22px 20px 22px 24px;
  }
  .hot100-article-content blockquote p{
    font-size:22px;
  }
  .hot100-article-rail-card{
    grid-template-columns:1fr;
  }
  .hot100-related-news-grid{
    grid-template-columns:1fr;
  }
}


/* HOT100 v4.0.9 — refined premium article page, cleaner title, neat image, visible sidebar */
.hot100-article-page-v409{
  max-width:1320px;
  padding:28px 18px 76px;
}
.hot100-article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:28px;
  align-items:start;
}
.hot100-article-page-v409 .hot100-article{
  min-width:0;
}
.hot100-article-page-v409 .hot100-article-hero{
  max-width:920px;
  margin:0 0 22px;
  padding:28px 0 22px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--bd);
}
.hot100-article-page-v409 .hot100-article-hero h1{
  max-width:920px;
  font-family:var(--f-display);
  font-size:clamp(34px,4.8vw,66px);
  line-height:.94;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
.hot100-article-page-v409 .hot100-article-dek{
  max-width:760px;
  font-size:clamp(16px,1.55vw,20px);
  line-height:1.58;
  margin-top:14px;
}
.hot100-article-page-v409 .hot100-article-meta{
  margin-top:18px;
  padding-top:14px;
}
.hot100-article-sharebar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.hot100-article-sharebar span{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-right:4px;
}
.hot100-article-sharebar a,
.hot100-article-sharebar button{
  min-height:34px;
  border:1px solid var(--bd);
  background:var(--bg2);
  color:var(--ink);
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.hot100-article-sharebar a:hover,
.hot100-article-sharebar button:hover{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.hot100-article-page-v409 .hot100-article-featured{
  max-width:920px;
  margin:0 0 28px;
  padding:8px;
  border:1px solid var(--bd);
  background:var(--bg2);
}
.hot100-article-page-v409 .hot100-article-featured img{
  aspect-ratio:16/8.2;
  max-height:430px;
  object-fit:cover;
  width:100%;
  display:block;
}
.hot100-article-page-v409 .hot100-article-shell{
  display:block;
  max-width:920px;
  margin:0;
}
.hot100-article-page-v409 .hot100-article-content{
  max-width:760px;
  margin:0 auto;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.78;
}
.hot100-article-page-v409 .hot100-article-content p{
  font-size:17px;
  line-height:1.78;
  margin-bottom:23px;
}
.hot100-article-page-v409 .hot100-article-content p:first-of-type{
  font-size:18px;
  line-height:1.72;
}
.hot100-article-page-v409 .hot100-article-content h2{
  font-family:var(--f-display);
  font-size:clamp(28px,3vw,40px);
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin:42px 0 15px;
  padding-top:14px;
  border-top:1px solid var(--bd);
}
.hot100-article-page-v409 .hot100-article-content h3{
  font-family:var(--f-display);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:32px 0 12px;
}
.hot100-article-page-v409 .hot100-article-content h4{
  font-family:var(--f-display);
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:28px 0 10px;
}
.hot100-article-page-v409 .hot100-article-content blockquote{
  margin:34px 0;
  padding:22px 26px 22px 28px;
  border-left:4px solid var(--gold);
  background:linear-gradient(135deg,var(--bg2),var(--bg));
}
.hot100-article-page-v409 .hot100-article-content blockquote p{
  font-family:var(--f-display);
  font-size:clamp(24px,3vw,38px);
  line-height:1.04;
  letter-spacing:-.04em;
  text-transform:uppercase;
  font-weight:900;
}
.hot100-article-sidebar{
  min-width:0;
}
.hot100-article-sidebar-inner{
  position:sticky;
  top:88px;
}
.hot100-article-sidebar .layout,
.hot100-article-sidebar .mc{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.hot100-article-sidebar .sb,
.hot100-article-sidebar aside{
  width:100%;
}
.hot100-article-page-v409 .hot100-related-news{
  max-width:920px;
  margin:48px 0 0;
}
.hot100-article-page-v409 .hot100-related-news-head h2{
  font-size:clamp(28px,3vw,40px);
}
@media(max-width:1100px){
  .hot100-article-layout{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:20px;
  }
  .hot100-article-page-v409 .hot100-article-hero h1{
    font-size:clamp(34px,5vw,58px);
  }
}
@media(max-width:920px){
  .hot100-article-layout{
    grid-template-columns:1fr;
  }
  .hot100-article-sidebar-inner{
    position:static;
  }
  .hot100-article-sidebar{
    border-top:1px solid var(--bd);
    padding-top:22px;
  }
  .hot100-article-page-v409 .hot100-article-hero,
  .hot100-article-page-v409 .hot100-article-featured,
  .hot100-article-page-v409 .hot100-article-shell,
  .hot100-article-page-v409 .hot100-related-news{
    max-width:100%;
  }
}
@media(max-width:700px){
  .hot100-article-page-v409{
    padding:20px 12px 58px;
  }
  .hot100-article-page-v409 .hot100-article-hero{
    padding:22px 0 18px;
  }
  .hot100-article-page-v409 .hot100-article-hero h1{
    font-size:clamp(32px,10vw,46px);
    line-height:.94;
  }
  .hot100-article-page-v409 .hot100-article-dek{
    font-size:16px;
  }
  .hot100-article-page-v409 .hot100-article-featured{
    padding:6px;
    margin-bottom:22px;
  }
  .hot100-article-page-v409 .hot100-article-featured img{
    aspect-ratio:16/10;
    max-height:280px;
  }
  .hot100-article-page-v409 .hot100-article-content,
  .hot100-article-page-v409 .hot100-article-content p{
    font-size:16px;
    line-height:1.7;
  }
  .hot100-article-page-v409 .hot100-article-content p:first-of-type{
    font-size:16.5px;
  }
  .hot100-article-page-v409 .hot100-article-content h2{
    font-size:30px;
    margin-top:34px;
  }
  .hot100-article-page-v409 .hot100-article-content h3{
    font-size:24px;
  }
  .hot100-article-page-v409 .hot100-article-content blockquote{
    padding:20px;
    margin:28px 0;
  }
  .hot100-article-page-v409 .hot100-article-content blockquote p{
    font-size:24px;
  }
  .hot100-article-sharebar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .hot100-article-sharebar span{
    grid-column:1/-1;
  }
  .hot100-article-sharebar button{
    grid-column:1/-1;
  }
}


/* HOT100 v4.1.0 — premium article editorial tools: key points, data panels, author box, progress */
.hot100-reading-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:transparent;
  z-index:99998;
  pointer-events:none;
}
.hot100-reading-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
  box-shadow:0 0 12px rgba(242,194,0,.45);
}
.hot100-article-labels{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.hot100-article-labels .hot100-article-kicker{
  margin:0;
}
.hot100-article-type{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--bd);
  background:var(--ink);
  color:var(--gold);
  padding:0 10px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hot100-key-points,
.hot100-related-data-panel,
.hot100-author-box,
.hot100-bottom-share,
.hot100-article-tags{
  max-width:920px;
  margin:0 0 24px;
  border:1px solid var(--bd);
  background:var(--bg2);
}
.hot100-key-points{
  padding:18px 20px;
  border-left:5px solid var(--gold);
}
.hot100-key-points > span,
.hot100-related-data-head span,
.hot100-article-tags > span,
.hot100-in-this-article span{
  display:block;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.hot100-key-points ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.hot100-key-points li{
  position:relative;
  padding-left:26px;
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
}
.hot100-key-points li:before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(242,194,0,.10);
}
.hot100-pull-quote{
  max-width:920px;
  margin:0 0 28px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--bd);
  padding:22px 0;
}
.hot100-pull-quote p{
  max-width:780px;
  margin:0 auto;
  font-family:var(--f-display);
  font-size:clamp(26px,3.7vw,48px);
  line-height:.98;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
.hot100-pull-quote p:before{
  content:"“";
  color:var(--gold);
}
.hot100-pull-quote p:after{
  content:"”";
  color:var(--gold);
}
.hot100-related-data-panel{
  padding:16px;
}
.hot100-related-data-head{
  border-bottom:1px solid var(--bd);
  padding-bottom:12px;
  margin-bottom:12px;
}
.hot100-related-data-head strong{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(22px,2.5vw,32px);
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.hot100-related-data-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.hot100-related-data-card,
.hot100-listen-card{
  border:1px solid var(--bd);
  background:var(--bg);
  padding:13px;
  color:var(--ink);
  text-decoration:none;
  min-height:92px;
}
.hot100-related-data-card span,
.hot100-listen-card span{
  display:block;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:8px;
}
.hot100-related-data-card strong{
  display:block;
  font-family:var(--f-display);
  font-size:24px;
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.hot100-related-data-card.disabled{
  pointer-events:none;
}
.hot100-listen-card div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.hot100-listen-card a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  padding:0 9px;
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hot100-author-box{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  background:var(--bg);
  border-left:5px solid var(--ink);
}
.hot100-author-mark{
  flex:0 0 56px;
  height:56px;
  border-radius:999px;
  background:var(--ink);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-ui);
  font-size:12px;
  font-weight:900;
}
.hot100-author-box span{
  display:block;
  font-family:var(--f-ui);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:4px;
}
.hot100-author-box p{
  margin:0;
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.55;
  color:var(--ink2);
}
.hot100-bottom-share{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.hot100-bottom-share strong{
  font-family:var(--f-display);
  font-size:24px;
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.hot100-bottom-share div{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hot100-bottom-share a{
  min-height:34px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hot100-article-tags{
  padding:14px 16px;
}
.hot100-article-tags div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hot100-article-tags em{
  font-style:normal;
  border:1px solid var(--bd);
  background:var(--bg);
  padding:7px 9px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}
.hot100-in-this-article{
  border:1px solid var(--bd);
  background:var(--bg2);
  padding:14px;
  margin-bottom:14px;
}
.hot100-in-this-article a{
  display:block;
  border-top:1px solid var(--bd);
  padding:10px 0;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hot100-in-this-article a:hover{
  color:var(--gold);
}
@media(max-width:920px){
  .hot100-related-data-grid{
    grid-template-columns:1fr;
  }
  .hot100-key-points,
  .hot100-related-data-panel,
  .hot100-author-box,
  .hot100-bottom-share,
  .hot100-article-tags,
  .hot100-pull-quote{
    max-width:100%;
  }
}
@media(max-width:700px){
  .hot100-key-points{
    padding:15px;
  }
  .hot100-key-points li{
    font-size:14px;
  }
  .hot100-pull-quote p{
    font-size:clamp(24px,8vw,34px);
  }
  .hot100-related-data-card strong{
    font-size:22px;
  }
  .hot100-author-box{
    align-items:flex-start;
  }
  .hot100-bottom-share{
    display:block;
  }
  .hot100-bottom-share strong{
    display:block;
    margin-bottom:12px;
  }
  .hot100-bottom-share a{
    flex:1 1 auto;
    justify-content:center;
  }
}


/* HOT100 v4.1.1 — clean professional news typography revamp
   Principle: no clashing typefaces. Display is used only for the main headline and major section labels.
   Reading text, headings, metadata and utility labels use the site UI/body family for a calmer publication feel. */
.hot100-article-page-v409,
.hot100-article-page-v410{
  --article-title: var(--f-display);
  --article-head: var(--f-ui);
  --article-body: var(--f-body);
  --article-label: var(--f-ui);
}
.hot100-article-page-v410 .hot100-article-hero{
  max-width:900px;
  padding-top:30px;
  padding-bottom:22px;
}
.hot100-article-page-v410 .hot100-article-hero h1{
  font-family:var(--article-title);
  font-size:clamp(34px,4.2vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:none;
  font-weight:900;
  max-width:880px;
}
.hot100-article-page-v410 .hot100-article-kicker,
.hot100-article-page-v410 .hot100-article-type,
.hot100-article-page-v410 .hot100-article-meta span,
.hot100-article-page-v410 .hot100-article-sharebar span,
.hot100-article-page-v410 .hot100-article-sharebar a,
.hot100-article-page-v410 .hot100-article-sharebar button{
  font-family:var(--article-label);
}
.hot100-article-page-v410 .hot100-article-kicker{
  letter-spacing:.14em;
}
.hot100-article-page-v410 .hot100-article-type{
  background:var(--bg2);
  color:var(--ink);
  border-color:var(--bd);
}
.hot100-article-page-v410 .hot100-article-dek{
  font-family:var(--article-body);
  font-size:clamp(16px,1.45vw,19px);
  line-height:1.6;
  max-width:760px;
  color:var(--ink2);
}
.hot100-article-page-v410 .hot100-article-featured{
  max-width:900px;
  padding:7px;
  margin-bottom:24px;
}
.hot100-article-page-v410 .hot100-article-featured img{
  aspect-ratio:16/8.6;
  max-height:390px;
}
.hot100-article-page-v410 .hot100-key-points,
.hot100-article-page-v410 .hot100-related-data-panel,
.hot100-article-page-v410 .hot100-author-box,
.hot100-article-page-v410 .hot100-bottom-share,
.hot100-article-page-v410 .hot100-article-tags,
.hot100-article-page-v410 .hot100-pull-quote,
.hot100-article-page-v410 .hot100-article-shell,
.hot100-article-page-v410 .hot100-related-news,
.hot100-article-page-v410 .hot100-article-featured{
  max-width:900px;
}
.hot100-article-page-v410 .hot100-article-content{
  max-width:740px;
  font-family:var(--article-body);
  font-size:17px;
  line-height:1.78;
  color:var(--ink);
}
.hot100-article-page-v410 .hot100-article-content p{
  font-family:var(--article-body);
  font-size:17px;
  line-height:1.78;
  margin-bottom:22px;
}
.hot100-article-page-v410 .hot100-article-content p:first-of-type{
  font-size:18px;
  line-height:1.72;
}
.hot100-article-page-v410 .hot100-article-content h2{
  font-family:var(--article-head);
  font-size:clamp(25px,2.45vw,34px);
  line-height:1.15;
  letter-spacing:-.02em;
  text-transform:none;
  font-weight:900;
  margin:40px 0 14px;
  padding-top:18px;
  border-top:1px solid var(--bd);
}
.hot100-article-page-v410 .hot100-article-content h3{
  font-family:var(--article-head);
  font-size:clamp(21px,2vw,27px);
  line-height:1.18;
  letter-spacing:-.015em;
  text-transform:none;
  font-weight:900;
  margin:30px 0 12px;
}
.hot100-article-page-v410 .hot100-article-content h4{
  font-family:var(--article-head);
  font-size:18px;
  line-height:1.22;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:900;
}
.hot100-article-page-v410 .hot100-article-content blockquote{
  padding:22px 24px;
  margin:32px 0;
}
.hot100-article-page-v410 .hot100-article-content blockquote p,
.hot100-article-page-v410 .hot100-pull-quote p{
  font-family:var(--article-head);
  text-transform:none;
  letter-spacing:-.02em;
  line-height:1.2;
  font-weight:900;
}
.hot100-article-page-v410 .hot100-article-content blockquote p{
  font-size:clamp(21px,2.4vw,30px);
}
.hot100-article-page-v410 .hot100-pull-quote p{
  font-size:clamp(23px,3vw,38px);
  max-width:760px;
}
.hot100-article-page-v410 .hot100-key-points > span,
.hot100-article-page-v410 .hot100-related-data-head span,
.hot100-article-page-v410 .hot100-article-tags > span,
.hot100-article-page-v410 .hot100-in-this-article span{
  font-family:var(--article-label);
  letter-spacing:.14em;
}
.hot100-article-page-v410 .hot100-key-points li{
  font-family:var(--article-body);
  font-size:15px;
  line-height:1.55;
}
.hot100-article-page-v410 .hot100-related-data-head strong,
.hot100-article-page-v410 .hot100-related-data-card strong,
.hot100-article-page-v410 .hot100-bottom-share strong,
.hot100-article-page-v410 .hot100-related-news-head h2,
.hot100-article-page-v410 .hot100-related-news-card strong{
  font-family:var(--article-head);
  text-transform:none;
  letter-spacing:-.015em;
}
.hot100-article-page-v410 .hot100-related-data-head strong{
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.15;
}
.hot100-article-page-v410 .hot100-related-data-card strong{
  font-size:20px;
  line-height:1.18;
}
.hot100-article-page-v410 .hot100-bottom-share strong{
  font-size:22px;
}
.hot100-article-page-v410 .hot100-related-news-head h2{
  font-size:clamp(26px,2.6vw,36px);
}
.hot100-article-page-v410 .hot100-related-news-card strong{
  font-size:15px;
  line-height:1.25;
}
.hot100-article-page-v410 .hot100-author-box span,
.hot100-article-page-v410 .hot100-author-box p,
.hot100-article-page-v410 .hot100-article-tags em,
.hot100-article-page-v410 .hot100-listen-card a,
.hot100-article-page-v410 .hot100-in-this-article a{
  font-family:var(--article-label);
}
.hot100-article-page-v410 .hot100-article-sidebar-inner{
  top:96px;
}
.hot100-article-page-v410 .hot100-in-this-article{
  background:var(--bg);
  border-left:4px solid var(--gold);
}
@media(max-width:920px){
  .hot100-article-page-v410 .hot100-article-hero,
  .hot100-article-page-v410 .hot100-key-points,
  .hot100-article-page-v410 .hot100-related-data-panel,
  .hot100-article-page-v410 .hot100-author-box,
  .hot100-article-page-v410 .hot100-bottom-share,
  .hot100-article-page-v410 .hot100-article-tags,
  .hot100-article-page-v410 .hot100-pull-quote,
  .hot100-article-page-v410 .hot100-article-shell,
  .hot100-article-page-v410 .hot100-related-news,
  .hot100-article-page-v410 .hot100-article-featured{
    max-width:100%;
  }
}
@media(max-width:700px){
  .hot100-article-page-v410 .hot100-article-hero h1{
    font-size:clamp(31px,9.3vw,42px);
    line-height:1.03;
  }
  .hot100-article-page-v410 .hot100-article-featured img{
    aspect-ratio:16/10.5;
    max-height:250px;
  }
  .hot100-article-page-v410 .hot100-article-content,
  .hot100-article-page-v410 .hot100-article-content p{
    font-size:16px;
    line-height:1.72;
  }
  .hot100-article-page-v410 .hot100-article-content h2{
    font-size:25px;
    line-height:1.14;
  }
  .hot100-article-page-v410 .hot100-article-content h3{
    font-size:22px;
  }
  .hot100-article-page-v410 .hot100-pull-quote p{
    font-size:24px;
  }
}

/* HOT100 v4.1.2 — What's Hot premium editorial layout, scalable beyond two stories */
.whats-hot-v412{
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  background:var(--bg);
}
.whats-hot-v412 .wh-header{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--bd);
}
.whats-hot-v412 .wh-kicker{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:5px;
}
.whats-hot-v412 .wh-title{
  font-family:var(--f-ui);
  font-size:22px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  text-transform:none;
}
.whats-hot-v412 .wh-layout{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  gap:0;
}
.whats-hot-v412 .wh-featured{
  display:grid;
  grid-template-columns:minmax(240px,38%) minmax(0,1fr);
  border-right:1px solid var(--bd);
  border-bottom:0;
  min-height:280px;
}
.whats-hot-v412 .wh-feat-img,
.whats-hot-v412 .wh-feat-ph{
  width:100%;
  height:100%;
  min-height:280px;
  max-height:360px;
}
.whats-hot-v412 .wh-feat-body{
  padding:24px;
  justify-content:flex-start;
  gap:10px;
}
.whats-hot-v412 .wh-feat-meta{
  flex-wrap:wrap;
  gap:7px;
}
.whats-hot-v412 .wh-feat-cat,
.whats-hot-v412 .wh-feat-type{
  font-family:var(--f-ui);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg2);
  border:1px solid var(--bd);
  padding:3px 8px;
}
.whats-hot-v412 .wh-feat-type{color:var(--gold);background:var(--ink);border-color:var(--ink)}
.whats-hot-v412 .wh-feat-date{
  font-family:var(--f-ui);
  font-size:10px;
  color:var(--ink2);
}
.whats-hot-v412 .wh-feat-title{
  font-family:var(--f-ui);
  font-size:clamp(23px,2.4vw,34px);
  line-height:1.08;
  letter-spacing:-.025em;
  text-transform:none;
  font-weight:900;
}
.whats-hot-v412 .wh-feat-summary{
  max-width:580px;
  font-size:13.5px;
  line-height:1.65;
  margin:0;
}
.whats-hot-v412 .wh-river{
  display:grid;
  grid-template-columns:1fr;
  background:var(--bg);
}
.whats-hot-v412 .wh-river-item{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:12px;
  padding:13px 16px;
  min-height:102px;
  border-bottom:1px solid var(--bd);
  text-decoration:none;
  color:inherit;
  transition:background .16s ease, transform .16s ease;
}
.whats-hot-v412 .wh-river-item.compact{
  grid-template-columns:1fr;
  min-height:auto;
  padding:13px 16px;
}
.whats-hot-v412 .wh-river-item:hover{
  background:var(--bg2);
}
.whats-hot-v412 .wh-river-img,
.whats-hot-v412 .wh-river-ph{
  width:118px;
  height:76px;
  object-fit:cover;
  display:block;
  background:var(--bg2);
}
.whats-hot-v412 .wh-river-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-num);
  color:var(--bd);
}
.whats-hot-v412 .wh-river-body{min-width:0;}
.whats-hot-v412 .wh-river-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-bottom:5px;
}
.whats-hot-v412 .wh-river-meta span{
  font-family:var(--f-ui);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
}
.whats-hot-v412 .wh-river-meta em{
  font-style:normal;
  font-family:var(--f-ui);
  font-size:10px;
  color:var(--ink2);
}
.whats-hot-v412 .wh-river-title{
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:none;
  font-weight:850;
  color:var(--ink);
}
.whats-hot-v412 .wh-artist-line{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-top:4px;
}
.whats-hot-v412 .wh-artist-line a,
.whats-hot-v412 .wh-artist-link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.whats-hot-v412 .wh-artist-line a:hover,
.whats-hot-v412 .wh-artist-link:hover{
  color:var(--gold);
  border-color:var(--ink);
}
.whats-hot-v412 .wh-artist-line.small{
  font-size:9px;
  margin-top:5px;
}
@media(max-width:980px){
  .whats-hot-v412 .wh-layout{grid-template-columns:1fr;}
  .whats-hot-v412 .wh-featured{border-right:0;border-bottom:1px solid var(--bd);}
}
@media(max-width:680px){
  .whats-hot-v412 .wh-header{padding:18px 16px 14px;}
  .whats-hot-v412 .wh-featured{grid-template-columns:1fr;}
  .whats-hot-v412 .wh-feat-img,.whats-hot-v412 .wh-feat-ph{min-height:0;height:auto;aspect-ratio:16/10;}
  .whats-hot-v412 .wh-feat-body{padding:16px;}
  .whats-hot-v412 .wh-feat-title{font-size:24px;}
  .whats-hot-v412 .wh-river-item.with-image{grid-template-columns:92px minmax(0,1fr);gap:10px;}
  .whats-hot-v412 .wh-river-img,.whats-hot-v412 .wh-river-ph{width:92px;height:68px;}
  .whats-hot-v412 .wh-river-title{font-size:14px;}
}


/* HOT100 v4.1.3 — What's Hot font restoration, keeping the premium v4.1.2 structure */
.whats-hot-v412 .wh-title{
  font-family:var(--f-display);
  font-size:26px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.whats-hot-v412 .wh-feat-title{
  font-family:var(--f-display);
  font-size:clamp(24px,2.25vw,32px);
  line-height:1.04;
  letter-spacing:-.04em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--ink);
  text-wrap:balance;
}
.whats-hot-v412 .wh-river-title{
  font-family:var(--f-display);
  font-size:clamp(15px,1.12vw,18px);
  line-height:1.08;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--ink);
  text-wrap:balance;
}
.whats-hot-v412 .wh-river-item.compact .wh-river-title{
  font-size:clamp(14px,1vw,16px);
  line-height:1.1;
}
.whats-hot-v412 .wh-feat-summary{
  font-family:var(--f-body);
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink2);
}
.whats-hot-v412 .wh-kicker,
.whats-hot-v412 .wh-feat-cat,
.whats-hot-v412 .wh-feat-type,
.whats-hot-v412 .wh-feat-date,
.whats-hot-v412 .wh-river-meta span,
.whats-hot-v412 .wh-river-meta em,
.whats-hot-v412 .wh-artist-line{
  font-family:var(--f-ui);
}
@media(max-width:680px){
  .whats-hot-v412 .wh-title{
    font-size:24px;
  }
  .whats-hot-v412 .wh-feat-title{
    font-size:25px;
    line-height:1.05;
  }
  .whats-hot-v412 .wh-river-title{
    font-size:15px;
    line-height:1.1;
  }
}


/* HOT100 v4.1.4 — The Soak Bench name + balanced typography */
.whats-hot-v412 .wh-kicker{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.whats-hot-v412 .wh-title{
  font-family:var(--f-display);
  font-size:clamp(24px,2.2vw,30px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ink);
}
.whats-hot-v412 .wh-feat-title{
  font-family:var(--f-display);
  font-size:clamp(24px,2vw,30px);
  line-height:1.06;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--ink);
  text-wrap:balance;
}
.whats-hot-v412 .wh-river-title{
  font-family:var(--f-display);
  font-size:clamp(15px,1vw,17px);
  line-height:1.09;
  letter-spacing:-.03em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--ink);
}
.whats-hot-v412 .wh-river-item.compact .wh-river-title{
  font-size:clamp(14px,.95vw,16px);
}
.whats-hot-v412 .wh-feat-summary{
  font-family:var(--f-body);
  font-size:13px;
  line-height:1.62;
  color:var(--ink2);
}
.whats-hot-v412 .wh-header{
  padding:18px 24px 15px;
}
.whats-hot-v412 .wh-feat-body{
  padding:22px 24px;
}
@media(max-width:680px){
  .whats-hot-v412 .wh-title{font-size:25px;}
  .whats-hot-v412 .wh-feat-title{font-size:24px;line-height:1.06;}
  .whats-hot-v412 .wh-river-title{font-size:15px;line-height:1.1;}
}


/* HOT100 v4.1.4 — small defensive polish across the website */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}
.mast,.mnav ul,.mast-r{min-width:0;}
.mnav ul li a,.hot100-more-btn{white-space:nowrap;}
@media(max-width:768px){
  .mast{overflow:visible;}
  .mobile-menu{max-height:calc(100vh - 72px);overflow:auto;}
}


/* HOT100 v4.1.5 — mobile icon clean-up: CSS-drawn icons only, no emoji-like glyphs */
@media(max-width:768px){
  #h100-nm.h100-mobile-panel{
    background:#fff!important;
    color:#111!important;
  }
  .h100-mobile-close{
    width:40px;
    height:40px;
    background:#fff;
    border:1px solid #E8E8E8;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:0;
    padding:0;
  }
  .h100-mobile-close span{
    position:relative;
    width:18px;
    height:18px;
    display:block;
  }
  .h100-mobile-close span:before,
  .h100-mobile-close span:after{
    content:"";
    position:absolute;
    left:8px;
    top:0;
    width:2px;
    height:18px;
    background:#111;
    border-radius:2px;
  }
  .h100-mobile-close span:before{transform:rotate(45deg);}
  .h100-mobile-close span:after{transform:rotate(-45deg);}
  .h100-mobile-nav-link:hover{
    background:#F7F7F5;
  }
  .h100-mobile-arrow{
    width:9px;
    height:9px;
    border-top:2px solid #111;
    border-right:2px solid #111;
    transform:rotate(45deg);
    display:block;
    flex:0 0 auto;
    opacity:.45;
    margin-left:14px;
  }
  .h100-mobile-nav-link:hover .h100-mobile-arrow{
    opacity:1;
  }
  .hmb{
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border:1.5px solid #111;
    background:#fff;
    border-radius:6px;
    padding:0;
    gap:4px;
  }
  .hmb span{
    width:18px;
    height:2px;
    background:#111;
    border-radius:2px;
  }
}


/* HOT100 v4.1.7 — The Soak Bench full revamp: premium row-based editorial section */
.soak-bench-section.soak-bench-v417{
  background:var(--bg);
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.soak-bench-v417 .sb17-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 18px;
  border-bottom:2px solid var(--ink);
  background:
    radial-gradient(circle at 94% 8%, rgba(242,194,0,.08), transparent 24%),
    var(--bg);
}
.soak-bench-v417 .sb17-kicker{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
}
.soak-bench-v417 h2{
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(28px,3vw,40px);
  line-height:.95;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
}
.soak-bench-v417 .sb17-head p{
  margin:8px 0 0;
  max-width:560px;
  font-family:var(--f-body);
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink2);
}
.soak-bench-v417 .sb17-all{
  flex:0 0 auto;
  border:1px solid var(--ink);
  min-height:38px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  background:var(--bg);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.soak-bench-v417 .sb17-all:hover{
  background:var(--ink);
  color:var(--bg);
}
.soak-bench-v417 .sb17-list{
  display:grid;
  grid-template-columns:1fr;
}
.soak-bench-v417 .sb17-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 86px;
  gap:18px;
  align-items:stretch;
  border-bottom:1px solid var(--bd);
  padding:14px 24px;
  min-height:128px;
  background:var(--bg);
  transition:background .16s ease, box-shadow .16s ease;
}
.soak-bench-v417 .sb17-row:last-child{
  border-bottom:0;
}
.soak-bench-v417 .sb17-row:hover{
  background:var(--bg2);
}
.soak-bench-v417 .sb17-row.is-lead{
  grid-template-columns:210px minmax(0,1fr) 96px;
  min-height:174px;
  background:
    linear-gradient(90deg, rgba(242,194,0,.055), transparent 38%),
    var(--bg);
}
.soak-bench-v417 .sb17-image-wrap{
  display:block;
  min-width:0;
  text-decoration:none;
}
.soak-bench-v417 .sb17-image{
  width:100%;
  height:100%;
  min-height:100px;
  object-fit:cover;
  display:block;
  background:var(--bg2);
  border:1px solid var(--bd);
}
.soak-bench-v417 .is-lead .sb17-image{
  min-height:146px;
}
.soak-bench-v417 .sb17-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-display);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--bd);
}
.soak-bench-v417 .sb17-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
}
.soak-bench-v417 .sb17-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.soak-bench-v417 .sb17-meta span,
.soak-bench-v417 .sb17-meta em{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  font-family:var(--f-ui);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  border:1px solid var(--bd);
  font-style:normal;
}
.soak-bench-v417 .sb17-meta span{
  color:var(--ink);
  background:var(--bg2);
}
.soak-bench-v417 .sb17-meta em{
  color:var(--gold);
  background:var(--ink);
  border-color:var(--ink);
}
.soak-bench-v417 .sb17-meta small{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:700;
  color:var(--ink2);
}
.soak-bench-v417 .sb17-title{
  display:block;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--f-display);
  font-size:clamp(19px,1.65vw,27px);
  line-height:1.04;
  letter-spacing:-.04em;
  text-transform:uppercase;
  font-weight:900;
  text-wrap:balance;
}
.soak-bench-v417 .is-lead .sb17-title{
  font-size:clamp(24px,2.25vw,34px);
}
.soak-bench-v417 .sb17-title:hover{
  color:var(--gold);
}
.soak-bench-v417 .sb17-artist{
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
}
.soak-bench-v417 .sb17-artist a,
.soak-bench-v417 .sb17-artist span{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
}
.soak-bench-v417 .sb17-artist a:hover{
  color:var(--gold);
  border-color:var(--ink);
}
.soak-bench-v417 .sb17-summary{
  margin:0;
  max-width:720px;
  font-family:var(--f-body);
  font-size:13.5px;
  line-height:1.62;
  color:var(--ink2);
}
.soak-bench-v417 .sb17-summary.compact{
  font-size:12.8px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.soak-bench-v417 .sb17-read{
  align-self:center;
  justify-self:end;
  width:68px;
  height:68px;
  border:1px solid var(--bd);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  text-decoration:none;
  background:var(--bg);
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.soak-bench-v417 .sb17-read span{
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.soak-bench-v417 .sb17-row:hover .sb17-read{
  background:var(--ink);
  color:var(--gold);
  border-color:var(--ink);
  transform:translateX(2px);
}
@media(max-width:980px){
  .soak-bench-v417 .sb17-row,
  .soak-bench-v417 .sb17-row.is-lead{
    grid-template-columns:132px minmax(0,1fr);
  }
  .soak-bench-v417 .sb17-read{
    display:none;
  }
}
@media(max-width:680px){
  .soak-bench-v417 .sb17-head{
    display:block;
    padding:20px 16px 16px;
  }
  .soak-bench-v417 h2{
    font-size:31px;
  }
  .soak-bench-v417 .sb17-head p{
    font-size:13px;
  }
  .soak-bench-v417 .sb17-all{
    margin-top:14px;
    width:100%;
  }
  .soak-bench-v417 .sb17-row,
  .soak-bench-v417 .sb17-row.is-lead{
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
    padding:13px 16px;
    min-height:112px;
  }
  .soak-bench-v417 .sb17-image,
  .soak-bench-v417 .is-lead .sb17-image{
    min-height:78px;
  }
  .soak-bench-v417 .sb17-meta{
    gap:5px;
  }
  .soak-bench-v417 .sb17-meta span,
  .soak-bench-v417 .sb17-meta em{
    min-height:20px;
    font-size:7px;
    padding:0 6px;
  }
  .soak-bench-v417 .sb17-meta small{
    font-size:9px;
  }
  .soak-bench-v417 .sb17-title,
  .soak-bench-v417 .is-lead .sb17-title{
    font-size:17px;
    line-height:1.08;
  }
  .soak-bench-v417 .sb17-summary{
    display:none;
  }
  .soak-bench-v417 .sb17-artist{
    font-size:8px;
    letter-spacing:.06em;
  }
}


/* HOT100 v4.1.9 — safe site-wide polish, no redesign */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.hot100-skip-link{
  position:absolute;
  left:12px;
  top:-80px;
  z-index:100000;
  background:var(--ink);
  color:var(--bg);
  padding:10px 14px;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:top .15s ease;
}
.hot100-skip-link:focus{
  top:12px;
}
.hot100-back-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9000;
  width:44px;
  height:44px;
  border:1px solid var(--ink);
  background:var(--bg);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.hot100-back-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.hot100-back-top:before{
  content:"";
  width:11px;
  height:11px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg) translate(2px,2px);
}
.hot100-back-top:hover{
  background:var(--ink);
  color:var(--gold);
}
@media(max-width:768px){
  .hot100-back-top{
    right:14px;
    bottom:14px;
    width:42px;
    height:42px;
  }
  body.hot100-nav-open .hot100-back-top{
    display:none;
  }
}
/* Reduce layout shifts on media-heavy pages without changing the visual design */
img{
  image-rendering:auto;
}
.chart-row img,
.cr-img,
.nmf-card img,
.sb17-image,
.hot100-related-news-card img,
.hot100-article-featured img,
.song-cover img,
.artist-hero-image img{
  background:var(--bg2);
}
/* More comfortable small-screen form behaviour */
@media(max-width:680px){
  input,select,textarea,button{
    font-size:16px;
  }
  .search-dropdown{
    left:0;
    right:0;
    min-width:0;
    width:calc(100vw - 32px);
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}


/* HOT100 v4.2.2 — precise mobile chart artwork stabiliser
   Uses the original chart grid sizes: 60px tablet, 48px mobile, 42px small phones.
   Scope is direct chart-row artwork only, so the carousel and #1 hero remain unchanged. */
@media (max-width: 860px) and (min-width: 641px){
  .chart-row > img.cr-img,
  .chart-row > .cr-ph,
  .chart-row.chart-collapsed.chart-revealed > img.cr-img,
  .chart-row.chart-collapsed.chart-revealed > .cr-ph{
    grid-column:2;
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    max-width:60px!important;
    min-height:60px!important;
    max-height:60px!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
    align-self:center!important;
    justify-self:center!important;
    border-radius:0!important;
    transform:none!important;
  }
  .chart-row > .cr-ph,
  .chart-row.chart-collapsed.chart-revealed > .cr-ph{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}
@media (max-width: 640px){
  .chart-row > img.cr-img,
  .chart-row > .cr-ph,
  .chart-row.chart-collapsed.chart-revealed > img.cr-img,
  .chart-row.chart-collapsed.chart-revealed > .cr-ph{
    grid-column:2!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
    align-self:center!important;
    justify-self:center!important;
    border-radius:0!important;
    transform:none!important;
  }
  .chart-row > .cr-ph,
  .chart-row.chart-collapsed.chart-revealed > .cr-ph{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .chart-row > img.cr-img[width],
  .chart-row > img.cr-img[height]{
    width:48px!important;
    height:48px!important;
  }
}
@media (max-width: 380px){
  .chart-row > img.cr-img,
  .chart-row > .cr-ph,
  .chart-row.chart-collapsed.chart-revealed > img.cr-img,
  .chart-row.chart-collapsed.chart-revealed > .cr-ph,
  .chart-row > img.cr-img[width],
  .chart-row > img.cr-img[height]{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }
}


/* HOT100 v4.3.5 — multi-feature polish: sharing, news, artist power, voting, Soak Bench, sidebar CTA */

/* Share studio: cleaner, quicker visual flow */
.hot100-card-modal .h100-share-modal{background:#fff!important;border-radius:12px!important;border:1px solid var(--bd)!important;}
.hot100-card-modal .h100-share-control,.hot100-card-modal .h100-share-preview-wrap{border-radius:0!important;border:1px solid var(--bd)!important;background:var(--bg)!important;}
.hot100-card-modal #hot100-card-preview{background:var(--bg2)!important;border-radius:0!important;}
.hot100-card-modal .h100-share-buttons button{border-radius:0!important;}
.hot100-card-modal .h100-share-close{border-radius:0!important;background:var(--ink)!important;color:var(--gold)!important;}

/* News page: publication-style newsroom */
.hot100-newsroom{max-width:1180px;margin:0 auto 60px;padding:0 18px;display:grid;gap:18px;}
.hot100-newsroom-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);border:1px solid var(--bd);background:var(--bg);color:var(--ink);text-decoration:none;}
.hot100-newsroom-lead img,.hot100-newsroom-ph{width:100%;height:100%;min-height:360px;object-fit:cover;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:42px;color:var(--bd);}
.hot100-newsroom-lead-copy{padding:28px;display:flex;flex-direction:column;justify-content:flex-end;}
.hot100-newsroom-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:10px;}
.hot100-newsroom-meta span,.hot100-newsroom-meta em{font-family:var(--f-ui);font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--bd);padding:5px 8px;font-style:normal;}
.hot100-newsroom-meta em{background:var(--ink);color:var(--gold);border-color:var(--ink);}
.hot100-newsroom-meta small{font-family:var(--f-ui);font-size:10px;color:var(--ink2);font-weight:800;}
.hot100-newsroom-lead h2{font-family:var(--f-display);font-size:clamp(32px,4vw,58px);line-height:.94;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 12px;color:var(--ink);}
.hot100-newsroom-lead p{font-family:var(--f-body);font-size:15px;line-height:1.65;color:var(--ink2);margin:0 0 18px;}
.hot100-newsroom-lead strong{font-family:var(--f-ui);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.hot100-newsroom-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--bd);}
.hot100-newsroom-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;border-bottom:1px solid var(--bd);padding:14px 0;color:var(--ink);text-decoration:none;}
.hot100-newsroom-row:hover{background:var(--bg2);}
.hot100-newsroom-row img,.hot100-newsroom-row-ph{width:150px;height:96px;object-fit:cover;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-size:12px;font-weight:900;color:var(--bd);}
.hot100-newsroom-row h3{font-family:var(--f-ui);font-size:19px;line-height:1.15;font-weight:900;letter-spacing:-.02em;margin:0 0 7px;color:var(--ink);}
.hot100-newsroom-row p{font-family:var(--f-body);font-size:13px;line-height:1.5;color:var(--ink2);margin:0;}
.hot100-news-empty{max-width:980px;margin:0 auto 60px;border:1px solid var(--bd);background:var(--bg2);padding:28px;text-align:center;display:grid;gap:6px;}
.hot100-news-empty strong{font-family:var(--f-ui);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;}
.hot100-news-empty span{font-family:var(--f-body);font-size:13px;color:var(--ink2);}

/* Soak Bench: quieter premium module */
.soak-bench-v424{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:var(--bg);}
.soak-bench-v424 .sb24-head{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:20px 24px 16px;border-bottom:2px solid var(--ink);}
.soak-bench-v424 .sb24-kicker{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.soak-bench-v424 h2{font-family:var(--f-display);font-size:clamp(28px,3vw,38px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase;margin:0;color:var(--ink);}
.soak-bench-v424 .sb24-all{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:10px 14px;text-decoration:none;}
.soak-bench-v424 .sb24-all:hover{background:var(--ink);color:var(--gold);}
.soak-bench-v424 .sb24-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);}
.soak-bench-v424 .sb24-lead{display:grid;grid-template-columns:210px minmax(0,1fr);color:var(--ink);text-decoration:none;border-right:1px solid var(--bd);}
.soak-bench-v424 .sb24-lead img,.soak-bench-v424 .sb24-ph{width:210px;height:210px;object-fit:cover;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);color:var(--bd);}
.soak-bench-v424 .sb24-lead-copy{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;}
.soak-bench-v424 .sb24-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.soak-bench-v424 .sb24-meta span{font-family:var(--f-ui);font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);}
.soak-bench-v424 .sb24-meta small{font-family:var(--f-ui);font-size:10px;font-weight:800;color:var(--ink2);}
.soak-bench-v424 h3{font-family:var(--f-display);font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 8px;color:var(--ink);}
.soak-bench-v424 p{font-family:var(--f-body);font-size:13px;line-height:1.58;color:var(--ink2);margin:8px 0 0;}
.soak-bench-v424 .sb24-side{display:grid;}
.soak-bench-v424 .sb24-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:13px;align-items:center;border-bottom:1px solid var(--bd);padding:12px 16px;color:var(--ink);text-decoration:none;}
.soak-bench-v424 .sb24-row:last-child{border-bottom:0;}
.soak-bench-v424 .sb24-row:hover,.soak-bench-v424 .sb24-lead:hover{background:var(--bg2);}
.soak-bench-v424 .sb24-row img,.soak-bench-v424 .sb24-row-ph{width:92px;height:68px;object-fit:cover;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-size:10px;font-weight:900;color:var(--bd);}
.soak-bench-v424 h4{font-family:var(--f-ui);font-size:15px;line-height:1.15;font-weight:900;letter-spacing:-.02em;margin:0;color:var(--ink);}
.soak-bench-v424 .sb24-artist{font-family:var(--f-ui);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:4px;}
.soak-bench-v424 .sb24-artist span,.soak-bench-v424 .sb24-artist em{font-style:normal;color:var(--ink);border-bottom:1px solid var(--gold);}
.soak-bench-v424 .sb24-artist span:hover{color:var(--gold);}

/* Artist Power: Billboard-style ranked table */
.hot100-artist-power-page .hot100-ai-hero h1{max-width:900px;}
.hot100-power-table{max-width:1180px;margin:0 auto 70px;padding:0 18px;}
.hot100-power-head{display:grid;grid-template-columns:74px minmax(260px,1.5fr) 130px 190px 170px 110px;gap:0;border:1px solid var(--ink);background:var(--ink);color:var(--bg);}
.hot100-power-head span{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:11px 12px;}
.hot100-power-row{display:grid;grid-template-columns:74px minmax(260px,1.5fr) 130px 190px 170px 110px;align-items:center;border:1px solid var(--bd);border-top:0;color:var(--ink);text-decoration:none;background:var(--bg);}
.hot100-power-row:hover{background:var(--bg2);}
.hot100-power-rank{font-family:var(--f-num);font-size:34px;text-align:center;color:var(--ink);}
.hot100-power-artist{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:10px 12px;}
.hot100-power-artist img{width:64px;height:64px;object-fit:cover;border:1px solid var(--bd);background:var(--bg2);}
.hot100-power-artist strong{display:block;font-family:var(--f-ui);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);}
.hot100-power-artist span,.hot100-power-score span,.hot100-power-stat span{display:block;font-family:var(--f-ui);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.10em;color:var(--ink2);margin-top:3px;}
.hot100-power-score,.hot100-power-stat{padding:10px 12px;border-left:1px solid var(--bd);}
.hot100-power-score strong{font-family:var(--f-num);font-size:30px;line-height:1;color:var(--gold);}
.hot100-power-stat strong{font-family:var(--f-ui);font-size:16px;font-weight:900;color:var(--ink);}
.hot100-power-empty{border:1px solid var(--bd);padding:28px;text-align:center;font-family:var(--f-body);color:var(--ink2);}

/* People’s Choice empty/live states */
.pcc-empty-state{border:1px solid var(--bd);background:var(--bg2);padding:34px 22px;text-align:center;display:grid;gap:8px;}
.pcc-empty-state strong{font-family:var(--f-ui);font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.pcc-empty-state span{font-family:var(--f-body);font-size:13px;line-height:1.5;color:var(--ink2);max-width:520px;margin:0 auto;}
.pcc-song-card{border-bottom:1px solid var(--bd);background:var(--bg);}
.pcc-song-card:hover{background:var(--bg2);}

/* Sidebar voting ad */
.sb-vote-ad{background:var(--ink)!important;color:var(--bg)!important;padding:20px!important;border:1px solid var(--ink)!important;}
.sb-vote-ad-kicker{font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.sb-vote-ad h3{font-family:var(--f-display);font-size:34px;line-height:.95;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 8px;color:var(--bg);}
.sb-vote-ad p{font-family:var(--f-body);font-size:13px;line-height:1.55;color:rgba(255,255,255,.68);margin:0 0 14px;}
.sb-vote-ad a{display:inline-flex;min-height:36px;align-items:center;border:1px solid var(--gold);background:var(--gold);color:#111;text-decoration:none;padding:0 13px;font-family:var(--f-ui);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}

/* Responsive polish */
@media(max-width:980px){
  .hot100-newsroom-lead{grid-template-columns:1fr;}
  .hot100-newsroom-lead img,.hot100-newsroom-ph{min-height:260px;height:300px;}
  .soak-bench-v424 .sb24-layout{grid-template-columns:1fr;}
  .soak-bench-v424 .sb24-lead{border-right:0;border-bottom:1px solid var(--bd);}
  .hot100-power-head{display:none;}
  .hot100-power-row{grid-template-columns:64px minmax(0,1fr) 96px;gap:0;padding:0;}
  .hot100-power-rank{font-size:28px;}
  .hot100-power-artist{grid-template-columns:58px 1fr;padding:10px;}
  .hot100-power-artist img{width:58px;height:58px;}
  .hot100-power-score{border-left:1px solid var(--bd);text-align:center;}
  .hot100-power-stat{display:none;}
}
@media(max-width:680px){
  .hot100-newsroom{padding:0 14px;}
  .hot100-newsroom-lead-copy{padding:20px;}
  .hot100-newsroom-lead h2{font-size:31px;}
  .hot100-newsroom-row{grid-template-columns:96px minmax(0,1fr);gap:12px;}
  .hot100-newsroom-row img,.hot100-newsroom-row-ph{width:96px;height:76px;}
  .hot100-newsroom-row h3{font-size:15px;}
  .hot100-newsroom-row p{display:none;}
  .soak-bench-v424 .sb24-head{padding:18px 16px 14px;}
  .soak-bench-v424 .sb24-layout{display:block;}
  .soak-bench-v424 .sb24-lead{display:block;}
  .soak-bench-v424 .sb24-lead img,.soak-bench-v424 .sb24-ph{width:100%;height:190px;}
  .soak-bench-v424 .sb24-lead-copy{padding:16px;}
  .soak-bench-v424 h3{font-size:25px;}
  .soak-bench-v424 p{display:none;}
  .soak-bench-v424 .sb24-row{grid-template-columns:84px minmax(0,1fr);padding:12px 16px;}
  .soak-bench-v424 .sb24-row img,.soak-bench-v424 .sb24-row-ph{width:84px;height:64px;}
  .hot100-power-row{grid-template-columns:52px minmax(0,1fr) 78px;}
  .hot100-power-rank{font-size:24px;}
  .hot100-power-artist{grid-template-columns:46px 1fr;gap:9px;}
  .hot100-power-artist img{width:46px;height:46px;}
  .hot100-power-artist strong{font-size:12px;}
  .hot100-power-score strong{font-size:23px;}
  .hot100-power-score span{font-size:7px;}
}


/* HOT100 v4.3.5 — accessibility and bug-sweep polish */
.sr-only,.screen-reader-text{
  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;
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:3px!important;
}
button:disabled,
[aria-disabled="true"]{
  cursor:not-allowed!important;
  opacity:.58!important;
}
.car .cpbtn:focus-visible,
.cd:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:4px!important;
}
.car-slide iframe{
  background:#000;
}
.hot100-card-modal button,
.hot100-card-modal select{
  font-family:var(--f-ui);
}
.pcc-chart-list[aria-live="polite"]{
  min-height:90px;
}
.hot100-power-row:focus-visible,
.hot100-newsroom-row:focus-visible,
.hot100-newsroom-lead:focus-visible,
.sb24-row:focus-visible,
.sb24-lead:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:-2px!important;
}
@media(max-width:680px){
  .pcc-dashboard{
    overflow-x:auto;
  }
  .hot100-card-modal .h100-share-buttons button,
  .hot100-card-modal .h100-share-actions button{
    min-height:44px;
  }
}


/* HOT100 v4.3.5 — Phase 1A/2A implementation */
.hot100-chart-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(180px,240px);
  gap:10px;
  align-items:center;
  border:1px solid var(--bd);
  border-bottom:0;
  background:var(--bg);
  padding:12px;
}
.hct-search input,
.hct-genre select{
  width:100%;
  min-height:42px;
  border:1px solid var(--bd);
  background:var(--bg2);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:12px;
  font-weight:800;
  padding:0 12px;
}
.hct-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.hct-filter{
  min-height:42px;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--ink);
  padding:0 12px;
  font-family:var(--f-ui);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.hct-filter.active,
.hct-filter:hover{
  background:var(--ink);
  color:var(--gold);
  border-color:var(--ink);
}
.hot100-chart-no-results{
  display:none;
  border:1px solid var(--bd);
  border-top:0;
  background:var(--bg2);
  padding:18px;
  text-align:center;
  font-family:var(--f-ui);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}
.genre-pill{
  border:1px solid var(--bd);
  cursor:pointer;
}
button.genre-pill{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}
button.genre-pill:hover{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--gold);
}
.hot100-stat-strip-premium{
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}
@media(max-width:900px){
  .hot100-chart-toolbar{
    grid-template-columns:1fr;
  }
  .hct-filters{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .hct-filter{
    flex:0 0 auto;
  }
}
@media(max-width:680px){
  .hot100-chart-toolbar{
    padding:10px;
    gap:8px;
  }
  .hct-search input,
  .hct-genre select,
  .hct-filter{
    min-height:40px;
  }
  .hct-filter{
    font-size:8px;
    padding:0 10px;
  }
}


/* HOT100 v4.3.5 — News page typography correction.
   Uses the existing HOT100 font family, but avoids the heavy display font where it made the page feel messy. */
.hot100-news-page-font-fix .hot100-page-hero{
  margin-bottom:22px;
}
.hot100-news-page-font-fix .hot100-page-hero h1{
  font-family:var(--f-ui)!important;
  font-size:clamp(32px,4.2vw,52px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  font-weight:900!important;
  max-width:760px;
}
.hot100-news-page-font-fix .hot100-page-hero p{
  font-family:var(--f-body)!important;
  font-size:15px!important;
  line-height:1.65!important;
  max-width:680px;
}
.hot100-news-page-font-fix .hot100-eyebrow{
  font-family:var(--f-ui)!important;
  color:var(--gold)!important;
}
.hot100-newsroom{
  gap:16px;
}
.hot100-newsroom-lead{
  grid-template-columns:minmax(0,1fr) minmax(310px,.88fr);
}
.hot100-newsroom-lead-copy{
  justify-content:center;
}
.hot100-newsroom-lead h2{
  font-family:var(--f-ui)!important;
  font-size:clamp(26px,3vw,40px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  font-weight:900!important;
}
.hot100-newsroom-lead p{
  font-family:var(--f-body)!important;
  font-size:14px!important;
  line-height:1.62!important;
}
.hot100-newsroom-row h3{
  font-family:var(--f-ui)!important;
  font-size:17px!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
  text-transform:none!important;
  font-weight:900!important;
}
.hot100-newsroom-row p{
  font-family:var(--f-body)!important;
  font-size:12.8px!important;
  line-height:1.5!important;
}
.hot100-newsroom-meta span,
.hot100-newsroom-meta em,
.hot100-newsroom-meta small,
.hot100-newsroom-lead strong{
  font-family:var(--f-ui)!important;
}
@media(max-width:760px){
  .hot100-news-page-font-fix .hot100-page-hero h1{
    font-size:32px!important;
    line-height:1.04!important;
  }
  .hot100-newsroom-lead h2{
    font-size:24px!important;
    line-height:1.08!important;
  }
  .hot100-newsroom-lead img,
  .hot100-newsroom-ph{
    min-height:220px!important;
    height:240px!important;
  }
}


/* HOT100 v4.3.5 — compact genre badge correction and chart header overlap fix */
.chart-row .genre-pill,
.chart-row button.genre-pill{
  display:inline-block!important;
  min-height:0!important;
  height:auto!important;
  line-height:1.15!important;
  padding:2px 6px!important;
  border:1px solid var(--bd)!important;
  border-radius:0!important;
  background:var(--bg2)!important;
  color:var(--ink2)!important;
  font-family:var(--f-ui)!important;
  font-size:8px!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-shadow:none!important;
}
.chart-row button.genre-pill:hover{
  background:var(--bg2)!important;
  color:var(--ink)!important;
  border-color:var(--ink2)!important;
}
.ch div:last-child{
  overflow:hidden;
}
@media(max-width:680px){
  .chart-row .genre-pill,
  .chart-row button.genre-pill{
    font-size:7px!important;
    padding:1px 5px!important;
    letter-spacing:.06em!important;
  }
}


/* HOT100 v4.3.5 — Spotify playlist support inside existing Radio interface */
.rpb-spotify-panel{
  display:none;
  min-width:320px;
  max-width:460px;
  flex:1 1 360px;
  align-items:center;
  gap:10px;
}
.radio-player-bar.visible .rpb-spotify-panel{
  display:flex;
}
.rpb-spotify-panel iframe{
  width:100%;
  height:80px;
  border:0;
  background:#111;
  border-radius:0;
}
.rpb-spotify-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:120px;
}
.rpb-spotify-label span{
  font-family:var(--f-ui);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.rpb-spotify-label strong{
  font-family:var(--f-ui);
  font-size:11px;
  font-weight:900;
  color:var(--bg);
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.radio-player-bar.spotify-only .rpb-buttons,
.radio-player-bar.spotify-only .rpb-progress-row,
.radio-player-bar.spotify-only .rpb-vol-wrap{
  opacity:.35;
  pointer-events:none;
}
.hot100-radio-spotify-block{
  max-width:1180px;
  margin:0 auto 28px;
  padding:0 18px;
}
.hot100-radio-spotify-block iframe{
  border:1px solid var(--bd);
  background:#111;
}
@media(max-width:900px){
  .radio-player-bar.visible .rpb-spotify-panel{
    display:block;
    width:100%;
    max-width:none;
    order:4;
  }
  .rpb-spotify-label{
    margin:8px 0 6px;
  }
  .rpb-spotify-label strong{
    max-width:100%;
  }
}


/* HOT100 v4.3.5 — Chart Manager order and quick edit controls */
.h100-cm-table .cm-pos-input{
  width:58px!important;
  text-align:center;
  font-weight:800;
}
.h100-cm-table .cm-text,
.h100-cm-table .cm-cover-url{
  width:100%;
  box-sizing:border-box;
  min-height:32px;
  border:1px solid #dcdcde;
  background:#fff;
  padding:5px 7px;
  font-size:12px;
}
.h100-cm-table .cm-title-input{
  font-weight:800;
}
.h100-cm-table .cm-edit-link{
  display:inline-block;
  margin-top:4px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
}
.h100-cm-table .cm-cover-cell{
  min-width:150px;
}
.h100-cm-table .cm-cover-preview{
  width:56px;
  height:56px;
  border:1px solid #dcdcde;
  background:#f6f7f7;
  margin-bottom:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.h100-cm-table .cm-cover-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.h100-cm-table .cm-cover-url{
  margin-bottom:5px;
  font-size:11px;
}
.h100-cm-table .cm-media-btn{
  min-height:28px;
  line-height:26px;
  padding:0 8px;
  font-size:11px;
}
.h100-cm-table .cm-drag{
  color:#8c8f94;
  font-weight:800;
  text-align:center;
}
.h100-cm-table td{
  vertical-align:top;
}


/* HOT100 v4.3.5 — Premium Chart Manager UI
   Admin-only interface polish: cleaner editing, faster scanning, and easier artwork changes. */
.hot100-cm-premium{
  max-width:1600px;
}
.hot100-cm-hero{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:18px 20px!important;
  border:1px solid #dcdcde;
  background:linear-gradient(135deg,#111 0%,#1c1c1c 65%,#2b2410 100%)!important;
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.hot100-cm-hero .h100-sub{
  color:rgba(255,255,255,.78)!important;
}
.h100-cm-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.h100-cm-hero-actions .h100-btn{
  background:#fff!important;
  color:#111!important;
  border-color:#fff!important;
}
.h100-cm-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.h100-cm-kpi{
  background:#fff;
  border:1px solid #dcdcde;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:70px;
  justify-content:center;
}
.h100-cm-kpi strong{
  font-size:22px;
  line-height:1;
  color:#111;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.h100-cm-kpi span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#646970;
}
.hot100-cm-premium .h100-cm-weekbox{
  background:#fff;
  border:1px solid #dcdcde;
  padding:16px;
  margin-bottom:12px;
}
.hot100-cm-premium .h100-cm-week-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#111;
  margin-bottom:10px;
}
.hot100-cm-premium .h100-cm-week-grid{
  display:grid;
  grid-template-columns:1.2fr .7fr .65fr 1fr;
  gap:12px;
  align-items:end;
}
.hot100-cm-premium .h100-cm-week-grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#646970;
}
.hot100-cm-premium .h100-cm-week-grid input[type="text"],
.hot100-cm-premium .h100-cm-week-grid input[type="date"]{
  min-height:38px;
  border:1px solid #dcdcde;
  padding:6px 9px;
  font-size:13px;
  font-weight:700;
  color:#111;
}
.h100-cm-premium-toolbar{
  position:sticky;
  top:32px;
  z-index:30;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #dcdcde;
  padding:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.h100-cm-tools-left,
.h100-cm-tools-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.h100-cm-tool-label{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#646970;
}
.h100-cm-search,
.h100-cm-premium-toolbar select{
  min-height:38px;
  border:1px solid #dcdcde;
  background:#f6f7f7;
  padding:0 10px;
  font-size:12px;
  min-width:220px;
}
.h100-cm-search:focus,
.h100-cm-premium-toolbar select:focus,
.h100-cm-table input:focus,
.h100-cm-table select:focus{
  border-color:#B88923!important;
  box-shadow:0 0 0 1px #B88923!important;
  outline:none!important;
}
.h100-cm-help-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  background:#111;
  color:#fff;
  border:1px solid #111;
  border-top:0;
  padding:9px 12px;
  font-size:11px;
}
.h100-cm-help-strip span{
  color:rgba(255,255,255,.74);
}
.h100-cm-help-strip strong{
  color:#D4AF37;
}
.h100-cm-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #dcdcde;
}
.h100-cm-table thead th{
  position:sticky;
  top:102px;
  z-index:20;
  background:#111;
  color:#D4AF37;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:11px 8px;
  border-right:1px solid rgba(255,255,255,.12);
}
.h100-cm-table tbody td{
  padding:10px 8px;
  border-bottom:1px solid #ececec;
  vertical-align:top;
}
.h100-cm-table tbody tr:nth-child(even){
  background:#fbfbfb;
}
.h100-cm-table tbody tr:hover{
  background:#fff9e6;
}
.h100-cm-table tbody tr.cm-row-touched{
  box-shadow:inset 3px 0 0 #B88923;
  background:#fffaf0;
}
.h100-cm-table .cm-pos-input{
  width:58px!important;
  height:38px;
  text-align:center;
  font-size:18px;
  font-weight:900;
  color:#111;
  background:#fff;
}
.h100-cm-table .cm-text,
.h100-cm-table .cm-cover-url,
.h100-cm-table .cm-num,
.h100-cm-table .cm-sel{
  width:100%;
  box-sizing:border-box;
  min-height:34px;
  border:1px solid #dcdcde;
  background:#fff;
  color:#111;
  padding:6px 8px;
  font-size:12px;
}
.h100-cm-table .cm-title-input{
  font-weight:900;
  letter-spacing:-.01em;
}
.h100-cm-table .cm-edit-link{
  display:inline-block;
  margin-top:5px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#B88923;
  text-decoration:none;
}
.h100-cm-table .cm-cover-cell{
  min-width:150px;
}
.h100-cm-table .cm-cover-preview{
  width:64px;
  height:64px;
  border:1px solid #dcdcde;
  background:#f6f7f7;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.h100-cm-table .cm-cover-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.h100-cm-table .cm-cover-url{
  margin-bottom:6px;
  font-size:11px;
  min-height:30px;
}
.h100-cm-table .cm-media-btn{
  min-height:28px;
  line-height:26px;
  padding:0 9px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.h100-cm-table .cm-drag{
  color:#8c8f94;
  font-weight:900;
  text-align:center;
  padding-top:18px;
}
.h100-cm-table .cm-art-ph{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#D4AF37;
  font-weight:900;
  font-size:14px;
}
.h100-cm-savebar{
  position:sticky;
  bottom:0;
  z-index:35;
  margin-top:14px;
  padding:12px;
  background:#fff;
  border:1px solid #dcdcde;
  box-shadow:0 -12px 28px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.h100-cm-savebar strong{
  display:block;
  font-size:13px;
  color:#111;
}
.h100-cm-savebar span{
  display:block;
  font-size:11px;
  color:#646970;
}
@media(max-width:1100px){
  .hot100-cm-premium .h100-cm-week-grid,
  .h100-cm-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .h100-cm-premium-toolbar{
    position:static;
    align-items:flex-start;
    flex-direction:column;
  }
  .h100-cm-table thead th{
    position:static;
  }
}
@media(max-width:720px){
  .hot100-cm-hero,
  .h100-cm-savebar{
    flex-direction:column;
    align-items:flex-start;
  }
  .h100-cm-kpi-grid,
  .hot100-cm-premium .h100-cm-week-grid{
    grid-template-columns:1fr;
  }
  .h100-cm-tools-left,
  .h100-cm-tools-right,
  .h100-cm-search,
  .h100-cm-premium-toolbar select{
    width:100%;
  }
}


/* HOT100 v4.4.0 — Mobile UX, audit bug fixes and performance polish */
html { scroll-padding-top: 160px; }
@media (max-width: 768px) { html { scroll-padding-top: 200px; } }

/* Prevent the sticky chart header from using a desktop-only offset on mobile. */
@media (max-width: 768px) {
  .ch { position: relative !important; top: auto !important; }
}

/* Keep movement visible on mobile by turning it into a small badge on the rank cell. */
.cr-pos { position: relative; }
@media (max-width: 640px) {
  .chart-row { position: relative; }
  .cr-mv {
    display: flex !important;
    position: absolute;
    left: 9px;
    bottom: 6px;
    z-index: 2;
    min-width: 28px;
    min-height: 14px;
    padding: 1px 4px;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--bd);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .cr-mv .pv { display: none; }
  .cr-mv .av { font-size: 8px; line-height: 1; }
}

/* Make touch targets usable on phones. */
@media (max-width: 640px) {
  .cr-spt { width: 44px !important; min-width: 44px !important; }
  .spt-btn { width: 36px !important; height: 36px !important; }
}
@media (max-width: 420px) {
  .spt-btn { width: 34px !important; height: 34px !important; }
}

/* The HOT Score is a differentiator, so keep it visible on larger layouts. */
@media (min-width: 769px) {
  .cr-stat.sc { display: flex !important; }
}

/* Add a subtle visual cue that filter strips scroll horizontally. */
.gs, .hct-filters {
  -webkit-mask-image: linear-gradient(to right, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, black 86%, transparent 100%);
}

.hot100-chart-no-results {
  border: 1px solid var(--bd);
  background: var(--bg2);
  color: var(--ink2);
  padding: 18px;
  margin: 0 0 12px;
  font-family: var(--f-ui);
  font-size: 13px;
  text-align: center;
}
.hot100-chart-no-results button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 10px;
  margin-left: 6px;
  cursor: pointer;
  font: 800 11px/1 var(--f-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
}

#hot100-back-top {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 850;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: 900 18px/1 var(--f-ui);
  box-shadow: 0 14px 35px rgba(0,0,0,.2);
  cursor: pointer;
}
#hot100-back-top.show { display: flex; }
@media (max-width: 640px) { #hot100-back-top { right: 14px; bottom: 84px; } }

@keyframes hot100-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-row {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bd) 50%, var(--bg2) 75%);
  background-size: 800px 100%;
  animation: hot100-shimmer 1.5s infinite;
  height: 72px;
  border-bottom: 1px solid var(--bd);
}