@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap");.selfie-container{min-height:100vh;background:white;position:relative;font-family:Fredoka,sans-serif}.selfie-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(#0000004d 1px,#0000 0);background-size:20px 20px;opacity:.5;pointer-events:none}.auth-required{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;position:relative;z-index:10}.auth-card{background:white;border-radius:20px;padding:3rem;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.1);border:2px solid #f3f4f6;max-width:500px}.auth-card h2{color:#1f2937;margin-bottom:1rem;font-size:2rem;font-weight:600}.auth-card h2,.auth-card p{font-family:Fredoka,sans-serif}.auth-card p{color:#6b7280;margin-bottom:2rem;font-size:1.1rem}.auth-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:#3b82f6;color:white;text-decoration:none;border-radius:15px;font-weight:600;font-family:Fredoka,sans-serif;transition:all .3s ease}.auth-button:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 5px 15px rgba(59,130,246,.4)}.selfie-header{position:relative;z-index:10;padding:2rem;text-align:center}.back-button{position:absolute;top:2rem;left:5rem;display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#f3f4f6;color:#374151;text-decoration:none;border-radius:15px;font-weight:500;font-family:Fredoka,sans-serif;transition:all .3s ease;border:2px solid #e5e7eb}.back-button:hover{background:#e5e7eb;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.selfie-header h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:#1f2937;font-family:Fredoka,sans-serif}.selfie-header p{font-size:1.1rem;color:#6b7280;font-family:Fredoka,sans-serif;font-weight:400}.selfie-main{position:relative;z-index:10;padding:2rem;max-width:1200px;margin:0 auto}.step-container{background:white;border-radius:20px;padding:3rem;box-shadow:0 10px 30px rgba(0,0,0,.08);border:2px solid #f3f4f6}.step-header{text-align:center;margin-bottom:3rem}.step-header h2{color:#1f2937;font-size:2rem;font-weight:700;margin-bottom:1rem;font-family:Fredoka,sans-serif}.step-header p{color:#6b7280;font-size:1.1rem;font-family:Fredoka,sans-serif;font-weight:400}.character-section{margin-bottom:3rem}.character-section h3{color:#1f2937;font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;text-align:center;font-family:Fredoka,sans-serif;display:flex;align-items:center;justify-content:center;gap:.5rem}.characters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.character-card{background:white;border-radius:15px;padding:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px rgba(0,0,0,.08);border:3px solid;display:flex;align-items:center;gap:1rem;min-height:100px}.character-card[data-character=amygd]{border-color:#ec4899}.character-card[data-character=captaincortext]{border-color:#3b82f6}.character-card[data-character=glia]{border-color:#8b5cf6}.character-card[data-character=hipp]{border-color:#f59e0b}.character-card[data-character=sam]{border-color:#ef4444}.character-card[data-character=neuroshield]{border-color:#10b981}.character-card[data-character=basil]{border-color:#06b6d4}.character-card[data-character=densdri]{border-color:#84cc16}.character-card[data-character=generallymphia]{border-color:#f97316}.character-card[data-character=ladymanora]{border-color:#db2777}.character-card[data-character=nightblade]{border-color:#6366f1}.character-card[data-character=storm]{border-color:#14b8a6}.character-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.15)}.character-image-container{flex-shrink:0}.character-image{border-radius:10px;width:120px;height:190px;object-fit:contain}.character-info{flex:1}.character-card h4{color:#1f2937;font-size:1.1rem;font-weight:600;margin:0;font-family:Fredoka,sans-serif}.upload-section{display:flex;gap:3rem;align-items:center;justify-content:center;margin-bottom:2rem}.selected-character{text-align:center;padding:2rem;background:#f9fafb;border-radius:15px;border:2px solid #e5e7eb}.selected-character-image{border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,.1);margin-bottom:1rem}.selected-character h3{color:#1f2937;font-size:1.3rem;font-weight:600;margin:0;font-family:Fredoka,sans-serif}.upload-area{flex:1;max-width:400px}.file-input{display:none}.upload-label{display:block;padding:3rem;border:3px dashed #d1d5db;border-radius:15px;text-align:center;cursor:pointer;transition:all .3s ease;background:#f9fafb}.upload-label:hover{border-color:#3b82f6;background:#eff6ff;transform:translateY(-2px)}.upload-placeholder i{font-size:2.5rem;color:#6b7280;margin-bottom:1rem;display:block}.upload-placeholder p{color:#1f2937;font-size:1.1rem;font-weight:500;margin-bottom:.5rem;font-family:Fredoka,sans-serif}.upload-placeholder span{color:#6b7280;font-size:.9rem;font-family:Fredoka,sans-serif}.preview-container{text-align:center}.preview-image{border-radius:15px;margin-bottom:1rem;max-width:100%;height:auto;box-shadow:0 5px 15px rgba(0,0,0,.1)}.preview-container p{color:#6b7280;font-size:.9rem;font-family:Fredoka,sans-serif}.error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;background:#fef2f2;padding:1rem;border-radius:10px;margin-bottom:2rem;border:2px solid #fecaca;font-family:Fredoka,sans-serif}.error-message i{font-size:1.2rem}.step-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.primary-button,.secondary-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;border:none;border-radius:15px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;text-decoration:none;font-family:Fredoka,sans-serif}.primary-button{background:#3b82f6;color:white}.primary-button:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 5px 15px rgba(59,130,246,.4)}.primary-button:disabled{opacity:.5;cursor:not-allowed}.secondary-button{background:#f3f4f6;color:#374151;border:2px solid #e5e7eb}.secondary-button:hover{background:#e5e7eb;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.generating-step{text-align:center;padding:4rem 3rem}.generating-animation{max-width:400px;margin:0 auto}.magic-circle{width:100px;height:100px;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;box-shadow:0 10px 25px rgba(59,130,246,.3)}.magic-circle i{font-size:2.5rem;color:white}.generating-animation h2{color:#1f2937;font-size:1.8rem;font-weight:600;margin-bottom:1rem;font-family:Fredoka,sans-serif}.generating-animation p{color:#6b7280;font-size:1rem;margin-bottom:2rem;font-family:Fredoka,sans-serif}.progress-dots{display:flex;gap:.5rem;justify-content:center}.dot{width:10px;height:10px;border-radius:50%;background:#3b82f6}.result-step{text-align:center}.result-header h2{color:#1f2937;font-size:2rem;font-weight:700;margin-bottom:1rem;font-family:Fredoka,sans-serif}.result-header p{color:#6b7280;font-size:1.1rem;margin-bottom:2rem;font-family:Fredoka,sans-serif}.result-image-container{margin:2rem auto;max-width:500px}.result-image{border-radius:20px;box-shadow:0 15px 35px rgba(0,0,0,.15);max-width:100%;height:auto}.result-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.section-icon{font-size:1.2rem;margin-right:.5rem}@media (max-width:768px){.selfie-header h1{font-size:2rem}.step-container{padding:2rem}.characters-grid{grid-template-columns:1fr;gap:1rem}.character-card{min-height:80px;padding:1rem}.character-image{width:60px;height:60px}.upload-section{flex-direction:column;gap:2rem}.step-actions{flex-direction:column;align-items:center}.primary-button,.secondary-button{width:100%;max-width:300px;justify-content:center}.back-button{position:relative;top:0;left:0;margin-bottom:1rem}.selfie-header{padding:1rem}}