.upload-area{margin-bottom:25px;border:3px dashed #a0d9b4;padding:30px 20px;border-radius:12px;background:linear-gradient(135deg,#eafaf1,#d5f4e6);display:flex;flex-direction:column;align-items:center;transition:all .3s ease}.upload-icon{font-size:3em;margin-bottom:10px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.upload-area p{margin-bottom:15px;color:#2c3e50;font-size:1em}.upload-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:12px 28px;border:none;border-radius:8px;cursor:pointer;font-size:1em;font-weight:600;transition:all .3s ease;margin-bottom:15px;display:inline-block}.upload-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.file-name{font-size:.9em;color:#555;font-weight:500;margin-top:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#667eea26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-container{background:#fffffff2;padding:50px 60px;border-radius:20px;box-shadow:0 10px 40px #667eea4d;display:flex;flex-direction:column;align-items:center;animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.spinner-container{position:relative;width:80px;height:80px;margin-bottom:30px}.spinner{position:absolute;top:0;left:0;width:80px;height:80px;border:6px solid transparent;border-top:6px solid #667eea;border-right:6px solid #764ba2;border-radius:50%;animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite}.spinner-glow{position:absolute;top:0;left:0;width:80px;height:80px;border:3px solid transparent;border-top:3px solid rgba(102,126,234,.3);border-right:3px solid rgba(118,75,162,.3);border-radius:50%;animation:spin 1.8s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{text-align:center}.main-text{color:#2c3e50;font-size:1.2em;font-weight:600;margin:0 0 15px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading-dots{display:flex;justify-content:center;gap:8px}.loading-dots span{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);animation:bounce 1.4s infinite ease-in-out}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.status{margin-top:20px;padding:12px 20px;font-size:.95em;color:#2c3e50;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:8px;border-left:4px solid #667eea;animation:slideIn .3s ease-out;font-weight:500}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.download-link{display:block;margin-top:20px;padding:14px 28px;background:linear-gradient(135deg,#00b09b,#96c93d);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1.1em;transition:all .3s ease;box-shadow:0 4px 12px #00b09b4d;width:100%;box-sizing:border-box;text-align:center;text-transform:uppercase;letter-spacing:.5px}.download-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00b09b66}.download-link:active{transform:translateY(0)}.app-wrapper{width:100%;max-width:600px;transition:all .3s ease}.app-wrapper.dragging{transform:scale(1.02)}.app-wrapper.dragging .container{border:3px dashed #667eea;box-shadow:0 0 30px #667eea80,0 20px 60px #0000004d}.container{background-color:#fff;padding:40px;border-radius:16px;box-shadow:0 20px 60px #0000004d;text-align:center;width:100%;animation:fadeIn .5s ease-in;border:3px solid transparent;transition:all .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}h1{color:#2c3e50;margin-bottom:30px;font-size:2em;font-weight:600}.generate-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:14px 28px;border:none;border-radius:8px;cursor:pointer;font-size:1.1em;font-weight:600;transition:all .3s ease;width:100%;box-sizing:border-box;margin-top:20px;text-transform:uppercase;letter-spacing:.5px}.generate-button:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.generate-button:active:not(:disabled){transform:translateY(0)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;color:#333}#root{width:100%;max-width:600px}