:root{
  --bg1:#0f766e;
  --bg2:#1d4ed8;
  --bg3:#7c3aed;

  --panel:#ffffff;
  --panel2:#f8fafc;

  --ink:#334155;
  --muted:#64748b;

  --accent:#0f766e;
  --accent2:#5b21b6;

  --gold:#f59e0b;
  --warn:#ef4444;

  --tip1:#fff7ed;
  --tip2:#fde68a;

  --wood1:#fbf4e6;
  --wood2:#f2e4c7;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  padding:8px;
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 45%,var(--bg3) 100%);
  font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;
}

.card{
  width:min(1200px,100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px;
  box-shadow:0 14px 36px rgba(15,23,42,.22);
  overflow:hidden;
}

.header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px 14px;
  background:linear-gradient(135deg,#7c3aed 0%,#2563eb 55%,#0f766e 100%);
  color:#fff;
}

.logoMark{
  width:58px;
  height:58px;
}

.brandTitle{
  margin:0;
  font:500 28px/1.08 'Palatino Linotype','Book Antiqua',Palatino,serif;
}

.brandTag{
  margin-top:4px;
  font-size:12px;
  opacity:.9;
}

.mainLayout{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  padding:8px 10px 0;
}

.leftCol{
  padding-bottom:20px;
}

.rightCol{
  padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg,#ede9fe 0%,#e0e7ff 55%,#dbeafe 100%);
}

.display{
  padding:10px;
  text-align:center;
  color:var(--accent);
  font:500 24px/1.1 'Palatino Linotype','Book Antiqua',Palatino,serif;
}

.keySig{
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.scaleHelp{
  text-align:center;
  font-size:12px;
  padding-bottom:6px;
}

.chordGrid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  margin:4px 0 18px;
  padding:10px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fafc,#e0e7ff);
}

.tabs{
  display:flex;
  gap:5px;
  padding:12px 0 6px;
}

.tabs button{
  flex:1;
  padding:9px 10px;
  border:none;
  border-radius:12px;
  background:#e2e8f0;
}

.tabs button.active{
  background:#ffffff;
}

.panel{
  display:none;
}

.panel.active{
  display:block;
}

.tab{
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  font:12px monospace;
}

.tipBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border:1px solid var(--gold);
  border-radius:14px;
  background:linear-gradient(135deg,var(--tip1),var(--tip2));
  font-size:12px;
}

.tipNav{
  cursor:pointer;
  font-size:11px;
}

.fretboardWrap{
  margin-top:20px;
  padding:10px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--wood1),var(--wood2));
}

.legend{
  text-align:center;
  margin-top:6px;
  font-size:10px;
  color:var(--muted);
}

button{
  cursor:pointer;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #cbd5e1;
}

button.primary{
  background:linear-gradient(135deg,#10b981,#0f766e);
  color:white;
}

button.secondary{
  background:#ffffff;
}

button.gold{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:white;
}

.tempoRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #cbd5e1;
  border-radius:10px;
  overflow:hidden;
}

.tempoLabel{
  padding:8px;
  font-weight:600;
}