* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0f1220; color: #e6e8ef; height: 100vh; display: flex; flex-direction: column;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #171b2e; border-bottom: 1px solid #262c47;
}
header h1 { font-size: 18px; font-weight: 600; }
button {
  font-family: inherit; cursor: pointer; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; transition: .15s;
}
button.primary { background: #5b6cff; color: #fff; }
button.primary:hover { background: #4757ee; }
button.primary:disabled { background: #33385a; color: #888; cursor: not-allowed; }
button.ghost { background: transparent; color: #b9c0e0; border: 1px solid #3a4166; }
button.ghost:hover { background: #232842; }
button.small { padding: 5px 10px; font-size: 12px; }
button.big { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; margin-top: 4px; }

.panel {
  background: #171b2e; border-bottom: 1px solid #262c47; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.panel.hidden, .hidden { display: none; }
.panel h3 { font-size: 14px; margin-bottom: 4px; }
.panel label, main label { font-size: 13px; color: #b9c0e0; display: flex; flex-direction: column; gap: 4px; }
.panel .row { display: flex; gap: 8px; }
.panel .row input { flex: 1; }
input[type=text], input[type=password], select, textarea {
  background: #0f1220; border: 1px solid #313860; color: #e6e8ef;
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; width: 100%;
}
textarea { resize: vertical; }

main { flex: 1; display: flex; gap: 16px; padding: 16px 20px; overflow: hidden; }
.col { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.col.left { max-width: 42%; overflow-y: auto; }
.block { width: 100%; }

.drop {
  border: 2px dashed #3a4166; border-radius: 12px; padding: 22px; text-align: center;
  cursor: pointer; transition: .15s; background: #12162a;
}
.drop:hover, .drop.over { border-color: #5b6cff; background: #171d38; }
.drop p { font-size: 15px; }
.drop small { color: #7de08a; }

.mode-box { background: #12162a; border: 1px solid #262c47; border-radius: 10px; padding: 12px; }
.mode-title { font-weight: 600; margin-bottom: 6px; color: #e6e8ef !important; }
.radio { flex-direction: row !important; align-items: flex-start; gap: 8px !important; margin-top: 6px; line-height: 1.4; }
.radio input { margin-top: 3px; }

.status { font-size: 13px; color: #ffcf6b; min-height: 18px; white-space: pre-wrap; }

.tabs { display: flex; gap: 4px; }
.tab { background: #171b2e; color: #b9c0e0; border-radius: 8px 8px 0 0; }
.tab.active { background: #5b6cff; color: #fff; }
.tab-body { flex: 1; border: 1px solid #262c47; border-radius: 0 8px 8px 8px; overflow: hidden; display: flex; }
.tab-pane { display: none; flex: 1; overflow: auto; }
.tab-pane.active { display: flex; }
.textpane { width: 100%; height: 100%; border: none; border-radius: 0; background: #0b0e1a; padding: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: #d8dcf0; }
pre.textpane { overflow: auto; }
.pdf-preview { padding: 12px; width: 100%; overflow: auto; text-align: center; }
.pdf-preview canvas { max-width: 100%; margin: 0 auto 12px; box-shadow: 0 2px 12px rgba(0,0,0,.4); display: block; }
.pdf-preview em { color: #6a7099; }

.download-bar { display: flex; justify-content: flex-end; }