* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #fff; color: #1d1d1f; font-family: Arial, sans-serif; }
.converter-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.upload-card { width: min(100%, 480px); padding: 32px; border: 1px solid #e3e3e3; border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / 7%); text-align: center; }
.drop-zone { padding: 38px 20px; border: 2px dashed #cfcfcf; border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop-zone:hover, .drop-zone:focus, .drop-zone.is-dragging { outline: none; border-color: #555; background: #fafafa; }
.drop-zone__title { margin: 0; font-size: 20px; font-weight: 600; }
.drop-zone__hint { min-height: 20px; margin: 10px 0 22px; color: #707070; font-size: 14px; overflow-wrap: anywhere; }
.button { border: 0; border-radius: 7px; padding: 11px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.button--secondary { color: #222; background: #eee; }
.button--primary { width: 100%; margin-top: 18px; color: #fff; background: #1f1f1f; }
.button:disabled { cursor: wait; opacity: .65; }
.message { min-height: 20px; margin: 16px 0 0; color: #b3261e; font-size: 14px; }