// fp-ui.jsx — World-Class UI Primitives
// Spring Physics · 3D Tilt · Neon Glass · Aurora · Particles · Holographic

const { useState: useUS, useEffect: useUE, useRef: useUR, useCallback: useUC, useMemo: useUM } = React;

// ═══════════════════════════════════════════════════════════════
// SPRING PHYSICS ENGINE
// ═══════════════════════════════════════════════════════════════

function useSpringValue(target, cfg = {}) {
  const { stiffness = 280, damping = 28, mass = 1 } = cfg;
  const [val, setVal] = useUS(target);
  const state = useUR({ cur: target, vel: 0, tgt: target, raf: null });

  useUE(() => {
    state.current.tgt = target;
    const s = state.current;
    if (s.raf) cancelAnimationFrame(s.raf);
    let last = performance.now();
    const tick = (now) => {
      const dt = Math.min((now - last) / 1000, 0.05);
      last = now;
      const f = (s.tgt - s.cur) * stiffness / mass;
      const d = s.vel * damping / mass;
      s.vel += (f - d) * dt;
      s.cur += s.vel * dt;
      setVal(s.cur);
      const settled = Math.abs(s.vel) < 0.01 && Math.abs(s.tgt - s.cur) < 0.01;
      if (!settled) s.raf = requestAnimationFrame(tick);
      else { s.cur = s.tgt; setVal(s.tgt); }
    };
    s.raf = requestAnimationFrame(tick);
    return () => { if (s.raf) cancelAnimationFrame(s.raf); };
  }, [target, stiffness, damping, mass]);

  return val;
}

// ─── 3D Tilt Hook ─────────────────────────────────────────────
function use3DTilt(opts = {}) {
  const { maxTilt = 12, perspective = 900, glare = true, scale = 1.04 } = opts;
  const ref = useUR(null);
  const [tilt, setTilt] = useUS({ rx: 0, ry: 0, gx: 50, gy: 50, active: false });
  const springRx = useSpringValue(tilt.rx, { stiffness: 250, damping: 22 });
  const springRy = useSpringValue(tilt.ry, { stiffness: 250, damping: 22 });
  const springScale = useSpringValue(tilt.active ? scale : 1, { stiffness: 300, damping: 25 });

  const onMove = useUC((e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
    const ex = e.clientX ?? e.touches?.[0]?.clientX ?? cx;
    const ey = e.clientY ?? e.touches?.[0]?.clientY ?? cy;
    const rx = ((ey - cy) / (r.height / 2)) * -maxTilt;
    const ry = ((ex - cx) / (r.width / 2)) * maxTilt;
    const gx = ((ex - r.left) / r.width) * 100;
    const gy = ((ey - r.top) / r.height) * 100;
    setTilt({ rx, ry, gx, gy, active: true });
  }, [maxTilt]);

  const onLeave = useUC(() => setTilt({ rx: 0, ry: 0, gx: 50, gy: 50, active: false }), []);

  const transform = `perspective(${perspective}px) rotateX(${springRx}deg) rotateY(${springRy}deg) scale(${springScale})`;
  const glareStyle = glare && tilt.active ? {
    position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2,
    background: `radial-gradient(circle at ${tilt.gx}% ${tilt.gy}%, rgba(255,255,255,0.12) 0%, transparent 60%)`,
    transition: 'none',
  } : null;

  return { ref, transform, glareStyle, active: tilt.active, onMouseMove: onMove, onMouseLeave: onLeave, onTouchMove: onMove, onTouchEnd: onLeave };
}

// ─── Spring Scale Hook (for buttons/badges) ───────────────────
function useSpringScale(opts = {}) {
  const { hoverScale = 1.07, tapScale = 0.94, stiffness = 400, damping = 20 } = opts;
  const [target, setTarget] = useUS(1);
  const scale = useSpringValue(target, { stiffness, damping });
  return {
    scale,
    style: { transform: `scale(${scale})`, display: 'inline-flex', willChange: 'transform' },
    onMouseEnter: () => setTarget(hoverScale),
    onMouseLeave: () => setTarget(1),
    onMouseDown:  () => setTarget(tapScale),
    onMouseUp:    () => setTarget(hoverScale),
    onTouchStart: () => setTarget(tapScale),
    onTouchEnd:   () => setTarget(1),
  };
}

// ═══════════════════════════════════════════════════════════════
// AURORA BACKGROUND
// ═══════════════════════════════════════════════════════════════
function AuroraBackground({ accent = '#00f5ff' }) {
  return (
    <div style={{ position:'fixed', inset:0, overflow:'hidden', pointerEvents:'none', zIndex:0 }}>
      {/* Deep space base */}
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 120% 80% at 50% -20%, #0a0f1a 0%, #040608 60%)' }} />
      {/* Aurora layers */}
      <div style={{ position:'absolute', width:'140%', height:'140%', top:'-20%', left:'-20%', background:`conic-gradient(from 0deg at 30% 40%, transparent 0deg, ${accent}18 60deg, transparent 120deg, #ff008018 180deg, transparent 240deg, #8b00ff12 300deg, transparent 360deg)`, animation:'auroraRotate 20s linear infinite', filter:'blur(40px)' }} />
      <div style={{ position:'absolute', width:'120%', height:'120%', top:'-10%', left:'-10%', background:`conic-gradient(from 180deg at 70% 60%, transparent 0deg, #00ff8812 80deg, transparent 160deg, ${accent}15 220deg, transparent 300deg)`, animation:'auroraRotate 28s linear infinite reverse', filter:'blur(60px)' }} />
      {/* Mesh gradient */}
      <div style={{ position:'absolute', inset:0, background:`radial-gradient(ellipse 60% 50% at 10% 90%, ${accent}0a 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 90% 10%, #ff00801a 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 50% 50%, #8b00ff08 0%, transparent 70%)` }} />
      {/* Noise grain */}
      <div style={{ position:'absolute', inset:0, backgroundImage:`url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")`, opacity:0.6, mixBlendMode:'overlay' }} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// PARTICLE FIELD
// ═══════════════════════════════════════════════════════════════
function ParticleField({ count = 28, accent = '#00f5ff' }) {
  const particles = useUM(() => Array.from({ length: count }, (_, i) => ({
    id: i,
    x: Math.random() * 100, y: Math.random() * 100,
    size: Math.random() * 2 + 0.5,
    delay: Math.random() * 8,
    dur: 6 + Math.random() * 10,
    color: [accent, '#00ff88', '#ff0080', '#8b00ff', '#ffa500'][Math.floor(Math.random() * 5)],
    opacity: Math.random() * 0.4 + 0.1,
  })), [count, accent]);

  return (
    <div style={{ position:'fixed', inset:0, pointerEvents:'none', zIndex:0, overflow:'hidden' }}>
      {particles.map(p => (
        <div key={p.id} style={{
          position:'absolute', left:`${p.x}%`, top:`${p.y}%`,
          width:p.size, height:p.size, borderRadius:'50%',
          background:p.color, opacity:p.opacity,
          boxShadow:`0 0 ${p.size * 4}px ${p.color}`,
          animation:`particleDrift ${p.dur}s ${p.delay}s ease-in-out infinite alternate`,
        }} />
      ))}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// NEON GLASS CARD
// ═══════════════════════════════════════════════════════════════
function NeonCard({ children, color = '#00f5ff', tilt = true, glow = true, style: extraStyle = {}, onClick, className }) {
  const tiltProps = use3DTilt({ maxTilt: tilt ? 10 : 0 });
  const hoverScale = useSpringValue(tiltProps.active ? 1 : 1, { stiffness: 300 });
  // Eindeutige ID pro Render damit @keyframes nicht kollidieren
  const cid = React.useMemo(() => 'nc' + Math.random().toString(36).slice(2, 8), []);

  return (
    <div
      ref={tiltProps.ref}
      onMouseMove={tiltProps.onMouseMove}
      onMouseLeave={tiltProps.onMouseLeave}
      onTouchMove={tiltProps.onTouchMove}
      onTouchEnd={tiltProps.onTouchEnd}
      onClick={onClick}
      style={{
        position:'relative', borderRadius:20, overflow:'hidden', cursor: onClick ? 'pointer' : 'default',
        background:`linear-gradient(135deg, ${color}10 0%, rgba(255,255,255,0.02) 50%, ${color}05 100%)`,
        backdropFilter:'blur(24px) saturate(180%)',
        WebkitBackdropFilter:'blur(24px) saturate(180%)',
        border:`1px solid ${color}33`,
        boxShadow: tiltProps.active && glow
          ? `0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px ${color}55, 0 0 50px ${color}33, 0 0 100px ${color}15, inset 0 1px 0 rgba(255,255,255,0.12)`
          : glow
          ? `0 8px 32px rgba(0,0,0,0.4), 0 0 24px ${color}22, 0 0 48px ${color}10, inset 0 1px 0 rgba(255,255,255,0.08)`
          : `0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)`,
        transform: tiltProps.transform,
        transition: tiltProps.active ? 'box-shadow 0.1s' : 'box-shadow 0.4s, transform 0.5s cubic-bezier(0.23,1,0.32,1)',
        willChange:'transform',
        transformStyle:'preserve-3d',
        animation: glow ? `${cid}_pulse 3.6s ease-in-out infinite` : 'none',
        ...extraStyle,
      }}
    >
      {glow && <style>{`
        @keyframes ${cid}_pulse {
          0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px ${color}22, 0 0 48px ${color}10, inset 0 1px 0 rgba(255,255,255,0.08); }
          50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 36px ${color}44, 0 0 80px ${color}22, inset 0 1px 0 rgba(255,255,255,0.10); }
        }
        @keyframes ${cid}_sweep {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}</style>}
      {/* Top edge highlight (animated sweep) */}
      <div style={{ position:'absolute', top:0, left:0, right:0, height:1, background:`linear-gradient(90deg, transparent, ${color}80, transparent)`, zIndex:3, borderRadius:'20px 20px 0 0' }} />
      {/* Left edge highlight */}
      <div style={{ position:'absolute', top:0, left:0, bottom:0, width:1, background:`linear-gradient(180deg, ${color}50, transparent)`, zIndex:3 }} />
      {/* Bottom edge color accent */}
      {glow && <div style={{ position:'absolute', bottom:0, left:0, right:0, height:1, background:`linear-gradient(90deg, transparent, ${color}40, transparent)`, zIndex:3 }} />}
      {/* Animated sweep highlight */}
      {glow && <div style={{ position:'absolute', top:0, left:0, right:0, height:'100%', pointerEvents:'none', overflow:'hidden', zIndex:1, opacity:0.5 }}>
        <div style={{ position:'absolute', top:0, left:0, width:'40%', height:'100%', background:`linear-gradient(90deg, transparent, ${color}10, transparent)`, animation:`${cid}_sweep 4.5s ease-in-out infinite` }}/>
      </div>}
      {/* Glare overlay */}
      {tiltProps.glareStyle && <div style={tiltProps.glareStyle} />}
      {/* Neon corner accents — dual */}
      {glow && <>
        <div style={{ position:'absolute', top:-30, right:-30, width:120, height:120, borderRadius:'50%', background:`radial-gradient(circle, ${color}30, transparent 65%)`, pointerEvents:'none', zIndex:1 }} />
        <div style={{ position:'absolute', bottom:-30, left:-30, width:90, height:90, borderRadius:'50%', background:`radial-gradient(circle, ${color}18, transparent 70%)`, pointerEvents:'none', zIndex:1 }} />
      </>}
      {/* Content */}
      <div style={{ position:'relative', zIndex:2 }}>{children}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// NEON BUTTON
// ═══════════════════════════════════════════════════════════════
function NeonButton({ children, color = '#00f5ff', onClick, style: ex = {}, size = 'md', disabled = false }) {
  const sp = useSpringScale({ hoverScale: 1.06, tapScale: 0.94 });
  const pad = size === 'sm' ? '7px 14px' : size === 'lg' ? '14px 24px' : '10px 18px';
  const fs  = size === 'sm' ? 10 : size === 'lg' ? 15 : 12;

  return (
    <button
      onClick={!disabled ? onClick : undefined}
      onMouseEnter={sp.onMouseEnter} onMouseLeave={sp.onMouseLeave}
      onMouseDown={sp.onMouseDown} onMouseUp={sp.onMouseUp}
      onTouchStart={sp.onTouchStart} onTouchEnd={sp.onTouchEnd}
      style={{
        ...sp.style, padding:pad, borderRadius:12,
        background: disabled ? 'rgba(255,255,255,0.04)' : `linear-gradient(135deg, ${color}20, ${color}08)`,
        border:`1px solid ${disabled ? 'rgba(255,255,255,0.08)' : color+'55'}`,
        color: disabled ? 'rgba(255,255,255,0.2)' : color,
        cursor: disabled ? 'not-allowed' : 'pointer',
        fontFamily:'Space Grotesk', fontWeight:700, fontSize:fs, letterSpacing:'.04em',
        boxShadow: disabled ? 'none' : `0 0 20px ${color}20, inset 0 1px 0 ${color}20`,
        backdropFilter:'blur(10px)',
        transition:'border-color 0.2s, box-shadow 0.2s, color 0.2s',
        position:'relative', overflow:'hidden',
        ...ex,
      }}
    >
      {!disabled && (
        <div style={{ position:'absolute', inset:0, background:`linear-gradient(90deg, transparent, ${color}15, transparent)`, animation:'shimmerSlide 2.5s infinite', backgroundSize:'200% 100%' }} />
      )}
      <span style={{ position:'relative', zIndex:1 }}>{children}</span>
    </button>
  );
}

// ═══════════════════════════════════════════════════════════════
// HOLOGRAPHIC BADGE
// ═══════════════════════════════════════════════════════════════
function HoloBadge({ children, color = '#00f5ff', pulse = false, size = 'sm' }) {
  const fs = size === 'xs' ? 7 : size === 'sm' ? 9 : 11;
  const pad = size === 'xs' ? '1px 6px' : size === 'sm' ? '2px 9px' : '4px 12px';
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:4,
      padding:pad, borderRadius:99,
      background:`linear-gradient(135deg, ${color}22, ${color}08)`,
      border:`1px solid ${color}44`,
      boxShadow:`0 0 12px ${color}20, inset 0 1px 0 ${color}20`,
      animation: pulse ? 'badgePulse 2s ease-in-out infinite' : 'none',
      backdropFilter:'blur(8px)',
    }}>
      <div style={{ fontSize:fs, fontFamily:'JetBrains Mono', fontWeight:700, color, letterSpacing:'.06em' }}>{children}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// NEON ODDS PILL
// ═══════════════════════════════════════════════════════════════
function OddsPill({ label, value, highlight = false, onClick }) {
  const sp = useSpringScale({ hoverScale: 1.08, tapScale: 0.95 });
  const c = highlight ? '#ffa500' : 'rgba(255,255,255,0.55)';
  return (
    <div
      onClick={onClick}
      onMouseEnter={sp.onMouseEnter} onMouseLeave={sp.onMouseLeave}
      onMouseDown={sp.onMouseDown} onMouseUp={sp.onMouseUp}
      style={{
        ...sp.style, minWidth:50, textAlign:'center',
        padding:'8px 6px', borderRadius:14, cursor:'pointer',
        background: highlight
          ? 'linear-gradient(135deg, rgba(255,165,0,0.15), rgba(255,165,0,0.05))'
          : 'rgba(255,255,255,0.05)',
        border:`1px solid ${highlight ? 'rgba(255,165,0,0.4)' : 'rgba(255,255,255,0.1)'}`,
        boxShadow: highlight ? '0 0 18px rgba(255,165,0,0.2), inset 0 1px 0 rgba(255,165,0,0.15)' : 'inset 0 1px 0 rgba(255,255,255,0.05)',
        backdropFilter:'blur(8px)', flexDirection:'column',
      }}
    >
      <div style={{ fontSize:8, color:'rgba(255,255,255,0.35)', fontFamily:'JetBrains Mono', letterSpacing:'.1em', marginBottom:3 }}>{label}</div>
      <div style={{ fontSize:15, fontWeight:800, fontFamily:'JetBrains Mono', color:c, textShadow: highlight ? '0 0 12px rgba(255,165,0,0.6)' : 'none' }}>{typeof value === 'number' ? value.toFixed(2) : value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// FORM DOT
// ═══════════════════════════════════════════════════════════════
function FormDot({ result, idx }) {
  const sp = useSpringScale({ hoverScale: 1.3, tapScale: 0.9 });
  const colors = { W:{ bg:'rgba(0,255,136,0.2)', c:'#00ff88', glow:'0 0 8px #00ff88' }, D:{ bg:'rgba(255,165,0,0.2)', c:'#ffa500', glow:'0 0 8px #ffa500' }, L:{ bg:'rgba(255,0,80,0.2)', c:'#ff0050', glow:'0 0 8px #ff0050' } };
  const s = colors[result] || colors.D;
  return (
    <div onMouseEnter={sp.onMouseEnter} onMouseLeave={sp.onMouseLeave} style={{ ...sp.style, width:16, height:16, borderRadius:5, fontSize:7, fontFamily:'JetBrains Mono', fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', background:s.bg, color:s.c, boxShadow:s.glow, animation:`fadeUp 0.3s ${idx*0.05}s both ease` }}>{result}</div>
  );
}

// ═══════════════════════════════════════════════════════════════
// NEON PROGRESS BAR
// ═══════════════════════════════════════════════════════════════
function NeonBar({ value, max = 100, color = '#00f5ff', height = 4, label, subLabel }) {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));
  return (
    <div>
      {(label || subLabel) && (
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
          {label && <span style={{ fontSize:9, color:'rgba(255,255,255,0.4)', fontFamily:'JetBrains Mono', letterSpacing:'.1em' }}>{label}</span>}
          {subLabel && <span style={{ fontSize:9, fontFamily:'JetBrains Mono', color, fontWeight:700 }}>{subLabel}</span>}
        </div>
      )}
      <div style={{ height, background:'rgba(255,255,255,0.06)', borderRadius:99, overflow:'hidden', position:'relative' }}>
        <div style={{ position:'absolute', inset:0, background:`linear-gradient(90deg, ${color}22, transparent)` }} />
        <div style={{ height:'100%', width:`${pct}%`, background:`linear-gradient(90deg, ${color}, ${color}cc)`, borderRadius:99, boxShadow:`0 0 10px ${color}80`, transition:'width 1s cubic-bezier(0.23,1,0.32,1)' }} />
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// HOLOGRAPHIC TEXT
// ═══════════════════════════════════════════════════════════════
function HoloText({ children, colors = ['#00f5ff','#00ff88','#ff0080','#ffa500'], size = 24, weight = 800, style: ex = {} }) {
  return (
    <div style={{
      fontSize:size, fontWeight:weight, fontFamily:'Space Grotesk',
      background:`linear-gradient(135deg, ${colors.join(', ')})`,
      WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
      backgroundClip:'text', letterSpacing:'-.02em',
      animation:'holoShift 4s ease-in-out infinite alternate',
      backgroundSize:'200% 100%',
      ...ex,
    }}>{children}</div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SPINNING NEON BORDER (for active agents etc)
// ═══════════════════════════════════════════════════════════════
function SpinNeonBorder({ color, active, radius = 20, children, style: ex = {} }) {
  return (
    <div style={{ position:'relative', borderRadius:radius, ...ex }}>
      {active && (
        <div style={{ position:'absolute', inset:-1.5, borderRadius:radius+2, background:`conic-gradient(from 0deg, transparent 0%, ${color} 30%, transparent 60%, ${color}88 80%, transparent 100%)`, animation:'spin 2.5s linear infinite', opacity:0.8 }} />
      )}
      <div style={{ position:'relative', borderRadius:radius, overflow:'hidden', background:'#0b0f15' }}>
        {children}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// STAT HEXAGON
// ═══════════════════════════════════════════════════════════════
function StatHex({ label, value, color = '#00f5ff', icon }) {
  const sp = useSpringScale({ hoverScale: 1.06 });
  return (
    <div {...sp} style={{ ...sp.style, flexDirection:'column', background:`linear-gradient(135deg, ${color}10, ${color}04)`, border:`1px solid ${color}25`, borderRadius:14, padding:'10px 8px', textAlign:'center', backdropFilter:'blur(10px)', boxShadow:`inset 0 1px 0 ${color}15` }}>
      {icon && <div style={{ fontSize:14, marginBottom:4 }}>{icon}</div>}
      <div style={{ fontSize:8, color:'rgba(255,255,255,0.3)', fontFamily:'JetBrains Mono', letterSpacing:'.08em', marginBottom:4, textTransform:'uppercase' }}>{label}</div>
      <div style={{ fontSize:16, fontWeight:800, fontFamily:'JetBrains Mono', color, textShadow:`0 0 12px ${color}80` }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// LIVE PULSE DOT
// ═══════════════════════════════════════════════════════════════
function LiveDot({ color = '#00ff88', size = 8 }) {
  return (
    <div style={{ position:'relative', width:size, height:size, flexShrink:0 }}>
      <div style={{ position:'absolute', inset:0, borderRadius:'50%', background:color, animation:'livePing 1.8s ease-out infinite', opacity:0.6 }} />
      <div style={{ position:'absolute', inset:1.5, borderRadius:'50%', background:color, boxShadow:`0 0 ${size}px ${color}` }} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// GLASS DIVIDER
// ═══════════════════════════════════════════════════════════════
function GlassDivider({ color = 'rgba(255,255,255,0.08)', margin = '10px 0' }) {
  return <div style={{ height:1, background:`linear-gradient(90deg, transparent, ${color}, transparent)`, margin }} />;
}

// ═══════════════════════════════════════════════════════════════
// RISK CHIP
// ═══════════════════════════════════════════════════════════════
function RiskChip({ risk, confidence, style: ex = {} }) {
  const c = getRiskColor(risk);
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'4px 12px', borderRadius:99, background:`linear-gradient(135deg, ${c}25, ${c}08)`, border:`1px solid ${c}50`, boxShadow:`0 0 16px ${c}20, inset 0 1px 0 ${c}20`, backdropFilter:'blur(8px)', ...ex }}>
      <span style={{ fontSize:12 }}>{getRiskIcon(risk)}</span>
      <span style={{ fontSize:10, fontWeight:700, color:c, fontFamily:'JetBrains Mono', letterSpacing:'.08em' }}>{risk}</span>
      {confidence && <span style={{ fontSize:9, color:`${c}cc`, fontFamily:'JetBrains Mono' }}>{confidence}%</span>}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// CSS INJECTION
// ═══════════════════════════════════════════════════════════════
(function injectStyles() {
  const s = document.createElement('style');
  s.textContent = `
    @keyframes auroraRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes particleDrift { 0% { transform: translateY(0px) translateX(0px) scale(1); } 100% { transform: translateY(-30px) translateX(15px) scale(1.3); } }
    @keyframes shimmerSlide { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    @keyframes holoShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
    @keyframes badgePulse { 0%,100% { opacity:1; box-shadow: 0 0 12px currentColor; } 50% { opacity:.75; box-shadow: 0 0 24px currentColor; } }
    @keyframes floatUp { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
    @keyframes neonFlicker { 0%,100%{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1} }
    @keyframes scanPulse { 0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:100%} }
    @keyframes gradientShift { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
    @keyframes morphBlob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} }
    @keyframes orbitSpin { from{transform:rotate(0deg) translateX(40px) rotate(0deg)} to{transform:rotate(360deg) translateX(40px) rotate(-360deg)} }
    @keyframes countUp { from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1} }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, {
  useSpringValue, use3DTilt, useSpringScale,
  AuroraBackground, ParticleField,
  NeonCard, NeonButton, HoloBadge,
  OddsPill, FormDot, NeonBar, HoloText,
  SpinNeonBorder, StatHex, LiveDot,
  GlassDivider, RiskChip,
});