/* Auth page */
#auth .form-control, #auth input[type="text"], #auth input[type="password"]{
  width: 100%;
  border-radius: 10px;
  padding: .7rem .9rem;
}

.auth-tabs .nav-link{
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: 700;
}

.auth-tabs .nav-link.active{
  background: rgba(91,14,87,0.12);
  color: #3b0737;
}

.auth-btn{
  min-width: 210px;
  border-radius: 999px;
  padding: .65rem 1.1rem;
  font-weight: 700;
}

.auth-divider{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin: 1rem 0;
  color: rgba(0,0,0,0.45);
  font-size: .9rem;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(0,0,0,0.12);
}
.auth-divider span{
  padding: 0 .25rem;
}

.auth-side{
  border-radius: 16px;
}
.auth-card{
  border-radius: 18px;
}

/* Center the logo + card as one unit */
.auth-shell{
  min-height: 52vh;              /* leaves room for the big footer below */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem ;
   padding-bottom: 1.5rem;
}

.auth-wrap{
  width: 100%;
  max-width: 520px;              /* narrow card */
  margin-top: 0.5rem;
}

.auth-brand{
  display: flex;
  justify-content: center;
  margin-bottom: 4px;           /* small gap between logo and card */
}

.auth-logo{
  max-width: 360px;              /* prevent huge logo */
  width: 100%;
  height: auto;
  display: block;
}

.auth-foot{
  margin-bottom: .5rem;
}

/* auth forgot link */
.auth-forgot{ margin-top: .5rem; }
#forgotPanel{ overflow: hidden; transition: max-height .18s ease; }

.auth-forgot-box{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,255,255,0.85);
}

.auth-forgot-title{
  font-weight: 800;
}

.auth-forgot-sub{
  color: rgba(0,0,0,0.55);
  font-size: .9rem;
  margin-top: .15rem;
}

.auth-success{
  background: rgba(25,135,84,.10);
  border: 1px solid rgba(25,135,84,.18);
  color: rgba(0,0,0,.75);
  border-radius: 12px;
  padding: .75rem .9rem;
  font-size: .92rem;
}

.auth-tryagain{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.auth-tryagain:hover{
  opacity: .85;
}
/* =========================================================
   AUTH PAGE — calm neutral override
   Append at very bottom of auth.css
========================================================= */

.auth-shell{
  min-height: 56vh;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.auth-wrap{
  max-width: 560px;
}

.auth-card,
.auth-side{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-2) !important;
  overflow: hidden;
}

.auth-brand{
  margin-bottom: 16px !important;
}

.auth-logo{
  max-width: 280px !important;
}

#auth .form-control,
#auth input[type="text"],
#auth input[type="password"]{
  min-height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 0.78rem 0.95rem !important;
  box-shadow: none !important;
}

#auth .form-control::placeholder,
#auth input::placeholder{
  color: var(--muted-2) !important;
}

#auth .form-control:focus,
#auth input[type="text"]:focus,
#auth input[type="password"]:focus{
  border-color: var(--brand-500) !important;
  box-shadow: var(--focus) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.auth-tabs{
  gap: 8px;
}

.auth-tabs .nav-link{
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0.5rem 0.9rem !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.auth-tabs .nav-link:hover{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

.auth-tabs .nav-link.active{
  background: #eef4fb !important;
  color: var(--brand-700) !important;
  border-color: #d3e0f0 !important;
  box-shadow: none !important;
}

.auth-btn{
  min-width: 210px;
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.1rem !important;
  font-weight: 700 !important;
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #fff !important;
}

.auth-btn:hover{
  background: var(--brand-800) !important;
  border-color: var(--brand-800) !important;
}

.auth-divider{
  color: var(--muted) !important;
  font-size: .9rem !important;
}

.auth-divider::before,
.auth-divider::after{
  background: var(--border) !important;
}

.auth-forgot-box{
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: #f9fbfd !important;
}

.auth-forgot-title{
  color: var(--text) !important;
  font-weight: 800 !important;
}

.auth-forgot-sub{
  color: var(--muted) !important;
  font-size: .92rem !important;
}

.auth-success{
  background: #f3faf6 !important;
  border: 1px solid #d6eadf !important;
  color: var(--text-soft) !important;
  border-radius: 14px !important;
}

.auth-tryagain{
  color: var(--brand-700) !important;
}

.auth-tryagain:hover{
  opacity: 1 !important;
  color: var(--brand-800) !important;
}

.auth-foot{
  color: var(--muted) !important;
}