/* Modern login form style - keeps theme color #64bcf4 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
:root{ --main: #64bcf4; --dark: #22303a; --muted:#6b7280; }
*{ box-sizing: border-box; margin:0; padding:0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
body{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%); padding:2rem; }

.container{ width:100%; max-width:980px; background: linear-gradient(180deg, rgba(255,255,255,0.9), #ffffff); border-radius:14px; box-shadow: 0 10px 40px rgba(16,24,40,0.08); overflow:hidden; display:grid; grid-template-columns: 1fr 420px; }

/* Left - form area */
.forms{ padding:3.25rem 2.25rem; display:flex; align-items:center; justify-content:center; }
.form-content{ width:100%; max-width:520px; }
.title{ font-size:1.375rem; font-weight:700; color:var(--dark); margin-bottom:0.5rem; }
.form-content .input-box{ position:relative; margin:1rem 0; }
.form-content .input-box input{ width:100%; padding:14px 44px 14px 14px; border-radius:10px; border:1px solid #e7eef8; background:#fbfdff; transition:box-shadow .15s, border-color .15s; }
.form-content .input-box input:focus{ outline:none; border-color:var(--main); box-shadow: 0 6px 18px rgba(100,188,244,0.12); }
.form-content .input-box i{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.input-boxes .button{ margin-top:1.25rem; }
.input-boxes button{ width:100%; padding:12px; border-radius:10px; border:none; background:var(--main); color:white; font-weight:600; box-shadow: 0 8px 22px rgba(100,188,244,0.14); cursor:pointer; }
.input-boxes button:disabled{ opacity:.8; cursor:not-allowed; }
.alert-box{ display:none; margin-top:.5rem; }

/* Right - cover */
.cover{ background: linear-gradient(180deg, var(--main), #2ea0e8); color:white; padding:2.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.cover img{ width:100%; height:auto; max-height:160px; object-fit:contain; margin-bottom:1rem; }
.cover .text-1{ font-size:1.5rem; font-weight:700; margin-bottom:.25rem; }
.cover .text-2{ opacity:.95; font-size:0.95rem; max-width:260px; text-align:center; }

/* smaller screens: stack */
@media (max-width: 880px){
  .container{ grid-template-columns: 1fr; }
  .cover{ padding:1.5rem 1.25rem; }
  .forms{ padding:1.75rem; }
}

/* small helpers */
.lead { color:var(--muted); }
.muted { color:var(--muted); }
#togglePassword{ right:10px; }

/* visual tweaks to match existing classes */
.cover .text { display:flex; flex-direction:column; align-items:center; }
.cover .text a{ color: rgba(255,255,255,0.95); background:rgba(0,0,0,0.08); padding:.35rem .6rem; border-radius:8px; text-decoration:none; }

/* focus outline accessibility */
input:focus, button:focus, a:focus { outline: 3px solid rgba(100,188,244,0.18); outline-offset: 2px; }

/* hide old flip behaviour gracefully (keeps markup compatibility) */
#flip{ display:none; }