*{box-sizing:border-box}
html,body{margin:0;background:#0e1015;color:#e6e7eb;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
main{max-width:560px;margin:6vh auto;padding:24px}
header{margin-bottom:24px}
h1{margin:0;font-size:30px;letter-spacing:.3px;font-weight:600}
.sub{margin:6px 0 0;color:#8c92a0;font-size:13px}
form{display:grid;gap:16px;background:#181b22;padding:22px;border-radius:14px;border:1px solid #232732}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#aab0bd;font-weight:500}
.hint{font-size:11px;color:#646a78;font-weight:400}
input{background:#0e1015;border:1px solid #2a2f3b;color:#e6e7eb;padding:10px 12px;border-radius:8px;font:inherit;transition:border-color .15s}
input:focus{outline:none;border-color:#5b8def}
.row{display:flex;gap:10px;margin-top:6px}
button{flex:1;background:#5b8def;border:none;color:#fff;padding:12px;border-radius:8px;font-weight:600;cursor:pointer;font-size:15px;transition:filter .15s}
button:hover{filter:brightness(1.1)}
button:disabled{opacity:.5;cursor:not-allowed;filter:none}
button.ghost{flex:0 0 auto;background:transparent;color:#8c92a0;border:1px solid #2a2f3b}
button.ghost:hover{color:#e6e7eb;border-color:#3a4150}
#progress{margin-top:18px;display:grid;gap:8px}
#progress[hidden]{display:none}
.bar{height:8px;background:#0e1015;border:1px solid #232732;border-radius:4px;overflow:hidden}
#bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#5b8def,#7ea8ff);transition:width .25s ease}
#progress-text{font-size:13px;color:#aab0bd;font-variant-numeric:tabular-nums}
#status{margin-top:14px;font-size:14px;color:#aab0bd;min-height:1.5em;white-space:pre-wrap}
#status.ok{color:#5fdba7}
#status.err{color:#ef6a6a}
#status.busy{color:#e6c45f}
footer{margin-top:28px;font-size:12px;color:#646a78;text-align:center}