// V1 — Trend Tape: editorial, trend-first dashboard
const V1 = () => {
  const [period, setPeriod] = React.useState('Month');
  const periods = ['Week', 'Month', 'Quarter', 'YTD'];

  // Trend chart points (audit completion %)
  const auditTrend = [62, 68, 65, 72, 78, 74, 81, 85, 83, 88, 92, 90, 94];
  const defectTrend = [12, 14, 11, 9, 13, 10, 8, 9, 6, 7, 5, 4, 3];
  const max = 100;

  const Chart = ({ data, color, fill }) => {
    const w = 100,h = 100;
    const points = data.map((v, i) => `${i / (data.length - 1) * w},${h - v / max * h}`).join(' ');
    const area = `0,${h} ${points} ${w},${h}`;
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
        <polygon points={area} fill={fill} />
        <polyline points={points} fill="none" stroke={color} strokeWidth="0.6" vectorEffect="non-scaling-stroke" />
      </svg>);

  };

  return (
    <div style={v1.root}>
      <style>{`
        .v1 *{box-sizing:border-box}
        .v1-num{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:400;letter-spacing:-0.035em}
        .v1-mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.12em;text-transform:uppercase}
      `}</style>
      <div className="v1" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '100%' }}>
        {/* Sidebar */}
        <aside style={v1.side}>
          <div style={v1.brand}>
            <div style={v1.brandMark}>R</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Your Plant</div>
              <div className="v1-mono" style={{ fontSize: 9, color: '#8a8478', marginTop: 2 }}>LEANOS · v2</div>
            </div>
          </div>
          {[
          { g: 'Workspace', items: [['Home', true], ['My tasks', false, '3'], ['Audit'], ['Defects'], ['Improve'], ['Solve']] },
          { g: 'Engagement', items: [['Feed'], ['Leaderboard'], ['Coach']] }].
          map((g) =>
          <div key={g.g} style={{ marginTop: 18 }}>
              <div className="v1-mono" style={v1.navLabel}>{g.g}</div>
              {g.items.map(([n, a, b]) =>
            <div key={n} style={{ ...v1.navItem, ...(a ? v1.navActive : {}) }}>
                  <span style={{ ...v1.navDot, background: a ? '#C8501C' : '#D6CFB9' }} />
                  <span>{n}</span>
                  {b && <span style={v1.navBadge}>{b}</span>}
                </div>
            )}
            </div>
          )}
          <div style={v1.userCard}>
            <div style={v1.userAv}>RT</div>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>You</div>
              <div style={{ fontSize: 10, color: '#8a8478', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>operations@yourplant.com</div>
            </div>
          </div>
        </aside>

        {/* Main */}
        <main style={{ padding: '28px 36px 48px', maxWidth: 1280 }}>
          {/* topbar */}
          <div style={v1.topbar}>
            <div className="v1-mono" style={{ fontSize: 10, color: '#8a8478' }}>
              Plant <span style={{ color: '#C9C2AE', margin: '0 8px' }}>/</span>
              <b style={{ color: '#1A1714', fontWeight: 500 }}>Your Plant</b>
              <span style={{ color: '#C9C2AE', margin: '0 8px' }}>/</span>Home
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['Search', 'Bell', 'Cal'].map((t) => <div key={t} style={v1.iconBtn} />)}
            </div>
          </div>

          {/* Hero — trend-led */}
          <section style={v1.hero}>
            <div>
              <div className="v1-mono" style={{ fontSize: 10, color: '#C8501C', marginBottom: 10 }}>● PLANT OVERVIEW · MAY 2026</div>
              <h1 className="v1-num" style={{ fontSize: 64, lineHeight: 1, color: '#1A1714' }}>
                Trending <em style={{ fontStyle: 'italic', color: '#2D8B6B', fontWeight: 300 }}>up.</em>
              </h1>
              <div style={{ fontSize: 14, color: '#75706A', marginTop: 12, maxWidth: 420, lineHeight: 1.5 }}>
                Audit completion is up <b style={{ color: '#1A1714' }}>+11 pts</b> month-over-month. Defects continue to fall. No fires, no overdue work.
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
                <button style={v1.btnPrimary}>Start audit →</button>
                <button style={v1.btnGhost}>View full report</button>
              </div>
            </div>

            {/* Twin trend charts */}
            <div style={v1.charts}>
              <div style={v1.chartCard}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                  <span className="v1-mono" style={{ fontSize: 9, color: '#75706A' }}>AUDIT COMPLETION</span>
                  <span className="v1-mono" style={{ fontSize: 10, color: '#2D8B6B' }}>+11 PTS</span>
                </div>
                <div className="v1-num" style={{ fontSize: 36, color: '#1A1714' }}>94<span style={{ fontSize: 18, color: '#75706A', fontWeight: 300 }}>%</span></div>
                <div style={{ height: 70, marginTop: 8 }}>
                  <Chart data={auditTrend} color="#2D8B6B" fill="rgba(45,139,107,0.12)" />
                </div>
              </div>
              <div style={v1.chartCard}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                  <span className="v1-mono" style={{ fontSize: 9, color: '#75706A' }}>OPEN DEFECTS</span>
                  <span className="v1-mono" style={{ fontSize: 10, color: '#2D8B6B' }}>−9 / 30D</span>
                </div>
                <div className="v1-num" style={{ fontSize: 36, color: '#1A1714' }}>3</div>
                <div style={{ height: 70, marginTop: 8 }}>
                  <Chart data={defectTrend} color="#C8501C" fill="rgba(200,80,28,0.10)" />
                </div>
              </div>
              <div style={{ ...v1.chartCard, gridColumn: 'span 2', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
                {[['Time saved', '142', 'hrs'], ['Cost saved', '$38.4', 'k'], ['Overdue', '0', '']].map(([l, n, u]) =>
                <div key={l} style={{ padding: '4px 14px', borderRight: l === 'Overdue' ? 'none' : '1px dashed #E4DCC8' }}>
                    <div className="v1-mono" style={{ fontSize: 9, color: '#75706A' }}>{l.toUpperCase()}</div>
                    <div className="v1-num" style={{ fontSize: 28, color: '#1A1714', marginTop: 4 }}>
                      {n}<span style={{ fontSize: 14, color: '#75706A', fontWeight: 300, marginLeft: 2 }}>{u}</span>
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', gap: 12, paddingTop: 18, marginTop: 18, borderTop: '1px dashed #E4DCC8' }}>
              <span className="v1-mono" style={{ fontSize: 10, color: '#75706A' }}>PERIOD</span>
              <div style={{ display: 'inline-flex', background: '#F2EDE2', borderRadius: 8, padding: 3 }}>
                {periods.map((p) =>
                <button key={p} onClick={() => setPeriod(p)} style={{
                  padding: '6px 14px', border: 'none', borderRadius: 6, fontSize: 12, fontWeight: 500, cursor: 'pointer',
                  background: period === p ? '#1A1714' : 'transparent',
                  color: period === p ? '#FFF8EE' : '#75706A',
                  fontFamily: 'inherit'
                }}>{p}</button>
                )}
              </div>
              <div style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 20, background: '#D9EFE4', color: '#1A5C46' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#2D8B6B' }} />
                <span className="v1-mono" style={{ fontSize: 10, fontWeight: 600 }}>LIVE</span>
              </div>
            </div>
          </section>

          {/* AI coach */}
          <section style={v1.coach}>
            <div style={v1.coachAvatar}>AI</div>
            <div>
              <div className="v1-mono" style={{ fontSize: 10, color: '#7C3AED', marginBottom: 6 }}>PLANT COACH · CONFIDENCE 35%</div>
              <div className="v1-num" style={{ fontSize: 24, lineHeight: 1.2, color: '#1A1714' }}>
                Quiet floor today — <em style={{ fontStyle: 'italic', color: '#7C3AED', fontWeight: 300 }}>treat the silence as opportunity.</em>
              </div>
              <div style={{ fontSize: 13, color: '#75706A', marginTop: 8, maxWidth: 640, lineHeight: 1.5 }}>
                Walk the floor with one operator. Refresh a standard or capture a gold-standard photo while everything is calm.
              </div>
            </div>
            <button style={v1.btnPrimary}>Start a walk →</button>
          </section>

          {/* Stats grid */}
          <SectionHead title="Plant signals" link="Open report" />
          <div style={v1.statsGrid}>
            {[
            { l: 'Open defects', v: '3', s: '0 critical · 1 high · 2 med', t: '−9 vs prior', tc: '#2D8B6B', tone: 'critical' },
            { l: 'Overdue actions', v: '0', s: 'Nothing past due', t: '— steady', tc: '#75706A' },
            { l: 'Audit completion', v: '94', u: '%', s: '47 of 50 scheduled', t: '+11 pts', tc: '#2D8B6B' },
            { l: 'Time saved', v: '142', u: 'hrs', s: 'across 12 kaizens', t: '+18 hrs', tc: '#2D8B6B' },
            { l: 'Cost saved', v: '38.4', u: 'k', pre: '$', s: 'verified by finance', t: '+$6.2k', tc: '#2D8B6B' },
            { l: 'Active A3s', v: '1', s: 'Line 4 throughput', t: '— steady', tc: '#75706A' }].
            map((c) =>
            <div key={c.l} style={v1.statCard}>
                <div className="v1-mono" style={{ fontSize: 9, color: '#75706A' }}>{c.l.toUpperCase()}</div>
                <div className="v1-num" style={{ fontSize: 44, color: '#1A1714', marginTop: 8, display: 'flex', alignItems: 'baseline', gap: 2 }}>
                  {c.pre && <span style={{ fontSize: 22, color: '#75706A', fontWeight: 300 }}>{c.pre}</span>}
                  {c.v}
                  {c.u && <span style={{ fontSize: 18, color: '#75706A', fontWeight: 300 }}>{c.u}</span>}
                </div>
                <div style={{ fontSize: 11.5, color: '#75706A', marginTop: 4 }}>{c.s}</div>
                <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px dashed #E4DCC8', display: 'flex', justifyContent: 'space-between' }}>
                  <span className="v1-mono" style={{ fontSize: 10, color: '#75706A' }}>VS PRIOR</span>
                  <span className="v1-mono" style={{ fontSize: 10, color: c.tc, fontWeight: 600 }}>{c.t}</span>
                </div>
              </div>
            )}
          </div>

          {/* Insights strip */}
          <div style={v1.insights}>
            <div style={v1.signalOrb} />
            <div>
              <div className="v1-mono" style={{ fontSize: 10, color: '#1A5C46' }}>SIGNAL DETECTED</div>
              <div className="v1-num" style={{ fontSize: 22, color: '#1A1714', marginTop: 4 }}>
                Three weeks of <em style={{ fontStyle: 'italic', color: '#1A5C46', fontWeight: 300 }}>uninterrupted improvement.</em>
              </div>
              <div style={{ fontSize: 13, color: '#75706A', marginTop: 4 }}>Defect rate, audit completion and engagement are all moving in the right direction.</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {['DEFECTS ↓', 'AUDIT ↑', 'ENGAGE ↑'].map((t) =>
              <span key={t} className="v1-mono" style={{ padding: '6px 10px', borderRadius: 20, background: '#FFFCF5', border: '1px solid #E4DCC8', fontSize: 10, fontWeight: 600 }}>● {t}</span>
              )}
            </div>
          </div>

          {/* Zone map + activity */}
          <SectionHead title="Zones" link="View all" />
          <div style={v1.panels}>
            <div style={v1.panel}>
              <div style={v1.zoneGrid}>
                {[
                { c: 'Z-01', n: 'Assembly A', s: 96, st: 'healthy' },
                { c: 'Z-02', n: 'Assembly B', s: 92, st: 'healthy' },
                { c: 'Z-03', n: 'Pack & Ship', s: 88, st: 'healthy' },
                { c: 'Z-04', n: 'QC Lab', s: 78, st: 'watch' },
                { c: 'Z-05', n: 'Receiving', s: 84, st: 'healthy' },
                { c: 'Z-06', n: 'Tooling', s: 71, st: 'watch' },
                { c: 'Z-07', n: 'Maintenance', s: 89, st: 'healthy' },
                { c: '+', n: '', s: 0, st: 'empty' }].
                map((z) => z.st === 'empty' ?
                <div key={z.c} style={{ ...v1.zone, ...v1.zoneEmpty }}>+ Add zone</div> :

                <div key={z.c} style={{ ...v1.zone, borderLeft: `3px solid ${z.st === 'watch' ? '#E8A02B' : '#2D8B6B'}` }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span className="v1-mono" style={{ fontSize: 9, color: '#75706A' }}>{z.c}</span>
                      <span className="v1-num" style={{ fontSize: 14, padding: '1px 7px', borderRadius: 5, background: z.st === 'watch' ? '#FBEBC9' : '#D9EFE4', color: z.st === 'watch' ? '#92660F' : '#1A5C46' }}>{z.s}</span>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6, color: '#1A1714' }}>{z.n}</div>
                    <div style={{ height: 4, borderRadius: 3, background: '#F2EDE2', marginTop: 8, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${z.s}%`, background: z.st === 'watch' ? '#E8A02B' : '#2D8B6B' }} />
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div style={v1.panel}>
              <div className="v1-mono" style={{ fontSize: 10, color: '#75706A', marginBottom: 12 }}>RECENT ACTIVITY</div>
              {[
              ['AUDIT', 'Line 2 5S audit completed', 'M. Patel · 96/100', '12m'],
              ['KAIZEN', 'Tooling cycle reduced 14s', 'A. Chen', '1h'],
              ['A3', 'Line 4 throughput · update', 'R. Singh', '3h'],
              ['DEFECT', 'Label misalignment closed', 'QC Lab', '5h'],
              ['AUDIT', 'Receiving safety walk', 'J. Rivera · 92/100', 'Yest']].
              map(([t, n, m, ti], i) =>
              <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, padding: '10px 0', borderBottom: i === 4 ? 'none' : '1px dashed #E4DCC8' }}>
                  <span className="v1-mono" style={{ fontSize: 9, color: '#75706A', alignSelf: 'center', padding: '2px 6px', background: '#F2EDE2', borderRadius: 4 }}>{t}</span>
                  <div>
                    <div style={{ fontSize: 13, color: '#1A1714', fontWeight: 500 }}>{n}</div>
                    <div style={{ fontSize: 11, color: '#75706A' }}>{m}</div>
                  </div>
                  <span className="v1-mono" style={{ fontSize: 10, color: '#75706A', alignSelf: 'center' }}>{ti}</span>
                </div>
              )}
            </div>
          </div>

          {/* Leaderboard + quick actions */}
          <SectionHead title="People & shortcuts" />
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16 }}>
            <div style={{ ...v1.panel, background: 'linear-gradient(160deg, #FFFCF5 0%, #FFF6E4 100%)' }}>
              <div className="v1-mono" style={{ fontSize: 10, color: '#75706A', marginBottom: 12 }}>TOP CONTRIBUTORS · MAY</div>
              {[
              ['M. Patel', 'Line lead', 1240, '#EC4899'],
              ['A. Chen', 'Tooling', 1080, '#10B981'],
              ['R. Singh', 'QC', 920, '#3B82F6'],
              ['J. Rivera', 'Receiving', 780, '#F59E0B'],
              ['T. Okafor', 'Maintenance', 640, '#8B5CF6']].
              map(([n, r, p, c], i) =>
              <div key={n} style={{ display: 'grid', gridTemplateColumns: 'auto auto 1fr auto', gap: 14, alignItems: 'center', padding: '10px 12px', marginBottom: 6, background: '#FFFCF5', border: '1px solid #E4DCC8', borderRadius: 10 }}>
                  <span className="v1-num" style={{ fontSize: 20, color: i === 0 ? '#C8501C' : '#A19B91', fontStyle: i === 0 ? 'italic' : 'normal', width: 22, textAlign: 'center' }}>{i + 1}</span>
                  <span style={{ width: 30, height: 30, borderRadius: 8, background: c, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>{n.split(' ').map((s) => s[0]).join('')}</span>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{n}</div>
                    <div className="v1-mono" style={{ fontSize: 10, color: '#75706A' }}>{r.toUpperCase()}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="v1-num" style={{ fontSize: 20 }}>{p.toLocaleString()}</div>
                    <div className="v1-mono" style={{ fontSize: 8, color: '#75706A' }}>POINTS</div>
                  </div>
                </div>
              )}
            </div>

            <div style={{ ...v1.panel, background: '#FFFCF5', position: 'relative', overflow: 'hidden' }}>
              <div className="v1-mono" style={{ fontSize: 10, color: '#75706A', marginBottom: 8, letterSpacing: '0.16em' }}>QUICK ACTIONS</div>
              <div className="v1-num" style={{ fontSize: 22, marginBottom: 18, color: '#1A1714' }}>
                Get something <em style={{ fontStyle: 'italic', color: '#C8501C', fontWeight: 300 }}>moving.</em>
              </div>
              {[
              ['Start audit', '5S, safety, layered', '#C8501C', '#FFE8DD'],
              ['Log defect', 'Capture and assign', '#1A5C46', '#D9EFE4'],
              ['New kaizen', 'Idea or improvement', '#1F5FAE', '#DCE8F7'],
              ['Open A3', 'Structured problem', '#7C3AED', '#EADCFF']].
              map(([t, s, ic, ib]) =>
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', marginBottom: 6, background: '#FFFEFA', border: '1px solid #E4DCC8', borderRadius: 11, cursor: 'pointer' }}>
                  <span style={{ width: 28, height: 28, borderRadius: 8, background: ib, color: ic, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700 }}>→</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: '#1A1714' }}>{t}</div>
                    <div style={{ fontSize: 11, color: '#75706A' }}>{s}</div>
                  </div>
                  <span className="v1-mono" style={{ fontSize: 9, color: '#A19B91', letterSpacing: '0.14em' }}>↵</span>
                </div>
              )}
            </div>
          </div>
        </main>
      </div>
    </div>);

};

const SectionHead = ({ title, link }) =>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '32px 0 14px' }}>
    <h2 className="v1-num" style={{ fontSize: 24, color: '#1A1714' }}>{title}</h2>
    {link && <a style={{ fontSize: 12.5, color: '#75706A', borderBottom: '1px dashed #A19B91', cursor: 'pointer' }}>{link} →</a>}
  </div>;


const v1 = {
  root: { width: 1280, minHeight: 900, background: '#F8F5EE', color: '#1A1714', fontFamily: "'Inter Tight',sans-serif" },
  side: { background: 'linear-gradient(180deg,#FFFDF8,#F5F0E2)', borderRight: '1px solid #E4DCC8', padding: '18px 12px', display: 'flex', flexDirection: 'column' },
  brand: { display: 'flex', gap: 11, alignItems: 'center', padding: 10, border: '1px solid #E4DCC8', borderRadius: 12, background: '#FFFCF5', marginBottom: 10 },
  brandMark: { width: 32, height: 32, borderRadius: 8, background: 'linear-gradient(135deg,#FF5722,#FF8A4F)', color: '#fff', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 },
  navLabel: { fontSize: 9, color: '#A19B91', padding: '0 12px', marginBottom: 6 },
  navItem: { display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', borderRadius: 8, fontSize: 13, color: '#2D2823', cursor: 'pointer' },
  navActive: { background: '#1A1714', color: '#FFF8EE' },
  navDot: { width: 6, height: 6, borderRadius: '50%' },
  navBadge: { marginLeft: 'auto', fontFamily: "'JetBrains Mono',monospace", fontSize: 10, padding: '1px 6px', borderRadius: 5, background: '#FFE8DD', color: '#C8501C' },
  userCard: { marginTop: 'auto', display: 'flex', gap: 10, padding: 10, border: '1px solid #E4DCC8', borderRadius: 10, background: '#FFFCF5', alignItems: 'center' },
  userAv: { width: 30, height: 30, borderRadius: 8, background: 'linear-gradient(135deg,#7C3AED,#1F5FAE)', color: '#fff', fontWeight: 600, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center' },
  topbar: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 18, borderBottom: '1px dashed #E4DCC8', marginBottom: 24 },
  iconBtn: { width: 34, height: 34, borderRadius: 9, border: '1px solid #E4DCC8', background: '#FFFCF5' },
  hero: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, padding: '8px 0 0', marginBottom: 28 },
  charts: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 },
  chartCard: { background: '#FFFCF5', border: '1px solid #E4DCC8', borderRadius: 14, padding: '14px 16px' },
  btnPrimary: { padding: '11px 18px', borderRadius: 11, background: '#1A1714', color: '#FFF8EE', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' },
  btnGhost: { padding: '11px 18px', borderRadius: 11, background: 'transparent', color: '#1A1714', border: '1px solid #E4DCC8', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' },
  coach: { background: '#FFFCF5', border: '1px solid #E4DCC8', borderRadius: 16, padding: '20px 24px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20, alignItems: 'center', marginBottom: 12, position: 'relative', overflow: 'hidden' },
  coachAvatar: { width: 48, height: 48, borderRadius: 12, background: 'linear-gradient(135deg,#7C3AED,#5B7FFF)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, fontFamily: "'JetBrains Mono',monospace" },
  statsGrid: { display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 12 },
  statCard: { background: '#FFFCF5', border: '1px solid #E4DCC8', borderRadius: 14, padding: 16 },
  insights: { background: 'linear-gradient(135deg,#FFFCF5,#FFF8EE)', border: '1px solid #E4DCC8', borderRadius: 16, padding: '20px 24px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 22, alignItems: 'center', margin: '22px 0' },
  signalOrb: { width: 44, height: 44, borderRadius: '50%', background: 'radial-gradient(circle at 30% 30%, #A8E5C2, #2D8B6B 60%)', boxShadow: '0 0 0 6px rgba(45,139,107,0.12)' },
  panels: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 },
  panel: { background: '#FFFCF5', border: '1px solid #E4DCC8', borderRadius: 16, padding: '20px 22px' },
  zoneGrid: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 },
  zone: { border: '1px solid #E4DCC8', borderRadius: 10, padding: 12, background: '#FFFEFA' },
  zoneEmpty: { borderStyle: 'dashed', background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#A19B91', fontSize: 11.5 }
};

window.V1 = V1;