:root{--primary-color: #ff6b6b;--secondary-color: #feca57;--background-color: #f8f9fa;--text-color: #495057;--white: #ffffff;--shadow-color: rgba(0, 0, 0, .1);--font-title: "Fredoka One", cursive;--font-body: "Roboto", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:1rem}#root{width:100%;max-width:600px}.app-container{background-color:var(--white);border-radius:20px;box-shadow:0 10px 30px var(--shadow-color);padding:2rem;text-align:center;display:flex;flex-direction:column;gap:1.5rem}.header h1{font-family:var(--font-title);font-size:2.5rem;color:var(--primary-color);text-shadow:2px 2px var(--secondary-color)}.header p{font-size:1.1rem;margin-top:.5rem;color:var(--text-color)}.image-container{width:100%;aspect-ratio:1 / 1;background-color:#e9ecef;border-radius:15px;display:flex;justify-content:center;align-items:center;border:4px dashed var(--secondary-color);overflow:hidden;position:relative}.generated-image{width:100%;height:100%;object-fit:cover}.loading-spinner{width:60px;height:60px;border:8px solid #f3f3f3;border-top:8px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{color:var(--primary-color);font-weight:700;padding:1rem}.emoji-selection{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.emoji-btn{font-size:3rem;background:none;border:4px solid transparent;cursor:pointer;transition:transform .2s ease,filter .2s ease,background-color .2s,border-color .2s;padding:.5rem;border-radius:15px;line-height:1}.emoji-btn:hover:not(.selected){transform:scale(1.1)}.emoji-btn.selected{transform:scale(1.2);filter:drop-shadow(0 0 10px var(--secondary-color));border-color:var(--secondary-color);background-color:#fffbe8}.controls{min-height:60px;display:flex;justify-content:center;align-items:center}.button-group{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.action-btn{font-family:var(--font-title);font-size:1.5rem;padding:1rem 2rem;border:none;border-radius:50px;cursor:pointer;background-color:var(--primary-color);color:var(--white);transition:background-color .2s,transform .2s,color .2s;box-shadow:0 4px 15px #0000001a;text-decoration:none}.action-btn:hover:not(:disabled){transform:translateY(-3px);background-color:#ff4757}.action-btn:disabled{background-color:#ced4da;cursor:not-allowed}.action-btn.share-btn{background-color:var(--secondary-color);color:var(--text-color)}.action-btn.share-btn:hover:not(:disabled){background-color:#f7b731;transform:translateY(-3px)}.fireworks-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.particle{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;animation:explode 1.8s ease-out forwards}@keyframes explode{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1.5);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(0);opacity:0}}@media (max-width: 480px){.app-container{padding:1rem}.header h1{font-size:2rem}.emoji-btn{font-size:2.5rem}.action-btn{font-size:1.2rem;padding:.8rem 1.5rem}}