html[data-auth-login="true"] {
    background: #060818;
    min-height: 100%;
}

html[data-auth-login="true"],
html[data-auth-login="true"] body {
    max-width: 100%;
    overflow-x: hidden;
}

html[data-auth-login="true"] body {
    background: #060818;
    color: #f7f9ff;
    font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
}

.auth-login-preload-cover {
    background: #ecefff;
    bottom: 0;
    left: 0;
    opacity: 1;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 180ms ease, visibility 180ms ease;
    visibility: visible;
    width: 100%;
    z-index: 999999;
}

.auth-login-preload-cover .loader {
    align-items: center;
    display: flex;
    height: 100vh;
    height: 100svh;
    justify-content: center;
}

.auth-login-preload-dot {
    animation: authPulse 950ms ease-in-out infinite;
    background: #304aca;
    border-radius: 999px;
    display: block;
    height: 24px;
    width: 24px;
}

html[data-auth-theme="dark"] .auth-login-preload-cover {
    background: #060818;
}

html[data-auth-theme="dark"] .auth-login-preload-dot {
    background: #b8cdfd;
}

html[data-auth-login-ready="true"] .auth-login-preload-cover,
html[data-auth-login-ready="timeout"] .auth-login-preload-cover,
.auth-login-preload-cover.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.auth-login {
    align-items: center;
    background-color: #060818;
    background-image: none;
    box-sizing: border-box;
    color: #f7f9ff;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 36px 18px 58px;
    position: relative;
    width: 100%;
}

.auth-diagnostics-page {
    align-items: center;
    background-color: #060818;
    box-sizing: border-box;
    color: #f7f9ff;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 36px 18px 78px;
    position: relative;
    width: 100%;
}

html[data-auth-theme="light"] .auth-login {
    background-color: #f1f2f3;
    background-image: url("/Images/PortalRefresh/0.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

html[data-auth-theme="light"] .auth-diagnostics-page {
    background: #f1f5f9;
    color: #172033;
}

html[data-auth-theme="light"] .auth-login[data-bg="1"] { background-image: url("/Images/PortalRefresh/1.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="2"] { background-image: url("/Images/PortalRefresh/2.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="3"] { background-image: url("/Images/PortalRefresh/3.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="4"] { background-image: url("/Images/PortalRefresh/4.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="5"] { background-image: url("/Images/PortalRefresh/5.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="6"] { background-image: url("/Images/PortalRefresh/6.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="7"] { background-image: url("/Images/PortalRefresh/7.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="8"] { background-image: url("/Images/PortalRefresh/8.jpg"); }
html[data-auth-theme="light"] .auth-login[data-bg="9"] { background-image: url("/Images/PortalRefresh/9.jpg"); }

.auth-login-panel {
    align-items: center;
    display: flex;
    justify-content: center;
    width: min(100%, 520px);
}

.auth-login-card {
    background: #060818;
    border: solid 1px rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    max-width: 480px;
    padding: 25px;
    position: relative;
    text-align: center;
    width: 100%;
}

html[data-auth-theme="light"] .auth-login-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.auth-login-brand {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 80%;
}

.auth-login-greeting {
    padding: 20px 0 22px;
}

.auth-login-greeting h1 {
    color: #bfc9d4;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    margin: 0 0 8px;
}

.auth-login-greeting p {
    color: #888ea8;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px;
    margin: 0;
}

html[data-auth-theme="light"] .auth-login-greeting h1,
html[data-auth-theme="light"] .auth-login-field label {
    color: #172033;
}

html[data-auth-theme="light"] .auth-login-greeting p,
html[data-auth-theme="light"] .auth-login-helper,
html[data-auth-theme="light"] .auth-login-links,
html[data-auth-theme="light"] .auth-login-passkey-status {
    color: #667085;
}

.auth-login-form {
    text-align: left;
}

.auth-login-error {
    color: #ffb4b4;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    margin: 0 0 14px;
    min-height: 19px;
    text-align: center;
}

.auth-login-helper,
.auth-login-passkey-status {
    color: #888ea8;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px;
    margin: 0 0 16px;
    text-align: center;
}

.auth-login-passkey-status {
    min-height: 19px;
}

.auth-login-passkey-status[data-auth-passkey-error="true"] {
    color: #ffb4b4;
}

html[data-auth-theme="light"] .auth-login-passkey-status[data-auth-passkey-error="true"] {
    color: #b42318;
}

html[data-auth-theme="light"] .auth-login-error {
    color: #b42318;
}

.auth-login-field {
    margin-bottom: 16px;
    position: relative;
}

.auth-login-field label {
    color: #bfc9d4;
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06rem;
    line-height: 14px;
    margin: 0 0 8px;
}

.auth-login-field-icon {
    color: #888ea8;
    height: 18px;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 36px;
    width: 18px;
    z-index: 1;
}

.auth-login-field-icon svg {
    display: block;
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.auth-login-input {
    background: #1b2e4b !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: #d3d3d3 !important;
    display: block;
    font-size: 16px !important;
    font-weight: 600;
    height: 48px;
    line-height: 48px;
    outline: none;
    padding: 0 12px !important;
    text-align: left;
    width: 100%;
}

.auth-login-field-with-icon .auth-login-input {
    padding-left: 42px !important;
}

.auth-login-input::placeholder {
    color: #8c98ad;
    opacity: 1;
}

.auth-login-input:focus {
    box-shadow: 0 0 0 2px rgba(27, 85, 226, 0.46) !important;
}

html[data-auth-theme="light"] .auth-login-input {
    background: #f3f6fb !important;
    border: solid 1px #d9e2ec !important;
    color: #172033 !important;
}

.auth-login-input[readonly] {
    cursor: default;
    opacity: 0.84;
}

.auth-login-captcha {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
    min-height: 65px;
}

.auth-login-captcha-widget {
    min-height: 65px;
}

.auth-login-captcha-unavailable {
    align-items: center;
    color: #ffb4b4;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

html[data-auth-theme="light"] .auth-login-captcha-unavailable {
    color: #b42318;
}

.auth-login-button {
    align-items: center;
    background: #1b55e2 !important;
    border: solid 1px #1b55e2 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px !important;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    line-height: 20px;
    margin-top: 4px;
    padding: 14px 10px !important;
    text-decoration: none;
    width: 100%;
}

.auth-login-button:hover,
.auth-login-button:focus {
    background: #1647c1 !important;
    border-color: #1647c1 !important;
    color: #ffffff !important;
}

.auth-login-button[data-auth-passkey-loading="true"],
.auth-login-button:disabled {
    cursor: progress;
    opacity: .86;
}

.auth-passkey-button-spinner {
    animation: auth-passkey-spin .85s linear infinite;
    border: 2px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    border-top-color: #ffffff;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: 16px;
    margin-right: 8px;
    width: 16px;
}

@keyframes auth-passkey-spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-login-secondary,
.auth-login-secondary:visited {
    color: #bfc9d4;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    margin-top: 16px;
    text-align: center;
    text-decoration: none;
}

.auth-login-secondary:hover,
.auth-login-secondary:focus {
    color: #ffffff;
    text-decoration: underline;
}

html[data-auth-theme="light"] .auth-login-secondary,
html[data-auth-theme="light"] .auth-login-secondary:visited {
    color: #304aca;
}

html[data-auth-theme="light"] .auth-login-secondary:hover,
html[data-auth-theme="light"] .auth-login-secondary:focus {
    color: #263ca7;
}

.auth-login-code-input {
    letter-spacing: 0;
    text-align: left !important;
}

.auth-mobile-enrollment .auth-login-helper {
    margin: 0 0 16px;
    text-align: center;
}

.auth-login-card:has(.auth-mobile-enrollment) .auth-login-greeting {
    padding-bottom: 11px;
}

.auth-login-card:has(.auth-mobile-enrollment) .auth-login-error:empty {
    margin-bottom: 16px;
    min-height: 0;
}

.auth-mobile-enrollment-consent {
    align-items: flex-start;
    color: #bfc9d4;
    display: flex;
    font-size: 12px;
    gap: 10px;
    line-height: 1.45;
    margin: 2px 0 18px;
    text-align: left;
}

.auth-mobile-enrollment-consent input[type="checkbox"] {
    flex: 0 0 auto;
    height: 18px;
    margin: 1px 0 0;
    width: 18px;
}

.auth-mobile-enrollment-consent label {
    cursor: pointer;
    flex: 1 1 auto;
}

html[data-auth-theme="light"] .auth-mobile-enrollment-consent {
    color: #475467;
}

.auth-login-mfa-alternatives {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: center;
}

.auth-login-mfa-alternatives .auth-login-secondary {
    display: inline-block;
    margin-top: 14px;
}

.auth-login-footer {
    color: #888ea8;
    font-size: 12px;
    font-style: italic;
    line-height: 17px;
    padding-top: 10px;
    text-align: center;
}

html[data-auth-theme="light"] .auth-login-footer {
    color: #667085;
}

.auth-app-landing-card {
    max-width: min(92vw, 520px);
}

.auth-app-landing-card .auth-login-brand {
    margin-bottom: 18px;
}

.auth-app-session-note {
    color: #aab3cf;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    margin: 0 0 16px;
    text-align: center;
}

html[data-auth-theme="light"] .auth-app-session-note {
    color: #475467;
}

.auth-app-session-note a,
.auth-app-session-note a:visited {
    color: #b8cdfd;
    font-weight: 700;
    text-decoration: none;
}

html[data-auth-theme="light"] .auth-app-session-note a,
html[data-auth-theme="light"] .auth-app-session-note a:visited {
    color: #304aca;
}

.auth-app-grid {
    display: grid;
    gap: 10px;
    width: 100%;
}

.auth-app-card,
.auth-app-card:visited {
    border: 1px solid rgba(184, 205, 253, 0.24);
    border-radius: 8px;
    color: #f8f9ff;
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    text-align: left;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.auth-app-card:hover,
.auth-app-card:focus {
    background: rgba(184, 205, 253, 0.1);
    border-color: rgba(184, 205, 253, 0.48);
    transform: translateY(-1px);
}

.auth-app-card-section-break {
    margin-top: 40px;
}

html[data-auth-theme="light"] .auth-app-card,
html[data-auth-theme="light"] .auth-app-card:visited {
    border-color: rgba(48, 74, 202, 0.18);
    color: #182230;
}

html[data-auth-theme="light"] .auth-app-card:hover,
html[data-auth-theme="light"] .auth-app-card:focus {
    background: rgba(48, 74, 202, 0.06);
    border-color: rgba(48, 74, 202, 0.32);
}

.auth-app-card-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 20px;
}

.auth-app-card-description {
    color: #aab3cf;
    font-size: 12px;
    line-height: 17px;
}

html[data-auth-theme="light"] .auth-app-card-description {
    color: #667085;
}

.auth-app-diagnostics {
    border-top: 1px solid rgba(184, 205, 253, 0.14);
    color: #aab3cf;
    display: flex;
    flex-direction: column;
    font-style: normal;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
}

.auth-app-diagnostics-label {
    color: #888ea8;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04rem;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
}

.auth-app-diagnostics-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.auth-app-diagnostics a,
.auth-app-diagnostics a:visited {
    align-items: center;
    border: 1px solid rgba(184, 205, 253, 0.24);
    border-radius: 999px;
    color: #dbe5ff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    line-height: 16px;
    padding: 7px 10px;
    text-decoration: none;
}

.auth-app-diagnostics a:hover,
.auth-app-diagnostics a:focus {
    background: rgba(184, 205, 253, 0.1);
    border-color: rgba(184, 205, 253, 0.42);
    color: #ffffff;
}

.auth-app-diagnostic-dot {
    background: #2ecc71;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.16);
    display: inline-block;
    height: 7px;
    width: 7px;
}

html[data-auth-theme="light"] .auth-app-diagnostics {
    border-top-color: rgba(48, 74, 202, 0.14);
    color: #667085;
}

html[data-auth-theme="light"] .auth-app-diagnostics-label {
    color: #667085;
}

html[data-auth-theme="light"] .auth-app-diagnostics a,
html[data-auth-theme="light"] .auth-app-diagnostics a:visited {
    border-color: rgba(48, 74, 202, 0.18);
    color: #304aca;
}

html[data-auth-theme="light"] .auth-app-diagnostics a:hover,
html[data-auth-theme="light"] .auth-app-diagnostics a:focus {
    background: rgba(48, 74, 202, 0.06);
    border-color: rgba(48, 74, 202, 0.32);
    color: #263ca7;
}

.auth-status-card {
    background: #060818;
    border: solid 1px rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
    max-width: 760px;
    padding: 26px;
    width: min(100%, 760px);
}

html[data-auth-theme="light"] .auth-status-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
}

.auth-status-header {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.auth-status-title {
    color: #f8f9ff;
    font-size: 26px;
    font-weight: 800;
    line-height: 32px;
    margin: 0 0 5px;
}

html[data-auth-theme="light"] .auth-status-title {
    color: #182230;
}

.auth-status-subtitle {
    color: #aab3cf;
    font-size: 13px;
    font-weight: 650;
    line-height: 19px;
    margin: 0;
}

html[data-auth-theme="light"] .auth-status-subtitle {
    color: #667085;
}

.auth-status-pill {
    align-items: center;
    border: 1px solid rgba(46, 204, 113, 0.34);
    border-radius: 999px;
    color: #dff8e8;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 850;
    gap: 8px;
    line-height: 16px;
    padding: 8px 11px;
}

.auth-status-pill[data-auth-status="degraded"] {
    border-color: rgba(255, 184, 77, 0.42);
    color: #ffe8b3;
}

.auth-status-pill-dot {
    background: #2ecc71;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.16);
    height: 8px;
    width: 8px;
}

.auth-status-pill[data-auth-status="degraded"] .auth-status-pill-dot {
    background: #ffb84d;
    box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.16);
}

html[data-auth-theme="light"] .auth-status-pill {
    color: #067647;
}

html[data-auth-theme="light"] .auth-status-pill[data-auth-status="degraded"] {
    color: #b54708;
}

.auth-status-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-status-metric {
    border: 1px solid rgba(184, 205, 253, 0.18);
    border-radius: 8px;
    padding: 14px;
}

html[data-auth-theme="light"] .auth-status-metric {
    border-color: rgba(48, 74, 202, 0.14);
}

.auth-status-metric-value {
    color: #ffffff;
    display: block;
    font-size: 24px;
    font-weight: 850;
    line-height: 28px;
}

html[data-auth-theme="light"] .auth-status-metric-value {
    color: #182230;
}

.auth-status-metric-label {
    color: #aab3cf;
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 17px;
    margin-top: 4px;
}

html[data-auth-theme="light"] .auth-status-metric-label {
    color: #667085;
}

.auth-status-detail-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.auth-status-detail {
    align-items: center;
    border-top: 1px solid rgba(184, 205, 253, 0.12);
    color: #dbe5ff;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: space-between;
    line-height: 18px;
    padding-top: 8px;
}

html[data-auth-theme="light"] .auth-status-detail {
    border-top-color: rgba(48, 74, 202, 0.12);
    color: #344054;
}

.auth-status-detail strong {
    color: #f8f9ff;
}

html[data-auth-theme="light"] .auth-status-detail strong {
    color: #182230;
}

.auth-status-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.auth-status-nav a,
.auth-status-nav a:visited {
    border: 1px solid rgba(184, 205, 253, 0.22);
    border-radius: 999px;
    color: #dbe5ff;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    padding: 7px 10px;
    text-decoration: none;
}

.auth-status-nav a:hover,
.auth-status-nav a:focus {
    background: rgba(184, 205, 253, 0.1);
    color: #ffffff;
}

html[data-auth-theme="light"] .auth-status-nav a,
html[data-auth-theme="light"] .auth-status-nav a:visited {
    border-color: rgba(48, 74, 202, 0.18);
    color: #304aca;
}

html[data-auth-theme="light"] .auth-status-nav a:hover,
html[data-auth-theme="light"] .auth-status-nav a:focus {
    background: rgba(48, 74, 202, 0.06);
    color: #263ca7;
}

.auth-branding-footer {
    bottom: 0;
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    justify-content: center;
    left: 0;
    max-height: 48px;
    pointer-events: none;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 18;
}

.auth-branding-footer-panel {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 11px;
    line-height: 16px;
    max-width: min(92vw, 400px);
    padding: 6px 12px 7px;
    pointer-events: auto;
    width: 400px;
}

.auth-branding-footer a,
.auth-branding-footer a:visited,
.auth-branding-footer a:hover {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.auth-branding-footer-heart {
    color: #EF0107;
    display: inline-block;
    height: 14px;
    margin: 0 1px;
    text-shadow: -5px 5px 0 #00e6e6, -10px 10px 0 #01cccc, -15px 15px 0 #00bdbd;
    vertical-align: -2px;
    width: 14px;
}

.auth-mfa-resend {
    float: right;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

.auth-mfa-resend a,
.auth-mfa-resend a:visited,
.auth-mfa-resend a:hover {
    color: #b8cdfd !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
}

.auth-mfa-resend a[data-auth-mfa-cooling-down="true"] {
    color: #888ea8 !important;
    cursor: wait;
    pointer-events: auto;
}

html[data-auth-theme="light"] .auth-mfa-resend a,
html[data-auth-theme="light"] .auth-mfa-resend a:visited,
html[data-auth-theme="light"] .auth-mfa-resend a:hover {
    color: #1b55e2 !important;
}

.auth-login-loading-overlay {
    align-items: center;
    background: rgba(6, 8, 24, 0.58);
    border-radius: 15px;
    bottom: 0;
    color: #ffffff;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}

.auth-login-loading-overlay svg {
    animation: authSpin 1s linear infinite;
    height: 24px;
    width: 24px;
}

.auth-login-loading-overlay span {
    font-size: 13px;
    font-weight: 700;
}

.auth-login-links {
    color: #888ea8;
    font-size: 12px;
    line-height: 18px;
    margin: 16px 0 0;
    text-align: center;
}

.auth-login-links code {
    background: rgba(136, 142, 168, 0.18);
    border-radius: 4px;
    color: inherit;
    padding: 2px 5px;
}

.auth-login-link-list {
    display: grid;
    gap: 7px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.auth-login-link-list li {
    color: #888ea8;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.auth-login-link-list code {
    background: rgba(136, 142, 168, 0.18);
    border-radius: 4px;
    color: inherit;
    padding: 2px 5px;
}

.auth-theme-toggle {
    align-items: center;
    background: rgba(6, 8, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    bottom: 20px;
    box-shadow: 0 14px 28px rgba(6, 8, 24, 0.24);
    color: #f7f9ff;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: fixed;
    right: 20px;
    width: 42px;
    z-index: 20;
}

.auth-theme-toggle-icon {
    display: block;
    height: 20px;
    position: relative;
    width: 20px;
}

.auth-theme-icon {
    display: none;
    fill: none;
    height: 20px;
    left: 0;
    position: absolute;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    top: 0;
    width: 20px;
}

html[data-auth-theme="dark"] .auth-theme-icon-sun {
    display: block;
}

html[data-auth-theme="light"] .auth-theme-icon-moon {
    display: block;
}

html[data-auth-theme="light"] .auth-theme-toggle {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(15, 23, 42, 0.14);
    color: #172033;
}

@keyframes authPulse {
    0%, 100% {
        opacity: 0.34;
        transform: scale(0.78);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .auth-login {
        align-items: center;
        padding: 24px 14px 74px;
        padding: max(18px, env(safe-area-inset-top)) 14px max(74px, calc(62px + env(safe-area-inset-bottom)));
    }

    .auth-login-panel {
        width: 100%;
    }

    .auth-login-card {
        border-radius: 12px;
        padding: 20px 16px;
    }

    .auth-login-brand {
        max-width: min(82%, 280px);
    }

    .auth-login-greeting {
        padding: 16px 0 18px;
    }

    .auth-login-greeting h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .auth-theme-toggle {
        bottom: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        right: 14px;
    }

    .auth-status-card {
        padding: 20px 16px;
    }

    .auth-status-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-status-title {
        font-size: 22px;
        line-height: 28px;
    }

    .auth-status-grid {
        grid-template-columns: 1fr;
    }

    .auth-branding-footer.auth-diagnostics-footer {
        background: #060818;
        max-height: none;
        padding: 0 0 12px;
        position: static;
    }

    html[data-auth-theme="light"] .auth-branding-footer.auth-diagnostics-footer {
        background: #f1f5f9;
    }

    .auth-branding-footer.auth-diagnostics-footer .auth-branding-footer-panel {
        border-radius: 10px;
    }

    .auth-branding-footer-panel {
        font-size: 10px;
        line-height: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 520px) and (max-height: 620px) {
    .auth-login {
        padding-bottom: 64px;
    }

    .auth-login-card {
        padding-bottom: 18px;
        padding-top: 18px;
    }

    .auth-login-brand {
        max-width: 220px;
    }

    .auth-login-greeting {
        padding: 12px 0 14px;
    }

    .auth-login-field {
        margin-bottom: 12px;
    }
}

.auth-login-greeting p {
    margin-bottom: 0;
}

.auth-login-form[data-auth-passkey-panel="true"] {
    gap: 10px;
}

.auth-login-form[data-auth-passkey-panel="true"] .auth-login-button {
    margin-top: 0;
}

.auth-login-form[data-auth-passkey-panel="true"] .auth-login-passkey-status:empty {
    display: none;
}

.auth-login-form[data-auth-passkey-panel="true"] .auth-login-secondary {
    margin-top: 10px;
}