:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --text:#e8eef6;
  --muted:#9fb0c3;
  --stroke:rgba(255,255,255,.10);
  --chip:rgba(255,255,255,.06);
  --accent:#7ec8ff;
}

*{box-sizing:border-box}

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

/* ===== HEADER ===== */

.statsHeader{
  padding:16px 18px 12px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.navBtns{
  display:flex;
  gap:10px;
  flex-shrink:0;
}

.homeBtn,
.statsBtn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:#2dff00;
  text-decoration:none;
  transition:all .2s ease;
}

.homeBtn:hover{
  background:rgba(96,165,250,.25);
  border-color:rgba(96,165,250,.6);
  transform:translateY(-2px);
}

.statsBtn:hover{
  background:rgba(168,85,247,.25);
  border-color:rgba(168,85,247,.6);
  transform:translateY(-2px);
}

.homeBtn svg,
.statsBtn svg{
  width:16px;
  height:16px;
  display:block;
}

.titleWrap{
  display:flex;
  flex-direction:column;
}

h1{
  margin:0;
  font-size:20px;
}

.sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* ===== CONTENT WRAP ===== */

.wrap{
  padding:18px;
  max-width:1200px;
  margin:0 auto;
}

.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ===== HEATMAP ===== */

#heatmap{
  width:100%;
  overflow:auto;
}

svg{
  width:100%;
  height:auto;
  display:block;
}

/* axes labels */
.axis text{
  fill:var(--text);
  
}

/* tooltip */
.tooltip{
  position:fixed;
  pointer-events:none;
  background: rgba(10,14,20,.95);
  color: var(--text);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  max-width: 260px;
  line-height: 1.3;
  display:none;
}

.tooltip .mut{
  color:var(--muted);
}

/* small helper */
.err{ color:#ffb3b3; }