*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--primary-foreground: #ffffff;--background: #0f0f1a;--background-light: #1a1a2e;--foreground: #f8fafc;--muted-foreground: #94a3b8;--border: rgba(255, 255, 255, .1);--card: rgba(30, 30, 50, .8);--card-border: rgba(99, 102, 241, .2);--secondary: rgba(255, 255, 255, .1);--success: #22c55e;--success-light: #4ade80;--error: #ef4444;--error-light: #f87171;--gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--gradient-2: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--gradient-3: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);--glow: 0 0 40px rgba(99, 102, 241, .3);--glow-success: 0 0 40px rgba(34, 197, 94, .3);--glow-error: 0 0 40px rgba(239, 68, 68, .3)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--foreground);min-height:100vh;line-height:1.6;overflow-x:hidden}.app{min-height:100vh;position:relative}.bg-decoration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.bg-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s ease-in-out infinite}.bg-blob-1{width:600px;height:600px;background:var(--gradient-1);top:-200px;right:-200px;animation-delay:0s}.bg-blob-2{width:500px;height:500px;background:var(--gradient-2);bottom:-150px;left:-150px;animation-delay:-7s}.bg-blob-3{width:400px;height:400px;background:var(--gradient-3);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(-30px,-20px) scale(1.02)}}.container{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:2rem 1rem;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;margin-bottom:2rem}.logo-container{display:flex;align-items:center;justify-content:center;gap:1rem}.logo-icon{width:56px;height:56px;background:var(--gradient-1);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);animation:pulse-glow 3s ease-in-out infinite}.logo-icon svg{width:32px;height:32px;color:#fff}@keyframes pulse-glow{0%,to{box-shadow:var(--glow)}50%{box-shadow:0 0 60px #6366f180}}.logo-text h1{font-size:1.75rem;font-weight:700;background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text .subtitle{font-size:.875rem;color:var(--muted-foreground);letter-spacing:.05em}.progress-container{margin-bottom:2rem}.progress-bar{display:flex;align-items:center;justify-content:center;gap:0}.progress-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all .3s ease}.progress-step span{font-size:.75rem;color:var(--muted-foreground);transition:color .3s ease}.progress-step.active span{color:var(--primary-light)}.step-dot{width:40px;height:40px;border-radius:50%;background:var(--secondary);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.progress-step.active .step-dot{background:var(--gradient-1);border-color:transparent;box-shadow:var(--glow);transform:scale(1.1)}.step-dot svg{width:18px;height:18px;color:#fff}.progress-line{width:80px;height:3px;background:var(--secondary);border-radius:2px;margin:0 .5rem 1.5rem;position:relative;overflow:hidden}.progress-line:after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:var(--gradient-1);border-radius:2px;transition:width .5s ease}.progress-line.active:after{width:100%}.main-card{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:2.5rem 2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--glow);opacity:0;transform:translateY(20px) scale(.95);transition:all .4s cubic-bezier(.34,1.56,.64,1)}.main-card.show{opacity:1;transform:translateY(0) scale(1)}.content-section{text-align:center}.icon-wrapper{width:80px;height:80px;margin:0 auto 1.5rem;background:var(--secondary);border-radius:24px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.icon-wrapper svg{width:40px;height:40px;color:var(--primary-light)}.icon-wrapper.pulse{animation:pulse-icon 2s ease-in-out infinite}@keyframes pulse-icon{0%,to{transform:scale(1);box-shadow:0 0 #6366f166}50%{transform:scale(1.05);box-shadow:0 0 0 15px #6366f100}}.icon-wrapper.spin svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.icon-wrapper.success-bounce{background:linear-gradient(135deg,#22c55e33,#4ade8033);animation:success-bounce .6s cubic-bezier(.34,1.56,.64,1)}.icon-wrapper.success-bounce svg{color:var(--success-light)}@keyframes success-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.icon-wrapper.shake{background:linear-gradient(135deg,#ef444433,#f8717133);animation:shake .5s ease-in-out}.icon-wrapper.shake svg{color:var(--error-light)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}h2{font-size:1.5rem;font-weight:700;margin-bottom:.75rem;background:linear-gradient(135deg,var(--foreground) 0%,var(--muted-foreground) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.description{font-size:.9rem;color:var(--muted-foreground);margin-bottom:2rem;line-height:1.7}.error-text{color:var(--error-light)}.qr-wrapper{margin-bottom:1.5rem}.qr-frame{position:relative;display:inline-block;padding:16px;background:#fff;border-radius:16px;animation:qr-appear .5s cubic-bezier(.34,1.56,.64,1)}@keyframes qr-appear{0%{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.qr-corner{position:absolute;width:20px;height:20px;border:3px solid var(--primary);animation:corner-pulse 2s ease-in-out infinite}.qr-corner.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:8px 0 0}.qr-corner.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.qr-corner.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 8px}.qr-corner.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 8px}@keyframes corner-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.qr-image{width:180px;height:180px;display:block}.info-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--secondary);padding:.5rem 1rem;border-radius:100px;margin-bottom:.75rem;font-size:.75rem;animation:fade-in-up .3s ease forwards;opacity:0}.info-badge:nth-child(2){animation-delay:.1s}.info-label{color:var(--muted-foreground)}.info-value{color:var(--primary-light);font-weight:600;font-family:monospace}.progress-dots{margin-top:1rem;font-size:.875rem;color:var(--muted-foreground)}.code-display{background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border:1px solid var(--card-border);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;animation:code-appear .5s ease}@keyframes code-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.code-label{font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.code-value{font-size:1rem;font-family:JetBrains Mono,monospace;font-weight:600;color:var(--primary-light);word-break:break-all;line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;font-size:.9rem;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:var(--gradient-1);color:var(--primary-foreground);box-shadow:var(--glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px #6366f166}.btn-primary:active{transform:translateY(0)}.btn-glow{animation:btn-glow 2s ease-in-out infinite}@keyframes btn-glow{0%,to{box-shadow:var(--glow)}50%{box-shadow:0 0 60px #6366f180}}.btn-primary.copied{background:linear-gradient(135deg,var(--success),var(--success-light));box-shadow:var(--glow-success)}.btn-secondary{background:var(--secondary);color:var(--foreground);border:1px solid var(--border)}.btn-secondary:hover{background:#ffffff26;transform:translateY(-2px)}.btn-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.btn-icon svg{width:100%;height:100%}.btn-group{display:flex;gap:.75rem}.btn-group .btn{flex:1}.footer{margin-top:2rem}.instructions{background:var(--secondary);border-radius:16px;padding:1.5rem}.instructions h3{font-size:.875rem;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.instruction-list{display:flex;flex-direction:column;gap:.75rem}.instruction-item{display:flex;align-items:center;gap:.75rem}.instruction-num{width:24px;height:24px;background:var(--gradient-1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#fff;flex-shrink:0}.instruction-text{font-size:.8rem;color:var(--muted-foreground)}.qq-group-section{margin-top:1.5rem;text-align:center}.qq-group-section .btn{width:100%}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);background:var(--gradient-1);color:#fff;padding:.875rem 1.5rem;border-radius:100px;font-size:.875rem;font-weight:500;box-shadow:var(--glow);opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:1000}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.fade-in{animation:fade-in .4s ease forwards}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-down{animation:fade-in-down .6s ease forwards}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fade-in-up .6s ease forwards;animation-delay:.2s;opacity:0}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-state .icon-wrapper{box-shadow:var(--glow-success)}.error-state .icon-wrapper{box-shadow:var(--glow-error)}.success-state .main-card{border-color:#22c55e4d}.error-state .main-card{border-color:#ef44444d}@media (max-width: 480px){.container{padding:1rem}.main-card{padding:2rem 1.5rem;border-radius:20px}.qr-image{width:160px;height:160px}.btn-group{flex-direction:column}.progress-line{width:50px}}