@font-face { font-family: Roboto; src: url("fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
body { margin: 0; font: 14px Roboto, Arial, sans-serif; background: #f8f8fa; color: #101d31; }
main { min-height: 100vh; display: grid; place-items: center; }
.qh-auth-panel { width: 340px; padding: 32px; background: white; border: 1px solid #d5dbe4; border-radius: 8px; box-shadow: 0 1px 2px rgba(16,29,49,.06), 0 4px 12px rgba(16,29,49,.05); }
.qh-auth-page .qh-auth-panel { background: #192535; color: #f8f8fa; border-color: #344257; }
.qh-auth-brand { display: flex; justify-content: center; margin: 0 0 24px; }
.qh-auth-logo { display: block; }
.qh-form-field { margin: 16px 0; }
label { display: block; margin-bottom: 6px; }
input { box-sizing: border-box; width: 100%; border: 1px solid #adb7c5; border-radius: 4px; padding: 10px; font: inherit; }
button, .qh-primary-button { border: 0; border-radius: 4px; background: #3f37d7; color: white; padding: 10px 20px; font: inherit; cursor: pointer; }
a { color: #3f37d7; }
.qh-alert-error, .field-validation-error { color: #d92d20; }
:focus-visible { outline: 2px solid #3f37d7; outline-offset: 3px; }

.qh-auth-panel > p { color: #526077; line-height: 1.5; }
.qh-auth-panel h2, .qh-auth-panel h3 { font-size: 16px; font-weight: 600; }
.qh-auth-panel code { overflow-wrap: anywhere; }
.qh-error-panel { width: 560px; }
.qh-error-panel h1 { font-size: 24px; font-weight: 600; }
input:hover { border-color: #526077; }
input.input-validation-error { border-color: #d92d20; }

.qh-auth-page input { background: #243247; color: #f8f8fa; border-color: #66758b; color-scheme: dark; }
.qh-auth-page input:hover { border-color: #a6b4c8; }
.qh-auth-page input:autofill { box-shadow: inset 0 0 0 1000px #243247; -webkit-text-fill-color: #f8f8fa; }
.qh-auth-page .qh-alert-error, .qh-auth-page .field-validation-error { color: #ffb4ab; }
.qh-auth-page input.input-validation-error { border-color: #ffb4ab; }
.qh-auth-page :focus-visible { outline-color: #a69fff; }
