/* ===== AUTH PAGES ===== */

.auth-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 140px);
  padding:40px 20px;
}

.auth-card{
  width:100%;
  max-width:440px;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  position:relative;
}

.auth-header{
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  padding:32px 32px 28px;
  text-align:center;
  color:var(--white);
  position:relative;
  overflow:hidden;
}

.auth-header::before{
  content:'';
  position:absolute;
  top:-40%;
  right:-20%;
  width:200px;
  height:200px;
  background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.auth-header::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:160px;
  height:160px;
  background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.auth-header h1{
  font-size:24px;
  font-weight:900;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}

.auth-header p{
  font-size:14px;
  opacity:0.85;
  position:relative;
  z-index:1;
}

.auth-body{
  padding:32px;
}

/* Tabs */
.auth-tabs{
  display:flex;
  gap:0;
  margin-bottom:28px;
  border:2px solid var(--light);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--light);
}

.auth-tab{
  flex:1;
  padding:12px 16px;
  border:none;
  background:transparent;
  color:var(--gray);
  cursor:pointer;
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  transition:var(--transition);
  text-align:center;
  position:relative;
}

.auth-tab:hover{
  color:var(--dark);
}

.auth-tab.active{
  background:var(--primary);
  color:var(--white);
  border-radius:var(--radius-sm);
  box-shadow:0 2px 8px rgba(99,102,241,0.25);
}

/* Form */
.auth-form .form-group{
  margin-bottom:20px;
}

.auth-form .form-group label{
  font-size:13px;
  font-weight:600;
  color:var(--dark);
  margin-bottom:8px;
}

.auth-form .form-group input{
  padding:14px 16px;
  border:2px solid #e5e7eb;
  border-radius:var(--radius-sm);
  font-family:var(--font);
  font-size:15px;
  transition:var(--transition);
  width:100%;
  background:var(--white);
}

.auth-form .form-group input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(99,102,241,0.1);
}

.auth-form .form-group input::placeholder{
  color:var(--gray-light);
}

.auth-form .btn-submit{
  width:100%;
  padding:14px 24px;
  font-size:15px;
  margin-top:4px;
}

/* Footer Link */
.auth-footer{
  text-align:center;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--light);
  font-size:14px;
  color:var(--gray);
}

.auth-footer a{
  color:var(--primary);
  font-weight:600;
  transition:var(--transition);
}

.auth-footer a:hover{
  color:var(--primary-dark);
  text-decoration:underline;
}

/* Password Group */
.auth-password-group{
  animation:slideDown 0.3s ease;
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
  .auth-wrapper{
    padding:20px 16px;
    align-items:flex-start;
    padding-top:40px;
  }

  .auth-header{
    padding:24px 20px 22px;
  }

  .auth-header h1{
    font-size:20px;
  }

  .auth-body{
    padding:24px 20px;
  }

  .auth-tab{
    font-size:13px;
    padding:10px 12px;
  }
}