:root{
  --bg:#ffffff;
  --text:#0b0b0c;
  --muted:#5b5e66;
  --line:#e8e8ec;
  --card:#fafafb;
  --accent:#111111;
  --danger:#c02626;
  --radius:16px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg); color:var(--text); }

.topbar{
  position:sticky; top:0;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
}
.logo{ height:34px; width:auto; }
.nav a{ color:var(--muted); text-decoration:none; margin-left:14px; font-weight:700; }
.nav a:hover{ color:var(--text); }

.wrap{ max-width:980px; margin:0 auto; padding:28px 18px 60px; }
.hero{ padding:18px 0 10px; }
h1{ font-size:44px; line-height:1.05; margin:10px 0; }
.sub{ color:var(--muted); font-size:18px; max-width:70ch; margin:0 0 18px; }

.dropzone{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fcfcfd,#f7f7fa);
  padding:22px;
  outline:none;
  transition:border-color .15s ease, transform .15s ease;
}
.dropzone.dragover{ border-color:#a7a7b8; transform:scale(1.01); }
.dz-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:12px 0; }
.dz-title{ font-weight:900; font-size:18px; }
.dz-or{ color:var(--muted); font-weight:800; }
.dz-hint{ color:var(--muted); font-size:13px; }

.panel{
  margin-top:14px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:14px;
}
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.status{ color:var(--muted); font-weight:700; }

.btn{
  cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.captcha-wrap{ margin-top:12px; display:flex; justify-content:center; }

.filelist{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.file{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.file .name{ font-weight:800; }
.file .meta{ color:var(--muted); font-size:13px; }

.progress-wrap{ margin-top:12px; }
.hidden{ display:none; }
.progress-bar{ height:10px; background:#ededf4; border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.progress-fill{ height:100%; background:#111; width:0%; transition:width .15s linear; }
.progress-text{ margin-top:8px; font-weight:800; color:var(--muted); font-size:13px; }

.error{ margin-top:12px; background:#fff; border:1px solid #f2b8b8; color:var(--danger); padding:10px 12px; border-radius:12px; font-weight:800; }

.section{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }
.footer{ border-top:1px solid var(--line); padding:18px; color:var(--muted); text-align:center; }
.footer a{ color:var(--muted); font-weight:800; text-decoration:none; }
.footer a:hover{ color:var(--text); }

.cookie-banner{
  position:fixed; bottom:0; left:0; right:0;
  background:#111; color:#fff;
  padding:12px 14px;
  display:flex; gap:12px; justify-content:center; align-items:center;
  flex-wrap:wrap;
  z-index:9999;
}
.cookie-banner a{ color:#fff; text-decoration:underline; font-weight:800; }