// ── Wallet & Profile Views ─────────────────────────────────────
const { useState: useStW, useEffect: useEfW, useRef: useRfW } = React;
const CW = window.SC;

function PnlChart({ walletVal }) {
  const data = window.PNL_DATA || [];
  const W = 620, H = 210, pad = { t:16, r:52, b:28, l:10 };
  const cW = W-pad.l-pad.r, cH = H-pad.t-pad.b;
  const minV = Math.min(...data)*0.97, maxV = Math.max(...data)*1.005;
  const toX = i => pad.l+(i/(data.length-1))*cW;
  const toY = v => pad.t+cH-((v-minV)/(maxV-minV))*cH;
  const pts = data.map((v,i)=>`${toX(i).toFixed(1)},${toY(v).toFixed(1)}`).join(' ');
  const areaD = `M${toX(0)},${toY(data[0])} ${data.map((v,i)=>`L${toX(i).toFixed(1)},${toY(v).toFixed(1)}`).join(' ')} L${toX(data.length-1)},${H-pad.b} L${toX(0)},${H-pad.b} Z`;
  const [hovIdx, setHovIdx] = useStW(null);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%',display:'block',cursor:'crosshair'}}
      onMouseMove={e=>{const r=e.currentTarget.getBoundingClientRect();setHovIdx(Math.max(0,Math.min(data.length-1,Math.round((e.clientX-r.left)/r.width*(data.length-1)))));}}
      onMouseLeave={()=>setHovIdx(null)}>
      <defs>
        <linearGradient id="pnlGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#22c55e" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="#22c55e" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[10,13,16,19,22].map(y=>(
        <g key={y}>
          <line x1={pad.l} y1={toY(y*1000)} x2={W-pad.r} y2={toY(y*1000)} stroke="rgba(255,255,255,0.05)" strokeWidth={1}/>
          <text x={W-pad.r+4} y={toY(y*1000)+3} fill="rgba(255,255,255,0.22)" fontSize={9} fontFamily="Sora,sans-serif">{y}k</text>
        </g>
      ))}
      <path d={areaD} fill="url(#pnlGrad)"/>
      <polyline points={pts} stroke="#22c55e" strokeWidth={2} fill="none" strokeLinejoin="round"/>
      {hovIdx!==null&&(<>
        <line x1={toX(hovIdx)} y1={pad.t} x2={toX(hovIdx)} y2={H-pad.b} stroke="rgba(255,255,255,0.15)" strokeWidth={1} strokeDasharray="3,3"/>
        <circle cx={toX(hovIdx)} cy={toY(data[hovIdx])} r={4.5} fill="#22c55e" stroke="#0f0f0f" strokeWidth={2}/>
        <rect x={Math.min(toX(hovIdx)-28,W-pad.r-62)} y={toY(data[hovIdx])-20} width={62} height={16} rx={4} fill="rgba(18,18,18,0.95)" stroke={CW.border}/>
        <text x={Math.min(toX(hovIdx)+3,W-pad.r-28)} y={toY(data[hovIdx])-8} textAnchor="middle" fill="#22c55e" fontSize={9} fontWeight={700} fontFamily="Sora,sans-serif">${data[hovIdx].toLocaleString()}</text>
      </>)}
      {hovIdx===null&&<circle cx={toX(data.length-1)} cy={toY(data[data.length-1])} r={5} fill="#22c55e" stroke="#0f0f0f" strokeWidth={2}/>}
      {/* Evently logo watermark */}
      <image href="images/logo-evently-blanc.png" x={W/2-22} y={H/2-22} width={44} height={44} opacity={0.04}/>
      {['Oct 1','Oct 8','Oct 15','Oct 22','Oct 30'].map((l,i)=>(
        <text key={l} x={pad.l+(i/4)*cW} y={H-6} fill="rgba(255,255,255,0.22)" fontSize={9} textAnchor="middle" fontFamily="Sora,sans-serif">{l}</text>
      ))}
    </svg>
  );
}

function WalletView({ isDark, isMobile }) {
  window.useMarketDrift && window.useMarketDrift();
  const { wallet: globalWallet } = window.useElyTicker ? window.useElyTicker() : { wallet: 21482 };
  const positions = window.PORTFOLIO_POSITIONS || [];

  const [localWallet, setLocalWallet] = useStW(null);
  const [localFees, setLocalFees] = useStW(5369);
  const [showWithdrawModal, setShowWithdrawModal] = useStW(false);
  const [withdrawInput, setWithdrawInput] = useStW('');
  const [showSuccessMsg, setShowSuccessMsg] = useStW(false);
  const feesIntervalRef = useRfW(null);
  const resetTimerRef = useRfW(null);

  const walletVal = localWallet !== null ? localWallet : globalWallet;
  const feesVal = localFees;

  const clearAllTimers = () => {
    if (feesIntervalRef.current) { clearInterval(feesIntervalRef.current); feesIntervalRef.current = null; }
    if (resetTimerRef.current) { clearTimeout(resetTimerRef.current); resetTimerRef.current = null; }
  };

  const handleClaimFees = () => {
    const claimed = feesVal;
    const cur = localWallet !== null ? localWallet : globalWallet;
    clearAllTimers();
    setLocalFees(0);
    setLocalWallet(cur + claimed);
    resetTimerRef.current = setTimeout(() => {
      setLocalFees(5369); setLocalWallet(null); setShowSuccessMsg(false);
    }, 15000);
  };

  const handleWithdrawConfirm = () => {
    const amount = parseFloat(withdrawInput) || 0;
    if (amount <= 0) return;
    const cur = localWallet !== null ? localWallet : globalWallet;
    clearAllTimers();
    setLocalWallet(cur - amount);
    setShowWithdrawModal(false);
    setWithdrawInput('');
    setShowSuccessMsg(true);
    setLocalFees(0);
    feesIntervalRef.current = setInterval(() => {
      setLocalFees(prev => { const next = prev + Math.round(2 + Math.random() * 5); return next >= 100 ? 100 : next; });
    }, 500);
    resetTimerRef.current = setTimeout(() => {
      if (feesIntervalRef.current) { clearInterval(feesIntervalRef.current); feesIntervalRef.current = null; }
      setLocalFees(5369); setLocalWallet(null); setShowSuccessMsg(false);
    }, 15000);
  };

  const walletCard = (
    <div style={{background:'linear-gradient(135deg,#0c2d18,#0f3d22)',borderRadius:10,padding:14,position:'relative',overflow:'hidden',border:'1px solid #1a4a28',flex:isMobile?1:undefined}}>
      <div style={{fontSize:11,color:'rgba(255,255,255,0.55)',marginBottom:5,display:'flex',alignItems:'center',gap:6}}>
        <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth={2}><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        Wallet
      </div>
      <div style={{fontSize:22,fontWeight:800,color:'#fff',fontFamily:'JetBrains Mono,Courier New,monospace'}}>${walletVal.toLocaleString()}</div>
      <div style={{position:'absolute',right:-8,top:-8,fontSize:52,opacity:0.08,color:'#22c55e'}}>↗</div>
    </div>
  );

  const feesCard = (
    <div style={{background:'linear-gradient(135deg,#0a2848,#0d3868)',borderRadius:10,padding:14,position:'relative',overflow:'hidden',border:'1px solid #1a4878',flex:isMobile?1:undefined}}>
      <div style={{fontSize:11,color:'rgba(255,255,255,0.55)',marginBottom:5,display:'flex',alignItems:'center',gap:6}}>
        <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth={2}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
        Fees Earned
      </div>
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <div style={{fontSize:22,fontWeight:800,color:'#fff',fontFamily:'JetBrains Mono,Courier New,monospace'}}>${feesVal.toLocaleString()}</div>
        <span style={{fontSize:11,fontWeight:600,color:'rgba(112,186,210,0.7)'}}>USDm</span>
      </div>
      <div style={{position:'absolute',right:10,bottom:10,width:36,height:36,opacity:0.3}}>
        <img src="images/logo-usdm.png" style={{width:'100%',height:'100%',objectFit:'contain'}}/>
      </div>
    </div>
  );

  const claimFeesBtn = (
    <button onClick={handleClaimFees} style={{flex:1,padding:'9px 0',borderRadius:8,border:'none',background:'#fff',color:'#000',fontSize:12,fontWeight:700,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>Claim Fees</button>
  );

  const withdrawBtn = (
    <button onClick={()=>setShowWithdrawModal(true)} style={{flex:1,padding:'9px 0',borderRadius:8,border:`1px solid ${CW.border}`,background:'none',color:'#fff',fontSize:12,fontWeight:600,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>⬇ Withdraw</button>
  );

  const successMsg = showSuccessMsg ? (
    <div style={{padding:'8px 12px',borderRadius:8,background:'rgba(34,197,94,0.15)',border:'1px solid rgba(34,197,94,0.3)',color:'#22c55e',fontSize:12,fontWeight:600,textAlign:'center'}}>
      Withdrawal successful ✓
    </div>
  ) : null;

  const positionsTable = (
    <div style={{borderTop:`1px solid ${CW.border}`,flexShrink:0}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 16px',borderBottom:`1px solid ${CW.border}`}}>
        <div style={{display:'flex',gap:0}}>
          {['Positions','Open Orders','History'].map((t,i)=>(
            <div key={t} style={{color:i===0?'#fff':CW.muted,fontSize:12,fontWeight:i===0?700:400,padding:'4px 12px',fontFamily:'Sora,sans-serif',borderBottom:i===0?'2px solid #fff':'2px solid transparent',userSelect:'none'}}>{t}</div>
          ))}
        </div>
        <button style={{background:'none',border:`1px solid ${CW.border}`,color:CW.muted,fontSize:10,padding:'4px 10px',borderRadius:6,cursor:'pointer',fontFamily:'Sora,sans-serif',display:'flex',alignItems:'center',gap:4}}>
          <svg width={10} height={10} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="11" y1="18" x2="13" y2="18"/></svg>
          Filter
        </button>
      </div>
      <div style={{display:'flex',padding:'6px 16px',borderBottom:`1px solid ${CW.border}`}}>
        {['Market','Leverage','Current','Value'].map((h,i)=>(
          <span key={h} style={{[i===0?'flex':'width']:i===0?1:[64,72,96][i-1],fontSize:10,color:CW.dim,textAlign:i>0?'right':'left',fontWeight:600,textTransform:'uppercase',letterSpacing:0.4}}>{h}</span>
        ))}
      </div>
      {positions.map((pos,i)=>{
        const prob = window.MARKET_PROB?.[pos.market.id] || {};
        let currentPct;
        if (pos.market.type === 'multi' && prob.outcomes) {
          const oIdx = (pos.market.outcomes||[]).findIndex(o => o.name === pos.outcome);
          currentPct = prob.outcomes[oIdx >= 0 ? oIdx : 0] ?? Math.round(pos.current*100);
        } else {
          currentPct = prob.pct ?? Math.round(pos.current*100);
        }
        const currentPrice = currentPct / 100;
        const cost = Math.round(pos.shares * pos.price);
        const value = Math.round(pos.shares * currentPrice);
        const pnl = value - cost;
        const pnlPct = cost > 0 ? Math.round((pnl / cost) * 100) : 0;
        return (
          <div key={i} style={{display:'flex',alignItems:'center',padding:'9px 16px',borderBottom:`1px solid ${CW.border}`}}>
            <div style={{flex:1,display:'flex',gap:8,alignItems:'center',minWidth:0}}>
              <window.MarketThumb market={pos.market} size={28}/>
              <div style={{minWidth:0}}>
                <div style={{fontSize:11,fontWeight:600,color:'#fff',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{pos.market.title}</div>
                <div style={{fontSize:10,color:CW.muted}}><span style={{color:CW.green,fontWeight:600}}>Yes</span>{' '}{pos.shares.toLocaleString()} '{pos.outcome}' shares @ {Math.round(pos.price*100)}¢</div>
              </div>
            </div>
            <span style={{width:64,fontSize:11,fontWeight:700,color:'#fff',textAlign:'right'}}>{pos.leverage}x</span>
            <span style={{width:72,fontSize:11,fontWeight:600,color:'#fff',textAlign:'right'}}>{Math.round(currentPrice*100)}¢</span>
            <div style={{width:96,textAlign:'right'}}>
              <div style={{fontSize:11,fontWeight:700,color:'#fff'}}>${value.toLocaleString()}</div>
              <div style={{fontSize:10,color:pnl>=0?CW.green:CW.red,fontWeight:600}}>{pnl>=0?'+':''}{pnl.toLocaleString()} ({pnlPct.toLocaleString()}%)</div>
            </div>
          </div>
        );
      })}
    </div>
  );

  const withdrawModal = showWithdrawModal ? (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.72)',display:'flex',alignItems:'center',justifyContent:'center',zIndex:9999}} onClick={()=>setShowWithdrawModal(false)}>
      <div style={{background:'#0f1020',border:`1px solid ${CW.border}`,borderRadius:12,padding:'20px 24px',width:320,maxWidth:'90vw'}} onClick={e=>e.stopPropagation()}>
        <div style={{fontSize:15,fontWeight:700,color:'#fff',marginBottom:16}}>How much would you like to withdraw?</div>
        <input type="number" value={withdrawInput} onChange={e=>setWithdrawInput(e.target.value)} placeholder="0"
          style={{width:'100%',boxSizing:'border-box',background:'rgba(255,255,255,0.05)',border:`1px solid ${CW.border}`,borderRadius:8,padding:'10px 12px',fontSize:16,fontWeight:700,color:'#fff',outline:'none',marginBottom:12,fontFamily:'JetBrains Mono,monospace'}}/>
        <div style={{display:'flex',gap:8,marginBottom:16}}>
          <button onClick={()=>setWithdrawInput(String(Math.round(walletVal*0.5)))}
            style={{flex:1,padding:'7px 0',borderRadius:6,border:`1px solid ${CW.border}`,background:'rgba(255,255,255,0.05)',color:CW.muted,fontSize:12,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>50%</button>
          <button onClick={()=>setWithdrawInput(String(walletVal))}
            style={{flex:1,padding:'7px 0',borderRadius:6,border:`1px solid ${CW.border}`,background:'rgba(255,255,255,0.05)',color:CW.muted,fontSize:12,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>MAX</button>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button onClick={()=>{setShowWithdrawModal(false);setWithdrawInput('');}}
            style={{flex:1,padding:'9px 0',borderRadius:8,border:`1px solid ${CW.border}`,background:'none',color:CW.muted,fontSize:12,fontWeight:600,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>Cancel</button>
          <button onClick={handleWithdrawConfirm}
            style={{flex:1,padding:'9px 0',borderRadius:8,border:'none',background:'#fff',color:'#000',fontSize:12,fontWeight:700,cursor:'pointer',fontFamily:'Sora,sans-serif'}}>Confirm</button>
        </div>
      </div>
    </div>
  ) : null;

  if (isMobile) {
    return (
      <div style={{flex:1,overflowY:'auto',display:'flex',flexDirection:'column',minHeight:0}}>
        <div style={{padding:'12px',display:'flex',flexDirection:'column',gap:10}}>
          <div style={{display:'flex',gap:8}}>{walletCard}{feesCard}</div>
          <div style={{display:'flex',gap:8}}>{withdrawBtn}{claimFeesBtn}</div>
          {successMsg}
          <div style={{background:'linear-gradient(160deg,rgba(6,8,20,0.98),rgba(10,12,28,0.96))',borderRadius:8,padding:'6px 4px 4px',border:'1px solid rgba(255,255,255,0.07)'}}>
            <PnlChart walletVal={walletVal}/>
          </div>
        </div>
        {positionsTable}
        {withdrawModal}
      </div>
    );
  }

  return (
    <div style={{flex:1,overflowY:'auto',display:'flex',flexDirection:'column',minHeight:0}}>
      <div style={{display:'flex',flex:1,minHeight:0}}>
        <div style={{width:248,flexShrink:0,padding:'14px',display:'flex',flexDirection:'column',gap:10,borderRight:`1px solid ${CW.border}`}}>
          {walletCard}
          {feesCard}
          {successMsg}
          <div style={{display:'flex',gap:8}}>{claimFeesBtn}{withdrawBtn}</div>
        </div>
        <div style={{flex:1,display:'flex',flexDirection:'column',padding:'14px 18px',gap:10,minWidth:0}}>
          <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:11,fontWeight:600,color:CW.muted,display:'flex',alignItems:'center',gap:5,marginBottom:4}}>
                <svg width={11} height={11} viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth={2}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                Profit/Loss
              </div>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <span style={{fontSize:24,fontWeight:800,color:'#fff',fontFamily:'JetBrains Mono,Courier New,monospace'}}>${walletVal.toLocaleString()}</span>
                <span style={{fontSize:13,fontWeight:700,color:CW.green}}>▲ 90%</span>
              </div>
              <div style={{fontSize:11,color:CW.muted,marginTop:2}}>Past month</div>
            </div>
          </div>
          <PnlChart walletVal={walletVal}/>
        </div>
      </div>
      {positionsTable}
      {withdrawModal}
    </div>
  );
}

// ── Profile View ──────────────────────────────────────────────
function ProfileView({ isDark }) {
  const { points: elyPoints } = window.useElyTicker ? window.useElyTicker() : { points: 5542762 };
  const [usdmBal] = useStW(2254);

  return (
    <div style={{flex:1,overflowY:'auto',padding:'14px'}}>
      {/* Header */}
      <div style={{background:CW.card,borderRadius:10,padding:'14px 16px',marginBottom:10,display:'flex',alignItems:'center',gap:12,border:`1px solid ${CW.border}`}}>
        <img src="images/pfp.png" style={{width:56,height:56,borderRadius:10,objectFit:'cover',flexShrink:0,border:`2px solid ${CW.border}`}}/>
        <div style={{flex:1}}>
          <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}>
            <span style={{fontSize:15,fontWeight:800,color:'#fff'}}>@anon</span>
            {/* Gold checkmark */}
            <svg width={16} height={16} viewBox="0 0 24 24" fill="#f5c842">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
              <polyline points="22 4 12 14.01 9 11.01" stroke="#1a1200" strokeWidth={2.5} fill="none"/>
            </svg>
          </div>
          <div style={{fontSize:11,color:CW.muted}}>Member since April 2026</div>
        </div>
        <button style={{background:'none',border:`1px solid ${CW.border}`,color:CW.muted,fontSize:11,padding:'6px 14px',borderRadius:8,cursor:'pointer',fontFamily:'Sora,sans-serif',display:'flex',alignItems:'center',gap:6}}>
          <svg width={11} height={11} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          Edit Profile
        </button>
      </div>

      {/* Stats */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8,marginBottom:10}}>
        {[['All Time Volume','$284,719.44'],['All Time PnL','$97,541.80'],['Total Fees Earned','$18,932.00'],['Number of Markets Created','147']].map(([k,v])=>(
          <div key={k} style={{background:CW.card,borderRadius:8,padding:'10px 12px',border:`1px solid ${CW.border}`}}>
            <div style={{fontSize:9,color:CW.muted,marginBottom:4,lineHeight:1.3}}>{k}</div>
            <div style={{fontSize:14,fontWeight:800,color:'#fff'}}>{v}</div>
          </div>
        ))}
      </div>

      {/* Referrals — full width */}
      <div style={{background:'linear-gradient(135deg,#0a2a6a,#0d3888)',borderRadius:10,border:'1px solid #1a3a9a',overflow:'hidden',marginBottom:10}}>
        <div style={{padding:'16px 20px',display:'flex',flexDirection:'column',gap:8}}>
          <div style={{fontSize:10,color:'rgba(255,255,255,0.5)',display:'flex',alignItems:'center',gap:4}}>
            <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx={9} cy={7} r={4}/><line x1={19} y1={8} x2={19} y2={14}/><line x1={22} y1={11} x2={16} y2={11}/></svg>
            Referrals
          </div>
          <div style={{fontSize:16,fontWeight:800,color:'#fff'}}>Earn with your friends.</div>
          <div style={{fontSize:12,color:'rgba(255,255,255,0.65)',lineHeight:1.6,maxWidth:560}}>
            Invite your friends to trade on Evently, win 10% of their fees.<br/>
            Your referred friend gets a 10% boost to their ELY points.
          </div>
        </div>
        <div style={{padding:'0 20px 16px',display:'flex',alignItems:'center',gap:10}}>
          <div style={{flex:1,background:'rgba(0,0,0,0.3)',borderRadius:6,padding:'8px 12px',fontSize:11,color:'rgba(255,255,255,0.4)',border:'1px solid rgba(255,255,255,0.1)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
            https://evently.market/ref/anon
          </div>
          <button style={{padding:'9px 18px',borderRadius:8,border:'none',background:'rgba(255,255,255,0.14)',color:'#fff',fontSize:12,fontWeight:600,cursor:'pointer',fontFamily:'Sora,sans-serif',display:'flex',alignItems:'center',gap:6,flexShrink:0}}>
            <svg width={11} height={11} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            Copy Link
          </button>
        </div>
      </div>

      {/* ELY points earned + USDm */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        {/* ELY points earned — synced with header */}
        <div style={{background:CW.card,borderRadius:10,border:`1px solid ${CW.border}`,padding:'12px 14px',display:'flex',alignItems:'center',gap:10}}>
          <div style={{width:32,height:32,borderRadius:'50%',background:'#111',border:`1px solid ${CW.border}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <window.EventlyLogoSVG size={18}/>
          </div>
          <div>
            <div style={{fontSize:9,color:CW.muted,marginBottom:1}}>
              <span style={{color:'#70BAD2',fontWeight:700}}>ELY</span> Points Earned
            </div>
            <div style={{fontSize:15,fontWeight:800,color:'#fff',fontFamily:'JetBrains Mono,Courier New,monospace'}}>{elyPoints.toLocaleString()}</div>
          </div>
        </div>
        {/* USDm balance */}
        <div style={{background:'linear-gradient(135deg,#1a4a8a,#1e5a9e)',border:'1px solid #2a5fa8',borderRadius:10,padding:'12px 14px',display:'flex',alignItems:'center',gap:10}}>
          <div style={{width:32,height:32,borderRadius:'50%',background:'rgba(0,0,0,0.3)',border:'1px solid rgba(255,255,255,0.15)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <img src="images/logo-usdm.png" style={{width:20,height:20,objectFit:'contain'}}/>
          </div>
          <div>
            <div style={{fontSize:9,color:'rgba(255,255,255,0.6)',marginBottom:1}}>USDm balance</div>
            <div style={{fontSize:15,fontWeight:800,color:'#fff',fontFamily:'JetBrains Mono,Courier New,monospace'}}>{usdmBal.toLocaleString()}.00</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WalletView, ProfileView, PnlChart });