:root{
  --bg:#0b0f17;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#ffffff14;
  --brand:#7c3aed;
  --success:#22c55e;
}

html[data-theme="light"]{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui;
  background:var(--bg);
  color:var(--text);
}

.container{width:min(520px,92%);margin:0 auto}
.hidden{display:none}
.center{text-align:center}

.header{
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
}

.brand{
  display:flex;
  gap:.6rem;
  align-items:center;
  font-weight:900;
}
.brand__mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(124,58,237,.15);
}

.iconBtn{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.section{padding:3rem 0}

.panel{
  background:var(--card);
  border-radius:26px;
  padding:2rem;
  border:1px solid var(--border);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.panel__head{margin-bottom:1.2rem}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

.form{display:grid;gap:1rem}

.field{display:grid;gap:.3rem}
input{
  padding:1rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-size:.95rem;
}

.btn{
  padding:1rem;
  border-radius:18px;
  border:none;
  background:linear-gradient(135deg,var(--brand),#5b21b6);
  color:#fff;
  cursor:pointer;
  font-size:1rem;
}
.btn--full{width:100%}
.btn--download{
  background:linear-gradient(135deg,var(--success),#16a34a);
}

.successIcon{
  width:76px;height:76px;
  margin:0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(34,197,94,.15);
  color:var(--success);
  font-size:2.1rem;
}

.codeBox{
  letter-spacing:6px;
  font-size:1.7rem;
  text-align:center;
  padding:1rem;
  border-radius:20px;
  border:2px dashed var(--brand);
  color:var(--brand);
}

.fade-in{
  animation:fade .45s ease;
}
@keyframes fade{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}