:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #0f1117; color: #e6e8ee;
  margin: 0; padding: 32px 16px 60px;
  display: flex; justify-content: center;
}

.wrap { width: 100%; max-width: 420px; }

h1 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 22px; text-align: center;
  letter-spacing: .5px;
}

.form { display: flex; flex-direction: column; }

.label {
  font-size: 14px; color: #dbe2ee;
  margin-bottom: 8px;
}

.file-input {
  width: 100%;
  background: #171b24; color: #e6e8ee;
  border: 1px solid #2b3242; border-radius: 9px;
  padding: 11px 13px; font-size: 12px;
  outline: none; font-family: inherit;
}
.file-input::file-selector-button {
  background: #26304a; color: #cfd8ea;
  border: 1px solid #364361; border-radius: 6px;
  padding: 4px 10px; margin-right: 10px;
  cursor: pointer; font-size: 12px;
}
.file-input::file-selector-button:hover { background: #303c5c; }

.btn-primary {
  margin-top: 26px;
  width: 100%; padding: 13px 0;
  background: linear-gradient(180deg, #4a7dff, #3563e9);
  color: #fff; border: 0; border-radius: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  cursor: pointer; transition: filter .15s, transform .05s;
  font-family: inherit;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.preview-box {
  margin-top: 22px;
  min-height: 200px;
  background: #14181f;
  border: 1px solid #232a37;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.preview-box img {
  max-width: 100%; max-height: 400px;
  border-radius: 6px; display: block;
}
#empty-tip { color: #4c556a; font-size: 13px; text-align: center; }

.btn-download {
  display: block; width: 100%;
  margin-top: 14px; padding: 12px 0;
  background: linear-gradient(180deg, #2e9c6a, #22855a);
  color: #fff; text-align: center; text-decoration: none;
  border-radius: 10px; font-size: 14px; font-weight: 700;
  letter-spacing: .5px;
  transition: filter .15s;
}
.btn-download:hover { filter: brightness(1.12); }

#status {
  margin-top: 12px; min-height: 18px;
  font-size: 12px; color: #7a839a; text-align: center;
}