* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: 'Poppins', sans-serif;

  background: linear-gradient(135deg, #f3f3f3, #e9efff);

  min-height: 100vh;

}



/* NAVBAR */

.navbar {

  height: 70px;

  display: flex;

  align-items: center; 

  background: #fff;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

}



.logo {

  font-weight: 700;

  font-size: 1.4rem;

  color: #007bff;

  text-decoration: none;

}



/* PAGE */

.auth-page {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 2rem 1rem;

}



/* CARD */

.auth-card {

  width: 100%;

  max-width: 420px;

  background: #fff;

  padding: 2.5rem; 

  box-shadow: 0 12px 30px rgba(0,0,0,0.12);

  text-align: center;

}



.auth-card h1 {

  font-size: 1.9rem;

  margin-bottom: 0.4rem;

}



.auth-subtitle {

  color: #666;

  margin-bottom: 1.5rem;

}



/* GOOGLE BUTTON */

.google-btn {

  width: 100%;

  height: 46px;

  border: 1px solid #ddd;

  background: #fff; 

  font-size: 0.95rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  transition: box-shadow 0.2s ease, transform 0.15s ease;

}



.google-btn:hover {

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  transform: translateY(-1px);

}



/* DIVIDER */

.divider {

  margin: 1.5rem 0;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.divider::before,

.divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #ddd;

}



.divider span {

  font-size: 0.85rem;

  color: #777;

}



/* FORM */

.field {

  margin-bottom: 1rem;

}



.field input {

  width: 100%;

  height: 46px; 

  border: 1px solid #ddd;

  padding: 0 1rem;

  font-size: 0.95rem;

}



.field input:focus {

  outline: none;

  border-color: #007bff;

  box-shadow: 0 0 0 2px rgba(0,123,255,0.15);

}



/* BUTTON */

.primary-btn {

  width: 100%;

  height: 46px;

  margin-top: 0.5rem;

  border: none;

  background: #007bff;

  color: #fff;

  font-size: 1rem; 

  cursor: pointer;

}



.primary-btn:hover {

  background: #0056b3;

}



/* SWITCH */

.switch-text {

  margin-top: 1.4rem;

  font-size: 0.9rem;

}



.switch-text button {

  background: none;

  border: none;

  color: #007bff;

  font-weight: 600;

  cursor: pointer;

}



/* UTIL */

.hidden {

  display: none;

}