:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px;
  font: 14px/1.6 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  background: #f7f7f7; color: #1d2129; }
@media (prefers-color-scheme: dark) { body { background: #14181e; color: #dce1e7; } }
main { width: min(360px, 100%); display: grid; gap: 22px; }
header { display: grid; justify-items: center; text-align: center; gap: 10px; }
h1 { margin: 0; font-size: 19px; }
header p { margin: 0; font-size: 12.5px; opacity: .75; }
form { display: grid; gap: 14px; padding: 20px; border: 1px solid rgba(128,128,138,.35); border-radius: 14px; background: rgba(127,127,127,.06); }
label { display: grid; gap: 6px; font-size: 13px; }
input { font: inherit; padding: 9px 11px; border: 1px solid rgba(128,128,138,.5); border-radius: 8px; background: transparent; color: inherit; min-width: 0; }
input:focus-visible, button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
button { font: inherit; min-height: 38px; padding: 8px 14px; border: 1px solid rgba(128,128,138,.5); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
button.primary { background: #2f6fed; border-color: #2f6fed; color: #fff; }
button.primary:disabled { opacity: .55; cursor: default; }
footer { display: grid; justify-items: center; }
footer button { border: 0; font-size: 12.5px; opacity: .8; }
#error { margin: 0; font-size: 12.5px; color: #d5443c; }
#status { margin: 0; font-size: 12.5px; opacity: .75; }