// ============================================================
// PROP ARENA — mobile screens for the extra pages
// ============================================================

function ArenaMobilePageHead({ title, sub, back }) {
  const { setPage } = useApp();
  return (
    <div className="am-page-head">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {back && (
          <button className="a-iconbtn" onClick={() => setPage(back)} style={{ width: 34, height: 34 }}><I.chevronLeft size={14}/></button>
        )}
        <div>
          <h1>{title}</h1>
          {sub && <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 2 }}>{sub}</div>}
        </div>
      </div>
    </div>
  );
}

// ============ MOBILE NEW CHALLENGE ============
function ArenaMobileNewChallenge() {
  const { setPage } = useApp();
  const [plan, setPlan] = useState('sig');
  const [size, setSize] = useState(50000);
  const [platform, setPlatform] = useState('mt5');
  const [step, setStep] = useState('build'); // build | checkout | processing | done
  const planObj = {
    one: { name: 'Signature One', steps: 1, sizes: [10000, 25000, 50000, 100000], sub: '1-step · fastest' },
    sig: { name: 'Signature',     steps: 2, sizes: [25000, 50000, 100000, 200000], sub: '2-step · popular' },
    pro: { name: 'Signature Pro', steps: 3, sizes: [50000, 100000, 200000], sub: '3-step · larger DD' },
  };
  const cur = planObj[plan];
  if (!cur.sizes.includes(size)) setSize(cur.sizes[0]);
  const priceMap = { one: { 10000:89, 25000:199, 50000:299, 100000:539 }, sig: { 25000:159, 50000:269, 100000:499, 200000:899 }, pro: { 50000:219, 100000:419, 200000:749 } };
  const price = priceMap[plan][size] || 0;

  return (
    <div className="am-page">
      <ArenaMobilePageHead title="New challenge" sub="30% off · code MAY30"/>
      <div className="am-card">
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>1 · Plan</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {Object.entries(planObj).map(([k, p]) => (
            <button key={k} className={plan===k?'active':''} onClick={()=>setPlan(k)} style={{
              padding: 12, borderRadius: 10,
              border: '1.5px solid ' + (plan===k?'var(--magenta)':'var(--line)'),
              background: plan===k?'rgba(255,92,245,0.08)':'var(--surface-2)',
              color: 'var(--text)', font: 'inherit', cursor: 'pointer', textAlign: 'left',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{p.sub}</div>
                </div>
                <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--text-faint)', padding: '3px 8px', borderRadius: 999, border: '1px solid var(--line)', flex: 'none' }}>{p.steps}-step</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      <div className="am-card">
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>2 · Size</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {cur.sizes.map(s => (
            <button key={s} onClick={()=>setSize(s)} style={{
              padding: '10px 14px', borderRadius: 10,
              border: '1.5px solid ' + (size===s?'var(--magenta)':'var(--line)'),
              background: size===s?'rgba(255,92,245,0.08)':'var(--surface-2)',
              color: 'var(--text)', fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600, cursor: 'pointer',
            }}>${window.fmtMoneyCompact(s)}</button>
          ))}
        </div>
      </div>

      <div className="am-card">
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>3 · Platform</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {[
            { id: 'mt5', l: 'MT5' },
            { id: 'mt4', l: 'MT4' },
            { id: 'ctrader', l: 'cTrader', disabled: true },
          ].map(p => (
            <button key={p.id} disabled={p.disabled} onClick={() => !p.disabled && setPlatform(p.id)} style={{
              padding: '10px 8px', borderRadius: 10,
              border: '1.5px solid ' + (platform===p.id?'var(--magenta)':'var(--line)'),
              background: platform===p.id?'rgba(255,92,245,0.08)':'var(--surface-2)',
              color: 'var(--text)', font: 'inherit', cursor: p.disabled?'not-allowed':'pointer',
              fontWeight: 600, fontSize: 12,
              opacity: p.disabled ? 0.5 : 1,
            }}>{p.l}</button>
          ))}
        </div>
      </div>

      <div className="am-card" style={{ marginTop: 14, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)), var(--surface)', borderColor: 'var(--line-3)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span style={{ fontSize: 13, color: 'var(--text-dim)' }}>{cur.name} ${window.fmtMoneyCompact(size)} · {platform.toUpperCase()}</span>
          <span className="mono" style={{ fontSize: 22, fontWeight: 700 }}>${price}</span>
        </div>
        <button className="a-btn primary" style={{ width: '100%', justifyContent: 'center', height: 46 }} onClick={() => setStep('checkout')}>
          <I.lock size={13}/> Checkout · ${price}
        </button>
      </div>

      {step === 'checkout' && <ArenaMobileCheckoutSheet plan={cur.name} size={size} platform={platform} price={price} onClose={() => setStep('build')} onSuccess={() => setStep('done')}/>}
      {step === 'done' && <ArenaMobileChallengeSuccess plan={cur.name} size={size} platform={platform} price={price} onClose={() => setPage('accounts')}/>}
    </div>
  );
}

function ArenaMobileCheckoutSheet(props) {
  const phoneEl = typeof document !== 'undefined' ? document.querySelector('.d-arena .phone') : null;
  const node = <ArenaMobileCheckoutSheetInner {...props}/>;
  return phoneEl ? ReactDOM.createPortal(node, phoneEl) : node;
}

function ArenaMobileCheckoutSheetInner({ plan, size, platform, price, onClose, onSuccess }) {
  const [method, setMethod] = useState('card');
  const [s, setS] = useState('form'); // form | processing
  const fee = method === 'card' ? +(price * 0.025).toFixed(2) : 0;
  const total = price + fee;
  function pay() { setS('processing'); setTimeout(onSuccess, 1500); }
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.62)', backdropFilter: 'blur(4px)', zIndex: 200 }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 201,
        maxHeight: '90%',
        background: 'var(--surface)',
        borderTop: '1px solid var(--line-3)',
        borderRadius: '22px 22px 0 0',
        boxShadow: '0 -20px 60px rgba(0,0,0,0.6)',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        animation: 'sheet-up .25s cubic-bezier(.4,0,.2,1)',
      }}>
        <div style={{ padding: '10px 0 0', display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: 'var(--line-3)' }}/>
        </div>
        <div style={{ padding: '14px 18px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontFamily: 'Space Grotesk', fontSize: 18, fontWeight: 700 }}>Checkout</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{plan} · ${window.fmtMoneyCompact(size)} · {platform.toUpperCase()}</div>
          </div>
          <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: 999, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><I.x size={12}/></button>
        </div>
        <div style={{ padding: '8px 18px 24px', overflowY: 'auto' }}>
          {s === 'form' && (
            <>
              <div style={{ padding: 14, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)), var(--surface-2)', border: '1px solid var(--line-3)', borderRadius: 12, marginBottom: 14, textAlign: 'center' }}>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Total</div>
                <div className="mono" style={{ fontSize: 30, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 4 }}>${total.toFixed(2)}</div>
                {fee > 0 && <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>inc. ${fee.toFixed(2)} card fee</div>}
              </div>

              <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600, marginBottom: 8 }}>Pay with</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6, marginBottom: 14 }}>
                {[
                  { id: 'card', l: 'Card', i: 'cards' },
                  { id: 'crypto', l: 'Crypto', i: 'btc' },
                  { id: 'wire', l: 'Wire', i: 'bank' },
                  { id: 'wallet', l: 'Wallet', i: 'wallet' },
                ].map(m => {
                  const Ic = I[m.i];
                  return (
                    <button key={m.id} onClick={() => setMethod(m.id)} style={{
                      padding: '12px 10px', borderRadius: 10,
                      border: '1.5px solid ' + (method === m.id ? 'var(--magenta)' : 'var(--line)'),
                      background: method === m.id ? 'rgba(255,92,245,0.10)' : 'var(--surface-2)',
                      color: 'var(--text)', font: 'inherit', cursor: 'pointer',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                      fontSize: 13, fontWeight: 600,
                    }}>
                      <Ic size={14}/> {m.l}
                    </button>
                  );
                })}
              </div>

              <button className="a-btn primary" style={{ width: '100%', justifyContent: 'center', height: 48 }} onClick={pay}>
                <I.lock size={13}/> Pay ${total.toFixed(2)}
              </button>
              <div style={{ marginTop: 8, fontSize: 10, color: 'var(--text-faint)', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <I.shield size={11}/> Stripe · PCI-DSS Level 1
              </div>
            </>
          )}
          {s === 'processing' && (
            <div style={{ padding: '60px 0', textAlign: 'center' }}>
              <div style={{ width: 48, height: 48, border: '3px solid var(--line)', borderTopColor: 'var(--magenta)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }}/>
              <div style={{ marginTop: 14, fontSize: 14, fontWeight: 600 }}>Provisioning…</div>
              <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

function ArenaMobileChallengeSuccess(props) {
  const phoneEl = typeof document !== 'undefined' ? document.querySelector('.d-arena .phone') : null;
  const node = <ArenaMobileChallengeSuccessInner {...props}/>;
  return phoneEl ? ReactDOM.createPortal(node, phoneEl) : node;
}

function ArenaMobileChallengeSuccessInner({ plan, size, platform, price, onClose }) {
  const login = useMemo(() => '510' + Math.floor(Math.random() * 90000 + 10000), []);
  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)', zIndex: 220, overflowY: 'auto', padding: '48px 18px 30px' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ width: 84, height: 84, borderRadius: 22, background: 'linear-gradient(135deg, var(--magenta), var(--cyan))', color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto', boxShadow: '0 0 60px -10px var(--magenta)' }}>
            <I.rocket size={42}/>
          </div>
          <div style={{ fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 22 }}>Welcome to the arena</div>
          <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-dim)' }}>{plan} ${window.fmtMoneyCompact(size)} · ready in &lt;1 min</div>
        </div>

        <div className="am-card" style={{ marginTop: 22 }}>
          <ArenaKv label="Account" value={login} mono copy/>
          <ArenaKv label="Plan" value={plan + ' · ' + platform.toUpperCase()}/>
          <ArenaKv label="Charged" value={'$' + price.toFixed(2)} mono/>
          <ArenaKv label="Status" value="Active"/>
        </div>

        <div className="am-card" style={{ marginTop: 12 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>What's next</div>
          {[
            { i: 'mail', l: 'Email sent', s: 'MT5 credentials on the way' },
            { i: 'candles', l: 'ArenaTrader', s: 'Trade in the browser or paste into MT5 app' },
            { i: 'target', l: 'Hit phase target', s: 'Watch daily DD & max DD' },
          ].map((it, i) => {
            const Ic = I[it.i];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: i > 0 ? '1px solid var(--line-2)' : 'none' }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={14}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{it.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{it.s}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
          <button className="a-btn ghost" style={{ flex: 1, justifyContent: 'center' }} onClick={onClose}>View accounts</button>
          <button className="a-btn primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => window.openArenaTrader && window.openArenaTrader()}>
            <I.candles size={13}/> ArenaTrader
          </button>
        </div>
      </div>
    </>
  );
}

(function injectSheetCss() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('arena-sheet-css')) return;
  const s = document.createElement('style');
  s.id = 'arena-sheet-css';
  s.textContent = `@keyframes sheet-up { from { transform: translateY(100%); } }`;
  document.head.appendChild(s);
})();

// ============ MOBILE PAYOUTS ============
function ArenaMobilePayouts() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Payouts" sub="$3,427.30 available"/>
      <div className="am-card" style={{ background: 'linear-gradient(135deg, rgba(255,92,245,0.14), rgba(92,217,255,0.08))', borderColor: 'var(--line-3)', padding: 16 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Available now</div>
        <div className="mono" style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 6 }}>$3,427.30</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>80% split · Account #5098871 · cycle in 2d</div>
        <button className="a-btn primary" style={{ width: '100%', marginTop: 14, justifyContent: 'center' }}>
          <I.upload size={13}/> Request payout
        </button>
      </div>
      <div className="am-section-head" style={{ marginTop: 22 }}><h3>History</h3></div>
      {window.SEED_PAYOUTS.map(p => (
        <div key={p.id} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'color-mix(in oklab, var(--positive) 20%, transparent)', color: 'var(--positive)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.check size={14}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>+${window.fmtMoney(p.amount)}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{p.date} · {p.method}</div>
          </div>
          <span className="a-tag success">PAID</span>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE BILLING ============
function ArenaMobileBilling() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Billing"/>
      <div className="am-section-head" style={{ marginTop: 4 }}><h3>Payment methods</h3></div>
      {[
        { i: 'cards', t: 'Visa •••• 4242', s: 'Exp 09/27', def: true },
        { i: 'btc', t: 'USDT TRC-20', s: 'TYxh…a8K9' },
      ].map((m, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I[m.i]({ size: 18 })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{m.t}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{m.s}</div>
          </div>
          {m.def && <span className="a-tag muted">DEFAULT</span>}
        </div>
      ))}
      <button className="a-btn secondary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}>
        <I.plus size={13}/> Add payment method
      </button>

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>Recent orders</h3></div>
      {window.SEED_ORDERS.map(o => (
        <div key={o.id} className="am-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontWeight: 600 }}>{o.plan}</span>
            <span className="mono">${o.amount.toFixed(2)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-dim)' }}>
            <span>{o.date} · {o.method}</span>
            <span className="a-tag success">PAID</span>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE SETTINGS ============
function ArenaMobileSettings() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Settings"/>
      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 56, height: 56, borderRadius: 999, background: 'linear-gradient(135deg, var(--magenta), var(--cyan))', color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18 }}>YL</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 16 }}>Yulia Larssen</div>
          <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>yulia@example.com</div>
          <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4 }}>Gold tier · Lv 28</div>
        </div>
      </div>

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>Profile</h3></div>
      {[
        { l: 'Name', v: 'Yulia Larssen', i: 'user' },
        { l: 'Email', v: 'yulia@example.com', i: 'mail' },
        { l: 'Phone', v: '+39 ••• 4112', i: 'speak' },
        { l: 'Country', v: 'Italy', i: 'flag' },
      ].map((f, i) => {
        const Ico = I[f.i];
        return (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Ico size={16} style={{ color: 'var(--text-dim)' }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>{f.l}</div>
            <div style={{ fontSize: 14, marginTop: 2 }}>{f.v}</div>
          </div>
          <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
        </div>
        );
      })}

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>Preferences</h3></div>
      {[
        { l: 'Currency', v: 'USD' },
        { l: 'Timezone', v: 'UTC' },
        { l: 'Language', v: 'English' },
        { l: 'Theme', v: 'Dark' },
      ].map((f, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
          <div style={{ flex: 1, fontSize: 14 }}>{f.l}</div>
          <span style={{ fontSize: 13, color: 'var(--text-dim)' }}>{f.v}</span>
          <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE CREDENTIALS ============
function ArenaMobileCredentials() {
  const { accounts, setAccountId, setPage } = useApp();
  const [filter, setFilter] = useState('all');
  const [reveal, setReveal] = useState({});
  const visible = filter === 'all' ? accounts
    : filter === 'funded' ? accounts.filter(a => a.status === 'funded')
    : filter === 'challenge' ? accounts.filter(a => a.status !== 'funded' && a.status !== 'failed')
    : accounts.filter(a => a.status === 'failed');

  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Credentials" sub="Tap to copy · passwords stay masked"/>
      <div className="a-chips" style={{ marginBottom: 12 }}>
        {[
          { id: 'all',       l: 'All' },
          { id: 'challenge', l: 'Challenge' },
          { id: 'funded',    l: 'Funded' },
        ].map(x => (
          <button key={x.id} className={filter === x.id ? 'active' : ''} onClick={() => setFilter(x.id)} style={{ flex: 1, justifyContent: 'center' }}>{x.l}</button>
        ))}
      </div>
      {visible.map(a => {
        const isFunded = a.status === 'funded';
        const tagClass = isFunded ? 'funded' : a.status === 'failed' ? 'failed' : 'eval';
        const tagLabel = isFunded ? 'FUNDED' : a.status === 'failed' ? 'FAILED' : window.planLabel(a).toUpperCase();
        const rev = reveal[a.id];
        return (
          <div key={a.id} className="am-card" style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span className={'a-acct-tag ' + tagClass}>{tagLabel}</span>
              <div style={{ flex: 1 }}>
                <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{a.login}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>${window.fmtMoneyCompact(a.size)} · {a.plan}</div>
              </div>
              <button className="a-iconbtn" onClick={() => setReveal(r => ({ ...r, [a.id]: !r[a.id] }))} title={rev ? 'Hide' : 'Reveal'}>
                {rev ? <I.eyeOff size={13}/> : <I.eye size={13}/>}
              </button>
            </div>
            <ArenaKv label="Login" value={a.login} mono copy/>
            <ArenaKv label="Server" value={a.server} mono copy/>
            <ArenaKv label="Leverage" value="1:30"/>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <button className="a-btn secondary sm" style={{ flex: 1, justifyContent: 'center' }} onClick={() => { setAccountId(a.id); setPage('account'); }}>
                <I.external size={11}/> Open
              </button>
              <button className="a-btn secondary sm" style={{ flex: 1, justifyContent: 'center' }} onClick={() => { setAccountId(a.id); window.openArenaTrader && window.openArenaTrader(a.id); }}>
                <I.candles size={11}/> ArenaTrader
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ============ MOBILE NOTIFICATIONS ============
function ArenaMobileNotifications() {
  const notifs = [
    { i: 'rocket', t: 'Challenge passed', sub: 'Account #5098871 → funded · +200 XP', tm: '2m', unread: true },
    { i: 'wallet', t: 'Payout approved', sub: '$4,283 USDT · arriving 24h', tm: '14m', unread: true },
    { i: 'trophy', t: 'Iron Hands unlocked', sub: '90% SL compliance · 30d', tm: '1h', unread: true },
    { i: 'warn', t: 'Strike warning', sub: 'Consistency rule · #5102771', tm: '3h' },
    { i: 'star', t: 'Platinum 660 XP away', sub: 'Keep your hot streak going!', tm: '1d' },
    { i: 'gift', t: 'Grand Cup S6 begins', sub: '14d · $50K · you are #247', tm: '2d' },
  ];
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Notifications" sub="3 unread" back="dashboard"/>
      {notifs.map((n, i) => (
        <div key={i} className="am-card" style={{
          display: 'flex', alignItems: 'flex-start', gap: 12,
          background: n.unread?'linear-gradient(90deg, rgba(255,92,245,0.06), var(--surface))':'var(--surface)',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: n.unread?'linear-gradient(135deg, var(--magenta), var(--cyan))':'rgba(255,255,255,0.04)',
            color: n.unread?'#06070D':'var(--text-dim)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flex: 'none',
          }}>{I[n.i]({ size: 16 })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
              <span style={{ fontWeight: 600, fontSize: 13 }}>{n.t}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)' }}>{n.tm}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>{n.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE TIERS ============
function ArenaMobileTiers() {
  const xp = window.CURRENT_XP;
  const { tier, next, progress } = window.xpToTier(xp);
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Tiers"/>
      <div className="am-card" style={{ background: 'linear-gradient(135deg, rgba(255,92,245,0.14), rgba(92,217,255,0.10))', borderColor: 'var(--line-3)', padding: 18, textAlign: 'center' }}>
        <div style={{ width: 80, height: 80, borderRadius: 22, background: 'linear-gradient(135deg, var(--gold), oklch(70% 0.18 60))', color: '#2A1A00', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Space Grotesk', fontWeight: 800, fontSize: 38, margin: '0 auto 14px', boxShadow: '0 0 38px -6px var(--gold)' }}>G</div>
        <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 26, letterSpacing: '-0.025em' }}>{tier.name}</div>
        <div className="mono" style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 4 }}>{xp.toLocaleString()} XP · Lv 28</div>
        <div style={{ height: 6, background: 'rgba(255,255,255,0.08)', borderRadius: 999, overflow: 'hidden', marginTop: 14 }}>
          <div style={{ width: (progress*100)+'%', height: '100%', background: 'linear-gradient(90deg, var(--magenta), var(--cyan))' }}/>
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 8 }}>{next ? `${next.min - xp} XP to ${next.name}` : 'Max tier'}</div>
      </div>

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>All tiers</h3></div>
      {window.TIERS.map(t => (
        <div key={t.id} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, opacity: t.id===tier.id?1:0.7 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: t.color, color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Space Grotesk', fontWeight: 800 }}>{t.name[0]}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700 }}>{t.name}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{t.min.toLocaleString()}+ XP</div>
          </div>
          {t.id===tier.id && <span className="a-tag" style={{ background: 'var(--magenta)', color: '#fff' }}>YOU</span>}
        </div>
      ))}

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>Recent XP</h3></div>
      {window.XP_EVENTS.slice(0,4).map((e, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500, fontSize: 13 }}>{e.desc}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{e.date}</div>
          </div>
          <span className="mono pos" style={{ fontWeight: 700 }}>+{e.delta}</span>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE JOURNAL ============
function ArenaMobileJournal() {
  const { accounts } = useApp();
  const [tab, setTab] = useState('overview');
  const [scope, setScope] = useState('all'); // all | challenge | funded
  const [acctId, setAcctId] = useState('all');

  const scoped = scope === 'all' ? accounts
    : scope === 'funded' ? accounts.filter(a => a.status === 'funded')
    : accounts.filter(a => a.status !== 'funded' && a.status !== 'failed');

  return (
    <div className="am-page">
      <h1 style={{ margin: '8px 0 14px', fontFamily: 'Space Grotesk', fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em' }}>Journal</h1>

      {/* Top tabs */}
      <div style={{ display: 'flex', gap: 22, marginBottom: 14, borderBottom: '1px solid var(--line)' }}>
        {[
          { id: 'overview', l: 'Overview' },
          { id: 'log',      l: 'Trade Log' },
          { id: 'reports',  l: 'Reports' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            background: 'transparent', border: 'none',
            color: tab === t.id ? 'var(--text)' : 'var(--text-dim)',
            font: 'inherit', fontWeight: tab === t.id ? 700 : 500, fontSize: 15,
            padding: '8px 0',
            borderBottom: tab === t.id ? '2px solid var(--positive)' : '2px solid transparent',
            cursor: 'pointer',
          }}>{t.l}</button>
        ))}
      </div>

      {/* Scope + account filter */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 8, marginBottom: 14 }}>
        <div className="a-chips" style={{ width: '100%' }}>
          {[
            { id: 'all', l: 'All accounts' },
            { id: 'challenge', l: 'Challenge' },
            { id: 'funded', l: 'Funded' },
          ].map(o => (
            <button key={o.id} className={scope === o.id ? 'active' : ''} onClick={() => setScope(o.id)} style={{ flex: 1, justifyContent: 'center', fontSize: 11 }}>{o.l}</button>
          ))}
        </div>
        <select className="a-input" style={{ height: 38, fontSize: 12 }} value={acctId} onChange={e => setAcctId(e.target.value)}>
          <option value="all">All accounts ({scoped.length})</option>
          {scoped.map(a => <option key={a.id} value={a.id}>{a.login} · {a.plan}</option>)}
        </select>
      </div>

      {tab === 'overview' && (
        <>
          {/* Stat row 1 */}
          <div className="am-card" style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            <div>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Net P&L (30d)</div>
              <div className="mono neg" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>−€818.59</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Win rate</div>
              <div className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>5%</div>
            </div>
          </div>

          {/* Stat row 2 */}
          <div className="am-card" style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            <div>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Open</div>
              <div className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>2</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Trades</div>
              <div className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>108</div>
            </div>
          </div>

          {/* Daily closed P&L */}
          <div className="am-card" style={{ padding: 16 }}>
            <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 16 }}>Daily closed P&amp;L · May 2026</div>
            <ArenaMobileMonthlyPnl/>
          </div>

          {/* By instrument */}
          <div className="am-card" style={{ padding: 16 }}>
            <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 16, marginBottom: 14 }}>By instrument</div>
            {[
              { s: 'BTCUSD.', v: -602.83 },
              { s: 'EURUSD.', v: -181.92 },
              { s: 'BTCEUR.', v: -34.52 },
              { s: 'CHFJPY.', v: 0.68 },
            ].map((d, i) => {
              const maxAbs = 602.83;
              const pct = Math.min(100, Math.abs(d.v) / maxAbs * 100);
              const isPos = d.v >= 0;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr 80px', alignItems: 'center', gap: 10, marginTop: i > 0 ? 14 : 0 }}>
                  <span style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 12, letterSpacing: '-0.01em' }}>{d.s}</span>
                  <div style={{ height: 5, background: 'rgba(255,255,255,0.06)', borderRadius: 999, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: pct + '%', background: isPos ? 'oklch(78% 0.22 145)' : 'oklch(70% 0.24 25)', borderRadius: 999 }}/>
                  </div>
                  <span className={'mono ' + (isPos ? 'pos' : 'neg')} style={{ textAlign: 'right', fontWeight: 700, fontSize: 12 }}>
                    {isPos ? '+' : '−'}€{Math.abs(d.v).toFixed(2)}
                  </span>
                </div>
              );
            })}
          </div>

          {/* Transaction history */}
          <div className="am-card" style={{ padding: 0 }}>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 15 }}>Transaction history</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>10 deposits, withdrawals, transfers, refunds, and orders</div>
              </div>
              <span style={{ padding: '2px 8px', borderRadius: 6, background: 'var(--surface-2)', border: '1px solid var(--line)', color: 'var(--text-dim)', fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600 }}>10</span>
            </div>
            {[
              { type: 'Withdrawal',        ref: '1122', date: 'May 19, 05:27 PM', status: 'success', amount: 255.00 },
              { type: 'Refund',            ref: '1121', date: 'May 19, 03:23 PM', status: 'pending', amount: 100.00 },
              { type: 'Challenge Account', ref: '1119', date: 'May 19, 03:16 PM', status: 'success', amount: 100.00 },
              { type: 'Wallet Payment',    ref: '1118', date: 'May 19, 03:16 PM', status: 'success', amount: 100.00 },
              { type: 'Deposit',           ref: '1115', date: 'May 19, 11:09 AM', status: 'success', amount: 14500.00 },
              { type: 'Deposit',           ref: '1114', date: 'May 19, 11:08 AM', status: 'timeout', amount: 2000.00 },
              { type: 'Deposit',           ref: '1113', date: 'May 19, 11:01 AM', status: 'timeout', amount: 100.00 },
              { type: 'Order',             ref: '1112', date: 'May 19, 09:45 AM', status: 'success', amount: 299.00 },
            ].map((t, i, arr) => {
              const colors = {
                success: { bg: 'color-mix(in oklab, var(--positive) 14%, transparent)', fg: 'var(--positive)' },
                pending: { bg: 'color-mix(in oklab, oklch(70% 0.18 295) 14%, transparent)', fg: 'oklch(78% 0.18 295)' },
                timeout: { bg: 'color-mix(in oklab, var(--negative) 14%, transparent)', fg: 'var(--negative)' },
              };
              const c = colors[t.status];
              return (
                <div key={i} style={{ padding: '10px 16px', borderBottom: i < arr.length - 1 ? '1px solid var(--line-2)' : 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.type}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 2 }}>#{t.ref} · {t.date}</div>
                  </div>
                  <span style={{
                    padding: '2px 7px', borderRadius: 6,
                    background: c.bg, color: c.fg,
                    fontSize: 9, fontWeight: 700, letterSpacing: '.04em',
                  }}>{t.status.toUpperCase()}</span>
                  <span className="mono" style={{ fontWeight: 700, fontSize: 13, textAlign: 'right', minWidth: 86 }}>+${window.fmtMoney(t.amount)}</span>
                </div>
              );
            })}
          </div>
        </>
      )}

      {tab === 'log' && (
        <div className="am-card" style={{ padding: 0 }}>
          {[
            { d: '14:01', s: 'EURUSD', side: 'BUY',  pl: 192.00 },
            { d: '13:42', s: 'XAUUSD', side: 'SELL', pl: 201.00 },
            { d: '12:22', s: 'NAS100', side: 'BUY',  pl: -200.00 },
            { d: '11:08', s: 'GBPJPY', side: 'BUY',  pl: 188.40 },
            { d: '10:32', s: 'BTCUSD', side: 'SELL', pl: 22.00 },
            { d: '09:18', s: 'EURJPY', side: 'BUY',  pl: 248.20 },
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderBottom: i < 5 ? '1px solid var(--line-2)' : 'none' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)', minWidth: 36 }}>{t.d}</span>
              <span style={{ fontWeight: 600, fontSize: 13, minWidth: 64 }}>{t.s}</span>
              <span className="a-tag" style={{ background: t.side==='BUY'?'color-mix(in oklab, var(--positive) 14%, transparent)':'color-mix(in oklab, var(--negative) 14%, transparent)', color: t.side==='BUY'?'var(--positive)':'var(--negative)' }}>{t.side}</span>
              <span className={'mono ' + (t.pl>=0?'pos':'neg')} style={{ marginLeft: 'auto', fontWeight: 700, fontSize: 13 }}>{t.pl>=0?'+':'−'}${Math.abs(t.pl).toFixed(2)}</span>
            </div>
          ))}
        </div>
      )}

      {tab === 'reports' && (
        <>
          <div className="am-card" style={{ padding: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>By symbol</div>
            {[['EURUSD','+$1,240'],['XAUUSD','+$2,180'],['NAS100','+$680'],['GBPJPY','+$540']].map(([s, p], i) => (
              <div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderTop: i > 0 ? '1px solid var(--line-2)' : 'none', fontSize: 13 }}>
                <span style={{ fontWeight: 600 }}>{s}</span>
                <span className="mono pos" style={{ fontWeight: 600 }}>{p}</span>
              </div>
            ))}
          </div>
          <div className="am-card" style={{ padding: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>By session</div>
            {[['London','+$2,380'],['New York','+$1,920'],['Asia','+$560'],['Overlap','+$1,140']].map(([s, p], i) => (
              <div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderTop: i > 0 ? '1px solid var(--line-2)' : 'none', fontSize: 13 }}>
                <span style={{ fontWeight: 600 }}>{s}</span>
                <span className="mono pos" style={{ fontWeight: 600 }}>{p}</span>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function ArenaMobileMonthlyPnl() {
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const [m, setM] = useState(4);
  const year = 2026;
  const daysInMonth = new Date(year, m + 1, 0).getDate();
  const days = useMemo(() => {
    const out = [];
    let seed = (m + 1) * 17;
    for (let d = 1; d <= daysInMonth; d++) {
      const dow = new Date(year, m, d).getDay();
      seed = (seed * 9301 + 49297) % 233280;
      const r = seed / 233280;
      let pnl = 0;
      if (dow === 0 || dow === 6) pnl = 0;
      else if (r < 0.22) pnl = 0;
      else if (r < 0.42) pnl = -Math.round((r * 1000 + 60));
      else pnl = Math.round((r * 900 + 80) * (r > 0.85 ? 2.2 : 1));
      out.push({ d, pnl });
    }
    return out;
  }, [m]);
  const maxAbs = Math.max(...days.map(x => Math.abs(x.pnl)), 1);
  const total = days.reduce((s, x) => s + x.pnl, 0);
  const W = 380, H = 180, padX = 14, padY = 18;
  const innerW = W - padX * 2, innerH = H - padY * 2;
  const midY = padY + innerH / 2, halfH = innerH / 2;
  const colW = innerW / daysInMonth;
  const barW = Math.max(4, colW - 2);

  return (
    <div style={{ marginTop: 0 }}>
      <div style={{ marginBottom: 10 }}>
        <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 16 }}>Daily closed P&amp;L · {months[m]} {year}</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Closed trades only. Flat days show $0.00.</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, gap: 8 }}>
        <select
          value={m}
          onChange={e => setM(+e.target.value)}
          className="a-input"
          style={{ flex: 1, height: 38, fontSize: 13 }}
        >
          {months.map((mn, i) => <option key={mn} value={i}>{mn} {year}</option>)}
        </select>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600 }}>Total</div>
          <div className={'mono ' + (total >= 0 ? 'pos' : 'neg')} style={{ fontSize: 14, fontWeight: 700 }}>{total >= 0 ? '+' : '−'}${window.fmtMoney(Math.abs(total))}</div>
        </div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: H, display: 'block' }}>
        <defs>
          <linearGradient id="ampnl-pos" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="oklch(78% 0.22 145)" stopOpacity="1"/>
            <stop offset="100%" stopColor="oklch(78% 0.22 145)" stopOpacity="0.5"/>
          </linearGradient>
          <linearGradient id="ampnl-neg" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="oklch(70% 0.24 25)" stopOpacity="0.5"/>
            <stop offset="100%" stopColor="oklch(70% 0.24 25)" stopOpacity="1"/>
          </linearGradient>
        </defs>
        <line x1={padX} x2={W - padX} y1={midY} y2={midY} stroke="rgba(255,255,255,0.15)" strokeWidth={1}/>
        {days.map((d, i) => {
          const x = padX + i * colW + (colW - barW) / 2;
          if (d.pnl === 0) {
            return <line key={i} x1={x} x2={x + barW} y1={midY} y2={midY} stroke="rgba(255,255,255,0.18)" strokeWidth={2} strokeLinecap="round"/>;
          }
          const bh = (Math.abs(d.pnl) / maxAbs) * halfH;
          const isPos = d.pnl > 0;
          const y = isPos ? midY - bh : midY;
          return (
            <rect key={i} x={x} y={y} width={barW} height={bh} rx={1.5} ry={1.5}
              fill={isPos ? 'url(#ampnl-pos)' : 'url(#ampnl-neg)'}
              stroke={isPos ? 'oklch(78% 0.22 145)' : 'oklch(70% 0.24 25)'} strokeWidth={1}>
              <title>{months[m]} {d.d} · {isPos ? '+' : '−'}${Math.abs(d.pnl)}</title>
            </rect>
          );
        })}
      </svg>
      <div style={{ display: 'flex', gap: 12, marginTop: 8, fontSize: 10, color: 'var(--text-dim)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <span style={{ width: 8, height: 8, background: 'oklch(78% 0.22 145)', borderRadius: 2 }}/> Green day
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <span style={{ width: 8, height: 8, background: 'oklch(70% 0.24 25)', borderRadius: 2 }}/> Red day
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <span style={{ width: 8, height: 2, background: 'rgba(255,255,255,0.22)', borderRadius: 999 }}/> Flat
        </span>
      </div>
    </div>
  );
}

// ============ MOBILE CALENDAR ============
function ArenaMobileCalendar() {
  const events = [
    { time: '14:30', c: 'US', title: 'US Retail Sales', i: 'high' },
    { time: '15:00', c: 'US', title: 'Crude Oil Inventories', i: 'med' },
    { time: '17:00', c: 'EU', title: 'ECB Lagarde Speaks', i: 'high' },
    { time: '18:00', c: 'US', title: 'FOMC Bostic Speaks', i: 'med' },
    { time: '21:00', c: 'CA', title: 'BoC Loan Survey', i: 'low' },
    { time: '23:50', c: 'JP', title: 'GDP Capital Expenditure', i: 'high' },
  ];
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Calendar" sub="Today · 8 events"/>
      <div className="a-chips" style={{ marginBottom: 14, display: 'flex' }}>
        <button className="active" style={{ flex: 1, justifyContent: 'center' }}>Today</button>
        <button style={{ flex: 1, justifyContent: 'center' }}>Tomorrow</button>
        <button style={{ flex: 1, justifyContent: 'center' }}>Week</button>
      </div>
      {events.map((e, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14 }}>
          <span className="mono" style={{ fontSize: 13, color: 'var(--text-dim)', minWidth: 42, fontWeight: 600 }}>{e.time}</span>
          <CountryDot c={e.c}/>
          <div style={{ flex: 1, fontSize: 13 }}>{e.title}</div>
          <div style={{ width: 6, height: 16, borderRadius: 2, background: e.i==='high'?'var(--negative)':e.i==='med'?'var(--gold)':'var(--text-faint)' }}/>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE AFFILIATES ============
function ArenaMobileAffiliates() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Refer" sub="15% per challenge · USDT"/>
      <div className="am-card" style={{ background: 'linear-gradient(135deg, rgba(255,92,245,0.14), rgba(92,217,255,0.08))', borderColor: 'var(--line-3)' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Earned</div>
        <div className="mono" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>$1,847</div>
        <div style={{ fontSize: 12, color: 'var(--positive)', marginTop: 2 }}>+$240 this month</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
        <div className="am-card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>REFERRALS</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>23</div>
        </div>
        <div className="am-card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>CONVERSION</div>
          <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>61%</div>
        </div>
      </div>
      <div className="am-card" style={{ marginTop: 14 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600, marginBottom: 8 }}>YOUR LINK</div>
        <div className="mono" style={{ fontSize: 13, padding: '10px 12px', background: 'rgba(0,0,0,0.30)', border: '1px solid var(--line-3)', borderRadius: 10, marginBottom: 8, wordBreak: 'break-all' }}>proparena.io/r/yulia-l</div>
        <button className="a-btn primary" style={{ width: '100%', justifyContent: 'center' }}><I.copy size={13}/> Copy & share</button>
      </div>
    </div>
  );
}

// ============ MOBILE HELP ============
function ArenaMobileHelp() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Help"/>
      {[
        { i: 'speak', t: 'Live chat', s: 'Open chat now', glow: true },
        { i: 'mail', t: 'Email support', s: 'support@proparena.io' },
      ].map((c, i) => (
        <div key={i} className="am-card" style={{
          display: 'flex', alignItems: 'center', gap: 12,
          background: c.glow?'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.04)), var(--surface)':'var(--surface)',
          borderColor: c.glow?'var(--line-3)':'var(--line)',
        }}>
          <div style={{ width: 42, height: 42, borderRadius: 12, background: c.glow?'linear-gradient(135deg, var(--magenta), var(--cyan))':'rgba(255,255,255,0.04)', color: c.glow?'#06070D':'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{I[c.i]({ size: 18 })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>{c.t}</div>
            <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>{c.s}</div>
          </div>
          <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
        </div>
      ))}

      <div className="am-section-head" style={{ marginTop: 22 }}><h3>Popular</h3></div>
      {[
        { q: 'What is the consistency rule?', sub: 'Max 40% of profit on a single day' },
        { q: 'How long do payouts take?', sub: 'USDT 24h · Wire 3-5 days' },
        { q: 'Can I reset my challenge?', sub: 'Free retry at Platinum tier' },
        { q: 'Can I trade news?', sub: 'Add News Trading at checkout' },
      ].map((q, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <I.help size={16} style={{ color: 'var(--text-dim)' }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500, fontSize: 13 }}>{q.q}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{q.sub}</div>
          </div>
          <I.chevronRight size={13} style={{ color: 'var(--text-faint)' }}/>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE WEBTRADER (chooser + frame) ============
function ArenaMobileWebtrader() {
  const { accounts, accountId, setAccountId, setPage } = useApp();
  const [step, setStep] = useState('chooser'); // chooser | loading | ok | error
  const current = accounts.find(a => a.id === accountId) || accounts[0];

  function pick(a) { setAccountId(a.id); setStep('loading'); setTimeout(() => setStep('ok'), 1100); }

  if (step === 'chooser') {
    return (
      <div className="am-page">
        <ArenaMobilePageHead title="Pick account" sub="Open ArenaTrader for…" back="dashboard"/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {accounts.filter(a => a.status !== 'failed').map(a => (
            <button key={a.id} onClick={() => pick(a)} className="am-card" style={{
              display: 'flex', alignItems: 'center', gap: 12,
              border: '1px solid var(--line)',
              background: 'var(--surface)', cursor: 'pointer', textAlign: 'left',
              color: 'var(--text)', font: 'inherit',
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, var(--magenta), var(--cyan))', color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.candles size={16}/></div>
              <div style={{ flex: 1 }}>
                <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{a.login}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>${window.fmtMoneyCompact(a.size)} · {a.plan} {a.status === 'funded' ? '· FUNDED' : ''}</div>
              </div>
              <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
            </button>
          ))}
        </div>
        <div style={{ marginTop: 14 }}>
          <button className="a-btn ghost" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setPage('dashboard')}>Cancel</button>
        </div>
      </div>
    );
  }

  return (
    <div className="am-page">
      <ArenaMobilePageHead title="ArenaTrader" sub={current.login + ' · ' + current.server} back="webtrader"/>
      <div style={{
        height: 'calc(100vh - 280px)', minHeight: 380,
        background: 'var(--surface)', border: '1px solid var(--line)',
        borderRadius: 16, position: 'relative', overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {step === 'loading' && (
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 40, height: 40, borderRadius: 999, border: '3px solid var(--line)', borderTopColor: 'var(--magenta)', margin: '0 auto', animation: 'spin 0.8s linear infinite' }}/>
            <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-dim)' }}>SSO handshake…</div>
          </div>
        )}
        {step === 'ok' && (
          <div style={{ textAlign: 'center', padding: 18 }}>
            <I.candles size={32} style={{ color: 'var(--magenta)' }}/>
            <div style={{ marginTop: 12, fontFamily: 'Space Grotesk', fontSize: 18, fontWeight: 700 }}>ArenaTrader iframe slot</div>
            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-dim)' }}>Mounts when SSO URL is wired up.</div>
            <button className="a-btn ghost sm" style={{ marginTop: 12 }} onClick={() => setStep('error')}>Simulate error</button>
          </div>
        )}
        {step === 'error' && (
          <div style={{ textAlign: 'center', padding: 18 }}>
            <I.warn size={32} style={{ color: 'var(--negative)' }}/>
            <div style={{ marginTop: 12, fontFamily: 'Space Grotesk', fontSize: 18, fontWeight: 700 }}>Session unavailable</div>
            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-dim)' }}>SSO cooldown active.</div>
            <div style={{ marginTop: 14, display: 'inline-flex', gap: 8 }}>
              <button className="a-btn primary sm" onClick={() => { setStep('loading'); setTimeout(() => setStep('ok'), 800); }}><I.refresh size={11}/> Retry</button>
              <button className="a-btn secondary sm" onClick={() => setPage('accounts')}>Back to accounts</button>
            </div>
          </div>
        )}
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

// ============ MOBILE INBOX ============
function ArenaMobileInbox() {
  const messages = [
    { id: 'm1', from: 'Support · Maya', subj: 'KYC approved', preview: 'Identity and address documents reviewed and approved.', tm: '2h', unread: true },
    { id: 'm2', from: 'Risk', subj: 'Consistency reminder', preview: 'No day > 40% of total profit.', tm: '1d', unread: true },
    { id: 'm3', from: 'Payouts', subj: 'Payout #PT-19 dispatched', preview: '$4,283.50 sent to USDT TRC-20.', tm: '6d' },
    { id: 'm4', from: 'Prop Arena', subj: 'Grand Cup S6 · 14 days', preview: 'You are ranked #247.', tm: '8d' },
  ];
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Inbox" sub={messages.filter(m=>m.unread).length + ' unread'} back="dashboard"/>
      {messages.map(m => (
        <div key={m.id} className="am-card" style={{ display: 'flex', flexDirection: 'column', gap: 4, background: m.unread ? 'rgba(92,217,255,0.04)' : 'var(--surface)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 11, fontWeight: m.unread ? 700 : 500, color: m.unread ? 'var(--text)' : 'var(--text-dim)' }}>{m.from}</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)' }}>{m.tm}</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: m.unread ? 600 : 500 }}>{m.subj}</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{m.preview}</div>
        </div>
      ))}
    </div>
  );
}

// ============ MOBILE PROFILE ============
function ArenaMobileProfile() {
  const { setPage, setView, setAuthed } = useApp();
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Profile" back="dashboard"/>
      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.04)), var(--surface)' }}>
        <div style={{ width: 56, height: 56, borderRadius: 16, background: 'linear-gradient(135deg, var(--magenta), var(--cyan))', color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 22 }}>YL</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 17 }}>Yulia Larssen</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>yulia@example.com · Italy</div>
          <div style={{ marginTop: 6 }}><span className="a-tag success" style={{ fontSize: 9 }}>KYC VERIFIED</span></div>
        </div>
      </div>

      {[
        { i: 'edit',    l: 'Edit profile',      go: 'profileEdit' },
        { i: 'shield',  l: 'Security & 2FA',    go: 'security' },
        { i: 'wallet',  l: 'Wallet & payouts',  go: 'wallet' },
        { i: 'mail',    l: 'Inbox',             go: 'inbox' },
        { i: 'users',   l: 'Refer a friend',    go: 'affiliates' },
        { i: 'bell',    l: 'Notifications',     go: 'notifications' },
        { i: 'help',    l: 'Help & support',    go: 'help' },
      ].map(item => {
        const Ic = I[item.i];
        return (
          <div key={item.l} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => setPage(item.go)}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={16}/></div>
            <span style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{item.l}</span>
            <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
          </div>
        );
      })}

      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => setView('desktop')}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.external size={16}/></div>
        <span style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>Switch to desktop view</span>
        <I.chevronRight size={14} style={{ color: 'var(--text-faint)' }}/>
      </div>

      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => setAuthed(false)}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'color-mix(in oklab, var(--negative) 14%, transparent)', color: 'var(--negative)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.logout size={16}/></div>
        <span style={{ flex: 1, fontSize: 14, fontWeight: 500, color: 'var(--negative)' }}>Log out</span>
      </div>
    </div>
  );
}

function ArenaMobileProfileEdit() {
  const { setPage } = useApp();
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Edit profile" back="profile"/>
      <div className="am-card">
        {[
          ['Full name', 'Yulia Larssen'],
          ['Email', 'yulia@example.com'],
          ['Phone', '+39 ••• 4112'],
          ['Country', 'Italy'],
        ].map(([l, v]) => (
          <div key={l} style={{ marginBottom: 10 }}>
            <label style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600, display: 'block', marginBottom: 4 }}>{l}</label>
            <input className="a-input" defaultValue={v}/>
          </div>
        ))}
        <button className="a-btn primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }} onClick={() => setPage('profile')}><I.check size={13}/> Save</button>
      </div>
    </div>
  );
}

function ArenaMobileSecurity() {
  const [verified, setVerified] = useState(true);
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Security" back="profile"/>
      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <I.shield size={20} style={{ color: 'var(--cyan)' }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600 }}>Two-factor auth</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Authenticator app · enabled</div>
        </div>
        <button className="a-btn secondary sm">Disable</button>
      </div>
      <div className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <I.lock size={20} style={{ color: 'var(--text-dim)' }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600 }}>Password</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Last changed 47 days ago</div>
        </div>
        <button className="a-btn secondary sm">Change</button>
      </div>

      {/* KYC card */}
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: 'linear-gradient(135deg, #4A6EE0, #2C4DC0)',
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 800, fontSize: 12,
          }}>S</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Sumsub KYC</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Required for payouts</div>
          </div>
          {verified
            ? <span className="a-tag success" style={{ fontSize: 9 }}>VERIFIED</span>
            : <span className="a-tag" style={{ fontSize: 9, background: 'color-mix(in oklab, var(--gold) 14%, transparent)', color: 'var(--gold)' }}>PENDING</span>}
        </div>
        {!verified && (
          <>
            <div style={{ padding: 10, background: 'color-mix(in oklab, var(--gold) 10%, var(--surface-2))', border: '1px solid color-mix(in oklab, var(--gold) 25%, var(--line))', borderRadius: 10, marginBottom: 12, fontSize: 11, color: 'var(--text-dim)' }}>
              <I.warn size={11} style={{ marginRight: 6, verticalAlign: 'middle', color: 'var(--gold)' }}/>
              Not verified — payouts paused until KYC is approved.
            </div>
            <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 8 }}>You'll need</div>
            {['Government-issued photo ID', 'A quick selfie (liveness check)', 'Proof of address (last 90 days)'].map(t => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 12, color: 'var(--text-dim)' }}>
                <span style={{ width: 16, height: 16, borderRadius: 999, border: '1.5px solid var(--line-3)', flex: 'none' }}/>
                {t}
              </div>
            ))}
            <button className="a-btn primary" style={{ width: '100%', justifyContent: 'center', marginTop: 12, background: 'linear-gradient(135deg, #4A6EE0, #2C4DC0)' }} onClick={() => setVerified(true)}>
              <I.shield size={13}/> Start verification with Sumsub
            </button>
          </>
        )}
        {verified && (
          <>
            {[
              { l: 'Identity', sub: 'Apr 14, 2026' },
              { l: 'Selfie', sub: 'Match 98% · Apr 14' },
              { l: 'Address', sub: 'Utility bill · Apr 14' },
            ].map((k, i) => (
              <div key={k.l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: i > 0 ? '1px solid var(--line-2)' : 'none' }}>
                <div style={{ width: 24, height: 24, borderRadius: 999, background: 'color-mix(in oklab, var(--positive) 22%, transparent)', color: 'var(--positive)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.check size={12}/></div>
                <div style={{ flex: 1, fontSize: 12 }}>
                  <div style={{ fontWeight: 600 }}>{k.l}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>{k.sub}</div>
                </div>
              </div>
            ))}
            <button className="a-btn secondary" style={{ width: '100%', justifyContent: 'center', marginTop: 10 }} onClick={() => setVerified(false)}>
              <I.refresh size={12}/> Re-verify
            </button>
          </>
        )}
      </div>

      <div className="am-section-head" style={{ marginTop: 8 }}><h3>Active sessions</h3></div>
      {[
        { d: 'iPhone 15 Pro · Milan', t: 'now', cur: true },
        { d: 'Chrome · macOS', t: '2h ago' },
        { d: 'Chrome · Windows', t: '3 days ago' },
      ].map((s, i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <I.shield size={16} style={{ color: 'var(--text-dim)' }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{s.d}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{s.t}</div>
          </div>
          {s.cur ? <span className="a-tag success" style={{ fontSize: 9 }}>ACTIVE</span> : <button className="a-btn ghost sm">Revoke</button>}
        </div>
      ))}
    </div>
  );
}

function ArenaMobileWallet() {
  const { setPage } = useApp();
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Wallet" sub="$1,284.50 available" back="dashboard"/>
      <div className="am-card" style={{ background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)), var(--surface)' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Balance</div>
        <div className="mono" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', marginTop: 4 }}>$1,284.50</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
          <button className="a-btn primary" style={{ justifyContent: 'center' }} onClick={() => setPage('deposit')}><I.arrowDown size={13}/> Deposit</button>
          <button className="a-btn secondary" style={{ justifyContent: 'center' }} onClick={() => setPage('withdraw')}><I.arrowUp size={13}/> Withdraw</button>
        </div>
      </div>
      <div className="am-section-head"><h3>Recent activity</h3></div>
      {[
        ['May 17', 'Signature 100K', '-$539.00'],
        ['May 12', 'Payout #PT-19',  '+$4,283.50'],
        ['May 04', 'Signature 50K',  '-$299.00'],
        ['May 02', 'Wallet top-up',  '+$1,000.00'],
      ].map(([d, t, v], i) => (
        <div key={i} className="am-card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px' }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-dim)', minWidth: 50 }}>{d}</span>
          <span style={{ flex: 1, fontSize: 13 }}>{t}</span>
          <span className={'mono ' + (v.startsWith('+') ? 'pos' : '')} style={{ fontWeight: 600, fontSize: 13, color: v.startsWith('+') ? 'var(--positive)' : 'var(--text)' }}>{v}</span>
        </div>
      ))}
    </div>
  );
}

// minimal am-card / am-page style fallback (use existing)
(function injectAmExtra() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('arena-mobile-extra-css')) return;
  const s = document.createElement('style');
  s.id = 'arena-mobile-extra-css';
  s.textContent = `
    .d-arena .am-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
    .d-arena .am-page { padding-bottom: 110px; }
    .d-arena .am-page-head { margin-bottom: 14px; }
    .d-arena .am-page-head h1 { margin: 0; font-family: 'Space Grotesk'; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
  `;
  document.head.appendChild(s);
})();

// ============ MOBILE DEPOSIT / WITHDRAW ============
function ArenaMobileDeposit() {
  const { setPage } = useApp();
  const [amount, setAmount] = useState(500);
  const [method, setMethod] = useState(null);
  function go() {
    if (!method) return;
    if (method === 'crypto') setPage('depositCrypto');
    if (method === 'card') setPage('depositCard');
    if (method === 'wire') setPage('depositWire');
  }
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Top up wallet" sub="Pick amount and method" back="wallet"/>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>Amount</div>
        <input className="a-input" type="number" value={amount} onChange={e => setAmount(+e.target.value || 0)} style={{ fontFamily: 'JetBrains Mono', fontSize: 24, fontWeight: 600 }}/>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
          {[100, 250, 500, 1000, 2500].map(v => (
            <button key={v} onClick={() => setAmount(v)} className={'a-btn ' + (amount === v ? 'primary' : 'secondary') + ' sm'}>${v}</button>
          ))}
        </div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>Method</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { id: 'crypto', l: 'Crypto', s: 'USDT · ~10 min · free', i: 'btc' },
            { id: 'card',   l: 'Card',   s: 'Visa / Mastercard · 2.5% fee · instant', i: 'cards' },
            { id: 'wire',   l: 'Bank wire', s: '1–3 business days · free', i: 'bank' },
          ].map(m => {
            const Ic = I[m.i];
            return (
              <button key={m.id} onClick={() => setMethod(m.id)} style={{
                padding: '14px 14px', borderRadius: 12,
                border: '1.5px solid ' + (method === m.id ? 'var(--magenta)' : 'var(--line)'),
                background: method === m.id ? 'rgba(255,92,245,0.08)' : 'var(--surface-2)',
                color: 'var(--text)', font: 'inherit', textAlign: 'left', cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: method === m.id ? 'linear-gradient(135deg, var(--magenta), var(--cyan))' : 'rgba(255,255,255,0.04)', color: method === m.id ? '#06070D' : 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={18}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{m.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{m.s}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
      <button
        className="a-btn primary"
        style={{ width: '100%', height: 48, justifyContent: 'center', ...(!method || amount < 10 ? { opacity: 0.5, cursor: 'not-allowed' } : {}) }}
        disabled={!method || amount < 10}
        onClick={go}
      >
        Continue · ${amount.toFixed(0)} <I.arrowRight size={13}/>
      </button>
    </div>
  );
}

function ArenaMobileDepositCrypto() {
  const { setPage } = useApp();
  const [chain, setChain] = useState('TRC20');
  const [sent, setSent] = useState(false);
  const [copied, setCopied] = useState(false);
  const [timeLeft, setTimeLeft] = useState(30 * 60);
  const addr = chain === 'TRC20' ? 'TXyZ9abcDEFghiJKLmnPqrSTUVwxyz1234' : '0xa1b2c3d4e5f60718293a4b5c6d7e8f9012345678';
  useEffect(() => { if (sent) return; const i = setInterval(() => setTimeLeft(t => Math.max(0, t - 1)), 1000); return () => clearInterval(i); }, [sent]);
  const mins = String(Math.floor(timeLeft / 60)).padStart(2, '0');
  const secs = String(timeLeft % 60).padStart(2, '0');

  if (sent) return <ArenaMobileTxSuccess kind="deposit-crypto" amount={500} setPage={setPage} backTo="dashboard"/>;
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Crypto deposit" sub={`Send USDT · ${chain}`} back="deposit"/>
      <div className="am-card" style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 10, background: 'color-mix(in oklab, var(--cyan) 10%, var(--surface))', borderColor: 'color-mix(in oklab, var(--cyan) 28%, var(--line))' }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--cyan)', boxShadow: '0 0 0 4px color-mix(in oklab, var(--cyan) 25%, transparent)' }}/>
        <div style={{ flex: 1, fontSize: 12 }}>
          <div style={{ fontWeight: 600 }}>Awaiting payment</div>
          <div style={{ color: 'var(--text-dim)' }}>Expires in <b className="mono" style={{ color: 'var(--text)' }}>{mins}:{secs}</b></div>
        </div>
      </div>
      <div className="am-card" style={{ padding: 14, textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Send exactly</div>
        <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 4 }}>$500.00 <span style={{ color: 'var(--text-dim)', fontSize: 16, fontWeight: 500 }}>USDT</span></div>
        <div className="a-chips" style={{ width: '100%', marginTop: 10 }}>
          {['TRC20', 'ERC20', 'BEP20', 'SOL'].map(c => <button key={c} className={chain === c ? 'active' : ''} onClick={() => setChain(c)} style={{ flex: 1, justifyContent: 'center', fontSize: 11 }}>{c}</button>)}
        </div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600, marginBottom: 6 }}>Wallet address</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: 10, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 10 }}>
          <span className="mono" style={{ flex: 1, fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{addr}</span>
          <button className="a-iconbtn" onClick={() => { navigator.clipboard?.writeText(addr); setCopied(true); setTimeout(() => setCopied(false), 1500); }}>
            {copied ? <I.check size={12}/> : <I.copy size={12}/>}
          </button>
        </div>
        <div style={{ marginTop: 10, padding: 10, background: 'color-mix(in oklab, var(--gold) 10%, transparent)', border: '1px solid color-mix(in oklab, var(--gold) 25%, transparent)', borderRadius: 10, fontSize: 11, lineHeight: 1.45 }}>
          <I.warn size={12} style={{ marginRight: 6, verticalAlign: 'middle', color: 'var(--gold)' }}/>
          Send only <b>USDT on {chain}</b>. Any other token will be lost.
        </div>
      </div>
      <button className="a-btn primary" style={{ width: '100%', height: 48, justifyContent: 'center' }} onClick={() => setSent(true)}>
        <I.check size={13}/> I've sent the payment
      </button>
    </div>
  );
}

function ArenaMobileDepositCard() {
  const { setPage } = useApp();
  const [step, setStep] = useState('form');
  const [card, setCard] = useState({ number: '4242 4242 4242 4242', expiry: '09/27', cvc: '123', name: 'Yulia Larssen' });
  const amount = 500; const fee = +(amount * 0.025).toFixed(2); const total = amount + fee;
  if (step === 'success') return <ArenaMobileTxSuccess kind="deposit-card" amount={amount} setPage={setPage} backTo="dashboard"/>;
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Card deposit" sub="Visa · Mastercard · instant" back="deposit"/>
      <div className="am-card" style={{ padding: 14, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)), var(--surface)' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Total charged</div>
        <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 4 }}>${total.toFixed(2)}</div>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>inc. ${fee.toFixed(2)} card fee</div>
      </div>
      {step === 'form' && (
        <>
          <div className="am-card" style={{ padding: 14 }}>
            <div style={{ marginBottom: 10 }}>
              <label style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, display: 'block', marginBottom: 4 }}>Card number</label>
              <input className="a-input" value={card.number} onChange={e => setCard({ ...card, number: e.target.value })} style={{ fontFamily: 'JetBrains Mono' }}/>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 10 }}>
              <div>
                <label style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, display: 'block', marginBottom: 4 }}>Expiry</label>
                <input className="a-input" value={card.expiry} onChange={e => setCard({ ...card, expiry: e.target.value })} style={{ fontFamily: 'JetBrains Mono' }}/>
              </div>
              <div>
                <label style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, display: 'block', marginBottom: 4 }}>CVC</label>
                <input className="a-input" value={card.cvc} onChange={e => setCard({ ...card, cvc: e.target.value })} style={{ fontFamily: 'JetBrains Mono' }}/>
              </div>
            </div>
            <label style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, display: 'block', marginBottom: 4 }}>Name</label>
            <input className="a-input" value={card.name} onChange={e => setCard({ ...card, name: e.target.value })}/>
          </div>
          <button className="a-btn primary" style={{ width: '100%', height: 48, justifyContent: 'center' }} onClick={() => { setStep('processing'); setTimeout(() => setStep('success'), 1500); }}>
            <I.lock size={13}/> Pay ${total.toFixed(2)}
          </button>
        </>
      )}
      {step === 'processing' && (
        <div className="am-card" style={{ padding: '40px 14px', textAlign: 'center' }}>
          <div style={{ width: 48, height: 48, border: '3px solid var(--line)', borderTopColor: 'var(--magenta)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }}/>
          <div style={{ marginTop: 14, fontSize: 14, fontWeight: 600 }}>Charging…</div>
          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
        </div>
      )}
    </div>
  );
}

function ArenaMobileDepositWire() {
  const { setPage } = useApp();
  const [sent, setSent] = useState(false);
  const [copied, setCopied] = useState('');
  const [currency, setCurrency] = useState('USD');
  const ref = useMemo(() => 'PA-' + Math.random().toString(36).slice(2, 9).toUpperCase(), []);
  function copy(val, label) { navigator.clipboard?.writeText(val); setCopied(label); setTimeout(() => setCopied(''), 1500); }
  if (sent) return <ArenaMobileTxSuccess kind="deposit-wire" amount={500} setPage={setPage} backTo="dashboard"/>;
  const details = currency === 'EUR'
    ? { bank: 'Revolut Bank UAB', acct: 'LT60 3250 0123 4567 8901', acctLabel: 'IBAN', swift: 'REVOLT21' }
    : currency === 'GBP'
    ? { bank: 'Barclays Bank PLC', acct: 'GB29 NWBK 6016 1331 9268 19', acctLabel: 'IBAN', swift: 'BARCGB22' }
    : { bank: 'JPMorgan Chase', acct: '8761 5500 0942 7714', acctLabel: 'Account number', swift: 'CHASUS33' };
  function Field({ k, v, mono = true }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 12px', background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 10, marginBottom: 6 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 9, color: 'var(--text-faint)', letterSpacing: '.06em', textTransform: 'uppercase', fontWeight: 600 }}>{k}</div>
          <div className={mono ? 'mono' : ''} style={{ fontSize: 12, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v}</div>
        </div>
        <button className="a-iconbtn" onClick={() => copy(v, k)}>{copied === k ? <I.check size={12}/> : <I.copy size={12}/>}</button>
      </div>
    );
  }
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Bank wire" sub="1–3 business days" back="deposit"/>
      <div className="am-card" style={{ padding: 14, background: 'linear-gradient(135deg, rgba(255,92,245,0.08), var(--surface))', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>Wire amount</div>
        <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 4 }}>$500.00 <span style={{ color: 'var(--text-dim)', fontSize: 16, fontWeight: 500 }}>{currency}</span></div>
        <div className="a-chips" style={{ width: '100%', marginTop: 10 }}>
          {['USD', 'EUR', 'GBP'].map(c => <button key={c} className={currency === c ? 'active' : ''} onClick={() => setCurrency(c)} style={{ flex: 1, justifyContent: 'center' }}>{c}</button>)}
        </div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
          <I.warn size={11} style={{ color: 'var(--gold)' }}/> Reference (required)
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: 12, background: 'color-mix(in oklab, var(--gold) 10%, var(--surface))', border: '1.5px solid color-mix(in oklab, var(--gold) 35%, var(--line))', borderRadius: 10, marginBottom: 8 }}>
          <span className="mono" style={{ flex: 1, fontSize: 16, fontWeight: 700, letterSpacing: '0.04em' }}>{ref}</span>
          <button className="a-iconbtn" onClick={() => copy(ref, 'Reference')}>{copied === 'Reference' ? <I.check size={12}/> : <I.copy size={12}/>}</button>
        </div>
        <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Paste this into the transfer description — required to match your wire.</div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <Field k="Beneficiary" v="Prop Arena Trading Ltd." mono={false}/>
        <Field k={details.acctLabel} v={details.acct}/>
        <Field k="SWIFT / BIC" v={details.swift}/>
        <Field k="Bank name" v={details.bank} mono={false}/>
      </div>
      <button className="a-btn primary" style={{ width: '100%', height: 48, justifyContent: 'center' }} onClick={() => setSent(true)}>
        <I.check size={13}/> I've sent the wire
      </button>
    </div>
  );
}

function ArenaMobileWithdraw() {
  const { setPage } = useApp();
  const [amount, setAmount] = useState('600.00');
  const [method, setMethod] = useState(null);
  const available = 1284.50;
  const amt = parseFloat(amount) || 0;
  function go() {
    if (method === 'crypto') setPage('withdrawCrypto');
    if (method === 'wire') setPage('withdrawWire');
  }
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Withdraw" sub={`Available $${window.fmtMoney(available)}`} back="wallet"/>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>Amount</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <input className="a-input" value={amount} onChange={e => setAmount(e.target.value)} style={{ flex: 1, fontFamily: 'JetBrains Mono', fontSize: 24, fontWeight: 600 }}/>
          <button className="a-btn secondary" onClick={() => setAmount(available.toFixed(2))}>Max</button>
        </div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 10 }}>Method</div>
        {[
          { id: 'crypto', l: 'Crypto', s: 'USDT TRC-20 · ~24h · free', i: 'btc' },
          { id: 'wire',   l: 'Bank wire', s: '3–5 business days · ~$15 fee', i: 'bank' },
        ].map(m => {
          const Ic = I[m.i];
          return (
            <button key={m.id} onClick={() => setMethod(m.id)} style={{
              width: '100%', padding: 12, borderRadius: 12,
              border: '1.5px solid ' + (method === m.id ? 'var(--magenta)' : 'var(--line)'),
              background: method === m.id ? 'rgba(255,92,245,0.08)' : 'var(--surface-2)',
              color: 'var(--text)', font: 'inherit', textAlign: 'left', cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8,
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: method === m.id ? 'linear-gradient(135deg, var(--magenta), var(--cyan))' : 'rgba(255,255,255,0.04)', color: method === m.id ? '#06070D' : 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic size={18}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{m.l}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{m.s}</div>
              </div>
            </button>
          );
        })}
      </div>
      <button
        className="a-btn primary"
        style={{ width: '100%', height: 48, justifyContent: 'center', ...(!method || amt < 50 || amt > available ? { opacity: 0.5, cursor: 'not-allowed' } : {}) }}
        disabled={!method || amt < 50 || amt > available}
        onClick={go}
      >
        Continue · ${amt.toFixed(2)} <I.arrowRight size={13}/>
      </button>
    </div>
  );
}

function ArenaMobileWithdrawCrypto() {
  const { setPage } = useApp();
  const [pick, setPick] = useState('addr1');
  const addrs = [
    { id: 'addr1', label: 'Main USDT TRC-20', addr: 'TXyZ9abc…wxyz1234', last: 'May 12' },
    { id: 'addr2', label: 'Backup USDT ERC-20', addr: '0xa1b2c3d4…7e8f90', last: 'Apr 14' },
  ];
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Crypto destination" sub="Pick a saved address" back="withdraw"/>
      {addrs.map(a => (
        <button key={a.id} onClick={() => setPick(a.id)} className="am-card" style={{
          padding: 14,
          border: '1.5px solid ' + (pick === a.id ? 'var(--magenta)' : 'var(--line)'),
          background: pick === a.id ? 'rgba(255,92,245,0.06)' : 'var(--surface-2)',
          display: 'flex', alignItems: 'center', gap: 12, font: 'inherit', color: 'var(--text)', cursor: 'pointer', textAlign: 'left',
        }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.btc size={18}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{a.label}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-dim)' }}>{a.addr} · last {a.last}</div>
          </div>
          {pick === a.id && <I.check size={16} style={{ color: 'var(--magenta)' }}/>}
        </button>
      ))}
      <button className="am-card" style={{
        padding: 14, border: '1.5px dashed var(--line-3)', background: 'transparent',
        display: 'flex', alignItems: 'center', gap: 12, font: 'inherit', color: 'var(--text-dim)', cursor: 'pointer', textAlign: 'left', width: '100%',
      }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.plus size={16}/></div>
        <span style={{ flex: 1, fontWeight: 600, fontSize: 14 }}>Use a new address</span>
      </button>
      <button className="a-btn primary" style={{ width: '100%', height: 48, justifyContent: 'center' }} onClick={() => setPage('withdrawConfirm')}>Continue <I.arrowRight size={13}/></button>
    </div>
  );
}

function ArenaMobileWithdrawWire() {
  const { setPage } = useApp();
  const [pick, setPick] = useState('b1');
  const benes = [
    { id: 'b1', label: 'Revolut · EUR', iban: 'LT60 3250…8901', bank: 'Revolut Bank UAB' },
    { id: 'b2', label: 'Intesa Sanpaolo · EUR', iban: 'IT60 X054…3 456', bank: 'Intesa Sanpaolo' },
  ];
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Wire destination" sub="3–5 business days" back="withdraw"/>
      {benes.map(b => (
        <button key={b.id} onClick={() => setPick(b.id)} className="am-card" style={{
          padding: 14,
          border: '1.5px solid ' + (pick === b.id ? 'var(--magenta)' : 'var(--line)'),
          background: pick === b.id ? 'rgba(255,92,245,0.06)' : 'var(--surface-2)',
          display: 'flex', alignItems: 'center', gap: 12, font: 'inherit', color: 'var(--text)', cursor: 'pointer', textAlign: 'left',
        }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'var(--text-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.bank size={18}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{b.label}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-dim)' }}>{b.iban}</div>
            <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{b.bank}</div>
          </div>
          {pick === b.id && <I.check size={16} style={{ color: 'var(--magenta)' }}/>}
        </button>
      ))}
      <button className="a-btn primary" style={{ width: '100%', height: 48, justifyContent: 'center' }} onClick={() => setPage('withdrawConfirm')}>Continue <I.arrowRight size={13}/></button>
    </div>
  );
}

function ArenaMobileWithdrawConfirm() {
  const { setPage } = useApp();
  const [code, setCode] = useState('');
  const [step, setStep] = useState('confirm');
  const amount = 600;
  if (step === 'success') return <ArenaMobileTxSuccess kind="withdraw" amount={amount} setPage={setPage} backTo="dashboard"/>;
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Confirm withdrawal" back="withdraw"/>
      <div className="am-card" style={{ padding: 14, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06)), var(--surface)', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 600 }}>You'll receive</div>
        <div className="mono" style={{ fontSize: 32, fontWeight: 700, marginTop: 4 }}>$598.80</div>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>USDT TRC-20 · arrival ~24h</div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <ArenaKv label="Amount" value={'$' + amount.toFixed(2)} mono/>
        <ArenaKv label="Method" value="USDT TRC-20"/>
        <ArenaKv label="Address" value="TXyZ…1234" mono copy/>
        <ArenaKv label="Network fee" value="$1.20" mono/>
      </div>
      {step === 'confirm' && (
        <div className="am-card" style={{ padding: 14 }}>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>2FA code</div>
          <input
            className="a-input"
            value={code}
            onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
            placeholder="123 456"
            style={{ fontFamily: 'JetBrains Mono', fontSize: 22, textAlign: 'center', letterSpacing: '0.4em', padding: '14px 12px' }}
          />
          <button
            className="a-btn primary"
            style={{ width: '100%', height: 48, justifyContent: 'center', marginTop: 12, ...(code.length !== 6 ? { opacity: 0.5, cursor: 'not-allowed' } : {}) }}
            disabled={code.length !== 6}
            onClick={() => { setStep('processing'); setTimeout(() => setStep('success'), 1400); }}
          >
            <I.shield size={13}/> Confirm withdrawal
          </button>
        </div>
      )}
      {step === 'processing' && (
        <div className="am-card" style={{ padding: '40px 14px', textAlign: 'center' }}>
          <div style={{ width: 44, height: 44, border: '3px solid var(--line)', borderTopColor: 'var(--magenta)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }}/>
          <div style={{ marginTop: 12, fontSize: 14, fontWeight: 600 }}>Submitting…</div>
          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
        </div>
      )}
    </div>
  );
}

function ArenaMobileTxSuccess({ kind, amount, setPage, backTo }) {
  const labels = {
    'deposit-crypto': { title: 'Payment confirmed', body: 'credited to your wallet' },
    'deposit-card':   { title: 'Payment confirmed', body: 'credited to your wallet' },
    'deposit-wire':   { title: 'Wire instructions sent', body: 'arrives in 1–3 business days' },
    'withdraw':       { title: 'Withdrawal submitted', body: 'arriving within 24h' },
  };
  const m = labels[kind] || labels['deposit-crypto'];
  const ref = useMemo(() => 'PA-' + Math.random().toString(36).slice(2, 9).toUpperCase(), []);
  return (
    <div className="am-page">
      <div style={{ paddingTop: 40, textAlign: 'center' }}>
        <div style={{ width: 76, height: 76, borderRadius: 999, background: 'linear-gradient(135deg, var(--positive), oklch(62% 0.18 145))', color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto', boxShadow: '0 0 50px -10px var(--positive)' }}>
          <I.check size={36}/>
        </div>
        <div style={{ fontFamily: 'Space Grotesk', fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 20 }}>{m.title}</div>
        <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-dim)' }}>{kind === 'withdraw' ? '−' : '+'}<b className="mono" style={{ color: 'var(--text)' }}>${amount.toFixed(2)}</b> {m.body}</div>
      </div>
      <div className="am-card" style={{ padding: 14, marginTop: 22 }}>
        <ArenaKv label="Reference" value={ref} mono copy/>
        <ArenaKv label="Amount" value={'$' + amount.toFixed(2)} mono/>
        <ArenaKv label="Status" value={kind === 'deposit-wire' ? 'Pending' : 'Confirmed'}/>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
        <button className="a-btn ghost" style={{ flex: 1, justifyContent: 'center' }} onClick={() => setPage('wallet')}>View wallet</button>
        <button className="a-btn primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => setPage(backTo || 'dashboard')}>Done</button>
      </div>
    </div>
  );
}

// ============ MOBILE GRAND CUP / ACADEMY / TV / SHOP ============
function ArenaMobileGrandCup() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Grand Cup S6" sub="14 days left · $50K prize pool" back="dashboard"/>
      <div className="am-card" style={{ padding: 16, background: 'linear-gradient(135deg, rgba(255,92,245,0.14), rgba(92,217,255,0.08)), var(--surface)', textAlign: 'center', borderColor: 'var(--line-3)' }}>
        <I.trophy size={32} style={{ color: 'var(--gold)' }}/>
        <div style={{ fontFamily: 'Space Grotesk', fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 8 }}>Grand Cup · S6</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Trade your funded accounts. Climb the leaderboard.</div>
        <div className="mono" style={{ fontSize: 28, fontWeight: 700, marginTop: 12 }}>#247 <span style={{ color: 'var(--text-dim)', fontSize: 14, fontWeight: 500 }}>/ 18,402</span></div>
        <div style={{ fontSize: 11, color: 'var(--positive)', marginTop: 2 }}>▲ 42 this week</div>
      </div>
      <div className="am-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 10 }}>Top traders</div>
        {(window.SEED_LEADERBOARD || []).slice(0, 8).map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: i > 0 ? '1px solid var(--line-2)' : 'none', background: r.self ? 'linear-gradient(90deg, rgba(255,92,245,0.10), transparent)' : 'transparent', borderRadius: r.self ? 8 : 0 }}>
            <span className="mono" style={{ fontSize: 12, fontWeight: 700, width: 32, color: r.rank === 1 ? 'var(--gold)' : r.rank <= 3 ? 'var(--cyan)' : 'var(--text-dim)' }}>#{r.rank}</span>
            <span style={{ flex: 1, fontSize: 13 }}>{r.trader}</span>
            <span className="mono pos" style={{ fontWeight: 600, fontSize: 12 }}>{window.fmtPct(r.gain, 1)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ArenaMobileEducation() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Academy" sub="6 courses · 47 lessons" back="dashboard"/>
      {[
        { c: 'Foundations',  t: 'Risk management 101', sub: '12 lessons · 2h 40m', prog: 1.0 },
        { c: 'Strategy',     t: 'Breakout trading',    sub: '8 lessons · 1h 50m',  prog: 0.6 },
        { c: 'Psychology',   t: 'Trading mindset',     sub: '10 lessons · 2h',    prog: 0.3 },
        { c: 'Funded',       t: 'Passing the challenge', sub: '6 lessons · 1h 20m', prog: 0.0 },
      ].map((c, i) => (
        <div key={i} className="am-card" style={{ padding: 14 }}>
          <div style={{ fontSize: 10, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700, marginBottom: 4 }}>{c.c}</div>
          <div style={{ fontFamily: 'Space Grotesk', fontSize: 15, fontWeight: 700 }}>{c.t}</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{c.sub}</div>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 999, marginTop: 10, overflow: 'hidden' }}>
            <div style={{ width: (c.prog * 100) + '%', height: '100%', background: c.prog === 1 ? 'var(--positive)' : 'linear-gradient(90deg, var(--magenta), var(--cyan))' }}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 10, color: 'var(--text-faint)' }}>
            <span>{c.prog === 1 ? 'COMPLETED' : c.prog > 0 ? Math.round(c.prog * 100) + '% complete' : 'NOT STARTED'}</span>
            <span>{c.prog < 1 ? 'Continue →' : 'Review →'}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function ArenaMobileTV() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Tradeify TV" sub="Live shows & replays" back="dashboard"/>
      {[
        { t: 'Live: Daily open · NYC', sub: 'Aron · live now', dur: 'LIVE', live: true },
        { t: 'Weekly markets recap · May 17', sub: 'Anand · 14m', dur: '14:32' },
        { t: 'Trading psychology #12', sub: 'Maya · 22m', dur: '22:10' },
        { t: 'Risk management masterclass', sub: 'Maya · 1h 04m', dur: '1:04:20' },
      ].map((v, i) => (
        <div key={i} className="am-card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ height: 120, background: 'linear-gradient(135deg, rgba(255,92,245,0.20), rgba(92,217,255,0.12))', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <I.play size={36} style={{ color: '#fff', opacity: 0.9 }}/>
            <span style={{ position: 'absolute', top: 10, right: 10, padding: '3px 8px', borderRadius: 4, background: v.live ? 'var(--negative)' : 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: '.06em' }}>{v.dur}</span>
          </div>
          <div style={{ padding: 12 }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{v.t}</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 2 }}>{v.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ArenaMobileMerchandise() {
  return (
    <div className="am-page">
      <ArenaMobilePageHead title="Shop" sub="Free shipping over $80" back="dashboard"/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
          { t: 'Arena Hoodie · Black', p: '$79', tag: 'BESTSELLER' },
          { t: 'Trader Cap · Magenta', p: '$32' },
          { t: 'Mousepad XL', p: '$24' },
          { t: 'Mug · Crest', p: '$14' },
          { t: 'Sticker pack', p: '$8' },
          { t: 'Pen · brushed steel', p: '$18', tag: 'NEW' },
        ].map((it, i) => (
          <div key={i} className="am-card" style={{ padding: 12 }}>
            <div style={{ height: 90, background: 'linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06))', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
              <I.diamond size={28} style={{ color: 'var(--text-dim)' }}/>
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.3 }}>{it.t}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
              <span className="mono" style={{ fontSize: 14, fontWeight: 700 }}>{it.p}</span>
              {it.tag && <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 4, background: 'color-mix(in oklab, var(--magenta) 18%, transparent)', color: 'var(--magenta)', letterSpacing: '.06em' }}>{it.tag}</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  ArenaMobileDeposit, ArenaMobileDepositCrypto, ArenaMobileDepositCard, ArenaMobileDepositWire,
  ArenaMobileWithdraw, ArenaMobileWithdrawCrypto, ArenaMobileWithdrawWire, ArenaMobileWithdrawConfirm,
  ArenaMobileTxSuccess,
  ArenaMobileGrandCup, ArenaMobileEducation, ArenaMobileTV, ArenaMobileMerchandise,
});

Object.assign(window, {
  ArenaMobileWebtrader, ArenaMobileInbox, ArenaMobileProfile,
  ArenaMobileProfileEdit, ArenaMobileSecurity, ArenaMobileWallet,
});