:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #101418;
  color: #d7e0e6;
  font: 16px/1.45 Tahoma, "Segoe UI", sans-serif;
}

body.gate {
  display: grid;
  place-items: center;
  min-height: 100%;
  min-height: 100dvh;
  padding: 1.25rem 0;
}

.cards {
  width: min(22rem, calc(100% - 2rem));
  display: grid;
  gap: 0.85rem;
}

.lock {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1.15rem 1.15rem;
  background: #1a2129;
  border: 1px solid #2a3642;
  border-radius: 12px;
}

.lock h1 {
  margin: 0 0 0.15rem;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  color: #e8eef2;
}

.lock label {
  display: grid;
  gap: 0.35rem;
  color: #b7c4cc;
  font-size: 0.92rem;
}

.lock input,
.lock button {
  width: 100%;
  margin: 0;
  appearance: none;
  font: inherit;
  color: #e8eef2;
  background: #101418;
  border: 1px solid #2a3642;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}

.lock input:focus {
  outline: none;
  border-color: #7ec8c3;
}

.lock button {
  color: #101418;
  background: #7ec8c3;
  border-color: #7ec8c3;
  cursor: pointer;
}

.lock.bad input {
  border-color: #c45c5c;
}

.join {
  display: grid;
  gap: 0.85rem;
}

.join summary {
  list-style: none;
  justify-self: center;
  padding: 0.5rem 1rem;
  color: #7ec8c3;
  border: 1px solid #2a3642;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.join summary::-webkit-details-marker { display: none; }

.join summary:hover,
.join summary:focus-visible {
  outline: none;
  border-color: #7ec8c3;
}

.join[open] summary {
  color: #b7c4cc;
}

.err,
.ok {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.88rem;
}

.err { color: #c98a8a; }
.ok { color: #7ec8c3; }