// Catatu — Phone screen mockups for Home parade
// Each is a self-contained 240×480 design

function ScreenLogin() {
  const c = window.CT2;
  return (
    <div style={{ position: 'relative', height: '100%', padding: '8px 22px', background: c.cream }}>
      {/* organic blobs bg */}
      <div style={{ position: 'absolute', top: 30, right: -10 }}><SiteBlob kind="a" color={c.peach} size={90} opacity={0.7} /></div>
      <div style={{ position: 'absolute', top: 60, left: -30 }}><SiteBlob kind="b" color={c.mint} size={110} opacity={0.6} /></div>
      <div style={{ position: 'absolute', bottom: 100, right: 0 }}><SiteBlob kind="c" color={c.butter} size={70} opacity={0.5} /></div>

      <div style={{ position: 'relative', paddingTop: 30 }}>
        <BukuSaku size={42} />
      </div>
      <div style={{ position: 'relative', marginTop: 80 }}>
        <div style={{ fontFamily: 'Fraunces', fontSize: 32, fontWeight: 500, color: c.ink, lineHeight: 1, letterSpacing: -1 }}>Hai!</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 26, fontStyle: 'italic', color: c.terra, lineHeight: 1.05, letterSpacing: -0.8, marginTop: 4 }}>Yuk catat duitmu.</div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 11, color: c.ink2, lineHeight: 1.5, marginTop: 14, maxWidth: 180 }}>
          Sat-set, dua detik selesai. Biar kamu tau ngalir ke mana ✨
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 30, left: 22, right: 22 }}>
        <button style={{ width: '100%', height: 38, borderRadius: 10, background: c.ink, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 11, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <span style={{ width: 14, height: 14, background: c.cream, borderRadius: 2, color: c.ink, fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>G</span>
          Masuk dengan Google
        </button>
        <button style={{ width: '100%', height: 38, marginTop: 8, borderRadius: 10, background: 'transparent', color: c.ink, border: `1.5px solid ${c.ink}`, fontFamily: 'DM Sans', fontSize: 11, fontWeight: 500 }}>
          Pakai email aja →
        </button>
      </div>
    </div>
  );
}

function ScreenCategories() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 18px', background: c.cream, position: 'relative' }}>
      <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 9, color: c.ink3, letterSpacing: 1, marginTop: 14 }}>STEP 1 / 3</div>
      <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.5, lineHeight: 1.1, marginTop: 4 }}>
        Yang biasa kamu <em style={{ color: c.terra, fontStyle: 'italic' }}>beli?</em>
      </div>
      <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink2, marginTop: 6 }}>Pilih kategori — bisa diubah nanti.</div>

      <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, justifyItems: 'center' }}>
        {window.CATEGORIES.slice(0, 6).map((cat, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative' }}>
            <CatIcon emoji={cat.emoji} color={cat.color} size={48} ring={i === 0 || i === 2 || i === 4} />
            <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink, fontWeight: 500 }}>{cat.label}</div>
          </div>
        ))}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
          <CatIcon emoji="✨" color={c.cream2} size={48} />
          <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink, fontWeight: 500 }}>Lain</div>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 22, left: 18, right: 18 }}>
        <button style={{ width: '100%', height: 38, borderRadius: 10, background: c.terra, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 12, fontWeight: 500 }}>
          Next · 5 dipilih →
        </button>
      </div>
    </div>
  );
}

function ScreenAmplop() {
  const c = window.CT2;
  const items = [
    { emoji: '🍜', l: 'Makan', v: '800K', pct: 0.7, color: c.peach },
    { emoji: '☕', l: 'Kopi', v: '200K', pct: 0.4, color: c.butter },
    { emoji: '🛵', l: 'Transport', v: '500K', pct: 0.55, color: c.salmon },
    { emoji: '✨', l: 'Belanja', v: '500K', pct: 0.5, color: c.mint },
  ];
  return (
    <div style={{ height: '100%', padding: '8px 18px', background: c.cream, position: 'relative' }}>
      <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 9, color: c.ink3, letterSpacing: 1, marginTop: 14 }}>STEP 2 / 3</div>
      <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.5, lineHeight: 1.1, marginTop: 4 }}>
        Atur <em style={{ color: c.terra, fontStyle: 'italic' }}>amplop</em><br />per bulan
      </div>
      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => (
          <div key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <CatIcon emoji={it.emoji} color={it.color} size={26} />
              <div style={{ flex: 1, fontFamily: 'DM Sans', fontSize: 11, fontWeight: 500, color: c.ink }}>{it.l}</div>
              <div style={{ fontFamily: 'Fraunces', fontSize: 14, fontWeight: 500, color: c.ink, letterSpacing: -0.3 }}>{it.v}</div>
            </div>
            <div style={{ height: 5, background: c.ivory || '#f0e4cc', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${it.pct * 100}%`, background: it.color, borderRadius: 999 }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 22, left: 18, right: 18, fontFamily: 'Geist Mono', fontSize: 9, color: c.ink3, textAlign: 'center', letterSpacing: 0.6 }}>
        TOTAL AMPLOP <span style={{ color: c.ink, fontWeight: 600 }}>RP 2.000.000</span>
      </div>
    </div>
  );
}

function ScreenSendiri() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 18px', background: c.cream, position: 'relative' }}>
      <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 9, color: c.ink3, letterSpacing: 1, marginTop: 14 }}>STEP 3 / 3</div>
      <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.5, lineHeight: 1.1, marginTop: 4 }}>
        Sendiri atau<br /><em style={{ color: c.terra, fontStyle: 'italic' }}>bareng?</em>
      </div>
      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ background: c.paper, border: `2px solid ${c.terra}`, borderRadius: 14, padding: 12, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 8, right: 8, width: 16, height: 16, borderRadius: 8, background: c.terra, color: c.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }}>✓</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <CatIcon emoji="🙋" color={c.lilac} size={28} />
            <div style={{ fontFamily: 'Fraunces', fontSize: 16, fontWeight: 500, color: c.ink, letterSpacing: -0.3 }}>Solo</div>
          </div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink2, marginTop: 6 }}>Catatan & amplop hanya milik kamu.</div>
        </div>
        <div style={{ background: c.paper, border: `1.5px solid ${c.line}`, borderRadius: 14, padding: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <CatIcon emoji="👨‍👩‍👧" color={c.mint} size={28} />
            <div style={{ fontFamily: 'Fraunces', fontSize: 16, fontWeight: 500, color: c.ink, letterSpacing: -0.3 }}>Keluarga</div>
          </div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink2, marginTop: 6 }}>Catat bareng, amplop pribadi tetap aman.</div>
          <div style={{ display: 'inline-block', marginTop: 8, padding: '3px 8px', borderRadius: 999, background: c.butter, fontFamily: 'Geist Mono', fontSize: 8, color: c.ink, letterSpacing: 0.4, fontWeight: 600 }}>BUTUH PRO</div>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 22, left: 18, right: 18 }}>
        <button style={{ width: '100%', height: 38, borderRadius: 10, background: c.terra, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 12, fontWeight: 500 }}>
          Mulai catat
        </button>
      </div>
    </div>
  );
}

function ScreenDashboard() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 16px', background: c.cream, position: 'relative' }}>
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 9, color: c.ink3, letterSpacing: 0.6 }}>HALO MIRA</div>
          <div style={{ fontFamily: 'Fraunces', fontSize: 17, fontWeight: 500, color: c.ink, letterSpacing: -0.4, marginTop: 2 }}>April · Minggu ke-5</div>
        </div>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: c.terra, color: c.cream, fontFamily: 'Fraunces', fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 500 }}>M</div>
      </div>

      <div style={{
        marginTop: 12, padding: 14, borderRadius: 14,
        background: `linear-gradient(135deg, ${c.peach}, ${c.salmon})`,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: -20, right: -20 }}><SiteBlob kind="a" color="rgba(255,255,255,0.4)" size={80} /></div>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 8, color: c.ink, opacity: 0.7, letterSpacing: 0.6, position: 'relative' }}>SPENDING BULAN INI</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 28, fontWeight: 500, color: c.ink, letterSpacing: -1, marginTop: 2, position: 'relative' }}>1.732K</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 4, position: 'relative' }}>
          <div style={{ padding: '2px 6px', borderRadius: 4, background: 'rgba(255,255,255,0.5)', fontFamily: 'Geist Mono', fontSize: 7, color: c.ink, fontWeight: 600 }}>↓ 12% VS MARET</div>
        </div>
        {/* mini chart */}
        <svg viewBox="0 0 100 30" width="100%" height="28" style={{ marginTop: 8, position: 'relative' }}>
          <path d="M0,20 Q15,12 25,18 T50,15 T75,8 T100,12" fill="none" stroke={c.ink} strokeWidth="1.5" />
          <path d="M0,20 Q15,12 25,18 T50,15 T75,8 T100,12 L100,30 L0,30 Z" fill={c.ink} opacity="0.1" />
        </svg>
      </div>

      <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {[{ l: 'Makan', v: '115K', col: c.peach }, { l: 'Transport', v: '768K', col: c.salmon }, { l: 'Kopi', v: '65K', col: c.butter }].map((s, i) => (
          <div key={i} style={{ background: s.col, borderRadius: 10, padding: 8, textAlign: 'center' }}>
            <div style={{ fontFamily: 'Fraunces', fontSize: 14, fontWeight: 500, color: c.ink }}>{s.v}</div>
            <div style={{ fontFamily: 'DM Sans', fontSize: 8, color: c.ink2, fontWeight: 500 }}>{s.l}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 8, padding: '8px 10px', borderRadius: 10, background: c.lilac, fontFamily: 'DM Sans', fontSize: 9, color: c.ink, lineHeight: 1.4 }}>
        <span style={{ fontWeight: 600 }}>Hai-hai:</span> Makan udah 87% dari budget. Yuk masak-masak dulu :)
      </div>

      <div style={{ marginTop: 8, fontFamily: 'Geist Mono', fontSize: 8, color: c.ink3, letterSpacing: 0.6 }}>KATEGORI</div>
      <div style={{ marginTop: 4, padding: '6px 10px', borderRadius: 10, background: c.paper, display: 'flex', alignItems: 'center', gap: 8 }}>
        <CatIcon emoji="🍜" color={c.peach} size={22} />
        <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink, fontWeight: 500, flex: 1 }}>Makan</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 11, color: c.ink }}>Rp 487.000</div>
      </div>

      {/* tabbar */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 38, background: c.paper, borderTop: `1px solid ${c.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
        {['🏠', '📋', '➕', '📊', '⚙️'].map((e, i) => (
          <div key={i} style={{
            width: 26, height: 26, borderRadius: i === 2 ? 7 : 0,
            background: i === 2 ? c.terra : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13,
          }}>{e}</div>
        ))}
      </div>
    </div>
  );
}

function ScreenAdd() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 16px', background: c.cream, position: 'relative' }}>
      <div style={{ marginTop: 14, fontFamily: 'Fraunces', fontSize: 14, fontWeight: 500, color: c.ink, letterSpacing: -0.3 }}>+ Catat baru</div>

      <div style={{ marginTop: 12, textAlign: 'center' }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 8, color: c.ink3, letterSpacing: 1 }}>JUMLAH</div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 4, marginTop: 2 }}>
          <span style={{ fontFamily: 'DM Sans', fontSize: 14, color: c.ink2, fontWeight: 500 }}>Rp</span>
          <span style={{ fontFamily: 'Fraunces', fontSize: 38, fontWeight: 500, color: c.ink, letterSpacing: -1.5, lineHeight: 1 }}>25.000</span>
        </div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 8 }}>
          {['10K', '25K', '50K', '100K'].map((v, i) => (
            <div key={i} style={{ padding: '4px 8px', borderRadius: 999, background: i === 1 ? c.terra : c.paper, color: i === 1 ? c.cream : c.ink2, fontFamily: 'Geist Mono', fontSize: 9, fontWeight: 500 }}>{v}</div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', gap: 8, padding: '0 8px' }}>
        {[{ e: '🍜', l: 'Makan', col: c.peach, on: true }, { e: '☕', l: 'Kopi', col: c.butter }, { e: '🛵', l: 'Transport', col: c.salmon }, { e: '✨', l: 'Lain', col: c.lilac }].map((cat, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
            <CatIcon emoji={cat.e} color={cat.col} size={32} ring={cat.on} />
            <div style={{ fontFamily: 'DM Sans', fontSize: 8, color: c.ink2, fontWeight: 500 }}>{cat.l}</div>
          </div>
        ))}
      </div>

      {/* keypad */}
      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {['1','2','3','4','5','6','7','8','9','.','0','⌫'].map((k, i) => (
          <div key={i} style={{
            height: 32, background: c.paper, borderRadius: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Fraunces', fontSize: 14, fontWeight: 500, color: c.ink,
          }}>{k}</div>
        ))}
      </div>

      <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16 }}>
        <button style={{ width: '100%', height: 38, borderRadius: 10, background: c.terra, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 12, fontWeight: 500 }}>Simpan ✓</button>
      </div>
    </div>
  );
}

function ScreenTransactions() {
  const c = window.CT2;
  const txs = [
    { e: '🍜', l: 'Mie ayam Pak Slamet', a: '25K', col: c.peach, b: c.peach },
    { e: '🛵', l: 'Gojek ke kantor', a: '18K', col: c.salmon },
    { e: '☕', l: 'Tuku — americano', a: '22K', col: c.butter },
    { e: '🛒', l: 'Nasi padang Sederhana', a: '32K', col: c.peach, hl: true },
    { e: '🎬', l: 'Netflix bulanan', a: '65K', col: c.lilac },
  ];
  return (
    <div style={{ height: '100%', padding: '8px 16px', background: c.cream, position: 'relative' }}>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 9, color: c.ink3, letterSpacing: 1 }}>APRIL · 27 CATATAN</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.7, marginTop: 2 }}>Catatanmu 📒</div>
      </div>
      {/* filter */}
      <div style={{ marginTop: 8, display: 'flex', gap: 5, overflow: 'hidden' }}>
        {['Semua', 'Makan', 'Kopi', 'Transport'].map((f, i) => (
          <div key={i} style={{ padding: '3px 8px', borderRadius: 999, background: i === 0 ? c.ink : c.paper, color: i === 0 ? c.cream : c.ink2, fontFamily: 'DM Sans', fontSize: 9, fontWeight: 500, whiteSpace: 'nowrap' }}>{f}</div>
        ))}
      </div>

      <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {txs.map((tx, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', background: tx.hl ? c.butter : c.paper, borderRadius: 10 }}>
            <CatIcon emoji={tx.e} color={tx.col} size={24} />
            <div style={{ flex: 1, fontFamily: 'DM Sans', fontSize: 10, fontWeight: 500, color: c.ink }}>{tx.l}</div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 12, fontWeight: 500, color: c.ink }}>−{tx.a}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ScreenStatistik() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 16px', background: c.cream, position: 'relative' }}>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontFamily: 'Fraunces', fontSize: 20, fontWeight: 500, color: c.ink, letterSpacing: -0.5 }}>Recap mingguan</div>
        <div style={{ marginTop: 6, display: 'flex', gap: 5 }}>
          {[['Hari', false], ['Minggu', true], ['Bulan', false]].map(([l, on], i) => (
            <div key={i} style={{ padding: '3px 8px', borderRadius: 999, background: on ? c.terra : c.paper, color: on ? c.cream : c.ink2, fontFamily: 'DM Sans', fontSize: 9, fontWeight: 500 }}>{l}</div>
          ))}
        </div>
      </div>

      {/* donut */}
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg viewBox="0 0 60 60" width="80" height="80">
          <circle cx="30" cy="30" r="22" fill="none" stroke={c.peach} strokeWidth="10" strokeDasharray="55 138" />
          <circle cx="30" cy="30" r="22" fill="none" stroke={c.salmon} strokeWidth="10" strokeDasharray="38 138" strokeDashoffset="-55" />
          <circle cx="30" cy="30" r="22" fill="none" stroke={c.butter} strokeWidth="10" strokeDasharray="28 138" strokeDashoffset="-93" />
          <circle cx="30" cy="30" r="22" fill="none" stroke={c.lilac} strokeWidth="10" strokeDasharray="17 138" strokeDashoffset="-121" />
          <text x="30" y="32" textAnchor="middle" fontFamily="Fraunces" fontSize="11" fontWeight="500" fill={c.ink}>1.7M</text>
        </svg>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            { c: c.peach, l: 'Makan', v: '38%' },
            { c: c.salmon, l: 'Transport', v: '28%' },
            { c: c.butter, l: 'Kopi', v: '20%' },
            { c: c.lilac, l: 'Hiburan', v: '12%' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 5, fontFamily: 'DM Sans', fontSize: 9, color: c.ink }}>
              <div style={{ width: 8, height: 8, borderRadius: 2, background: s.c }} />
              <span style={{ flex: 1 }}>{s.l}</span>
              <span style={{ fontWeight: 600 }}>{s.v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 12, padding: 10, borderRadius: 10, background: c.terra, color: c.cream }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 8, opacity: 0.8, letterSpacing: 0.6 }}>HEMAT BULAN INI</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, letterSpacing: -0.8, marginTop: 2 }}>+Rp 238.000</div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 9, opacity: 0.85, marginTop: 2 }}>vs rata-rata 3 bulan terakhir.</div>
      </div>

      {/* bar chart */}
      <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 4, height: 50 }}>
        {[40, 55, 30, 65, 75, 50, 35].map((h, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
            <div style={{ width: '100%', height: h, background: i === 4 ? c.terra : c.salmon, borderRadius: '3px 3px 0 0' }} />
            <div style={{ fontFamily: 'Geist Mono', fontSize: 7, color: c.ink3 }}>{['S','M','T','W','T','F','S'][i]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ScreenAmplopRecap() {
  const c = window.CT2;
  return (
    <div style={{ height: '100%', padding: '8px 16px', background: c.cream, position: 'relative' }}>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 9, color: c.ink3, letterSpacing: 1 }}>BUDGET · APRIL</div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.5, marginTop: 2 }}>Amplopmu 💰</div>
      </div>

      {/* big donut card */}
      <div style={{ marginTop: 10, padding: 12, borderRadius: 12, background: c.paper, border: `1px solid ${c.line}`, display: 'flex', alignItems: 'center', gap: 12 }}>
        <svg viewBox="0 0 50 50" width="56" height="56">
          <circle cx="25" cy="25" r="18" fill="none" stroke={c.line} strokeWidth="6" />
          <circle cx="25" cy="25" r="18" fill="none" stroke={c.terra} strokeWidth="6" strokeDasharray="72 113" strokeDashoffset="0" transform="rotate(-90 25 25)" />
          <text x="25" y="28" textAnchor="middle" fontFamily="Fraunces" fontSize="11" fontWeight="600" fill={c.ink}>64%</text>
        </svg>
        <div>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 8, color: c.ink3, letterSpacing: 0.6 }}>SISA</div>
          <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontWeight: 500, color: c.ink, letterSpacing: -0.6 }}>Rp 968.000</div>
          <div style={{ fontFamily: 'DM Sans', fontSize: 9, color: c.ink2 }}>dari Rp 1.5jt total</div>
        </div>
      </div>

      <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 9, color: c.ink3, letterSpacing: 0.6 }}>PER KATEGORI</div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 9, color: c.terraDeep, fontWeight: 500 }}>+ Tambah</div>
      </div>

      <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { e: '🍜', l: 'Makan', sub: 'Rp 487.000 / Rp 800.000', col: c.peach, p: 0.6 },
          { e: '🛵', l: 'Transport', sub: 'Rp 215.000 / Rp 500.000', col: c.salmon, p: 0.43 },
          { e: '☕', l: 'Kopi', sub: 'Rp 180.000 / Rp 250.000', col: c.butter, p: 0.72 },
          { e: '✨', l: 'Belanja', sub: 'Rp 150.000 / Rp 500.000', col: c.mint, p: 0.3 },
        ].map((it, i) => (
          <div key={i} style={{ background: c.paper, borderRadius: 10, padding: '6px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <CatIcon emoji={it.e} color={it.col} size={26} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink, fontWeight: 500 }}>{it.l}</div>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 7, color: c.ink3, letterSpacing: 0.3 }}>{it.sub}</div>
            </div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 11, color: c.ink, fontWeight: 500 }}>{Math.round(it.p * 100)}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.SCREENS = {
  Login: ScreenLogin,
  Categories: ScreenCategories,
  Amplop: ScreenAmplop,
  Sendiri: ScreenSendiri,
  Dashboard: ScreenDashboard,
  Add: ScreenAdd,
  Transactions: ScreenTransactions,
  Statistik: ScreenStatistik,
  AmplopRecap: ScreenAmplopRecap,
};