// Researcher additional module: Compliance Research + Creative CRO module
const { useState, useMemo } = React;

function ResearcherCompliance() {
  const { lang } = useApp();

  const complianceTopics = lang === 'zh' ? [
    {
      category: '数据隐私',
      items: [
        { name: 'GDPR (欧盟)', status: 'compliant', lastUpdate: '2024-09-15', risk: 'low' },
        { name: 'CCPA / CPRA (加州)', status: 'compliant', lastUpdate: '2024-08-20', risk: 'low' },
        { name: 'PIPL (中国)', status: 'review', lastUpdate: '2024-10-01', risk: 'medium' },
      ]
    },
    {
      category: '产品安全',
      items: [
        { name: 'CE认证 (欧盟)', status: 'compliant', lastUpdate: '2024-07-10', risk: 'low' },
        { name: 'FCC认证 (美国)', status: 'compliant', lastUpdate: '2024-06-25', risk: 'low' },
        { name: 'RoHS (欧盟)', status: 'compliant', lastUpdate: '2024-05-12', risk: 'low' },
        { name: 'UKCA (英国)', status: 'pending', lastUpdate: '2024-10-10', risk: 'medium' },
      ]
    },
    {
      category: '消费者保护',
      items: [
        { name: '消费者权益法 (各国)', status: 'monitoring', lastUpdate: '2024-10-20', risk: 'low' },
        { name: '退货退款政策', status: 'compliant', lastUpdate: '2024-09-01', risk: 'low' },
      ]
    },
    {
      category: '知识产权',
      items: [
        { name: '商标侵权风险扫描', status: 'monitoring', lastUpdate: '2024-10-22', risk: 'low' },
        { name: '专利侵权风险扫描', status: 'review', lastUpdate: '2024-10-05', risk: 'medium' },
      ]
    },
  ] : [
    {
      category: 'Data Privacy',
      items: [
        { name: 'GDPR (EU)', status: 'compliant', lastUpdate: '2024-09-15', risk: 'low' },
        { name: 'CCPA / CPRA (CA)', status: 'compliant', lastUpdate: '2024-08-20', risk: 'low' },
        { name: 'PIPL (China)', status: 'review', lastUpdate: '2024-10-01', risk: 'medium' },
      ]
    },
    {
      category: 'Product Safety',
      items: [
        { name: 'CE Marking (EU)', status: 'compliant', lastUpdate: '2024-07-10', risk: 'low' },
        { name: 'FCC (US)', status: 'compliant', lastUpdate: '2024-06-25', risk: 'low' },
        { name: 'RoHS (EU)', status: 'compliant', lastUpdate: '2024-05-12', risk: 'low' },
        { name: 'UKCA (UK)', status: 'pending', lastUpdate: '2024-10-10', risk: 'medium' },
      ]
    },
    {
      category: 'Consumer Protection',
      items: [
        { name: 'Consumer Rights Laws', status: 'monitoring', lastUpdate: '2024-10-20', risk: 'low' },
        { name: 'Return & Refund Policy', status: 'compliant', lastUpdate: '2024-09-01', risk: 'low' },
      ]
    },
    {
      category: 'IP Rights',
      items: [
        { name: 'Trademark Infringement Scan', status: 'monitoring', lastUpdate: '2024-10-22', risk: 'low' },
        { name: 'Patent Infringement Scan', status: 'review', lastUpdate: '2024-10-05', risk: 'medium' },
      ]
    },
  ];

  const statusMap = {
    compliant: { label: lang === 'zh' ? '合规' : 'Compliant', color: 'success' },
    pending: { label: lang === 'zh' ? '待处理' : 'Pending', color: 'warning' },
    review: { label: lang === 'zh' ? '审核中' : 'Under Review', color: 'warning' },
    monitoring: { label: lang === 'zh' ? '监控中' : 'Monitoring', color: 'info' },
  };

  const recentUpdates = lang === 'zh' ? [
    { date: '2024-10-22', title: 'Amazon 更新产品图片政策', impact: '低', platform: 'Amazon' },
    { date: '2024-10-18', title: '欧盟修订包装环保法规', impact: '中', platform: 'EU Regulation' },
    { date: '2024-10-15', title: 'TikTok Shop 开放新品类招商', impact: '高', platform: 'TikTok Shop' },
    { date: '2024-10-10', title: '美国加州新增 Proposition 65 化学物质', impact: '中', platform: 'California' },
  ] : [
    { date: '2024-10-22', title: 'Amazon updates product image policy', impact: 'Low', platform: 'Amazon' },
    { date: '2024-10-18', title: 'EU revises packaging regulations', impact: 'Medium', platform: 'EU Regulation' },
    { date: '2024-10-15', title: 'TikTok Shop opens new categories', impact: 'High', platform: 'TikTok Shop' },
    { date: '2024-10-10', title: 'California adds Prop 65 chemicals', impact: 'Medium', platform: 'California' },
  ];

  return (
    <div className="comp-module">
      <div className="comp-kpi-row">
        <div className="glass-card comp-kpi">
          <span className="ck-label">{lang === 'zh' ? '合规项目' : 'Compliance Items'}</span>
          <span className="ck-value">24</span>
          <span className="ck-sub success">18 {lang === 'zh' ? '项合规' : 'compliant'}</span>
        </div>
        <div className="glass-card comp-kpi">
          <span className="ck-label">{lang === 'zh' ? '待处理项' : 'Action Required'}</span>
          <span className="ck-value warning">3</span>
          <span className="ck-sub">{lang === 'zh' ? '需在30天内' : 'within 30 days'}</span>
        </div>
        <div className="glass-card comp-kpi">
          <span className="ck-label">{lang === 'zh' ? '高风险项' : 'High Risk'}</span>
          <span className="ck-value danger">1</span>
          <span className="ck-sub">{lang === 'zh' ? '需要立即处理' : 'Immediate action'}</span>
        </div>
        <div className="glass-card comp-kpi">
          <span className="ck-label">{lang === 'zh' ? '平台政策更新' : 'Policy Updates'}</span>
          <span className="ck-value info">12</span>
          <span className="ck-sub">{lang === 'zh' ? '本月' : 'this month'}</span>
        </div>
      </div>

      <div className="comp-grid">
        <div className="glass-card comp-categories">
          <div className="card-header">
            <h3>{lang === 'zh' ? '合规分类总览' : 'Compliance by Category'}</h3>
          </div>
          <div className="comp-category-list">
            {complianceTopics.map((cat, i) => (
              <div key={i} className="comp-category">
                <div className="comp-category-head">
                  <h4>{cat.category}</h4>
                  <span className="comp-cat-count">{cat.items.length} {lang === 'zh' ? '项' : 'items'}</span>
                </div>
                <div className="comp-item-list">
                  {cat.items.map((item, j) => {
                    const st = statusMap[item.status];
                    return (
                      <div key={j} className="comp-item">
                        <span className="comp-item-name">{item.name}</span>
                        <div className="comp-item-right">
                          <span className={`comp-risk risk-${item.risk}`}>
                            {item.risk === 'low' ? (lang === 'zh' ? '低风险' : 'Low') : (lang === 'zh' ? '中风险' : 'Medium')}
                          </span>
                          <span className={`comp-status ${st.color}`}>{st.label}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="glass-card comp-updates">
          <div className="card-header">
            <h3>{lang === 'zh' ? '近期政策更新' : 'Recent Policy Updates'}</h3>
            <span className="badge badge-info">AI {lang === 'zh' ? '监控' : 'Monitored'}</span>
          </div>
          <div className="comp-update-list">
            {recentUpdates.map((u, i) => (
              <div key={i} className="comp-update-item">
                <div className="comp-update-date">{u.date}</div>
                <div className="comp-update-content">
                  <span className="comp-update-platform">{u.platform}</span>
                  <h4 className="comp-update-title">{u.title}</h4>
                </div>
                <span className={`comp-update-impact impact-${u.impact.toLowerCase()}`}>
                  {u.impact}
                </span>
              </div>
            ))}
          </div>
          <button className="btn btn-ghost btn-full">{lang === 'zh' ? '查看全部政策变更' : 'View All Policy Changes'}</button>
        </div>
      </div>

      <div className="glass-card comp-checker">
        <div className="card-header">
          <h3>{lang === 'zh' ? '产品合规检查器' : 'Product Compliance Checker'}</h3>
          <span className="text-muted">AI {lang === 'zh' ? '驱动' : 'Powered'}</span>
        </div>
        <div className="comp-checker-row">
          <div className="comp-checker-input">
            <label>{lang === 'zh' ? '选择产品类目' : 'Select Category'}</label>
            <select className="comp-select">
              <option>{lang === 'zh' ? '消费电子' : 'Consumer Electronics'}</option>
              <option>{lang === 'zh' ? '家居用品' : 'Home & Kitchen'}</option>
              <option>{lang === 'zh' ? '美妆个护' : 'Beauty & Personal Care'}</option>
              <option>{lang === 'zh' ? '服装配饰' : 'Apparel & Accessories'}</option>
            </select>
          </div>
          <div className="comp-checker-input">
            <label>{lang === 'zh' ? '目标市场' : 'Target Market'}</label>
            <select className="comp-select">
              <option>{lang === 'zh' ? '美国 + 欧盟 + 英国' : 'US + EU + UK'}</option>
              <option>{lang === 'zh' ? '仅美国' : 'US Only'}</option>
              <option>{lang === 'zh' ? '全球' : 'Global'}</option>
            </select>
          </div>
          <button className="btn btn-primary-gold comp-check-btn">
            <Icon name="search" size={14} />
            {lang === 'zh' ? '检查合规要求' : 'Check Compliance'}
          </button>
        </div>
      </div>

      <style>{`
        .comp-module { display: flex; flex-direction: column; gap: 14px; }
        .comp-kpi-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }
        .comp-kpi, .comp-categories, .comp-updates, .comp-checker {
          padding: 18px 20px;
          background: var(--glass-bg-strong);
        }
        .ck-label { font-size: 11px; color: var(--text-muted); }
        .ck-value { font-size: 24px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
        .ck-value.warning { color: var(--warning); }
        .ck-value.danger { color: var(--danger); }
        .ck-value.info { color: var(--info); }
        .ck-sub { font-size: 10.5px; color: var(--text-muted); }
        .ck-sub.success { color: var(--success); }

        .comp-grid {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 14px;
        }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .card-header h3 { font-size: 14.5px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
        .badge { display: inline-flex; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; }
        .badge-info { background: var(--info + '20'); color: var(--info); }
        .text-muted { color: var(--text-tertiary); font-size: 11px; }
        .btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--glass-border); background: transparent; color: var(--text-secondary); font-family: inherit; transition: all 0.2s; width: 100%; justify-content: center; }
        .btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
        .btn-primary-gold { background: var(--accent-gradient); color: #fff; box-shadow: var(--gold-glow); border-color: transparent; }
        .btn-full { width: 100%; margin-top: 12px; }

        .comp-category-list { display: flex; flex-direction: column; gap: 14px; }
        .comp-category-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
        }
        .comp-category-head h4 { font-size: 13px; font-weight: 700; }
        .comp-cat-count { font-size: 11px; color: var(--text-muted); }
        .comp-item-list { display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
        .comp-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 7px 10px;
          background: var(--bg-tertiary);
          border-radius: 6px;
          font-size: 11.5px;
        }
        .comp-item-name { flex: 1; }
        .comp-item-right { display: flex; gap: 6px; align-items: center; }
        .comp-risk {
          font-size: 9.5px;
          font-weight: 700;
          padding: 2px 6px;
          border-radius: 4px;
        }
        .comp-risk.risk-low { background: var(--success + '20'); color: var(--success); }
        .comp-risk.risk-medium { background: var(--warning + '20'); color: var(--warning); }
        .comp-risk.risk-high { background: var(--danger + '20'); color: var(--danger); }
        .comp-status {
          font-size: 10px;
          font-weight: 700;
          padding: 2px 6px;
          border-radius: 4px;
        }
        .comp-status.success { background: var(--success + '20'); color: var(--success); }
        .comp-status.warning { background: var(--warning + '20'); color: var(--warning); }
        .comp-status.info { background: var(--info + '20'); color: var(--info); }
        .comp-status.danger { background: var(--danger + '20'); color: var(--danger); }

        .comp-update-list { display: flex; flex-direction: column; gap: 10px; }
        .comp-update-item {
          display: grid;
          grid-template-columns: 80px 1fr 60px;
          gap: 10px;
          padding: 10px 12px;
          background: var(--bg-tertiary);
          border-radius: 8px;
          align-items: center;
        }
        .comp-update-date {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          color: var(--text-muted);
        }
        .comp-update-platform {
          display: block;
          font-size: 10px;
          font-weight: 700;
          color: var(--accent-primary);
          margin-bottom: 3px;
        }
        .comp-update-title { font-size: 12px; font-weight: 600; line-height: 1.3; }
        .comp-update-impact {
          font-size: 10px;
          font-weight: 700;
          padding: 3px 7px;
          border-radius: 5px;
          text-align: center;
        }
        .impact-high { background: var(--danger + '20'); color: var(--danger); }
        .impact-medium { background: var(--warning + '20'); color: var(--warning); }
        .impact-low { background: var(--success + '20'); color: var(--success); }

        .comp-checker-row {
          display: grid;
          grid-template-columns: 1fr 1fr auto;
          gap: 12px;
          align-items: end;
        }
        .comp-checker-input {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        .comp-checker-input label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
        .comp-select {
          padding: 9px 12px;
          border-radius: 8px;
          border: 1px solid var(--glass-border);
          background: var(--bg-tertiary);
          color: var(--text-primary);
          font-size: 13px;
          font-family: inherit;
          cursor: pointer;
        }
        .comp-check-btn { width: auto; white-space: nowrap; }
        @media (max-width: 1024px) {
          .comp-kpi-row { grid-template-columns: repeat(2, 1fr); }
          .comp-grid { grid-template-columns: 1fr; }
          .comp-checker-row { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
}

function CreativeCRO() {
  const { lang } = useApp();
  const colors = useMemo(() => getThemeColors(), []);

  const funnelOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'item', backgroundColor: colors.card, borderColor: colors.border, textStyle: { color: colors.textPrimary, fontSize: 11 } },
    series: [{
      type: 'funnel',
      left: '10%', top: 10, bottom: 10, width: '80%',
      min: 0, max: 100,
      sort: 'descending',
      gap: 3,
      label: { show: true, position: 'inside', formatter: '{b}: {c}%', color: '#fff', fontSize: 11, fontWeight: 600 },
      itemStyle: { borderColor: '#fff', borderWidth: 0 },
      data: [
        { value: 100, name: lang === 'zh' ? '访客' : 'Visitors', itemStyle: { color: colors.info } },
        { value: 65, name: lang === 'zh' ? '产品页浏览' : 'Product View', itemStyle: { color: colors.accentPrimary } },
        { value: 28, name: lang === 'zh' ? '加入购物车' : 'Add to Cart', itemStyle: { color: colors.accentSecondary } },
        { value: 12, name: lang === 'zh' ? '开始结账' : 'Initiate Checkout', itemStyle: { color: colors.success } },
        { value: 3.8, name: lang === 'zh' ? '完成购买' : 'Purchase', itemStyle: { color: colors.warning } },
      ]
    }]
  }), []);

  const abTests = [
    { name: lang === 'zh' ? '结账页标题优化' : 'Checkout Page Headline', status: 'completed', winner: 'Variant B', lift: '+14.2%', significance: 96 },
    { name: lang === 'zh' ? '产品页布局A/B测试' : 'Product Page Layout', status: 'running', winner: '—', lift: '+5.8%', significance: 72 },
    { name: lang === 'zh' ? 'CTA按钮颜色测试' : 'CTA Button Color', status: 'completed', winner: 'Gold', lift: '+8.5%', significance: 94 },
    { name: lang === 'zh' ? '信任元素位置' : 'Trust Badge Placement', status: 'running', winner: '—', lift: '+3.2%', significance: 55 },
  ];

  const aiSuggestions = lang === 'zh' ? [
    { priority: 'high', area: '结账页', suggestion: '在结账按钮上方增加信任徽章，预计提升转化率 8-12%', impact: 'high' },
    { priority: 'high', area: '产品页', suggestion: '主图增加使用场景图，点击率预计提升 15%', impact: 'high' },
    { priority: 'medium', area: '购物车', suggestion: '增加"您可能还喜欢"推荐区，客单价预计提升 6%', impact: 'medium' },
    { priority: 'medium', area: '落地页', suggestion: '首屏增加客户评价轮播，跳出率预计降低 10%', impact: 'medium' },
    { priority: 'low', area: '导航栏', suggestion: '将搜索框移至更醒目位置，搜索使用率预计提升', impact: 'low' },
  ] : [
    { priority: 'high', area: 'Checkout', suggestion: 'Add trust badges above CTA, expected 8-12% CVR lift', impact: 'high' },
    { priority: 'high', area: 'Product Page', suggestion: 'Add lifestyle images to gallery, +15% CTR expected', impact: 'high' },
    { priority: 'medium', area: 'Cart', suggestion: 'Add "you may also like" section, +6% AOV expected', impact: 'medium' },
    { priority: 'medium', area: 'Landing Page', suggestion: 'Add testimonial carousel above fold, -10% bounce expected', impact: 'medium' },
    { priority: 'low', area: 'Navigation', suggestion: 'Promote search bar position, higher search usage expected', impact: 'low' },
  ];

  return (
    <div className="cro-module">
      <div className="cro-kpi-row">
        <div className="glass-card cro-kpi">
          <span className="ck-label">{lang === 'zh' ? '整体转化率' : 'Overall CVR'}</span>
          <span className="ck-value accent">3.8%</span>
          <span className="ck-sub success">+0.4% vs 上月</span>
        </div>
        <div className="glass-card cro-kpi">
          <span className="ck-label">{lang === 'zh' ? '进行中测试' : 'Active Tests'}</span>
          <span className="ck-value info">4</span>
          <span className="ck-sub">{lang === 'zh' ? '已完成' : 'Completed'}: 18</span>
        </div>
        <div className="glass-card cro-kpi">
          <span className="ck-label">{lang === 'zh' ? '平均提升' : 'Avg CVR Lift'}</span>
          <span className="ck-value success">+12.5%</span>
          <span className="ck-sub">{lang === 'zh' ? '所有测试' : 'all tests'}</span>
        </div>
        <div className="glass-card cro-kpi">
          <span className="ck-label">{lang === 'zh' ? 'AI优化建议' : 'AI Suggestions'}</span>
          <span className="ck-value warning">7</span>
          <span className="ck-sub">{lang === 'zh' ? '待实施' : 'to implement'}</span>
        </div>
      </div>

      <div className="cro-grid">
        <div className="glass-card cro-funnel-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '转化率漏斗' : 'Conversion Funnel'}</h3>
          </div>
          <EChart option={funnelOption} style={{ height: 260 }} />
        </div>

        <div className="glass-card cro-heatmap-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '热图数据' : 'Heatmap Data'}</h3>
            <span className="badge badge-accent">AI {lang === 'zh' ? '分析' : 'Analyzed'}</span>
          </div>
          <div className="cro-heatmap-visual">
            <div className="heatmap-preview" style={{
              background: `radial-gradient(ellipse at 50% 25%, ${colors.accentPrimary}80 0%, ${colors.accentPrimary}40 30%, transparent 60%),
                          radial-gradient(ellipse at 30% 60%, ${colors.accentPrimary}60 0%, transparent 40%),
                          radial-gradient(ellipse at 70% 55%, ${colors.accentPrimary}50 0%, transparent 35%),
                          var(--bg-tertiary)`
            }}>
              <div className="heatmap-hotspot" style={{ top: '22%', left: '50%' }}>
                <span>CTA</span>
              </div>
              <div className="heatmap-hotspot" style={{ top: '55%', left: '30%' }}>
                <span>{lang === 'zh' ? '主图' : 'Image'}</span>
              </div>
            </div>
            <div className="heatmap-legend">
              <div className="heatmap-legend-row">
                <span>{lang === 'zh' ? '热门点击区域' : 'Hotspots'}</span>
                <span className="heatmap-scale">
                  <i style={{ background: colors.accentPrimary + '20' }}></i>
                  <i style={{ background: colors.accentPrimary + '50' }}></i>
                  <i style={{ background: colors.accentPrimary + '80' }}></i>
                  <i style={{ background: colors.accentPrimary }}></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="cro-grid-2">
        <div className="glass-card cro-tests-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? 'A/B测试列表' : 'A/B Test List'}</h3>
          </div>
          <div className="cro-tests-list">
            {abTests.map((t, i) => (
              <div key={i} className="cro-test-item">
                <div className="cro-test-head">
                  <span className="cro-test-name">{t.name}</span>
                  <span className={`cro-test-status status-${t.status}`}>
                    {t.status === 'running' ? (lang === 'zh' ? '进行中' : 'Running') : (lang === 'zh' ? '已完成' : 'Completed')}
                  </span>
                </div>
                <div className="cro-test-meta">
                  <span>{lang === 'zh' ? '胜出：' : 'Winner: '}{t.winner}</span>
                  <span className="cro-test-lift">{t.lift}</span>
                </div>
                <div className="cro-test-significance">
                  <div className="cro-sig-bar">
                    <div className="cro-sig-fill" style={{ width: t.significance + '%' }}></div>
                  </div>
                  <span>{t.significance}% {lang === 'zh' ? '显著性' : 'significance'}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="glass-card cro-suggestions-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? 'AI优化建议' : 'AI Optimization Tips'}</h3>
          </div>
          <div className="cro-suggestion-list">
            {aiSuggestions.map((s, i) => (
              <div key={i} className={`cro-suggestion priority-${s.priority}`}>
                <div className="cro-sug-priority">
                  <span>{s.priority === 'high' ? '!' : s.priority === 'medium' ? '○' : '·'}</span>
                </div>
                <div className="cro-sug-content">
                  <span className="cro-sug-area">{s.area}</span>
                  <p className="cro-sug-text">{s.suggestion}</p>
                </div>
                <button className="cro-sug-btn">
                  <Icon name="sparkles" size={11} />
                  {lang === 'zh' ? '生成' : 'Generate'}
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .cro-module { display: flex; flex-direction: column; gap: 14px; }
        .cro-kpi-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }
        .cro-kpi, .cro-funnel-card, .cro-heatmap-card, .cro-tests-card, .cro-suggestions-card {
          padding: 18px 20px;
          background: var(--glass-bg-strong);
        }
        .ck-label { font-size: 11px; color: var(--text-muted); }
        .ck-value { font-size: 24px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
        .ck-value.accent { color: var(--accent-primary); }
        .ck-value.info { color: var(--info); }
        .ck-value.success { color: var(--success); }
        .ck-value.warning { color: var(--warning); }
        .ck-sub { font-size: 10.5px; color: var(--text-muted); }
        .ck-sub.success { color: var(--success); }

        .cro-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        .cro-grid-2 {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 14px;
        }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .card-header h3 { font-size: 14.5px; font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
        .badge { display: inline-flex; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; }
        .badge-accent { background: var(--accent-gradient-soft); color: var(--accent-primary); }

        .cro-heatmap-visual {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .heatmap-preview {
          height: 200px;
          border-radius: 10px;
          position: relative;
        }
        .heatmap-hotspot {
          position: absolute;
          transform: translate(-50%, -50%);
          background: rgba(0,0,0,0.6);
          color: #fff;
          font-size: 10px;
          padding: 2px 7px;
          border-radius: 4px;
          font-weight: 600;
        }
        .heatmap-legend { padding: 0 4px; }
        .heatmap-legend-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 10.5px;
          color: var(--text-muted);
        }
        .heatmap-scale { display: flex; gap: 2px; }
        .heatmap-scale i {
          width: 24px; height: 8px;
          border-radius: 2px;
        }

        .cro-tests-list { display: flex; flex-direction: column; gap: 8px; }
        .cro-test-item {
          padding: 12px;
          background: var(--bg-tertiary);
          border-radius: 8px;
        }
        .cro-test-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
        }
        .cro-test-name { font-size: 12.5px; font-weight: 600; }
        .cro-test-status {
          font-size: 10px;
          font-weight: 700;
          padding: 2px 7px;
          border-radius: 4px;
        }
        .status-running { background: var(--info + '20'); color: var(--info); }
        .status-completed { background: var(--success + '20'); color: var(--success); }
        .cro-test-meta {
          display: flex;
          justify-content: space-between;
          font-size: 11px;
          margin-bottom: 6px;
          color: var(--text-secondary);
        }
        .cro-test-lift { color: var(--success); font-weight: 700; }
        .cro-test-significance {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .cro-sig-bar {
          flex: 1;
          height: 4px;
          background: var(--glass-border);
          border-radius: 2px;
          overflow: hidden;
        }
        .cro-sig-fill {
          height: 100%;
          background: var(--accent-gradient);
          border-radius: 2px;
        }
        .cro-test-significance > span { font-size: 10px; color: var(--text-muted); min-width: 75px; text-align: right; }

        .cro-suggestion-list { display: flex; flex-direction: column; gap: 8px; }
        .cro-suggestion {
          display: flex;
          gap: 10px;
          padding: 12px;
          background: var(--bg-tertiary);
          border-radius: 8px;
          align-items: flex-start;
        }
        .cro-sug-priority {
          width: 22px; height: 22px;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          font-weight: 700;
          flex-shrink: 0;
          font-size: 12px;
        }
        .priority-high .cro-sug-priority { background: var(--danger + '20'); color: var(--danger); }
        .priority-medium .cro-sug-priority { background: var(--warning + '20'); color: var(--warning); }
        .priority-low .cro-sug-priority { background: var(--info + '20'); color: var(--info); }
        .cro-sug-content { flex: 1; min-width: 0; }
        .cro-sug-area {
          font-size: 10.5px;
          font-weight: 700;
          color: var(--accent-primary);
          display: block;
          margin-bottom: 3px;
        }
        .cro-sug-text { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; margin: 0; }
        .cro-sug-btn {
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          padding: 5px 10px;
          border-radius: 6px;
          background: var(--accent-gradient-soft);
          color: var(--accent-primary);
          border: none;
          font-size: 10.5px;
          font-weight: 600;
          cursor: pointer;
          font-family: inherit;
          white-space: nowrap;
        }
        @media (max-width: 1024px) {
          .cro-kpi-row { grid-template-columns: repeat(2, 1fr); }
          .cro-grid, .cro-grid-2 { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ResearcherCompliance, CreativeCRO });