:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #101820;
}

.auth-card {
  width: min(26rem, 100%);
  display: grid;
  gap: .8rem;
  padding: 2rem;
  border-radius: .8rem;
  background: #f4ecd8;
  color: #17222c;
}

.auth-card h1,
.auth-card p { margin: 0; }

.auth-card label { font-weight: 700; }

.auth-card input {
  width: 100%;
  padding: .7rem;
  border: 1px solid #767676;
  border-radius: .35rem;
  font: inherit;
}

.auth-card button {
  margin-top: .4rem;
  padding: .75rem;
  border: 0;
  border-radius: .35rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-card a { color: #4d0b73; }

.auth-message {
  padding: .6rem;
  border-radius: .35rem;
}

.auth-message.error { border: 1px solid #8f2525; }
.auth-message.success { border: 1px solid #356a3f; }
.auth-secondary-action { font-size: .92rem; }