:root{--bg-color:#f0f2f5;--container-bg:linear-gradient(to bottom right,#ffffff,#f8f9fa);--text-color:#333;--border-color:#ccc;--shadow-color:rgba(0,0,0,0.1);}
[data-theme="dark"]{--bg-color:#1a1a1a;--container-bg:linear-gradient(to bottom right,#2d2d2d,#1a1a1a);--text-color:#fff;--border-color:#444;--shadow-color:rgba(0,0,0,0.3);}
body{font-family:Arial,sans-serif;background:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;align-items:center;height:100vh;margin:0;padding:10px;overflow:hidden;box-sizing:border-box;transition:all 0.3s ease;}.container{background:var(--container-bg);box-shadow:0 8px 32px var(--shadow-color);width:100%;max-width:100%;height:calc(100vh-20px);margin:0;padding:15px;border-radius:10px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;}.upload-area{border:2px dashed var(--border-color);padding:20px;text-align:center;margin-bottom:20px;border-radius:8px;cursor:pointer;background:linear-gradient(145deg,#f0f0f0,#ffffff);box-shadow:5px 5px 15px#d1d1d1,-5px-5px 15px#ffffff;transition:all 0.3s ease;}
[data-theme="dark"].upload-area{color:#ffffff;border-color:#444;background:linear-gradient(145deg,#2d2d2d,#1a1a1a);box-shadow:5px 5px 15px rgba(0,0,0,0.3),-5px-5px 15px rgba(255,255,255,0.1);}
[data-theme="dark"].upload-area:hover{border-color:#4CAF50;transform:translateY(-2px);box-shadow:8px 8px 20px rgba(0,0,0,0.4),-8px-8px 20px rgba(255,255,255,0.1);background:#2d2d2d;}.upload-area:hover{border-color:#4CAF50;transform:translateY(-2px);box-shadow:8px 8px 20px#d1d1d1,-8px-8px 20px#ffffff;background:#f8f8f8;}
h2{text-align:center;margin:10px 0;font-size:1.8em;}.app-description{margin:5px 0 15px 0;font-size:0.9em;line-height:1.4;text-align:center;}.preview-container{margin:10px 0;min-height:200px;flex:1;display:flex;justify-content:center;align-items:center;position:relative;}#imagePreview{max-width:100%;max-height:300px;transition:all 0.3s ease;object-fit:contain;}.controls{gap:6px;margin:20px 0;display:grid;grid-template-columns:repeat(2,1fr);}.controls select{grid-column:1/ -1;padding:10px;font-size:16px;margin-bottom:10px;border-radius:5px;border:1px solid var(--border-color);background:var(--container-bg);color:var(--text-color);}.controls select{background:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);}
[data-theme="dark"].controls select{background:#2d2d2d;color:#ffffff;border-color:#444;}
[data-theme="dark"].controls select option{background:#2d2d2d;color:#ffffff;}
button{padding:10px 15px;width:100%;margin:0;border:none;border-radius:5px;background:linear-gradient(45deg,#8e44ad,#9b59b6);color:white;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:600;letter-spacing:0.5px;box-shadow:0 4px 15px rgba(33,147,176,0.3);position:relative;overflow:hidden;font-size:14px;height:40px;line-height:20px;display:flex;align-items:center;justify-content:center;}
button:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px rgba(33,147,176,0.4);background:linear-gradient(45deg,#7d3c98,#884ea0);}
button:active{transform:translateY(1px);}
button::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s;}
button:active::after{width:300px;height:300px;opacity:0;}#downloadGIF{background:linear-gradient(45deg,#4CAF50,#45a049);width:100%;height:40px;margin-top:-45px;display:inline-block;padding:10px 15px;font-size:14px;border-radius:5px;text-align:center;box-sizing:border-box;grid-column:1;display:flex;align-items:center;justify-content:center;}#downloadGIF:hover{background:linear-gradient(45deg,#45a049,#3d8b40);transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px rgba(76,175,80,0.4);}#resetAnimation{background:linear-gradient(45deg,#ff4444,#cc0000);grid-column:2;width:100%;height:40px;margin-top:20px;}#resetAnimation:hover{background:linear-gradient(45deg,#cc0000,#aa0000);transform:translateY(-3px)scale(1.02);box-shadow:0 6px 20px rgba(204,0,0,0.4);}#startAnimation{background:linear-gradient(45deg,#e67e22,#f39c12);width:100%;height:40px;}#startAnimation:hover{background:linear-gradient(45deg,#d35400,#e67e22);}#stopAnimation{background:linear-gradient(45deg,#3498db,#2980b9);width:100%;height:40px;}#stopAnimation:hover{background:linear-gradient(45deg,#2980b9,#2471a3);}.filename-container{margin:10px 0;width:100%;order:2;display:none;}.filename-input{width:100%;padding:8px;border-radius:5px;border:1px solid var(--border-color);box-sizing:border-box;}@keyframes rotate{0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-15px);}
60%{transform:translateY(-7px);}}@keyframes shake{0%{transform:translateX(0);}
25%{transform:translateX(-10px);}
75%{transform:translateX(10px);}}@keyframes pulse{0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}}@keyframes swing{20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}}@keyframes flip{0%{transform:perspective(400px)rotateY(0);}
100%{transform:perspective(400px)rotateY(360deg);}}@keyframes slide{0%{transform:translateX(-100%);}
100%{transform:translateX(100%);}}@keyframes zoom{0%{transform:scale(1);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}}@keyframes spiral{0%{transform:rotate(0)scale(1);}
100%{transform:rotate(360deg)scale(0.5);}}@keyframes fadeInOut{0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}}@keyframes skew{0%{transform:skew(0deg);}
100%{transform:skew(360deg);}}@keyframes rainbow{0%{filter:hue-rotate(0deg);}
100%{filter:hue-rotate(360deg);}}@keyframes glitch{0%{transform:translate(0);}
20%{transform:translate(-5px,5px);}
40%{transform:translate(-5px,-5px);}
60%{transform:translate(5px,5px);}
80%{transform:translate(5px,-5px);}
100%{transform:translate(0);}}@keyframes wave{0%{transform:translateY(0);}
50%{transform:translateY(-15px)rotate(5deg);}
100%{transform:translateY(0);}}@keyframes float{0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}}@keyframes morph{0%{border-radius:0%;}
50%{border-radius:50%;}
100%{border-radius:0%;}}@keyframes blur{0%{filter:blur(0);}
50%{filter:blur(4px);}
100%{filter:blur(0);}}@keyframes tilt{0%{transform:perspective(1000px)rotateX(0);}
100%{transform:perspective(1000px)rotateX(360deg);}}@keyframes squeeze{0%{transform:scaleX(1);}
50%{transform:scaleX(0.5);}
100%{transform:scaleX(1);}}@keyframes ripple{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,0,0,0.3);}
70%{transform:scale(0.9);box-shadow:0 0 0 50px rgba(0,0,0,0);}
100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,0,0,0);}}@keyframes scatter{0%{transform:rotate(0)translate(0);}
100%{transform:rotate(360deg)translate(20px);}}@keyframes fold{0%{transform:perspective(800px)rotateY(0);}
100%{transform:perspective(800px)rotateY(180deg);}}@keyframes swirl{0%{transform:rotate(0)scale(1);}
50%{transform:rotate(180deg)scale(0.5);}
100%{transform:rotate(360deg)scale(1);}}@keyframes expand{0%{transform:scale(1);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}}@keyframes jello{11.1%{transform:none;}
22.2%{transform:skewX(-12.5deg)skewY(-12.5deg);}
33.3%{transform:skewX(6.25deg)skewY(6.25deg);}
44.4%{transform:skewX(-3.125deg)skewY(-3.125deg);}
55.5%{transform:skewX(1.5625deg)skewY(1.5625deg);}
66.6%{transform:skewX(-0.78125deg)skewY(-0.78125deg);}
77.7%{transform:skewX(0.390625deg)skewY(0.390625deg);}
88.8%{transform:skewX(-0.1953125deg)skewY(-0.1953125deg);}
100%{transform:none;}}@keyframes vibrate{0%{transform:translate(0);}
25%{transform:translate(2px);}
50%{transform:translate(0);}
75%{transform:translate(-2px);}
100%{transform:translate(0);}}@keyframes rollIn{0%{transform:translateX(-100%)rotate(-120deg);}
100%{transform:translateX(0)rotate(0);}}@keyframes elastic{0%{transform:scale(1);}
25%{transform:scale(1.5);}
50%{transform:scale(0.8);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}}@keyframes wobble{0%{transform:translateX(0%);}
15%{transform:translateX(-25%)rotate(-5deg);}
30%{transform:translateX(20%)rotate(3deg);}
45%{transform:translateX(-15%)rotate(-3deg);}
60%{transform:translateX(10%)rotate(2deg);}
75%{transform:translateX(-5%)rotate(-1deg);}
100%{transform:translateX(0%);}}@keyframes kaleidoscope{0%{transform:rotate(0deg)scale(1);filter:hue-rotate(0deg);}
50%{transform:rotate(180deg)scale(1.2);filter:hue-rotate(180deg);}
100%{transform:rotate(360deg)scale(1);filter:hue-rotate(360deg);}}@keyframes tornado{0%{transform:rotate(0deg)scale(1)translateY(0);}
50%{transform:rotate(360deg)scale(0.5)translateY(-20px);}
100%{transform:rotate(720deg)scale(1)translateY(0);}}@keyframes heartbeat{0%{transform:scale(1);}
14%{transform:scale(1.3);}
28%{transform:scale(1);}
42%{transform:scale(1.3);}
70%{transform:scale(1);}}@keyframes matrix{0%{transform:perspective(500px)rotateX(0deg)scale(1);opacity:1;}
50%{transform:perspective(500px)rotateX(180deg)scale(0.8);opacity:0.5;}
100%{transform:perspective(500px)rotateX(360deg)scale(1);opacity:1;}}@keyframes pendulum{0%{transform:rotate(30deg);}
50%{transform:rotate(-30deg);}
100%{transform:rotate(30deg);}}@keyframes flagWave{0%{transform:scale(1.1)rotate(0deg);}
25%{transform:scale(1.1)rotate(-3deg);}
75%{transform:scale(1.1)rotate(3deg);}
100%{transform:scale(1.1)rotate(0deg);}}@keyframes slideDown{from{top:-100px;opacity:0;}
to{top:20px;opacity:1;}}@keyframes slideUp{from{top:20px;opacity:1;}
to{top:-100px;opacity:0;}}@media(max-height:768px){h2{font-size:1.5em;margin:5px 0;}.app-description{font-size:0.8em;margin:5px 0 10px 0;}.preview-container{min-height:150px;}.controls select,.controls button{padding:8px;}}@media(max-height:600px){.container{padding:10px;}
h2{font-size:1.3em;margin:5px 0;}.preview-container{min-height:120px;}}.theme-switch-wrapper{position:relative;width:auto;display:flex;justify-content:flex-start;align-items:center;gap:10px;margin:10px 0;}.language-switch{display:flex;gap:15px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:15px 0;}.controls-top{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;margin:10px 0;}.theme-switch{position:relative;display:inline-block;width:60px;height:34px;}.theme-switch input{opacity:0;width:0;height:0;}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px;}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%;}
input:checked+.slider{background-color:#2196F3;}
input:checked+.slider:before{transform:translateX(26px);}.theme-label{color:var(--text-color);}.loading{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:1000;}.loading-text{color:white;font-size:18px;text-align:center;padding:20px;background:rgba(0,0,0,0.8);border-radius:10px;}.notification{position:fixed;top:-100px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:white;padding:15px 25px;border-radius:8px;z-index:1000;transition:top 0.5s ease;font-size:16px;box-shadow:0 4px 15px rgba(0,0,0,0.2);text-align:center;max-width:90%;width:auto;}.notification.show{top:20px;animation:slideDown 0.5s ease forwards;}.notification.hide{animation:slideUp 0.5s ease forwards;}.copyright{text-align:center;margin:10px 0;color:var(--text-color);font-size:0.9em;order:998;width:100%;margin-top:-15px;}.flag-icon{width:30px;height:20px;cursor:pointer;border:2px solid transparent;border-radius:4px;transition:all 0.3s ease;}.flag-icon:hover{transform:scale(1.1);box-shadow:0 0 10px rgba(255,255,255,0.3);animation:flagWave 1s infinite ease-in-out;}.flag-icon.active{border:2px solid#4CAF50;}@media(max-width:768px){#downloadGIF,#resetAnimation,button{width:100%;padding:8px 12px;font-size:13px;}}@media(max-width:480px){#downloadGIF,#resetAnimation,button{width:100%;padding:8px 10px;font-size:12px;}}@media(max-width:768px){#downloadGIF{width:100%;padding:8px 12px;font-size:13px;}}@media(max-width:480px){#downloadGIF{width:100%;padding:8px 10px;font-size:12px;}}