/* Loaded only by the unauthenticated page. */
.pin-panel { width: 100%; max-width: 390px; }
.pin-brand img { width: 92%; max-width: 257px; }
/* Margin spacing also works on Safari versions without flex gap. */
.pin-dots { gap: 0; }
.pin-dots span + span { margin-left: 12px; }
.pin-key::after { top: 0; right: 0; bottom: 0; left: 0; }
@media (max-width: 640px) {
    .pin-panel { max-width: none; }
    .pin-brand img { width: 88%; max-width: 238px; }
}
/* iOS 9: no Grid, custom properties or min(). Keep the modern Grid intact. */
@supports not (display: grid) {
    body.lock-body { background: #061829; color: #e8edf2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .pin-shell { display: block; }
    .pin-panel { margin: 0 auto; display: block; }
    .pin-brand { display: block; text-align: center; }
    .pin-brand img { margin: 0 auto; }
    #pinForm.active { display: block; padding-top: 65px; }
    .pin-keypad { display: block; margin-right: -5px; margin-left: -5px; }
    .pin-keypad::after { content: ""; display: table; clear: both; }
    .pin-keypad .pin-key { float: left; width: calc(33.333333% - 10px); margin: 0 5px 10px; -webkit-appearance: none; cursor: pointer; }
    #registerForm.active { display: block; }
    #registerForm label { display: block; margin-top: 10px; }
    #registerForm label span { display: block; margin-bottom: 5px; }
    #registerForm input, #registerForm textarea { background: #031422; border-color: #4c97be; }
    #registerForm button[type="submit"] { background: #0d2b43; border-color: #20d8ff; }
    .auth-switch-line { display: block; }
    .auth-switch-line span, .auth-switch-line button { display: block; margin: 4px auto 0; }
}