@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow{0%,to{opacity:.6}50%{opacity:.9}}.hero-card-preview{position:relative;transition:transform .5s ease,box-shadow .5s ease}.hero-card-preview:hover{box-shadow:0 25px 50px -12px #38bdf84d,0 0 15px #38bdf833!important;transform:translateY(-10px) scale(1.02)}.hero-card-preview:after{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(45deg,#38bdf8,#818cf8,#38bdf8);background-size:400% 400%;border-radius:24px;bottom:-2px;content:"";left:-2px;opacity:.6;position:absolute;right:-2px;top:-2px;z-index:-1}.card-glow{animation:glow 4s ease-in-out infinite}:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;--bg-surface:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--text-inverse:#0f172a;--primary:#0891b2;--primary-light:#06b6d4;--primary-dark:#0e7490;--secondary:#f59e0b;--secondary-light:#fbbf24;--secondary-dark:#d97706;--success:#10b981;--success-light:#34d399;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;--border-primary:#475569;--border-secondary:#64748b;--shadow-sm:0 1px 2px 0 #00000080;--shadow-md:0 4px 6px -1px #0009,0 2px 4px -2px #0009;--shadow-lg:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;--shadow-xl:0 20px 25px -5px #000c,0 8px 10px -6px #000c;--gradient-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);--gradient-secondary:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-light) 100%);--gradient-surface:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);--gradient-hero:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%)}*{box-sizing:border-box}#root,*,body,html{margin:0;padding:0}#root,body,html{background:linear-gradient(135deg,#0f172a,#1e293b);min-height:100vh}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#f8fafc;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.7;overflow-x:hidden}code{background:#334155;background:var(--bg-tertiary);border-radius:.375rem;color:#06b6d4;color:var(--primary-light);font-family:JetBrains Mono,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.875rem;padding:.25rem .5rem}.app{background:linear-gradient(135deg,#0f172a,#1e293b);min-height:100vh;position:relative}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293b;background:var(--bg-card);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:.75rem;box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{border-color:#64748b;border-color:var(--border-secondary);box-shadow:0 20px 25px -5px #000c,0 8px 10px -6px #000c;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.card-gradient{background:linear-gradient(135deg,#1e293b,#334155);background:var(--gradient-surface);border:1px solid #06b6d433}button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:.5rem;justify-content:center;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary{background:linear-gradient(135deg,#0891b2,#06b6d4);background:var(--gradient-primary);border:1px solid #0891b2;border:1px solid var(--primary);box-shadow:0 4px 6px -1px #0009,0 2px 4px -2px #0009;box-shadow:var(--shadow-md);color:#fff;padding:.75rem 1.5rem}.btn-primary:hover{border-color:#06b6d4;border-color:var(--primary-light);box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-secondary{background:linear-gradient(135deg,#f59e0b,#fbbf24);background:var(--gradient-secondary);border:1px solid #f59e0b;border:1px solid var(--secondary);box-shadow:0 4px 6px -1px #0009,0 2px 4px -2px #0009;box-shadow:var(--shadow-md);color:#0f172a;color:var(--text-inverse);padding:.75rem 1.5rem}.btn-secondary:hover{border-color:#fbbf24;border-color:var(--secondary-light);box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-outline{background:#0000;border:1px solid #475569;border:1px solid var(--border-primary);color:#f8fafc;color:var(--text-primary);padding:.75rem 1.5rem}.btn-outline:hover{background:#334155;background:var(--bg-tertiary);border-color:#0891b2;border-color:var(--primary);color:#06b6d4;color:var(--primary-light)}.btn-ghost{background:#0000;border:1px solid #0000;color:#cbd5e1;color:var(--text-secondary);padding:.5rem 1rem}.btn-ghost:hover{background:#334155;background:var(--bg-tertiary);color:#f8fafc;color:var(--text-primary)}button:disabled{box-shadow:0 1px 2px 0 #00000080!important;box-shadow:var(--shadow-sm)!important;cursor:not-allowed;opacity:.6;transform:none!important}input,select,textarea{background:#334155;background:var(--bg-tertiary);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:.5rem;color:#f8fafc;color:var(--text-primary);font-family:inherit;padding:.75rem 1rem;transition:all .2s ease}input:focus,select:focus,textarea:focus{background:#1e293b;background:var(--bg-secondary);border-color:#0891b2;border-color:var(--primary);box-shadow:0 0 0 3px #0891b21a;outline:none}input::placeholder,textarea::placeholder{color:#94a3b8;color:var(--text-muted)}.fade-in{animation:fadeIn .6s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.slide-up{animation:slideUp .5s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.glow{overflow:hidden;position:relative}.glow:before{background:linear-gradient(90deg,#0000,#06b6d44d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.glow:hover:before{left:100%}.status-success{color:#10b981;color:var(--success)}.status-warning{color:#f59e0b;color:var(--warning)}.status-error{color:#ef4444;color:var(--error)}.status-info{color:#3b82f6;color:var(--info)}.loading{overflow:hidden;position:relative}.loading:after{animation:loading 1.5s infinite;background:linear-gradient(90deg,#0000,#06b6d433,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes loading{0%{left:-100%}to{left:100%}}@media (max-width:1024px){:root{--shadow-lg:0 8px 12px -2px #0009,0 3px 5px -3px #0009}}@media (max-width:768px){.app{padding:1rem}.card{border-radius:.5rem}.btn-outline,.btn-primary,.btn-secondary{font-size:.875rem;padding:.625rem 1.25rem}}@media (max-width:640px){body{font-size:14px}.btn-outline,.btn-primary,.btn-secondary{font-size:.8rem;padding:.5rem 1rem}}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#1e293b;background:var(--bg-secondary);border-radius:3px}::-webkit-scrollbar-thumb{background:#475569;background:var(--border-primary);border-radius:3px;-webkit-transition:background .2s ease;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:#0891b2;background:var(--primary)}::-webkit-scrollbar-corner{background:#1e293b;background:var(--bg-secondary)}*{scrollbar-color:#475569 #1e293b;scrollbar-color:var(--border-primary) var(--bg-secondary);scrollbar-width:thin}::selection{background:#0891b2;background:var(--primary);color:#fff}::-moz-selection{background:#0891b2;background:var(--primary);color:#fff}.exchange-flow{background:linear-gradient(135deg,#0f172a,#1e293b 50%,#334155);background:var(--gradient-hero);color:#f8fafc;color:var(--text-primary);min-height:100vh;padding:20px}.connecting-state,.error-state{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:80vh;text-align:center}.spinner{animation:spin 1s linear infinite;border:4px solid #475569;border-top:4px solid #0891b2;border:4px solid var(--border-primary);border-radius:50%;border-top-color:var(--primary);height:40px;margin-bottom:20px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.retry-btn{background:linear-gradient(135deg,#0891b2,#06b6d4);background:var(--gradient-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;margin-top:20px;padding:12px 24px;transition:all .2s ease}.retry-btn:hover{box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.home-state{margin:0 auto;max-width:800px}.header{align-items:center;background:#1e293b;background:var(--bg-card);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:16px;box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);display:flex;justify-content:space-between;margin-bottom:40px;padding:20px}.header-content h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#0891b2,#06b6d4);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:700;margin-bottom:8px}.header-content p{color:#cbd5e1;color:var(--text-secondary);font-size:16px}.auth-controls,.user-menu{align-items:center;display:flex;gap:12px}.user-info{align-items:flex-end;display:flex;flex-direction:column;gap:4px}.user-name{font-size:14px;font-weight:600}.premium-badge{background:linear-gradient(135deg,#f59e0b,#fbbf24);background:var(--gradient-secondary);border-radius:12px;color:#fff;font-size:10px;font-weight:600;padding:2px 8px}.logout-btn{align-items:center;background:#334155;background:var(--bg-tertiary);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:18px;color:#cbd5e1;color:var(--text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.logout-btn:hover{background:#334155;background:var(--bg-surface);color:#f8fafc;color:var(--text-primary)}.auth-buttons{display:flex;gap:8px}.auth-btn{border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 16px;transition:all .2s ease}.login-btn{background:#0000;border:1px solid #475569;border:1px solid var(--border-primary);color:#f8fafc;color:var(--text-primary)}.login-btn:hover{background:#334155;background:var(--bg-tertiary)}.register-btn{background:linear-gradient(135deg,#0891b2,#06b6d4);background:var(--gradient-primary);border:1px solid #0891b2;border:1px solid var(--primary);color:#fff}.register-btn:hover{box-shadow:0 4px 6px -1px #0009,0 2px 4px -2px #0009;box-shadow:var(--shadow-md);transform:translateY(-1px)}.user-card-preview{background:#1e293b;background:var(--bg-card);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:16px;box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);margin-bottom:32px;padding:24px}.user-card-preview h3{color:#f8fafc;color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:16px}.action-buttons{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:32px}.action-btn{align-items:center;border:none;border-radius:16px;cursor:pointer;display:flex;font-size:18px;font-weight:600;gap:8px;justify-content:center;min-height:80px;padding:20px;transition:all .2s ease}.primary-btn{background:linear-gradient(135deg,#0891b2,#06b6d4);background:var(--gradient-primary);box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);color:#fff}.primary-btn:hover:not(:disabled){box-shadow:0 20px 25px -5px #000c,0 8px 10px -6px #000c;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.secondary-btn{background:#1e293b;background:var(--bg-card);border:2px solid #475569;border:2px solid var(--border-primary);color:#f8fafc;color:var(--text-primary)}.secondary-btn:hover:not(:disabled){background:#334155;background:var(--bg-tertiary);border-color:#0891b2;border-color:var(--primary)}.action-btn:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.navigation-buttons{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:32px}.nav-btn{background:#334155;background:var(--bg-tertiary);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:12px;color:#f8fafc;color:var(--text-primary);cursor:pointer;font-weight:500;padding:16px 20px;text-align:center;transition:all .2s ease}.nav-btn:hover{background:#334155;background:var(--bg-surface);border-color:#0891b2;border-color:var(--primary);transform:translateY(-1px)}.customize-btn:hover{border-color:#f59e0b;border-color:var(--secondary)}.admin-btn:hover{border-color:#ef4444;border-color:var(--error)}.connection-status{align-items:center;background:#334155;background:var(--bg-tertiary);border-radius:8px;color:#cbd5e1;color:var(--text-secondary);display:flex;font-size:14px;gap:8px;justify-content:center;padding:12px 16px}.status-indicator{border-radius:50%;height:8px;width:8px}.status-indicator.connected{background:#10b981;background:var(--success);box-shadow:0 0 6px #10b981;box-shadow:0 0 6px var(--success)}.status-indicator.connecting{animation:pulse 1.5s infinite;background:#f59e0b;background:var(--warning)}.status-indicator.disconnected{background:#ef4444;background:var(--error)}.confirm-state,.error-state,.generate-state,.scan-state,.success-state{margin:0 auto;max-width:600px}.back-btn{background:#0000;border:1px solid #475569;border:1px solid var(--border-primary);border-radius:8px;color:#cbd5e1;color:var(--text-secondary);cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s ease}.back-btn:hover{background:#334155;background:var(--bg-tertiary);color:#f8fafc;color:var(--text-primary)}.waiting-confirmation{animation:pulse 2s infinite;background:#1e293b;background:var(--bg-card);border:2px solid #0891b2;border:2px solid var(--primary);border-radius:16px;margin-top:24px;padding:24px;text-align:center}.pulse-indicator{animation:pulse 1.5s infinite;background:#0891b2;background:var(--primary);border-radius:50%;height:16px;margin:0 auto 16px;width:16px}.view-exchange-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);background:var(--gradient-secondary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;margin-top:16px;padding:12px 24px}.success-animation{margin-bottom:32px;text-align:center}.checkmark{animation:bounceIn .6s ease-out;font-size:64px;margin-bottom:16px}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) rotate(-1turn)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1) rotate(0deg)}}.exchanged-card{background:#1e293b;background:var(--bg-card);border:1px solid #475569;border:1px solid var(--border-primary);border-radius:16px;box-shadow:0 10px 15px -3px #000000b3,0 4px 6px -4px #000000b3;box-shadow:var(--shadow-lg);padding:24px}.exchanged-card h3{color:#f8fafc;color:var(--text-primary);margin-bottom:16px}@media (max-width:1024px){.hero{padding:80px 0 40px!important}.heroContainer{gap:30px!important;grid-template-columns:1fr!important;text-align:center}.featuresGrid,.pricingGrid,.testimonials{gap:15px!important;grid-template-columns:repeat(2,1fr)!important}.demoSteps{gap:20px!important;grid-template-columns:1fr!important}}@media (max-width:768px){.hero{padding:60px 0 30px!important}.heroTitle{font-size:36px!important;line-height:1.2!important}.heroSubtitle{font-size:18px!important}.sectionTitle{font-size:28px!important}.sectionSubtitle{font-size:16px!important}.featuresGrid,.footerContent,.pricingGrid,.testimonials{grid-template-columns:1fr!important}.footerContent{gap:20px!important;text-align:center}.header{flex-direction:column;gap:16px;padding:15px!important;text-align:center}.header-content h1{font-size:20px!important}.action-buttons{gap:12px;grid-template-columns:1fr}.action-btn{font-size:16px!important;min-height:60px!important;padding:16px!important}.navigation-buttons{gap:8px;grid-template-columns:1fr}.nav-btn{font-size:14px!important;padding:12px 16px!important}.exchange-flow{padding:10px}.user-card-preview{padding:16px!important}.navLinks{flex-direction:column;gap:12px!important}.auth-buttons{flex-direction:column;width:100%}.auth-btn,.primaryButton,.secondaryButton{text-align:center;width:100%!important}}@media (max-width:480px){.hero{padding:40px 0 20px!important}.heroTitle{font-size:28px!important}.heroSubtitle{font-size:16px!important}.sectionContainer{padding:0 15px!important}.featureCard,.pricingCard,.testimonial{padding:20px 15px!important}.action-btn{font-size:14px!important;padding:12px!important}.header{padding:10px!important}}