:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --stroke:#e2e8f0;
  --shadow:0 18px 60px rgba(2,6,23,.10);
  --shadow2:0 8px 26px rgba(2,6,23,.08);
  --r:18px;
  --r2:24px;
  --pad:18px;
  --accent:#22c55e;
  --accent2:#16a34a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:radial-gradient(1000px 500px at 20% -10%, rgba(34,197,94,.14), transparent 55%),
             radial-gradient(900px 500px at 110% 0%, rgba(14,165,233,.10), transparent 55%),
             var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.wrap{width:min(820px, calc(100% - 28px)); margin-inline:auto}

.top{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(246,247,251,.75);
  border-bottom:1px solid rgba(226,232,240,.7);
}
.top__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.brand__logo{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.25);
  font-weight:800; letter-spacing:.5px;
}
.brand__name{display:block; font-weight:800; font-size:15px; line-height:1.1}
.brand__sub{display:block; font-size:12px; color:var(--muted); margin-top:2px}

.select{
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow2);
}

.hero{padding:26px 0 34px}
.hero__title{margin:12px 0 6px; font-size:28px; letter-spacing:-.02em}
.hero__sub{margin:0 0 16px; color:var(--muted); line-height:1.6}

.card{
  background:var(--card);
  border:1px solid rgba(226,232,240,.9);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  padding:20px;
}

.toast{
  margin:10px 0 16px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:#fff;
  box-shadow:var(--shadow2);
}
.toast--error{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.06)}
.toast--info{border-color:rgba(59,130,246,.30); background:rgba(59,130,246,.06)}
.toast--success{border-color:rgba(34,197,94,.28); background:rgba(34,197,94,.06)}

.form{display:flex; flex-direction:column; gap:14px}
.file{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.drop{
  display:flex; gap:14px; align-items:center;
  padding:18px;
  border-radius:18px;
  border:1.5px dashed rgba(148,163,184,.75);
  background:linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,1));
  outline:none;
}
.drop:focus{border-color:rgba(34,197,94,.75); box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.drop--hover{border-color:rgba(34,197,94,.75); background:rgba(34,197,94,.05)}
.drop__icon{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.20);
  font-size:18px;
}
.drop__headline{font-weight:800; margin-bottom:2px}
.drop__hint{color:var(--muted); font-size:13px}

.link{
  border:0; background:transparent; padding:0; margin:0;
  color:var(--accent2); font-weight:800; cursor:pointer;
}
.link:focus{outline:none; text-decoration:underline}

.meta{display:flex; flex-direction:column; gap:6px}
.meta__row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.25);
  background:rgba(34,197,94,.08);
  font-weight:800; font-size:12px;
}
.small{font-size:12px}
.muted{color:var(--muted)}
.mt12{margin-top:12px}

.row{display:flex; align-items:center; justify-content:space-between}
.fileline{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:rgba(248,250,252,.7);
}
.fileline__dot{width:10px; height:10px; border-radius:999px; background:var(--accent)}
.fileline__name{font-weight:700}
.fileline__size{font-size:12px}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  appearance:none;
  border:1px solid rgba(34,197,94,.35);
  background:linear-gradient(180deg, rgba(34,197,94,1), rgba(22,163,74,1));
  color:white;
  padding:12px 14px;
  border-radius:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(34,197,94,.22);
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn--ghost{
  background:#fff;
  color:var(--text);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow2);
}

.progress{padding-top:4px}
.progress__top{display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px}
.progress__bar{width:100%; height:12px}

/* Modern progress styling */
progress{-webkit-appearance:none; appearance:none; border:none; border-radius:999px; overflow:hidden; background:rgba(226,232,240,.8)}
progress::-webkit-progress-bar{background:rgba(226,232,240,.8)}
progress::-webkit-progress-value{background:linear-gradient(90deg, rgba(34,197,94,1), rgba(14,165,233,1))}
progress::-moz-progress-bar{background:linear-gradient(90deg, rgba(34,197,94,1), rgba(14,165,233,1))}

.footer{padding:18px 0 26px; color:var(--muted)}
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

@media (max-width:520px){
  .hero__title{font-size:22px}
  .card{padding:16px}
  .drop{padding:16px}
}