* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #14171c; color: #e6e9ee;
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; }
.box { width: min(360px, 92vw); background: #1c2027; border: 1px solid #2b313b; border-radius: 10px; padding: 24px; }
h1 { font-size: 18px; margin: 0 0 18px; color: #f0a030; }
label { display: block; margin-bottom: 12px; color: #8b94a3; }
input { width: 100%; margin-top: 4px; padding: 9px 10px; background: #14171c; color: #e6e9ee;
  border: 1px solid #2b313b; border-radius: 6px; font: inherit; }
input:focus { outline: 1px solid #f0a030; }
button { width: 100%; padding: 9px; background: #f0a030; color: #1a1205; border: 0; border-radius: 6px;
  font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
#error { color: #ef5b5b; min-height: 1.4em; margin: 12px 0 0; }