/* auth module – login / signup / otp */

/* —— Login hero + car —— */
#login{background:#fff}
.login-hero{
  height:220px;
  background:radial-gradient(120% 100% at 70% 0,#1a3a66,#050c18 70%);
  position:relative;
  overflow:visible;
  color:#fff;
}
.login-brand{
  position:absolute;
  left:24px;
  top:56px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  letter-spacing:.2em;
  font-size:13px;
  z-index:2;
}
.login-brand .i{
  width:14px;
  height:14px;
  color:#5da0ff;
  fill:#5da0ff;
  stroke:#5da0ff;
}
.login-car{
  position:absolute;
  right:-28px;
  bottom:-36px;
  width:268px;
  z-index:3;
  pointer-events:none;
  animation:loginCarIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.login-car:before{
  content:"";
  position:absolute;
  left:12%;
  right:8%;
  bottom:8%;
  height:28%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);
  z-index:0;
}
.login-car img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:lighten;
}
@keyframes loginCarIn{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:none}
}

.login-panel{
  background:#fff;
  border-radius:0;
  margin-top:-40px;
  position:relative;
  padding:56px 22px calc(28px + env(safe-area-inset-bottom,0px));
  min-height:calc(100dvh - 180px);
  z-index:1;
}
.login-title{font-size:22px}
.login-sub{margin:6px 0 20px;font-size:13.5px}
.login-forgot{text-align:right;font-size:12.5px;margin:-2px 0 16px}
.login-or{text-align:center;margin:20px 0 14px;font-size:12px}
.login-soc{gap:10px}
.login-switch{text-align:center;margin-top:60px;font-size:13px}
.login-switch .b{font-weight:600;cursor:pointer}

/* —— Shared form —— */
.fld{background:#fff;border-radius:16px;height:54px;display:flex;align-items:center;gap:12px;padding:0 16px;margin-bottom:12px;box-shadow:0 2px 8px #0000000a;color:#9aa3b0}
.fld input{border:0;outline:0;font:500 14px inherit;color:var(--ink);flex:1;background:none;min-width:0}
.soc{flex:1;height:50px;background:#fff;border-radius:14px;box-shadow:0 2px 8px #0000000a;font-weight:700}
#signup .fld{background:var(--surf);box-shadow:none}
.otp{display:flex;gap:8px;margin-bottom:12px}
.otp input{flex:1;min-width:0;height:60px;border-radius:14px;border:1.5px solid #e4e8ef;background:var(--surf);text-align:center;font:700 22px inherit;color:var(--ink);outline:0;transition:.2s}
.otp input:focus,.otp input.f{border-color:var(--blue);background:#fff}.otp input:focus{box-shadow:0 0 0 4px #1f6bff1f}
.shake{animation:sk .4s}@keyframes sk{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}