html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
  overflow:hidden; 
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
  background:#0f1115; 
  color:#e8eefc; 
}

#app { 
  display:grid; 
  grid-template-columns: 360px 1fr; 
  height:100vh; 
}

#left { 
  padding:8px 14px 14px; 
  box-shadow: inset -1px 0 0 #222733; 
  overflow:auto; 
  position:relative; 
}

#right { 
  position:relative; 
  height:100%; 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  box-sizing:border-box; 
  padding-bottom:24px; 
}

.panel h2 { 
  margin:8px 0 10px; 
  font-size:14px; 
  color:#b9c2e1; 
  letter-spacing:.2px; 
  font-weight:600; 
}

/* Product selection styling to match h2 appearance */
#productSelection {
  margin: 8px 0 10px;
  padding: 8px 0;
  font-size: 14px;
  color: #b9c2e1;
  letter-spacing: .2px;
  font-weight: 600;
  border-bottom: 1px solid #262b3a;
}

/* Ensure product buttons are properly styled within the container */
#productSelection .app-button {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

.row { 
  display:grid; 
  grid-template-columns: 1fr 1fr auto; 
  gap:8px; 
  align-items:center; 
  margin:8px 0; 
}

/* Three-button controls row: center button exact width, sides auto */
.controls-row { 
  grid-template-columns: auto max-content auto; 
}

/* Funky logo styles */
.logo { 
  margin:8px 0 28px; 
}

/* .logo .text, .logo .word, .logo svg -- not needed with new logo markup */
.row input[type="range"] { 
  width:100%; 
}

.btn { 
  padding:8px 10px; 
  background:#1c2130; 
  border:1px solid #30364a; 
  color:#e8eefc; 
  border-radius:6px; 
  cursor:pointer; 
}

.btn:hover { 
  background:#23293a; 
}

.btn.toggle { 
  user-select: none; 
}

.btn.toggle.active { 
  outline: 2px solid #9fb6ff; 
  outline-offset: -2px; 
}

/* Shared app button style */
.app-button {
  padding: 6px 10px;
  background: #1e2430;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  white-space: nowrap;
}

.app-button:hover {
  background: #2a3140;
}

/* Toggle state styling */
.app-button.toggle {
  position: relative;
}

.app-button.toggle.active {
  background: #324159;
  box-shadow: 0 0 0 2px #9fb6ff inset, 0 4px 10px rgba(0,0,0,0.25);
  color: #e8eefc;
  font-weight: 600;
}

#wave { 
  height:120px; 
  margin:8px 0 4px; 
  background:#0a0c10; 
  border:1px solid #262b3a; 
  border-radius:6px; 
  display:none; 
  position:relative; 
  overflow:hidden; 
}

#wave canvas { 
  border-radius:6px; 
  display:block; 
}

#viewerWrap { 
  position:relative; 
  flex:1; 
  overflow:hidden; 
}

#viewer { 
  position:absolute; 
  inset:0; 
  display:block; 
}

#viewerToolbar { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:12px; 
  padding:10px 12px; 
  background:#0f1115; 
  margin-bottom:0; 
}

#viewerToolbar .toolbar-left { 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
}

#viewerToolbar .toolbar-right { 
  display:flex; 
  gap:8px; 
}

.value { 
  color:#39ff14; 
  font-variant-numeric: tabular-nums; 
}

.row .value {
  justify-self: end;
  width: 80px;       /* fixed width so grid doesn't reflow while dragging */
  text-align: right; /* keep numbers aligned */
  white-space: nowrap;
}

.note { 
  color:#8b94b0; 
  font-size:12px; 
  margin-top:6px; 
}

.file-big { 
  width:100%; 
  padding:16px; 
  font-size:14px; 
  display:block; 
}

/* Drop zone matches #wave width and styling */
#dropNote {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  width:100%;
  height:120px;                /* match #wave height */
  margin:8px 0 4px;            /* match #wave margins */
  box-sizing:border-box;       /* include padding in height */
  padding:8px 12px;
  background:#0a0c10;
  border:1px dashed #262b3a;
  border-radius:6px;
  font-size:14px;
  color:#9fb6ff;
  cursor: copy;
}

/* Highlight on drag */
#dropNote.dragover {
  outline:2px solid #FF4D00;
  outline-offset:2px;
}

/* Ensure drop area reliably receives events */
#dropNote { 
  pointer-events: auto; 
}

/* Hide Wavesurfer region rectangle; we recolor waveform ourselves */
.wavesurfer-region { 
  background-color: transparent !important; 
}

/* Confetti overlay */
#confettiCanvas { 
  position: fixed; 
  inset: 0; 
  pointer-events: none; 
  z-index: 9999; 
}