body { font-family: Arial, sans-serif; margin: 20px; }
#mainContainer { display: flex; align-items: flex-start; gap: 20px; }
#controls { display: flex; flex-direction: column; margin-right: 20px; gap: 10px; }
button { width: 130px; padding: 5px 10px; height: 30px; box-sizing: border-box; }
select { box-sizing: border-box; }
#formatRow { display: none; }
#buttonRow, #buttonRow2, #buttonRow3, #buttonRow4 { display: flex; align-items: center; gap: 10px; justify-content: space-between; width: 270px; }
#nameFormat { height: 30px; padding: 5px 10px; width: 130px; }
#fileInput { display: none; }
#commandInput { width: 260px; padding: 5px; }
#enterButton { width: 130px; padding: 5px 10px; }
button:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }
#historyContainer { max-height: 240px; overflow: auto; border: 1px solid #ddd; border-radius: 4px; padding: 6px; width: 260px; }
#historyContainer.empty { border: none; padding: 0; }
#historyTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#historyTable td { text-align: left; padding: 4px; border-bottom: 1px solid #f0f0f0; }
#historyTable tbody tr:last-child td { border-bottom: none; }
#tableContainer { flex: 1; }

/* Help panel sidebar */
#helpPanel {
  width: 500px;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  background: #fafafa;
  display: none;
}
#helpPanel .help-inner h3 { margin: 0 0 8px; }
#helpPanel .help-inner h4 { margin: 12px 0 6px; }
#helpPanel .help-inner p { margin: 6px 0; white-space: pre-wrap; }
#helpPanel .help-inner ul { margin: 6px 0 6px 18px; }

/* Ensure undo/redo row aligns like other button rows */
/* Covered by the unified button row rule above */
/* Modal styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10000;
}
.modal input {
  width: 80%;
  display: block;
  margin: 10px auto 0;
  padding: 5px;
  text-align: center;
}
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.modal-buttons button { margin: 0; }

/* Highlight the focused option in the ambiguous-name choices modal */
#choicesButtons button, #choicesCancel {
  border: 1px solid #ccc;
  border-radius: 4px;
}
#choicesButtons button:focus,
#choicesButtons button.selected,
#choicesCancel:focus,
#choicesCancel.selected {
  outline: 2px solid #0078d4;
  background-color: #e6f2ff;
}