:root { font-family: system-ui, sans-serif; }
body { margin: 0; background: #f4f4f5; color: #18181b; }
.card { max-width: 540px; margin: 48px auto; background: #fff; padding: 32px;
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
h1 { margin-top: 0; font-size: 1.4rem; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
select, input[type="number"], input[type="file"] {
  font: inherit; padding: 8px; border: 1px solid #d4d4d8; border-radius: 8px; }
.preview { font-size: .9rem; color: #52525b; }
button { font: inherit; font-weight: 600; padding: 10px; border: 0;
  border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.status { min-height: 1.2em; font-size: .9rem; }
.status.error { color: #b91c1c; }
.status.ok { color: #15803d; }
.results ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.results li { display: flex; gap: 8px; align-items: center; }
.results input { flex: 1; padding: 6px; border: 1px solid #d4d4d8; border-radius: 6px; }