.bass-wrapper{
  width:100%;
  max-width:1000px;
  margin:auto;
  padding:0 16px 100px;
}

#fretboard{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}

.string-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.string-label{
  width:20px;
  font-weight:bold;
  text-align:center;
}

.fret{
  width:48px;
  height:48px;
  border-radius:10px;
  background:#1f1f1f;
  border:1px solid #333;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:white;
}

.fret.open{
  background:#ff6600;
  color:black;
  font-weight:bold;
}

.scale-controls{
  display:flex;
  gap:10px;
  margin-top:20px;
  margin-bottom:20px;
}

.scale-controls select{
  flex:1;
  padding:12px;
  border:none;
  border-radius:12px;
  background:#1f1f1f;
  color:white;
  font-size:16px;
}

.fret{
  position:relative;
  overflow:hidden;
}

.fret-marker{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}

.fret-marker.double::before{
  content:'';
  position:absolute;
  top:-10px;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}

#scale-info{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin:18px 0 24px;
  padding:12px 16px;
  border-radius:14px;
  background:#151515;
  border:1px solid #242424;
}

#scale-notes,
#scale-formula,
#scale-intervals{
  font-size:14px;
  color:#d0d0d0;
}

.scale-label{
  color:#888;
  font-weight:600;
}

/* =========================
   ACTIVE SCALE NOTE
========================= */
.active-note{
  background:#296dff;
  border-color:#4d88ff;
  color:white;
  box-shadow:
    0 0 12px rgba(41,109,255,.35);
}

/* =========================
   ROOT NOTE
========================= */
.root-note{
  background:#ff7a00;
  border-color:#ff9d42;
  color:black;
  font-weight:700;
  box-shadow:
    0 0 14px rgba(255,122,0,.45);

}

.fret{
  transition:
    background .2s,
    border-color .2s,
    transform .15s;
}

.fret:hover{
  transform:scale(1.05);
}

@media(max-width:768px){

  .fret{
    width:38px;
    height:38px;
    font-size:12px;
  }

}