/* Shared, content-sized sign-in card, including formerly full-height right panels. */
@media screen{
 html:root[data-appearance] body .server-auth.auth-compact{display:flex!important;align-items:center!important;justify-content:flex-end!important;min-height:0!important;height:100dvh!important;padding:16px clamp(16px,3vw,60px)!important;background:var(--auth-background) center/cover no-repeat!important;box-sizing:border-box!important;overflow:auto!important;font-family:var(--app-font)}
 html:root:is([data-appearance="classic"],[data-appearance="aurora"]) body .server-auth.auth-compact{justify-content:center!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card{position:relative!important;inset:auto!important;flex:0 1 340px!important;width:340px!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;padding:16px!important;margin:0!important;border-radius:12px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:8px!important;font-size:12px!important;line-height:1.35!important;background:#fcfdff!important;color:#19354e!important;border:1px solid #b7c8d6!important;box-shadow:0 12px 36px #00182955!important;scrollbar-width:thin!important;scrollbar-gutter:auto!important}
 html:root[data-appearance="copper"] body .server-auth.auth-compact .auth-card{background:#faf7f1!important}
 html:root[data-appearance="aurora"] body .server-auth.auth-compact .auth-card{background:#e8f4f8!important}
 html:root[data-appearance="garden"] body .server-auth.auth-compact .auth-card{background:#f6faf1!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card>*{flex-shrink:0!important;min-width:0;max-width:100%}
 html:root[data-appearance] body .server-auth.auth-compact .auth-brand{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:8px!important;row-gap:2px!important;margin:0 0 2px!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-brand>img{width:44px!important;height:44px!important;grid-row:1/3!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-brand h1{font-size:18px!important;line-height:1.2!important;margin:0!important;color:#19354e!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-brand>.auth-brand-version{grid-column:2!important;grid-row:2!important;font-size:10px!important;margin:0!important;color:#41576a!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-company-logo{margin:0 0 4px!important;padding:0!important;text-align:center!important;max-height:42px!important;background:transparent!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-company-logo img{max-height:42px!important;max-width:100%!important;object-fit:contain!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(h2,h3,h4){font-size:16px!important;line-height:1.25!important;margin:2px 0!important;color:#19354e!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(h3,h4){font-size:13px!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(p,small,label,.auth-links){font-size:12px!important;line-height:1.35!important;margin:0!important;color:#19354e!important;overflow-wrap:anywhere}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card form{position:static!important;display:grid!important;gap:8px!important;width:100%!important;margin:0!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card label{display:grid!important;gap:4px!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card input:not([type=checkbox]):not([type=radio]){box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:34px!important;height:34px!important;padding:6px 8px!important;border-radius:6px!important;font:13px/1.3 var(--app-font)!important;border:1px solid #94a9bd!important;background:white!important;color:#19354e!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card button.btn{width:100%!important;min-height:34px!important;height:auto!important;padding:7px 10px!important;font-size:12px!important;line-height:1.3!important;margin:0!important;border-radius:6px!important;white-space:normal!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card .primary{background:var(--blue)!important;color:#fff!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(#mfaLoginBack,#mfaSetupBack,#resetBack){background:#edf4fa!important;color:#19354e!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(.auth-password-help,#passkeyLogin.passkey-login){font-size:12px!important;line-height:1.4!important;margin:0!important;padding:2px 0!important;min-height:0!important;color:#155e9a!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card .auth-security-note{font-size:10px!important;color:#41576a!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-links{display:grid!important;gap:6px!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(.auth-error,#mfaLoginError,#mfaSetupError,#resetMessage):not(:empty){padding:6px 8px!important;background:#fff0f0!important;color:#881d1d!important;border-radius:6px}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card p:empty{display:none!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-help{margin:0!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-help>summary{width:28px!important;min-height:24px!important;font-size:18px!important}
 html:root[data-appearance] body .server-auth.auth-compact .auth-help-bubble{padding:8px!important;font-size:12px!important}
 html:root[data-appearance] body .server-auth.auth-compact .passkey-setup-help{padding:0!important;border:0!important}
 html:root[data-appearance] body .server-auth.auth-compact :is(#mandatoryMfaSetup,.mfa-manual){display:grid;gap:8px;min-width:0}
 html:root[data-appearance] body .server-auth.auth-compact .mfa-qr{margin:0!important;padding:4px!important;text-align:center}
 html:root[data-appearance] body .server-auth.auth-compact .mfa-qr svg{width:256px!important;height:256px!important;max-width:100%!important}
 html:root[data-appearance] body .server-auth.auth-compact .mfa-recovery{box-sizing:border-box;width:100%;font-size:12px;line-height:1.4;min-height:180px}
 html:root[data-appearance] body .server-auth.auth-compact .auth-card :is(input,button,a,summary):focus-visible{outline:2px solid var(--blue)!important;outline-offset:2px!important}
 @media(max-width:760px){
  html:root[data-appearance] body .server-auth.auth-compact{justify-content:center!important;padding:12px!important}
  html:root[data-appearance] body .server-auth.auth-compact .auth-card{max-height:calc(100dvh - 24px)!important;padding:14px!important}
  /* Keep phone inputs at 16px to avoid automatic browser zoom. */
  html:root[data-appearance] body .server-auth.auth-compact .auth-card input:not([type=checkbox]):not([type=radio]){font-size:16px!important;min-height:36px!important;height:36px!important}
 }
 .appearance-thumbnail{position:relative}
 html body .appearance-thumbnail .appearance-mini-login{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:21%;padding:5px;background:#fcfdff;color:#19354e;border-radius:3px;display:grid;gap:3px;font-size:clamp(3px,.45vw,8px);line-height:1.2}
 .appearance-mini-login i{height:7px;border:1px solid #b7c8d6;border-radius:2px}.appearance-mini-login em{font-style:normal;background:#2476d3;color:white;text-align:center;padding:2px}
 html body .appearance-thumbnail:is([data-preview-theme=classic],[data-preview-theme=aurora]) .appearance-mini-login{right:50%;transform:translate(50%,-50%)}
 #appearancePreview.appearance-compact-preview{position:relative;aspect-ratio:16/9;min-height:200px;padding:3%;display:flex;align-items:center;justify-content:flex-end;background-size:cover}
 #appearancePreview.appearance-compact-preview:is([data-preview-theme=classic],[data-preview-theme=aurora]){justify-content:center}
 .appearance-compact-card{width:22%;min-width:140px;padding:12px;background:#fcfdff;color:#19354e;border-radius:8px;display:grid;gap:6px;font:11px/1.3 var(--preview-font,Inter);box-shadow:0 6px 16px #00182955}
 .appearance-compact-card>span{border:1px solid #b7c8d6;border-radius:4px;padding:6px}.appearance-compact-card>b{background:var(--preview-accent);color:white;border-radius:4px;padding:6px;text-align:center}
}


/* V687: identical outer card through password and MFA, with internal overflow on short screens. */
@media screen {
 html:root[data-appearance] body main.server-auth.auth-compact .auth-card.auth-card,
 html:root[data-appearance] body main.server-auth.auth-compact.auth-orange .auth-card.auth-card,
 html:root[data-appearance] body main.server-auth.auth-compact.auth-emerald .auth-card.auth-card {
  height:620px!important;min-height:0!important;max-height:calc(100dvh - 48px)!important;
  overflow:auto!important;overflow-x:hidden!important;
 }
}

/* V689: permanent message area; long errors scroll without moving login fields. */
@media screen {
 html:root[data-appearance] body main.server-auth.auth-compact .auth-card .auth-message-slot {
  display:block!important;box-sizing:border-box!important;height:72px!important;min-height:72px!important;max-height:72px!important;flex:0 0 72px!important;overflow:auto!important;margin:0!important;padding:0!important;
 }
 html:root[data-appearance] body main.server-auth.auth-compact .auth-card .auth-message-slot .auth-error:not(:empty) {
  box-sizing:border-box!important;margin:0!important;padding:10px 12px!important;line-height:1.4!important;border-radius:8px!important;
 }
}

/* V865: translated back labels must not inherit the large symbol-button glyph style. */
.server-auth .auth-card .auth-back-with-label span{
 font:inherit!important;
 letter-spacing:inherit!important;
}

/* V869 — shared authentication typography, including every continuation screen.
   ID specificity counters auth-footer/device rules; children inherit the button,
   never the large ui-symbol-button glyph size. */
@media screen {
 html:root body main.server-auth .auth-card :is(.btn,#mfaLoginBack,#resetBack,#mfaSetupBack,.auth-back-with-label){font-size:12px!important;font-weight:600!important;line-height:1.4!important;text-decoration:none!important}
 html:root body main.server-auth .auth-card :is(.btn,#mfaLoginBack,#resetBack,#mfaSetupBack,.auth-back-with-label) span{font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-decoration:none!important}
}