/* ============================================================
   Topbar, Ticker, KPI strip, Right rail panels
   ============================================================ */

function Ticker() {
  const [banner, setBanner] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/admin/banner')
      .then(r => r.json())
      .then(d => { if (d.success) setBanner(d.data); })
      .catch(() => {});

    // re-fetch when admin saves banner via socket
    const handler = () => {
      fetch('/api/admin/banner')
        .then(r => r.json())
        .then(d => { if (d.success) setBanner(d.data); })
        .catch(() => {});
    };
    window.addEventListener('fm:banner-updated', handler);
    return () => window.removeEventListener('fm:banner-updated', handler);
  }, []);

  if (!banner || !banner.enabled || !banner.text) return <div style={{ flex: 1 }} />;

  // Split by '|' for multiple items
  const parts = banner.text.split('|').map(s => s.trim()).filter(Boolean);
  // Duplicate for seamless loop, ensure at least enough items to fill bar
  const items = parts.length === 1
    ? Array(8).fill(parts[0])
    : [...parts, ...parts];

  const duration = Math.max(20, parts.length * 10);

  return (
    <div className="fm-ticker" style={{
      flex: 1,
      overflow: 'hidden',
      position: 'relative',
      height: 32,
      borderRadius: 10,
      border: '1px solid var(--bd)',
      background: 'rgba(8,13,24,0.55)',
      maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)'
    }}>
      <div style={{
        display: 'flex', gap: 40, alignItems: 'center', height: '100%',
        animation: `ticker ${duration}s linear infinite`, whiteSpace: 'nowrap',
        paddingLeft: 16
      }}>
        {items.map((text, i) => (
          <span key={i} className="mono" style={{
            fontSize: 11, letterSpacing: '0.06em',
            color: banner.textColor && banner.textColor !== '#ffffff' ? banner.textColor : 'var(--fg)',
            display: 'inline-flex', alignItems: 'center', gap: 10
          }}>
            <span style={{ color: 'var(--acc)', opacity: 0.5, fontSize: 8 }}>◆</span>
            {text}
          </span>
        ))}
      </div>
    </div>
  );
}

function Topbar({ onSearch, dataMode, setDataMode, paused, setPaused, active = 'dashboard' }) {
  const onFeed = active === 'dashboard';
  const isMobile = window.__fm_useIsMobile ? window.__fm_useIsMobile() : React.useState(window.innerWidth < 768)[0];

  if (isMobile) {
    return (
      <div style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: 'rgba(8,12,22,0.96)',
        backdropFilter: 'blur(20px) saturate(1.5)', WebkitBackdropFilter: 'blur(20px) saturate(1.5)',
        borderBottom: '1px solid var(--bd)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px' }}>
          {/* logo */}
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', flexShrink: 0 }}>
            FreeM<span style={{ color: 'var(--acc)' }}>0</span>ney
          </div>

          <div style={{ flex: 1 }} />

          {/* segmented LIVE / PRE — centred, wider */}
          {onFeed && (
            <div className="mono" style={{
              display: 'inline-flex', borderRadius: 8,
              border: '1px solid var(--bd)', overflow: 'hidden',
              background: 'rgba(8,13,24,0.7)',
            }}>
              {[['live', '● LIVE'], ['prematch', 'PRE']].map(([m, label]) => (
                <button key={m} onClick={() => setDataMode(m)} style={{
                  padding: '6px 14px', fontSize: 11, letterSpacing: '0.07em', fontWeight: 800,
                  background: dataMode === m ? 'color-mix(in srgb, var(--acc) 22%, transparent)' : 'transparent',
                  color: dataMode === m ? 'var(--acc)' : 'var(--fg-muted)',
                  border: 'none', borderRight: m === 'live' ? '1px solid var(--bd)' : 'none',
                  cursor: 'pointer',
                  textShadow: dataMode === m ? '0 0 8px color-mix(in srgb, var(--acc) 60%, transparent)' : 'none',
                }}>{label}</button>
              ))}
            </div>
          )}

          {/* pause icon */}
          {onFeed && (
            <button onClick={() => setPaused(!paused)} style={{
              width: 32, height: 32, borderRadius: 8, border: '1px solid var(--bd)',
              background: paused ? 'color-mix(in srgb, var(--acc-warn) 15%, rgba(8,13,24,0.55))' : 'rgba(8,13,24,0.55)',
              color: paused ? 'var(--acc-warn)' : 'var(--fg-muted)',
              cursor: 'pointer', display: 'grid', placeItems: 'center', flexShrink: 0,
              fontSize: 0, padding: 0,
            }}>
              {paused
                ? <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
                : <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>
              }
            </button>
          )}

          <BellPopover />
          <UserMenuMobile />
        </div>
      </div>
    );
  }

  // ── Desktop layout ───────────────────────────────────────
  return (
    <div className="fm-topbar" style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '14px 22px',
      borderBottom: '1px solid var(--bd)',
      background: 'linear-gradient(180deg, rgba(10,16,30,0.65), rgba(8,12,24,0.25))',
      backdropFilter: 'blur(18px) saturate(1.5)',
      position: 'sticky', top: 0, zIndex: 5
    }}>
      {onFeed && (
      <div className="mono" style={{
        display: 'inline-flex', borderRadius: 10,
        border: '1px solid var(--bd)', overflow: 'hidden',
        background: 'rgba(8,13,24,0.55)'
      }}>
        {['live', 'prematch'].map((m) =>
        <button key={m} onClick={() => setDataMode(m)} style={{
          padding: '7px 14px', fontSize: 11, letterSpacing: '0.08em', fontWeight: 700,
          background: dataMode === m ?
          'linear-gradient(135deg, color-mix(in srgb, var(--acc) 30%, transparent), transparent)' :
          'transparent',
          color: dataMode === m ? 'var(--acc)' : 'var(--fg-muted)',
          border: 'none',
          borderRight: m === 'live' ? '1px solid var(--bd)' : 'none',
          cursor: 'pointer', textTransform: 'uppercase',
          textShadow: dataMode === m ? '0 0 10px color-mix(in srgb, var(--acc) 50%, transparent)' : 'none'
        }}>
            {m === 'live' && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--acc)', marginRight: 6, animation: dataMode === 'live' ? 'pulse-dot 1.4s infinite' : 'none', boxShadow: '0 0 8px var(--acc)' }} />}
            {m}
          </button>
        )}
      </div>)}

      {onFeed &&
      <button onClick={() => setPaused(!paused)} className="mono" style={{
        padding: '7px 12px', borderRadius: 10,
        background: paused ? 'color-mix(in srgb, var(--acc-warn) 15%, rgba(8,13,24,0.55))' : 'rgba(8,13,24,0.55)',
        border: '1px solid var(--bd)',
        color: paused ? 'var(--acc-warn)' : 'var(--fg-muted)',
        cursor: 'pointer', fontSize: 11, letterSpacing: '0.08em', fontWeight: 700,
        display: 'inline-flex', alignItems: 'center', gap: 6
      }}>
        {paused
          ? <><svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" style={{flexShrink:0}}><polygon points="5,3 19,12 5,21"/></svg>{' RESUME'}</>
          : <><svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" style={{flexShrink:0}}><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>{' PAUSE'}</>
        }
      </button>
      }

      {onFeed && (
      <div style={{
        flex: '0 1 320px',
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '7px 12px', borderRadius: 10,
        background: 'rgba(8,13,24,0.55)', border: '1px solid var(--bd)'
      }}>
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="var(--fg-dim)" strokeWidth="1.6"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" strokeLinecap="round" /></svg>
        <input
          placeholder="Search teams, leagues, bookmakers…"
          onChange={(e) => onSearch?.(e.target.value)}
          style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: 'var(--fg)', fontSize: 13, fontFamily: 'var(--font-sans)'
          }} />
        <span className="mono" style={{
          fontSize: 9.5, padding: '2px 6px', borderRadius: 5,
          background: 'rgba(150,190,255,0.10)', color: 'var(--fg-dim)'
        }}>⌘K</span>
      </div>)}

      {onFeed ? <Ticker /> : <div style={{ flex: 1 }} />}

      <BellPopover />
      <UserMenu />
    </div>);

}

function BellPopover() {
  const [open, setOpen] = React.useState(false);
  const [notifs, setNotifs] = React.useState([]);
  React.useEffect(() => {
    window.__fm_addNotification = (n) => setNotifs((prev) => [{ id: Date.now(), ...n, ago: 'just now', acc: n.acc || 'var(--acc-warn, #ffb648)' }, ...prev].slice(0, 50));
    window.__fm_removeNotification = (payload) => { const id = payload && (payload._id || payload.id); if (id) setNotifs((prev) => prev.filter(n => String(n.id) !== String(id))); };
    // Load existing notifications from server
    const token = window.__fm_adminToken || localStorage.getItem('fm_token') || '';
    fetch('/api/admin/notifications/me', { headers: { Authorization: 'Bearer ' + token } })
      .then(r => r.json())
      .then(d => { if (d.notifications) setNotifs(d.notifications.map(n => ({ id: n._id || n.id, text: n.message || n.text, from: n.from || 'Admin', ago: n.createdAt ? new Date(n.createdAt).toLocaleTimeString() : '', acc: 'var(--acc-warn, #ffb648)' }))); })
      .catch(() => {});
    return () => { delete window.__fm_addNotification; };
  }, []);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {if (!e.target.closest('[data-bell-pop]')) setOpen(false);};
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, [open]);

  return (
    <div data-bell-pop style={{ position: 'relative' }}>
      <button onClick={(e) => {e.stopPropagation();setOpen((o) => !o);}} id="notificationBell" style={{
        position: 'relative',
        width: 38, height: 38, borderRadius: 10,
        background: open ? 'color-mix(in srgb, var(--acc) 16%, rgba(8,13,24,0.55))' : 'rgba(8,13,24,0.55)',
        border: open ? '1px solid color-mix(in srgb, var(--acc) 50%, transparent)' : '1px solid var(--bd)',
        color: open ? 'var(--acc)' : 'var(--fg-muted)', cursor: 'pointer',
        display: 'grid', placeItems: 'center', transition: 'all .18s'
      }}>
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10 21a2 2 0 004 0" /></svg>
        <span id="notificationBadge" style={{
          position: 'absolute', top: 6, right: 6, minWidth: 16, height: 16,
          padding: '0 4px', borderRadius: 999,
          background: 'var(--acc-3)', color: '#0a0510',
          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 800,
          display: 'grid', placeItems: 'center',
          boxShadow: '0 0 10px var(--acc-3)'
        }}>{notifs.length}</span>
      </button>

      {open &&
      <div id="notificationDropdown" style={{
        position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 340, zIndex: 60,
        borderRadius: 14, padding: 6,
        background: 'linear-gradient(165deg, rgba(36,52,84,0.92) 0%, rgba(14,22,40,0.96) 100%)',
        backdropFilter: 'blur(28px) saturate(1.6)', WebkitBackdropFilter: 'blur(28px) saturate(1.6)',
        border: '1px solid color-mix(in srgb, var(--acc) 28%, rgba(150,190,255,0.16))',
        boxShadow: '0 30px 70px -22px rgba(0,0,0,0.92), 0 0 40px -12px color-mix(in srgb, var(--acc) 30%, transparent), inset 0 1.4px 0 rgba(255,255,255,0.28)'
      }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px 8px' }}>
            <div>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.12em', color: 'var(--acc)', textTransform: 'uppercase', fontWeight: 700, textShadow: '0 0 10px color-mix(in srgb, var(--acc) 50%, transparent)' }}>Admin Announcements</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--fg-dim)', letterSpacing: '0.08em', marginTop: 2 }}>Official notices from FreeM0ney team</div>
            </div>
            <button className="mono" style={{
            padding: '3px 8px', borderRadius: 6,
            background: 'transparent', border: '1px solid var(--bd)',
            color: 'var(--fg-muted)', fontSize: 9.5, fontWeight: 700, cursor: 'pointer'
          }} id="markAllRead">Mark all read</button>
          </div>
          <div style={{ maxHeight: 360, overflowY: 'auto' }}>
            {notifs.map((n) =>
          <div key={n.id} style={{
            display: 'flex', gap: 10, padding: '10px 12px', borderRadius: 10,
            background: 'rgba(8,13,24,0.55)', margin: '0 0 4px',
            border: `1px solid color-mix(in srgb, ${n.acc} 22%, var(--bd))`
          }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: n.acc, boxShadow: `0 0 8px ${n.acc}`, marginTop: 6, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                    <span className="mono" style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.10em', color: n.acc, padding: '1px 6px', borderRadius: 4, border: `1px solid color-mix(in srgb, ${n.acc} 40%, transparent)`, background: `color-mix(in srgb, ${n.acc} 8%, transparent)` }}>★ ADMIN</span>
                  </div>
                  <div style={{ fontSize: 13, lineHeight: 1.35 }}>{n.text}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-dim)', marginTop: 3 }}>{n.ago}</div>
                </div>
              </div>
          )}
            {notifs.length === 0 &&
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--fg-muted)', fontSize: 12 }}>No announcements</div>
          }
          </div>
        </div>
      }
    </div>);

}

// Role badge colors — matches old bk UI convention
function _roleBadgeStyle(role) {
  if (role === 'admin')
    return { bg: 'rgba(255,77,141,0.18)', color: '#ff4d8d', border: 'rgba(255,77,141,0.40)' };
  if (role === 'paid')
    return { bg: 'color-mix(in srgb, var(--acc) 18%, transparent)', color: 'var(--acc)', border: 'color-mix(in srgb, var(--acc) 40%, transparent)' };
  // free
  return { bg: 'rgba(255,255,255,0.07)', color: 'var(--fg-muted)', border: 'rgba(255,255,255,0.14)' };
}

// Mobile: avatar-only trigger (no name/role text)
function UserMenuMobile() {
  const [open, setOpen] = React.useState(false);
  const [user, setUser] = React.useState(window.__fm_user || null);
  React.useEffect(() => {
    window.__fm_setUser = (u) => setUser(u);
    if (window.__fm_user) setUser(window.__fm_user);
    return () => { delete window.__fm_setUser; };
  }, []);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (!e.target.closest('[data-user-mob]')) setOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, [open]);

  const displayName = user ? (user.username || user.name || 'User') : 'User';
  const initials = displayName[0]?.toUpperCase() || 'U';
  const roleKey = user ? (user.role || 'free') : 'free';
  const isAdmin = roleKey === 'admin';
  const Icon = window.SBIcon;

  const menuItems = [
    { id: 'profile',   icon: 'profile',   label: 'Profile' },
    { id: 'payment',   icon: 'payment',   label: 'Subscription' },
    { id: 'admin',     icon: 'admin',     label: 'Admin Panel', adminOnly: true },
  ].filter(it => !it.adminOnly || isAdmin);

  const goto = (id) => {
    setOpen(false);
    if (id === '__logout') {
      try { localStorage.removeItem('fm_token'); localStorage.removeItem('fm_settings'); } catch (_) {}
      window.location.href = '/login.html';
      return;
    }
    if (window.__fm_nav) window.__fm_nav(id);
  };

  return (
    <div data-user-mob style={{ position: 'relative', flexShrink: 0 }}>
      <div onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }} style={{
        width: 34, height: 34, borderRadius: 10,
        background: 'linear-gradient(135deg, var(--acc), var(--acc-2))',
        display: 'grid', placeItems: 'center',
        fontWeight: 800, color: '#06140f', fontSize: 14,
        cursor: 'pointer',
        boxShadow: open ? '0 0 16px -2px var(--acc)' : '0 0 10px -4px var(--acc)',
        border: open ? '2px solid var(--acc)' : '2px solid transparent',
        transition: 'border-color .15s, box-shadow .15s',
      }}>{initials}</div>

      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 200, zIndex: 60,
          borderRadius: 14, padding: 6,
          background: 'linear-gradient(165deg, rgba(36,52,84,0.96) 0%, rgba(14,22,40,0.98) 100%)',
          backdropFilter: 'blur(28px) saturate(1.6)', WebkitBackdropFilter: 'blur(28px) saturate(1.6)',
          border: '1px solid color-mix(in srgb, var(--acc) 28%, rgba(150,190,255,0.16))',
          boxShadow: '0 24px 60px -16px rgba(0,0,0,0.9), 0 0 30px -10px color-mix(in srgb, var(--acc) 28%, transparent)',
        }}>
          <div style={{ padding: '8px 10px 10px', borderBottom: '1px solid var(--bd)', marginBottom: 4 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{displayName}</div>
          </div>
          {menuItems.map(it => (
            <div key={it.id} onClick={() => goto(it.id)} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 10px', borderRadius: 8, cursor: 'pointer', color: 'var(--fg)', fontSize: 13,
            }}>
              <span style={{ width: 26, height: 26, borderRadius: 6, display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--bd)', color: 'var(--acc)', flexShrink: 0 }}>
                {Icon ? <Icon name={it.icon} /> : null}
              </span>
              {it.label}
            </div>
          ))}
          <div style={{ height: 1, background: 'var(--bd)', margin: '4px 8px' }} />
          <div onClick={() => goto('__logout')} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 10px', borderRadius: 8, cursor: 'pointer', color: '#ff4d8d', fontSize: 13,
          }}>
            <span style={{ width: 26, height: 26, borderRadius: 6, display: 'grid', placeItems: 'center', background: 'rgba(255,77,141,0.10)', border: '1px solid rgba(255,77,141,0.28)', color: '#ff4d8d', flexShrink: 0 }}>
              {Icon ? <Icon name="logout" /> : null}
            </span>
            Sign Out
          </div>
        </div>
      )}
    </div>
  );
}

function UserMenu() {
  const [open, setOpen] = React.useState(false);
  const [user, setUser] = React.useState(window.__fm_user || null);
  React.useEffect(() => {
    window.__fm_setUser = (u) => { setUser(u); };
    if (window.__fm_user) setUser(window.__fm_user);
    return () => { delete window.__fm_setUser; };
  }, []);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (!e.target.closest('[data-user-pop]')) setOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, [open]);

  const displayName = user ? (user.username || user.name || 'User') : 'User';
  const email      = user ? (user.email || '') : '';
  const roleKey    = user ? (user.role || 'free') : 'free';
  const roleLabel  = roleKey.toUpperCase();
  const initials   = displayName[0]?.toUpperCase() || 'U';
  const isAdmin    = user?.role === 'admin';

  const rb = _roleBadgeStyle(roleKey);

  const goto = (id) => {
    setOpen(false);
    if (id === '__logout') {
      try {
        localStorage.removeItem('fm_token');
        localStorage.removeItem('fm_settings');
        localStorage.removeItem('fm_filters');
      } catch (_) {}
      window.location.href = '/login.html';
      return;
    }
    if (window.__fm_nav) window.__fm_nav(id);
  };

  // Dropdown items — adminOnly items only shown to admins
  const menuItems = [
    { id: 'profile',   icon: 'profile',   label: 'Profile' },
    { id: 'analytics', icon: 'analytics', label: 'Analytics' },
    { id: 'payment',   icon: 'payment',   label: 'Subscription' },
    { id: 'contact',   icon: 'tips',      label: 'Contact Support' },
    { id: 'about',     icon: 'help',      label: 'About' },
    { id: 'admin',     icon: 'admin',     label: 'Admin Panel', adminOnly: true },
  ].filter(it => !it.adminOnly || isAdmin);

  const Icon = window.SBIcon;

  return (
    <div data-user-pop style={{ position: 'relative' }}>
      {/* Trigger chip */}
      <div
        id="userDropdown"
        onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '6px 12px 6px 6px', borderRadius: 12,
          background: open ? 'color-mix(in srgb, var(--acc) 16%, rgba(8,13,24,0.55))' : 'rgba(8,13,24,0.55)',
          border: open ? '1px solid color-mix(in srgb, var(--acc) 50%, transparent)' : '1px solid var(--bd)',
          cursor: 'pointer', transition: 'all .18s'
        }}>
        {/* Avatar */}
        <div
          id="userAvatar"
          style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'linear-gradient(135deg, var(--acc), var(--acc-2))',
            display: 'grid', placeItems: 'center',
            fontWeight: 800, color: '#06140f', fontSize: 13,
            boxShadow: '0 0 12px -2px var(--acc)'
          }}>{initials}</div>

        <div style={{ lineHeight: 1.2 }}>
          <div id="userDisplayName" style={{ fontSize: 12.5, fontWeight: 600 }}>{displayName}</div>
          {/* Role badge — colored pill */}
          <span
            id="userRole"
            className="mono"
            style={{
              display: 'inline-block',
              padding: '1px 6px', borderRadius: 999, marginTop: 2,
              fontSize: 8.5, fontWeight: 800, letterSpacing: '0.10em',
              background: rb.bg, color: rb.color,
              border: `1px solid ${rb.border}`,
              textShadow: roleKey === 'free' ? 'none' : `0 0 8px ${rb.color}`,
            }}>{roleLabel}</span>
        </div>

        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
          strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
          style={{ marginLeft: 4, transition: 'transform .2s', transform: open ? 'rotate(180deg)' : 'none' }}>
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </div>

      {/* Dropdown panel */}
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 228, zIndex: 60,
          borderRadius: 14, padding: 6, overflow: 'hidden',
          background: 'linear-gradient(165deg, rgba(36,52,84,0.92) 0%, rgba(14,22,40,0.96) 100%)',
          backdropFilter: 'blur(28px) saturate(1.6)', WebkitBackdropFilter: 'blur(28px) saturate(1.6)',
          border: '1px solid color-mix(in srgb, var(--acc) 28%, rgba(150,190,255,0.16))',
          boxShadow: '0 30px 70px -22px rgba(0,0,0,0.92), 0 0 40px -12px color-mix(in srgb, var(--acc) 30%, transparent), inset 0 1.4px 0 rgba(255,255,255,0.28)'
        }}>
          {/* Header */}
          <div style={{ padding: '10px 12px 10px', borderBottom: '1px solid var(--bd)', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: 'linear-gradient(135deg, var(--acc), var(--acc-2))',
              display: 'grid', placeItems: 'center',
              fontWeight: 800, color: '#06140f', fontSize: 15,
              boxShadow: '0 0 14px -4px var(--acc)'
            }}>{initials}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{displayName}</div>
              <div id="userEmail" className="mono" style={{ fontSize: 10.5, color: 'var(--fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{email}</div>
            </div>
          </div>

          {/* Nav items */}
          {menuItems.map((it) => (
            <div
              key={it.id}
              id={it.id === 'admin' ? 'adminPanelBtn' : undefined}
              onClick={() => goto(it.id)}
              className="user-menu-row"
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 10px', borderRadius: 8, cursor: 'pointer',
                color: it.id === 'admin' ? '#ffb648' : 'var(--fg)',
                fontSize: 13,
              }}>
              {/* Icon tile matching sidebar style */}
              <span style={{
                width: 28, height: 28, borderRadius: 7, flexShrink: 0,
                display: 'grid', placeItems: 'center',
                background: it.id === 'admin'
                  ? 'rgba(255,182,72,0.12)'
                  : 'rgba(255,255,255,0.05)',
                border: it.id === 'admin'
                  ? '1px solid rgba(255,182,72,0.30)'
                  : '1px solid var(--bd)',
                color: it.id === 'admin' ? '#ffb648' : 'var(--acc)',
              }}>
                {Icon ? <Icon name={it.icon} /> : null}
              </span>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{it.label}</span>
            </div>
          ))}

          <div style={{ height: 1, background: 'var(--bd)', margin: '4px 8px' }} />

          {/* Sign out */}
          <div
            id="logoutBtn"
            onClick={() => goto('__logout')}
            className="user-menu-row"
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px', borderRadius: 8, cursor: 'pointer',
              color: '#ff4d8d', fontSize: 13,
            }}>
            <span style={{
              width: 28, height: 28, borderRadius: 7, flexShrink: 0,
              display: 'grid', placeItems: 'center',
              background: 'rgba(255,77,141,0.10)',
              border: '1px solid rgba(255,77,141,0.28)',
              color: '#ff4d8d',
            }}>
              {Icon ? <Icon name="logout" /> : null}
            </span>
            <span style={{ fontWeight: 500 }}>Sign Out</span>
          </div>
        </div>
      )}
    </div>
  );
}

function KpiCard({ label, value, delta, accent = 'var(--acc)', spark, suffix }) {
  return (
    <div className="glass rim" style={{ borderRadius: 18, padding: '14px 16px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div>
          <div className="cap" style={{ fontSize: 9.5 }}>{label}</div>
          <div className="mono" style={{
            fontSize: 26, fontWeight: 700, marginTop: 6, lineHeight: 1,
            color: 'var(--fg)'
          }}>
            {value}{suffix && <span style={{ fontSize: 13, color: 'var(--fg-muted)', marginLeft: 4 }}>{suffix}</span>}
          </div>
          {delta &&
          <div className="mono" style={{
            fontSize: 11, marginTop: 8,
            color: accent,
            textShadow: `0 0 12px color-mix(in srgb, ${accent} 50%, transparent)`
          }}>{delta}</div>
          }
        </div>
        {spark &&
        <div style={{ flex: 1, maxWidth: 110, minWidth: 80, height: 50, marginTop: 4 }}>
            <Sparkline data={spark} color={accent} />
          </div>
        }
      </div>
    </div>);

}

function Sparkline({ data, color = 'var(--acc)', height = 50 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const w = 110;
  const h = height;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => {
    const x = i * step;
    const y = h - 6 - (v - min) / Math.max(0.001, max - min) * (h - 14);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
  const d = `M ${pts.join(' L ')}`;
  const area = `${d} L ${w},${h} L 0,${h} Z`;
  const id = React.useMemo(() => 'sp-' + Math.random().toString(36).slice(2, 8), []);
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" preserveAspectRatio="none">
      <defs>
        <linearGradient id={id} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.35" />
          <stop offset="1" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ filter: `drop-shadow(0 0 6px ${color})` }} />
      {/* trailing dot */}
      <circle cx={(data.length - 1) * step} cy={h - 6 - (data[data.length - 1] - min) / Math.max(0.001, max - min) * (h - 14)} r="2.2" fill={color} style={{ filter: `drop-shadow(0 0 6px ${color})` }} />
    </svg>);

}

function KpiStrip() {
  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {
    window.__fm_updateKpis = forceUpdate;
    return () => { delete window.__fm_updateKpis; };
  }, []);
  const s = window.USER_STATS;
  return (
    <div className="kpi-strip">
      <KpiCard label="Surebets Found Today" value={s.surebetsToday} delta="+18 vs yesterday" accent="var(--acc)" spark={[24, 28, 22, 30, 35, 31, 40, 38, 44, 42, 48, 50, 52, 46, 54, 58, 62, 60, 68, 72, 70, 74]} />
      <KpiCard label="Best ROI Today" value={`${s.bestRoiToday.toFixed(2)}`} suffix="%" delta="+1.42pp" accent="var(--acc-2)" spark={[2.1, 2.4, 2.8, 3.1, 2.9, 3.4, 3.7, 4.1, 3.8, 4.3, 4.6, 5.0, 5.2, 4.9, 5.4, 5.7, 5.8, 6.0, 5.9, 6.1, 6.0, 6.17]} />
      <KpiCard label="Est. Profit Today" value={`$${s.estProfitToday.toFixed(2)}`} delta="+$48.10" accent="var(--acc)" spark={[100, 118, 124, 130, 148, 162, 170, 180, 192, 205, 215, 220, 232, 240, 248, 255, 260, 268, 272, 278, 282, 287]} />
      <KpiCard label="Bankroll" value={`$${s.bankroll.toLocaleString()}`} delta={`+$${s.weeklyProfit.toFixed(2)} this week`} accent="var(--acc-3)" spark={[3800, 3950, 4020, 4080, 4150, 4210, 4280, 4310, 4380, 4440, 4520, 4580, 4640, 4720, 4790, 4850, 4920, 4990, 5050, 5110, 5180, 5240]} />
    </div>);

}

// ── Dual-handle ROI range slider ──────────────────────────
function DualRangeSlider({ lo, hi, onChange }) {
  const trackRef = React.useRef(null);
  const dragging = React.useRef(null); // 'lo' | 'hi'

  const pct = (v) => v; // 0-100 straight mapping

  const fromPct = (clientX) => {
    const rect = trackRef.current.getBoundingClientRect();
    return Math.max(0, Math.min(100, Math.round((clientX - rect.left) / rect.width * 100)));
  };

  const onMouseDown = (e) => {
    const val = fromPct(e.clientX);
    const dLo = Math.abs(val - lo), dHi = Math.abs(val - hi);
    dragging.current = dLo <= dHi ? 'lo' : 'hi';
    move(val);
    e.preventDefault();
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  };

  const onTouchStart = (e) => {
    const val = fromPct(e.touches[0].clientX);
    dragging.current = Math.abs(val - lo) <= Math.abs(val - hi) ? 'lo' : 'hi';
    move(val);
    window.addEventListener('touchmove', onTouchMove, { passive: false });
    window.addEventListener('touchend', onTouchEnd);
  };

  const move = (val) => {
    if (dragging.current === 'lo') onChange(Math.min(val, hi - 1), hi);
    else onChange(lo, Math.max(val, lo + 1));
  };

  const onMouseMove = (e) => move(fromPct(e.clientX));
  const onTouchMove = (e) => { e.preventDefault(); move(fromPct(e.touches[0].clientX)); };
  const onMouseUp = () => { dragging.current = null; window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); };
  const onTouchEnd = () => { dragging.current = null; window.removeEventListener('touchmove', onTouchMove); window.removeEventListener('touchend', onTouchEnd); };

  const thumbStyle = (v) => ({
    position: 'absolute', top: '50%', left: `${pct(v)}%`,
    transform: 'translate(-50%, -50%)',
    width: 18, height: 18, borderRadius: '50%',
    background: 'linear-gradient(135deg, var(--acc), var(--acc-2))',
    border: '2px solid rgba(255,255,255,0.25)',
    boxShadow: '0 0 10px -1px var(--acc), 0 2px 8px rgba(0,0,0,0.6)',
    cursor: 'grab',
    transition: 'box-shadow .15s',
  });

  return (
    <div
      ref={trackRef}
      onMouseDown={onMouseDown}
      onTouchStart={onTouchStart}
      style={{ position: 'relative', height: 28, cursor: 'pointer', userSelect: 'none' }}>
      {/* track bg */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', transform: 'translateY(-50%)', height: 4, borderRadius: 2, background: 'rgba(8,13,24,0.55)', border: '1px solid var(--bd)' }} />
      {/* active fill */}
      <div style={{
        position: 'absolute', top: '50%', transform: 'translateY(-50%)', height: 4, borderRadius: 2,
        left: `${pct(lo)}%`, width: `${pct(hi - lo)}%`,
        background: 'linear-gradient(90deg, var(--acc), var(--acc-2))',
        boxShadow: '0 0 8px var(--acc)',
      }} />
      {/* thumbs */}
      <div style={thumbStyle(lo)} />
      <div style={thumbStyle(hi)} />
    </div>
  );
}

function FilterPanel({ filters, setFilters }) {
  const sports = Object.values(window.SPORTS);
  const allBks = Object.values(window.BOOKMAKERS);
  const sortOptions = ['ROI ↓', 'ROI ↑', 'Profit ↓', 'Newest', 'League', 'Bookmaker'];

  // Empty set = all selected — toggle chip
  const toggleSport = (id) => {
    const allIds = sports.map(s => s.id);
    if (filters.sports.size === 0) {
      // all active → deselect this one (add all others)
      setFilters({ ...filters, sports: new Set(allIds.filter(x => x !== id)) });
    } else {
      const next = new Set(filters.sports);
      if (next.has(id)) { next.delete(id); if (next.size === 0) next.clear(); }
      else { next.add(id); if (next.size === allIds.length) next.clear(); /* all = empty */ }
      setFilters({ ...filters, sports: next });
    }
  };

  const toggleBook = (id) => {
    const allIds = allBks.map(b => b.id);
    if (filters.books.size === 0) {
      setFilters({ ...filters, books: new Set(allIds.filter(x => x !== id)) });
    } else {
      const next = new Set(filters.books);
      if (next.has(id)) { next.delete(id); if (next.size === 0) next.clear(); }
      else { next.add(id); if (next.size === allIds.length) next.clear(); }
      setFilters({ ...filters, books: next });
    }
  };

  return (
    <div style={{
      borderRadius: 18, padding: 18, display: 'flex', flexDirection: 'column', gap: 18,
      background: 'rgba(14,22,40,0.22)',
      backdropFilter: 'blur(20px) saturate(1.3)', WebkitBackdropFilter: 'blur(20px) saturate(1.3)',
      border: '1px solid rgba(180,210,255,0.14)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="cap">Filters</div>
        <button onClick={() => setFilters({ sports: new Set(), books: new Set(), roiMin: 0, roiMax: 100, sort: 'ROI ↓' })} className="mono" style={{ background: 'transparent', border: 'none', color: 'var(--fg-dim)', cursor: 'pointer', fontSize: 10, letterSpacing: '0.08em' }}>RESET</button>
      </div>

      <div>
        <div className="cap" style={{ marginBottom: 8, fontSize: 9 }}>Sport</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {sports.map((s) => {
            // empty set = all selected → show all active
            const active = filters.sports.size === 0 || filters.sports.has(s.id);
            return (
              <button key={s.id} onClick={() => toggleSport(s.id)} className="mono" style={{
                padding: '6px 10px', borderRadius: 999,
                fontSize: 10.5, letterSpacing: '0.06em', fontWeight: 600,
                background: active ? `color-mix(in srgb, ${s.acc} 18%, transparent)` : 'rgba(8,13,24,0.55)',
                border: `1px solid ${active ? `color-mix(in srgb, ${s.acc} 50%, transparent)` : 'var(--bd)'}`,
                color: active ? s.acc : 'var(--fg-muted)',
                cursor: 'pointer', transition: 'background .15s, border-color .15s, color .15s',
              }}>{s.emoji} {s.label}</button>);
          })}
        </div>
      </div>

      <div>
        <div className="cap" style={{ marginBottom: 8, fontSize: 9 }}>Bookmakers</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {allBks.map((bk) => {
            const active = filters.books.size === 0 || filters.books.has(bk.id);
            return (
              <button key={bk.id} onClick={() => toggleBook(bk.id)} className="mono" style={{
                padding: '4px 8px', borderRadius: 6,
                fontSize: 10, letterSpacing: '0.04em', fontWeight: 700,
                background: active ? bk.bg : 'rgba(8,13,24,0.40)',
                color: active ? bk.fg : 'var(--fg-muted)',
                border: active ? '1px solid rgba(255,255,255,0.18)' : '1px solid var(--bd)',
                cursor: 'pointer', opacity: active ? 1 : 0.65,
                transition: 'opacity .15s, background .15s',
              }}>{bk.mono}·{bk.name.toUpperCase()}</button>);
          })}
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div className="cap" style={{ fontSize: 9 }}>ROI Range</div>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-muted)' }}>{filters.roiMin}% — {filters.roiMax}%</div>
        </div>
        <DualRangeSlider
          lo={filters.roiMin} hi={filters.roiMax}
          onChange={(lo, hi) => setFilters({ ...filters, roiMin: lo, roiMax: hi })} />
      </div>

      <div>
        <div className="cap" style={{ marginBottom: 8, fontSize: 9 }}>Sort By</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          {sortOptions.map((o) => {
            const active = filters.sort === o;
            return (
              <button key={o} onClick={() => setFilters({ ...filters, sort: o })} className="mono" style={{
                padding: '7px 8px', borderRadius: 8, fontSize: 10.5,
                background: active ? 'color-mix(in srgb, var(--acc) 18%, transparent)' : 'rgba(8,13,24,0.55)',
                border: `1px solid ${active ? 'color-mix(in srgb, var(--acc) 50%, transparent)' : 'var(--bd)'}`,
                color: active ? 'var(--acc)' : 'var(--fg-muted)',
                cursor: 'pointer', fontWeight: 600, letterSpacing: '0.04em'
              }}>{o}</button>);

          })}
        </div>
      </div>
    </div>);

}

function BankrollWidget() {
  const s = window.USER_STATS;
  return (
    <div className="glass rim" style={{
      borderRadius: 18, padding: '16px 18px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(180px 100px at 100% 0%, color-mix(in srgb, var(--acc-3) 22%, transparent), transparent 70%)',
        pointerEvents: 'none'
      }} />
      <div className="cap" style={{ fontSize: 9.5 }}>DIGITAL WALLET</div>
      <div className="mono" style={{ fontSize: 26, fontWeight: 700, marginTop: 4, lineHeight: 1 }}>
        ${s.bankroll.toLocaleString()}<span style={{ fontSize: 12, color: 'var(--fg-muted)', marginLeft: 4 }}>.00</span>
      </div>
      <div className="mono" style={{ fontSize: 10.5, color: 'var(--acc)', marginTop: 6, textShadow: '0 0 10px color-mix(in srgb, var(--acc) 45%, transparent)' }}>
        +${s.weeklyProfit.toFixed(2)} this week · streak {s.streak} 🔥
      </div>
      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <button className="mono" style={{
          padding: '9px 12px', borderRadius: 10,
          background: 'linear-gradient(135deg, color-mix(in srgb, var(--acc) 30%, rgba(8,13,24,0.6)), rgba(8,13,24,0.6))',
          border: '1px solid color-mix(in srgb, var(--acc) 45%, transparent)',
          color: 'var(--acc)', fontWeight: 700, letterSpacing: '0.08em', fontSize: 11,
          cursor: 'pointer',
          textShadow: '0 0 10px color-mix(in srgb, var(--acc) 50%, transparent)'
        }}>DEPOSIT</button>
        <button className="mono" style={{
          padding: '9px 12px', borderRadius: 10,
          background: 'linear-gradient(135deg, color-mix(in srgb, var(--acc-3) 30%, rgba(8,13,24,0.6)), rgba(8,13,24,0.6))',
          border: '1px solid color-mix(in srgb, var(--acc-3) 45%, transparent)',
          color: 'var(--acc-3)', fontWeight: 700, letterSpacing: '0.08em', fontSize: 11,
          cursor: 'pointer',
          textShadow: '0 0 10px color-mix(in srgb, var(--acc-3) 50%, transparent)'
        }}>WITHDRAW</button>
      </div>
    </div>);

}

function SmartBetsFeed() {
  return (
    <div className="glass rim" style={{ borderRadius: 18, padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="cap">High Roller Bets</div>
        <span className="mono" style={{
          fontSize: 9.5, padding: '3px 8px', borderRadius: 999,
          background: 'color-mix(in srgb, var(--acc-3) 18%, transparent)',
          color: 'var(--acc-3)', fontWeight: 700, letterSpacing: '0.08em',
          border: '1px solid color-mix(in srgb, var(--acc-3) 35%, transparent)'
        }}>● LIVE</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {window.SMART_BETS.map((b, i) => {
          const sport = window.SPORTS[b.sport] || { emoji: '🎯', acc: 'var(--acc)' };
          return (
            <div key={i} style={{
              padding: '10px 12px', borderRadius: 12,
              background: 'rgba(8,13,24,0.55)',
              border: '1px solid var(--bd)',
              display: 'flex', flexDirection: 'column', gap: 6
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.1 }}>{b.name}</div>
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--fg-dim)', marginTop: 2 }}>{b.rank} · {b.wr}% WR</div>
                </div>
                <span className="mono" style={{ fontSize: 9, color: 'var(--fg-dim)' }}>{b.time}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5 }}>
                <span>{sport.emoji}</span>
                <span style={{ flex: 1, color: 'var(--fg-2)' }}>{b.match}</span>
                <span className="mono" style={{ color: sport.acc, fontWeight: 700 }}>{b.odds.toFixed(2)}</span>
              </div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-muted)' }}>Pick: <b style={{ color: 'var(--fg)' }}>{b.pick}</b></div>
            </div>);

        })}
      </div>
    </div>);

}

function LatencyStrip() {
  return (
    <div className="glass rim" style={{ borderRadius: 18, padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="cap">Bookmaker Health</div>
        <span className="mono" style={{ fontSize: 9.5, color: 'var(--acc)' }}>● 7/8 ONLINE</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {window.LATENCY.map((l) => {
          const bk = window.BOOKMAKERS[l.book] || { name: l.book, mono: l.book.slice(0, 2).toUpperCase(), bg: '#1d2740', fg: '#caa86b' };
          const status = !l.ok ? 'var(--acc-loss)' : l.ms > 300 ? 'var(--acc-warn)' : 'var(--acc)';
          return (
            <div key={l.book} style={{
              padding: '8px 10px', borderRadius: 10,
              background: 'rgba(8,13,24,0.55)',
              border: '1px solid var(--bd)',
              display: 'flex', alignItems: 'center', gap: 8
            }}>
              <span style={{
                display: 'inline-grid', placeItems: 'center',
                width: 22, height: 22, borderRadius: 5,
                background: bk.bg, color: bk.fg,
                fontFamily: 'var(--font-mono)', fontSize: 8.5, fontWeight: 900
              }}>{bk.mono}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{bk.name}</div>
                <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: status, textShadow: `0 0 8px color-mix(in srgb, ${status} 40%, transparent)` }}>{l.ms}ms</div>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

Object.assign(window, { Topbar, Ticker, KpiStrip, KpiCard, Sparkline, FilterPanel, BankrollWidget, SmartBetsFeed, LatencyStrip });