/* =========================================================
   Hulahoot — sign in / create account
   ========================================================= */

.auth-body{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 420px at 82% -8%, #F3ECFE 0%, rgba(243,236,254,0) 65%),
    radial-gradient(760px 380px at 12% 104%, #EFE8FD 0%, rgba(239,232,253,0) 62%),
    #FFFFFF;
}

.auth-top{padding:20px 24px;display:flex;justify-content:center}
.auth-top .logo-txt{font-size:30px}

.auth-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:8px 24px 56px}

.auth-card{
  width:100%;max-width:452px;background:#fff;
  border:1px solid var(--line);border-radius:18px;
  padding:30px 30px 26px;
  box-shadow:0 10px 34px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04);
}
.auth-card h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.auth-sub{font-size:13.5px;color:var(--grey);margin-bottom:22px;line-height:1.5}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--grey-l);font-weight:500;margin-left:6px}
.control{position:relative;display:flex;align-items:center}
.control .at{
  position:absolute;left:14px;font-size:14.5px;color:var(--grey-l);font-weight:600;pointer-events:none;
}
.field input{
  width:100%;height:46px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14.5px;color:var(--ink);outline:0;
  transition:border-color .15s,box-shadow .15s;
}
.field input.has-at{padding-left:30px}
.field input::placeholder{color:#A8ADB6}
.field input:focus{border-color:#C7B0F7;box-shadow:0 0 0 3.5px rgba(124,58,237,.13)}
.field input[aria-invalid="true"]{border-color:#EF4444;box-shadow:0 0 0 3.5px rgba(239,68,68,.12)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.peek{
  position:absolute;right:6px;width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;color:var(--grey);
}
.peek:hover{background:#F4F4F7}
.peek svg{width:18px;height:18px}

.auth-note{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--purple-l);border:1px solid #E6DBFC;border-radius:10px;
  padding:11px 12px;margin:4px 0 16px;
  font-size:11.8px;line-height:1.5;color:#4C2F86;
}
.auth-note b{font-weight:700}

.auth-msg{
  display:none;align-items:center;gap:8px;
  border-radius:10px;padding:10px 12px;margin-bottom:14px;
  font-size:12.8px;font-weight:500;line-height:1.45;
}
.auth-msg.show{display:flex}
.auth-msg.err{background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}
.auth-msg.ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#047857}

.auth-card .btn{height:46px;font-size:15px;border-radius:11px}

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--ink-2)}
.check input{width:16px;height:16px;accent-color:var(--purple);height:16px}
.link{font-size:12.8px;font-weight:600;color:var(--purple)}
.link:hover{text-decoration:underline}

.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);text-align:center;font-size:13px;color:var(--grey)}
.auth-alt a{font-weight:700;color:var(--purple)}
.auth-alt a:hover{text-decoration:underline}

.auth-foot{padding:0 24px 26px;text-align:center;font-size:11.5px;color:var(--grey-l)}
.auth-foot a{color:var(--grey)}
.auth-foot a:hover{text-decoration:underline}

@media (max-width:520px){
  .auth-card{padding:24px 20px 22px;border-radius:14px}
  .two{grid-template-columns:1fr}
}