:root { --ink:#111; --grey:#5c5c5c; --line:#e4e4e4; --lime:#E8FF38; }
* { box-sizing:border-box; }
html,body { margin:0; background:#fff; color:var(--ink); font:400 17px/1.5 Archivo,system-ui,sans-serif; }
main { padding:40px clamp(24px,5vw,80px) 80px; }
.logo { height:26px; display:block; margin-bottom:clamp(56px,10vh,120px); }
h1 { font-size:clamp(32px,4.4vw,56px); line-height:1.08; font-weight:800; letter-spacing:-.015em; margin:0 0 12px; overflow-wrap:anywhere; }
.meta { color:var(--grey); margin:0 0 48px; }
.rows { border-top:1px solid var(--line); }
h2 { font-size:22px; font-weight:700; margin:0; padding:40px 0 16px; border-bottom:1px solid var(--line); }
h2:first-child { padding-top:16px; }
.row { display:flex; align-items:center; gap:32px; padding:24px 0; border-bottom:1px solid var(--line); }
.row .name { flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.row .size { color:var(--grey); white-space:nowrap; font-variant-numeric:tabular-nums; }
.btn { display:inline-block; appearance:none; border:0; border-radius:6px; background:var(--lime); color:#111; font:700 16px/1 Archivo,system-ui,sans-serif; padding:15px 24px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.btn:hover { background:#d9f01f; }
.btn:focus-visible, input:focus-visible, .drop:focus-visible { outline:3px solid #111; outline-offset:2px; }
.btn[disabled] { background:#eee; color:#767676; cursor:default; }
label { display:block; font-weight:600; margin-bottom:8px; }
input[type=text], input[type=password] { width:100%; max-width:720px; font:400 18px Archivo,system-ui,sans-serif; padding:14px; border:1px solid #8a8a8a; border-radius:6px; margin-bottom:28px; }
.drop { display:block; width:100%; border:2px dashed #8a8a8a; border-radius:8px; padding:64px 24px; text-align:center; font-weight:600; cursor:pointer; margin-bottom:28px; background:#fff; color:var(--ink); font-size:18px; }
.drop.over { border-color:#111; background:#fafafa; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin:0 0 12px; }
.bar i { display:block; height:100%; width:0; background:#111; }
.msg { color:#b00020; font-weight:600; min-height:1.5em; }
.link { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.link input { flex:1 1 420px; margin:0; max-width:none; }
[hidden] { display:none !important; }
@media (max-width:640px) { .row { flex-wrap:wrap; gap:8px 16px; } .row .name { flex:1 0 100%; } .row .btn { margin-left:auto; } }