.onboarding-overlay{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;animation:onboardingFadeIn .3s ease-out}.onboarding-backdrop{position:absolute;inset:0;background:#000000b3;backdrop-filter:blur(4px)}.onboarding-modal{position:relative;background:var(--color-card, #fff);border-radius:20px;box-shadow:0 25px 60px #0000004d;width:min(600px,90vw);max-height:80vh;overflow:hidden;animation:onboardingSlideUp .4s ease-out}.onboarding-header{display:flex;justify-content:space-between;align-items:center;padding:2rem 2rem 1rem;border-bottom:1px solid var(--color-border, #e5e7eb)}.onboarding-header h2{margin:0;font-size:1.5rem;font-weight:700;color:var(--color-text, #1a1a1a)}.onboarding-close{background:none;border:none;font-size:1.5rem;color:var(--color-muted, #666);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.onboarding-close:hover{background:var(--color-error-bg, rgba(239, 68, 68, .1));color:var(--color-error, #ef4444)}.onboarding-body{padding:1.5rem 2rem;max-height:400px;overflow-y:auto}.onboarding-footer{padding:1rem 2rem 2rem;border-top:1px solid var(--color-border, #e5e7eb)}.onboarding-welcome,.onboarding-step{text-align:center}.onboarding-icon{font-size:3rem;margin-bottom:1rem;display:block}.onboarding-step h3,.onboarding-welcome h3{margin:0 0 1rem;font-size:1.25rem;font-weight:600;color:var(--color-text, #1a1a1a)}.onboarding-step p,.onboarding-welcome p{margin:0 0 1.5rem;color:var(--color-muted, #666);line-height:1.6}.onboarding-features,.onboarding-methods,.onboarding-next-steps{list-style:none;padding:0;margin:1.5rem 0;text-align:left}.onboarding-features li,.onboarding-methods li,.onboarding-next-steps li{padding:.5rem 0;color:var(--color-text, #1a1a1a);display:flex;align-items:flex-start;gap:.5rem}.onboarding-options{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0}@media(min-width:640px){.onboarding-options{grid-template-columns:1fr 1fr}}.onboarding-option{padding:1.5rem;border:2px solid var(--color-border, #e5e7eb);border-radius:12px;text-align:left;transition:all .2s ease}.onboarding-option:hover{border-color:var(--color-primary, #f4b400);background:var(--color-primary-bg, rgba(244, 180, 0, .05))}.onboarding-option strong{display:block;margin-bottom:.5rem;color:var(--color-text, #1a1a1a)}.onboarding-option p{margin:0;font-size:.875rem;color:var(--color-muted, #666)}.onboarding-progress{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.onboarding-progress-bar{flex:1;height:6px;background:var(--color-border, #e5e7eb);border-radius:3px;overflow:hidden}.onboarding-progress-fill{height:100%;background:var(--color-primary, #f4b400);border-radius:3px;transition:width .3s ease;width:25%}.onboarding-progress-text{font-size:.875rem;color:var(--color-muted, #666);font-weight:500;white-space:nowrap}.onboarding-actions{display:flex;justify-content:space-between;gap:1rem}.onboarding-actions .pill-button{min-width:100px}.onboarding-highlight{position:relative;z-index:10002;animation:onboardingPulse 2s infinite}.onboarding-highlight:before{content:"";position:absolute;inset:-4px;border:3px solid var(--color-primary, #f4b400);border-radius:12px;animation:onboardingGlow 2s infinite;pointer-events:none}.onboarding-active{overflow:hidden}.onboarding-active .toast-container{z-index:9999}@keyframes onboardingFadeIn{0%{opacity:0}to{opacity:1}}@keyframes onboardingSlideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes onboardingPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes onboardingGlow{0%,to{opacity:.6;box-shadow:0 0 20px #f4b4004d}50%{opacity:1;box-shadow:0 0 30px #f4b40099}}@media(max-width:640px){.onboarding-modal{width:95vw;max-height:90vh}.onboarding-header,.onboarding-body,.onboarding-footer{padding-left:1.5rem;padding-right:1.5rem}.onboarding-actions{flex-direction:column}.onboarding-actions .pill-button{width:100%}.onboarding-progress{flex-direction:column;gap:.5rem;text-align:center}}@media(prefers-reduced-motion:reduce){.onboarding-overlay,.onboarding-modal,.onboarding-highlight,.onboarding-progress-fill{animation:none}.onboarding-highlight:before{animation:none;opacity:.8}}.onboarding-step-content:focus{outline:none}.onboarding-modal [tabindex="-1"]:focus{outline:none}@media(prefers-contrast:high){.onboarding-backdrop{background:#000000e6}.onboarding-modal{border:2px solid var(--color-text, #000)}.onboarding-highlight:before{border-width:4px}}
