:root{
  --bg:#0f1220;
  --panel:#171a2e;
  --accent:#5b8cff;
  --accent2:#7c5cff;
  --text:#e8eaf6;
  --muted:#9aa0c0;
  --ok:#28c76f;
  --err:#ff5c7a;
  --warn:#ffb020;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%,#232a52 0%,var(--bg) 60%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px 24px;
}

.card{
  width:100%;
  max-width:760px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

h1{
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

p.sub{color:var(--muted);font-size:.9rem;margin-bottom:24px}

.step{
  margin-bottom:22px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.step:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:0}

.step-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step-num{
  flex:0 0 24px;height:24px;line-height:24px;text-align:center;
  border-radius:50%;font-size:.8rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.step-title{font-size:.95rem;font-weight:600}

.folder-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.folder-name{
  font-size:.85rem;color:var(--muted);
  background:#0d1022;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:10px 12px;flex:1;min-width:200px;
  word-break:break-all;
}
.folder-name.set{color:var(--ok)}

textarea{
  width:100%;
  min-height:170px;
  background:#0d1022;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:var(--text);
  padding:12px;
  font-size:.9rem;
  font-family:ui-monospace,Consolas,monospace;
  line-height:1.5;
  resize:vertical;
  outline:none;
  transition:border .2s;
}
textarea:focus{border-color:var(--accent)}

.hint{font-size:.75rem;color:var(--muted);margin-top:8px}
.hint code{color:var(--accent)}

button{
  border:none;
  border-radius:10px;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  padding:13px 20px;
  transition:transform .15s,opacity .15s,background .15s;
}
button:hover:not(:disabled){transform:translateY(-1px);opacity:.95}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-primary{
  width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:1rem;
}
.btn-secondary{
  background:rgba(255,255,255,.08);
  color:var(--text);
  white-space:nowrap;
}
.btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.16)}

.progress-wrap{margin-top:16px;display:none}
.progress-wrap.on{display:block}
.progress-bar{
  height:8px;background:#0d1022;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .3s ease;
}
.progress-text{font-size:.82rem;color:var(--muted);margin-top:8px}

.result{margin-top:26px}
.result h2{font-size:1rem;margin-bottom:12px;font-weight:600}

table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
th{color:var(--muted);font-weight:500}
td.url{word-break:break-all;color:var(--muted);max-width:340px}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}
.badge.ok{background:rgba(40,199,111,.15);color:var(--ok)}
.badge.err{background:rgba(255,92,122,.15);color:var(--err)}
.badge.wait{background:rgba(255,176,32,.15);color:var(--warn)}
