{{ icon }}
{{ title }}
{{ description }}
{{ currentStepObj.icon }}
{{ currentStepObj.title }}
{{ currentStepObj.desc }}
{{ btnLabel }}
.cg-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
}
.cg-card {
width: 640rpx;
min-height: 560rpx;
background: $app-surface;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.cg-topbar { width: 100%; height: 12rpx; flex-shrink: 0; }
.cg-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 72rpx 56rpx 40rpx;
}
.cg-icon { font-size: 80rpx; margin-bottom: 32rpx; display: block; }
.cg-img { width: 160rpx; height: 160rpx; margin-bottom: 32rpx; }
.cg-title {
font-size: 36rpx;
font-weight: 700;
color: $uni-text-color;
text-align: center;
margin-bottom: 20rpx;
display: block;
line-height: 1.3;
}
.cg-title--intro { font-size: 32rpx; font-weight: 800; }
.cg-desc {
font-size: 28rpx;
color: $uni-text-color-secondary;
text-align: center;
line-height: 1.6;
display: block;
padding: 0 16rpx;
}
.cg-dots { display: flex; align-items: center; justify-content: center; padding: 0 56rpx 32rpx; }
.cg-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: $uni-border-color; margin: 0 8rpx; }
.cg-dot--active { background: $brand-primary; transform: scale(1.3); }
.cg-action { width: 100%; padding: 0 56rpx 48rpx; box-sizing: border-box; }
.cg-btn {
width: 100%;
height: 88rpx;
border-radius: 999rpx;
color: $app-surface;
font-size: 32rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}