:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #111; color: #f4f4f4; }
main { width: min(100%, 390px); }
h1 { margin: 0 0 24px; font-size: 1.7rem; text-align: center; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: .9rem; }
input, select, button { width: 100%; min-height: 44px; border: 1px solid #444; border-radius: 7px; padding: 10px 12px; background: #1d1d1d; color: inherit; font: inherit; }
input:focus, select:focus { outline: 2px solid #e85d9e; border-color: transparent; }
button { margin-top: 4px; border: 0; background: #d9468b; color: white; font-weight: 700; cursor: pointer; }
button:hover { background: #c9367b; }
.status { margin: 0 0 16px; padding: 10px 12px; border-radius: 7px; }
.error { background: #4a2020; color: #ffd7d7; }
.success { background: #173f2b; color: #cffff0; }
.download { display: block; margin-top: 22px; text-align: center; color: #ff83bb; }
.instruction { margin: 8px 0 0; text-align: center; color: #bbb; font-size: .9rem; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }