function SquadTab({ dark }) {
  const th = useTheme(dark);
  const [seg, setSeg] = useState('members');
  return (
    <div>
      <div style={{ display:'flex', background:th.surfaceAlt, borderRadius:999, padding:3, marginBottom:12 }}>
        {[['members','成員'],['messages','訊息'],['transfers','轉單池']].map(([k,l]) => (
          <button key={k} onClick={() => setSeg(k)} className="press" style={{
            flex:1, padding:'8px 0', borderRadius:999, border:'none', cursor:'pointer',
            background: seg===k ? th.surface : 'transparent', color:th.text, fontSize:FS(12), fontWeight:700, boxShadow: seg===k?'0 1px 3px rgba(0,0,0,.08)':'none', fontFamily:'Noto Sans TC',
          }}>{l}</button>
        ))}
      </div>

      {seg==='members' && (
        <div>
          <div style={{ background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:14, marginBottom:10 }}>
            <div style={{ fontSize:FS(16), fontWeight:800, color:th.text }}>宏運小隊</div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:3 }}>3/5 人 · 隊長 張文豪</div>
            <div style={{ display:'flex', gap:8, marginTop:10 }}>
              <button className="press" style={{ flex:1, padding:'10px', borderRadius:10, background:th.text, color:th.surface, border:'none', fontSize:FS(13), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>+ 邀請</button>
              <button className="press" style={{ flex:1, padding:'10px', borderRadius:10, background:'transparent', border:`1px solid ${th.border}`, color:th.danger, fontSize:FS(13), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>解散 / 離開</button>
            </div>
          </div>
          {DATA.squad.members.map(m => (
            <div key={m.name} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, marginBottom:8 }}>
              <Avatar name={m.name} size={40} bg={m.founder?'#E8A855':th.text} />
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                  <span style={{ fontSize:FS(14), fontWeight:700, color:th.text }}>{m.name}</span>
                  {m.founder && <Pill fg='#A6750C' bg='#FFF7E6'>隊長</Pill>}
                </div>
                <div style={{ fontSize:FS(11), color:th.textMuted, marginTop:2 }}>{m.plate} · {m.district}</div>
              </div>
              <span style={{ display:'flex', alignItems:'center', gap:4, fontSize:FS(11), color: m.online?th.success:th.textMuted }}>
                <span style={{ width:7, height:7, borderRadius:'50%', background:m.online?th.success:th.border }} />{m.online?'在線':'離線'}
              </span>
            </div>
          ))}
        </div>
      )}

      {seg==='messages' && (
        <div style={{ background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:14, minHeight:200 }}>
          {DATA.squad.messages.map((m,i) => (
            <div key={i} style={{ display:'flex', justifyContent: m.from==='me'?'flex-end':'flex-start', marginBottom:10 }}>
              <div style={{
                maxWidth:'80%', padding:'9px 13px', borderRadius:m.from==='me'?'16px 16px 4px 16px':'16px 16px 16px 4px',
                background: m.from==='me'?th.text:th.surfaceAlt, color: m.from==='me'?th.surface:th.text, fontSize:FS(13), lineHeight:1.6,
              }}>{m.text}</div>
            </div>
          ))}
          <div style={{ display:'flex', gap:8, marginTop:14 }}>
            <input placeholder="傳訊息給小隊..." style={{ flex:1, padding:'11px 14px', borderRadius:12, border:`1.5px solid ${th.border}`, background:th.surfaceAlt, color:th.text, fontSize:FS(13), outline:'none', fontFamily:'Noto Sans TC' }} />
            <button className="press" style={{ width:42, height:42, borderRadius:'50%', background:th.danger, color:'#FFF', border:'none', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', fontSize:FS(16) }}>➤</button>
          </div>
        </div>
      )}

      {seg==='transfers' && (
        <div>
          {DATA.squad.transfers.map(t => (
            <div key={t.no} style={{ background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:14, marginBottom:10 }}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                <TypeChip type={t.type} /><span style={{ fontFamily:FONTS.mono, fontSize:FS(11), color:th.textMuted }}>#{t.no}</span>
              </div>
              <div style={{ fontSize:FS(13), color:th.textSub, marginTop:7 }}>{t.date} · {t.time}</div>
              <div style={{ fontSize:FS(15), fontWeight:700, color:th.text, marginTop:3 }}>{t.from} → {t.to}</div>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:8, flexWrap:'wrap' }}>
                <span style={{ fontFamily:FONTS.mono, fontWeight:900, fontSize:FS(18), color:th.text }}>NT$<span style={{fontWeight:700}}>{t.price.toLocaleString()}</span></span>
                <span style={{ fontFamily:FONTS.mono, fontSize:FS(12), color:th.danger }}>轉單費（3%）−NT${t.fee}</span>
                <Pill fg='#0F7A3A' bg='#E6F2EB'>🎁 轉單獎勵 +{t.reward} 點</Pill>
              </div>
              <div style={{ fontSize:FS(12), color:th.textSub, marginTop:8, background:th.surfaceAlt, borderRadius:8, padding:8 }}>
                轉出司機：{t.fromDriver} · 原因：{t.reason}
              </div>
              <button className="press" style={{ marginTop:10, width:'100%', padding:'13px', borderRadius:10, background:th.text, color:th.surface, border:'none', fontSize:FS(14), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>認領行程</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function MiniDispatcher({ dark, onBack }) {
  const th = useTheme(dark);
  const [payMode, setPayMode] = useState('transfer');
  const [orderType, setOrderType] = useState(0);
  const [toastMsg, setToastMsg] = useState(null);
  const [dispatched, setDispatched] = useState(0);
  const [showForm, setShowForm] = useState(true);

  function handleDispatch() {
    setShowForm(false);
    setTimeout(() => {
      const newCount = dispatched + 1;
      setDispatched(newCount);
      setToastMsg(newCount === 1 ? '首張訂單已成功派至接單大廳！' : `第 ${newCount} 張訂單已成功派至接單大廳！`);
      setShowForm(true);
    }, 600);
  }

  const newOrderNo = 'G240810' + (315 + dispatched);

  if (dispatched > 0 && !showForm) {
    return (
      <div style={{ paddingBottom: 20, textAlign: 'center' }}>
        {onBack && <button onClick={onBack} className="press" style={{ width: 34, height: 34, borderRadius: '50%', border: `1px solid ${th.border}`, background: th.surface, color: th.text, cursor: 'pointer', fontSize: FS(16), marginBottom: 16 }}>‹</button>}
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: th.successBg, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}>
          <Icon.Check size={28} color={th.success} />
        </div>
        <div style={{ fontSize: FS(20), fontWeight: 900, color: th.text }}>派單成功</div>
        <div style={{ fontSize: FS(13), color: th.textSub, marginTop: 6, lineHeight: 1.7 }}>
          訂單 <span style={{ fontFamily: FONTS.mono, color: th.text }}>#{newOrderNo}</span> 已發佈至接單大廳，其他司機可以接單。
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <button onClick={() => { setToastMsg(null); setShowForm(true); }} className="press" style={{ flex: 1, padding: '13px', borderRadius: 12, background: th.surfaceAlt, color: th.text, border: 'none', fontSize: FS(14), fontWeight: 700, cursor: 'pointer', fontFamily: 'Noto Sans TC' }}>再發一單</button>
          <button onClick={() => { setToastMsg(null); setShowForm(true); }} className="press" style={{ flex: 1, padding: '13px', borderRadius: 12, background: th.text, color: th.surface, border: 'none', fontSize: FS(14), fontWeight: 800, cursor: 'pointer', fontFamily: 'Noto Sans TC' }}>查看已發單</button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ paddingBottom: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        {onBack && <button onClick={onBack} className="press" style={{ width: 34, height: 34, borderRadius: '50%', border: `1px solid ${th.border}`, background: th.surface, color: th.text, cursor: 'pointer', fontSize: FS(16) }}>‹</button>}
        <div style={{ fontSize: FS(18), fontWeight: 900, color: th.text }}>小車頭發單</div>
        <span style={{ marginLeft: 'auto', fontSize: FS(11), color: th.success, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: th.success, display: 'inline-block' }} />已開通
        </span>
      </div>

      {toastMsg && (
        <div className="fade-in" style={{
          background: th.successBg, color: th.success, borderRadius: 10, padding: '10px 14px', marginBottom: 10,
          fontSize: FS(12), fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Icon.Check size={16} color={th.success} />{toastMsg}
          <button onClick={() => setToastMsg(null)} className="press" style={{ marginLeft: 'auto', background: 'transparent', border: 'none', color: th.success, cursor: 'pointer', fontSize: FS(14), fontWeight: 700 }}>×</button>
        </div>
      )}

      <SectionLabel dark={dark}>行程資訊</SectionLabel>
      <Card dark={dark}>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['接機', '送機', '包車', '接送船'].map((t, i) => (
            <button key={t} onClick={() => setOrderType(i)} className="press" style={{
              padding: '7px 14px', borderRadius: 18, border: 'none', cursor: 'pointer', fontFamily: 'Noto Sans TC',
              background: i === orderType ? th.text : 'transparent', color: i === orderType ? th.surface : th.text,
              border: i === orderType ? 'none' : `1px solid ${th.border}`, fontSize: FS(13), fontWeight: 600,
            }}>{t}</button>
          ))}
        </div>
        {['上車地點', '下車地點'].map(p => (
          <div key={p} style={{ marginTop: 12 }}>
            <div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>{p}</div>
            <div style={{
              padding: '13px 14px', borderRadius: 12, border: `1.5px solid ${th.border}`, color: th.text, fontSize: FS(14), cursor: 'text',
              background: th.surface,
            }}>{p === '上車地點' ? '桃園機場 T1' : '台北車站'}</div>
          </div>
        ))}
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <div style={{ flex: 1 }}><div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>日期</div><div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(14), fontFamily: FONTS.mono }}>08/10</div></div>
          <div style={{ flex: 1 }}><div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>時間</div><div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(14), fontFamily: FONTS.mono }}>09:05</div></div>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
          {[['transfer', '客下轉帳'], ['cash', '代收回金']].map(([k, l]) => (
            <button key={k} onClick={() => setPayMode(k)} className="press" style={{
              flex: 1, padding: '9px', borderRadius: 8, cursor: 'pointer', fontFamily: 'Noto Sans TC', fontSize: FS(12), fontWeight: 600,
              background: payMode === k ? th.text : 'transparent', color: payMode === k ? th.surface : th.text, border: payMode === k ? 'none' : `1px solid ${th.border}`,
            }}>{l}</button>
          ))}
        </div>
        <div style={{ marginTop: 12 }}>
          <div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>{payMode === 'transfer' ? '金額（元）' : '代收金額（元）'}</div>
          <div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(16), fontFamily: FONTS.mono }}>1850</div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <div style={{ flex: 1 }}><div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>人數</div><div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(14), fontFamily: FONTS.mono }}>2</div></div>
          <div style={{ flex: 1 }}><div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>行李數</div><div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(14), fontFamily: FONTS.mono }}>2</div></div>
        </div>
      </Card>
      <SectionLabel dark={dark}>乘客資訊</SectionLabel>
      <Card dark={dark}>
        {['乘客姓名', '乘客電話', '航班編號（選填）'].map(f => (
          <div key={f} style={{ marginBottom: 12 }}>
            <div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>{f}</div>
            <div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.text, fontSize: FS(14), cursor: 'text' }}>{f === '乘客姓名' ? '王小姐' : f === '乘客電話' ? '0933-000111' : 'BR-217'}</div>
          </div>
        ))}
        <div>
          <div style={{ fontSize: FS(11), color: th.textMuted, marginBottom: 4 }}>備註（選填）</div>
          <div style={{ padding: '13px', borderRadius: 12, border: `1.5px solid ${th.border}`, background: th.surface, color: th.textMuted, fontSize: FS(14), minHeight: 56, cursor: 'text' }}>帶嬰兒車，請協助放行李</div>
        </div>
      </Card>
      <button onClick={handleDispatch} className="press" style={{ marginTop: 16, width: '100%', padding: '16px', borderRadius: 12, background: th.success, color: '#FFF', border: 'none', fontSize: FS(16), fontWeight: 900, cursor: 'pointer', fontFamily: 'Noto Sans TC' }}>派單至接單大廳</button>

      <SectionLabel dark={dark}>我已派發的訂單 ({dispatched + DATA.miniDispatched.length})</SectionLabel>
      {dispatched > 0 && (
        <Card dark={dark} style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <TypeChip type={['pickup', 'dropoff', 'charter', 'boat'][orderType]} />
            <span style={{ fontFamily: FONTS.mono, fontSize: FS(11), color: th.textMuted }}>#{newOrderNo}</span>
            <StatusPill label="已上架" fg="#0F7A3A" bg="#E6F2EB" style={{ marginLeft: 'auto' }} />
          </div>
          <div style={{ fontSize: FS(12), color: th.textSub, marginTop: 6 }}>08/10 · 09:05</div>
          <div style={{ fontSize: FS(15), fontWeight: 700, color: th.text, marginTop: 3 }}>桃園機場 T1 → 台北車站</div>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: 6 }}>
            <Amount value={1850} size={20} dark={dark} />
            <span style={{ marginLeft: 'auto', fontSize: FS(11), color: th.textMuted }}>{payMode === 'transfer' ? '客下轉帳' : '代收回金'}</span>
          </div>
        </Card>
      )}
      {DATA.miniDispatched.map(o => (
        <Card key={o.no} dark={dark} style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <TypeChip type={o.type} />
            <span style={{ fontFamily: FONTS.mono, fontSize: FS(11), color: th.textMuted }}>#{o.no}</span>
            <StatusPill label="已上架" fg="#0F7A3A" bg="#E6F2EB" style={{ marginLeft: 'auto' }} />
          </div>
          <div style={{ fontSize: FS(12), color: th.textSub, marginTop: 6 }}>{o.date} · {o.time}</div>
          <div style={{ fontSize: FS(15), fontWeight: 700, color: th.text, marginTop: 3 }}>{o.from} → {o.to}</div>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: 6 }}>
            <Amount value={o.price} size={20} dark={dark} />
            <span style={{ marginLeft: 'auto', fontSize: FS(11), color: th.textMuted }}>{o.payment}{o.returnAmount ? ` · 回金${o.returnAmount}` : ''}</span>
          </div>
        </Card>
      ))}
      {DATA.miniDispatched.length + dispatched === 0 && (
        <div style={{ textAlign: 'center', padding: '20px 0', color: th.textMuted }}><div style={{ fontSize: FS(40) }}>—</div><div style={{ fontSize: FS(13), marginTop: 6 }}>尚未派發任何訂單</div></div>
      )}
    </div>
  );
}

function QrSection({ dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ textAlign:'center', padding:'20px 0 6px' }}>
      <div style={{ fontSize:FS(13), color:th.textSub, lineHeight:1.7 }}>
        生成專屬 QR Code，讓乘客掃碼即可查看您的名片與預訂頁面。
      </div>
      <button className="press" style={{ marginTop:14, width:'100%', padding:'15px', borderRadius:12, background:th.text, color:th.surface, border:'none', fontSize:FS(15), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>生成 QR 碼</button>
      <div style={{ marginTop:18, background:th.surfaceAlt, borderRadius:14, padding:18, display:'inline-block' }}>
        <svg width="120" height="120" viewBox="0 0 21 21">
          <rect width="21" height="21" fill="#FFF"/>
          {[...Array(7)].map((_,r)=>[...Array(7)].map((_,c)=>{
            const on = [[0,0],[0,1],[0,2],[1,0],[1,2],[2,0],[2,1],[2,2],[6,0],[6,1],[6,2],[5,0],[5,2],[4,0],[4,1],[4,2],[0,6],[0,5],[0,4],[1,6],[2,6],[2,5],[2,4],[6,6],[6,5],[6,4],[5,6],[4,6],[4,5],[4,4]].some(([a,b])=>a===r&&b===c) || (r%2===1&&c%2===0&&r<7&&c<7);
            return <rect key={r+'-'+c} x={c*3} y={r*3} width="2.4" height="2.4" fill={on?'#0A0A0A':'#FFF'}/>;
          }))}
        </svg>
        <div style={{ fontSize:FS(12), color:th.textSub, marginTop:8 }}>客製化 QR Code</div>
      </div>
      <div style={{ display:'flex', gap:8, marginTop:14 }}>
        <button className="press" style={{ flex:1, padding:'12px', borderRadius:10, background:th.text, color:th.surface, border:'none', fontSize:FS(13), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>下載 QR 乘車卡</button>
        <button className="press" style={{ flex:1, padding:'12px', borderRadius:10, background:th.surfaceAlt, color:th.text, border:'none', fontSize:FS(13), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>複製連結</button>
      </div>
      <button className="press" style={{ marginTop:12, width:'100%', padding:'12px', borderRadius:10, background:'transparent', color:'#1F3FA8', border:'none', fontSize:FS(13), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>按下前往預訂網頁 ›</button>
    </div>
  );
}

function TabPremium({ dark }) {
  const th = useTheme(dark);
  const [feat, setFeat] = useState('squad');
  const [squadOpen, setSquadOpen] = useState(false);
  const [miniOpen, setMiniOpen] = useState(false);
  const d = DATA.driver;

  const feats = [
    { key:'squad', label:'小隊管理', enabled: true },
    { key:'mini', label:'小車頭', enabled: true },
    { key:'qr', label:'我的QRCode', enabled: true },
  ];

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:th.bg }}>
      <ScreenHeader title="會員專區" sub={d.tier} dark={dark} />

      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px' }} className="scroll-hide">
        <div style={{ background:'#0A0A0A', borderRadius:16, padding:18, color:'#FFF', minHeight:132 }}>
          <div style={{ fontSize:FS(12), color:'#A8A39B' }}>當前會員等級</div>
          <div style={{ fontSize:FS(40), fontWeight:800, letterSpacing:-.5, marginTop:2 }}>{d.tier}</div>
          <div style={{ fontSize:FS(12), color:'#A8A39B', marginTop:4 }}>到期 2026-12-31</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <span style={{ fontSize: FS(10), color: '#E8A855', background: 'rgba(232,168,85,.2)', padding: '2px 8px', borderRadius: 4 }}>小隊功能</span>
            <span style={{ fontSize: FS(10), color: '#5CD17A', background: 'rgba(92,209,122,.2)', padding: '2px 8px', borderRadius: 4 }}>小車頭已開通</span>
          </div>
        </div>

        <SectionLabel dark={dark}>專屬功能</SectionLabel>
        <FilterChips
          options={feats.map(f=>({ key:f.key, label:f.label }))}
          value={feat}
          onChange={f => {
            const t = feats.find(x=>x.key===f);
            if (!t.enabled && f!=='qr') { setMiniOpen(true); return; }
            setFeat(f);
          }}
          dark={dark}
        />

        <div style={{ marginTop:12, background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:14 }}>
          {feat==='squad' && <SquadTab dark={dark} />}
          {feat==='mini' && <MiniDispatcher dark={dark} />}
          {feat==='qr' && <QrSection dark={dark} />}
        </div>

        {feat !== 'mini' && (
          <div style={{ border:`1px dashed ${th.border}`, borderRadius:14, padding:14, marginTop:12, textAlign:'center' }}>
            <div style={{ fontSize:FS(13), fontWeight:700, color:th.text }}>升級會員 · 解鎖更多功能</div>
            <button className="press" style={{ marginTop:10, padding:'10px 22px', borderRadius:10, background:'#E8A855', color:'#1C1917', border:'none', fontSize:FS(13), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>查看高級會員方案</button>
          </div>
        )}
      </div>

      {(squadOpen) && (
        <div className="modal-overlay fade-in">
          <div className="modal-card" style={{ background:th.surface, width:340, padding:18 }}>
            <div style={{ fontSize:FS(16), fontWeight:800, color:th.text }}>小隊管理</div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:6, lineHeight:1.6 }}>小隊管理需為進階以上會員，升級後即可建立或加入小隊。</div>
            <button onClick={() => setSquadOpen(false)} className="press" style={{ marginTop:16, width:'100%', padding:'13px', borderRadius:12, background:th.text, color:th.surface, border:'none', fontSize:FS(14), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>了解升級方案</button>
          </div>
        </div>
      )}
      {miniOpen && (
        <div className="modal-overlay fade-in">
          <div className="modal-card" style={{ background:th.surface, width:340, padding:18 }}>
            <div style={{ fontSize:FS(16), fontWeight:800, color:th.text }}>小車頭模組</div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:6, lineHeight:1.6 }}>
              小車頭模組月繳 <b style={{ color:th.text, fontFamily:FONTS.mono }}>NT$300</b>、季繳 <b style={{ color:th.text, fontFamily:FONTS.mono }}>NT$800</b>。開通後即可在接單大廳派發自己的訂單。
            </div>
            <div style={{ display:'flex', gap:8, marginTop:16 }}>
              <button onClick={() => setMiniOpen(false)} className="press" style={{ flex:1, padding:'13px', borderRadius:12, background:th.surfaceAlt, color:th.text, border:'none', fontSize:FS(14), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>稍後</button>
              <button onClick={() => setMiniOpen(false)} className="press" style={{ flex:1, padding:'13px', borderRadius:12, background:th.text, color:th.surface, border:'none', fontSize:FS(14), fontWeight:800, cursor:'pointer', fontFamily:'Noto Sans TC' }}>前往開通</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}