// 其余页面 — 实验室操作 / 师生对接 / 社区 / 竞赛 / 职业规划 / 招聘 / 评价 / 个人中心
// 全部移动端 + 桌面端混合

// ============ 实验室操作合规训练 ============
const LabMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="实验室操作" left={<Icon name="arrowLeft" size={20}/>} right={<Icon name="search" size={18}/>}/>
    <div style={{ padding: 14 }}>
      <div className="mh-card" style={{
        padding: 14, background: 'linear-gradient(135deg, var(--teal-500), var(--blue-500))',
        color: 'white', border: 'none',
      }}>
        <div style={{ fontSize: 11, opacity: 0.85 }}>合规训练 · 本周</div>
        <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4 }}>无菌操作 · 高速涡轮使用规范</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <span style={{ background: 'rgba(255,255,255,0.18)', padding: '3px 8px', borderRadius: 999, fontSize: 10 }}>必修</span>
          <span style={{ background: 'rgba(255,255,255,0.18)', padding: '3px 8px', borderRadius: 999, fontSize: 10 }}>剩余 12 min</span>
        </div>
      </div>

      <SectionTitle action={<a style={{ fontSize: 11, color: 'var(--blue-600)' }}>全部 →</a>}>
        <span style={{ marginTop: 16, display: 'block' }}>训练分类</span>
      </SectionTitle>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {[
          { t: '无菌与消毒', n: 8, ic: 'shield', tone: 'teal' },
          { t: '高速器械', n: 6, ic: 'zap', tone: 'blue' },
          { t: '感染防控', n: 5, ic: 'shield', tone: 'amber' },
          { t: '锐器伤处置', n: 4, ic: 'warning', tone: 'red' },
        ].map((c, i) => (
          <div key={i} className="mh-card" style={{ padding: 12 }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8,
              background: `var(--${c.tone}-50)`, color: `var(--${c.tone}-700)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={c.ic} size={16}/>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 8 }}>{c.t}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>{c.n} 个训练</div>
          </div>
        ))}
      </div>

      <SectionTitle><span style={{ marginTop: 16, display: 'block' }}>近期合规检查</span></SectionTitle>
      <div className="mh-card" style={{ padding: 0, overflow: 'hidden' }}>
        {[
          { ic: 'checkCircle', t: '手卫生 · 七步洗手法', d: '通过 · 5/12', tone: 'teal' },
          { ic: 'warning', t: '锐器盒摆放', d: '需复训 · 5/10', tone: 'amber' },
          { ic: 'checkCircle', t: '高压灭菌包装', d: '通过 · 5/8', tone: 'teal' },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, padding: 12, borderBottom: i < 2 ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
            <Icon name={r.ic} size={16} color={`var(--${r.tone}-500)`}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.t}</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{r.d}</div>
            </div>
            <Icon name="chevronRight" size={14} color="var(--ink-400)"/>
          </div>
        ))}
      </div>
    </div>
    <MobileTabBar active="training" onChange={onNav}/>
  </div>
);

// ============ 师生科研对接 ============
const ResearchMatchMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="师生科研对接" left={<Icon name="arrowLeft" size={20}/>}/>
    <div style={{ padding: 14 }}>
      <div className="mh-card" style={{ padding: 12, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="sparkle" size={18}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600 }}>AI 已为你匹配 5 个课题</div>
          <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>基于你的兴趣 · 论文 · 能力画像</div>
        </div>
        <Icon name="arrowRight" size={14} color="var(--blue-600)"/>
      </div>

      {[
        { prof: '李文渊', dept: '北大口腔 · 牙周病学', topic: '牙周炎与系统性疾病的双向关联', match: 92, tags: ['牙周', 'RCT', '可远程'], avail: '招 2 人' },
        { prof: '陈思雅', dept: '华西口腔 · 种植中心', topic: '即刻种植美学修复随访研究', match: 85, tags: ['种植', '随访', '本地'], avail: '招 1 人' },
        { prof: '周明哲', dept: '上九 · 颌面外科', topic: '正颌手术 3D 模拟规划', match: 78, tags: ['颌面', '3D', 'AI'], avail: '招 3 人' },
      ].map((m, i) => (
        <div key={i} className="mh-card" style={{ padding: 12, marginBottom: 10 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <Avatar name={m.prof[0]} size={40}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{m.prof} 教授</div>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--teal-700)' }}>匹配 {m.match}%</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 1 }}>{m.dept}</div>
            </div>
          </div>
          <div style={{ fontSize: 13, fontWeight: 500, marginTop: 10, lineHeight: 1.5 }}>{m.topic}</div>
          <div style={{ display: 'flex', gap: 5, marginTop: 8 }}>
            {m.tags.map((t, j) => <span key={j} className="mh-chip mh-chip-outline" style={{ fontSize: 10 }}>{t}</span>)}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
            <span style={{ fontSize: 11, color: 'var(--amber-700)', fontWeight: 600 }}>{m.avail}</span>
            <button className="mh-btn mh-btn-primary mh-btn-sm">投递意向</button>
          </div>
        </div>
      ))}
    </div>
    <MobileTabBar active="research" onChange={onNav}/>
  </div>
);

// ============ 科研热点社区 ============
const CommunityMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="科研热点" left={<Icon name="arrowLeft" size={20}/>} right={<Icon name="edit" size={18}/>}/>
    <div style={{ padding: '12px 14px 0', display: 'flex', gap: 6, overflowX: 'auto' }} className="mh-scroll">
      {['推荐', '关注', '本院', '牙周', '种植', '正畸', 'AI口腔'].map((t, i) => (
        <button key={i} style={{
          flexShrink: 0, padding: '5px 12px', borderRadius: 999,
          border: '1px solid ' + (i === 0 ? 'var(--blue-500)' : 'var(--border)'),
          background: i === 0 ? 'var(--blue-500)' : 'white',
          color: i === 0 ? 'white' : 'var(--ink-700)',
          fontSize: 12, fontWeight: i === 0 ? 600 : 400, cursor: 'pointer', fontFamily: 'inherit',
        }}>{t}</button>
      ))}
    </div>
    <div style={{ padding: 14 }}>
      {[
        { tag: '热点', tagTone: 'red', title: 'Nature 子刊:口腔菌群与阿尔茨海默病',
          summary: '丹麦团队 7 年队列研究 · 口腔卟啉单胞菌 P. gingivalis 暴露与认知衰退显著相关。', src: 'Nature Aging 2024', stats: '李教授等 12 人讨论' },
        { tag: '指南', tagTone: 'blue', title: '中华口腔:正畸拔牙诊疗共识(2024)',
          summary: '6 项核心更新 · 拔牙适应症再评估 · 微种植钉应用规范 · CBCT 推荐流程。', src: '中华口腔 · 2024.04', stats: '342 收藏' },
        { tag: '会议', tagTone: 'teal', title: 'IADR 2025 摘要投稿截止 8/15',
          summary: '重点议题:数字化牙科 · 生物再生 · AI 影像诊断。学生组海报奖金 ¥8000。', src: 'IADR 官方', stats: '32 同学已投' },
      ].map((p, i) => (
        <div key={i} className="mh-card" style={{ padding: 14, marginBottom: 10 }}>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className={`mh-chip mh-chip-${p.tagTone}`} style={{ fontSize: 10 }}>{p.tag}</span>
            <span style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{p.src}</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 8, lineHeight: 1.4 }}>{p.title}</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-700)', marginTop: 6, lineHeight: 1.6 }}>{p.summary}</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--border)' }}>
            <span style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{p.stats}</span>
            <div style={{ display: 'flex', gap: 10 }}>
              <Icon name="thumbsUp" size={14} color="var(--ink-500)"/>
              <Icon name="message" size={14} color="var(--ink-500)"/>
              <Icon name="bookmark" size={14} color="var(--ink-500)"/>
            </div>
          </div>
        </div>
      ))}
    </div>
    <MobileTabBar active="research" onChange={onNav}/>
  </div>
);

// ============ 竞赛项目助手 ============
const CompetitionMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="竞赛助手" left={<Icon name="arrowLeft" size={20}/>}/>
    <div style={{ padding: 14 }}>
      {/* 进行中 */}
      <div className="mh-card" style={{ padding: 14, background: 'linear-gradient(135deg, #163a5f, #112a44)', color: 'white', border: 'none' }}>
        <div style={{ fontSize: 11, opacity: 0.85 }}>进行中 · 我的项目</div>
        <div style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>"互联网+" 大学生创新大赛</div>
        <div style={{ fontSize: 11, opacity: 0.85, marginTop: 4 }}>智能口腔筛查 APP · 队员 4 人</div>
        <div style={{ marginTop: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, marginBottom: 4 }}>
            <span>项目进度</span><span>62%</span>
          </div>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.2)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: '62%', height: '100%', background: '#79c8bd' }}/>
          </div>
        </div>
        <div style={{ marginTop: 10, fontSize: 11, opacity: 0.85 }}>下一里程碑 · 路演视频 · 5/15</div>
      </div>

      <SectionTitle><span style={{ marginTop: 16, display: 'block' }}>报名中</span></SectionTitle>
      {[
        { name: '挑战杯 · 全国大学生课外学术作品', deadline: '截止 6/1', match: 89, prize: '一等奖 ¥20,000' },
        { name: '中华口腔学生研究生论文比赛', deadline: '截止 7/20', match: 76, prize: '入选发表机会' },
        { name: '全国大学生临床技能竞赛', deadline: '校内选拔 5/30', match: 82, prize: '团队赛 8 人' },
      ].map((c, i) => (
        <div key={i} className="mh-card" style={{ padding: 12, marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--amber-50)', color: 'var(--amber-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="trophy" size={18}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.4 }}>{c.name}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
                <span className="mh-chip mh-chip-red" style={{ fontSize: 10 }}>{c.deadline}</span>
                <span className="mh-chip mh-chip-teal" style={{ fontSize: 10 }}>匹配 {c.match}%</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 6 }}>{c.prize}</div>
            </div>
          </div>
        </div>
      ))}

      <SectionTitle><span style={{ marginTop: 16, display: 'block' }}>AI 助理</span></SectionTitle>
      <div className="mh-card" style={{ padding: 14, background: 'var(--blue-50)', borderColor: 'var(--blue-100)' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
          <AIPixie size={32} state="active"/>
          <div style={{ fontSize: 12.5, fontWeight: 600 }}>需要我帮你做什么?</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {['生成项目计划书提纲', '匹配队友(跨学科)', '寻找指导老师', '检查路演 PPT'].map((q, i) => (
            <button key={i} style={{
              padding: '8px 12px', background: 'white', border: '1px solid var(--blue-100)',
              borderRadius: 8, textAlign: 'left', fontSize: 12, color: 'var(--ink-800)', cursor: 'pointer', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="arrowRight" size={11} color="var(--blue-600)"/>{q}
            </button>
          ))}
        </div>
      </div>
    </div>
    <MobileTabBar active="research" onChange={onNav}/>
  </div>
);

// ============ 职业规划 ============
const CareerPlanMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="职业规划" left={<Icon name="arrowLeft" size={20}/>}/>
    <div style={{
      padding: '14px 16px 24px', background: 'linear-gradient(160deg, var(--blue-50), white)',
    }}>
      <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>当前推荐路径</div>
      <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>临床型博士 → 三甲口腔科医师</div>
      <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 4 }}>匹配你的兴趣、能力与所在地区</div>
    </div>
    <div style={{ padding: 14 }}>
      {/* 时间轴 */}
      <SectionTitle>5 年路径</SectionTitle>
      <div style={{ position: 'relative', paddingLeft: 22 }}>
        <div style={{ position: 'absolute', left: 7, top: 6, bottom: 6, width: 2, background: 'var(--ink-200)' }}/>
        {[
          { y: '现在', t: '大三 · 临床见习', s: 'cur', tasks: ['完成 12 类病例训练', '加入 1 个科研课题'] },
          { y: '大四', t: '考研冲刺 / 校内推免', s: 'next', tasks: ['口腔综合 320+', '英语六级 500+'] },
          { y: '硕士 1-3 年', t: '专业型硕士 / 学术型硕士', s: 'future', tasks: ['临床轮转', '一作 SCI ×1'] },
          { y: '硕士毕业', t: '考博 / 规培 / 入职', s: 'future', tasks: ['执业医师证', '规培证'] },
          { y: '5 年后', t: '主治医师 / 博士在读', s: 'goal', tasks: [] },
        ].map((n, i) => (
          <div key={i} style={{ position: 'relative', paddingBottom: 18 }}>
            <div style={{
              position: 'absolute', left: -22, top: 4,
              width: 16, height: 16, borderRadius: '50%',
              background: n.s === 'cur' ? 'var(--blue-500)' : n.s === 'goal' ? 'var(--teal-500)' : 'white',
              border: '2px solid ' + (n.s === 'cur' ? 'var(--blue-500)' : n.s === 'goal' ? 'var(--teal-500)' : 'var(--ink-300)'),
            }}/>
            <div style={{ fontSize: 10.5, color: n.s === 'cur' ? 'var(--blue-700)' : 'var(--ink-500)', fontWeight: 600 }}>{n.y}</div>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginTop: 2 }}>{n.t}</div>
            {n.tasks.length > 0 && (
              <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {n.tasks.map((t, j) => (
                  <div key={j} style={{ fontSize: 11.5, color: 'var(--ink-700)', display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--ink-400)' }}/>{t}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="mh-card" style={{ padding: 14, marginTop: 12, background: 'var(--teal-50)', borderColor: 'var(--teal-100)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="lightbulb" size={16} color="var(--teal-700)"/>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--teal-700)' }}>路径替换</div>
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-700)', marginTop: 6, lineHeight: 1.6 }}>
          也可以考虑 <strong>科研型博士</strong> 路径(适合科研得分前 20%) 或 <strong>口腔民营机构</strong> 路径(更短上岗周期)。
        </div>
        <button className="mh-btn mh-btn-secondary mh-btn-sm" style={{ marginTop: 10 }}>对比路径</button>
      </div>
    </div>
    <MobileTabBar active="career" onChange={onNav}/>
  </div>
);

// ============ 招聘广场 ============
const JobsMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="招聘广场" left={<Icon name="arrowLeft" size={20}/>} right={<Icon name="filter" size={18}/>}/>
    <div style={{ padding: 14 }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, overflowX: 'auto' }} className="mh-scroll">
        {['全部', '规培', '科室直聘', '直博推免', '实习', '研究助理'].map((t, i) => (
          <button key={i} style={{
            flexShrink: 0, padding: '5px 11px', borderRadius: 999,
            border: '1px solid ' + (i === 0 ? 'var(--blue-500)' : 'var(--border)'),
            background: i === 0 ? 'var(--blue-500)' : 'white',
            color: i === 0 ? 'white' : 'var(--ink-700)',
            fontSize: 12, fontWeight: i === 0 ? 600 : 400, cursor: 'pointer', fontFamily: 'inherit',
          }}>{t}</button>
        ))}
      </div>
      {[
        { name: '北京大学口腔医院', role: '2025 届规培医师 · 口腔综合', loc: '北京 · 海淀', salary: '7-9k', tag: '截止 5/12', tagTone: 'red', match: 91, refs: 8 },
        { name: '华西口腔医学院', role: '硕士直博推免 · 牙周方向', loc: '成都', salary: '推免', tag: '推荐免试', tagTone: 'teal', match: 86, refs: 4 },
        { name: '上海第九人民医院', role: '种植中心助理医师', loc: '上海', salary: '12-15k', tag: '在线笔试', tagTone: 'blue', match: 79, refs: 12 },
        { name: '深圳口腔医院', role: '正畸科 · 见习', loc: '深圳', salary: '实习津贴', tag: '在招', tagTone: 'outline', match: 73, refs: 3 },
      ].map((j, i) => (
        <div key={i} className="mh-card" style={{ padding: 12, marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: 'var(--ink-700)', flexShrink: 0 }}>
              {j.name.slice(0, 2)}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{j.role}</span>
                <span style={{ fontSize: 11, color: 'var(--blue-600)', fontWeight: 700 }}>匹配 {j.match}%</span>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-700)', marginTop: 3 }}>{j.name}</div>
              <div style={{ display: 'flex', gap: 8, marginTop: 8, alignItems: 'center', fontSize: 10.5, color: 'var(--ink-500)' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}><Icon name="mapPin" size={11}/>{j.loc}</span>
                <span>·</span>
                <span>{j.salary}</span>
                <span>·</span>
                <span>{j.refs} 校友推荐</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                <span className={`mh-chip mh-chip-${j.tagTone}`} style={{ fontSize: 10 }}>{j.tag}</span>
                <button className="mh-btn mh-btn-primary mh-btn-sm">投递</button>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
    <MobileTabBar active="career" onChange={onNav}/>
  </div>
);

// ============ 第三方评价体系 ============
const EvaluationMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <MobileTopBar title="能力认证" left={<Icon name="arrowLeft" size={20}/>}/>
    <div style={{ padding: 14 }}>
      {/* 我的认证卡 */}
      <div className="mh-card" style={{
        padding: 18, background: 'linear-gradient(135deg, var(--blue-700), var(--teal-700))',
        color: 'white', border: 'none',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 11, opacity: 0.8 }}>MedHub 数字徽章</div>
            <div style={{ fontSize: 20, fontWeight: 700, marginTop: 6 }}>临床见习 · L2</div>
            <div style={{ fontSize: 11, opacity: 0.85, marginTop: 4 }}>NO. MH-2024-08712 · 区块链可验证</div>
          </div>
          <Icon name="shield" size={36} color="rgba(255,255,255,0.85)" strokeWidth={1.5}/>
        </div>
        <hr style={{ border: 'none', height: 1, background: 'rgba(255,255,255,0.2)', margin: '14px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: 0.85 }}>
          <span>已通过 12 项</span>
          <span>颁发于 2024.12.20</span>
        </div>
      </div>

      <SectionTitle><span style={{ marginTop: 16, display: 'block' }}>我的能力档案</span></SectionTitle>
      <div className="mh-card" style={{ padding: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <RadarChart values={[78, 65, 56, 84, 72, 68]} size={200}/>
        </div>
        <div style={{ marginTop: 10, padding: 10, background: 'var(--ink-100)', borderRadius: 8, fontSize: 11.5, lineHeight: 1.6, color: 'var(--ink-700)' }}>
          基于 86 次训练 · 12 项考核 · 3 个项目得出。学校与用人单位可查阅完整明细。
        </div>
      </div>

      <SectionTitle><span style={{ marginTop: 16, display: 'block' }}>已获徽章</span></SectionTitle>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {[
          { t: '问诊达人', ic: 'message', tone: 'blue' },
          { t: '影像识读', ic: 'eye', tone: 'teal' },
          { t: '循证素养', ic: 'fileText', tone: 'amber' },
          { t: '团队协作', ic: 'users', tone: 'blue' },
          { t: '锁定 ?', ic: 'help', tone: 'ink', dim: true },
          { t: '锁定 ?', ic: 'help', tone: 'ink', dim: true },
        ].map((b, i) => (
          <div key={i} className="mh-card" style={{
            padding: 12, textAlign: 'center', opacity: b.dim ? 0.45 : 1,
          }}>
            <div style={{
              width: 44, height: 44, margin: '0 auto', borderRadius: 12,
              background: b.dim ? 'var(--ink-100)' : `var(--${b.tone}-50)`,
              color: b.dim ? 'var(--ink-400)' : `var(--${b.tone}-700)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={b.ic} size={22}/>
            </div>
            <div style={{ fontSize: 11, fontWeight: 600, marginTop: 8 }}>{b.t}</div>
          </div>
        ))}
      </div>

      <button className="mh-btn mh-btn-secondary mh-btn-lg" style={{ width: '100%', marginTop: 14 }}>
        <Icon name="share" size={14}/>分享能力档案给招聘方
      </button>
    </div>
    <MobileTabBar active="career" onChange={onNav}/>
  </div>
);

// ============ 个人中心 ============
const ProfileMobile = ({ onNav }) => (
  <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
    <div style={{
      padding: '40px 16px 60px', background: 'linear-gradient(160deg, var(--blue-600), var(--blue-800))',
      color: 'white', position: 'relative',
    }}>
      <div className="mh-statusbar" style={{ background: 'transparent', color: 'white', position: 'absolute', top: 0, left: 0, right: 0 }}>
        <span>9:41</span>
        <span style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: 11 }}>
          <svg width="22" height="10" viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor"/><rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/></svg>
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <Avatar name="林" size={64} color="rgba(255,255,255,0.2)"/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700 }}>林思远</div>
          <div style={{ fontSize: 11.5, opacity: 0.85, marginTop: 2 }}>口腔医学 · 大三 · 武汉大学</div>
          <div style={{ fontSize: 10.5, opacity: 0.75, marginTop: 4 }}>ID:m_287501 · 加入 412 天</div>
        </div>
        <Icon name="settings" color="white" size={20}/>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 18 }}>
        {[{l:'训练',v:'86'},{l:'徽章',v:'12'},{l:'课题',v:'3'},{l:'积分',v:'2840'}].map((s,i)=>(
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 18, fontWeight: 700 }}>{s.v}</div>
            <div style={{ fontSize: 10.5, opacity: 0.85, marginTop: 2 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ padding: '0 14px', marginTop: -36 }}>
      <div className="mh-card" style={{ padding: 0, overflow: 'hidden' }}>
        {[
          { ic: 'shield', t: '能力档案', d: '认证 L2 · 12 徽章' },
          { ic: 'bookmark', t: '我的收藏', d: '24 个病例 · 8 个岗位' },
          { ic: 'fileText', t: '历史报告', d: '86 份训练报告' },
          { ic: 'flag', t: '我的简历', d: '完成度 78%' },
          { ic: 'users', t: '我的导师 / 课题', d: '李文渊 · 牙周与系统疾病' },
        ].map((m, i, arr) => (
          <div key={i} style={{
            display: 'flex', gap: 12, padding: '14px 14px',
            borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none',
            alignItems: 'center', cursor: 'pointer',
          }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--blue-50)', color: 'var(--blue-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={m.ic} size={16}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{m.t}</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 1 }}>{m.d}</div>
            </div>
            <Icon name="chevronRight" size={14} color="var(--ink-400)"/>
          </div>
        ))}
      </div>

      <div className="mh-card" style={{ padding: 0, overflow: 'hidden', marginTop: 12 }}>
        {[
          { ic: 'bell', t: '消息中心' },
          { ic: 'settings', t: '设置与隐私' },
          { ic: 'help', t: '反馈与帮助' },
        ].map((m, i, arr) => (
          <div key={i} style={{
            display: 'flex', gap: 12, padding: '12px 14px',
            borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none',
            alignItems: 'center',
          }}>
            <Icon name={m.ic} size={16} color="var(--ink-600)"/>
            <span style={{ flex: 1, fontSize: 13 }}>{m.t}</span>
            <Icon name="chevronRight" size={14} color="var(--ink-400)"/>
          </div>
        ))}
      </div>
    </div>
    <MobileTabBar active="profile" onChange={onNav}/>
  </div>
);

// ============ AI 小精灵 全局浮窗 + 4 种变体 ============
const PixieFloating = ({ variant = 'default', expanded, onToggle }) => {
  // variant: default | bottom-sheet | side-panel | inline
  return (
    <div style={{ position: 'absolute', bottom: 80, right: 14, zIndex: 60 }}>
      {!expanded && (
        <AIPixie size={48} state="active" onClick={onToggle} style={{ borderRadius: 16 }}/>
      )}
      {expanded && (
        <div style={{
          width: 300, background: 'white', borderRadius: 16,
          boxShadow: 'var(--shadow-xl)', border: '1px solid var(--border)',
          overflow: 'hidden',
        }} className="mh-fade-in">
          <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)' }}>
            <AIPixie size={28}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>小灵 · MedHub AI</div>
              <div style={{ fontSize: 10, color: 'var(--teal-700)' }}>● 在线</div>
            </div>
            <Icon name="close" size={16} onClick={onToggle} style={{ cursor: 'pointer' }}/>
          </div>
          <div style={{ padding: 14, fontSize: 12.5, color: 'var(--ink-800)', lineHeight: 1.65 }}>
            你好,需要我帮你做什么?我可以:
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
              {['推荐 3 个匹配课题', '检索一篇文献', '解释这个根尖片', '生成简历内容'].map((q, i) => (
                <button key={i} style={{
                  padding: '7px 10px', background: 'var(--blue-50)', border: 'none',
                  borderRadius: 8, textAlign: 'left', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
                  color: 'var(--blue-700)',
                }}>{q}</button>
              ))}
            </div>
          </div>
          <div style={{ padding: 10, borderTop: '1px solid var(--border)', display: 'flex', gap: 6 }}>
            <input className="mh-input" placeholder="问点什么…" style={{ flex: 1 }}/>
            <button style={{ width: 32, height: 32, border: 'none', background: 'var(--blue-500)', borderRadius: 8, cursor: 'pointer' }}>
              <Icon name="send" size={14} color="white"/>
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, {
  LabMobile, ResearchMatchMobile, CommunityMobile, CompetitionMobile,
  CareerPlanMobile, JobsMobile, EvaluationMobile, ProfileMobile,
  PixieFloating,
});