.container {
  display: flex;
  background-color: white;
}
.left-column, .center-column, .right-column {
  flex: 1;
  min-height: 400px;
  h2 {
    padding: 5px 10px;
    margin: 0;
    font-size: 15px;
    background: #f0f3f9;
  }
  video {
    width: 100%;
    height: auto;
  }
  .gray {
    color: #888;
  }
  .red {
    color: #f00;
  }
  .green {
    color: green;
  }
}
.center-column {
  border-inline: 1px solid #ccc;
}
.convert-form,
.preview-container {
  padding: 10px;

  a:not([href]) {
    opacity: 0.5;
    pointer-events: none;
  }
}
.preview-container:empty::after {
  display: grid;
  content: "暂无预览";
  color: #888;
  height: 320px;
  place-items: center;
}

/* 后面的提示文字颜色 */
[type="file"] {
    color: gray;
}
/* 主按钮的样式自定义 */
::file-selector-button {
  height: 2.5rem;
  font-size: 14px;
  color: #fff;
  border-radius: .25rem;
  border: 1px solid #2a80eb;
  padding: .5rem 1rem;
  background-color: #2a80eb;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}

.button-x {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
}

.convert-form {
  &[inert] {
    opacity: .5;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  p {
    margin: 0;
  }
}
.info {
  margin-top: 10px;
  output {
    margin-inline: 2px;
    font-size: smaller;
  }
}

.preview-container {
  min-height: 320px;

  &:empty,
  &:has(ui-loading) {
    display: grid;
    place-items: center;
  }

  &:empty::after {
    content: "暂无预览";
    color: #888;    
  }
}