.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-five);
}

.login-card {
  max-width: 400px;
  width: 100%;
  padding: var(--size-five);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  border: 1px solid oklab(1 0 0 / 0.12);
  text-align: center;
}

.login-card h1 {
  font-size: var(--font-size-h5);
  margin-bottom: var(--size-two);
}

.login-card p {
  font-size: var(--font-size-body);
  opacity: 0.6;
  margin-bottom: var(--size-four);
}

.google-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--size-three);
  padding: var(--size-three) var(--size-four);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-surface-main), var(--color-text-main) 12%);
  border: 1px solid oklab(1 0 0 / 0.12);
  color: var(--color-text-main);
  font-size: var(--font-size-body);
  text-decoration: none;
  transition: background 0.15s;
}

.google-btn:hover {
  background: color-mix(in oklab, var(--color-surface-main), var(--color-text-main) 18%);
}

.google-btn:focus {
  outline: 3px solid var(--color-coral);
  outline-offset: var(--size-one);
}

.google-btn svg {
  width: 20px;
  height: 20px;
}