:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: #f5f5f3;
  color: #1f2328;
}

body { margin: 0; }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.auth-card {
  width: min(100%, 24rem);
  padding: 2rem;
  background: white;
  border: 1px solid #deded9;
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2.5rem rgb(0 0 0 / 8%);
}

.auth-card h1 { margin: 0 0 0.5rem; }
.auth-card > p { color: #656d76; }
.auth-form { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.auth-form label { font-weight: 600; }
.auth-form input { font: inherit; padding: 0.75rem; border: 1px solid #b8b8b2; border-radius: 0.4rem; }
.auth-form input[type="submit"] { cursor: pointer; border: 0; background: #24292f; color: white; font-weight: 650; }
.auth-form input[type="submit"]:hover { background: #3b4148; }
.auth-flash { padding: 0.75rem; border-radius: 0.4rem; background: #fff1f0; color: #8a1f17; }