@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradientBG{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}.animate-fadeInUp,.visible .hero-title{animation:.8s forwards fadeInUp}.visible .hero-subtitle{animation:.8s .2s forwards fadeInUp;opacity:0}.visible .hero-cta-group{animation:.8s .4s forwards fadeInUp;opacity:0}.visible .feature-item{opacity:0;animation:.6s forwards fadeInUp}.visible .feature-item:first-child{animation-delay:.2s}.visible .feature-item:nth-child(2){animation-delay:.3s}.visible .feature-item:nth-child(3){animation-delay:.4s}.visible .feature-item:nth-child(4){animation-delay:.5s}.visible .timeline-item{opacity:0;animation:.6s forwards slideInLeft}.timeline-item:nth-child(odd){animation-name:slideInRight}.visible .timeline-item:first-child{animation-delay:.1s}.visible .timeline-item:nth-child(2){animation-delay:.2s}.visible .timeline-item:nth-child(3){animation-delay:.3s}.visible .timeline-item:nth-child(4){animation-delay:.4s}.visible .timeline-item:nth-child(5){animation-delay:.5s}.visible .timeline-item:nth-child(6){animation-delay:.6s}.visible .timeline-item:nth-child(7){animation-delay:.7s}.visible .timeline-item:nth-child(8){animation-delay:.8s}.visible .timeline-item:nth-child(9){animation-delay:.9s}.visible .timeline-item:nth-child(10){animation-delay:1s}@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(99,102,241,.3)}50%{box-shadow:0 0 40px rgba(99,102,241,.6)}}@keyframes goldGlow{0%,100%{box-shadow:0 0 20px rgba(234,179,8,.3)}50%{box-shadow:0 0 40px rgba(234,179,8,.6)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}@keyframes bounceSubtle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shine{0%{left:-100%}100%{left:100%}}@keyframes ripple{0%{transform:scale(.8);opacity:1}100%{transform:scale(2);opacity:0}}@keyframes rotateGlow{0%{transform:rotate(0);filter:hue-rotate(0deg)}100%{transform:rotate(360deg);filter:hue-rotate(360deg)}}@keyframes slideFadeIn{0%{opacity:0;transform:translateY(30px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.hover-lift{transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1)}.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px -15px rgba(0,0,0,.15)}.stagger-fade>*{animation:.5s ease-out backwards fadeInUp}.stagger-fade>:first-child{animation-delay:50ms}.stagger-fade>:nth-child(2){animation-delay:.1s}.stagger-fade>:nth-child(3){animation-delay:.15s}.stagger-fade>:nth-child(4){animation-delay:.2s}.stagger-fade>:nth-child(5){animation-delay:.25s}.stagger-fade>:nth-child(6){animation-delay:.3s}.scale-hover{transition:transform .25s}.scale-hover:hover{transform:scale(1.05)}.press-effect{transition:transform .15s}.press-effect:active{transform:scale(.97)}@keyframes skeleton{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}.skeleton-loading{background:linear-gradient(90deg,var(--bg-element) 25%,var(--bg-card) 50%,var(--bg-element) 75%);background-size:200px 100%;animation:1.5s ease-in-out infinite skeleton}@keyframes successPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 15px rgba(16,185,129,0)}}@keyframes sparkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}25%{opacity:.8;transform:scale(1.1) rotate(-5deg)}50%{opacity:1;transform:scale(1.15) rotate(5deg)}75%{opacity:.9;transform:scale(1.05) rotate(-3deg)}}.sparkle-hover:hover{animation:1s ease-in-out infinite sparkle}.smooth-all{transition:.3s cubic-bezier(.4, 0, .2, 1)}.grade-celebration-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);backdrop-filter:blur(15px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:.4s ease-out fadeIn}.grade-celebration-modal{background:linear-gradient(165deg,#1e1e2e 0,#252535 50%,#1e1e2e 100%);border-radius:32px;padding:60px 50px;text-align:center;position:relative;overflow:hidden;max-width:520px;width:92%;box-shadow:0 40px 100px -25px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08),0 0 80px rgba(99,102,241,.15);animation:.7s cubic-bezier(.34,1.56,.64,1) gradeModalAppear}@keyframes gradeModalAppear{0%{opacity:0;transform:scale(.4) translateY(80px) rotate(-5deg)}60%{transform:scale(1.05) translateY(-10px) rotate(1deg)}100%{opacity:1;transform:scale(1) translateY(0) rotate(0)}}.grade-celebration-modal::before{content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:conic-gradient(from 0deg,transparent 0deg,rgba(99,102,241,.12) 45deg,transparent 90deg,rgba(236,72,153,.12) 135deg,transparent 180deg,rgba(16,185,129,.12) 225deg,transparent 270deg,rgba(245,158,11,.12) 315deg,transparent 360deg);animation:10s linear infinite rotateBg;z-index:-1}.grade-celebration-modal::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(99,102,241,.1) 0,transparent 50%);pointer-events:none}@keyframes rotateBg{100%{transform:rotate(360deg)}}.grade-celebration-badge{font-size:6rem;margin-bottom:24px;animation:.8s ease-out .3s both gradeBounce,3s ease-in-out 1s infinite gradeFloat;filter:drop-shadow(0 0 40px currentColor);position:relative;z-index:1}@keyframes gradeBounce{0%{transform:scale(0) rotate(-30deg);opacity:0}40%{transform:scale(1.4) rotate(15deg)}60%{transform:scale(.85) rotate(-8deg)}80%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes gradeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes gradeGlow{0%,100%{filter:drop-shadow(0 0 25px currentColor)}50%{filter:drop-shadow(0 0 50px currentColor) drop-shadow(0 0 80px currentColor)}}.grade-celebration-title{font-size:1.4rem;color:#94a3b8;margin-bottom:12px;animation:.5s ease-out .5s both fadeInUp;font-weight:600;letter-spacing:.5px}.grade-celebration-name{font-size:3rem;font-weight:900;color:var(--grade-color,#3b82f6);text-shadow:0 0 30px currentColor,0 4px 20px rgba(0,0,0,.3);animation:.6s ease-out .6s both gradeNameAppear;margin-bottom:16px;letter-spacing:-.5px;position:relative}@keyframes gradeNameAppear{0%{opacity:0;transform:translateY(20px) scale(.9);letter-spacing:10px}100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:-.5px}}@keyframes gradientShift{0%,100%{background-position:0 center}50%{background-position:100% center}}.grade-celebration-description{color:#94a3b8;font-size:1.1rem;margin-bottom:35px;animation:.5s ease-out .7s both fadeInUp;line-height:1.6;max-width:90%;margin-left:auto;margin-right:auto}.grade-celebration-progress{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:35px;animation:.5s ease-out .8s both fadeInUp;padding:20px 30px;background:rgba(0,0,0,.15);border-radius:20px;border:1px solid rgba(255,255,255,.05)}.grade-old{display:flex;flex-direction:column;align-items:center;opacity:.5;transition:opacity .3s}.grade-old:hover{opacity:.7}.grade-old-icon{font-size:2.2rem;margin-bottom:6px}.grade-old-name{font-size:.9rem;color:#64748b;font-weight:500}.grade-arrow{font-size:2.5rem;color:#3b82f6;animation:1.2s ease-in-out infinite arrowPulse;text-shadow:0 0 20px currentColor}@keyframes arrowPulse{0%,100%{transform:translateX(0) scale(1);opacity:1}50%{transform:translateX(8px) scale(1.1);opacity:.8}}.grade-new{display:flex;flex-direction:column;align-items:center}.grade-new-icon{font-size:3rem;margin-bottom:6px;animation:2s ease-in-out infinite gradeGlow}.grade-new-name{font-size:1.1rem;font-weight:700;color:#f1f5f9}.grade-celebration-btn{background:linear-gradient(135deg,#3b82f6 0,#60a5fa 50%,#ec4899 100%)!important;color:#fff!important;border:none;padding:18px 50px;border-radius:16px;font-size:1.15rem;font-weight:700;cursor:pointer;transition:.3s;animation:.5s ease-out .9s both fadeInUp,3s ease-in-out infinite btnShine;position:relative;overflow:hidden}@keyframes btnShine{0%,100%{background-position:0 center}50%{background-position:100% center}}.grade-celebration-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.grade-celebration-btn:hover::before{left:100%}.grade-celebration-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 15px 40px -10px rgba(99,102,241,.5),0 0 30px rgba(59,130,246,.3)}.grade-celebration-btn:active{transform:translateY(-2px) scale(.98)}[data-theme=light] .grade-celebration-overlay{background:rgba(255,255,255,.85)}[data-theme=light] .grade-celebration-modal{background:linear-gradient(165deg,#fff 0,#f8fafc 50%,#fff 100%);box-shadow:0 40px 100px -25px rgba(0,0,0,.2),0 0 0 1px rgba(99,102,241,.15),0 0 80px rgba(99,102,241,.1)}[data-theme=light] .grade-celebration-title{color:#475569}[data-theme=light] .grade-celebration-description{color:#64748b}[data-theme=light] .grade-old-name{color:#94a3b8}[data-theme=light] .grade-new-name{color:#1e293b}[data-theme=light] .grade-celebration-progress{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.1)}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10001;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;opacity:0;animation:3s ease-out forwards confettiFall}@keyframes confettiFall{0%{opacity:1;transform:translateY(-100vh) rotate(0)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}@media (max-width:600px){.grade-celebration-modal{padding:40px 25px;border-radius:24px;width:95%;max-width:none}.grade-celebration-badge{font-size:4.5rem;margin-bottom:18px}.grade-celebration-title{font-size:1.2rem}.grade-celebration-name{font-size:2.2rem}.grade-celebration-description{font-size:1rem;margin-bottom:25px}.grade-celebration-progress{gap:16px;padding:16px 20px;flex-wrap:wrap}.grade-old-icon{font-size:1.8rem}.grade-new-icon{font-size:2.5rem}.grade-arrow{font-size:2rem}.grade-celebration-btn{padding:15px 35px;font-size:1rem;width:100%}}.badge-notification{position:fixed;bottom:20px;right:20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);z-index:10000;max-width:380px;opacity:0;transform:translateX(100%) scale(.9);transition:.4s cubic-bezier(.34, 1.56, .64, 1);overflow:hidden}.badge-notification.show{opacity:1;transform:translateX(0) scale(1)}.badge-notif-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1;animation:2s ease-in-out infinite badgeGlowPulse}@keyframes badgeGlowPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.badge-notif-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:.6s ease-out .3s both badgeIconBounce}.badge-notif-icon i{width:28px;height:28px;color:#fff}@keyframes badgeIconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}.badge-notif-content{flex:1;min-width:0}.badge-notif-title{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.badge-notif-name{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:2px}.badge-notif-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.3}.badge-notif-rarity{position:absolute;top:8px;right:40px;font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.5px}.badge-notif-rarity.common{background:rgba(148,163,184,.2);color:#94a3b8}.badge-notif-rarity.uncommon{background:rgba(34,197,94,.2);color:#22c55e}.badge-notif-rarity.rare{background:rgba(59,130,246,.2);color:var(--primary-accent)}.badge-notif-rarity.legendary{background:rgba(234,179,8,.2);color:#eab308;animation:2s ease-in-out infinite legendaryShine}@keyframes legendaryShine{0%,100%{box-shadow:0 0 0 rgba(234,179,8,0)}50%{box-shadow:0 0 15px rgba(234,179,8,.5)}}.badge-notif-close{position:absolute;top:8px;right:8px;background:0 0;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:6px;transition:.2s}.badge-notif-close:hover{background:var(--bg-hover);color:var(--text-primary)}.badge-notif-close i{width:16px;height:16px}@media (max-width:480px){.badge-notification{left:10px;right:10px;bottom:10px;max-width:none;transform:translateY(100%) scale(.9)}.badge-notification.show{transform:translateY(0) scale(1)}}