// Analyst additional modules: Attribution Engine + Prediction Center
const { useState, useMemo } = React;

function AnalystAttribution() {
  const { lang } = useApp();
  const colors = useMemo(() => getThemeColors(), []);
  const [model, setModel] = useState('lastTouch');

  const models = lang === 'zh' ? [
    { key: 'firstTouch', name: '首次触点', desc: '全部归功于第一个渠道' },
    { key: 'lastTouch', name: '末次触点', desc: '全部归功于最后一个渠道' },
    { key: 'linear', name: '线性归因', desc: '所有触点平均分配' },
    { key: 'timeDecay', name: '时间衰减', desc: '越接近转化权重越高' },
    { key: 'dataDriven', name: '数据驱动', desc: 'AI算法自动分配' },
  ] : [
    { key: 'firstTouch', name: 'First Touch', desc: 'All credit to first channel' },
    { key: 'lastTouch', name: 'Last Touch', desc: 'All credit to last channel' },
    { key: 'linear', name: 'Linear', desc: 'Equal credit to all touchpoints' },
    { key: 'timeDecay', name: 'Time Decay', desc: 'More weight closer to conversion' },
    { key: 'dataDriven', name: 'Data-Driven', desc: 'AI algorithmic attribution' },
  ];

  const attributionData = [
    { channel: 'Google Search', value: 32450, share: 28.2, cac: 12.5 },
    { channel: 'Facebook Ads', value: 24800, share: 21.6, cac: 9.8 },
    { channel: 'TikTok', value: 18650, share: 16.2, cac: 7.2 },
    { channel: 'Email', value: 14200, share: 12.4, cac: 4.5 },
    { channel: 'Instagram', value: 10800, share: 9.4, cac: 8.1 },
    { channel: 'Direct', value: 8450, share: 7.4, cac: 0 },
    { channel: 'Referral', value: 5500, share: 4.8, cac: 3.2 },
  ];

  const sankeyData = {
    nodes: [
      { name: 'Google' }, { name: 'Facebook' }, { name: 'TikTok' }, { name: 'Email' },
      { name: 'Product Page' }, { name: 'Cart' }, { name: 'Checkout' }, { name: 'Purchase' },
    ],
    links: [
      { source: 0, target: 4, value: 12000 },
      { source: 1, target: 4, value: 8500 },
      { source: 2, target: 4, value: 6200 },
      { source: 3, target: 5, value: 4800 },
      { source: 4, target: 5, value: 18500 },
      { source: 5, target: 6, value: 16200 },
      { source: 6, target: 7, value: 12400 },
    ],
  };

  const sankeyOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'item', backgroundColor: colors.card, borderColor: colors.border, textStyle: { color: colors.textPrimary, fontSize: 11 } },
    series: [{
      type: 'sankey',
      layout: 'none',
      emphasis: { focus: 'adjacency' },
      data: sankeyData.nodes.map(n => ({ ...n, itemStyle: { color: colors.accentPrimary } })),
      links: sankeyData.links.map(l => ({ ...l, lineStyle: { color: colors.accentPrimary + '30', curveness: 0.5 } })),
      lineStyle: { curveness: 0.5 },
      label: { color: colors.textPrimary, fontSize: 10 },
      left: 20, right: 100, top: 10, bottom: 10,
    }]
  }), []);

  const barOption = useMemo(() => ({
    backgroundColor: 'transparent',
    grid: { top: 30, right: 20, bottom: 30, left: 100 },
    tooltip: { trigger: 'axis', backgroundColor: colors.card, borderColor: colors.border, textStyle: { color: colors.textPrimary, fontSize: 11 } },
    xAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: colors.gridLine, type: 'dashed' } }, axisLabel: { color: colors.textMuted, fontSize: 10 } },
    yAxis: {
      type: 'category',
      data: attributionData.map(d => d.channel),
      axisLine: { lineStyle: { color: colors.gridLine } },
      axisLabel: { color: colors.textMuted, fontSize: 10 },
      axisTick: { show: false },
    },
    series: [{
      type: 'bar',
      data: attributionData.map(d => d.value),
      barWidth: 18,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: colors.accentPrimary },
          { offset: 1, color: colors.accentTertiary },
        ]),
        borderRadius: [0, 4, 4, 0],
      },
    }]
  }), []);

  return (
    <div className="attribution-module">
      <div className="attr-model-selector">
        {models.map((m) => (
          <button
            key={m.key}
            className={`attr-model-btn ${model === m.key ? 'active' : ''}`}
            onClick={() => setModel(m.key)}
          >
            <span className="attr-model-name">{m.name}</span>
            <span className="attr-model-desc">{m.desc}</span>
          </button>
        ))}
      </div>

      <div className="attr-grid">
        <div className="glass-card attr-chart-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '各渠道贡献收入' : 'Revenue by Channel'}</h3>
          </div>
          <EChart option={barOption} style={{ height: 280 }} />
        </div>

        <div className="glass-card attr-sankey-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '归因路径可视化' : 'Attribution Path Visualization'}</h3>
          </div>
          <EChart option={sankeyOption} style={{ height: 280 }} />
        </div>
      </div>

      <div className="glass-card attr-utm-card">
        <div className="card-header">
          <h3>{lang === 'zh' ? 'UTM参数管理' : 'UTM Parameter Management'}</h3>
          <button className="btn btn-primary-gold btn-sm">
            <Icon name="plus" size={11} />
            {lang === 'zh' ? '生成UTM' : 'Generate UTM'}
          </button>
        </div>
        <div className="attr-utm-table">
          <div className="attr-utm-header">
            <span>UTM {lang === 'zh' ? '名称' : 'Name'}</span>
            <span>Source</span>
            <span>Medium</span>
            <span>Campaign</span>
            <span>{lang === 'zh' ? '点击量' : 'Clicks'}</span>
            <span>{lang === 'zh' ? '转化' : 'Conversions'}</span>
            <span>CAC</span>
          </div>
          {[
            { name: 'bfcm_google_search', source: 'google', medium: 'cpc', campaign: 'bfcm2024', clicks: 12450, conv: 342, cac: 18.5 },
            { name: 'newsletter_nov', source: 'email', medium: 'email', campaign: 'newsletter', clicks: 8200, conv: 512, cac: 5.2 },
            { name: 'tiktok_summer', source: 'tiktok', medium: 'social', campaign: 'summer_sale', clicks: 15600, conv: 289, cac: 12.8 },
            { name: 'fb_retargeting', source: 'facebook', medium: 'cpc', campaign: 'retargeting', clicks: 6800, conv: 410, cac: 8.1 },
          ].map((u, i) => (
            <div key={i} className="attr-utm-row">
              <span className="attr-utm-name">{u.name}</span>
              <span>{u.source}</span>
              <span>{u.medium}</span>
              <span>{u.campaign}</span>
              <span>{u.clicks.toLocaleString()}</span>
              <span className="attr-utm-conv">{u.conv}</span>
              <span className="attr-utm-cac">${u.cac}</span>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .attribution-module { display: flex; flex-direction: column; gap: 14px; }
        .attr-model-selector {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 8px;
        }
        .attr-model-btn {
          padding: 12px 14px;
          border-radius: 10px;
          background: var(--glass-bg-strong);
          border: 1px solid var(--glass-border);
          color: var(--text-secondary);
          cursor: pointer;
          font-family: inherit;
          transition: all 0.2s;
          text-align: left;
        }
        .attr-model-btn:hover { border-color: var(--accent-primary); }
        .attr-model-btn.active {
          border-color: var(--accent-primary);
          background: var(--accent-gradient-soft);
        }
        .attr-model-name { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
        .attr-model-btn.active .attr-model-name { color: var(--accent-primary); }
        .attr-model-desc { display: block; font-size: 10.5px; color: var(--text-muted); }

        .attr-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 14px;
        }
        .attr-chart-card, .attr-sankey-card, .attr-utm-card {
          padding: 18px 20px;
          background: var(--glass-bg-strong);
        }
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }
        .card-header h3 {
          font-size: 14.5px;
          font-weight: 600;
          font-family: 'Space Grotesk', sans-serif;
        }
        .btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all 0.2s; }
        .btn-primary-gold { background: var(--accent-gradient); color: #fff; box-shadow: var(--gold-glow); }
        .btn-sm { padding: 5px 10px; font-size: 11px; }

        .attr-utm-table { display: flex; flex-direction: column; }
        .attr-utm-header, .attr-utm-row {
          display: grid;
          grid-template-columns: 2fr 0.8fr 0.8fr 1.2fr 0.9fr 0.8fr 0.7fr;
          gap: 10px;
          padding: 10px 12px;
          align-items: center;
          font-size: 12px;
        }
        .attr-utm-header {
          font-size: 10.5px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: var(--text-muted);
          background: var(--bg-tertiary);
          border-radius: 8px 8px 0 0;
        }
        .attr-utm-row {
          border-bottom: 1px solid var(--glass-border);
          transition: background 0.15s;
        }
        .attr-utm-row:hover { background: var(--bg-tertiary); }
        .attr-utm-row:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
        .attr-utm-name { font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
        .attr-utm-conv { font-weight: 600; }
        .attr-utm-cac { color: var(--accent-primary); font-weight: 600; }
        @media (max-width: 1024px) {
          .attr-grid { grid-template-columns: 1fr; }
          .attr-model-selector { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </div>
  );
}

function AnalystPrediction() {
  const { lang } = useApp();
  const colors = useMemo(() => getThemeColors(), []);
  const [horizon, setHorizon] = useState(30);

  const forecastOption = useMemo(() => {
    const days = Array.from({ length: horizon }, (_, i) => `D+${i + 1}`);
    const base = Array.from({ length: horizon }, (_, i) => 4200 + i * 25 + Math.sin(i * 0.3) * 150);
    const upper = base.map((v, i) => v * (1.1 + i * 0.003));
    const lower = base.map((v, i) => v * (0.9 - i * 0.003));
    return {
      backgroundColor: 'transparent',
      grid: { top: 30, right: 30, bottom: 30, left: 60 },
      tooltip: { trigger: 'axis', backgroundColor: colors.card, borderColor: colors.border, textStyle: { color: colors.textPrimary, fontSize: 11 } },
      legend: { data: [lang === 'zh' ? '预测值' : 'Forecast', lang === 'zh' ? '置信区间' : 'Confidence'], textStyle: { color: colors.textMuted, fontSize: 10 }, top: 0 },
      xAxis: { type: 'category', data: days, axisLine: { lineStyle: { color: colors.gridLine } }, axisLabel: { color: colors.textMuted, fontSize: 9, interval: Math.floor(horizon / 10) }, axisTick: { show: false } },
      yAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: colors.gridLine, type: 'dashed' } }, axisLabel: { color: colors.textMuted, fontSize: 10 } },
      series: [
        {
          name: lang === 'zh' ? '置信区间' : 'Confidence',
          type: 'line',
          data: upper,
          stack: 'confidence-band',
          symbol: 'none',
          lineStyle: { opacity: 0 },
          areaStyle: { color: colors.accentPrimary + '15' },
        },
        {
          name: lang === 'zh' ? '置信区间下沿' : 'Lower',
          type: 'line',
          data: lower.map((v, i) => upper[i] - v),
          stack: 'confidence-band',
          symbol: 'none',
          lineStyle: { opacity: 0 },
          areaStyle: { color: 'transparent' },
        },
        {
          name: lang === 'zh' ? '预测值' : 'Forecast',
          type: 'line',
          data: base,
          smooth: true,
          lineStyle: { color: colors.accentPrimary, width: 2.5 },
          symbol: 'none',
        },
      ]
    };
  }, [horizon]);

  const productPredictions = lang === 'zh' ? [
    { sku: 'SKU-1024', name: '无线蓝牙耳机Pro', score: 92, trend: '+32%', confidence: '高', predicted: 850 },
    { sku: 'SKU-2048', name: '便携充电宝20000mAh', score: 87, trend: '+18%', confidence: '高', predicted: 620 },
    { sku: 'SKU-3072', name: '智能手表S5', score: 78, trend: '+5%', confidence: '中', predicted: 340 },
    { sku: 'SKU-4096', name: '车载手机支架', score: 71, trend: '-3%', confidence: '中', predicted: 280 },
    { sku: 'SKU-5120', name: 'LED环形补光灯', score: 65, trend: '+8%', confidence: '低', predicted: 190 },
  ] : [
    { sku: 'SKU-1024', name: 'Wireless Earbuds Pro', score: 92, trend: '+32%', confidence: 'High', predicted: 850 },
    { sku: 'SKU-2048', name: 'Portable Charger 20K', score: 87, trend: '+18%', confidence: 'High', predicted: 620 },
    { sku: 'SKU-3072', name: 'Smart Watch S5', score: 78, trend: '+5%', confidence: 'Medium', predicted: 340 },
    { sku: 'SKU-4096', name: 'Car Phone Mount', score: 71, trend: '-3%', confidence: 'Medium', predicted: 280 },
    { sku: 'SKU-5120', name: 'LED Ring Light', score: 65, trend: '+8%', confidence: 'Low', predicted: 190 },
  ];

  const churnRisk = lang === 'zh' ? [
    { customer: '张女士（邮箱已隐藏）', risk: 85, lastOrder: '45天前', orders: 3, ltv: 485 },
    { customer: '李先生（邮箱已隐藏）', risk: 72, lastOrder: '38天前', orders: 2, ltv: 230 },
    { customer: '王先生（邮箱已隐藏）', risk: 68, lastOrder: '35天前', orders: 5, ltv: 1250 },
    { customer: '陈女士（邮箱已隐藏）', risk: 61, lastOrder: '32天前', orders: 2, ltv: 195 },
    { customer: '周先生（邮箱已隐藏）', risk: 55, lastOrder: '28天前', orders: 4, ltv: 680 },
  ] : [
    { customer: 'Sarah M. (hidden)', risk: 85, lastOrder: '45d ago', orders: 3, ltv: 485 },
    { customer: 'James L. (hidden)', risk: 72, lastOrder: '38d ago', orders: 2, ltv: 230 },
    { customer: 'Robert K. (hidden)', risk: 68, lastOrder: '35d ago', orders: 5, ltv: 1250 },
    { customer: 'Emily C. (hidden)', risk: 61, lastOrder: '32d ago', orders: 2, ltv: 195 },
    { customer: 'David W. (hidden)', risk: 55, lastOrder: '28d ago', orders: 4, ltv: 680 },
  ];

  const forecastHorizons = [
    { days: 30, label: '30' + (lang === 'zh' ? '天' : 'd') },
    { days: 60, label: '60' + (lang === 'zh' ? '天' : 'd') },
    { days: 90, label: '90' + (lang === 'zh' ? '天' : 'd') },
  ];

  return (
    <div className="prediction-module">
      <div className="pred-forecast-card glass-card">
        <div className="card-header">
          <h3>{lang === 'zh' ? 'SKU级需求预测' : 'SKU-Level Demand Forecast'}</h3>
          <div className="pred-horizon-selector">
            {forecastHorizons.map((h) => (
              <button
                key={h.days}
                className={`pred-horizon-btn ${horizon === h.days ? 'active' : ''}`}
                onClick={() => setHorizon(h.days)}
              >
                {h.label}
              </button>
            ))}
          </div>
        </div>
        <EChart option={forecastOption} style={{ height: 280 }} />
      </div>

      <div className="pred-grid">
        <div className="glass-card pred-hot-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '爆款早期识别' : 'Early Hit Detection'}</h3>
            <span className="badge badge-success">{lang === 'zh' ? 'AI评分' : 'AI Score'}</span>
          </div>
          <div className="pred-hot-list">
            {productPredictions.map((p, i) => (
              <div key={i} className="pred-hot-item">
                <div className="pred-hot-rank" style={i < 3 ? { background: 'var(--accent-gradient)', color: '#fff' } : {}}>{i + 1}</div>
                <div className="pred-hot-info">
                  <div className="pred-hot-name">{p.name}</div>
                  <div className="pred-hot-sku">{p.sku}</div>
                </div>
                <div className="pred-hot-score">
                  <div className="pred-score-bar">
                    <div className="pred-score-fill" style={{ width: p.score + '%' }}></div>
                  </div>
                  <span className="pred-score-num">{p.score}</span>
                </div>
                <div className="pred-hot-meta">
                  <span className={`pred-trend ${p.trend.startsWith('+') ? 'up' : 'down'}`}>{p.trend}</span>
                  <span className="pred-conf">
                    {p.confidence === (lang === 'zh' ? '高' : 'High') ? '🔴' : p.confidence === (lang === 'zh' ? '中' : 'Medium') ? '🟡' : '🟢'}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="glass-card pred-churn-card">
          <div className="card-header">
            <h3>{lang === 'zh' ? '客户流失预测' : 'Churn Prediction'}</h3>
            <span className="badge badge-warning">{lang === 'zh' ? '高风险' : 'High Risk'}</span>
          </div>
          <div className="pred-churn-list">
            {churnRisk.map((c, i) => (
              <div key={i} className="pred-churn-item">
                <div className="pred-churn-info">
                  <div className="pred-churn-name">{c.customer}</div>
                  <div className="pred-churn-meta">
                    <span>{c.orders} {lang === 'zh' ? '单' : 'orders'}</span>
                    <span>·</span>
                    <span>LTV: ${c.ltv}</span>
                    <span>·</span>
                    <span>{c.lastOrder}</span>
                  </div>
                </div>
                <div className="pred-churn-risk">
                  <div className="pred-risk-circle" style={{
                    background: `conic-gradient(var(--danger) ${c.risk * 3.6}deg, var(--bg-tertiary) 0deg)`
                  }}>
                    <span>{c.risk}%</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="glass-card pred-accuracy-card">
        <div className="card-header">
          <h3>{lang === 'zh' ? '预测准确率追踪' : 'Forecast Accuracy Tracking'}</h3>
          <span className="text-muted">{lang === 'zh' ? '持续优化模型' : 'Model improves over time'}</span>
        </div>
        <div className="pred-accuracy-grid">
          <div className="pred-acc-item">
            <span className="pred-acc-label">{lang === 'zh' ? '7天预测准确率' : '7-Day Accuracy'}</span>
            <span className="pred-acc-value success">96.8%</span>
          </div>
          <div className="pred-acc-item">
            <span className="pred-acc-label">{lang === 'zh' ? '30天预测准确率' : '30-Day Accuracy'}</span>
            <span className="pred-acc-value">92.4%</span>
          </div>
          <div className="pred-acc-item">
            <span className="pred-acc-label">{lang === 'zh' ? '90天预测准确率' : '90-Day Accuracy'}</span>
            <span className="pred-acc-value">87.1%</span>
          </div>
          <div className="pred-acc-item">
            <span className="pred-acc-label">{lang === 'zh' ? '较上月提升' : 'MoM Improvement'}</span>
            <span className="pred-acc-value success">+2.3pp</span>
          </div>
        </div>
      </div>

      <style>{`
        .prediction-module { display: flex; flex-direction: column; gap: 14px; }
        .pred-forecast-card, .pred-hot-card, .pred-churn-card, .pred-accuracy-card {
          padding: 18px 20px;
          background: var(--glass-bg-strong);
        }
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }
        .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-success { background: var(--success + '20'); color: var(--success); }
        .badge-warning { background: var(--warning + '20'); color: var(--warning); }
        .text-muted { color: var(--text-tertiary); font-size: 11px; }

        .pred-horizon-selector { display: flex; gap: 4px; padding: 3px; background: var(--bg-tertiary); border-radius: 7px; }
        .pred-horizon-btn {
          padding: 5px 12px;
          border-radius: 5px;
          background: none;
          border: none;
          color: var(--text-tertiary);
          font-size: 11px;
          font-weight: 600;
          cursor: pointer;
          font-family: inherit;
          transition: all 0.2s;
        }
        .pred-horizon-btn.active { background: var(--accent-gradient); color: #fff; }

        .pred-grid {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: 14px;
        }

        .pred-hot-list { display: flex; flex-direction: column; gap: 8px; }
        .pred-hot-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          border-radius: 8px;
          transition: background 0.15s;
        }
        .pred-hot-item:hover { background: var(--bg-tertiary); }
        .pred-hot-rank {
          width: 22px; height: 22px;
          border-radius: 6px;
          background: var(--bg-tertiary);
          color: var(--text-muted);
          display: flex; align-items: center; justify-content: center;
          font-size: 11px;
          font-weight: 700;
          flex-shrink: 0;
        }
        .pred-hot-info { flex: 1; min-width: 0; }
        .pred-hot-name { font-size: 12.5px; font-weight: 600; }
        .pred-hot-sku { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
        .pred-hot-score {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 120px;
        }
        .pred-score-bar {
          flex: 1;
          height: 5px;
          background: var(--bg-tertiary);
          border-radius: 3px;
          overflow: hidden;
        }
        .pred-score-fill {
          height: 100%;
          background: var(--accent-gradient);
          border-radius: 3px;
        }
        .pred-score-num {
          font-size: 12px;
          font-weight: 700;
          font-family: 'Space Grotesk', sans-serif;
          color: var(--accent-primary);
          width: 26px;
          text-align: right;
        }
        .pred-hot-meta {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          width: 50px;
        }
        .pred-trend { font-size: 11px; font-weight: 700; }
        .pred-trend.up { color: var(--success); }
        .pred-trend.down { color: var(--danger); }
        .pred-conf { font-size: 10px; }

        .pred-churn-list { display: flex; flex-direction: column; gap: 10px; }
        .pred-churn-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          background: var(--bg-tertiary);
          border-radius: 8px;
        }
        .pred-churn-info { flex: 1; min-width: 0; }
        .pred-churn-name { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
        .pred-churn-meta {
          font-size: 10.5px;
          color: var(--text-muted);
          display: flex;
          gap: 5px;
          flex-wrap: wrap;
        }
        .pred-churn-risk { flex-shrink: 0; }
        .pred-risk-circle {
          width: 44px; height: 44px;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          position: relative;
        }
        .pred-risk-circle::before {
          content: '';
          position: absolute;
          inset: 4px;
          border-radius: 50%;
          background: var(--bg-tertiary);
        }
        .pred-risk-circle span {
          position: relative;
          font-size: 10px;
          font-weight: 700;
          color: var(--danger);
          z-index: 1;
        }

        .pred-accuracy-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        .pred-acc-item {
          text-align: center;
          padding: 14px;
          background: var(--bg-tertiary);
          border-radius: 10px;
        }
        .pred-acc-label {
          display: block;
          font-size: 11px;
          color: var(--text-muted);
          margin-bottom: 6px;
        }
        .pred-acc-value {
          font-size: 22px;
          font-weight: 800;
          font-family: 'Space Grotesk', sans-serif;
        }
        .pred-acc-value.success { color: var(--success); }

        @media (max-width: 1024px) {
          .pred-grid { grid-template-columns: 1fr; }
          .pred-accuracy-grid { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { AnalystAttribution, AnalystPrediction });