body { 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  background-color: #f4f7fa; 
  margin: 0; 
  padding: 0; 
  color: #333; 
}

/* Center the buttons */
.controls {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Align vertically if needed */
  gap: 12px;
  margin: 20px auto;
  width: 100%;             /* Full width to help centering */
  text-align: center;
}

.controls button { 
  padding: 10px 18px; 
  background-color: #000; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-size: 14px; 
  cursor: pointer; 
}

.controls button:hover { 
  background-color: #333; 
}

.editor-row { 
  display: flex; 
  flex-direction: row-reverse; 
  gap: 20px; 
  align-items: stretch; 
}

.editor-box { 
  flex: 1; 
  min-width: 300px; 
  background-color: #fefefe; 
  border: 2px solid #ddd; 
  border-radius: 12px; 
  display: flex; 
  flex-direction: column; 
  transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

.editor-box:hover { 
  border-color: #000; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); 
}

.editor-header { 
  background-color: #000; 
  color: white; 
  padding: 12px 18px; 
  font-weight: bold; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-top-left-radius: 12px; 
  border-top-right-radius: 12px; 
}

.editor-tools i { 
  margin-left: 12px; 
  cursor: pointer; 
}

.editor-tools i:hover { 
  color: #f0e68c; 
}

#tsv-output { 
  height: 400px; 
  width: 100%; 
}

.form-group { 
  margin-bottom: 15px; 
}

.form-group label { 
  display: block; 
  margin-bottom: 6px; 
  font-weight: 600; 
}

.form-group input[type="number"], 
.form-group input[type="text"] { 
  width: 100%; 
  padding: 10px 12px; 
  border-radius: 6px; 
  border: 1px solid #ccc; 
  box-sizing: border-box; 
}

.checkbox-group label { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 8px; 
  font-weight: normal; 
}

@media (max-width: 768px) { 
  .editor-row { 
    flex-direction: column; 
  } 
}