:root{
  --bg:#0a0b0f;
  --panel:#0f1317;
  --muted:#9aa0a6;
  --accent:#7ee6c1;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --card-padding:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(30,40,50,0.25), transparent),
              radial-gradient(1000px 500px at 90% 90%, rgba(50,20,60,0.08), transparent),
              var(--bg);
  color:#eaf2f8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
}

.container{
  max-width:920px;
  margin:24px auto;
}

.header, .hero { margin-bottom:18px; }
.hero h1{
  font-size:1.6rem;
  margin:0 0 6px;
  letter-spacing: -0.02em;
}
.muted{ color:var(--muted); font-size:0.92rem; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius: var(--radius);
  padding: var(--card-padding);
  box-shadow: 0 6px 20px rgba(2,6,12,0.6);
  border: 1px solid rgba(255,255,255,0.03);
}

/* upload card specifics */
.upload-card{ display:flex; flex-direction:column; gap:12px; }

.dropzone{
  border-radius:10px;
  padding:22px;
  border: 1px dashed rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.002));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dropzone:focus{ outline:none; box-shadow: 0 0 0 4px rgba(126,230,193,0.06); transform:translateY(-2px); }
.dropzone.hover{ border-color: rgba(126,230,193,0.5); transform:translateY(-3px); }

.icon{ width:42px; height:42px; opacity:0.9; fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.drop-title{ font-weight:600; font-size:1rem; }
.drop-sub{ font-size:0.86rem; color:var(--muted); }

input[type="file"]{ display:none; }

.actions{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

/* button */
.btn{
  background:linear-gradient(180deg, rgba(126,230,193,0.12), rgba(126,230,193,0.06));
  border: none;
  padding:10px 14px;
  border-radius:10px;
  color:#eaf2f8;
  font-weight:600;
  cursor:pointer;
  min-width:120px;
  box-shadow: 0 6px 18px rgba(2,6,12,0.45);
}
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* progress */
.progress{ width:320px; height:10px; background: var(--glass); border-radius:999px; overflow:hidden; display:none; }
.progress-bar{ width:0%; height:100%; background: linear-gradient(90deg,var(--accent), #3de0b2); transition:width 160ms linear; }

/* result */
.result{ font-size:0.95rem; color:var(--muted); word-break:break-word; margin-top:6px; }

/* footer */
.foot{ margin-top:18px; color:var(--muted); text-align:center; }

/* responsive */
@media (max-width:600px){
  .progress{ width:100%; }
  .actions{ flex-direction:column; align-items:stretch; gap:8px; }
}