:root { color-scheme: light; --ink:#192b30;--muted:#66767c;--line:#dae4e2;--mint:#ddf7ed;--accent:#08745e;--base:#f4f7f5;--red:#a83937 }
* { box-sizing:border-box }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 82% 0%,#dbf6eb 0,transparent 36%),var(--base); color:var(--ink); font:15px/1.55 system-ui,-apple-system,"Noto Sans CJK SC","Microsoft Yahei",sans-serif }
.shell { max-width:900px; margin:auto; padding:22px 24px 34px }
.header,.brand,.section-heading,.jobs-heading,.upload-footer,.job-top,.job-bottom,footer { display:flex; align-items:center; justify-content:space-between; gap:16px }
.header { padding:6px 0 18px; border-bottom:1px solid var(--line) }
.brand { justify-content:start; font-weight:750; letter-spacing:.01em; font-size:19px }
.brand small { display:inline-block; color:var(--muted); font-size:12px; font-weight:500; margin-left:4px }
.mark { display:grid; place-items:center; width:37px;height:37px;border-radius:11px;color:white;background:#08745e;font-size:19px }
.connection { border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:12px;color:var(--muted);background:white }
.connection.online { color:var(--accent);border-color:#a8ddca;background:#e9fbf3 }
.intro { padding:47px 0 30px }
.eyebrow { color:var(--accent);letter-spacing:.15em;font-size:12px;font-weight:750;margin:0 0 13px }
h1 { letter-spacing:-.055em; font-size:clamp(32px,5vw,48px);line-height:1.16;margin:0 0 15px }
p { margin:0 }.intro>p:last-child { color:var(--muted) }
.card { background:#fff;border:1px solid var(--line);border-radius:17px;padding:28px;margin-bottom:20px;box-shadow:0 10px 32px #17423209 }
.section-heading { justify-content:start;align-items:start }.section-heading h2 {font-size:19px;line-height:1.3;margin:0 0 5px}.section-heading p {font-size:13px;color:var(--muted)}
.step { width:35px;height:35px;border-radius:10px;background:var(--mint);color:var(--accent);font-weight:760;font-size:13px;display:grid;place-items:center;flex:none }
.login-row { display:flex;gap:10px;margin-top:22px }
input[type=password] { min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;outline-color:var(--accent) }
button { cursor:pointer;font:inherit }
button[type=submit] { background:var(--accent);color:white;border:0;border-radius:10px;padding:12px 19px;font-weight:700;white-space:nowrap }
button[type=submit]:hover { background:#065b4a } button:disabled {opacity:.6;cursor:wait}
.dropzone { margin-top:23px;display:flex;min-height:170px;border:1.5px dashed #a9ccc0;background:#f8fcfa;border-radius:13px;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;padding:25px;cursor:pointer;transition:.15s }
.dropzone:hover,.dropzone.dragging { background:#e8f8f0;border-color:var(--accent) }
.file-icon { display:grid;place-items:center;border-radius:9px;background:#e0f4e9;color:#08745e;font-weight:800;font-size:13px;width:44px;height:44px;margin-bottom:9px }
.dropzone strong { max-width:100%;overflow-wrap:anywhere }.dropzone>span:last-of-type {color:var(--muted);font-size:13px}.dropzone input {position:absolute;opacity:0;width:1px;height:1px}
.upload-footer {margin-top:20px;color:var(--muted);font-size:13px}.upload-footer strong { color:var(--ink);font-weight:600 }
.jobs-heading {align-items:start}.text-button,footer button {border:0;background:none;color:var(--accent);font-weight:680;padding:5px;white-space:nowrap}
.job-list {margin-top:21px}.empty {padding:32px;text-align:center;background:var(--base);border-radius:10px;color:var(--muted)}
.job {padding:17px 0;border-top:1px solid var(--line)}.job-top {align-items:start}.job-name {font-weight:660;overflow-wrap:anywhere;max-width:100%}.job-date,.job-note {font-size:12px;color:var(--muted)}
.job-bottom { margin-top:9px;align-items:center }.badge {font-size:12px;border-radius:20px;background:#f0f5f3;color:#456059;padding:4px 9px;white-space:nowrap}.badge.success {background:#e5f7ed;color:#116b49}.badge.failed,.badge.interrupted {background:#fff0e8;color:var(--red)}
.downloads {display:flex;gap:12px}.downloads button {border:0;background:none;color:var(--accent);font-weight:700;padding:3px 0}.downloads button:hover,.text-button:hover,footer button:hover {text-decoration:underline}
.bar {height:4px;border-radius:10px;background:#e7eeec;margin-top:13px;overflow:hidden}.bar span {display:block;height:100%;background:var(--accent);transition:width .3s}
#notice { position:fixed;bottom:19px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--ink);color:white;border-radius:10px;padding:11px 18px;box-shadow:0 10px 28px #0003;z-index:4;min-width:260px;text-align:center }
footer {font-size:12px;color:var(--muted);padding:15px 2px}.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden] {display:none!important}
@media (max-width:580px) {.shell{padding:16px}.intro{padding:35px 0 26px}.card{padding:19px}.login-row{flex-direction:column}.upload-footer{align-items:start;flex-direction:column}.upload-footer button{width:100%}.section-heading{gap:11px}.jobs-heading{gap:6px}}