.onboarding-page{background:var(--bg-secondary);flex-direction:column;min-height:100vh;display:flex}.onboarding-header{background:var(--bg-primary);border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.onboarding-logo{align-items:center;gap:10px;text-decoration:none;display:flex}.onboarding-logo-icon{width:28px;height:28px;color:var(--brand-primary)}.onboarding-logo-text{color:var(--text-primary);font-size:18px;font-weight:600}.onboarding-header-right{color:var(--text-secondary);font-size:14px}.onboarding-header-right a{color:var(--brand-primary);font-weight:500;text-decoration:none}.onboarding-header-right a:hover{text-decoration:underline}.onboarding-progress{width:100%;max-width:600px;margin:0 auto;padding:24px 24px 0}.onboarding-steps{align-items:center;gap:0;margin-bottom:12px;display:flex}.onboarding-step-dot{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;transition:all .3s;display:flex}.onboarding-step-dot.completed{background:var(--brand-primary);color:#fff}.onboarding-step-dot.active{background:var(--brand-primary);color:#fff;box-shadow:0 0 0 4px var(--brand-primary-light)}.onboarding-step-dot.upcoming{background:var(--border-light);color:var(--text-muted)}.onboarding-step-line{background:var(--border-light);flex:1;height:3px;transition:background .3s}.onboarding-step-line.completed{background:var(--brand-primary)}.onboarding-step-label{color:var(--text-secondary);text-align:center;font-size:14px}.onboarding-main{flex:1;justify-content:center;align-items:flex-start;padding:32px 16px 48px;display:flex}.onboarding-card{background:var(--bg-primary);width:100%;max-width:520px;box-shadow:var(--shadow-lg);border-radius:16px;padding:36px}.onboarding-back-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;margin-bottom:20px;padding:0;font-size:14px;display:inline-flex}.onboarding-back-btn:hover{color:var(--text-primary)}.onboarding-back-btn svg{width:16px;height:16px}.onboarding-title{color:var(--text-primary);margin-bottom:8px;font-size:24px;font-weight:600}.onboarding-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:15px;line-height:1.5}.onboarding-form{flex-direction:column;gap:18px;display:flex}.onboarding-field{flex-direction:column;gap:5px;display:flex}.onboarding-label{color:var(--text-primary);font-size:14px;font-weight:500}.onboarding-input,.onboarding-select{border:1px solid var(--border-light);background:var(--bg-primary);width:100%;color:var(--text-primary);border-radius:12px;outline:none;padding:12px 16px;font-family:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}.onboarding-input:focus,.onboarding-select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-light)}.onboarding-input::placeholder{color:var(--text-muted)}.onboarding-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding-right:40px}.onboarding-row{gap:12px;display:flex}.onboarding-row .onboarding-field{flex:1}.onboarding-plan-selector{flex-direction:column;gap:10px;display:flex}.onboarding-plan-option{border:2px solid var(--border-light);cursor:pointer;background:var(--bg-primary);border-radius:12px;align-items:center;gap:12px;padding:14px 16px;transition:border-color .2s,background .2s;display:flex}.onboarding-plan-option:hover{border-color:var(--brand-primary-light);background:var(--brand-primary-light)}.onboarding-plan-option.selected{border-color:var(--brand-primary);background:var(--brand-primary-light)}.onboarding-plan-radio{border:2px solid var(--border-medium);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.onboarding-plan-option.selected .onboarding-plan-radio{border-color:var(--brand-primary)}.onboarding-plan-radio-inner{background:var(--brand-primary);border-radius:50%;width:10px;height:10px;display:none}.onboarding-plan-option.selected .onboarding-plan-radio-inner{display:block}.onboarding-plan-info{flex:1}.onboarding-plan-name{color:var(--text-primary);font-size:15px;font-weight:600}.onboarding-plan-desc{color:var(--text-secondary);margin-top:2px;font-size:13px}.onboarding-plan-price{color:var(--brand-primary);white-space:nowrap;font-size:15px;font-weight:600}.onboarding-plan-badge{color:#fff;background:#ff6b35;border-radius:20px;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.onboarding-checkbox-row{align-items:flex-start;gap:10px;display:flex}.onboarding-checkbox{width:18px;height:18px;accent-color:var(--brand-primary);flex-shrink:0;margin-top:2px}.onboarding-checkbox-label{color:var(--text-secondary);font-size:14px;line-height:1.4}.onboarding-checkbox-label a{color:var(--brand-primary);text-decoration:none}.onboarding-checkbox-label a:hover{text-decoration:underline}.onboarding-error{color:#dc2626;background:#fee2e2;border-radius:12px;padding:12px;font-size:14px}.onboarding-btn{background:var(--brand-primary);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:8px;padding:14px;font-size:16px;font-weight:500;transition:background .2s;display:flex}.onboarding-btn:hover{background:var(--brand-primary-dark)}.onboarding-btn:disabled{background:var(--text-muted);cursor:not-allowed}.onboarding-btn:disabled:hover{background:var(--text-muted)}.onboarding-btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-light)}.onboarding-btn-secondary:hover{background:var(--bg-hover)}.onboarding-btn-loading{justify-content:center;align-items:center;gap:8px;display:flex}.onboarding-spinner{border:2px solid #fff;border-top-color:#0000;border-radius:50%;width:20px;height:20px;animation:1s linear infinite onboarding-spin}@keyframes onboarding-spin{to{transform:rotate(360deg)}}.onboarding-payment-info{background:var(--brand-primary-light);text-align:center;border-radius:12px;margin-bottom:24px;padding:16px 20px}.onboarding-payment-info h3{color:var(--text-primary);margin-bottom:4px;font-size:18px;font-weight:600}.onboarding-payment-info p{color:var(--text-secondary);font-size:14px}.onboarding-card-element{border:1px solid var(--border-light);background:var(--bg-primary);border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s}.onboarding-card-element.StripeElement--focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-light)}.onboarding-secure-note{color:var(--text-muted);justify-content:center;align-items:center;gap:6px;margin-top:12px;font-size:13px;display:flex}.onboarding-secure-note svg{width:14px;height:14px}.onboarding-connect-substep{text-align:center}.onboarding-connect-icon{border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;font-size:36px;display:flex}.onboarding-connect-icon.whatsapp{color:#25d366;background:#e7f9ee}.onboarding-connect-icon.success{color:#22c55e;background:#e7f9ee}.onboarding-connect-instruction{color:var(--text-primary);margin-bottom:8px;font-size:17px;font-weight:500}.onboarding-connect-detail{color:var(--text-secondary);margin-bottom:24px;font-size:14px;line-height:1.5}.onboarding-device-toggle{background:var(--bg-secondary);border-radius:10px;margin-bottom:20px;padding:4px;display:inline-flex}.onboarding-device-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 20px;font-size:14px;font-weight:500;transition:all .2s}.onboarding-device-btn.active{background:var(--bg-primary);color:var(--text-primary);box-shadow:var(--shadow-sm)}.onboarding-qr-container{flex-direction:column;align-items:center;padding:20px 0;display:flex}.onboarding-qr-box{width:220px;height:220px;box-shadow:var(--shadow-md);background:#fff;border-radius:16px;justify-content:center;align-items:center;margin-bottom:16px;display:flex;overflow:hidden}.onboarding-qr-box img{width:200px;height:200px}.onboarding-qr-loading{flex-direction:column;align-items:center;gap:12px;display:flex}.onboarding-qr-loading .onboarding-spinner{border-color:var(--brand-primary);border-top-color:#0000}.onboarding-qr-timer{color:var(--text-muted);font-size:13px}.onboarding-qr-hint{color:var(--text-secondary);text-align:center;max-width:360px;font-size:13px;line-height:1.5}.onboarding-check-circle{background:#e7f9ee;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;display:flex}.onboarding-check-circle svg{color:#22c55e;width:40px;height:40px}.onboarding-instruction-steps{text-align:left;background:var(--bg-secondary);border-radius:12px;margin-bottom:24px;padding:16px 20px}.onboarding-instruction-step{gap:12px;padding:8px 0;display:flex}.onboarding-instruction-step+.onboarding-instruction-step{border-top:1px solid var(--border-light)}.onboarding-instruction-num{background:var(--brand-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:600;display:flex}.onboarding-instruction-text{color:var(--text-primary);padding-top:2px;font-size:14px;line-height:1.5}@media (max-width:600px){.onboarding-card{border-radius:12px;padding:24px 20px}.onboarding-title{font-size:20px}.onboarding-main{padding:20px 12px 32px}.onboarding-plan-option{flex-wrap:wrap}.onboarding-plan-price{width:100%;padding-left:32px}.onboarding-row{flex-direction:column;gap:18px}}
