;(function () {
/* Card — white rounded surface with iOS shadow + Android elevation. */

const Card = ({ children, padding = { horizontal: 16, vertical: 14 }, style }) => (
  <div
    style={{
      backgroundColor: '#fff',
      borderRadius: '20px',
      /* Strengthened lg-modal shadow — opacity 0.08 → 0.16, offset 20 → 24,
         radius 24 → 28, elevation 8 → 14. Doubles the perceived weight so cards
         lift more clearly off the grey body bg. */
      boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
      paddingLeft: `${padding.horizontal}px`,
      paddingRight: `${padding.horizontal}px`,
      paddingTop: `${padding.vertical}px`,
      paddingBottom: `${padding.vertical}px`,
      ...style,
    }}
  >
    {children}
  </div>
);

Object.assign(window, { Card });
})();