* { box-sizing: border-box; }
body { margin: 0; color: #172033; background: #f5f7fa; font: 14px/1.5 system-ui, sans-serif; letter-spacing: 0; }
header { padding: 18px 24px; border-bottom: 1px solid #d5dbe3; background: white; }
a { color: #185fbd; }
header a { font-weight: 700; text-decoration: none; color: #172033; }
main { width: min(100% - 32px, 400px); margin: 56px auto; }
h1 { font-size: 24px; margin: 0 0 24px; }
h2 { margin: 28px 0 12px; font-size: 18px; }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input { width: 100%; height: 44px; padding: 8px 10px; border: 1px solid #9ba8b7; border-radius: 4px; background: white; font-size: 16px; }
button { min-height: 42px; padding: 8px 18px; border: 1px solid #185fbd; border-radius: 4px; background: #185fbd; color: white; font: inherit; cursor: pointer; }
form button { width: 100%; margin-top: 24px; }
button:disabled { opacity: .6; cursor: wait; }
#logout { margin-left: 12px; background: white; color: #185fbd; }
#error { color: #b42318; overflow-wrap: anywhere; }
#status { color: #344b63; }
#password-help { color: #586778; font-size: 12px; }
.back { display: inline-block; margin-top: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #69a9e8; outline-offset: 2px; }
@media (max-width: 480px) { main { margin-top: 28px; } }