/* ---------- Auth screens ---------- */

.auth-shell{ background: var(--bg); }

.auth-blob{
  position: absolute;
  border-radius: 9999px;
  background: rgba(255,255,255,0.12);
  filter: blur(2px);
}
.auth-blob-1{ width: 220px; height: 220px; top: -60px; right: -60px; }
.auth-blob-2{ width: 160px; height: 160px; bottom: -40px; left: -40px; background: rgba(255,255,255,0.08); }

.form-label{
  display:block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.form-input{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid #C6CBD3; /* visible against surface-2 — var(--border) alone is too close to it in light mode */
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.dark .form-input{ border-color: var(--border); }
.form-input::placeholder{ color: var(--text-muted); }
.form-input:focus{
  outline: none;
  border-color: #1877F2;
  box-shadow: 0 0 0 3px rgba(24,119,242,0.15);
}

.form-input-icon-wrap{ position: relative; }
.form-input-icon-wrap .form-input{ padding-left: 40px; }
.form-input-icon-wrap i{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}

.btn-primary{
  width: 100%;
  background: #1877F2;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  padding: 11px 16px;
  transition: background .15s ease;
}
.btn-primary:hover{ background: #0E5FC7; }

.auth-divider{
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
  margin: 20px 0;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--border);
}

/* OTP input group */
.otp-group{ display:flex; gap:10px; }
.otp-box{
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid #C6CBD3;
  background: var(--surface-2);
  color: var(--text);
}
html.dark .otp-box{ border-color: var(--border); }
.otp-box:focus{
  outline:none;
  border-color:#1877F2;
  box-shadow: 0 0 0 3px rgba(24,119,242,0.15);
}

.alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  margin-bottom: 20px;
}
.alert-error{
  background: rgba(224,36,36,0.08);
  color:#E02424;
  border:1px solid rgba(224,36,36,0.25);
}
.alert-success{
  background: var(--fb-greenSoft, #EAF7E7);
  color:#36992A;
  border:1px solid rgba(66,183,42,0.3);
}
html.dark .alert-success{
  background: rgba(66,183,42,0.12);
}