.loginpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, #1b1b22 0%, transparent 70%),
    var(--bg);
}

.loginpage .card {
  width: min(430px, 100%);
  padding: 32px 30px 30px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px #0009;
  text-align: center;
}

.loginpage .brand { font-size: 21px; letter-spacing: .08em; font-weight: 700; }
.loginpage .brand span { color: var(--dim); font-weight: 500; }
.loginpage .tagline { margin: 4px 0 22px; color: var(--dimmer); font-size: 12.5px; }
.loginpage h1 { font-size: 17px; margin: 0 0 8px; }
.loginpage .hint { margin: 0 0 16px; }
.loginpage a { color: var(--accent); }

.discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  border-radius: 8px;
  background: #5865f2;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.discord:hover { background: #4a56d8; }
.discord svg { width: 20px; height: 20px; fill: currentColor; }

.idbox {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.idbox code {
  flex: 1;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}