:root{--color-bg-start:#020617;--color-bg-end:#1e1b4b;--color-gold:#fbbf24;--color-gold-glow:#fbbf2466;--color-sky:#38bdf8;--color-glass:#ffffff0d;--color-glass-border:#ffffff1a;--font-main:"Inter", sans-serif;--font-title:"Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);color:#fff;min-height:100vh;line-height:1.6;overflow-x:hidden}#app{justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative}.stars-container{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.stars,.stars2,.stars3{background:0 0;position:absolute;inset:0}.stars{background-image:radial-gradient(1px 1px at 20px 30px,#fff,#0000),radial-gradient(1px 1px at 40px 70px,#fff,#0000),radial-gradient(1px 1px at 150px 100px,#fff,#0000);background-size:200px 200px;animation:50s linear infinite animStar}.stars2{opacity:.5;background-image:radial-gradient(2px 2px at 50px 160px,#fff,#0000),radial-gradient(2px 2px at 100px 250px,#fff,#0000);background-size:300px 300px;animation:100s linear infinite animStar}@keyframes animStar{0%{transform:translateY(0)}to{transform:translateY(-2000px)}}.container{z-index:10;text-align:center;width:90%;max-width:800px;padding:2rem;position:relative}.header{margin-bottom:3rem}.title{font-family:var(--font-title);letter-spacing:-2px;text-shadow:0 0 20px var(--color-gold-glow);margin-bottom:.5rem;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:800}.title .highlight{color:var(--color-gold)}.subtitle{color:var(--color-sky);letter-spacing:2px;text-transform:uppercase;opacity:.9;font-size:1.2rem;font-weight:300}.magic-portal{background:var(--color-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-glass-border);border-radius:32px;padding:3rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 25px 50px -12px #00000080}.magic-portal:hover{border-color:#fbbf244d;transform:translateY(-10px)}.portal-inner{border:2px dashed #fbbf2433;border-radius:24px;padding:2rem;transition:all .3s}.upload-zone{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.icon-orb{background:radial-gradient(circle, var(--color-gold-glow) 0%, transparent 70%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:3rem;animation:2s ease-in-out infinite pulse;display:flex}@keyframes pulse{0%{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}to{opacity:.8;transform:scale(.95)}}.upload-zone h2{font-family:var(--font-title);font-size:1.8rem;font-weight:600}.upload-zone p{color:#fff9;font-weight:300}.btn-magic{background:var(--color-gold);color:#000;cursor:pointer;box-shadow:0 4px 15px var(--color-gold-glow);border:none;border-radius:12px;padding:1rem 2.5rem;font-size:1.1rem;font-weight:700;transition:all .3s}.btn-magic:hover{box-shadow:0 8px 25px var(--color-gold-glow);background:#fff;transform:scale(1.05)}.footer{opacity:.4;margin-top:4rem;font-size:.9rem;font-weight:300}@media (width<=600px){.magic-portal{padding:1.5rem}.portal-inner{padding:1rem}.title{font-size:2.8rem}}.preview-container{flex-direction:column;align-items:center;gap:2rem;animation:.5s fadeIn;display:flex}.preview-img{object-fit:cover;border:4px solid var(--color-gold);width:200px;height:200px;box-shadow:0 0 30px var(--color-gold-glow);border-radius:50%}.magic-loader{flex-direction:column;align-items:center;gap:1rem;display:flex}.magic-loader .sparkle{font-size:2rem;animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}