@keyframes flash-increase{0%{box-shadow:0 0 rgba(var(--success-color-rgb),0);transform:scale(1)}50%{box-shadow:0 0 20px 5px rgba(var(--success-color-rgb),.4),inset 0 0 20px 5px rgba(var(--success-color-rgb),.2);transform:scale(1.02)}to{box-shadow:0 0 rgba(var(--success-color-rgb),0);transform:scale(1)}}@keyframes flash-decrease{0%{box-shadow:0 0 rgba(var(--danger-color-rgb),0);transform:scale(1)}50%{box-shadow:0 0 20px 5px rgba(var(--danger-color-rgb),.4),inset 0 0 20px 5px rgba(var(--danger-color-rgb),.2);transform:scale(1.02)}to{box-shadow:0 0 rgba(var(--danger-color-rgb),0);transform:scale(1)}}.flash-increase{animation:flash-increase .8s cubic-bezier(.4,0,.2,1)}.flash-decrease{animation:flash-decrease .8s cubic-bezier(.4,0,.2,1)}.price-flash{position:relative;transition:all .3s ease}.price-flash:after{animation:priceFlash 1s ease-out;border-radius:4px;content:"";top:-4px;right:-4px;bottom:-4px;left:-4px;opacity:0;pointer-events:none;position:absolute}.flash-up:after{background:radial-gradient(ellipse at center,rgba(16,185,129,.3) 0,transparent 70%);box-shadow:0 0 20px rgba(16,185,129,.4)}.flash-down:after{background:radial-gradient(ellipse at center,rgba(239,68,68,.3) 0,transparent 70%);box-shadow:0 0 20px rgba(239,68,68,.4)}@keyframes priceFlash{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.2)}}.price-value{transition:color .3s ease,transform .2s ease}@keyframes pulse-live{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}70%{box-shadow:0 0 0 10px transparent;opacity:.7}to{box-shadow:0 0 0 0 transparent;opacity:1}}.live-indicator{align-items:center;background:rgba(16,185,129,.1);border-radius:20px;color:#10b981;display:inline-flex;font-size:.75rem;font-weight:600;gap:6px;padding:4px 12px}.live-indicator:before{animation:pulse 2s infinite;background:#10b981;border-radius:50%;content:"";height:8px;width:8px}.live-indicator.offline{background:rgba(107,114,128,.1);color:#6b7280}.live-indicator.offline:before{animation:none;background:#6b7280}.price-up{color:var(--success-color)!important}.price-down{color:var(--danger-color)!important}[data-ask-price],[data-bid-price],[data-change],[data-price]{transition:color .3s ease,transform .3s ease}.ws-updated{position:relative}.ws-updated:after{animation:pulse-live 1.5s ease-in-out 3;background-color:#ffc107;border-radius:50%;content:"";height:6px;position:absolute;right:-2px;top:-2px;width:6px}.ws-connecting{opacity:.6;pointer-events:none}.ws-connecting:before{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1) 50%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.ws-error{border:1px solid rgba(var(--danger-color-rgb),.3)}.ws-connected{box-shadow:0 0 0 1px rgba(var(--success-color-rgb),.1)}.ws-connection-status{align-items:center;backdrop-filter:blur(10px);background:rgba(255,255,255,.95);border-radius:12px;bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;font-size:.875rem;gap:12px;opacity:0;padding:12px 20px;position:fixed;right:20px;transform:translateY(100px);transition:all .3s ease;z-index:1000}.ws-connection-status.show{opacity:1;transform:translateY(0)}.ws-status-icon{border-radius:50%;flex-shrink:0;height:12px;position:relative;width:12px}.ws-status-icon.connected{animation:pulse 2s infinite;background:#10b981;box-shadow:0 0 10px rgba(16,185,129,.5)}.ws-status-icon.connecting,.ws-status-icon.reconnecting{animation:pulse 1s infinite;background:var(--gold-primary)}.ws-status-icon.disconnected{background:#6b7280}.ws-status-icon.error,.ws-status-icon.failed{animation:pulse .5s infinite;background:#ef4444}.ws-reconnect-progress{display:none;margin-top:8px;width:100%}.ws-connection-status.reconnecting .ws-reconnect-progress{display:block}.ws-reconnect-bar{background:var(--neutral-200,#e5e7eb);border-radius:3px;height:3px;overflow:hidden}.ws-reconnect-fill{animation:reconnectProgress 3s linear infinite;background:var(--gold-primary);border-radius:3px;height:100%}@keyframes reconnectProgress{0%{width:0}to{width:100%}}.ws-metrics{backdrop-filter:blur(10px);background:rgba(30,30,30,.95);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.3);color:#fff;font-family:Courier New,monospace;font-size:.75rem;min-width:250px;opacity:0;padding:16px;position:fixed;right:20px;top:80px;transform:translate(320px);transition:all .3s ease;z-index:999}.ws-metrics.show{opacity:1;transform:translate(0)}.ws-metric-row{border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;padding:4px 0}.ws-metric-row:last-child{border-bottom:none}.ws-metric-label{color:#9ca3af}.ws-metric-value{color:#10b981;font-weight:600}.latency-indicator{align-items:center;color:#6b7280;display:inline-flex;font-size:.625rem;font-variant-numeric:tabular-nums;gap:4px}.latency-indicator.good{color:#10b981}.latency-indicator.medium{color:var(--gold-primary)}.latency-indicator.poor{color:#ef4444}.latency-indicator:before{background:currentColor;border-radius:50%;content:"";height:4px;width:4px}.ws-debug-panel{background:rgba(30,30,30,.98);bottom:0;color:#f3f4f6;left:0;max-height:300px;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:9999}.ws-debug-panel.show{transform:translateY(0)}.ws-debug-header{align-items:center;background:rgba(0,0,0,.3);border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;justify-content:space-between;padding:12px 20px}.ws-debug-content{font-family:Courier New,monospace;font-size:.75rem;max-height:250px;overflow-y:auto;padding:16px 20px}.ws-debug-message{border-bottom:1px solid hsla(0,0%,100%,.05);display:flex;gap:12px;padding:4px 0}.ws-debug-time{color:#6b7280;flex-shrink:0}.ws-debug-type{color:#3b82f6;flex-shrink:0;font-weight:600;min-width:80px}.ws-debug-data{color:#d1d5db;flex:1;word-break:break-all}@media(max-width:767px){.ws-connection-status{bottom:70px}.ws-connection-status,.ws-metrics{left:10px;max-width:calc(100vw - 20px);right:10px}.ws-metrics{bottom:130px;top:auto}}
