.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
}

#fileInput {
  background-color: #0a0a12;
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

#fileInput:hover,
#fileInput:focus {
  background: var(--accent);
  color: var(--bg);
  outline: none;
}

#fileInput::file-selector-button {
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: inherit;
  padding: 0.35rem 0.7rem;
  margin-right: 0.75rem;
  cursor: pointer;
}

select#extensionSelect {
  background-color: #0a0a12;
  color: var(--text);
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

select#extensionSelect:focus {
  outline: none;
  box-shadow: 0 0 4px var(--accent);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

button:hover {
  background: var(--accent);
  color: var(--bg);
}

#output {
  margin-top: 1.25rem;
  white-space: pre-wrap;
  border: 1px dotted var(--muted-dim);
  background: #0a0a12;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.9rem;
}