* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f6f6f4; color: #1d1d1b;
  font: 14px "Segoe UI", system-ui, sans-serif; padding: 16px; }
.box { width: 100%; max-width: 380px; background: #fff; border: 1px solid #e3e2dd; border-radius: 10px; padding: 28px; }
h1 { margin: 0; font-size: 20px; }
.sub { margin: 4px 0 22px; color: #6b6b66; font-size: 13px; }
label { display: block; font-size: 13px; color: #6b6b66; margin-bottom: 12px; }
input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #e3e2dd; border-radius: 6px; font: inherit; color: #1d1d1b; }
input:focus { outline: 2px solid #1f5f8b33; border-color: #1f5f8b; }
button { width: 100%; padding: 10px; border: 0; border-radius: 6px; background: #1f5f8b; color: #fff; font: inherit; font-weight: 600; cursor: pointer; margin-top: 4px; }
.hint { font-size: 12px; color: #6b6b66; margin: -4px 0 12px; }
.msg { min-height: 1em; margin: 14px 0 0; font-size: 13px; }
.msg.err { color: #b3261e; } .msg.ok { color: #2e7d4f; }