.bottom-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #222;
  padding: 12px 0 8px 0;
  border-top: 2px solid #181818;
}

.menu-item {
  border-radius: 50px;
  padding: 8px 12px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}

.menu-item.active {
  background: #184d1a;
  box-shadow: 0 2px 8px rgba(24,255,58,0.08);
}

.menu-item img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(98%) saturate(749%) hue-rotate(77deg) brightness(104%) contrast(104%);
  width: 36px;
  height: 36px;
  transition: filter 0.2s;
}

.menu-item.active img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(98%) saturate(749%) hue-rotate(77deg) brightness(104%) contrast(104%);
}

.menu-item:active,
.menu-item:focus {
  background: #184d1a;
}

.config-lateral {
  position: fixed;
  top: 0; right: 0;
  width: 320px; max-width: 90vw;
  height: 100vh;
  background: #181818;
  color: #00FF00;
  box-shadow: -2px 0 16px #000a;
  z-index: 1101;
  transform: translateX(100%);
  transition: transform 0.3s;
  overflow-y: auto;
}
.config-lateral.aberto { transform: translateX(0); }

#fundo-escuro-config {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
}
#fundo-escuro-config.visivel { display: block; }