/* [hidden] must win over .enroll/.board display:grid — otherwise Connect looks like a no-op */
.enroll[hidden],
.board[hidden] {
  display: none !important;
}

.enroll {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(91, 91, 234, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(124, 58, 237, 0.1), transparent 55%),
    #fff;
  padding: 24px;
}
.enroll-form {
  width: min(420px, 100%);
  text-align: center;
  font-family: "National2", "Segoe UI", Helvetica, Arial, sans-serif;
}
.enroll-brand {
  width: min(320px, 72vw);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}
.enroll-form h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.01em;
}
.enroll-form p {
  margin: 0 0 1.25rem;
  color: #444;
  font-size: 1rem;
}
.enroll-form input {
  width: 100%;
  font-size: 2rem;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border: 3px solid #000;
  border-radius: 0;
  margin-bottom: 1rem;
  font-family: inherit;
}
.enroll-form button {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0.9rem 1rem;
  border: 0;
  background: #5b5bea;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.enroll-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.enroll-err {
  color: #e4002b;
  margin-top: 1rem !important;
}
body.offline #meta,
body.show-meta #meta {
  opacity: 1;
}