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

*{ 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 (aligned like visual-meta-search) ===== */

.header{
  padding:16px 18px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;

  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

.leftHead{
  display:flex;
  align-items:center;  /* key: title sits to the right of the buttons */
  gap:12px;
  min-width:280px;
}

/* round icon buttons (green like visual-meta-search) */
.homeBtn,
.statsBtn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--navGreen);
  text-decoration:none;
  transition:all .15s ease;
  flex:0 0 auto;
}

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

/* ensure icons stay consistent */
.homeBtn svg,
.statsBtn svg{
  width:18px;
  height:18px;
  display:block;
}

/* Title block */
.titleWrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.titleControls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.chordsLine{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0;   /* remove vertical spacing */
}


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

.sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  max-width:900px;
}

.headerRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* pill button */
.pillBtn{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  font-size:13px;
}
.pillBtn:hover{ background:rgba(255,255,255,.12); }

.chordsLine{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  font-size:12px;
  color:var(--text);
  text-decoration:none;
}

/* ===== Body ===== */

.wrap{ padding:18px; max-width:1200px; margin:0 auto; }
.panel{ background:var(--panel); border:1px solid var(--stroke); border-radius:14px; padding:14px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
input[type="text"]{ background:transparent; border:1px solid var(--stroke); border-radius:999px; padding:8px 12px; color:var(--text); width:260px; }
#status{ color:var(--muted); font-size:12px; }
.err{ color:#ffb3b3; }

.songGrid{ column-width: 260px; column-gap: 16px; }
.songItem{ break-inside: avoid; margin: 0 0 10px 0; }
.songLink{
  display:block; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text); text-decoration:none;
  transition: background .15s ease, transform .1s ease;
}
.songLink:hover{ background:rgba(126,200,255,.12); transform: translateY(-1px); color:var(--accent); }

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px; padding: 2px 6px; border: 1px solid var(--stroke);
  border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted);
}

/* Small screens: allow stacking */
@media (max-width: 720px){
  .leftHead{ flex-wrap:wrap; }
}