const AuthLayout = ({ children, title, subtitle, side }) => (
  <div style={{ minHeight:'100vh', display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', background:'var(--bg)' }}>
    <style>{`
      @media (max-width: 880px){ .auth-side { display:none !important; } .auth-main { grid-column: 1 / -1 !important; padding: 32px 20px !important; } }
    `}</style>
    <div className="auth-main" style={{ display:'flex', flexDirection:'column', padding: '48px 56px', minHeight:'100vh' }}>
      <Logo />
      <div style={{ flex: 1, display:'flex', flexDirection:'column', justifyContent:'center', maxWidth: 420, width:'100%', margin: '0 auto' }}>
        <div style={{ marginBottom: 28 }}>
          <h1 style={{ margin:'0 0 8px', fontSize: 30, fontWeight: 600, letterSpacing:'-.02em' }}>{title}</h1>
          {subtitle && <p style={{ margin: 0, color:'var(--fg-muted)', fontSize: 15, lineHeight: 1.5 }}>{subtitle}</p>}
        </div>
        {children}
      </div>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 10 }}>
        <InstallAppButton/>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', textAlign:'center' }}>
          © 2026 Behaviour Tracker · Сделано в <a href="https://pixenth.ru" target="_blank" rel="noopener noreferrer" style={{ color:'var(--fg-muted)', textDecoration:'none' }}>Pixenth Studio</a>
        </div>
      </div>
    </div>
    <div className="auth-side" style={{
      background: 'linear-gradient(160deg, #FDF5F0 0%, #F4E7DB 100%)',
      position: 'relative', overflow: 'hidden', borderLeft: '1px solid var(--border)'
    }}>
      {side}
    </div>
  </div>
);

Object.assign(window, { AuthLayout });