:root { --accent: #2f6fed; --border: #c9ced6; --bg: #f7f8fa; --error: #b3261e; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--bg); color: #1b1f24; }
main { max-width: 640px; margin: 0 auto; padding: 2rem 1rem; }
h1 { margin-bottom: .25rem; }
.lede { color: #555; margin-top: 0; }

#dropzone { display: block; padding: 2.5rem 1rem; text-align: center; background: #fff;
  border: 2px dashed var(--border); border-radius: 10px; cursor: pointer; }
#dropzone:hover, #dropzone:focus, #dropzone.over { border-color: var(--accent); outline: none; }
#dropzone input { display: none; }

.row { display: grid; gap: 1rem; margin: 1.25rem 0; }
.row label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
select, input[type=number] { font: inherit; padding: .5rem; border: 1px solid var(--border); border-radius: 6px; }

button, .button { display: inline-block; font: inherit; font-weight: 600; padding: .65rem 1.25rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; }
button:disabled { background: #9aa6bf; cursor: not-allowed; }

#status { min-height: 1.5em; }
#status.error { color: var(--error); }
#result { margin-top: 1rem; }
#preview { display: block; max-width: 100%; max-height: 320px; margin-bottom: 1rem;
  border: 1px solid var(--border); background: #fff; }
.hint { color: #5b6573; font-size: .85rem; margin: .75rem 0 0; }