:root{
  --bg1:#0f172a; --bg2:#1e293b; --acc1:#6366f1; --acc2:#22d3ee; --txt:#e5e7eb; --mut:#94a3b8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--txt);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.25), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(34,211,238,.2), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}
.wrap{max-width:1100px; margin:0 auto; padding:32px 16px}

.hero{text-align:center; padding:24px 0 16px}
.hero__badge{display:inline-block; padding:6px 10px; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.35); border-radius:999px; font-size:12px; margin-bottom:12px}
h1{font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 10px}
.sub{color:var(--mut); margin:0 auto 18px; max-width:720px}

.panel{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.form{display:grid; gap:16px}

.dropzone{
  position:relative; border:2px dashed rgba(255,255,255,.15); border-radius:16px;
  padding:28px; text-align:center; transition:.2s; cursor:pointer
}
.dropzone:hover{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.02)}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.dropzone p{margin:0 0 6px}
.dropzone .link{color:var(--acc2); text-decoration:underline; cursor:pointer}
.dropzone small{color:var(--mut)}

.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.control{display:flex; flex-direction:column; gap:6px; min-width:160px}
.control select{
  border-radius:12px; background:#0b1020; color:var(--txt);
  border:1px solid rgba(255,255,255,.12); padding:10px 12px
}

.btn{
  padding:12px 18px; border-radius:14px; border:0; font-weight:700; cursor:pointer;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  color:#0b1020; box-shadow:0 8px 30px rgba(34,211,238,.25); transition:transform .05s ease;
}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(30%)}
.btn:active{transform:translateY(1px)}
.btn.outline{
  background:transparent; color:var(--txt); border:1px solid rgba(255,255,255,.15)
}

.progress{position:relative; height:12px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:6px}
.bar{position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--acc1), var(--acc2)); transition:width .2s}
.progress + span, .progress #status{display:block; color:var(--mut); margin-top:8px}

.result{display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px}
.result .col{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:14px}
.result h3{margin:0 0 8px}
.result img{width:100%; height:auto; display:block; border-radius:10px}

@media (min-width:860px){
  .result{grid-template-columns:1fr 1fr}
}

.foot{color:var(--mut); text-align:center; margin-top:24px}