body {
  background: #f6f8fa;
}

.auth-outer {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  background: #fff;
  padding: 2.7rem 2.3rem 2rem 2.3rem;
  border-radius: 2rem;
  box-shadow: 0 4px 36px 0 rgba(55, 86, 124, 0.09);
  min-width: 340px;
  max-width: 410px;
  width: 100%;
  text-align: center;
}

.auth-title {
  font-size: 2rem;
  font-weight: 700;
  color: #16557c;
  margin-bottom: 1.1rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;
}

.login-form label {
  font-weight: 600;
  font-size: 1rem;
  color: #244d61;
  margin-bottom: 0.1rem;
}

.login-form input[type="email"],
.login-form input[type="password"] {
  font-size: 1rem;
  border: 1.5px solid #d0d7de;
  border-radius: 0.7rem;
  padding: 0.7rem 1rem;
  background: #f8fafc;
  margin-bottom: 0.3rem;
  transition: border 0.2s;
}

.login-form input:focus {
  outline: none;
  border: 1.5px solid #36b0b6;
  background: #fff;
}

.login-form button[type="submit"] {
  margin-top: 0.5rem;
  background: #16557c;
  color: #fff;
  font-size: 1.07rem;
  font-weight: 700;
  border: none;
  border-radius: 0.7rem;
  padding: 0.8rem 0;
  cursor: pointer;
  transition: background 0.18s;
}
.login-form button[type="submit"]:hover {
  background: #148fa6;
}

/* Divider styling */
.divider {
  margin: 1.3rem 0 1rem 0;
  text-align: center;
  color: #999;
  position: relative;
  font-size: 1rem;
}
.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1.3px;
  background: #e7e7e7;
}
.divider::before {
  left: 0;
}
.divider::after {
  right: 0;
}

/* Google button styling */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: #ea4335;
  color: #fff;
  font-weight: 700;
  font-size: 1.06rem;
  border: none;
  border-radius: 0.7rem;
  padding: 0.78rem 0;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 8px 0 rgba(234, 67, 53, 0.10);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.17s;
}
.google-btn img {
  width: 1.5rem;
  height: 1.5rem;
  filter: none;
}
.google-btn:hover,
.google-btn:focus {
  background: #cf392b;
}

/* Small text */
.small-text {
  margin-top: 1.1rem;
  font-size: 0.98rem;
  color: #656565;
}
.small-text a {
  color: #16557c;
  text-decoration: underline;
  font-weight: 600;
}

.flashes {
  margin-bottom: 1rem;
  padding-left: 0;
  list-style: none;
}
.flashes li {
  padding: 0.75em 1em;
  border-radius: 0.7em;
  margin-bottom: 0.5em;
  font-size: 1.02em;
  font-weight: 600;
}
.flashes li.success { background: #e7f9ed; color: #097449; }
.flashes li.danger  { background: #fde8e8; color: #d32929; }
.flashes li.info    { background: #e8f3fd; color: #215e97; }