@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Fredoka+One&display=swap";@keyframes warpExpand{0%{opacity:.8;transform:translate(-50%,-50%)scale(0)}50%{opacity:1}to{opacity:1;transform:translate(-50%,-50%)scale(500)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes blobFloat{0%{transform:scale(1)translate(0)}33%{transform:scale(1.08)translate(24px,-32px)rotate(8deg)}66%{transform:scale(.92)translate(-16px,18px)rotate(-8deg)}to{transform:scale(1)translate(0)}}@keyframes heroFadeUp{0%{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}@keyframes ctaPulse{0%,to{transform:scale(1);box-shadow:0 0 #22c55e66}50%{transform:scale(1.05);box-shadow:0 0 20px 10px #22c55e1a}}@keyframes zeroGravity{0%{transform:translate(0)rotate(0)}33%{transform:translate(18px,-22px)rotate(120deg)scale(1.08)}66%{transform:translate(-12px,16px)rotate(240deg)scale(.94)}to{transform:translate(0)rotate(360deg)}}@keyframes jellyButton{0%,to{transform:scale(1)}4%{transform:scale(1.15,.85)}8%{transform:scale(.85,1.15)}12%{transform:scale(1.05,.95)}16%{transform:scale(.98,1.02)}20%{transform:scale(1)}}@keyframes kidJump{0%,to{transform:translateY(0)scale(1)}40%{transform:translateY(-20px)scale(.9,1.1)}50%{transform:translateY(-24px)scale(1)}60%{transform:translateY(-20px)scale(.9,1.1)}80%{transform:translateY(0)scale(1.15,.85)}}@keyframes heavyStruggle{0%,to{transform:translateY(0)scale(1.2,.85)}15%{transform:translateY(0)scale(1.3,.75)}30%{transform:translateY(-5px)scale(1.05,.95)}45%{transform:translateY(0)scale(1.35,.7)}65%{transform:translateY(0)scale(1.15,.9)}85%{transform:translateY(0)scale(1.25,.8)}}@keyframes heroFly{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-12px)rotate(15deg)}75%{transform:translateY(-12px)rotate(-15deg)}}@keyframes bentoPop{0%,to{transform:scale(1)}50%{transform:scale(1.25)rotate(8deg)}}@keyframes starSpin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.2)}to{transform:rotate(360deg)scale(1)}}@keyframes buttonShine{0%,60%{left:-100%}to{left:200%}}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes wobble{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-4px)rotate(-3deg)}75%{transform:translate(4px)rotate(3deg)}}@keyframes alertPulse{0%,to{transform:scale(1);box-shadow:0 0 #dc262600}50%{transform:scale(1.02);box-shadow:0 8px 24px #dc262626}}@keyframes letterBouncePop{0%{opacity:0;transform:translateY(20px)scale(.5)rotate(-10deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}@keyframes playfulSpinPop{0%{opacity:0;transform:translateY(40px)scale(0)rotate(-60deg)}60%{opacity:1;transform:translateY(-10px)scale(1.2)rotate(15deg)}80%{transform:translateY(5px)scale(.9)rotate(-5deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}.hero-section{background:linear-gradient(-45deg,#fef9e7,#f0fdf4,#fff1f2,#fef9e7) 0 0/400% 400%;justify-content:center;align-items:center;min-height:380px;padding:60px 32px;animation:15s infinite gradientShift;display:flex;position:relative;overflow:hidden}.blob{filter:blur(50px);z-index:0;opacity:.6;border-radius:50%;animation:15s ease-in-out infinite alternate blobFloat;position:absolute}.blob-1{background:#86efac;width:350px;height:350px;animation-delay:0s;top:-100px;left:-100px}.blob-2{background:#fde047;width:300px;height:300px;animation-delay:-5s;bottom:-80px;right:5%}.blob-3{background:#fbcfe8;width:250px;height:250px;animation-delay:-10s;top:20%;left:40%}.floating-food{pointer-events:none;-webkit-user-select:none;user-select:none;animation:12s ease-in-out infinite alternate zeroGravity;position:absolute}.hero-content{text-align:center;z-index:1;max-width:560px;position:relative}.hero-title{font-family:var(--font-display);color:var(--gray-900);margin-bottom:16px;font-size:clamp(36px,5vw,52px);line-height:1.1;animation:.7s both heroFadeUp}.hero-subtitle{color:var(--gray-500);margin-bottom:28px;font-size:17px;line-height:1.6;animation:.7s .15s both heroFadeUp}.hero-actions{margin-bottom:20px}.btn-hero-cta{background:var(--green-600);color:#fff;font-family:var(--font-body);border-radius:var(--radius-full);cursor:pointer;border:none;margin-top:10px;padding:14px 36px;font-size:16px;font-weight:700;transition:background .15s,transform .1s,box-shadow .15s;animation:5s infinite jellyButton;position:relative;overflow:hidden;box-shadow:0 4px 16px #16a34a4d}.btn-hero-cta:after,.btn-adventure:after{content:"";pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#fff6,#0000);width:50%;height:100%;animation:4s infinite buttonShine;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.btn-hero-cta:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:0 6px 20px #16a34a59}.warp-transition-overlay{z-index:2147483647;pointer-events:none;background:conic-gradient(#f87171,#fb923c,#facc15,#4ade80,#60a5fa,#a78bfa,#f472b6,#f87171);border-radius:50%;width:20px;height:20px;animation:.8s cubic-bezier(.8,0,.2,1) forwards warpExpand;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.hero-nav-pills{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pill-link{border:1.5px solid var(--gray-200);font-family:var(--font-body);color:var(--gray-600);border-radius:var(--radius-full);cursor:pointer;background:#ffffffb3;padding:6px 16px;font-size:13px;font-weight:600;transition:all .15s}.pill-link:hover,.pill-link.active{background:var(--green-600);border-color:var(--green-600);color:#fff}.problem-section{text-align:center;max-width:900px;margin:0 auto;padding:72px 32px}.section-badge{border-radius:var(--radius-full);margin-bottom:16px;padding:5px 16px;font-size:13px;font-weight:700;animation:3s ease-in-out infinite gentleFloat;display:inline-block}.section-title{font-family:var(--font-display);color:var(--gray-900);margin-bottom:10px;font-size:clamp(26px,4vw,38px)}.bounce-typewriter span{opacity:0;will-change:transform, opacity;display:inline-block;transform:translateY(20px)scale(.5)}.reveal.revealed.bounce-typewriter span{animation:.6s cubic-bezier(.34,1.56,.64,1.3) forwards letterBouncePop}.playful-typewriter span{opacity:0;will-change:transform, opacity;display:inline-block;transform:translateY(40px)scale(0)rotate(-60deg)}.reveal.revealed.playful-typewriter span{animation:.7s cubic-bezier(.34,1.56,.64,1) forwards playfulSpinPop}.section-subtitle{color:var(--gray-400);margin-bottom:40px;font-size:15px}.problem-cards{text-align:left;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;display:grid}@media (width<=640px){.problem-cards{grid-template-columns:1fr}}.problem-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff;padding:24px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}.problem-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px #00000014}.problem-card-title{color:var(--gray-900);text-align:center;margin-bottom:16px;font-size:16px;font-weight:700}.kids-icons{justify-content:center;gap:8px;margin-bottom:12px;font-size:28px;display:flex}.kid-happy{transform-origin:bottom;will-change:transform;animation:1.2s ease-in-out infinite kidJump;display:inline-block}.kid-happy:first-child{animation-delay:0s}.kid-happy:nth-child(2){animation-delay:.2s}.kid-happy:nth-child(3){animation-delay:.4s}.kid-sad{transform-origin:bottom;animation:2.5s ease-in-out infinite heavyStruggle;display:inline-block}.kids-silhouettes{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.kid-sil{transform-origin:bottom;border-radius:10px 10px 6px 6px;width:20px;height:36px}.kid-sil.blue{background:#93c5fd;animation:1.2s ease-in-out infinite kidJump}.kid-sil.blue:first-child{animation-delay:0s}.kid-sil.blue:nth-child(2){animation-delay:.2s}.kid-sil.blue:nth-child(3){animation-delay:.4s}.kid-sil.orange{background:#fb923c;border-radius:12px 12px 6px 6px;width:28px;height:32px;margin-top:4px;animation:2.5s ease-in-out infinite heavyStruggle}.problem-card-text{color:var(--gray-600);text-align:center;font-size:13px;line-height:1.6}.diet-compare{grid-template-columns:1fr 1fr;gap:10px;display:grid}.diet-col{border-radius:var(--radius-md);font-size:12px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;overflow:hidden}.diet-col.healthy:hover{transform:translateY(-6px)scale(1.02);box-shadow:0 10px 20px #22c55e26}.diet-col.junk:hover{animation:.4s infinite wobble;box-shadow:0 10px 20px #ef444426}.diet-header{text-align:center;border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:7px 10px;font-size:11px;font-weight:700}.healthy-header{background:var(--green-500);color:#fff}.junk-header{color:#fff;background:#f87171}.diet-col ul{background:var(--gray-50);padding:10px;list-style:none}.diet-col ul li{color:var(--gray-600);padding:4px 0;font-size:11px}.diet-footer{text-align:center;padding:6px 10px;font-size:11px;font-weight:700}.healthy-footer{background:var(--green-100);color:var(--green-700)}.junk-footer{color:#b91c1c;background:#fee2e2}.alert-banner{border-radius:var(--radius-lg);text-align:center;background:#fee2e2;margin-bottom:40px;padding:20px 28px;animation:2.5s ease-in-out 1s infinite alertPulse}.alert-banner p{color:var(--gray-800);margin-bottom:6px;font-size:16px;font-weight:600}.alert-sub{color:var(--gray-500)!important;font-size:13px!important;font-weight:400!important}.charts-grid{text-align:left;grid-template-columns:1fr 1fr;gap:20px;margin-top:0;display:grid}@media (width<=640px){.charts-grid{grid-template-columns:1fr}}.chart-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff;padding:20px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}.chart-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px #00000014}.chart-header{align-items:flex-start;gap:10px;margin-bottom:12px;font-size:22px;display:flex}.chart-header span:first-child{transition:transform .6s cubic-bezier(.34,1.56,.64,1);display:inline-block}.chart-card:hover .chart-header span:first-child{transform:rotate(360deg)scale(1.2)}.chart-title{color:var(--gray-900);font-size:14px;font-weight:700}.chart-subtitle{color:var(--gray-400);margin-top:2px;font-size:11px}.chart-legend{color:var(--gray-600);align-items:center;gap:14px;margin-bottom:16px;font-size:12px;font-weight:600;display:flex}.dot{border-radius:50%;width:10px;height:10px;margin-right:4px;display:inline-block}.bar-chart{border-bottom:1.5px solid var(--gray-200);justify-content:space-around;align-items:flex-end;height:110px;margin-bottom:12px;padding-bottom:4px;display:flex}.bar-group{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.bars{align-items:flex-end;gap:4px;display:flex}.bar-wrap{flex-direction:column;align-items:center;gap:2px;display:flex}.bar-label{color:var(--gray-600);font-size:9px;font-weight:700}.bar{border-radius:4px 4px 0 0;width:22px;transition:height 1.2s cubic-bezier(.34,1.56,.64,1);height:0!important}.reveal.revealed .bar{height:var(--target-height)!important}.overweight-bar{background:#f59e0b}.obese-bar{background:#ef4444}.boys-bar{background:#3b82f6}.girls-bar{background:#ec4899}.bar-age{color:var(--gray-500);text-align:center;margin-top:4px;font-size:10px;font-weight:600}.combined-row{justify-content:space-around;gap:6px;margin-bottom:8px;display:flex}.combined-chip{background:var(--yellow-50);border:1px solid var(--yellow-400);border-radius:var(--radius-sm);text-align:center;padding:4px 8px;font-size:10px}.chip-age{color:var(--gray-500);font-size:9px;display:block}.chip-val{color:#b45309;font-size:13px;font-weight:800;display:block}.chip-label{color:var(--gray-400);font-size:9px;display:block}.gender-tabs{justify-content:space-around;gap:6px;margin-bottom:8px;display:flex}.gender-tab{background:var(--gray-100);border-radius:var(--radius-sm);color:var(--gray-600);text-align:center;flex:1;padding:4px 10px;font-size:11px;font-weight:600}.chart-source{color:var(--gray-300);text-align:right;font-size:10px}.solution-section{text-align:center;background:#f0fdf4;padding:72px 32px}.solution-cards{grid-template-columns:repeat(3,1fr);gap:20px;max-width:800px;margin:0 auto 40px;display:grid}@media (width<=640px){.solution-cards{grid-template-columns:1fr}}.solution-card{border:1px solid var(--green-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);opacity:0;background:#fff;padding:28px 20px;transition:opacity .5s,transform .5s,box-shadow .2s;transform:translateY(30px)}.solution-card.revealed{opacity:1;transform:translateY(0)}.solution-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.solution-icon{margin-bottom:12px;font-size:40px}.solution-card:first-child .solution-icon{animation:3s ease-in-out infinite heroFly;display:inline-block}.solution-card:nth-child(2) .solution-icon{animation:2s ease-in-out infinite bentoPop;display:inline-block}.solution-card:nth-child(3) .solution-icon{animation:5s linear infinite starSpin;display:inline-block}.solution-card h3{color:var(--gray-900);margin-bottom:8px;font-size:15px;font-weight:700}.solution-card p{color:var(--gray-500);font-size:13px;line-height:1.5}.btn-adventure{background:var(--green-600);color:#fff;font-family:var(--font-body);border-radius:var(--radius-full);cursor:pointer;border:none;padding:16px 48px;font-size:17px;font-weight:700;transition:background .15s,transform .1s,box-shadow .15s;animation:5s infinite jellyButton;position:relative;overflow:hidden;box-shadow:0 4px 20px #16a34a4d}.btn-adventure:hover{background:var(--green-700);transform:translateY(-2px)}.navbar{border-bottom:1px solid var(--gray-100);z-index:100;background:#fff;justify-content:space-between;align-items:center;height:80px;padding:0 32px;display:flex;position:sticky;top:0}.navbar-logo{font-family:var(--font-display);color:var(--gray-900);cursor:pointer;align-items:center;gap:8px;font-size:20px;display:flex}.navbar-logo-img{object-fit:contain;width:auto;height:80px;display:block}.navbar-nav{align-items:center;gap:8px;display:flex}.nav-link{font-family:var(--font-body);color:var(--gray-600);cursor:pointer;border-radius:var(--radius-full);background:0 0;border:none;padding:8px 14px;font-size:14px;font-weight:600;transition:color .15s,background .15s}.nav-link:hover{color:var(--gray-900);background:var(--gray-100)}.navbar-page-title{color:var(--gray-900);font-size:16px;font-weight:700}.back-btn{font-family:var(--font-body);color:var(--gray-500);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;width:80px;padding:8px 0;font-size:14px;font-weight:600;transition:color .15s;display:flex}.back-btn:hover{color:var(--gray-900)}.btn-my-hero{border-radius:var(--radius-full);font-family:var(--font-body);cursor:pointer;white-space:nowrap;background:0 0;border:2px solid;align-items:center;gap:8px;padding:6px 16px 6px 6px;font-size:14px;font-weight:700;transition:background .18s,transform .15s,box-shadow .18s;display:flex}.btn-my-hero:hover{background:#0000000a;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.btn-my-hero:active{transform:translateY(0)}.my-hero-thumb{object-fit:cover;outline-offset:1px;background:#0000000f;border-radius:50%;outline:2px solid;flex-shrink:0;width:32px;height:32px}.create-hero-page{background:#fff;min-height:100vh}.create-hero-content{max-width:680px;margin:0 auto;padding:40px 24px 60px}.stepper{justify-content:center;align-items:center;gap:0;margin-bottom:40px;display:flex}.stepper-item{align-items:center;display:flex}.step-circle{background:var(--gray-100);width:36px;height:36px;color:var(--gray-400);border:2px solid var(--gray-200);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:all .3s;display:flex}.step-circle.active,.step-circle.done{background:var(--green-600);color:#fff;border-color:var(--green-600)}.step-line{background:var(--gray-200);width:160px;height:2px;transition:background .3s}.step-line.done{background:var(--green-600)}.step-content{flex-direction:column;align-items:center;display:flex}.step-title{font-family:var(--font-display);color:var(--gray-900);text-align:center;margin-bottom:8px;font-size:32px}.step-subtitle{color:var(--gray-400);text-align:center;margin-bottom:32px;font-size:15px}.hero-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-bottom:20px;display:grid}.hero-card{background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;text-align:left;font-family:var(--font-body);padding:22px 18px;transition:all .2s}.hero-card:hover{border-color:var(--gray-300);background:var(--gray-100);transform:translateY(-1px)}.hero-card.selected{box-shadow:var(--shadow-md);transform:translateY(-2px)}.hero-card-emoji{margin-bottom:12px;font-size:36px;display:block}.hero-card-name{color:var(--gray-900);margin-bottom:4px;font-size:15px;font-weight:700;transition:color .2s}.hero-card-power{color:var(--gray-500);font-size:12px}.hero-detail{border-radius:var(--radius-lg);align-items:flex-start;gap:16px;width:100%;margin-bottom:24px;padding:20px 24px;display:flex}.hero-detail-emoji{flex-shrink:0;font-size:44px}.hero-detail-name{margin-bottom:6px;font-size:17px;font-weight:700}.hero-detail-desc{color:var(--gray-600);margin-bottom:12px;font-size:13px;line-height:1.5}.hero-detail-foods{flex-wrap:wrap;gap:8px;display:flex}.food-pill{border:1px solid var(--gray-200);border-radius:var(--radius-full);color:var(--gray-700);background:#fff;padding:4px 12px;font-size:12px;font-weight:600}.evolution-list{flex-direction:column;gap:14px;width:100%;margin-bottom:28px;display:flex}.evolution-card{border-radius:var(--radius-lg);border:1.5px solid var(--gray-200);background:#fff;align-items:center;gap:20px;padding:20px 24px;transition:all .2s;display:flex}.evolution-card.unlocked{box-shadow:var(--shadow-sm)}.evolution-card.locked{opacity:.7}.evo-emoji{text-align:center;flex-shrink:0;width:56px;font-size:40px}.evo-info{flex:1}.evo-stage{color:var(--gray-900);margin-bottom:4px;font-size:16px;font-weight:700;transition:color .2s}.evo-desc{color:var(--gray-500);margin-bottom:8px;font-size:13px}.evo-badge{border-radius:var(--radius-full);padding:3px 12px;font-size:12px;font-weight:700;display:inline-block}.unlocked-badge{border:1px solid}.locked-badge{background:var(--gray-100);color:var(--gray-500)}.summary-content{text-align:center}.summary-emoji{font-size:52px}.hero-stats-card{border-radius:var(--radius-lg);text-align:left;width:100%;max-width:440px;margin-bottom:28px;padding:20px 28px}.stats-header{align-items:center;gap:6px;margin-bottom:16px;font-size:14px;font-weight:700;display:flex}.stats-row{border-bottom:1px solid #0000000f;justify-content:space-between;padding:10px 0;font-size:14px;display:flex}.stats-row:last-child{border-bottom:none}.stats-label{color:var(--gray-500)}.stats-value{color:var(--gray-900);text-align:right;max-width:60%;font-weight:700}.btn-step-next{border-radius:var(--radius-full);width:100%;max-width:440px;padding:15px;font-size:16px;box-shadow:0 4px 16px #16a34a40}.hero-card-img-wrap{justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 12px;display:flex}.hero-card-img{object-fit:contain;width:72px;height:72px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:block}.hero-card:hover .hero-card-img,.hero-card.selected .hero-card-img{transform:scale(1.12)translateY(-3px)}.hero-detail-img{object-fit:contain;flex-shrink:0;width:72px;height:72px}.evo-img-wrap{flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.evo-img{object-fit:contain;width:52px;height:52px;display:block}.evo-img--locked{filter:grayscale()blur(1px);opacity:.35}.summary-hero-img{object-fit:contain;width:80px;height:80px;display:block}.summary-avatar{border-radius:50%;justify-content:center;align-items:center;width:110px;height:110px;margin:0 auto 16px;animation:3s ease-in-out infinite float;display:flex}.summary-hero-name{text-align:center;margin-bottom:4px;font-size:20px;font-weight:800}.summary-hero-power{color:var(--gray-500);text-align:center;margin-bottom:24px;font-size:14px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes guidedGlow{0%,to{transform:scale(1);box-shadow:0 0 #22c55e1f}50%{transform:scale(1.015);box-shadow:0 0 0 14px #22c55e0a}}@keyframes emptyBounce{0%,to{transform:translateY(0)}35%{transform:translateY(-8px)rotate(-4deg)}70%{transform:translateY(2px)rotate(4deg)}}@keyframes addToBentoLaunch{0%{opacity:1;transform:translate(0)scale(1)}60%{opacity:1;transform:translate(90px,70px)scale(.92)rotate(4deg)}to{opacity:0;transform:translate(150px,120px)scale(.75)rotate(8deg)}}@keyframes catchPulse{0%,to{transform:scale(1);box-shadow:0 0 #ff980000}50%{transform:scale(1.01);box-shadow:0 0 0 10px #ff98001f}}@keyframes justAddedPop{0%{opacity:0;transform:translate(24px)scale(.92)}60%{opacity:1;transform:translate(-4px)scale(1.04)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes burstSparkle{0%{opacity:0;transform:translate(0)scale(.4)}20%{opacity:1}62%{opacity:1}to{opacity:0;transform:translate(var(--sparkle-x), var(--sparkle-y)) scale(1.2) rotate(18deg)}}@keyframes celebrationGlowPulse{0%{opacity:0;transform:scale(.55)}28%{opacity:.95;transform:scale(1)}62%{opacity:.85;transform:scale(1.08)}to{opacity:0;transform:scale(1.4)}}@keyframes celebrationBurstWave{0%{opacity:0;transform:scale(.3)rotate(0)}24%{opacity:.85}58%{opacity:.85}to{opacity:0;transform:scale(1.32)rotate(18deg)}}@keyframes scoreFill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes starBlinkIn{0%{opacity:0;transform:scale(0)rotate(-30deg)}70%{opacity:1;transform:scale(1.18)rotate(8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes foodFlyToBento{0%{opacity:0;transform:translate(0)scale(.82)rotate(-8deg)}18%{opacity:1}42%{opacity:1;transform:translateY(-10px)scale(.94)rotate(-4deg)}78%{opacity:1;transform:translate(calc(var(--fly-x) * .82), calc(var(--fly-y) * .82 - 22px)) scale(1.04) rotate(8deg)}to{opacity:0;transform:translate(var(--fly-x), var(--fly-y)) scale(.58) rotate(12deg)}}.bento-page{background:linear-gradient(-45deg,#f6fff4,#fefce8,#eff6ff,#f0fdf4) 0 0/300% 300%;min-height:100vh;padding-bottom:40px;animation:16s infinite gradientShift}.flying-food-layer{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.flying-food-chip{transform-origin:50%;background:linear-gradient(160deg,#fffef2 0%,#f0fff4 100%);border:2px solid #bbf7d0;border-radius:22px;flex-direction:column;justify-content:space-between;gap:8px;width:112px;min-height:80px;padding:12px 10px;animation:1.45s cubic-bezier(.23,1,.32,1) forwards foodFlyToBento;display:flex;position:fixed;box-shadow:0 16px 32px #22c55e2e}.flying-food-name{color:var(--gray-900);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:900;line-height:1.15;display:-webkit-box;overflow:hidden}.flying-food-score{color:#166534;background:#dcfce7;border-radius:999px;align-self:flex-end;padding:4px 8px;font-size:11px;font-weight:900}.bento-container{flex-direction:column;gap:16px;max-width:900px;margin:0 auto;padding:16px;display:flex}.reveal{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transform:translateY(40px)}.reveal.revealed{opacity:1;transform:translateY(0)}.bento-hero{min-height:160px;box-shadow:var(--shadow-md);background:linear-gradient(160deg,#fffde7 0%,#e8f5e9 55%,#e1f5fe 100%) 0 0/220% 220%;border-radius:18px;padding:28px 32px 24px;animation:14s infinite gradientShift;position:relative;overflow:hidden}.bento-blob{filter:blur(50px);opacity:.55;pointer-events:none;border-radius:50%;animation:15s ease-in-out infinite alternate blobFloat;position:absolute}.bento-blob-1{background:#bbf7d0;width:220px;height:220px;top:-80px;left:-60px}.bento-blob-2{background:#fde68a;width:180px;height:180px;animation-delay:-5s;bottom:-60px;right:-30px}.bento-blob-3{background:#bfdbfe;width:160px;height:160px;animation-delay:-9s;top:8%;left:48%}.bento-floating-icon{z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;animation:11s ease-in-out infinite alternate zeroGravity;position:absolute}.hero-badges{z-index:1;flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex;position:relative}.hero-badge{color:#2e7d32;background:#fff;border:1.5px solid #c8e6c9;border-radius:20px;padding:4px 14px;font-size:12px;font-weight:800;animation:3.4s ease-in-out infinite gentleFloat}.hero-badge:nth-child(2){animation-delay:.25s}.hero-badge:nth-child(3){animation-delay:.5s}.bento-hero h1{font-family:var(--font-display);color:var(--gray-900);z-index:1;max-width:480px;margin-bottom:6px;font-size:26px;font-weight:900;animation:.75s both heroFadeUp;position:relative}.bento-hero p{color:var(--gray-600);z-index:1;max-width:420px;font-size:13px;font-weight:600;line-height:1.6;animation:.75s .14s both heroFadeUp;position:relative}.hero-deco1{font-size:70px;line-height:1;position:absolute;top:18px;right:32px}.hero-deco2{opacity:.7;font-size:48px;position:absolute;bottom:12px;right:140px}.bento-card{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:24px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}.bento-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.bento-card:nth-of-type(2){transition-delay:60ms}.bento-card:nth-of-type(3){transition-delay:.12s}.card-title{color:#aaa;text-transform:uppercase;letter-spacing:.8px;align-items:center;gap:7px;margin-bottom:16px;font-size:12px;font-weight:900;display:flex}.upload-area{text-align:center;cursor:pointer;background:#f9fff9;border:3px dashed #c8e6c9;border-radius:16px;padding:36px 24px;transition:all .2s;position:relative;overflow:hidden}.upload-area:hover{border-color:var(--green-500);background:#f1f8e9;transform:translateY(-2px);box-shadow:0 10px 24px #22c55e14}.cam-icon-wrap{background:#e8f5e9;border-radius:22px;justify-content:center;align-items:center;width:88px;height:88px;margin:0 auto 16px;animation:2.5s ease-in-out infinite pulse-ring;display:flex}@keyframes pulse-ring{0%,to{box-shadow:0 0 #4caf504d}50%{box-shadow:0 0 0 14px #4caf5000}}.cam-svg{width:44px;height:44px}.upload-title{font-family:var(--font-display);color:var(--gray-900);margin-bottom:6px;font-size:20px;font-weight:900}.upload-sub{color:var(--gray-500);margin-bottom:18px;font-size:14px;font-weight:600;line-height:1.5}.upload-cta{background:var(--green-500);color:#fff;font-size:16px;font-weight:800;font-family:var(--font-body);cursor:pointer;border:none;border-radius:12px;padding:13px 32px;transition:all .2s;display:inline-block;position:relative;overflow:hidden}.upload-cta:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:0 6px 20px #4caf504d}.flow-steps{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:24px;display:flex}.flow-step{color:#2e7d32;background:#fff;border:1.5px solid #c8e6c9;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:700;animation:3s ease-in-out infinite gentleFloat}.flow-step:nth-child(3),.flow-step:nth-child(7),.flow-step:nth-child(11){animation-delay:.3s}.flow-step:nth-child(5),.flow-step:nth-child(9){animation-delay:.6s}.flow-arrow{color:#ccc;font-size:15px;font-weight:900}.scanned-empty{text-align:center;color:#ccc;background:#fafafa;border:1.5px dashed #eee;border-radius:12px;padding:36px 20px;font-size:14px;font-weight:700}.scanned-empty-icon{opacity:.4;margin-bottom:10px;font-size:36px;animation:2.8s ease-in-out infinite emptyBounce;display:inline-block}.tip-row{color:#2e7d32;background:#f1f8e9;border:1px solid #c8e6c9;border-radius:10px;align-items:center;gap:8px;margin-bottom:14px;padding:12px 16px;font-size:13px;font-weight:700;line-height:1.5;display:flex}.tip-row-guided{animation:2.8s ease-in-out infinite gentleFloat}.submit-btn{color:#94a3b8;width:100%;font-family:var(--font-body);cursor:not-allowed;background:#e2e8f0;border:none;border-radius:14px;padding:16px;font-size:18px;font-weight:900;transition:all .2s;position:relative;overflow:hidden}.submit-btn.ready{background:var(--green-500);color:#fff;cursor:pointer;box-shadow:0 4px 16px #16a34a4d}.submit-btn.ready:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:0 6px 20px #16a34a66}.preview-area{background:#fafafa;border:1.5px dashed #eee;border-radius:16px;flex-direction:column;align-items:center;gap:20px;padding:20px;display:flex}.preview-img{object-fit:contain;background:#fff;border:1px solid #e8e8e8;border-radius:12px;width:100%;max-height:360px}.preview-actions{gap:12px;width:100%;display:flex}.preview-actions button{flex:1}.btn-secondary{color:var(--gray-600);font-weight:800;font-family:var(--font-body);cursor:pointer;background:#f8fafc;border:1.5px solid #d8dee8;border-radius:14px;padding:13px 20px;transition:all .2s;box-shadow:0 6px 16px #94a3b814}.btn-secondary:hover{background:#fff;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 10px 22px #94a3b829}.loading-indicator{color:var(--gray-600);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px 0;font-size:15px;font-weight:700;display:flex}.custom-animated-svg{justify-content:center;align-items:center;width:150px;height:150px;display:flex}.custom-animated-svg svg{width:100%;height:100%}.upload-area-compact{cursor:pointer;background:#f9fff9;border:2px dashed #c8e6c9;border-radius:14px;align-items:center;gap:16px;padding:16px 20px;transition:all .2s;display:flex}.upload-area-compact:hover{border-color:var(--green-500);background:#f1f8e9;transform:translateY(-2px)}.cam-icon-sm{background:#e8f5e9;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.upload-compact-text strong{color:#2e7d32;margin-bottom:2px;font-size:15px;font-weight:900;display:block}.upload-compact-text span{color:var(--gray-500);font-size:12px;font-weight:600}.upload-compact-btn{background:var(--green-500);color:#fff;font-size:13px;font-weight:800;font-family:var(--font-body);cursor:pointer;white-space:nowrap;border:none;border-radius:10px;flex-shrink:0;margin-left:auto;padding:10px 20px}.result-card{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #e8e8e8;border-radius:16px;margin-top:14px;animation:.7s cubic-bezier(.16,1,.3,1) both fadeInUp;overflow:hidden}.result-top-bar.orange{background:linear-gradient(90deg,#ff9800,#ffc107);height:8px}.result-body{padding:18px 20px}.result-header{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px;display:flex}.scan-done-tag{text-transform:uppercase;letter-spacing:1px;align-items:center;gap:6px;margin-bottom:7px;font-size:10px;font-weight:900;display:flex}.check-dot{border-radius:50%;flex-shrink:0;width:14px;height:14px}.result-food-name{color:var(--gray-900);margin-bottom:8px;font-size:26px;font-weight:900;line-height:1.1}.result-badges{flex-wrap:wrap;gap:6px;display:flex}.res-pill{border-radius:20px;padding:4px 12px;font-size:11px;font-weight:800}.rp-orange{color:#e65100;background:#fff3e0;border:1.5px solid #ffcc80}.rp-gray{color:#555;background:#f3f4f6;border:1.5px solid #e0e0e0}.rp-blue{color:#1565c0;background:#e3f2fd;border:1.5px solid #bbdefb}.health-ring{background:#fffde7;border:6px solid #ff9800;border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:70px;height:70px;display:flex}.ring-num{color:#e65100;font-size:20px;font-weight:900;line-height:1}.ring-lbl{color:#ff9800;text-transform:uppercase;letter-spacing:.3px;font-size:8px;font-weight:900}.nutr-pills{flex-wrap:wrap;gap:5px;margin-bottom:12px;display:flex}.nutr-pill{border-radius:8px;padding:4px 10px;font-size:11px;font-weight:700}.np-orange{color:#e65100;background:#fff3e0}.np-blue{color:#1565c0;background:#e3f2fd}.np-green{color:#2e7d32;background:#e8f5e9}.np-gray{color:#666;background:#f3f4f6}.quote-block{background:#fff9e6;border-left:4px solid #ff9800;border-radius:12px;margin-bottom:14px;padding:12px 16px}.quote-label{color:#ff9800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;font-size:10px;font-weight:900}.quote-text{color:#e65100;font-size:13px;font-weight:600;line-height:1.6}.result-btns{gap:8px;display:flex}.btn-add{background:var(--green-500);color:#fff;font-size:13px;font-weight:800;font-family:var(--font-body);cursor:pointer;border:none;border-radius:10px;flex:1;padding:11px 20px;transition:transform .2s,box-shadow .2s}.btn-add:hover{transform:translateY(-2px);box-shadow:0 8px 20px #22c55e38}.btn-add.is-adding{animation:.7s ease-in-out guidedGlow}.btn-retry{color:var(--gray-500);font-size:12px;font-weight:700;font-family:var(--font-body);cursor:pointer;background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;padding:11px 14px}.scanned-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:stretch;gap:12px;margin-bottom:14px;display:grid;position:relative}.scanned-list.catching-food{animation:.85s ease-in-out catchPulse}.scanned-item{background:linear-gradient(160deg,#f9fff9 0%,#f2fbf2 100%);border:1px solid #c8e6c9;border-radius:22px;flex-direction:column;justify-content:space-between;gap:12px;min-height:118px;padding:14px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.scanned-item:hover{transform:translateY(-4px)rotate(-1deg);box-shadow:0 12px 24px #22c55e1f}.scanned-item.pending{background:linear-gradient(160deg,#fffef0 0%,#fff6dd 100%);border-color:#ffcc80}.scanned-item.just-added{animation:.62s cubic-bezier(.34,1.56,.64,1) justAddedPop,1.2s ease-out catchPulse}.scanned-item-top{align-items:flex-start;gap:8px;display:flex}.scanned-num{background:var(--green-500);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:12px;font-weight:900;display:flex}.scanned-num.orange{background:#ff9800}.scanned-info{flex:1;min-width:0}.scanned-name{color:var(--gray-900);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:17px;font-weight:900;line-height:1.1;display:-webkit-box;overflow:hidden}.scanned-name.orange{color:#e65100}.scanned-meta{color:var(--gray-400);margin-top:6px;font-size:11px;font-weight:600}.scanned-score{border-radius:999px;flex-shrink:0;margin-left:auto;padding:6px 10px;font-size:13px;font-weight:900}.ss-green{color:#2e7d32;background:#e8f5e9}.ss-orange{color:#e65100;background:#fff3e0}.scanned-x{color:#bdbdbd;cursor:pointer;border-radius:999px;margin-left:auto;padding:4px 7px;font-size:12px;font-weight:900;line-height:1}.scanned-x:hover{color:#f44336;background:#ffebee}.add-pill{color:#fff;font-size:11px;font-weight:800;font-family:var(--font-body);cursor:pointer;background:#ff9800;border:none;border-radius:8px;flex-shrink:0;margin-left:8px;padding:5px 14px}@keyframes fireworkPop{0%{opacity:0;transform:scale(0)rotate(-30deg)}40%{opacity:1;text-shadow:0 0 20px #ffd54f,0 0 40px #ff9800;transform:scale(1.5)rotate(15deg)}60%{transform:scale(.9)rotate(-5deg)}80%{transform:scale(1.1)rotate(5deg)}to{opacity:1;text-shadow:0 0 8px #ffd54f66;transform:scale(1)rotate(0)}}@keyframes rewardBoxDrop{0%{opacity:0;transform:translateY(-40px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.score-row{background:#f9fff9;border:1.5px solid #c8e6c9;border-radius:14px;align-items:center;gap:16px;margin-bottom:14px;padding:16px 20px;display:flex;position:relative;overflow:hidden}.score-progress-bar{transform-origin:0;background:linear-gradient(90deg,#bbf7d01a,#86efac52,#bbf7d01a);animation:.8s forwards scoreFill;position:absolute;inset:0;transform:scaleX(0)}.score-left{text-align:center;z-index:1;flex-shrink:0;position:relative}.score-big-num{color:var(--green-500);opacity:0;font-size:56px;font-weight:900;line-height:1;animation:.8s cubic-bezier(.175,.885,.32,1.275) forwards fireworkPop;display:inline-block}.score-lbl{color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:800}.score-right{z-index:1;flex:1;position:relative}.score-stars{letter-spacing:3px;gap:4px;min-height:28px;margin-bottom:4px;font-size:22px;display:flex}.score-star{opacity:0;animation:.55s cubic-bezier(.34,1.56,.64,1) forwards starBlinkIn;display:inline-block}.score-msg{color:#2e7d32;font-size:14px;font-weight:700;line-height:1.5}.score-sub{color:var(--gray-500);margin-top:2px;font-size:12px;font-weight:600}.feedback-story-box{box-shadow:var(--shadow-md);background:#fffde7;border:2px solid #ffd54f;border-radius:16px;margin-bottom:14px;padding:24px;animation:.6s cubic-bezier(.34,1.56,.64,1) forwards rewardBoxDrop;position:relative;overflow:hidden}.mini-celebration{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.mini-celebration-glow{background:radial-gradient(circle,#ffd60a6b 0%,#ffb34742 35%,#fff0 72%);border-radius:50%;width:260px;height:260px;animation:1.65s ease-out forwards celebrationGlowPulse;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.mini-celebration-glow.glow-secondary{background:radial-gradient(circle,#86efac40 0%,#60a5fa2e 38%,#fff0 74%);width:420px;height:220px;animation-delay:.12s;top:56%}.mini-celebration-burst{filter:blur(.3px);mix-blend-mode:screen;opacity:0;background:radial-gradient(circle,#fffffff2 0 12%,#0000 13% 100%),repeating-conic-gradient(#ffd700f2 0deg 12deg,#ff9900a6 12deg 20deg,#0000 20deg 30deg);border-radius:50%;width:170px;height:170px;animation:1.35s ease-out forwards celebrationBurstWave;position:absolute}.mini-celebration-burst.burst-left{top:42%;left:12%}.mini-celebration-burst.burst-center{animation-delay:80ms;top:50%;left:50%;transform:translate(-50%,-50%)}.mini-celebration-burst.burst-right{animation-delay:.16s;top:46%;right:10%}.celebration-particle{opacity:0;font-size:24px;animation:1.5s ease-out forwards burstSparkle;position:absolute;top:55%;left:50%}.celebration-particle.p1{--sparkle-x:-160px;--sparkle-y:-86px;animation-delay:0s}.celebration-particle.p2{--sparkle-x:-90px;--sparkle-y:-118px;animation-delay:80ms}.celebration-particle.p3{--sparkle-x:-26px;--sparkle-y:-132px;animation-delay:.16s}.celebration-particle.p4{--sparkle-x:44px;--sparkle-y:-128px;animation-delay:.24s}.celebration-particle.p5{--sparkle-x:118px;--sparkle-y:-102px;animation-delay:.32s}.celebration-particle.p6{--sparkle-x:166px;--sparkle-y:-38px;animation-delay:.4s}.celebration-particle.p7{--sparkle-x:152px;--sparkle-y:34px;animation-delay:.48s}.celebration-particle.p8{--sparkle-x:94px;--sparkle-y:84px;animation-delay:.56s}.celebration-particle.p9{--sparkle-x:10px;--sparkle-y:108px;animation-delay:.64s}.celebration-particle.p10{--sparkle-x:-76px;--sparkle-y:92px;animation-delay:.36s}.celebration-particle.p11{--sparkle-x:-148px;--sparkle-y:36px;animation-delay:.44s}.celebration-particle.p12{--sparkle-x:-184px;--sparkle-y:-18px;animation-delay:.52s}.feedback-story-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.story-mascot{font-size:36px;animation:3s ease-in-out infinite float}.story-title{font-family:var(--font-display);color:#f57f17;font-size:20px;font-weight:900}.story-content{color:#795548;background:#fff;border:1.5px dashed #ffd54f;border-radius:12px;padding:16px;font-size:15px;font-weight:700;line-height:1.6}.btn-claim-points{color:#fff;width:100%;font-size:16px;font-weight:900;font-family:var(--font-body);cursor:pointer;background:linear-gradient(135deg,#ff9800,#f44336);border:none;border-radius:14px;margin-top:16px;padding:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 16px #f443364d}.btn-claim-points:hover{transform:translateY(-2px);box-shadow:0 8px 24px #f4433666}.footer{text-align:center;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffb8;border:1px solid #fffc;border-radius:18px;padding:22px 20px}.footer-badge{color:#166534;background:#f0fdf4;border:1px solid #c8e6c9;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;animation:3.5s ease-in-out infinite gentleFloat}.footer-note,.footer-copy{color:var(--gray-500);margin:0;font-size:13px;font-weight:600}.footer-copy{margin-top:6px;font-size:12px}@media (width<=640px){.bento-container{padding:12px}.bento-hero{padding:24px 20px 22px}.hero-deco1{font-size:52px;top:18px;right:18px}.hero-deco2{font-size:38px;bottom:14px;right:90px}.preview-actions,.result-btns,.score-row{flex-direction:column}.upload-area-compact{flex-wrap:wrap}.upload-compact-btn{width:100%;margin-left:0}.scanned-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=420px){.scanned-list{grid-template-columns:1fr}}.profile-page{background:#fff;min-height:100vh;position:relative;overflow-x:hidden}.profile-bg{z-index:0;opacity:.5;pointer-events:none;position:fixed;inset:0}.profile-container{z-index:1;max-width:760px;margin:0 auto;padding:32px 24px 80px;position:relative}.profile-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.profile-label{letter-spacing:.12em;color:var(--gray-400);text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:800}.profile-hero-name{font-family:var(--font-display);margin-bottom:6px;font-size:clamp(28px,5vw,44px);line-height:1.1}.profile-superpower{color:var(--gray-500);font-size:14px;font-weight:600}.xp-badge{border-radius:var(--radius-xl);text-align:center;box-shadow:0 6px 20px var(--hero-glow);flex-shrink:0;padding:14px 22px}.xp-badge-value{font-family:var(--font-display);color:#fff;font-size:28px;line-height:1}.xp-badge-label{letter-spacing:.1em;color:#ffffffbf;margin-top:3px;font-size:10px;font-weight:800}.profile-main-card{border-radius:var(--radius-xl);border:1.5px solid var(--gray-100);box-shadow:var(--shadow-md);background:#fff;margin-bottom:20px;overflow:hidden}.stage-tabs{border-bottom:1.5px solid var(--gray-100);display:flex}.stage-tab{font-family:var(--font-body);cursor:pointer;background:0 0;border:none;border-bottom:2.5px solid #0000;flex-direction:column;flex:1;align-items:center;gap:2px;margin-bottom:-1.5px;padding:14px 12px;transition:all .2s;display:flex;position:relative}.stage-tab:hover:not(.locked){background:var(--gray-50)}.stage-tab.active{border-bottom-color:var(--hero-primary);background:var(--gray-50)}.stage-tab.locked{opacity:.5;cursor:not-allowed}.stage-tab-num{letter-spacing:.06em;color:var(--gray-400);text-transform:uppercase;font-size:10px;font-weight:700}.stage-tab-name{color:var(--gray-700);font-size:13px;font-weight:700}.stage-tab.active .stage-tab-name{color:var(--hero-primary)}.stage-lock{margin-top:1px;font-size:11px}.stage-current-dot{border-radius:50%;width:7px;height:7px;animation:2s infinite pulse-dot;position:absolute;top:8px;right:10px}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.hero-display-area{align-items:center;gap:32px;min-height:220px;padding:36px 32px;display:flex;position:relative}@media (width<=540px){.hero-display-area{text-align:center;flex-direction:column;align-items:center;gap:20px;padding:28px 20px}}.hero-glow{filter:blur(50px);pointer-events:none;opacity:.6;border-radius:50%;width:200px;height:200px;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.hero-illustration{z-index:1;flex-shrink:0;justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.hero-illustration.locked-hero{opacity:.4;filter:grayscale()}.animate-float{animation:3s ease-in-out infinite float-hero}@keyframes float-hero{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-emoji-large{z-index:2;filter:drop-shadow(0 8px 20px var(--hero-glow));font-size:80px;line-height:1;position:relative}.hero-rings{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.hero-ring{opacity:.25;border:1.5px solid;border-radius:50%;animation:3s ease-in-out infinite ring-pulse;position:absolute}@keyframes ring-pulse{0%,to{opacity:.25;transform:scale(1)}50%{opacity:.12;transform:scale(1.05)}}.hero-info-panel{z-index:1;flex:1}.hero-stage-badge{border-radius:var(--radius-full);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;padding:4px 12px;font-size:11px;font-weight:800;display:inline-block}.hero-stage-name{font-family:var(--font-display);color:var(--gray-900);margin-bottom:8px;font-size:26px;line-height:1.2}.hero-stage-desc{color:var(--gray-500);margin-bottom:16px;font-size:14px;line-height:1.6}.hero-foods-label{letter-spacing:.08em;color:var(--gray-400);text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:700}.hero-foods-list{flex-wrap:wrap;gap:6px;display:flex}.food-chip{border-radius:var(--radius-full);padding:5px 12px;font-size:12px;font-weight:700}.xp-progress-card{border-radius:var(--radius-xl);border:1.5px solid var(--gray-100);box-shadow:var(--shadow-md);background:#fff;margin-bottom:20px;padding:24px 28px}.xp-progress-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.xp-progress-title{letter-spacing:.1em;color:var(--gray-400);text-transform:uppercase;margin-bottom:4px;font-size:11px;font-weight:800}.xp-progress-subtitle{color:var(--gray-700);font-size:14px;font-weight:700}.xp-stage-indicators{gap:8px;display:flex}.xp-stage-dot{border:2px solid var(--gray-200);background:var(--gray-50);width:34px;height:34px;color:var(--gray-400);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:800;transition:all .3s;display:flex}.xp-stage-dot.unlocked{color:#fff;box-shadow:0 3px 10px var(--hero-glow);border-color:#0000}.xp-bar-track{background:var(--gray-100);border-radius:var(--radius-full);height:20px;margin-bottom:12px;position:relative;overflow:visible}.xp-bar-fill{border-radius:var(--radius-full);min-width:20px;height:100%;transition:width .8s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.xp-bar-shine{border-radius:var(--radius-full);background:#ffffff59;height:4px;position:absolute;top:3px;left:8px;right:8px}.xp-bar-marker{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:-4px;bottom:-4px;transform:translate(-50%)}.xp-marker-line{border-radius:var(--radius-full);flex:1;width:2px}.xp-marker-label{letter-spacing:.05em;margin-top:4px;font-size:10px;font-weight:800}.xp-bar-stages{justify-content:space-between;margin-top:8px;display:flex}.xp-stage-label{color:var(--gray-400);align-items:center;gap:5px;font-size:12px;font-weight:700;display:flex}.xp-stage-label.current{font-weight:800}.xp-stage-emoji{font-size:16px}.xp-current-tag{color:#fff;letter-spacing:.08em;border-radius:var(--radius-full);text-transform:uppercase;padding:2px 7px;font-size:9px;font-weight:800}.stages-overview{border-radius:var(--radius-xl);border:1.5px solid var(--gray-100);box-shadow:var(--shadow-md);background:#fff;margin-bottom:28px;padding:24px 28px}.stages-overview-title{letter-spacing:.1em;color:var(--gray-400);text-transform:uppercase;margin-bottom:16px;font-size:11px;font-weight:800}.stages-overview-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}@media (width<=480px){.stages-overview-grid{grid-template-columns:1fr}}.stage-overview-card{border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;background:var(--gray-50);padding:16px 14px;transition:all .2s;position:relative}.stage-overview-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.stage-overview-card.locked{opacity:.5}.stage-overview-card.current{box-shadow:0 4px 14px var(--hero-glow)}.stage-overview-emoji{margin-bottom:10px;font-size:36px;display:block}.stage-overview-num{letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);margin-bottom:3px;font-size:11px;font-weight:800}.stage-overview-name{color:var(--gray-800);margin-bottom:4px;font-size:13px;font-weight:700}.stage-overview-req{color:var(--gray-400);font-size:11px;font-weight:600}.stage-overview-current{color:#fff;letter-spacing:.08em;border-radius:var(--radius-full);padding:3px 8px;font-size:9px;font-weight:800;position:absolute;top:10px;right:10px}.profile-cta{text-align:center}.profile-cta-btn{border-radius:var(--radius-full);margin-bottom:10px;padding:16px 32px;font-size:16px;box-shadow:0 6px 20px #16a34a4d}.profile-cta-hint{color:var(--gray-400);font-size:13px}.hero-stage-img{object-fit:contain;z-index:2;width:140px;height:140px;display:block;position:relative}.hero-stage-img--locked{filter:grayscale()blur(2px);opacity:.35}.btn-change-hero{border-radius:var(--radius-full);border:2px solid var(--gray-200);font-family:var(--font-body);color:var(--gray-500);cursor:pointer;background:#fff;align-items:center;gap:6px;margin-top:12px;padding:10px 24px;font-size:14px;font-weight:700;transition:border-color .18s,color .18s,transform .15s;display:inline-flex}.btn-change-hero:hover{border-color:var(--gray-400);color:var(--gray-700);transform:translateY(-1px)}.stage-overview-thumb-wrap{justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 10px;display:flex}.stage-overview-thumb{object-fit:contain;width:60px;height:60px;display:block}.stage-overview-thumb--locked{filter:grayscale()blur(1.5px);opacity:.35}:root{--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-400:#facc15;--red-400:#f87171;--red-500:#ef4444;--orange-400:#fb923c;--orange-500:#f97316;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--font-body:"Nunito", sans-serif;--font-display:"Fredoka One", cursive;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--gray-700);-webkit-font-smoothing:antialiased;background:#fff;line-height:1.6}.app{min-height:100vh}.btn-primary{background:var(--green-600);color:#fff;font-family:var(--font-body);border-radius:var(--radius-full);cursor:pointer;border:none;padding:10px 22px;font-size:14px;font-weight:700;transition:background .15s,transform .1s}.btn-primary:hover{background:var(--green-700);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{background:var(--gray-300);color:var(--gray-500);cursor:not-allowed;transform:none}.btn-secondary{color:var(--gray-700);border:1.5px solid var(--gray-200);font-family:var(--font-body);border-radius:var(--radius-full);cursor:pointer;background:#fff;padding:10px 22px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300)}.footer{background:var(--gray-50);border-top:1px solid var(--gray-100);text-align:center;padding:28px 32px}.footer-badges{flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:12px;display:flex}.footer-badge{color:var(--gray-500);align-items:center;gap:5px;font-size:13px;font-weight:600;display:flex}.footer-note{color:var(--gray-400);margin-bottom:6px;font-size:12px}.footer-copy{color:var(--gray-400);font-size:12px}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animate-fade-in-up{animation:.5s forwards fadeInUp}.animate-scale-in{animation:.3s forwards scaleIn}