.login-page{

min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#f8fafc;

}

.login-card{

width:100%;
max-width:420px;

background:white;

border-radius:16px;

padding:40px 30px;

box-shadow:0 10px 30px rgba(0,0,0,0.06);

text-align:center;

}

.login-logo{

width:50px;
margin:0 auto 12px auto;
display: block;

}

.login-card h2{

margin-bottom:20px;

}


/* TABS */

.auth-tabs{

display:flex;
gap:10px;
margin-bottom:20px;
justify-content: center;

}

.auth-tab{

flex:1;

padding:10px;

border-radius:10px;

border:1px solid #e5e7eb;

background:#f9fafb;

cursor:pointer;

font-weight:500;

color: #374151;

transition: all 0.2s;

}


.auth-tab:hover{

background:#f3f4f6;

}


.auth-tab.active{

background:#3b82f6;
color:white;
border-color: #3b82f6;
}


/* FORMS */

.auth-form{

display:none;
flex-direction:column;
gap:12px;

}

.auth-form.active{

display:flex;

}

.auth-btn{

margin-top:10px;

}

.auth-btn:disabled{

    opacity: 0.5;
    cursor: not-allowed;
}
.auth-small{

font-size:13px;
color:#6b7280;
margin-top:10px;

}

.google-divider{

display:flex;
align-items:center;
justify-content:center;

margin:18px 0;

color:#9ca3af;
font-size:14px;

}

.google-btn{

display:flex;
align-items:center;
justify-content:center;

gap:10px;

width:100%;
padding:12px;

border-radius:10px;

border:1px solid #e5e7eb;

background:white;

cursor:pointer;

font-weight:500;

}

.google-btn:hover{

background:#f9fafb;

}

.google-btn img{

width:18px;

}

.auth-switch{

margin-top:12px;
font-size:14px;
color:#6b7280;
text-align: center;

}

.auth-switch span{

color:#3b82f6;
font-weight:500;
cursor:pointer;

}

.auth-switch span:hover{

text-decoration:underline;

}

.auth-support-links{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px;

margin-top:22px;
padding-top:18px;

border-top:1px solid #eef2f7;
}

.auth-support-links a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:0 12px;

border:1px solid #e5e7eb;
border-radius:999px;

background:#f8fafc;
color:#475569;

font-size:12px;
font-weight:700;
text-decoration:none;

transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.auth-support-links a:hover{
border-color:#cbd5e1;
background:#fff;
color:#111827;
}

.auth-hint{
font-size:12px;
margin:-4px 2px 2px;
color:#6b7280;
text-align:left;
line-height:1.45;
}


.password-rules{

display: none;

font-size:12px;
margin-top:6px;
color:#ef4444;
text-align:left;

}

.password-rules.show{
    display:block;

}

.password-rules p{

margin:3px 0;

}

.password-rules .valid{

color:#22c55e;

}

.form-error{

background:#fee2e2;
color:#b91c1c;

padding:10px;
border-radius:8px;
font-size:13px;

margin-bottom:10px;

text-align:center;

}

.auth-notice{

display:none;

padding:12px;

margin-bottom:12px;

border-radius:8px;

font-size:14px;

text-align:center;

}

.auth-notice.error{

background:#fee2e2;
color:#b91c1c;

}

.auth-notice.success{

background:#166534;
color:#dcfce7;

}

.password-field{
  display:flex;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:0 8px;
  background:white;
}

.password-eye{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:none;
  border:none;
  cursor:pointer;
}


.password-eye img{
  width:20px;
  height:20px;
  opacity:0.7;
  pointer-events:none;
}

.password-field.active .password-eye{

display:block;

}

.eye-icon{

width:20px;
height: 20px;
opacity:.7;
pointer-events: none;

}


.auth-loading{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

}

.auth-spinner{

width:16px;
height:16px;

border:2px solid rgba(255,255,255,0.4);
border-top:2px solid white;

border-radius:50%;

animation:spin 0.6s linear infinite;

}

@keyframes spin{

to{
transform:rotate(360deg);
}

}

.auth-link-btn{
background:none;
border:none;
color:var(--primary-blue);
cursor:pointer;
font-size:13px;
padding:0;
}

.auth-link-btn:hover{
text-decoration:underline;
}

.reset-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.4);
backdrop-filter:blur(6px);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;
transition:0.25s;

z-index:9999;
}

.reset-modal.show{
opacity:1;
pointer-events:auto;
}

.reset-box{
background:white;
padding:20px;
border-radius:16px;
width:90%;
max-width:320px;
text-align:center;
}

.reset-box h3{
margin-bottom:12px;
}

.reset-actions{
display:flex;
gap:10px;
margin-top:14px;
}

.reset-notice{
font-size:13px;
margin-bottom:10px;
color:#ef4444;
display:none;
}

.reset-notice.success{
color:green;
}


.password-field input{
  flex:1;
  border:none;
  outline:none;
  padding:12px 8px;
  font-size:14px;
  background:transparent;
}