@import"https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Comic+Neue:wght@300;400;700&display=swap";:root{--primary-color: #FFD700;--secondary-color: #87CEEB;--accent-color: #FF6B6B;--success-color: #4ECDC4;--warning-color: #FF9F43;--background-color: #E8F4FD;--card-bg: #FFFFFF;--text-color: #2C3E50;--shadow-soft: 0 6px 20px rgba(255, 215, 0, .2);--shadow-deep: 0 10px 30px rgba(255, 215, 0, .3);--border-radius: 25px}body{font-family:Comic Neue,cursive;background:linear-gradient(135deg,var(--background-color) 0%,#B3E5FC 100%);background-attachment:fixed;color:var(--text-color);margin:0;padding:0;text-align:center;line-height:1.6;overflow-x:hidden;transition:all .3s ease;position:relative;min-height:100vh;display:flex;flex-direction:column}.page-container{min-height:100vh;display:flex;flex-direction:column}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(ellipse 80px 40px at 20% 30%,rgba(255,255,255,.8) 0%,transparent 50%),radial-gradient(ellipse 60px 30px at 70% 20%,rgba(255,255,255,.6) 0%,transparent 50%),radial-gradient(ellipse 100px 50px at 80% 80%,rgba(255,255,255,.7) 0%,transparent 50%),radial-gradient(ellipse 70px 35px at 10% 70%,rgba(255,255,255,.5) 0%,transparent 50%);animation:float-clouds 20s infinite linear;pointer-events:none;z-index:-1}@keyframes float-clouds{0%{transform:translate(-100px)}to{transform:translate(calc(100vw + 100px))}}header{background:linear-gradient(135deg,var(--primary-color) 0%,#FFA500 100%);color:var(--text-color);padding:3rem 0;margin-bottom:2rem;box-shadow:var(--shadow-deep);position:relative;animation:bounce-in 1.2s ease-out;border-bottom:8px solid var(--warning-color);overflow:hidden}header:before{content:"😊";position:absolute;top:20px;right:30px;font-size:3rem;animation:rotate-sun 10s linear infinite;filter:drop-shadow(0 0 10px rgba(255,215,0,.8))}header:after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:90%;height:20px;background:repeating-linear-gradient(45deg,var(--accent-color) 0px,var(--accent-color) 10px,var(--success-color) 10px,var(--success-color) 20px,var(--warning-color) 20px,var(--warning-color) 30px);border-radius:var(--border-radius);animation:rainbow-shift 3s infinite alternate ease-in-out}@keyframes rotate-sun{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.seo-section{max-width:1100px;margin:2.5rem auto;text-align:left;background:linear-gradient(180deg,#ffffffe6,#fffffff2);padding:2rem;border-radius:18px;box-shadow:0 10px 30px #0000000f;border:1px solid rgba(44,62,80,.04)}.seo-section h3{font-family:Fredoka One,cursive;color:var(--text-color);margin-top:0;font-size:1.6rem}.seo-section p{color:#34495e;font-size:1rem;line-height:1.7}.seo-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0 1.5rem}.seo-card{background:linear-gradient(135deg,#fff,#fffffffa);padding:1rem 1.25rem;border-radius:12px;border:1px solid rgba(0,0,0,.04)}.seo-card h4{margin:0 0 .75rem;color:var(--primary-color)}.seo-card ul{margin:0;padding-left:1.25rem}.cta-row{display:flex;gap:1rem;margin:1rem 0 .5rem}.primary-cta,.secondary-cta{display:inline-block;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700}.primary-cta{background:linear-gradient(90deg,var(--primary-color),var(--warning-color));color:var(--text-color);border:2px solid rgba(0,0,0,.06)}.secondary-cta{background:transparent;color:var(--text-color);border:2px dashed rgba(0,0,0,.08)}.faq details{background:#00000005;padding:.8rem 1rem;margin-bottom:.6rem;border-radius:8px;border:1px solid rgba(0,0,0,.03)}.faq summary{cursor:pointer;font-weight:700;outline:none}.faq p{margin:.6rem 0 0;color:#2f3b45}@media (min-width: 768px){.seo-grid{grid-template-columns:repeat(2,1fr)}.cta-row{justify-content:flex-start}}@media (min-width: 1024px){.seo-section h3{font-size:1.9rem}}@keyframes rainbow-shift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(60deg)}}h1{font-family:Fredoka One,cursive;font-size:3.5rem;font-weight:400;margin:0;letter-spacing:2px;text-shadow:3px 3px 0px var(--warning-color),-2px -2px 0px var(--accent-color),0 0 20px rgba(255,215,0,.8);animation:title-glow 2s ease-in-out infinite alternate;transform:perspective(500px) rotateX(15deg)}@keyframes title-glow{0%{text-shadow:3px 3px 0px var(--warning-color),-2px -2px 0px var(--accent-color),0 0 20px rgba(255,215,0,.8);transform:perspective(500px) rotateX(15deg) scale(1)}to{text-shadow:5px 5px 0px var(--warning-color),-3px -3px 0px var(--accent-color),0 0 30px rgba(255,215,0,1);transform:perspective(500px) rotateX(15deg) scale(1.02)}}.subtitle{font-size:1.1rem;color:var(--primary-color);margin-bottom:3rem;animation:fade-in 1.2s ease-out .5s backwards}main{padding:1rem;flex:1}.drop-zone{border:4px dashed var(--primary-color);border-radius:var(--border-radius);padding:3rem;cursor:pointer;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);max-width:600px;margin:0 auto 2rem;animation:wiggle 1s ease-out .8s backwards;position:relative;background:linear-gradient(45deg,#ffd7001a,#87ceeb1a);overflow:hidden}.drop-zone:before{content:"📸";position:absolute;top:20px;left:20px;font-size:2rem;animation:bounce 2s infinite}@keyframes wiggle{0%{transform:rotate(-10deg) scale(.5);opacity:0}25%{transform:rotate(5deg) scale(1.1)}50%{transform:rotate(-5deg) scale(.9)}75%{transform:rotate(2deg) scale(1.05)}to{transform:rotate(0) scale(1);opacity:1}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.drop-zone input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.drop-zone span{color:var(--secondary-color);font-size:1.2rem;font-weight:500}.drop-zone:hover{border-color:var(--warning-color);background:linear-gradient(45deg,#ff9f4333,#ffd70033);transform:scale(1.05) rotate(1deg);box-shadow:0 15px 35px #ffd70066}.drop-zone.active{border-color:var(--accent-color);background:linear-gradient(45deg,#ff6b6b4d,#ff9f4333);transform:scale(1.1) rotate(-1deg);animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:scale(1.1) translate(0) rotate(-1deg)}25%{transform:scale(1.1) translate(-5px) rotate(-2deg)}75%{transform:scale(1.1) translate(5px) rotate(0)}}button{background:linear-gradient(145deg,var(--primary-color) 0%,var(--warning-color) 100%);color:var(--text-color);border:3px solid var(--text-color);padding:18px 35px;border-radius:var(--border-radius);font-family:Fredoka One,cursive;font-size:1.1rem;font-weight:400;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:var(--shadow-deep),inset 0 2px #ffffff4d,0 0 0 0 var(--accent-color);text-transform:uppercase;letter-spacing:2px;margin-top:2rem;animation:pop-in 1s ease-out 1s backwards;position:relative;overflow:hidden}button:before{content:"✨";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:1.2rem;animation:sparkle 1.5s ease-in-out infinite}@keyframes pop-in{0%{transform:scale(0) rotate(180deg);opacity:0}50%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes sparkle{0%,to{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.5;transform:translateY(-50%) scale(1.2)}}button:hover:not(:disabled){background:linear-gradient(145deg,var(--warning-color) 0%,var(--accent-color) 100%);transform:translateY(-5px) scale(1.05) rotate(-2deg);box-shadow:0 15px 35px #ff6b6b66,inset 0 2px #ffffff80,0 0 0 4px var(--accent-color);animation:button-dance .6s ease-in-out}button:disabled{background:linear-gradient(145deg,#ccc,#999);cursor:not-allowed;box-shadow:inset 0 2px 5px #0003;transform:scale(.95);opacity:.6}@keyframes button-dance{0%,to{transform:translateY(-5px) scale(1.05) rotate(-2deg)}25%{transform:translateY(-8px) scale(1.08) rotate(1deg)}75%{transform:translateY(-3px) scale(1.03) rotate(-1deg)}}#backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}#backdrop.visible{opacity:1;visibility:visible}#loading{display:flex;flex-direction:column;align-items:center;background-color:var(--card-bg);padding:2.5rem 3rem;border-radius:12px;box-shadow:var(--shadow-deep);animation:zoom-in .3s ease-out}#loading p{margin-top:20px;color:var(--primary-color);font-weight:500;font-size:1.1rem}.spinner{width:100px;height:100px;border:6px solid var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:spinner-wiggle 1s ease-in-out infinite;box-shadow:0 0 20px #ffd70080}.spinner:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:conic-gradient(var(--accent-color) 0%,var(--warning-color) 25%,var(--success-color) 50%,var(--secondary-color) 75%,var(--accent-color) 100%);transform:rotate(-90deg);animation:rainbow-spin 1s linear infinite}.spinner-value{font-family:Fredoka One,cursive;font-size:1.2rem;font-weight:400;color:var(--text-color);z-index:1;text-shadow:1px 1px 0px rgba(255,255,255,.8)}@keyframes spinner-wiggle{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rainbow-spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes zoom-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.hidden{display:none!important}.image-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:0 1rem;animation:fade-in-up 1.5s ease-out .8s backwards}.image-box{background:linear-gradient(135deg,var(--card-bg) 0%,rgba(255,215,0,.05) 100%);border-radius:var(--border-radius);box-shadow:var(--shadow-deep);padding:2rem;width:100%;max-width:400px;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);border:3px solid var(--primary-color);position:relative;overflow:hidden}.main-image-box{max-width:450px}.image-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:300px}#animationCanvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:100%;max-height:300px;object-fit:contain;z-index:2;border-radius:8px;border:1px solid #eee;box-shadow:0 2px 10px #0000001a;background-color:#fff}.progress-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;border-radius:8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.scanning-line{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent 0%,var(--accent-color) 20%,var(--primary-color) 50%,var(--success-color) 80%,transparent 100%);animation:scanning 2s linear infinite;box-shadow:0 0 15px var(--primary-color)}@keyframes scanning{0%{transform:translateY(0);opacity:1}to{transform:translateY(calc(100vh - 3px));opacity:.8}}.progress-text{color:var(--primary-color);font-family:Fredoka One,cursive;font-size:1.2rem;text-shadow:2px 2px 4px rgba(0,0,0,.8);background:#000c;padding:15px 25px;border-radius:25px;animation:pulse-text 1.5s ease-in-out infinite;border:2px solid var(--primary-color);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@keyframes pulse-text{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}#progressPercent{transition:transform .1s ease;font-weight:700;color:gold;text-shadow:1px 1px 2px rgba(0,0,0,1);display:inline-block}#animationCanvas{transition:all .3s ease}#animationCanvas:not(.hidden){box-shadow:0 0 20px #ffd70099,0 0 40px #ff6b6b66,inset 0 0 20px #ffffff1a;border:2px solid var(--primary-color)}.image-wrapper.processing{animation:processing-glow 2s ease-in-out infinite}@keyframes processing-glow{0%,to{box-shadow:0 0 30px #ffd70080}50%{box-shadow:0 0 60px #ffd700cc}}.progress-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:8px}.scanning-line{background:linear-gradient(90deg,transparent 0%,rgba(255,215,0,.8) 10%,rgba(255,107,107,1) 30%,rgba(255,215,0,1) 50%,rgba(78,205,196,1) 70%,rgba(255,215,0,.8) 90%,transparent 100%);box-shadow:0 0 20px var(--primary-color),0 2px 10px #0000004d}.drop-zone.processing{border-color:var(--success-color);background:linear-gradient(45deg,#4ecdc433,#87ceeb33);animation:processing-border 1.5s ease-in-out infinite}@keyframes processing-border{0%,to{border-color:var(--success-color);box-shadow:0 0 20px #4ecdc480}50%{border-color:var(--primary-color);box-shadow:0 0 30px #ffd700b3}}.image-box:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:rotate(45deg);transition:all .6s ease;opacity:0}.image-box:hover{border-color:var(--accent-color);transform:translateY(-10px) scale(1.02) rotate(1deg);box-shadow:0 20px 40px #ff6b6b4d,0 0 0 5px #ffd70033}.image-box:hover:before{opacity:1;transform:translate(100%) translateY(100%) rotate(45deg)}.image-box h2{font-family:Fredoka One,cursive;color:var(--text-color);margin-top:0;font-weight:400;letter-spacing:2px;font-size:1.5rem;text-shadow:2px 2px 0px var(--primary-color);position:relative}.image-box h2:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:80%;height:3px;background:linear-gradient(90deg,var(--accent-color) 0%,var(--success-color) 50%,var(--warning-color) 100%);border-radius:2px}.image-box img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:100%;max-height:300px;border-radius:8px;height:auto;border:1px solid #eee;box-shadow:0 2px 10px #0000001a;z-index:1;object-fit:contain;transition:opacity .3s ease}#downloadButton{display:inline-block;margin-top:1.5rem;padding:18px 35px;background:linear-gradient(145deg,var(--success-color) 0%,var(--secondary-color) 100%);color:var(--text-color);text-decoration:none;border-radius:var(--border-radius);font-family:Fredoka One,cursive;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:var(--shadow-deep),inset 0 2px #ffffff4d;text-transform:uppercase;font-weight:400;letter-spacing:2px;border:3px solid var(--text-color);position:relative;overflow:hidden}#downloadButton:before{content:"⬇️";position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:1.2rem;animation:download-bounce 1s ease-in-out infinite}#downloadButton:hover{background:linear-gradient(145deg,var(--warning-color) 0%,var(--primary-color) 100%);transform:translateY(-5px) scale(1.05) rotate(2deg);box-shadow:0 15px 35px #4ecdc466,inset 0 2px #ffffff80,0 0 0 4px var(--success-color)}@keyframes download-bounce{0%,to{transform:translateY(-50%)}50%{transform:translateY(-40%)}}footer{margin-top:auto;padding:2rem;background:linear-gradient(135deg,var(--primary-color) 0%,var(--warning-color) 100%);color:var(--text-color);box-shadow:inset 0 5px 15px #0000001a,0 -10px 30px #ffd7004d;font-size:1rem;font-family:Comic Neue,cursive;font-weight:700;animation:slide-up 1.2s ease-out 1s backwards;border-top:5px solid var(--accent-color);position:relative;overflow:hidden;flex-shrink:0}footer:before{content:"🎆 🎉 🎆";position:absolute;top:10px;left:50%;transform:translate(-50%);font-size:1.5rem;animation:celebration 3s ease-in-out infinite}.footer-content{display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:30px}.social-links{display:flex;justify-content:center;align-items:center;gap:15px}.facebook-link{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background:linear-gradient(135deg,#1877f2,#42a5f5);color:#fff;border-radius:50%;text-decoration:none;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #1877f24d,inset 0 2px #fff3;border:3px solid rgba(255,255,255,.3);position:relative;overflow:hidden;animation:social-pulse 2s ease-in-out infinite}.facebook-link:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:rotate(45deg);transition:all .6s ease;opacity:0}.facebook-link:hover{background:linear-gradient(135deg,#42a5f5,#1877f2);transform:translateY(-5px) scale(1.1) rotate(-5deg);box-shadow:0 8px 25px #1877f280,inset 0 2px #ffffff4d,0 0 0 4px #1877f24d;animation:facebook-dance .6s ease-in-out}.facebook-link:hover:before{opacity:1;transform:translate(100%) translateY(100%) rotate(45deg)}.facebook-link svg{width:24px;height:24px;transition:transform .3s ease;z-index:1;position:relative}.facebook-link:hover svg{transform:scale(1.1) rotate(5deg)}@keyframes social-pulse{0%,to{box-shadow:0 4px 15px #1877f24d,inset 0 2px #fff3}50%{box-shadow:0 6px 20px #1877f280,inset 0 2px #fff3}}@keyframes facebook-dance{0%,to{transform:translateY(-5px) scale(1.1) rotate(-5deg)}25%{transform:translateY(-8px) scale(1.15) rotate(2deg)}75%{transform:translateY(-3px) scale(1.08) rotate(-2deg)}}footer p{margin:0;text-shadow:2px 2px 0px rgba(255,255,255,.8)}footer a{color:var(--text-color);text-decoration:none;font-weight:700;border-bottom:2px solid var(--text-color);padding-bottom:2px;transition:all .3s ease;position:relative}footer a:hover{color:var(--accent-color);border-bottom-color:var(--accent-color);transform:translateY(-2px);text-shadow:2px 2px 0px rgba(255,255,255,.8),0 0 10px var(--accent-color)}footer p:last-child{font-size:.9rem;opacity:.9}footer p:last-child a{font-size:.9rem;border-bottom:1px solid var(--text-color)}.install-btn{background:linear-gradient(145deg,#4ecdc4,#87ceeb);color:var(--text-color);border:2px solid var(--text-color);padding:12px 24px;border-radius:20px;font-family:Fredoka One,cursive;font-size:1rem;font-weight:400;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #4ecdc44d,inset 0 2px #ffffff4d;text-transform:uppercase;letter-spacing:1px;margin:15px 0;position:relative;overflow:hidden;animation:install-pulse 2s ease-in-out infinite}.install-btn:before{content:"⬇️";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1rem;animation:bounce-icon 1.5s ease-in-out infinite}.install-btn:hover{background:linear-gradient(145deg,#87ceeb,#4ecdc4);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #4ecdc480,inset 0 2px #ffffff80,0 0 0 3px #4ecdc44d}.install-btn:active{transform:translateY(-1px) scale(1.02)}@keyframes install-pulse{0%,to{box-shadow:0 4px 15px #4ecdc44d,inset 0 2px #ffffff4d}50%{box-shadow:0 6px 20px #4ecdc480,inset 0 2px #ffffff4d}}@keyframes bounce-icon{0%,to{transform:translateY(-50%)}50%{transform:translateY(-60%)}}@keyframes slide-up{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes celebration{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.2)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.floating-elements{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}.floating-donut{position:absolute;font-size:2rem;animation:float-around 15s infinite linear;opacity:.7}.floating-donut:nth-child(1){top:20%;animation-delay:0s;animation-duration:12s}.floating-donut:nth-child(2){top:60%;animation-delay:-4s;animation-duration:18s}.floating-donut:nth-child(3){top:40%;animation-delay:-8s;animation-duration:14s}@keyframes float-around{0%{transform:translate(-100px) rotate(0)}25%{transform:translate(25vw) translateY(-50px) rotate(90deg)}50%{transform:translate(50vw) translateY(30px) rotate(180deg)}75%{transform:translate(75vw) translateY(-30px) rotate(270deg)}to{transform:translate(calc(100vw + 100px)) rotate(360deg)}}@media (max-width: 480px){h1{font-size:2.5rem}.drop-zone{padding:2rem 1rem;margin:0 1rem 2rem}.image-box{padding:1.5rem;margin:0 1rem}button{padding:15px 25px;font-size:.9rem}footer{padding:1.5rem 1rem;margin-top:auto}.footer-content{gap:12px;padding-top:20px}.facebook-link{width:45px;height:45px}.facebook-link svg{width:20px;height:20px}footer p{font-size:.9rem}}@media (min-width: 768px){.image-container{flex-direction:row;gap:3rem}header:before{font-size:4rem}}@media (min-width: 1024px){.drop-zone:after{content:"🌈";position:absolute;top:20px;right:20px;font-size:2rem;animation:rainbow-dance 2s ease-in-out infinite}}@keyframes rainbow-dance{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.1)}50%{transform:rotate(-5deg) scale(.9)}75%{transform:rotate(15deg) scale(1.05)}}@media (display-mode: standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}header:after{content:"📱 App Mode";position:absolute;top:10px;left:20px;font-size:.8rem;background:#ffffffe6;padding:5px 10px;border-radius:15px;color:var(--text-color);animation:fade-in 2s ease-out}}.offline-indicator{position:fixed;top:0;left:0;right:0;background:#ff6b6b;color:#fff;text-align:center;padding:10px;font-weight:700;z-index:10001;transform:translateY(-100%);transition:transform .3s ease}.offline-indicator.show{transform:translateY(0)}.update-notification{position:fixed;bottom:20px;left:20px;right:20px;background:linear-gradient(145deg,#4ecdc4,#87ceeb);color:var(--text-color);padding:15px 20px;border-radius:25px;box-shadow:0 6px 20px #4ecdc44d;z-index:10000;font-family:Comic Neue,sans-serif;font-weight:700;transform:translateY(100px);transition:transform .3s ease}.update-notification.show{transform:translateY(0)}@keyframes bounce-in{0%{transform:translateY(-100px) scale(.5);opacity:0}50%{transform:translateY(20px) scale(1.1)}to{transform:translateY(0) scale(1);opacity:1}}