:root{
	--wpu-primary:#6d28d9;
	--wpu-primary-2:#4f46e5;
	--wpu-accent:#22c55e;
	--wpu-bg-1:#4f46e5;
	--wpu-bg-2:#7c3aed;
	--wpu-text:#1f2130;
	--wpu-muted:#6b7280;
	--wpu-locked:#e5e7eb;
	--wpu-card:#ffffff;
	--wpu-radius:18px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
	font-family:'Poppins',sans-serif;
	background:linear-gradient(135deg,var(--wpu-bg-1),var(--wpu-bg-2) 55%,#ec4899);
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 14px;
	color:var(--wpu-text);
}
.wpu-wrap{width:100%;max-width:480px;}
.wpu-card{
	background:var(--wpu-card);
	border-radius:var(--wpu-radius);
	box-shadow:0 25px 60px rgba(0,0,0,.25);
	padding:28px 22px 20px;
	position:relative;
	overflow:hidden;
	animation:wpuPopIn .5s ease;
}
@keyframes wpuPopIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.wpu-header{text-align:center;margin-bottom:22px;}
.wpu-lock-icon{
	width:52px;height:52px;border-radius:50%;
	background:linear-gradient(135deg,var(--wpu-primary),var(--wpu-primary-2));
	display:flex;align-items:center;justify-content:center;
	margin:0 auto 12px;
	box-shadow:0 8px 20px rgba(109,40,217,.35);
}
.wpu-header h1{font-size:19px;font-weight:700;margin:0 0 6px;line-height:1.3;}
.wpu-subtitle{margin:0;color:var(--wpu-muted);font-size:13.5px;}

.wpu-progress-track{
	position:relative;
	display:flex;justify-content:space-between;align-items:center;
	margin:8px 6px 26px;
	height:30px;
}
.wpu-progress-track::before{
	content:'';position:absolute;left:14px;right:14px;top:50%;
	height:4px;background:var(--wpu-locked);border-radius:4px;transform:translateY(-50%);
	z-index:0;
}
.wpu-progress-fill{
	position:absolute;left:14px;top:50%;height:4px;width:0;
	background:linear-gradient(90deg,var(--wpu-primary),var(--wpu-accent));
	border-radius:4px;transform:translateY(-50%);
	transition:width .5s ease;z-index:1;
}
.wpu-dot{
	position:relative;z-index:2;
	width:28px;height:28px;border-radius:50%;
	background:var(--wpu-locked);
	color:#9ca3af;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:700;
	transition:background .35s ease,transform .35s ease;
}
.wpu-dot .wpu-dot-check{display:none;}
.wpu-dot.wpu-active{background:var(--wpu-primary);color:#fff;transform:scale(1.12);box-shadow:0 0 0 5px rgba(109,40,217,.15);}
.wpu-dot.wpu-done{background:var(--wpu-accent);color:#fff;}
.wpu-dot.wpu-done .wpu-dot-num{display:none;}
.wpu-dot.wpu-done .wpu-dot-check{display:block;}

.wpu-steps{display:flex;flex-direction:column;gap:12px;}
.wpu-step{
	display:flex;align-items:center;gap:12px;
	border:1px solid #eef0f5;
	border-radius:14px;
	padding:12px 12px;
	opacity:.45;
	filter:grayscale(.4);
	transform:scale(.99);
	transition:all .35s ease;
	background:#fafafe;
}
.wpu-step.wpu-current{
	opacity:1;filter:none;transform:scale(1);
	background:#fff;
	border-color:#e5e0ff;
	box-shadow:0 6px 18px rgba(79,70,229,.12);
}
.wpu-step.wpu-completed{
	opacity:1;filter:none;
	background:#f3fbf6;
	border-color:#d7f3e0;
}
.wpu-step-icon{
	flex:none;width:38px;height:38px;border-radius:10px;
	display:flex;align-items:center;justify-content:center;
}
.wpu-icon-yt{background:#ff0000;}
.wpu-icon-ad{background:linear-gradient(135deg,#f59e0b,#f97316);}
.wpu-icon-final{background:linear-gradient(135deg,var(--wpu-primary),#ec4899);}
.wpu-step-body{flex:1;min-width:0;}
.wpu-step-title{font-size:13.5px;font-weight:600;margin-bottom:2px;}
.wpu-step-desc{font-size:11.5px;color:var(--wpu-muted);line-height:1.35;}
.wpu-step.wpu-completed .wpu-step-desc{display:none;}
.wpu-step.wpu-completed .wpu-step-title::after{content:' ✓ Done';color:var(--wpu-accent);font-weight:700;}

.wpu-btn{
	flex:none;
	border:none;cursor:pointer;
	font-family:inherit;font-weight:600;font-size:12.5px;
	padding:10px 14px;border-radius:10px;
	color:#fff;
	background:var(--wpu-locked);
	transition:transform .15s ease,box-shadow .15s ease,background .2s ease;
	white-space:nowrap;
}
.wpu-step.wpu-current .wpu-btn-primary{
	background:linear-gradient(135deg,var(--wpu-primary),var(--wpu-primary-2));
	box-shadow:0 8px 18px rgba(79,70,229,.3);
}
.wpu-step.wpu-current .wpu-btn-primary:active{transform:scale(.96);}
.wpu-step.wpu-completed .wpu-btn{background:var(--wpu-accent);}
.wpu-btn:disabled{cursor:not-allowed;opacity:.6;}
.wpu-btn-final{background:linear-gradient(135deg,#ec4899,var(--wpu-primary));}
.wpu-step.wpu-current .wpu-btn-final{box-shadow:0 8px 18px rgba(236,72,153,.35);}

.wpu-wait-banner{
	margin-top:14px;text-align:center;font-size:12.5px;
	background:#fff7ed;color:#c2410c;
	border:1px solid #ffedd5;
	border-radius:10px;padding:9px;
	animation:wpuFade .3s ease;
}
@keyframes wpuFade{from{opacity:0;}to{opacity:1;}}

.wpu-final-box{
	margin-top:16px;text-align:center;
	background:#f5f3ff;border:1px solid #ede9fe;
	border-radius:14px;padding:16px;
	animation:wpuPopIn .4s ease;
}
.wpu-final-box p{margin:0 0 10px;font-size:13px;color:var(--wpu-muted);}
.wpu-final-box .wpu-btn-final{display:inline-block;padding:12px 26px;font-size:13.5px;text-decoration:none;}

.wpu-footer{text-align:center;margin-top:18px;font-size:10.5px;color:#c7c9d9;}

@media (max-width:380px){
	.wpu-step{padding:10px;}
	.wpu-step-icon{width:32px;height:32px;}
	.wpu-btn{padding:9px 10px;font-size:11.5px;}
}