/* Minimal clean style inspired by the reference image */
:root{
  --bg:#f7f7f8;
  --bg-grad: radial-gradient(1200px 600px at 10% -10%, #e6f3ff 0%, transparent 60%), radial-gradient(800px 400px at 110% 10%, #fbe9e7 0%, transparent 60%);
  --card:#ffffff;
  --text:#1b1f24;
  --muted:#6b7280;
  --primary:#4f8dfd;
  --primary-600:#3b7df9;
  --danger:#d12b2b;
  --success:#059669;
  --border:#e5e7eb;
  --shadow: 0 12px 34px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); background-image: var(--bg-grad);
}
.auth-wrapper{min-height:100vh; display:grid; place-items:center; padding:24px}
.auth-card{
  width:min(980px,100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px; box-shadow: var(--shadow);
  display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden
}
.auth-illustration{position:relative; background:#f8fafc; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-illustration::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.2));}
.auth-illustration img{max-width:92%; height:auto; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.08)}
.auth-form{padding:48px; display:flex; flex-direction:column; gap:10px}
.auth-form h1{margin:0 0 6px; font-size:32px}
.auth-subtitle{margin:0 0 10px; color:var(--muted)}
.auth-logo{display:block; text-align:center; margin:0 0 10px}
.auth-logo img{height:64px; width:auto; display:block; margin:0 auto; object-fit:contain}
.form-group{margin:16px 0}
.form-group label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
.form-group input{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; outline:none; background:#fff}
.form-group input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,141,253,.15)}
.form-helper{font-size:12px; color:var(--muted); margin-top:6px}
.password-field{position:relative; display:flex; align-items:center}
.password-field input{padding-right:44px}
.toggle-password{position:absolute; right:8px; top:50%; transform:translateY(-50%); height:34px; width:34px; border:none; background:transparent; color:var(--muted); border-radius:6px; display:grid; place-items:center; cursor:pointer}
.toggle-password:hover{background:#f1f5f9; color:#374151}
.toggle-password:focus{outline:none; box-shadow:0 0 0 3px rgba(79,141,253,.15)}
.icon-eye{pointer-events:none}
.form-row{display:flex; align-items:center; justify-content:space-between; margin:12px 0 18px}
.checkbox{font-size:14px; color:var(--muted)}
.checkbox input{margin-right:8px}
.btn{display:inline-block; border:none; padding:12px 16px; border-radius:10px; cursor:pointer; font-weight:700; transition: box-shadow .2s ease, transform .02s ease}
.btn:focus-visible{outline: 3px solid rgba(79,141,253,.25); outline-offset: 2px}
.btn:active{transform: translateY(0.5px)}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-600)); color:#fff; box-shadow: 0 10px 20px rgba(79,141,253,.25)}
.btn-primary:hover{filter: brightness(1.03)}
.btn-block{width:100%}
.error{color:var(--danger); font-size:14px; margin-top:10px}
.success{color:var(--success); font-size:14px; margin-top:10px}
.muted{color:var(--muted); text-decoration:none}
.muted:hover{text-decoration:underline}
.switch{text-align:center; margin-top:16px}
.auth-foot{font-size:12px; color:var(--muted); text-align:center; margin-top:16px}

@media (max-width:900px){
  .auth-card{grid-template-columns:1fr}
  .auth-illustration{display:none}
}

@media (max-width:500px){
  .auth-wrapper{padding:14px}
  .auth-form{padding:22px}
  .auth-form h1{font-size:26px}
}