body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}.App{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;font-family:Inter,sans-serif}.home-screen{max-width:1200px;margin:0 auto;animation:fadeIn .5s ease-in}.home-header{text-align:center;margin-bottom:40px}.home-title{font-family:Poppins,sans-serif;font-size:3rem;font-weight:800;color:#fff;margin:0;text-shadow:3px 3px 6px rgba(0,0,0,.3);animation:bounce 1s ease-in-out}.home-subtitle{font-size:1.2rem;color:#ffffffe6;margin-top:10px}.user-welcome{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:30px;padding:20px;background:#ffffff26;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-avatar-small{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative;box-shadow:0 4px 15px #0003}.welcome-text{font-size:1.2rem;color:#fff;margin:0}.badges-count{font-size:.9rem;color:#fffc;margin:5px 0 0}.missions-container{margin-top:40px}.missions-title{font-family:Poppins,sans-serif;font-size:2rem;color:#fff;text-align:center;margin-bottom:30px}.missions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px}.mission-card{background:#fff;border-radius:20px;padding:30px;cursor:pointer;transition:all .3s ease;position:relative;box-shadow:0 10px 30px #0003}.mission-card:hover:not(.locked){transform:translateY(-10px);box-shadow:0 15px 40px #0000004d}.mission-card.completed{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.mission-card.locked{opacity:.6;cursor:not-allowed;background:#e0e0e0}.mission-icon{font-size:4rem;text-align:center;margin-bottom:15px}.mission-content{text-align:center}.mission-number{font-family:Poppins,sans-serif;font-size:.9rem;color:#667eea;font-weight:600;margin:0 0 10px}.mission-title{font-family:Poppins,sans-serif;font-size:1.4rem;color:#333;margin:0 0 10px}.mission-description{color:#666;font-size:.95rem;margin:10px 0}.mission-duration{color:#999;font-size:.85rem;margin:10px 0}.mission-check,.mission-lock{position:absolute;top:15px;right:15px;font-size:2rem}.mission-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:15px;transition:all .3s ease}.mission-button:hover{transform:scale(1.05);box-shadow:0 5px 15px #667eea66}.home-actions{display:flex;justify-content:center;gap:20px;margin-top:40px}.view-badges-btn,.reset-btn{background:#fff3;color:#fff;border:2px solid white;padding:15px 30px;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.view-badges-btn:hover,.reset-btn:hover{background:#fff;color:#667eea}.mission-container{max-width:900px;margin:0 auto;background:#fff;border-radius:30px;padding:40px;box-shadow:0 20px 60px #0000004d;animation:slideUp .5s ease-out}.mission-header{text-align:center;margin-bottom:40px}.mission-main-title{font-family:Poppins,sans-serif;font-size:2.5rem;color:#333;margin:0 0 10px}.mission-subtitle{font-size:1.1rem;color:#666;margin:0}.mascot-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:25px;color:#fff;font-weight:600;font-size:1.1rem;margin-bottom:30px;animation:bounce 1s ease-in-out}.step-title{font-family:Poppins,sans-serif;font-size:2rem;color:#333;text-align:center;margin:20px 0}.step-subtitle{text-align:center;color:#666;font-size:1rem;margin-bottom:30px}.mascots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin:40px 0}.mascot-card{background:#f8f9fa;border:4px solid transparent;border-radius:20px;padding:30px;text-align:center;cursor:pointer;transition:all .3s ease}.mascot-card:hover{transform:scale(1.05);box-shadow:0 10px 30px #0003}.mascot-card.selected{animation:pulse .5s ease-in-out;transform:scale(1.1)}.mascot-emoji{font-size:5rem;margin-bottom:15px}.mascot-name{font-family:Poppins,sans-serif;font-size:1.8rem;margin:10px 0}.mascot-description{color:#666;font-size:.95rem;font-style:italic;margin:10px 0}.mascot-quote{color:#555;font-size:.9rem;line-height:1.5;margin-top:15px}.instruction{text-align:center;font-size:1.2rem;color:#333;margin-top:30px;font-weight:600}.age-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:40px 0}.age-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:25px;border-radius:20px;font-size:1.3rem;font-weight:600;cursor:pointer;transition:all .3s ease}.age-button:hover{transform:translateY(-5px);box-shadow:0 10px 25px #667eea66}.profile-creation{max-width:700px}.avatar-preview{width:150px;height:150px;border-radius:50%;margin:0 auto 30px;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative;box-shadow:0 10px 30px #0003;transition:all .3s ease}.avatar-preview .accessory{position:absolute;font-size:3rem;top:-10px;right:10px}.profile-form{margin-top:30px}.profile-form label{display:block;font-weight:600;color:#333;margin:25px 0 10px;font-size:1.1rem}.profile-form input{width:100%;padding:15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.profile-form input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.color-picker{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.color-option{width:60px;height:60px;border-radius:50%;border:4px solid transparent;cursor:pointer;transition:all .3s ease}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 0 4px #333;transform:scale(1.15)}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.option-button{background:#f0f0f0;border:3px solid transparent;padding:15px;border-radius:15px;font-size:1.1rem;cursor:pointer;transition:all .3s ease}.option-button:hover{background:#e0e0e0;transform:translateY(-3px)}.option-button.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#764ba2;transform:scale(1.05)}.interests-list{display:flex;flex-direction:column;gap:12px}.interest-button{background:#f8f9fa;border:2px solid #e0e0e0;padding:15px 20px;border-radius:12px;font-size:1rem;text-align:left;cursor:pointer;transition:all .3s ease}.interest-button:hover{background:#e9ecef;border-color:#667eea}.interest-button.selected{background:#d4edda;border-color:#28a745;color:#155724}.complete-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:18px;border-radius:15px;font-size:1.2rem;font-weight:600;cursor:pointer;margin-top:30px;transition:all .3s ease}.complete-button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #667eea66}.badge-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-in}.badge-card{background:#fff;border-radius:30px;padding:60px;text-align:center;animation:bounceIn .6s ease-out}.badge-icon{font-size:8rem;margin-bottom:20px}.badge-icon.rotating{animation:rotate360 1.5s ease-in-out}.badge-title{font-family:Poppins,sans-serif;font-size:2rem;color:#333;margin:0 0 10px}.badge-name{font-size:1.5rem;color:#667eea;font-weight:600}.summary-screen{text-align:center}.congrats-title{font-family:Poppins,sans-serif;font-size:2.5rem;color:#333;margin:0 0 10px}.congrats-subtitle{font-size:1.2rem;color:#666;margin-bottom:40px}.summary-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;padding:30px;margin:30px 0}.summary-card h3{font-family:Poppins,sans-serif;font-size:1.8rem;margin:10px 0}.summary-card p{font-size:1.1rem;margin:8px 0}.badge-earned{display:flex;align-items:center;justify-content:center;gap:20px;background:#fff3cd;border:3px solid #ffc107;border-radius:20px;padding:25px;margin:30px 0}.badge-earned .badge-icon{font-size:4rem;margin:0}.badge-earned h4{font-family:Poppins,sans-serif;font-size:1.5rem;color:#333;margin:0}.badge-earned p{color:#666;margin:5px 0 0}.objectives-section{text-align:left;background:#f8f9fa;border-radius:15px;padding:25px;margin:30px 0}.objectives-section h3{font-family:Poppins,sans-serif;color:#333;margin-top:0}.objectives-section p{color:#555;margin:10px 0;font-size:1.05rem}.mascot-message{background:#f8f9fa;border:3px solid;border-radius:20px;padding:25px;margin:30px 0;display:flex;gap:20px;align-items:flex-start;text-align:left}.mascot-message.large{padding:35px;margin:40px 0}.mascot-emoji{font-size:3rem;flex-shrink:0}.mascot-emoji-large{font-size:4rem;flex-shrink:0}.mascot-message p{color:#333;line-height:1.6;margin:8px 0}.next-mission-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:18px 40px;border-radius:25px;font-size:1.2rem;font-weight:600;cursor:pointer;margin-top:30px;transition:all .3s ease}.next-mission-button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #667eea66}.info-card{background:#e3f2fd;border-left:5px solid #2196f3;border-radius:10px;padding:25px;margin:30px 0}.info-card h3{font-family:Poppins,sans-serif;color:#1976d2;margin-top:0}.info-card p{color:#333;margin:10px 0;line-height:1.6}.continue-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:18px;border-radius:15px;font-size:1.2rem;font-weight:600;cursor:pointer;margin-top:30px;transition:all .3s ease}.continue-button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #667eea66}.time-options{display:flex;flex-direction:column;gap:15px;margin:30px 0}.time-option-button{background:#fff;border:3px solid #e0e0e0;padding:20px;border-radius:15px;font-size:1.1rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:15px}.time-option-button:hover{border-color:#667eea;background:#f8f9fa;transform:translate(10px)}.time-option-button.simple{justify-content:center}.time-emoji{font-size:2rem}.time-label{font-weight:600;color:#333}.comparison-cards{display:flex;align-items:center;justify-content:center;gap:20px;margin:40px 0;flex-wrap:wrap}.comparison-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:20px;padding:30px;flex:1;min-width:200px;text-align:center}.comparison-card h3{font-family:Poppins,sans-serif;color:#333;font-size:1rem;margin:0 0 15px}.time-big{font-family:Poppins,sans-serif;font-size:1.8rem;font-weight:700;color:#667eea;margin:0}.comparison-arrow{font-size:3rem;color:#667eea}.reflection-questions{margin:30px 0}.question-card{background:#f8f9fa;border-radius:15px;padding:25px;margin:20px 0}.question-card h3{font-family:Poppins,sans-serif;color:#333;margin-top:0}.small-text{font-size:.9rem;color:#666;font-style:italic}.feeling-options,.goal-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:20px}.feeling-button,.goal-button{background:#fff;border:2px solid #e0e0e0;padding:15px;border-radius:12px;font-size:1rem;cursor:pointer;transition:all .3s ease}.feeling-button:hover,.goal-button:hover{border-color:#667eea;background:#f0f4ff;transform:translateY(-3px)}.summary-insights,.key-learnings{background:#f8f9fa;border-radius:15px;padding:25px;margin:30px 0;text-align:left}.summary-insights h3,.key-learnings h3{font-family:Poppins,sans-serif;color:#333;margin-top:0}.summary-insights p,.key-learnings p{color:#555;margin:10px 0;font-size:1.05rem}.analogy-card{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:15px;padding:25px;margin:30px 0}.analogy-card h3{font-family:Poppins,sans-serif;color:#e65100;margin-top:0}.analogy-card p{color:#333;margin:10px 0;line-height:1.6}.quiz-progress{text-align:center;font-size:.9rem;color:#666;margin-bottom:20px;font-weight:600}.quiz-question{font-family:Poppins,sans-serif;font-size:1.5rem;color:#333;text-align:center;margin:30px 0;line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:15px;margin:30px 0}.quiz-option-button{background:#fff;border:3px solid #e0e0e0;padding:20px;border-radius:15px;font-size:1.1rem;cursor:pointer;transition:all .3s ease;text-align:left}.quiz-option-button:hover{border-color:#667eea;background:#f8f9fa;transform:translate(10px)}.quiz-score{text-align:center;font-size:1.2rem;color:#667eea;font-weight:600;margin-top:30px}.password-tips{background:#e8f5e9;border-left:5px solid #4caf50;border-radius:10px;padding:20px;margin:30px 0}.password-tips h3{font-family:Poppins,sans-serif;color:#2e7d32;margin-top:0}.password-tips p{color:#333;margin:8px 0;transition:all .3s ease}.password-tips p.tip-complete{color:#2e7d32;font-weight:600}.password-tips p.tip-complete:before{content:"✓ ";color:#4caf50}.password-creator{margin:30px 0}.password-creator label{display:block;font-weight:600;color:#333;margin-bottom:10px;font-size:1.1rem}.password-input{width:100%;padding:15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1.1rem;font-family:monospace;box-sizing:border-box;transition:all .3s ease}.password-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.password-strength{margin-top:20px}.strength-label{font-weight:600;color:#333;margin-bottom:10px}.strength-bars{display:flex;gap:5px;margin:10px 0}.strength-bar{flex:1;height:10px;background:#e0e0e0;border-radius:5px;transition:all .3s ease}.strength-bar.active{background:#ffc107}.strength-bar.active.medium{background:#ff9800}.strength-bar.active.strong{background:#4caf50}.strength-text{text-align:center;font-weight:600;color:#666;margin-top:10px}.password-method{background:#f3e5f5;border-radius:15px;padding:20px;margin:30px 0}.password-method h3{font-family:Poppins,sans-serif;color:#6a1b9a;margin-top:0}.password-method p{color:#333;margin:10px 0}.example{font-style:italic;color:#666;font-size:1.1rem}.example-password{font-family:monospace;font-size:1.2rem;color:#6a1b9a;font-weight:600;background:#fff;padding:10px;border-radius:8px;display:inline-block}.badges-screen{max-width:1000px;margin:0 auto;animation:fadeIn .5s ease-in}.badges-header{text-align:center;margin-bottom:40px;position:relative}.back-button{position:absolute;left:0;top:0;background:#fff3;color:#fff;border:2px solid white;padding:10px 20px;border-radius:20px;font-size:1rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-button:hover{background:#fff;color:#667eea}.badges-title{font-family:Poppins,sans-serif;font-size:3rem;color:#fff;margin:0;text-shadow:3px 3px 6px rgba(0,0,0,.3)}.badges-subtitle{font-size:1.2rem;color:#ffffffe6;margin-top:10px}.badges-collection{background:#fff;border-radius:30px;padding:40px;margin-bottom:30px;box-shadow:0 20px 60px #0000004d}.no-badges{text-align:center;padding:60px 20px;color:#666}.no-badges p{font-size:1.2rem;margin:10px 0}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px}.badge-item{text-align:center;padding:30px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:20px;transition:all .3s ease}.badge-item:hover{transform:translateY(-10px);box-shadow:0 15px 40px #0003}.badge-icon-large{font-size:5rem;margin-bottom:15px}.badge-item .badge-name{font-family:Poppins,sans-serif;font-size:1.3rem;color:#333;margin:10px 0}.badge-mission{color:#667eea;font-weight:600;font-size:.9rem}.badges-stats{background:#fff3;border-radius:20px;padding:30px;text-align:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.badges-stats h3{font-family:Poppins,sans-serif;font-size:1.8rem;margin-top:0}.badges-stats p{font-size:1.1rem;margin:10px 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.home-title{font-size:2rem}.mission-main-title{font-size:1.8rem}.step-title{font-size:1.5rem}.mascots-grid,.missions-grid{grid-template-columns:1fr}.comparison-cards{flex-direction:column}.comparison-arrow{transform:rotate(90deg)}.feeling-options,.goal-options,.badges-grid{grid-template-columns:1fr}.mission-container{padding:25px}.home-actions{flex-direction:column}.back-button{position:static;margin-bottom:20px}}@media(max-width:480px){.App{padding:10px}.home-title{font-size:1.5rem}.mission-main-title{font-size:1.4rem}.mascot-emoji{font-size:3rem}.badge-icon{font-size:5rem}.avatar-preview{width:120px;height:120px;font-size:4rem}}