body { background: #f5f5f5; font-family: "Microsoft YaHei", sans-serif; }
.onboard-container { max-width: 640px; margin: 20px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 30px 40px; }
.onboard-header { overflow: hidden; margin-bottom: 30px; }
.onboard-header h2 { margin: 0; color: #333; }
.step-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.step-item { display: flex; flex-direction: column; align-items: center; }
.step-circle { width: 36px; height: 36px; border-radius: 50%; background: #ddd; color: #999; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; transition: all 0.3s; }
.step-label { font-size: 12px; color: #999; margin-top: 6px; }
.step-line { width: 60px; height: 2px; background: #ddd; margin: 0 8px; margin-bottom: 20px; transition: all 0.3s; }
.step-item.active .step-circle { background: #337ab7; color: #fff; }
.step-item.active .step-label { color: #337ab7; }
.step-item.done .step-circle { background: #5cb85c; color: #fff; }
.step-line.active { background: #5cb85c; }
.step-content { min-height: 300px; }
.qr-section { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 20px 0; }
.qr-box { width: 240px; height: 240px; }
.qr-info { max-width: 260px; }
.qr-info h4 { color: #333; }
.wait-status { color: #999; }
.spinning { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.auth-success { color: #5cb85c; font-size: 16px; }
.auth-fail { color: #d9534f; font-size: 14px; }
.onboard-form { max-width: 400px; margin: 0 auto; }
.onboard-form .form-group { margin-bottom: 20px; }
.onboard-form label { color: #555; font-weight: normal; }
.required { color: #d9534f; }
.form-actions { margin-top: 30px; display: flex; gap: 10px; }
.form-actions .btn-block { flex: 1; }
.pay-tip { margin-bottom: 20px; padding: 10px; background: #fcf8e3; border-radius: 4px; }
.complete-section { text-align: center; padding: 40px 0; }
.success-icon { font-size: 64px; margin-bottom: 20px; }
.complete-info { margin: 20px 0; color: #666; }
@media (max-width: 600px) {
  .onboard-container { padding: 20px; margin: 10px; }
  .qr-section { flex-direction: column; gap: 20px; }
  .step-line { width: 30px; }
  .step-label { font-size: 10px; }
}