// Modal system — placeholder, to be expanded as needed
// Common modal shell: centered, backdrop, close on backdrop click
function Modal({ title, onClose, children, width = 560 }) {
  return (
    <div style={{
      position:'fixed', inset: 0, zIndex: 150,
      background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)',
      display:'flex', alignItems:'center', justifyContent:'center', padding: 20,
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: width, maxHeight: '90vh', overflow:'auto',
        background:'var(--bg-solid)', border:'1px solid var(--border)',
        borderRadius: 16, boxShadow:'var(--shadow-3)',
      }}>
        <header style={{
          padding: '14px 18px', borderBottom:'1px solid var(--divider)',
          display:'flex', alignItems:'center', justifyContent:'space-between',
        }}>
          <h3 style={{fontSize: 15, fontWeight: 600, margin: 0}}>{title}</h3>
          <button onClick={onClose} style={{
            background:'none', border:'none', fontSize: 16, cursor:'pointer', color:'var(--fg-muted)',
          }}>✕</button>
        </header>
        <div style={{padding: 18}}>{children}</div>
      </div>
    </div>
  );
}
window.Modal = Modal;