:root{
  --bg:#0a0a0f;
  --card:rgba(255,255,255,0.05);
  --stroke:rgba(255,255,255,0.12);
  --accent:#7c4dff;
  --txt:#e8e8ef;
  --muted:#a9a9b8;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  color:var(--txt); background:radial-gradient(1000px 600px at 10% -10%, #1a1a2e 0%, var(--bg) 40%);
}
.hero{
  padding:48px 24px; text-align:center;
}
.hero h1{
  margin:0 0 6px; font-size:clamp(28px,6vw,48px); font-weight:800; letter-spacing:-0.02em;
}
.sub{color:var(--muted)}
.container{
  max-width:1100px; margin:0 auto; padding:24px; display:grid; gap:24px;
  grid-template-columns: 1.2fr 0.8fr;
}
.panel{
  background:var(--card); border:1px solid var(--stroke); border-radius:22px; padding:20px;
  backdrop-filter: blur(8px);
}
.list{grid-column:2}
.upload-area{
  border:2px dashed var(--stroke); border-radius:18px; padding:28px; text-align:center;
}
.upload-area input[type="file"]{display:none}
.upload-hint svg{stroke:var(--accent); fill:none; stroke-width:1.7}
.linklike{color:var(--accent); cursor:pointer; text-decoration:underline}
.controls{display:grid; gap:12px; margin-top:18px}
.controls label{font-size:14px; color:var(--muted)}
.controls select, .controls input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke);
  background:#0f0f18; color:var(--txt); outline:none;
}
.advanced{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.primary{
  margin-top:6px; padding:12px 16px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, #8a63ff, #4e8cff); color:white; font-weight:700;
  box-shadow:0 8px 24px rgba(124,77,255,0.35);
}
.primary:hover{transform:translateY(-1px)}
.file-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; max-height:300px; overflow:auto}
.file-item{
  display:flex; align-items:center; gap:10px; border:1px solid var(--stroke); border-radius:12px; padding:10px 12px;
}
.file-item small{color:var(--muted)}
.badge{
  margin-left:auto; font-size:12px; background:#141427; color:#c4c4ff; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke);
}
.progress{
  height:10px; background:#12121d; border-radius:999px; border:1px solid var(--stroke); overflow:hidden;
}
.bar{height:100%; background:linear-gradient(90deg,#7c4dff,#4e8cff)}
.log{
  margin-top:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:#cfd0ff; max-height:180px; overflow:auto; font-size:12.5px;
}
.foot{padding:24px; text-align:center; color:var(--muted)}
@media (max-width: 900px){
  .container{grid-template-columns:1fr}
  .list{grid-column:auto}
}