:root { --primary: #6200ee; }
html, body { height: 100%; width:100%; max-width:100%; overflow-x:hidden; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #f8f7ff, #eef2ff); }
.wrap { min-height: 100%; display:flex; align-items:center; justify-content:center; padding: 40px 16px; }
.card { width: 100%; max-width: 880px; background:#fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.12); overflow:hidden; display:grid; grid-template-columns: 1.2fr 1fr; }
.hero { padding: 40px; }
.hero h1 { margin: 0; font-size: 38px; letter-spacing: -0.02em; color:#222; }
.hero p { color:#555; margin: 14px 0 0; font-size: 16px; }
.cta { margin-top: 24px; display:flex; gap:12px; align-items:center; }
.btn-primary { background: var(--primary); color:#fff; border:none; border-radius: 12px; padding: 12px 18px; cursor:pointer; font-weight: 700; }
.btn-secondary { background: #fff; color:#333; border:1px solid #e0e0e0; border-radius: 12px; padding: 12px 18px; cursor:pointer; font-weight: 600; }
.side { background: radial-gradient(1200px 600px at 70% -20%, rgba(98,0,238,0.20), transparent), linear-gradient(180deg, #ede7f6, #e3f2fd); display:flex; align-items:center; justify-content:center; }
.side img { width: 72%; max-width: 320px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
footer { position: fixed; bottom:10px; left:0; right:0; text-align:center; color:#888; font-size:12px; }

/* Login overlay and form */
/* Default: center vertically */
.login-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 20px)) 16px 18px; background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); z-index: 10000; overflow: auto; -webkit-overflow-scrolling: touch; }
.login-card { 
    width: 420px; max-width: 92vw; 
    /* margin-top is applied only for mobile-top via .login-overlay.top */
    background: #ffffff; border-radius: 14px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    overflow: auto; max-height: calc(100vh - 40px); 
    display: flex; flex-direction: column; 
}
/* top-aligned variant used on mobile platforms */
.login-overlay.top { align-items: flex-start; }
.login-overlay.top .login-card { margin-top: 25px; }

.login-header { padding: 18px 22px; background: #6200ee; color: #fff; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.login-title { font-size: 18px; font-weight: 600; }
.login-body { padding: 22px; flex: 1 1 auto; overflow: auto; }
.toggle-row { display: flex; gap: 8px; background: #f3f3f7; border-radius: 10px; padding: 6px; margin-bottom: 14px; }
.toggle-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 600; color: #616161; }
.toggle-btn.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); color: #222; }
.field { display: flex; flex-direction: column; margin: 10px 0; }
.field label { font-size: 12px; color: #555; margin-bottom: 6px; }
.field input { padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 8px; outline: none; font-size: 14px; }
.field input:focus { border-color: #6200ee; box-shadow: 0 0 0 3px rgba(98,0,238,0.1); }
.login-actions { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.login-actions { position: sticky; bottom: 0; background: linear-gradient( rgba(255,255,255,0.96), rgba(255,255,255,0.92) ); padding-top:8px; padding-bottom:8px; }

/* Keyboard-open floating actions */
.login-overlay.keyboard-open { align-items: flex-start; padding-top: 10px; }
.login-overlay.keyboard-open .login-card { max-height: calc(100vh - 170px); }
.login-overlay.keyboard-open .login-actions {
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,12px) + 12px);
  width: min(420px, 92vw);
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  background: linear-gradient( rgba(255,255,255,0.98), rgba(255,255,255,0.95) );
  z-index: 12000;
}