:root {
  --neon-cyan: #00e5ff; --neon-blue: #4d7cff; --neon-purple: #8b5cf6; --neon-green: #00ff88; --neon-pink: #ff006e;
  --cyber-950: #030712; --cyber-900: #060b1a; --glass-bg: rgba(10,15,40,0.5); --glass-border: rgba(0,229,255,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
::selection { background:rgba(0,229,255,0.3); color:#fff; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--cyber-950); }
::-webkit-scrollbar-thumb { background:rgba(0,229,255,0.2); border-radius:3px; }

.mesh-gradient { position:fixed; inset:0; background:var(--cyber-950); z-index:0; }
.floating-orb { position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; }
.orb-1 { width:600px; height:600px; background:radial-gradient(circle,rgba(0,229,255,0.08),transparent 70%); top:-15%; right:-10%; animation:floatOrb1 25s ease-in-out infinite; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,rgba(77,124,255,0.07),transparent 70%); bottom:-10%; left:-8%; animation:floatOrb2 30s ease-in-out infinite; }
.orb-3 { width:350px; height:350px; background:radial-gradient(circle,rgba(139,92,246,0.06),transparent 70%); top:40%; left:30%; animation:floatOrb3 20s ease-in-out infinite; }
.orb-4 { width:250px; height:250px; background:radial-gradient(circle,rgba(0,255,136,0.04),transparent 70%); top:60%; right:20%; animation:floatOrb4 22s ease-in-out infinite; }

@keyframes floatOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,30px) scale(1.05)} 66%{transform:translate(20px,-20px) scale(0.95)} }
@keyframes floatOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(0.95)} 66%{transform:translate(-20px,30px) scale(1.05)} }
@keyframes floatOrb3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.08)} }
@keyframes floatOrb4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,20px) scale(0.92)} }

.grid-overlay { position:fixed; inset:0; background-image:linear-gradient(rgba(0,229,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.02) 1px,transparent 1px); background-size:60px 60px; z-index:0; pointer-events:none; }

.glass-card { background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:16px; transition:all 0.3s ease; }
.glass-card.glow-hover:hover { border-color:rgba(0,229,255,0.15); box-shadow:0 0 30px rgba(0,229,255,0.05),0 8px 32px rgba(0,0,0,0.3); }
.glass-nav { background:rgba(3,7,18,0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,229,255,0.05); }

.hero-title-gradient { background:linear-gradient(135deg,#ffffff 0%,#c0d0ff 50%,#4d7cff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-fade { opacity:0; transform:translateY(30px); animation:heroFadeIn 0.8s ease forwards; }
@keyframes heroFadeIn { to{opacity:1;transform:translateY(0)} }

.hero-ring { position:absolute; border-radius:50%; border:1px solid rgba(0,229,255,0.05); pointer-events:none; }
.ring-1 { width:500px; height:500px; top:50%; left:50%; transform:translate(-50%,-50%); animation:ringPulse 8s ease-in-out infinite; }
.ring-2 { width:700px; height:700px; top:50%; left:50%; transform:translate(-50%,-50%); animation:ringPulse 12s ease-in-out infinite reverse; }
@keyframes ringPulse { 0%,100%{opacity:0.3;transform:translate(-50%,-50%) scale(1)} 50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.05)} }

.upload-zone { transition:all 0.3s ease; }
.upload-zone.drag-over { border-color:var(--neon-cyan) !important; background:rgba(0,229,255,0.05) !important; box-shadow:0 0 30px rgba(0,229,255,0.1); }
.upload-zone.has-file { border-color:rgba(0,255,136,0.2); background:rgba(0,255,136,0.02); }

.model-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.05); background:rgba(6,11,26,0.6); color:#6b7394; cursor:pointer; transition:all 0.3s ease; }
.model-btn:hover { border-color:rgba(0,229,255,0.2); background:rgba(0,229,255,0.05); color:#9ca3c0; }
.model-btn.active { border-color:rgba(0,229,255,0.3); background:rgba(0,229,255,0.08); color:var(--neon-cyan); box-shadow:0 0 20px rgba(0,229,255,0.1); }
.model-btn-name { font-size:0.8rem; font-weight:700; }
.model-btn-tag { font-size:0.65rem; font-weight:500; opacity:0.7; }

.custom-range { -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background:linear-gradient(to right,var(--neon-cyan),var(--neon-blue)); outline:none; cursor:pointer; }
.custom-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--neon-cyan); border:3px solid var(--cyber-950); box-shadow:0 0 15px rgba(0,229,255,0.4); cursor:pointer; }
.custom-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--neon-cyan); border:3px solid var(--cyber-950); box-shadow:0 0 15px rgba(0,229,255,0.4); cursor:pointer; }

.generate-btn { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue)); color:var(--cyber-950); position:relative; overflow:hidden; }
.generate-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,0.2) 50%,transparent); transform:translateX(-100%); transition:transform 0.5s ease; }
.generate-btn:hover::before { transform:translateX(100%); }
.generate-btn:hover { box-shadow:0 0 40px rgba(0,229,255,0.3),0 0 80px rgba(0,229,255,0.1); transform:translateY(-1px); }
.generate-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; animation:none; }
.generate-btn:disabled::before { display:none; }
.generate-btn:not(:disabled) { animation:btnPulse 3s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{box-shadow:0 0 20px rgba(0,229,255,0.2)} 50%{box-shadow:0 0 30px rgba(0,229,255,0.3),0 0 60px rgba(0,229,255,0.1)} }

.generate-btn .spinner { display:inline-block; width:20px; height:20px; border:3px solid rgba(3,7,18,0.3); border-top-color:#030712; border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }

.status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:all 0.3s ease; }
.status-dot.active { box-shadow:0 0 10px currentColor; }
.status-dot.pulse { animation:statusPulse 1.5s ease-in-out infinite; }
@keyframes statusPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.toast { pointer-events:auto; max-width:380px; padding:14px 18px; border-radius:12px; backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.05); font-size:0.85rem; display:flex; align-items:flex-start; gap:10px; animation:toastIn 0.4s ease; box-shadow:0 10px 40px rgba(0,0,0,0.5); }
.toast.removing { animation:toastOut 0.3s ease forwards; }
.toast-success { background:rgba(0,255,136,0.1); border-color:rgba(0,255,136,0.15); color:var(--neon-green); }
.toast-error { background:rgba(255,0,110,0.1); border-color:rgba(255,0,110,0.15); color:var(--neon-pink); }
.toast-info { background:rgba(0,229,255,0.1); border-color:rgba(0,229,255,0.15); color:var(--neon-cyan); }
@keyframes toastIn { from{opacity:0;transform:translateX(40px) scale(0.95)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut { to{opacity:0;transform:translateX(40px) scale(0.95)} }

.card-enter { animation:cardEnter 0.5s ease; }
@keyframes cardEnter { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.loading-ring { width:60px; height:60px; border-radius:50%; border:3px solid rgba(0,229,255,0.1); border-top-color:#00e5ff; animation:spin 1s linear infinite; margin:0 auto; }
.loading-pulse { animation:loadingPulse 2s ease-in-out infinite; }
@keyframes loadingPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.loading-dots::after { content:''; animation:loadingDots 1.5s steps(4,end) infinite; }
@keyframes loadingDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }

.status-processing-glow { animation:statusGlow 2s ease-in-out infinite; }
@keyframes statusGlow { 0%,100%{box-shadow:0 0 20px rgba(0,229,255,0.05)} 50%{box-shadow:0 0 40px rgba(0,229,255,0.15),0 0 80px rgba(0,229,255,0.05)} }

.progress-bar-track { width:100%; height:4px; background:rgba(0,229,255,0.1); border-radius:2px; overflow:hidden; margin-top:16px; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,#00e5ff,#4d7cff,#8b5cf6,#00e5ff); background-size:300% 100%; border-radius:2px; animation:progressSweep 2s linear infinite; }
@keyframes progressSweep { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.card-error-glow-pink { animation:errorGlowPink 2s ease-in-out infinite; }
@keyframes errorGlowPink { 0%,100%{box-shadow:0 0 20px rgba(255,0,110,0.05)} 50%{box-shadow:0 0 40px rgba(255,0,110,0.15),0 0 80px rgba(255,0,110,0.05)} }
.card-error-glow-amber { animation:errorGlowAmber 2s ease-in-out infinite; }
@keyframes errorGlowAmber { 0%,100%{box-shadow:0 0 20px rgba(251,191,36,0.05)} 50%{box-shadow:0 0 40px rgba(251,191,36,0.15),0 0 80px rgba(251,191,36,0.05)} }
.card-shake { animation:cardShake 0.5s ease; }
@keyframes cardShake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-4px)} 20%,40%,60%,80%{transform:translateX(4px)} }
.icon-bounce { animation:iconBounce 0.6s ease; }
@keyframes iconBounce { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} }

@keyframes spin { to{transform:rotate(360deg)} }

@media(max-width:640px) { .orb-1,.orb-2,.orb-3,.orb-4{transform:scale(0.5)} .ring-1,.ring-2{display:none} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important} }