/** * Rate My Offers — internship pay transparency, by interns for interns. * * Storage strategy mirrors Rate My Rent exactly (which is known to persist): * - In multiplayer: pushToSharedArray('submissions', x) → patchSharedData → setSharedData * - In solo: setData({...data, submissions: updated}) * Reads come from `appData = isMultiplayer ? sharedData : data` — same as RMR. */ const INDUSTRIES = ['Tech', 'Finance', 'Consulting', 'Startup', 'Healthcare', 'Government', 'Other']; const HOUSING_OPTIONS = [ { value: 'none', label: 'No housing benefit' }, { value: 'included', label: 'Housing included' }, { value: 'stipend', label: 'Housing stipend' }, ]; function getSubmissions(doc) { if (!doc || typeof doc !== 'object') return []; if (Array.isArray(doc.submissions)) return doc.submissions; if (Array.isArray(doc.offers)) return doc.offers; // legacy key return []; } function hourlyEquivalent(s) { if (!s?.payAmount) return 0; const n = Number(s.payAmount); if (!Number.isFinite(n) || n <= 0) return 0; if (s.payType === 'hourly') return n; if (s.payType === 'monthly') return n / 160; // ~40h/wk × 4 wk if (s.payType === 'total') return n / (12 * 40); // ~12-week summer internship return 0; } function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, myPersonalData, setMyPersonalData, share, openAuth, members, }) { // ---------------- STORAGE (mirror RMR exactly) ---------------- const appData = isMultiplayer ? sharedData : data; // Hold last-good snapshot so a brief null prop after a write doesn't blank the UI. const lastAppDataRef = useRef(null); useEffect(() => { if (appData !== null && appData !== undefined) lastAppDataRef.current = appData; }, [appData]); const liveAppData = appData ?? lastAppDataRef.current; // Live refs so async saves don't read stale closures. const sharedRef = useRef(sharedData); const dataRef = useRef(data); useEffect(() => { if (sharedData !== null && sharedData !== undefined) sharedRef.current = sharedData; }, [sharedData]); useEffect(() => { if (data !== null && data !== undefined) dataRef.current = data; }, [data]); const submissions = getSubmissions(liveAppData); // ---------------- LAYOUT / VIEW ---------------- const [isDesktop, setIsDesktop] = useState(false); useEffect(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mq = window.matchMedia('(min-width: 820px)'); const sync = () => setIsDesktop(mq.matches); sync(); mq.addEventListener('change', sync); return () => mq.removeEventListener('change', sync); }, []); const [showSubmit, setShowSubmit] = useState(false); const [detailId, setDetailId] = useState(null); const [confetti, setConfetti] = useState(false); // ---------------- FORM ---------------- const emptyForm = { company: '', role: '', city: '', year: '', industry: 'Tech', payAmount: '', payType: 'hourly', housing: 'none', housingStipend: '', relocation: false, signingBonus: '', notes: '', }; const [form, setForm] = useState(emptyForm); const [submitError, setSubmitError] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const [attempted, setAttempted] = useState(false); const updateForm = (patch) => setForm((prev) => ({ ...prev, ...patch })); // ---------------- BROWSE ---------------- const [search, setSearch] = useState(''); const [industry, setIndustry] = useState('All'); const [sortBy, setSortBy] = useState('newest'); // 'newest' | 'pay-desc' | 'pay-asc' // ---------------- OPTIMISTIC ---------------- // Keep recent local submissions visible until the persisted list catches up. const [optimistic, setOptimistic] = useState([]); useEffect(() => { const ids = new Set((submissions || []).map((s) => s?.id).filter(Boolean)); setOptimistic((prev) => (prev || []).filter((s) => s?.id && !ids.has(s.id))); }, [submissions]); const allSubmissions = useMemo(() => { const ids = new Set((submissions || []).map((s) => s?.id).filter(Boolean)); const pending = (optimistic || []).filter((s) => s?.id && !ids.has(s.id)); return [...pending, ...(submissions || [])]; }, [submissions, optimistic]); // ---------------- FILTER + SORT ---------------- const visibleSubmissions = useMemo(() => { let items = (allSubmissions || []).slice(); const q = search.trim().toLowerCase(); if (q) { items = (items || []).filter((s) => { const haystack = [s.company, s.role, s.city, s.industry].map((x) => String(x || '').toLowerCase()).join(' '); return (haystack || []).includes(q); }); } if (industry !== 'All') items = (items || []).filter((s) => s.industry === industry); (items || []).sort((a, b) => { if (sortBy === 'pay-desc') return hourlyEquivalent(b) - hourlyEquivalent(a); if (sortBy === 'pay-asc') return hourlyEquivalent(a) - hourlyEquivalent(b); return (b._timestamp || 0) - (a._timestamp || 0); }); return items; }, [allSubmissions, search, industry, sortBy]); // ---------------- STATS ---------------- const stats = useMemo(() => { const list = submissions || []; let hourlySum = 0; let hourlyCount = 0; const companyCounts = {}; (list || []).forEach((s) => { const h = hourlyEquivalent(s); if (h > 0) { hourlySum += h; hourlyCount += 1; } const key = String(s.company || '').trim().toLowerCase(); if (key) { companyCounts[key] = companyCounts[key] || { name: s.company, count: 0 }; companyCounts[key].count += 1; } }); const top = Object.values(companyCounts || {}).sort((a, b) => b.count - a.count)[0]; return { total: (list || []).length, avgHourly: hourlyCount > 0 ? hourlySum / hourlyCount : 0, topCompany: top ? top.name : '—', topCompanyCount: top ? top.count : 0, }; }, [submissions]); // ---------------- SUBMIT ---------------- const validateForm = () => { if (!form.company.trim()) return 'Company is required.'; if (!form.role.trim()) return 'Role / position is required.'; if (!form.city.trim()) return 'Location is required.'; if (!form.year.trim()) return 'Year / season is required (e.g. "Summer 2026").'; const payNum = parseFloat(String(form.payAmount).replace(/[,$\s]/g, '')); if (!Number.isFinite(payNum) || payNum <= 0) return 'Pay must be a positive number.'; if (!form.notes.trim()) return 'Please share what to expect (this is the whole point).'; return null; }; const handleSubmit = async (e) => { if (e?.preventDefault) e.preventDefault(); setAttempted(true); const err = validateForm(); if (err) { setSubmitError(err); return; } setSubmitError(''); if (isSubmitting) return; setIsSubmitting(true); const payNum = parseFloat(String(form.payAmount).replace(/[,$\s]/g, '')); const housingStipendNum = form.housing === 'stipend' ? (parseFloat(String(form.housingStipend).replace(/[,$\s]/g, '')) || 0) : 0; const signingBonusNum = parseFloat(String(form.signingBonus).replace(/[,$\s]/g, '')) || 0; const newSubmission = { id: Date.now().toString() + '-' + Math.random().toString(36).slice(2, 8), company: form.company.trim(), role: form.role.trim(), city: form.city.trim(), year: form.year.trim(), industry: form.industry, payAmount: payNum, payType: form.payType, housing: form.housing, housingStipend: housingStipendNum, relocation: Boolean(form.relocation), signingBonus: signingBonusNum, notes: form.notes.trim(), createdAt: Date.now(), _timestamp: Date.now(), _user: { id: user?.id || 'anon', displayName: user?.name || user?.displayName || 'Anonymous', handle: user?.handle || '', avatarUrl: user?.avatarUrl || '', }, }; const existing = getSubmissions(isMultiplayer ? (sharedRef.current ?? sharedData ?? {}) : (dataRef.current ?? data ?? {})); const updated = [newSubmission, ...(existing || []).filter((s) => s?.id !== newSubmission.id)]; // Optimistic so the UI reflects the post even before the server echoes back. setOptimistic((prev) => [newSubmission, ...(prev || []).filter((s) => s?.id !== newSubmission.id)]); try { if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { await Promise.resolve(pushToSharedArray('submissions', newSubmission)); } else if (typeof patchSharedData === 'function') { await Promise.resolve(patchSharedData({ submissions: updated })); } else if (typeof setSharedData === 'function') { await Promise.resolve(setSharedData({ ...(sharedRef.current ?? sharedData ?? {}), submissions: updated, })); } else { throw new Error('Shared saver is not available in multiplayer mode.'); } } else if (typeof setData === 'function') { await Promise.resolve(setData({ ...(dataRef.current ?? data ?? {}), submissions: updated, })); } else { throw new Error('Local saver is not available in solo mode.'); } } catch (e2) { console.error('[RateMyOffers] submit failed', e2); setSubmitError(e2?.message || 'Could not save your offer. Please try again.'); setIsSubmitting(false); return; } setIsSubmitting(false); setForm(emptyForm); setAttempted(false); setShowSubmit(false); setConfetti(true); setTimeout(() => setConfetti(false), 2400); }; // ---------------- DEBUG (small, non-intrusive) ---------------- const [debugEnabled, setDebugEnabled] = useState(false); const [debugProbe, setDebugProbe] = useState(null); const tapsRef = useRef({ count: 0, firstAt: 0 }); useEffect(() => { try { const params = new URLSearchParams((typeof window !== 'undefined' && window.location && window.location.search) || ''); if (params.get('rmo_debug') === '1' || params.get('op_debug') === '1') setDebugEnabled(true); } catch (e) { /* ignore */ } }, []); useEffect(() => { try { console.log('[RateMyOffers] runtime', { isMultiplayer: Boolean(isMultiplayer), userId: user?.id ?? null, savers: { pushToSharedArray: typeof pushToSharedArray === 'function', patchSharedData: typeof patchSharedData === 'function', setSharedData: typeof setSharedData === 'function', setData: typeof setData === 'function', }, sharedKeys: sharedData && typeof sharedData === 'object' ? Object.keys(sharedData || {}) : [], dataKeys: data && typeof data === 'object' ? Object.keys(data || {}) : [], submissions: (submissions || []).length, }); } catch (e) { /* ignore */ } // run once // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const onTitleTap = () => { const now = Date.now(); const t = tapsRef.current; if (now - t.firstAt > 3000) { t.count = 1; t.firstAt = now; } else { t.count += 1; } if (t.count >= 5) { t.count = 0; setDebugEnabled((v) => !v); } }; const runDebugProbe = async () => { const probe = { id: 'probe-' + Date.now(), company: '__PROBE__', role: 'Diagnostic', city: 'Nowhere', year: 'Probe', industry: 'Other', payAmount: 0, payType: 'hourly', housing: 'none', housingStipend: 0, relocation: false, signingBonus: 0, notes: 'Diagnostic probe — safe to delete.', createdAt: Date.now(), _timestamp: Date.now(), _user: { id: user?.id || 'anon', displayName: 'Probe' }, _isProbe: true, }; try { const existing = getSubmissions(isMultiplayer ? (sharedRef.current ?? sharedData ?? {}) : (dataRef.current ?? data ?? {})); const updated = [probe, ...(existing || []).filter((s) => s?.id !== probe.id)]; let method = ''; if (isMultiplayer) { if (typeof pushToSharedArray === 'function') { await Promise.resolve(pushToSharedArray('submissions', probe)); method = 'pushToSharedArray'; } else if (typeof patchSharedData === 'function') { await Promise.resolve(patchSharedData({ submissions: updated })); method = 'patchSharedData'; } else if (typeof setSharedData === 'function') { await Promise.resolve(setSharedData({ ...(sharedRef.current ?? sharedData ?? {}), submissions: updated, })); method = 'setSharedData'; } else { throw new Error('No shared saver'); } } else if (typeof setData === 'function') { await Promise.resolve(setData({ ...(dataRef.current ?? data ?? {}), submissions: updated, })); method = 'setData'; } else { throw new Error('No saver'); } setDebugProbe({ ok: true, method, at: Date.now() }); } catch (e) { setDebugProbe({ ok: false, error: e?.message || String(e), at: Date.now() }); } }; // ---------------- HELPERS ---------------- const formatPay = (amount, type) => { const n = Number(amount); if (!Number.isFinite(n) || n <= 0) return '—'; if (type === 'hourly') return `$${n.toFixed(0)}/hr`; if (type === 'monthly') return `$${n.toLocaleString()}/mo`; return `$${n.toLocaleString()} total`; }; const formatRelative = (ts) => { if (!ts) return ''; const diff = Date.now() - ts; const m = Math.floor(diff / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); return `${d}d ago`; }; const initials = (name) => String(name || '?').trim().split(/\s+/).map((p) => p[0] || '').join('').slice(0, 2).toUpperCase() || '?'; const detailSubmission = useMemo( () => (detailId ? (allSubmissions || []).find((s) => s.id === detailId) : null), [detailId, allSubmissions] ); // ---------------- RENDER ---------------- return (

{/* Debug overlay (off by default; enable with ?rmo_debug=1 OR by tapping the title 5x) */} {debugEnabled && (

Rate My Offers debug

isMultiplayer: {String(Boolean(isMultiplayer))}

user.id: {String(user?.id ?? null)}

pushToSharedArray: {String(typeof pushToSharedArray === 'function')}

patchSharedData: {String(typeof patchSharedData === 'function')}

setSharedData: {String(typeof setSharedData === 'function')}

setData: {String(typeof setData === 'function')}

persisted: {(submissions || []).length} · optimistic: {(optimistic || []).length}

shared keys: {(sharedData && typeof sharedData === 'object') ? Object.keys(sharedData || {}).join(', ') || '(none)' : '(null)'}

data keys: {(data && typeof data === 'object') ? Object.keys(data || {}).join(', ') || '(none)' : '(null)'}

{debugProbe ? (

{debugProbe.ok ? `OK via ${debugProbe.method}` : `FAIL: ${debugProbe.error}`}

) : null}

)} {/* Confetti */} {confetti && ( )} {/* Header */}

Rate My Offers

Internship pay transparency — by interns, for interns.

{typeof share === 'function' && ( )}

{/* Stats */}

{stats.total}

Offers shared

${stats.avgHourly.toFixed(0)}/hr

Avg hourly equivalent

{stats.topCompany}

{stats.topCompanyCount > 1 ? `${stats.topCompanyCount} offers` : 'Most submissions'}

{/* Filters */}

setSearch(e.target.value)} placeholder="Search company, role, city…" style={styles.searchInput} aria-label="Search offers" />

{/* List / empty state */}

{(visibleSubmissions || []).length === 0 ? (

{(allSubmissions || []).length === 0 ? ( <>

✨

No offers yet

Be the first intern to share. Your data helps everyone negotiate better.

) : ( <>

🔍

No matches

Try a different search or industry filter.

)}

) : (

{(visibleSubmissions || []).map((s) => (

setDetailId(s.id)} onKeyDown={(e) => { if (e.key === 'Enter') setDetailId(s.id); }} tabIndex={0} role="button" aria-label={`Open offer details for ${s.company}`} >

{initials(s.company)}

{s.company}

{s.role}

📍 {s.city} · 📅 {s.year} {s.industry ? (<>·{s.industry}) : null}

{formatPay(s.payAmount, s.payType)}

{s.housing === 'included' && 🏠 Housing included} {s.housing === 'stipend' && 🏠 Housing stipend ${(s.housingStipend || 0).toLocaleString()}} {s.relocation && ✈️ Relocation} {Number(s.signingBonus) > 0 && 💰 ${Number(s.signingBonus).toLocaleString()} signing bonus} {!s.housing && !s.relocation && !Number(s.signingBonus) ? null : null}

{s.notes ? (

{(s.notes || []).length > 220 ? (s.notes || []).slice(0, 220) + '…' : s.notes}

) : null}

shared {formatRelative(s._timestamp)} View details →

))}

)}

{/* Submit modal */} {showSubmit && (

!isSubmitting && setShowSubmit(false)}>

e.stopPropagation()} >

Submit your offer

Help future interns. Your name stays attached but you can keep details vague if you want.

{/* Company section */}

The company

updateForm({ company: e.target.value })} placeholder="e.g. Stripe" style={styles.input} autoFocus /> updateForm({ role: e.target.value })} placeholder="e.g. Software Engineering Intern" style={styles.input} />

updateForm({ city: e.target.value })} placeholder="City, ST" style={styles.input} /> updateForm({ year: e.target.value })} placeholder="Summer 2026" style={styles.input} />

{/* Pay section */}

The pay

0))} > updateForm({ payAmount: e.target.value })} placeholder="e.g. 50" style={styles.input} />

updateForm({ signingBonus: e.target.value })} placeholder="e.g. 5000" style={styles.input} />

{/* Perks section */}

Housing & perks

{form.housing === 'stipend' && ( updateForm({ housingStipend: e.target.value })} placeholder="e.g. 2000" style={styles.input} /> )} updateForm({ relocation: e.target.checked })} /> Relocation / travel covered

{/* Notes section */}

What to expect

updateForm({ notes: e.target.value })}
                    placeholder="Honest notes about the role and comp…"
                    style={{ ...styles.input, minHeight: 96, resize: 'vertical' }}
                  />
                </FormField>
              </div>

{submitError ? <div style={styles.error}>{submitError}</div> : null}
            </div>

<div style={styles.modalFooter}>
              <button
                type="button"
                onClick={() => setShowSubmit(false)}
                style={styles.secondaryBtn}
                disabled={isSubmitting}
              >
                Cancel
              </button>
              <button type="submit" style={styles.primaryBtn} disabled={isSubmitting}>
                {isSubmitting ? 'Saving…' : 'Submit offer'}
              </button>
            </div>
          </form>
        </div>
      )}

{/* Detail modal */}
      {detailSubmission && (
        <div style={styles.modalScrim} onClick={() => setDetailId(null)}>
          <div
            style={isDesktop ? { ...styles.modalSheet, ...styles.modalSheetDesktop } : styles.modalSheet}
            onClick={(e) => e.stopPropagation()}
          >
            <div style={styles.modalHeader}>
              <div>
                <div style={styles.modalTitle}>{detailSubmission.company}</div>
                <div style={styles.modalSubtitle}>{detailSubmission.role}</div>
              </div>
              <button type="button" onClick={() => setDetailId(null)} style={styles.iconBtn} aria-label="Close">×</button>
            </div>
            <div style={styles.modalBody}>
              <div style={styles.detailHero}>
                <div style={styles.detailPay}>{formatPay(detailSubmission.payAmount, detailSubmission.payType)}</div>
                <div style={styles.detailMeta}>
                  📍 {detailSubmission.city} · 📅 {detailSubmission.year}{detailSubmission.industry ? ` · ${detailSubmission.industry}` : ''}
                </div>
              </div>

<div style={styles.detailGrid}>
                <DetailItem label="Pay (hourly equiv.)" value={`$${hourlyEquivalent(detailSubmission).toFixed(0)}/hr`} />
                <DetailItem label="Housing" value={
                  detailSubmission.housing === 'included' ? 'Included' :
                  detailSubmission.housing === 'stipend' ? `Stipend: $${(detailSubmission.housingStipend || 0).toLocaleString()}/mo` :
                  'Not provided'
                } />
                <DetailItem label="Relocation" value={detailSubmission.relocation ? 'Covered' : 'Not covered'} />
                <DetailItem label="Signing bonus" value={Number(detailSubmission.signingBonus) > 0 ? `$${Number(detailSubmission.signingBonus).toLocaleString()}` : 'None'} />
              </div>

<div style={styles.formSection}>
                <div style={styles.sectionTitle}>What to expect</div>
                <p style={styles.detailNotes}>{detailSubmission.notes || '(no notes)'}</p>
              </div>

<div style={styles.detailFooter}>
                Submitted {formatRelative(detailSubmission._timestamp)} by {detailSubmission._user?.displayName || 'Anonymous'}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Floating add button on mobile */}
      {!isDesktop && (
        <button type="button" onClick={() => setShowSubmit(true)} style={styles.fab} aria-label="Submit your offer">+</button>
      )}

{/* Confetti keyframes */}
      <style>{`
        @keyframes rmoFall {
          0%   { transform: translate3d(0, -120%, 0) rotate(0deg); opacity: 1; }
          100% { transform: translate3d(0, 120vh,  0) rotate(720deg); opacity: 0; }
        }
        .rmo-card:hover { transform: translateY(-2px); }
      `}</style>
    </div>
  );
}

function FormField({ label, required, helper, invalid, children }) {
  return (
    <label style={{ display: 'block', marginBottom: 12 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: invalid ? '#DC2626' : '#374151', marginBottom: 4 }}>
        {label}{required ? <span style={{ color: '#DC2626', marginLeft: 2 }}>*</span> : null}
      </div>
      {children}
      {helper ? <div style={{ fontSize: 12, color: '#6B7280', marginTop: 4 }}>{helper}</div> : null}
    </label>
  );
}

function DetailItem({ label, value }) {
  return (
    <div style={{ background: '#F9FAFB', borderRadius: 8, padding: 12, border: '1px solid #E5E7EB' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: '#6B7280', textTransform: 'uppercase', letterSpacing: 0.4 }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 600, color: '#111827', marginTop: 4 }}>{value}</div>
    </div>
  );
}

const styles = {
  app: {
    minHeight: '100vh',
    background: 'linear-gradient(180deg, #F5F3FF 0%, #F9FAFB 220px)',
    color: '#111827',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    padding: '0 0 80px',
  },
  header: {
    padding: '24px 16px 16px',
    maxWidth: 880,
    margin: '0 auto',
  },
  headerInner: {
    display: 'flex',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    gap: 12,
    flexWrap: 'wrap',
  },
  title: {
    fontSize: 32,
    fontWeight: 800,
    margin: 0,
    background: 'linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    cursor: 'pointer',
    userSelect: 'none',
  },
  subtitle: { color: '#4B5563', margin: '6px 0 0', fontSize: 14 },
  headerActions: { display: 'flex', gap: 8, alignItems: 'center' },
  primaryBtn: {
    background: 'linear-gradient(90deg, #6366F1, #8B5CF6)',
    color: '#fff',
    border: 0,
    padding: '10px 16px',
    borderRadius: 999,
    fontWeight: 700,
    cursor: 'pointer',
    fontSize: 14,
    boxShadow: '0 6px 20px rgba(99,102,241,0.30)',
  },
  secondaryBtn: {
    background: '#F3F4F6',
    color: '#374151',
    border: 0,
    padding: '10px 16px',
    borderRadius: 999,
    fontWeight: 700,
    cursor: 'pointer',
    fontSize: 14,
  },
  iconBtn: {
    background: '#F3F4F6',
    color: '#374151',
    border: 0,
    padding: '6px 12px',
    borderRadius: 999,
    cursor: 'pointer',
    fontSize: 14,
    fontWeight: 600,
  },
  statsRow: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
    gap: 8,
    padding: '0 16px',
    maxWidth: 880,
    margin: '0 auto 16px',
  },
  statCard: {
    background: '#fff',
    border: '1px solid #E5E7EB',
    borderRadius: 12,
    padding: 14,
    textAlign: 'center',
    boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
  },
  statValue: { fontSize: 26, fontWeight: 800, color: '#111827' },
  statUnit: { fontSize: 13, fontWeight: 600, color: '#6B7280', marginLeft: 2 },
  statLabel: { fontSize: 12, color: '#6B7280', marginTop: 4 },
  filters: {
    display: 'grid',
    gridTemplateColumns: '2fr 1fr 1fr',
    gap: 8,
    padding: '0 16px',
    maxWidth: 880,
    margin: '0 auto 16px',
  },
  searchInput: {
    width: '100%',
    padding: '10px 14px',
    borderRadius: 10,
    border: '1px solid #E5E7EB',
    fontSize: 14,
    background: '#fff',
    outline: 'none',
    boxSizing: 'border-box',
  },
  select: {
    padding: '10px 12px',
    borderRadius: 10,
    border: '1px solid #E5E7EB',
    fontSize: 14,
    background: '#fff',
    outline: 'none',
  },
  main: { maxWidth: 880, margin: '0 auto', padding: '0 16px' },
  list: { display: 'flex', flexDirection: 'column', gap: 12 },
  empty: {
    textAlign: 'center',
    padding: '64px 24px',
    color: '#6B7280',
    background: '#fff',
    borderRadius: 16,
    border: '1px solid #E5E7EB',
  },
  emptyTitle: { fontSize: 18, fontWeight: 700, color: '#111827' },
  emptyBody: { fontSize: 14, marginTop: 4, maxWidth: 360, marginLeft: 'auto', marginRight: 'auto' },
  card: {
    background: '#fff',
    border: '1px solid #E5E7EB',
    borderRadius: 14,
    padding: 16,
    cursor: 'pointer',
    transition: 'transform 0.12s ease, box-shadow 0.12s ease',
    boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
    outline: 'none',
  },
  cardTop: { display: 'flex', alignItems: 'flex-start', gap: 12 },
  cardLogo: {
    width: 40, height: 40, borderRadius: 10,
    background: 'linear-gradient(135deg, #C7D2FE, #DDD6FE)',
    color: '#4338CA',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 800, fontSize: 14, flexShrink: 0,
  },
  cardCompany: { fontSize: 16, fontWeight: 700, color: '#111827' },
  cardRole: { fontSize: 14, color: '#374151', marginTop: 2 },
  cardMeta: { fontSize: 12, color: '#6B7280', marginTop: 6, display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 4 },
  dot: { color: '#D1D5DB', margin: '0 2px' },
  payBadge: {
    background: 'linear-gradient(135deg, #10B981, #059669)',
    color: '#fff',
    padding: '6px 12px',
    borderRadius: 999,
    fontWeight: 800,
    fontSize: 14,
    flexShrink: 0,
    boxShadow: '0 4px 12px rgba(16,185,129,0.25)',
  },
  tagRow: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 12 },
  tag: {
    background: '#F3F4F6',
    color: '#374151',
    padding: '4px 10px',
    borderRadius: 999,
    fontSize: 12,
    fontWeight: 600,
  },
  cardNotes: {
    margin: '12px 0 0',
    color: '#374151',
    fontSize: 14,
    lineHeight: 1.5,
  },
  cardFooter: {
    marginTop: 12,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cardAuthor: { fontSize: 12, color: '#6B7280' },
  cardOpen: { fontSize: 12, fontWeight: 700, color: '#6366F1' },

// Modal
  modalScrim: {
    position: 'fixed', inset: 0,
    background: 'rgba(17, 24, 39, 0.55)',
    display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    zIndex: 1000,
    padding: 0,
  },
  modalSheet: {
    background: '#fff',
    width: '100%',
    maxHeight: '92vh',
    borderRadius: '20px 20px 0 0',
    display: 'flex', flexDirection: 'column',
    boxShadow: '0 -10px 40px rgba(0,0,0,0.2)',
    animation: 'slideUp 0.2s ease',
  },
  modalSheetDesktop: {
    width: 600,
    maxWidth: '94vw',
    maxHeight: '88vh',
    margin: 'auto',
    borderRadius: 16,
    boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
  },
  modalHeader: {
    padding: '16px 20px',
    borderBottom: '1px solid #E5E7EB',
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12,
  },
  modalTitle: { fontSize: 18, fontWeight: 800, color: '#111827' },
  modalSubtitle: { fontSize: 13, color: '#6B7280', marginTop: 4 },
  modalBody: { padding: '16px 20px', overflowY: 'auto', flex: 1 },
  modalFooter: {
    borderTop: '1px solid #E5E7EB',
    padding: '12px 20px',
    display: 'flex', justifyContent: 'flex-end', gap: 8,
  },
  formSection: { marginBottom: 20 },
  sectionTitle: {
    fontSize: 11,
    fontWeight: 700,
    color: '#6B7280',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
    marginBottom: 10,
  },
  input: {
    width: '100%',
    padding: '10px 12px',
    borderRadius: 10,
    border: '1px solid #E5E7EB',
    fontSize: 14,
    fontFamily: 'inherit',
    background: '#fff',
    color: '#111827',
    outline: 'none',
    boxSizing: 'border-box',
  },
  row2: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 },
  checkboxRow: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: '#374151', cursor: 'pointer' },
  error: {
    background: '#FEF2F2',
    border: '1px solid #FECACA',
    color: '#B91C1C',
    padding: '10px 12px',
    borderRadius: 10,
    fontSize: 13,
    marginTop: 8,
  },

// Detail
  detailHero: {
    background: 'linear-gradient(135deg, #EEF2FF, #FCE7F3)',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    textAlign: 'center',
  },
  detailPay: {
    fontSize: 32,
    fontWeight: 900,
    background: 'linear-gradient(90deg, #10B981, #059669)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
  },
  detailMeta: { fontSize: 13, color: '#4B5563', marginTop: 4 },
  detailGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
    gap: 8,
    marginBottom: 20,
  },
  detailNotes: {
    margin: 0,
    fontSize: 14,
    lineHeight: 1.6,
    color: '#1F2937',
    whiteSpace: 'pre-wrap',
  },
  detailFooter: { fontSize: 12, color: '#6B7280', marginTop: 16, textAlign: 'center' },

// FAB
  fab: {
    position: 'fixed', right: 16, bottom: 16,
    width: 56, height: 56, borderRadius: 999,
    background: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
    color: '#fff', fontSize: 28, border: 0,
    cursor: 'pointer',
    boxShadow: '0 12px 32px rgba(99,102,241,0.4)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    zIndex: 100,
  },

// Debug
  debug: {
    position: 'fixed', top: 8, right: 8, zIndex: 99999,
    background: 'rgba(17, 24, 39, 0.94)',
    color: '#F9FAFB',
    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
    fontSize: 11, lineHeight: 1.4, padding: 10, borderRadius: 8,
    maxWidth: 320, boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
  },
  debugBtn: {
    marginTop: 8,
    padding: '6px 8px',
    background: '#6366F1',
    color: '#fff',
    border: 0,
    borderRadius: 6,
    cursor: 'pointer',
    width: '100%',
    fontSize: 11,
    fontWeight: 700,
  },

// Confetti
  confettiWrap: {
    position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 999,
    overflow: 'hidden',
  },
  confettiPiece: {
    position: 'absolute',
    top: 0,
    width: 8, height: 14,
    borderRadius: 2,
    animation: 'rmoFall 1.6s linear forwards',
  },
};</article></body></html>