:root { color-scheme: light; font: 14px/1.5 "Helvetica Neue", Arial, sans-serif; color: #111; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 920px; margin: auto; padding: 56px 28px; }
header { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid #111; }
h1 { margin: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; font-weight: 700; }
h2 { margin: 0; font-size: 14px; font-weight: 600; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 20px; margin-bottom: 24px; }
.credentials { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
label { display: grid; gap: 8px; min-width: 0; font-size: 12px; color: #555; }
input, select, button { min-height: 42px; border: 1px solid #ccc; border-radius: 0; padding: 10px 12px; font: inherit; background: #fff; color: #111; }
input, select { width: 100%; min-width: 0; font-size: 14px; }
button { cursor: pointer; padding-inline: 20px; }
button:hover:not(:disabled), input:hover, select:hover { border-color: #111; }
button:disabled, select:disabled { opacity: .4; cursor: default; }
#dropZone { position: relative; min-height: 140px; padding: 32px 24px; margin-bottom: 24px; display: grid; place-items: center; border: 1px dashed #aaa; color: #555; font-size: 14px; text-align: center; }
#fileNames { white-space: pre-line; overflow-wrap: anywhere; max-width: 100%; }
#fileList { list-style: none; margin: -8px 0 24px; padding: 0; }
#fileList li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eee; }
#fileList span { min-width: 0; overflow-wrap: anywhere; }
#fileList button { flex-shrink: 0; min-height: 32px; padding: 4px 8px; border-color: transparent; font-size: 12px; }
#files { position: absolute; inset: 0; height: 100%; opacity: 0; cursor: pointer; }
#dropZone:hover, .dragging #dropZone { border-color: #111; background: #f6f6f6; color: #111; }
.dragging #dropZone { border-style: solid; outline: 1px solid #111; }
.actions, .result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#run { min-width: 136px; background: #111; color: #fff; border-color: #111; }
#status { color: #666; font-size: 12px; text-align: right; }
#error { margin: 24px 0 0; padding-left: 12px; border-left: 2px solid #111; white-space: pre-wrap; overflow-wrap: anywhere; }
#result, #request { margin-top: 40px; padding-top: 24px; border-top: 1px solid #ddd; }
pre { max-width: 100%; max-height: 65vh; overflow: auto; margin: 20px 0 0; padding: 20px; border: 1px solid #ddd; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
:focus-visible, #dropZone:focus-within { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 600px) { main { padding: 32px 20px; } .row, .credentials { grid-template-columns: minmax(0, 1fr); gap: 16px; } #connect { justify-self: start; } #dropZone { min-height: 120px; } }