:root{
  --red:#e31837;
  --red-dark:#b70f2a;
  --black:#0a0b0e;
  --panel:#111319;
  --panel2:#17191f;
  --off:#ececea;
  --white:#fff;
  --line:#cbc7c0;
  --muted:#77736e;
}
*{box-sizing:border-box;border-radius:0!important}
html,body{margin:0;background:var(--off);color:#111;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.chart-header{background:#090a0d;border-top:6px solid #284bc2;border-bottom:3px solid var(--red);color:#fff}
.chart-header-inner{width:min(1180px,92vw);min-height:72px;margin:auto;display:flex;align-items:center;gap:28px}
.chart-logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900}
.chart-logo-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--red);font-size:14px}
.chart-header nav{display:flex;gap:20px;align-items:center;font-size:13px;flex-wrap:wrap}
.chart-header nav a{color:#fff}
.chart-header nav a:hover,.chart-header nav .active{color:#ff3656}
.charts-hero{
  height:390px;
  width:100%;
  background:linear-gradient(90deg,#050506 0%,#15070b 55%,#360711 100%);
  color:#fff;
  border-bottom:1px solid #2a2d35;
  display:flex;
  align-items:center;
}
.charts-hero-inner{
  width:min(1240px,calc(100% - 48px));
  margin:auto;
  padding:0;
}
.eyebrow,.section-kicker{color:#ff3656;font-size:11px;letter-spacing:1.8px;font-weight:900}
.charts-hero h1{font-size:48px;margin:9px 0 12px}
.charts-hero p{color:#c8c9ce;font-size:17px;margin:0;max-width:720px;line-height:1.55}
.charts-wrap{width:min(1180px,92vw);margin:28px auto 70px}
.chart-tabs{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #1e2026;background:#0b0c10}
.chart-tab{background:#111319;color:#fff;border:0;border-right:1px solid #2f3239;padding:15px 12px;cursor:pointer;font-weight:800}
.chart-tab:last-child{border-right:0}
.chart-tab:hover,.chart-tab.active{background:var(--red)}
.chart-board{margin-top:18px;border:1px solid #bdb8b0;background:#fff}
.chart-board-head{background:#101116;color:#fff;border-left:5px solid var(--red);padding:18px;display:flex;justify-content:space-between;align-items:end;gap:20px}
.chart-board-head h2{margin:4px 0 0;font-size:28px}
.chart-note{color:#a8acb4;font-size:12px;text-align:right}
.chart-table-head,.chart-row{display:grid;grid-template-columns:60px minmax(280px,1.6fr) 1fr 120px 70px;align-items:center}
.chart-table-head{background:#17191f;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:800}
.chart-table-head span{padding:11px 12px;border-right:1px solid #292c34}
.chart-row{min-height:94px;border-bottom:1px solid #d3cec6;background:#fffdf9}
.chart-row:nth-child(even){background:#f2efe9}
.chart-rank{font-size:24px;font-weight:900;padding:15px}
.chart-track{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:10px 12px}
.chart-cover{width:72px;height:72px;background:#191b21 center/contain no-repeat;border:1px solid #c6c1b9}
.chart-track h3{margin:0 0 5px;font-size:16px}
.chart-track h3 a:hover,.artist-name:hover{color:var(--red)}
.artist-name{font-size:12px;color:#68655f}
.track-sub{font-size:11px;color:#88847e;margin-top:4px}
.chart-stats{padding:12px;font-size:12px;line-height:1.6;color:#5e5b56}
.chart-stats strong{color:#111}
.chart-price{padding:12px;font-weight:900}
.chart-price small{display:block;color:#8b8780;font-weight:400;margin-top:4px}
.chart-play{width:38px;height:38px;background:#111319;color:#fff;border:1px solid #111319;cursor:pointer}
.chart-play:hover{background:var(--red);border-color:var(--red)}
.chart-empty{padding:38px;text-align:center;color:#77736e}
.chart-explainer{margin-top:28px}
.chart-explainer h3{font-size:22px;margin:0 0 14px}
.explainer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.explainer-grid article{background:#101116;color:#fff;border-top:4px solid var(--red);padding:15px;min-height:125px}
.explainer-grid strong{display:block;color:#ff3656;margin-bottom:10px}
.explainer-grid span{font-size:12px;line-height:1.5;color:#bfc1c7}
.chart-footer{background:#090a0d;color:#fff;border-top:3px solid var(--red)}
.chart-footer-inner{width:min(1180px,92vw);margin:auto;padding:25px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px}
.chart-footer span{color:#9b9ea8}
.chart-player{position:fixed;left:0;right:0;bottom:0;background:#0b0c10f5;color:#fff;border-top:2px solid var(--red);display:grid;grid-template-columns:52px 180px 36px 36px 36px 1fr 110px;gap:10px;align-items:center;padding:9px 18px;z-index:100}
.chart-player.hidden{display:none}
.player-cover{width:52px;height:52px;background:#17191f center/contain no-repeat}
.player-meta strong,.player-meta span{display:block}.player-meta span{font-size:11px;color:#9296a0;margin-top:4px}
.chart-player button{background:#15171d;color:#fff;border:1px solid #3b3f49;height:34px}
.chart-player input{accent-color:var(--red)}
#playerTime{font-size:11px;color:#9ea2ac}
@media(max-width:900px){
  .chart-header nav{display:none}
  .chart-tabs{grid-template-columns:1fr 1fr}
  .chart-tab{border-bottom:1px solid #2f3239}
  .chart-table-head{display:none}
  .chart-row{grid-template-columns:50px 1fr 60px}
  .chart-stats,.chart-price{grid-column:2/3;padding:0 12px 10px}
  .chart-play{grid-column:3;grid-row:1;justify-self:center}
  .explainer-grid{grid-template-columns:1fr 1fr}
  .chart-player{grid-template-columns:48px 1fr 34px 34px 34px}
  .chart-player input,#playerTime{display:none}
}
@media(max-width:600px){
  .charts-hero h1{font-size:38px}
  .chart-tabs{grid-template-columns:1fr}
  .chart-board-head{align-items:flex-start;flex-direction:column}
  .chart-note{text-align:left}
  .chart-track{grid-template-columns:58px 1fr}
  .chart-cover{width:58px;height:58px}
  .explainer-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .charts-hero{height:300px}
  .charts-hero-inner{width:calc(100% - 24px)}
}
@media(max-width:620px){
  .charts-hero{height:240px}
}


/* =========================================================
   OSBEATS CHARTS CUSTOM BANNER
   "THE HOTTEST BEATS. RIGHT NOW."
   ========================================================= */
.charts-hero{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  background:#090a0d !important;
  border-bottom:3px solid #e31837 !important;
  line-height:0 !important;
}

.charts-hero img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}

.charts-hero-inner{
  display:none !important;
}


/* =========================================================
   CHARTS PAGE — APPROVED MOCKUP LAYOUT
   Keeps OSBeats current off-white page background.
   ========================================================= */

.charts-wrap{
  width:min(1380px,92vw) !important;
  margin:18px auto 70px !important;
}

.charts-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
}

.charts-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.charts-breadcrumb a{
  color:#111;
}

.charts-breadcrumb strong{
  color:#e31837;
}

.charts-toolbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

.charts-toolbar-right #chartCount{
  color:#6b6761;
  font-size:12px;
}

#chartMode{
  min-width:180px;
  background:#fff;
  color:#111;
  border:1px solid #aaa49c;
  padding:10px 36px 10px 12px;
}

.chart-view-switch{
  display:flex;
  gap:6px;
}

.chart-view-btn{
  width:38px;
  height:38px;
  border:1px solid #343841;
  background:#555961;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

.chart-view-btn.active{
  background:#e31837;
  border-color:#e31837;
}

/* Main chart layout */
.charts-marketplace{
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* Filters */
.chart-filters{
  background:#101116;
  color:#fff;
  border:1px solid #2e3139;
  padding:17px;
  position:sticky;
  top:14px;
}

.filter-title{
  color:#ff3656;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
  margin-bottom:17px;
}

.chart-filter-stack{
  display:grid;
  gap:15px;
}

.chart-filter-stack > div{
  display:grid;
  gap:6px;
}

.chart-filter-stack label{
  font-size:12px;
  font-weight:700;
}

.chart-filter-stack input,
.chart-filter-stack select{
  width:100%;
  background:#0c0d11;
  color:#fff;
  border:1px solid #3a3d46;
  padding:11px;
}

.chart-filter-primary,
.chart-filter-secondary{
  min-height:45px;
  font-weight:800;
  cursor:pointer;
}

.chart-filter-primary{
  background:#e31837;
  color:#fff;
  border:1px solid #e31837;
}

.chart-filter-secondary{
  background:#101116;
  color:#fff;
  border:1px solid #555a64;
}

/* Ranked list */
.chart-board-redesign{
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}

.chart-list-head,
.chart-rank-row{
  display:grid;
  grid-template-columns:48px minmax(310px,1.75fr) minmax(140px,.8fr) 110px 74px 105px 115px 45px;
  align-items:center;
}

.chart-list-head{
  min-height:44px;
  background:#090a0d;
  color:#fff;
  text-transform:uppercase;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}

.chart-list-head span{
  padding:0 11px;
}

.chart-rank-row{
  min-height:86px;
  background:#fff;
  border-bottom:1px solid #d4cfc8;
  color:#111;
}

.chart-rank-row:nth-child(even){
  background:#f3f1ed;
}

.chart-rank-row > *{
  padding:10px 11px;
}

.rank-number{
  text-align:center;
  color:#e31837;
  font-size:20px;
  font-weight:900;
}

.rank-beat{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:11px;
  align-items:center;
}

.rank-cover{
  width:64px;
  height:64px;
  position:relative;
  overflow:hidden;
  background:#101116;
}

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

.rank-title-wrap{
  min-width:0;
}

.rank-title-line{
  display:flex;
  align-items:center;
  gap:8px;
}

.rank-title-line>a{
  color:#111;
  font-weight:900;
  font-size:15px;
}

.rank-title-line>a:hover,
.rank-producer:hover{
  color:#e31837;
}

.rank-sub{
  color:#77736e;
  font-size:10px;
  margin-top:5px;
}

.mini-play{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #aaa49c;
  background:#fff;
  color:#111;
  cursor:pointer;
  font-size:10px;
}

.mini-play:hover{
  background:#e31837;
  border-color:#e31837;
  color:#fff;
}

.rank-producer{
  color:#e31837;
  font-weight:800;
  font-size:12px;
}

.chart-rank-row>div:not(.rank-number):not(.rank-beat):not(.rank-metric){
  font-size:11px;
}

.rank-metric{
  color:#e31837;
  font-size:16px;
  font-weight:900;
  text-align:center;
}

.rank-more{
  color:#111;
  font-weight:900;
  text-align:center;
  letter-spacing:2px;
}

/* Compact view */
.chart-rows.compact-chart .chart-rank-row{
  min-height:58px;
}

.chart-rows.compact-chart .rank-cover{
  width:42px;
  height:42px;
}

.chart-rows.compact-chart .rank-beat{
  grid-template-columns:42px 1fr;
}

.chart-rows.compact-chart .rank-sub{
  display:none;
}

.chart-empty{
  background:#fff;
  border:1px solid #c9c4bc;
  padding:35px;
  text-align:center;
  color:#6d6963;
}

/* Remove the obsolete old chart structures if cached CSS still references them */
.chart-tabs,
.chart-board-head,
.chart-table-head,
.chart-explainer{
  display:none !important;
}

@media(max-width:1150px){
  .charts-marketplace{
    grid-template-columns:220px minmax(0,1fr);
  }

  .chart-list-head,
  .chart-rank-row{
    grid-template-columns:45px minmax(250px,1.5fr) 120px 95px 65px 90px 95px 40px;
  }
}

@media(max-width:920px){
  .charts-marketplace{
    grid-template-columns:1fr;
  }

  .chart-filters{
    position:static;
  }

  .charts-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .charts-toolbar-right{
    width:100%;
    margin-left:0;
    flex-wrap:wrap;
  }

  .chart-list-head{
    display:none;
  }

  .chart-rank-row{
    grid-template-columns:45px 1fr 90px;
  }

  .rank-producer,
  .chart-rank-row>div:nth-child(4),
  .chart-rank-row>div:nth-child(5),
  .chart-rank-row>div:nth-child(6){
    display:none;
  }

  .rank-metric{
    grid-column:3;
    grid-row:1;
  }

  .rank-more{
    grid-column:3;
    grid-row:2;
  }
}

@media(max-width:620px){
  .charts-toolbar-right{
    display:grid;
    grid-template-columns:1fr;
  }

  .chart-view-switch{
    display:none;
  }

  .chart-rank-row{
    grid-template-columns:38px 1fr 70px;
  }

  .rank-beat{
    grid-template-columns:48px 1fr;
  }

  .rank-cover{
    width:48px;
    height:48px;
  }
}


/* =========================================================
   CHARTS PAGE — APPROVED RED/BLACK CONSISTENCY PASS
   Keeps existing layout/functionality unchanged.
   ========================================================= */
:root{
  --charts-redblack:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%);
  --charts-redblack-hover:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%);
}

/* Active view mode */
.chart-view-btn.active{
  background:var(--charts-redblack) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Apply Filters uses the approved red/black mix */
.chart-filter-primary{
  background:var(--charts-redblack) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

.chart-filter-primary:hover{
  background:var(--charts-redblack-hover) !important;
  border-color:#920A10 !important;
}

/* Keep filter focus/selection accents consistent */
.chart-filter-stack input:focus,
.chart-filter-stack select:focus,
#chartMode:focus{
  border-color:#73070B !important;
  outline:none !important;
}

.chart-filter-stack input,
.chart-player input[type="range"]{
  accent-color:#73070B !important;
}

/* Ranking accents should remain visible rather than dark red on dark UI */
.rank-number,
.rank-metric{
  color:#73070B !important;
}

.rank-producer,
.rank-title-line>a:hover,
.rank-producer:hover{
  color:#73070B !important;
}

/* Play controls */
.mini-play:hover,
.chart-player button:hover{
  background:var(--charts-redblack) !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Header/footer red accents */
.chart-header,
.chart-footer,
.charts-hero{
  border-color:#73070B !important;
}