body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#111;
  color:#eee;
  -webkit-user-select:none;
}

.topControls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
}

#songSelect{
  padding:4px 8px;
  font-size:14px;
  background:#333;
  color:#eee;
  border:1px solid #555;
}
.mainBtn{background:#444;color:#eee;border:none;padding:6px 14px;margin:0 4px;font-size:15px;}
.mainBtn.playing { background:green !important; }
.mainBtn.stopped { background:red !important; }

.channels{
  display:flex;
  gap:6px;
  justify-content:center;
  overflow-x:auto;
}

.channel{
  width:90px;height:250px;
  background:#222;border:1px solid #333;border-radius:6px;
  display:flex;flex-direction:column;
  position:relative;padding:4px;
}

.btnSection{display:flex;justify-content:space-between;}

.solo,.mute{
  width:36px;padding:4px 0;font-size:14px;border:none;background:#555;color:#eee;
}
.solo.active{background:red;animation:blink .8s step-start infinite;}
.mute.active{background:yellow;color:#000;}
@keyframes blink{50%{opacity:.5;}}

.faderWrap{
  flex:1;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-top:6px;
}
.faderTrack{
  width:6px;
  height:100%;
  background:#444;
  border-radius:3px;
  position:relative;
}
.faderFill{
  width:100%;
  position:absolute;
  bottom:0;
  background:lime;
  height:0%;
}
.faderCap{
  width:20px;
  height:20px;
  background:#2196F3;
  border-radius:4px;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  cursor:pointer;
  touch-action:none;
}

.panSection{padding:6px 0;}
.pan{width:80%;}

.trackname{text-align:center;font-size:11px;margin-top:auto;padding-top:4px;}

#bnLogo{
  height:30px;
  margin-left:8px;
  opacity:0;
  animation:fadeInBN 0.6s forwards ease-in;
}
@keyframes fadeInBN{
  to{opacity:1;}
}

/* Welcoming overlay */
#welcomeOverlay{position:fixed;inset:0;z-index:9999;}
#welcomeBackdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);}
#welcomeBox{
  position:relative;
  max-width:300px;
  margin:15% auto;
  background:#bfe1ff;
  color:#000;
  padding:20px;
  border-radius:8px;
  text-align:center;
  font-family:'Impact','Bangers','Arial Black',sans-serif;
  text-shadow:2px 2px 0 rgba(0,0,0,0.2);
  transform:rotate(-1deg);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
#welcomeBox p{font-size:22px;margin:0 0 6px;}
#welcomeBox small{font-family:Arial,sans-serif;font-size:12px;}
#welcomeBox button{
  padding:6px 16px;background:#2196F3;border:none;color:#fff;border-radius:4px;cursor:pointer;
}

/* Rotate tip */
#rotateTip{
  position:fixed;top:40%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.8);
  color:#fff;
  padding:15px 20px;border-radius:8px;
  font-size:16px;text-align:center;
  opacity:0;z-index:9999;
  pointer-events:none;
  transition:opacity 0.5s;
}
#rotateTip.show{opacity:1;}

/* Signup notify flow */
.notifyBtn{
  background:#2196F3;
  color:#fff;
  border:none;
  padding:6px 12px;
  font-size:13px;
  border-radius:4px;
  cursor:pointer;
}

#signupOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
#signupBox{
  background:#fff;
  padding:30px;
  border-radius:8px;
  text-align:center;
  width:280px;
  position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  color:#222;
}
#signupBox input{
  width:100%;
  margin-bottom:10px;
  padding:8px;
  box-sizing:border-box;
}
#signupBox button{
  padding:8px 16px;background:#2196F3;color:#fff;border:none;border-radius:4px;cursor:pointer;
}
.closeBtn{
  position:absolute;top:6px;right:8px;
  font-size:18px;text-decoration:none;color:#888;
}
.closeBtn:hover{color:#555;}

/* CONTACT POPUP */
#contactOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
#contactBox{
  background:#fff; padding:30px; width:300px;
  border-radius:8px; position:relative; text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.3); color:#222;
}
#contactBox input, #contactBox textarea{
  width:100%; margin-bottom:10px; padding:8px; box-sizing:border-box;
}
#contactBox button{
  padding:8px 18px; background:#2196F3; color:#fff;border:none;border-radius:4px;cursor:pointer;
}