html, body { margin: 0; height: 100%; font: 13px system-ui, "Segoe UI", Ubuntu, sans-serif; background: #f4f4f4; }
main { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
form { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 24px; width: 360px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
h1 { font-size: 18px; margin: 0; font-weight: 500; }
label { display: flex; flex-direction: column; gap: 4px; }
input { font: inherit; padding: 6px 8px; border: 1px solid #b5b5b5; border-radius: 3px; }
#error { color: #c62828; margin: 0; }
button { font: inherit; padding: 6px; border: 1px solid #1f5a9e; border-radius: 3px; background: #2a6ebb; color: #fff; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.hint { margin: -6px 0 0; color: #666; font-size: 12px; }
.switch { margin: 4px 0 0; text-align: center; color: #555; }
.switch a { color: #2a6ebb; }
/* the `hidden` attribute must win over the display rules above (e.g. label { display: flex }) */
[hidden] { display: none !important; }