:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --text:#e8eef6;
  --muted:#9fb0c3;
  --stroke:rgba(255,255,255,.10);
  --chip:rgba(255,255,255,.06);
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
a{color:inherit}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);

  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Full-width like the other stats pages */
.wrap{
  width:100%;
  margin:0;
  padding:16px 18px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Header layout aligned with stats-song-meta */
.statsHeader{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.leftNav{
  display:flex;
  gap:10px;
  align-items:center;
}

.titleBlock{
  flex:1;
  min-width:260px;
}

.titleBlock h1{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}

.subtitle{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  max-width:680px;
  margin-top:6px;
}

.rightControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Nav buttons (matches your other pages) */
.homeBtn,
.statsBtn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#2dff00;
  text-decoration:none;
  transition:all .2s ease;
}
.homeBtn:hover,
.statsBtn:hover{
  background:rgba(96,165,250,.25);
  border-color:rgba(96,165,250,.6);
  transform:translateY(-2px);
}

/* Controls chip */
.chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-size:13px;
}

.chipBtn{
  cursor:pointer;
  background:transparent;
  color:var(--text);
  border:none;
  padding:0;
  font-size:13px;
}

/* Main panel fills remaining height */
.panel{
  flex:1;
  min-height:0;
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:14px;
  display:flex;
}

.grid{
  width:100%;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:14px;
  min-height:0;
}

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

.panelInner{
  min-height:0;
}

#chart{
  min-height:0;
}

/* Make chart responsive and avoid cramped height */
#chart svg{
  width:100%;
  height:auto;
  display:block;
}

/* KPIs */
.kpi{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}

.kpi .box{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px;
}

.kpi .v{ font-size:18px; font-weight:700; font-variant-numeric: tabular-nums; }
.kpi .k{ color:var(--muted); font-size:12px; margin-top:2px; }

.sectionLabel{
  color:var(--muted);
  font-size:12px;
  margin:10px 0 8px;
}

/* List */
.list{ margin:0; padding:0; list-style:none; }
.list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background: rgba(255,255,255,.03);
  margin-bottom:8px;
}

.hint{
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
  line-height:1.35;
}

/* D3 axis */
.axis text{ fill: var(--muted); font-size:12px; }
.axis path, .axis line{ stroke: rgba(255,255,255,.12); }
.bar{ cursor:pointer; }
.bar:hover{ filter: brightness(1.15); }