.ir77-ui .ir77-nav { position: relative; } /* Keep focused form fields clear at enlarged text sizes. */
.ir77-ui .ir77-auth { padding-block-end: max(3.5rem, 1lh); }
.ir77-auth :is(a, button, input) { scroll-margin-block: 2lh; }
.pupil-password-field { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 1.15rem; }
.ir77-ui .pupil-password-field .ir77-auth-input { min-width: min(100%, 12ch); flex: 1; margin-bottom: 0; }
.pupil-password-toggle { flex-shrink: 0; min-width: 56px; max-width: 100%; min-height: 48px; padding: 8px; overflow-wrap: anywhere; color: #c4adf0; background: #8b5cf60b; border: 1px solid #b5a1e82e; border-radius: 9px; cursor: pointer; font-size: 13px; }
.pupil-password-toggle:hover { color: #f0f0f8; border-color: #b79aff; }
.pupil-password-match { margin: -8px 0 16px; color: #ffb1bf; font-size: 13px; line-height: 1.6; }
.pupil-password-match:empty { display: none; }
.pupil-auth-note { margin: 0 0 20px; color: #a5a5bb; font-size: 14px; line-height: 1.7; }
.pupil-auth-actions { display: flex; flex-direction: column; gap: 12px; }
.ir77-auth-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ir77-ui .ir77-auth-footer a { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b5a1e82e; border-radius: 8px; line-height: 1.5; scroll-margin-block: 1.5lh; }
.ir77-ui .ir77-auth-footer a:hover { color: #f0f0f8; border-color: #b79aff; background: #8b5cf60b; }
.ir77-auth-footer br { flex-basis: 100%; height: 0; }
.ir77-auth-inner { overflow-wrap: anywhere; }
#pupil-auth-error:focus { outline: 2px solid #b79aff; outline-offset: 3px; }
@media (max-width: 760px) {
  .ir77-ui .ir77-auth { padding-block-end: max(2.6rem, 1lh); }
}
@media (max-width: 420px) {
  #pupil-main .ir77-auth-form { padding: 20px 16px; }
}