html.wb-auth-pending,
html.wb-auth-pending body {
  background: var(--bg, #08090c);
}

html.wb-auth-pending #app {
  visibility: hidden;
}

.wb-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #08090c);
  color: var(--text-0, #f4f5fa);
}

.wb-auth-card {
  width: min(100%, 380px);
  padding: 28px 24px 22px;
  border: 1px solid var(--stroke, #292c36);
  border-radius: 22px;
  background: var(--surface, #13151c);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

.wb-auth-title {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.02em;
}

.wb-auth-sub,
.wb-auth-note {
  color: var(--text-2, #9298a8);
  font-size: 14px;
  line-height: 1.55;
}

.wb-auth-sub { margin-top: 8px; }
.wb-auth-note { margin-top: 16px; }

.wb-auth-label {
  display: block;
  margin: 24px 0 8px;
  color: var(--text-1, #c2c6d1);
  font-size: 14px;
}

.wb-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--stroke, #343844);
  border-radius: 12px;
  background: var(--input, #0e1016);
  color: var(--text-0, #f4f5fa);
  font: inherit;
  outline: none;
}

.wb-auth-input:focus {
  border-color: var(--accent, #8d93ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #8d93ff) 20%, transparent);
}

.wb-auth-submit {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--accent, #8d93ff);
  color: #10121a;
  font: inherit;
  font-weight: 700;
}

.wb-auth-submit:disabled { opacity: .65; }
.wb-auth-error { min-height: 20px; margin-top: 10px; color: #f17084; font-size: 13px; }