:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#11171d; color:#e8edf1; }
#load-progress { margin:18px 0; padding:14px 18px; border:1px solid #65cfb1; border-radius:8px; background:#131c23; }
#load-progress p { margin:4px 0 10px; overflow-wrap:anywhere; }
#load-progress-bar { display:block; width:100%; height:18px; accent-color:#65cfb1; }
* { box-sizing:border-box; }
body { margin:0; } header { padding:20px 4vw; display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #35414a; font-size:.85rem; color:#9dadb9; }
main { max-width:1180px; margin:40px auto; padding:0 24px; } h1 { font-size:clamp(2.4rem,5vw,3.5rem); letter-spacing:-.04em; margin-bottom:10px; } h2 { font-size:1.25rem; } p { line-height:1.6; } a { color:#86d6c4; } .subtitle { color:#b6c7d4; font-size:1.1rem; }
section { padding:24px; border:1px solid #35414a; border-radius:12px; margin:24px 0; background:#192129; } .privacy { border-left:3px solid #65cfb1; padding-left:18px; font-size:.95rem; }
#drop-area { text-align:center; border:2px dashed #546775; border-radius:8px; padding:26px 14px; background:#131c23; } #drop-area.dragover { border-color:#82eed0; background:#1c3836; }
button,.button,select,input[type=text] { font:inherit; color:inherit; background:#28353f; border:1px solid #657783; padding:10px 16px; border-radius:6px; } button,.button { cursor:pointer; display:inline-block; text-decoration:none; } button:hover,.button:hover { background:#354854; } .primary { background:#357a68; border-color:#65cfb1; } .primary:hover { background:#419780; } :disabled { opacity:.45; cursor:not-allowed; } :focus-visible { outline:3px solid #8bf0ce; outline-offset:3px; }
#files { display:block; margin:16px auto; max-width:100%; } .hint,footer { color:#a9b8c4; font-size:.85rem; } label:not(.button) { display:block; margin:14px 0 8px; } select,input[type=text] { max-width:100%; width:480px; } label.confirmation { display:flex; gap:12px; margin:24px 0; line-height:1.65; } .confirmation input { align-self:flex-start; margin-top:7px; min-width:18px; }
.table-scroll { overflow-x:auto; margin:20px 0; } table { border-collapse:collapse; width:100%; font-size:.8rem; } caption { text-align:left; padding-bottom:10px; } td,th { padding:12px 8px; border-bottom:1px solid #35414a; text-align:left; vertical-align:top; } td { overflow-wrap:anywhere; min-width:65px; } th { color:#b1c3ce; } .warnings { color:#efd28e; } .errors { color:#ffb3a8; } li { margin:10px 0; line-height:1.5; } #status { color:#9ce3cc; overflow-wrap:anywhere; } footer { border-top:1px solid #35414a; padding-top:16px; } [hidden] { display:none!important; }
@media(max-width:650px) { main { padding:0 14px; margin:24px auto; } section { padding:16px; } header { flex-direction:column; gap:8px; } #ready .button { display:block; margin:12px 0; text-align:center; } }