:root{
  --bg:#070c16;
  --panel:#0f1629;
  --border:#1f2b4d;
  --text:#e8f0ff;
  --muted:#7e8db3;
  --accent:#3ddcff;
  --warn:#ff5f7a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; background:var(--bg); color:var(--text); }

body.login{
  display:grid;
  place-items:center;
  font-family:var(--mono);
}

.loginLine{
  width:min(520px, 92vw);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border:1px solid var(--border);
  background: rgba(15,22,41,.8);
}

.loginLine:focus-within{
  border-color: rgba(61,220,255,.75);
  box-shadow: 0 0 0 2px rgba(61,220,255,.12);
}

.loginLine input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.2px;
}

.loginLine input::placeholder{ color: rgba(126,141,179,.7); }

.promptBtn{
  border:0;
  background:transparent;
  color: var(--accent);
  font-family:var(--mono);
  font-size:16px;
  padding: 0 6px;
  cursor:pointer;
}

.promptBtn:disabled{ opacity:.5; cursor:not-allowed; }

.loginErr{
  margin: 10px 0 0;
  font-family:var(--mono);
  font-size:12px;
  color: var(--warn);
}

.srOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}