.username-dialog {
  box-sizing: border-box;
  margin: auto;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  border: 1px solid #665194;
  border-radius: 20px;
  background: #191327;
  color: #faf7ff;
  box-shadow: 0 24px 80px #0009;
  font: 16px/1.5 system-ui, sans-serif;
}
.username-dialog::backdrop { background: #090512db; }
.username-dialog h2 { margin: 8px 0 12px; font-size: 25px; line-height: 1.2; }
.username-dialog p { color: #d3c9e6; }
.username-dialog .username-step { color: #ffd36b; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.username-dialog label { display: block; margin-bottom: 8px; font-weight: 650; }
.username-dialog input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #8773ab;
  border-radius: 10px;
  background: #0e0a18;
  color: white;
  font: inherit;
}
.username-dialog input:focus-visible, .username-dialog button:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }
#username-help { font-size: 13px; }
#username-status { min-height: 24px; color: #ffd36b; font-size: 14px; }
#username-status[data-state="available"] { color: #8ee8b2; }
#username-status[data-state="taken"] { color: #ff99ad; }
.username-dialog button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #ffd36b; color: #221531; font: inherit; font-weight: 750; cursor: pointer; }
.username-dialog button:disabled { opacity: .55; cursor: wait; }
.username-dialog .username-logout { margin-top: 10px; background: transparent; color: #d3c9e6; font-size: 14px; }