.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}

.auth-visual{
  position:relative;
  background:linear-gradient(160deg,var(--green-900),var(--teal-600));
  color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.auth-visual::after{
  content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;
  border-radius:999px;background:rgba(255,255,255,.06);
}
.auth-visual .logo{color:#fff}
.auth-visual-copy{max-width:380px;position:relative;z-index:1}
.auth-visual-copy h2{color:#fff;font-size:clamp(26px,3vw,34px);margin-bottom:14px}
.auth-visual-copy p{color:#cfe9dc;font-size:15px}
.auth-visual-img{
  border-radius:var(--radius-l);overflow:hidden;position:relative;z-index:1;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.auth-visual-img img{width:100%;height:260px;object-fit:cover}
.auth-visual-stats{display:flex;gap:28px;position:relative;z-index:1}
.auth-visual-stats div strong{display:block;font-size:22px;font-family:var(--font-head)}
.auth-visual-stats div span{font-size:12.5px;color:#bfe0cf}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:32px}
.auth-box{width:100%;max-width:380px}
.auth-box .logo{display:none}
.auth-box h1{font-size:26px;margin-bottom:8px}
.auth-box>p{font-size:14.5px;margin-bottom:28px}

.auth-error{
  background:var(--red-100);color:var(--red-600);font-size:13.5px;font-weight:600;
  padding:11px 14px;border-radius:10px;margin-bottom:18px;
}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:7px}
.field input{
  width:100%;padding:12px 14px;border:1px solid var(--line-200);border-radius:10px;
  font-size:14.5px;color:var(--ink-900);background:#fff;
}
.field input:focus{border-color:var(--green-700)}
.field-pass{position:relative}
.field-pass input{padding-right:44px}
.pass-toggle{
  position:absolute;right:6px;top:34px;width:32px;height:32px;border:none;background:none;
  color:var(--muted-500);display:flex;align-items:center;justify-content:center;
}
.pass-toggle svg{width:18px;height:18px}

.field-row{display:flex;gap:12px}
.field-row .field{flex:1}

.form-meta{display:flex;align-items:center;justify-content:space-between;margin:2px 0 22px;font-size:13.5px}
.check-row{display:flex;align-items:center;gap:8px;color:var(--ink-700)}
.check-row input{accent-color:var(--green-700)}
.form-meta a{color:var(--green-700);font-weight:600}

.role-toggle{display:none;gap:10px;margin-bottom:22px}
.role-btn{
  flex:1;padding:11px;border-radius:10px;border:1px solid var(--line-200);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink-700);
}
.role-btn.is-active{background:var(--green-700);border-color:var(--green-700);color:#fff}

.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted-500);font-size:12.5px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-200)}

.social-row{display:flex;gap:12px}
.social-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border:1px solid var(--line-200);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-700);
}
.social-btn:hover{background:var(--mint-50)}
.social-btn svg{width:16px;height:16px}

.auth-foot{margin-top:26px;text-align:center;font-size:14px;color:var(--muted-500)}
.auth-foot a{color:var(--green-700);font-weight:600}

@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-box .logo{display:flex;margin-bottom:28px}
}