:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #17202e;
  background: #fafbfc;
}
* { box-sizing: border-box; }
body { margin: 0; }
.auth-shell { min-height: 100svh; padding: 48px 24px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 448px; padding: 32px; border: 1px solid #f0f1f3; border-radius: 18px; background: #fff; box-shadow: 0 8px 32px #17202e0b; }
.brand { display: flex; justify-content: center; margin-bottom: 20px; }
.brand img { max-width: 100%; }
h1 { font-size: 28px; letter-spacing: -.8px; margin: 0 0 10px; text-align: center; }
h2 { font-size: 14px; font-weight: 400; color: #626976; margin: 0 0 30px; text-align: center; }
a { color: #2858cb; text-underline-offset: 3px; }
a:hover { color: #1643aa; }
:focus-visible { outline: 3px solid #91b4ff; outline-offset: 3px; }
.languages { display: flex; justify-content: center; gap: 16px; margin: -8px 0 24px; font-size: 13px; }
.languages a[aria-current] { font-weight: 700; color: #17202e; }
.field-group { margin-bottom: 18px; }
label, .field-label { display: block; font-size: 13px; color: #565f6c; margin-bottom: 7px; }
input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #d7d9df; border-radius: 6px;
  color: #17202e; background: #fff; font: inherit; font-size: 14px;
}
input[aria-invalid=true] { border-color: #bb273b !important; }
.password-group { position: relative; }
.password-group input { padding-right: 46px !important; }
.password-toggle { position: absolute; right: 3px; top: 3px; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; color: #747c88; }
.icon-eye, .icon-eye-hidden { display: block; width: 16px; height: 11px; border: 1.5px solid currentColor; border-radius: 65% 20%; transform: rotate(45deg); margin: auto; }
.icon-eye::after, .icon-eye-hidden::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 2px 4px; }
.icon-eye-hidden { opacity: .45; }
.button, input[type=submit], button:not(.password-toggle) {
  display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 10px 16px;
  border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: none;
}
.button-primary, input[type=submit] { background: #285fe9; color: #fff; }
.button-primary:hover, input[type=submit]:hover { background: #174fcf; }
.button-block, #kc-form-buttons input[type=submit] { width: 100%; }
.button-secondary, #kc-cancel { background: #f4f6fa; color: #2858cb; border-color: #d7d9df; }
button:disabled, input:disabled { cursor: wait; opacity: .55; }
.form-settings { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 4px 0 24px; font-size: 14px; }
#kc-form-options:empty { display: none; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: #285fe9; }
.checkbox label { display: flex; gap: 8px; align-items: center; }
.field-error, [id^=input-error] { display: block; color: #a41d30; font-size: 13px; margin-top: 8px; }
.message { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; border: 1px solid #ccdaf8; background: #f2f6ff; }
.message-error { color: #a41d30; background: #fff3f4; border-color: #f0bec6; }
.message-warning { color: #775013; background: #fff9ec; border-color: #f1dda9; }
.message-success { color: #216044; background: #effaf4; border-color: #bde5ce; }
.account-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; padding: 12px; background: #f6f8fb; border-radius: 6px; margin-bottom: 22px; overflow-wrap: anywhere; }
.required-note { font-size: 12px; color: #626976; }
.auth-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid #edf0f4; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #757d89; }
.security-note { text-align: center; font-size: 12px; color: #808794; margin-top: 24px; }
.additional-info { font-size: 13px; margin-top: 20px; }
.passkey-action { margin-top: 22px; }
.passkey-help { text-align: center; font-size: 12px; color: #757d89; line-height: 1.6; }
ol, ul { padding-left: 22px; }
li { margin-bottom: 12px; line-height: 1.6; font-size: 14px; }
code { overflow-wrap: anywhere; }
img { max-width: 100%; }
#kc-totp-secret-qr-code { display: block; margin: 20px auto; }
.otp-choice { padding: 12px; border: 1px solid #d7d9df; border-radius: 6px; }
@media (max-width: 480px) {
  .auth-shell { padding: 24px 16px; justify-content: flex-start; }
  .auth-card { padding: 28px 24px; }
}