@layer login_surface {
/* A self-contained sign-in surface: readable in both application themes. */
html[data-theme] body.login-body { margin:0 !important; min-width:0 !important; color:#e7edf8 !important; font-family:var(--gui-font-sans) !important; font-size:16px !important; }
html[data-theme] body.login-body .login-shell { width:min(1000px,calc(100% - 32px)) !important; max-width:1000px !important; margin:32px auto !important; padding:0 !important; }
html[data-theme] body.login-body .login-panel.login-panel--professional { display:grid !important; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr) !important; align-items:start !important; gap:24px !important; padding:24px !important; border:1px solid #334059 !important; background:#0d1524 !important; border-radius:22px !important; overflow:visible !important; }
html[data-theme] body.login-body .login-reference-hero { display:flex !important; flex-direction:column !important; gap:20px !important; min-width:0 !important; min-height:0 !important; padding:12px !important; background:transparent !important; border:0 !important; color:#e7edf8 !important; }
html[data-theme] body.login-body .login-reference-hero p { margin:0 !important; font-size:16px !important; line-height:1.6 !important; color:#c8d5eb !important; }
html[data-theme] body.login-body .login-reference-hero .login-reference-tagline { font-size:22px !important; font-weight:650 !important; color:#dde5ff !important; min-height:0 !important; }
html[data-theme] body.login-body .login-reference-brand { display:block !important; min-width:0 !important; }
html[data-theme] body.login-body .login-reference-brand__marks { display:flex !important; align-items:center !important; gap:16px !important; margin-bottom:22px !important; }
html[data-theme] body.login-body .login-reference-brand__logo { width:190px !important; height:auto !important; max-width:calc(100% - 76px) !important; border:2px solid #389f81 !important; border-radius:14px !important; padding:8px !important; background:white !important; }
html[data-theme] body.login-body .login-reference-brand__product-logo { width:56px !important; height:56px !important; object-fit:contain !important; }
html[data-theme] body.login-body .login-wordmark { font-size:34px !important; line-height:1.25 !important; margin:10px 0 !important; }
html[data-theme] body.login-body .login-wordmark__wand { display:none !important; }
html[data-theme] body.login-body .login-reference-brand__eyebrow { font-size:12px !important; letter-spacing:.12em !important; color:#9aaef1 !important; }
html[data-theme] body.login-body .login-signin-guide { padding:18px !important; margin:0 !important; border:1px solid #35445f !important; border-radius:14px !important; background:#172235 !important; }
html[data-theme] body.login-body .login-signin-guide h2 { color:#edf2ff !important; font-size:18px !important; margin:0 0 10px !important; }
html[data-theme] body.login-body .login-signin-guide ol { padding-left:22px !important; margin:0 0 12px !important; }
html[data-theme] body.login-body .login-signin-guide li { font-size:15px !important; line-height:1.6 !important; }
html[data-theme] body.login-body .login-form { box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-content:start !important; align-self:start !important; grid-auto-rows:max-content !important; gap:16px !important; min-width:0 !important; width:100% !important; margin:0 !important; padding:24px !important; background:#fff !important; color:#172b4d !important; border:1px solid #dce3ef !important; border-radius:16px !important; color-scheme:light !important; }
html[data-theme] body.login-body .login-form :is(h2,h3,label,strong,.login-system-user__value) { color:#172b4d !important; text-shadow:none !important; }
html[data-theme] body.login-body .login-form :is(p,small,.muted-copy,.enterprise-auth-note,.login-security-links,.login-security-links span) { color:#52647c !important; text-shadow:none !important; }
html[data-theme] body.login-body .login-form :is(p,li,label,input,button) { font-size:16px !important; line-height:1.5 !important; }
html[data-theme] body.login-body .login-form :is(h2,h3) { font-size:24px !important; line-height:1.3 !important; margin:0 !important; overflow-wrap:normal !important; word-break:normal !important; }
html[data-theme] body.login-body .login-form .eyebrow { font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; color:#405ac0 !important; margin:0 0 6px !important; }
html[data-theme] body.login-body .enterprise-auth-card { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important; padding:0 !important; margin:0 !important; background:transparent !important; color:#172b4d !important; border:0 !important; box-shadow:none !important; min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-card__head { display:flex !important; gap:12px !important; align-items:center !important; min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-card__head > div { min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-card__icon { width:40px !important; height:40px !important; min-width:40px !important; border-radius:12px !important; background:#4d57db !important; color:white !important; font-size:20px !important; }
html[data-theme] body.login-body .login-system-user { display:grid !important; gap:4px !important; min-width:0 !important; background:#f1f4fc !important; border:1px solid #dbe3f0 !important; border-radius:10px !important; padding:12px 16px !important; }
html[data-theme] body.login-body .login-system-user__label { color:#52647c !important; font-size:12px !important; }
html[data-theme] body.login-body .login-system-user__value { font-size:17px !important; overflow-wrap:anywhere !important; }
html[data-theme] body.login-body .enterprise-auth-existing-account { display:flex !important; align-items:start !important; gap:10px !important; padding:12px !important; border:1px solid #a8d5c3 !important; border-radius:10px !important; background:#edf8f2 !important; color:#255b45 !important; }
html[data-theme] body.login-body .enterprise-auth-existing-account span { font-size:14px !important; line-height:1.5 !important; color:#255b45 !important; }
html[data-theme] body.login-body .enterprise-auth-existing-account__icon { display:none !important; }
html[data-theme] body.login-body .enterprise-auth-enrollment { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:16px !important; min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-qr-panel { display:flex !important; flex-direction:column !important; gap:10px !important; align-items:center !important; justify-content:start !important; min-width:0 !important; min-height:0 !important; padding:14px !important; border:1px solid #dce3ef !important; border-radius:12px !important; background:#f7f9fd !important; }
html[data-theme] body.login-body .enterprise-auth-qr-frame { display:block !important; width:min(224px,100%) !important; height:auto !important; padding:0 !important; margin:0 !important; border:0 !important; background:white !important; }
html[data-theme] body.login-body #authenticatorQrCode { display:block !important; width:100% !important; height:auto !important; max-width:224px !important; aspect-ratio:1 !important; }
html[data-theme] body.login-body .enterprise-auth-qr-corners { display:none !important; }
html[data-theme] body.login-body .enterprise-auth-scan-badge { font-size:13px !important; color:#405ac0 !important; }
html[data-theme] body.login-body .enterprise-auth-steps { display:grid !important; grid-template-columns:minmax(0,1fr) !important; padding:0 !important; margin:0 !important; gap:8px !important; list-style:none !important; }
html[data-theme] body.login-body .enterprise-auth-steps li { display:flex !important; gap:10px !important; padding:10px 12px !important; border:1px solid #dce3ef !important; background:#f7f9fd !important; border-radius:10px !important; min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-steps li > span { flex:0 0 24px !important; width:24px !important; height:24px !important; background:#e9edff !important; color:#405ac0 !important; font-size:14px !important; border-radius:50% !important; text-align:center !important; }
html[data-theme] body.login-body .enterprise-auth-steps li div { min-width:0 !important; }
html[data-theme] body.login-body .enterprise-auth-steps :is(strong,small) { display:block !important; font-size:14px !important; line-height:1.5 !important; word-break:normal !important; }
html[data-theme] body.login-body .enterprise-auth-manual-key { min-width:0 !important; padding:10px !important; background:#f1f4fc !important; border:1px solid #dce3ef !important; border-radius:10px !important; color:#172b4d !important; }
html[data-theme] body.login-body #totpSetupKey { overflow-wrap:anywhere !important; word-break:break-all !important; color:#172b4d !important; }
html[data-theme] body.login-body .login-input-shell { min-width:0 !important; width:100% !important; height:auto !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
html[data-theme] body.login-body .login-form input:not([type=hidden]):not([type=checkbox]) { box-sizing:border-box !important; width:100% !important; height:46px !important; min-height:46px !important; padding:10px 14px !important; border:1px solid #9eafc7 !important; border-radius:9px !important; background:#fff !important; color:#172b4d !important; font-size:16px !important; text-shadow:none !important; }
html[data-theme] body.login-body .login-form input::placeholder { color:#687a93 !important; opacity:1 !important; }
html[data-theme] body.login-body .login-form input:focus-visible { outline:3px solid #b6c8ff !important; outline-offset:2px !important; }
html[data-theme] body.login-body .enterprise-auth-actions { display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important; }
html[data-theme] body.login-body .login-form button { min-height:44px !important; height:auto !important; padding:10px 14px !important; font-size:15px !important; line-height:1.4 !important; white-space:normal !important; border-radius:9px !important; }
html[data-theme] body.login-body .login-form .primary-button { width:100% !important; background:#4653cc !important; color:#fff !important; border:1px solid #4653cc !important; }
html[data-theme] body.login-body .login-form :is(.toolbar-button,.text-button) { color:#354a9a !important; background:#f1f4ff !important; border:1px solid #c7d2eb !important; }
html[data-theme] body.login-body .login-form :is(a,.login-security-links__item--recovery > span) { color:#354a9a !important; }
html[data-theme] body.login-body .login-security-links__item { border-color:#c7d2eb !important; }
@media(min-width:1100px) { html[data-theme] body.login-body .enterprise-auth-enrollment { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important; align-items:start !important; } }
@media(max-width:850px) {
 html[data-theme] body.login-body .login-panel.login-panel--professional { grid-template-columns:minmax(0,1fr) !important; padding:18px !important; gap:18px !important; }
 html[data-theme] body.login-body .login-reference-hero { gap:8px !important; padding:0 !important; }
 html[data-theme] body.login-body .login-reference-brand__marks { margin-bottom:12px !important; }
 html[data-theme] body.login-body :is(.login-signin-guide,.login-reference-summary,.login-reference-benefits,.login-reference-tagline) { display:none !important; }
}
@media(max-width:480px) {
 html[data-theme] body.login-body .login-shell { width:calc(100% - 16px) !important; margin:8px auto !important; }
 html[data-theme] body.login-body .login-panel.login-panel--professional { padding:12px !important; border-radius:14px !important; }
 html[data-theme] body.login-body .login-form { padding:16px !important; }
 html[data-theme] body.login-body .login-reference-brand__logo { width:160px !important; }
 html[data-theme] body.login-body .enterprise-auth-actions > button { width:100% !important; }
 html[data-theme] body.login-body .login-form h2 { font-size:22px !important; }
}
@media(prefers-reduced-motion:reduce) { .login-body *, .login-body *::before, .login-body *::after { animation:none !important; transition:none !important; } }

html[data-theme] body.login-body .login-reference-hero, html[data-theme] body.login-body .login-form { grid-column:auto !important; grid-row:auto !important; }
html[data-theme] body.login-body .login-footer { grid-column:1/-1 !important; grid-row:auto !important; }
html[data-theme] body.login-body .login-username-help__popup { width:min(260px,calc(100vw - 80px)) !important; left:auto !important; right:0 !important; }

}
/* Glass sign-in surfaces reveal the existing data-center photograph. */
@layer login_surface {
 html[data-theme] body.login-body .login-panel.login-panel--professional {
  background:rgba(9,18,32,.42) !important; border-color:rgba(181,205,235,.28) !important;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
 }
 html[data-theme] body.login-body .login-form {
  background:rgba(13,24,42,.68) !important; color:#f1f5ff !important;
  border-color:rgba(181,205,235,.35) !important; color-scheme:dark !important;
  box-shadow:0 16px 40px rgba(0,0,0,.18) !important;
 }
 html[data-theme] body.login-body .login-signin-guide { background:rgba(20,35,55,.58) !important; border-color:rgba(181,205,235,.28) !important; }
 html[data-theme] body.login-body .login-form :is(h2,h3,label,strong,.login-system-user__value) { color:#f1f5ff !important; }
 html[data-theme] body.login-body .login-form :is(p,small,.muted-copy,.enterprise-auth-note,.login-security-links,.login-security-links span) { color:#cddbef !important; }
 html[data-theme] body.login-body .enterprise-auth-card { color:#f1f5ff !important; }
 html[data-theme] body.login-body .login-form input:not([type=hidden]):not([type=checkbox]) {
  background:rgba(6,16,30,.74) !important; color:#f1f5ff !important; border-color:#8295b2 !important;
 }
 html[data-theme] body.login-body .login-form input::placeholder { color:#bdcbe0 !important; }
 html[data-theme] body.login-body .login-form :is(.toolbar-button,.text-button) { background:rgba(37,55,82,.85) !important; color:#e4edff !important; border-color:#8295b2 !important; }
 html[data-theme] body.login-body .login-form :is(a,.login-security-links__item--recovery > span) { color:#b7d4ff !important; }
 html[data-theme] body.login-body .login-service-status > div { background:rgba(20,35,55,.4) !important; border-color:rgba(181,205,235,.25) !important; }
 html[data-theme] body.login-body .login-service-status strong { color:#f1f5ff !important; }
 html[data-theme] body.login-body .login-service-status small { color:#cddbef !important; }
 html[data-theme] body.login-body .login-footer { background:rgba(6,16,30,.4) !important; }
}

/* Preserve readable text on the light cards inside the glass sign-in form. */
@layer login_surface {
 html[data-theme] body.login-body .login-form .login-system-user__value { color:#172b4d !important; }
 html[data-theme] body.login-body .login-form .enterprise-auth-steps strong { color:#172b4d !important; }
 html[data-theme] body.login-body .login-form .enterprise-auth-steps small { color:#52647c !important; }
 html[data-theme] body.login-body .login-form .enterprise-auth-existing-account strong { color:#255b45 !important; }
 html[data-theme] body.login-body .login-form .enterprise-auth-manual-key summary { color:#40577a !important; }
}

/* Workspace context follows the sign-in area on desktop, tablet and phone. */
@layer login_surface {
 html[data-theme] body.login-body .login-workspace-context { grid-column:1/-1 !important; min-width:0; margin:0; padding:16px 4px 0; border-top:1px solid rgba(181,205,235,.28); color:#c8d5eb; text-align:center; }
 html[data-theme] body.login-body .login-workspace-context p { margin:0; font-size:16px; line-height:1.6; }
 html[data-theme] body.login-body .login-workspace-context__benefits { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; list-style:none; margin:12px 0 0; padding:0; }
 html[data-theme] body.login-body .login-workspace-context__benefits li { display:flex; align-items:baseline; gap:8px; margin:0; padding:0; color:#c8d5eb; font-size:16px; line-height:1.5; }
 html[data-theme] body.login-body .login-workspace-context__benefits li::before { content:"\2713"; color:#6ee7a0; font-weight:700; }
 @media(max-width:480px) {
  html[data-theme] body.login-body .login-workspace-context { text-align:left; }
  html[data-theme] body.login-body .login-workspace-context__benefits { flex-direction:column; align-items:flex-start; }
 }
}

/* Enrollment/recovery can exceed a screen: always allow document scrolling. */
@layer login_surface {
 html:has(body.login-body), html[data-theme] body.login-body {
  height:auto !important; max-height:none !important; min-height:100dvh !important;
  overflow-y:auto !important; overflow-x:hidden !important;
 }
 html[data-theme] body.login-body { align-content:start !important; align-items:start !important; }
 html[data-theme] body.login-body :is(.login-shell,.login-panel.login-panel--professional,.login-form) {
  height:auto !important; max-height:none !important; overflow:visible !important;
 }
 html[data-theme] body.login-body .login-shell { margin-block:24px !important; }
 html[data-theme] body.login-body .login-form { scroll-margin-block:24px; }
 @media(max-width:480px) { html[data-theme] body.login-body .login-shell { margin-block:8px !important; } }
}

/* Compact sign-in spacing; keep code entry and verification together. */
@layer login_surface {
 html[data-theme] body.login-body .login-shell { margin-block:16px !important; }
 html[data-theme] body.login-body .login-panel.login-panel--professional { padding:18px !important; gap:16px !important; }
 html[data-theme] body.login-body .login-reference-hero { gap:14px !important; padding:8px !important; }
 html[data-theme] body.login-body .login-reference-brand__marks { margin-bottom:12px !important; gap:12px !important; }
 html[data-theme] body.login-body .login-reference-brand__logo { width:160px !important; }
 html[data-theme] body.login-body .login-reference-brand__product-logo { width:48px !important; height:48px !important; }
 html[data-theme] body.login-body .login-wordmark { font-size:30px !important; margin:6px 0 !important; }
 html[data-theme] body.login-body .login-reference-hero .login-reference-tagline { font-size:20px !important; line-height:1.45 !important; }
 html[data-theme] body.login-body .login-signin-guide { padding:14px !important; }
 html[data-theme] body.login-body .login-signin-guide ol { margin-bottom:8px !important; }
 html[data-theme] body.login-body .login-signin-guide li { line-height:1.5 !important; }
 html[data-theme] body.login-body .login-form { padding:18px !important; gap:12px !important; }
 html[data-theme] body.login-body .login-form :is(h2,h3) { font-size:22px !important; line-height:1.25 !important; }
 html[data-theme] body.login-body .enterprise-auth-card { gap:10px !important; }
 html[data-theme] body.login-body .enterprise-auth-card__head { gap:10px !important; }
 html[data-theme] body.login-body .enterprise-auth-card__icon { width:34px !important; height:34px !important; min-width:34px !important; font-size:18px !important; }
 html[data-theme] body.login-body .login-system-user { display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:4px 12px !important; padding:8px 12px !important; }
 html[data-theme] body.login-body .enterprise-auth-existing-account { padding:8px 12px !important; }
 html[data-theme] body.login-body .enterprise-auth-existing-account > div { display:block !important; line-height:1.4 !important; }
 html[data-theme] body.login-body .enterprise-auth-existing-account strong { margin-right:4px !important; }
 html[data-theme] body.login-body .enterprise-auth-existing-account :is(strong,span) { display:inline !important; font-size:14px !important; line-height:1.4 !important; }
 html[data-theme] body.login-body .enterprise-auth-existing-account .enterprise-auth-existing-account__icon { display:none !important; }
 html[data-theme] body.login-body .enterprise-auth-enrollment { gap:12px !important; align-items:start !important; }
 html[data-theme] body.login-body .enterprise-auth-qr-panel { padding:10px !important; gap:8px !important; }
 html[data-theme] body.login-body .enterprise-auth-qr-frame { width:min(176px,100%) !important; }
 html[data-theme] body.login-body #authenticatorQrCode { max-width:176px !important; }
 html[data-theme] body.login-body .enterprise-auth-enrollment-guide { display:grid; min-width:0; gap:8px; }
 html[data-theme] body.login-body .enterprise-auth-steps { gap:6px !important; }
 html[data-theme] body.login-body .enterprise-auth-steps li { padding:8px !important; gap:8px !important; }
 html[data-theme] body.login-body .enterprise-auth-steps :is(strong,small) { line-height:1.35 !important; }
 html[data-theme] body.login-body .enterprise-auth-manual-key { padding:8px !important; margin:0 !important; font-size:13px !important; }
 html[data-theme] body.login-body .enterprise-auth-manual-key summary { font-size:13px !important; line-height:1.5 !important; padding:0 !important; margin:0 !important; min-height:0 !important; }
 html[data-theme] body.login-body .enterprise-auth-code-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; min-width:0; }
 html[data-theme] body.login-body .enterprise-auth-code-entry .primary-button { width:auto !important; min-width:0 !important; margin:0 !important; height:46px !important; min-height:46px !important; padding:6px 10px !important; font-size:14px !important; line-height:1.2 !important; }
 html[data-theme] body.login-body .enterprise-auth-code-entry .login-submit-button__label { font-size:14px !important; line-height:1.2 !important; }
 html[data-theme] body.login-body .enterprise-auth-code-entry input { min-width:0 !important; letter-spacing:.15em !important; }
 html[data-theme] body.login-body .enterprise-auth-note { margin:0 !important; font-size:14px !important; line-height:1.4 !important; }
 html[data-theme] body.login-body .enterprise-auth-actions { gap:8px !important; justify-content:flex-start !important; }
 html[data-theme] body.login-body .enterprise-auth-actions > button { flex:0 1 auto !important; width:auto !important; margin:0 !important; padding:8px 10px !important; font-size:14px !important; }
 html[data-theme] body.login-body .login-workspace-context { padding-top:10px; }
 html[data-theme] body.login-body .login-workspace-context__benefits { margin-top:8px; gap:6px 20px; }
 @media(min-width:600px) { html[data-theme] body.login-body .enterprise-auth-enrollment { grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr) !important; } }
 @media(max-width:850px) {
  html[data-theme] body.login-body .login-reference-hero { padding:0 !important; gap:6px !important; }
 }
 @media(max-width:480px) {
  html[data-theme] body.login-body .login-shell { margin-block:8px !important; }
  html[data-theme] body.login-body .login-panel.login-panel--professional { padding:12px !important; gap:12px !important; }
  html[data-theme] body.login-body .login-form { padding:14px !important; }
  html[data-theme] body.login-body .enterprise-auth-code-entry { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:8px; }
 }
}

/* Consistent, decorative line icons; visible labels retain accessible names. */
@layer login_surface {
 html[data-theme] body.login-body .enterprise-auth-actions > button { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
 html[data-theme] body.login-body .enterprise-auth-actions .login-action-icon { display:block; width:16px !important; height:16px !important; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
 html[data-theme] body.login-body .enterprise-auth-actions .login-action-label { min-width:0; }
}

/* Keep email delivery/session notices with the form, outside the page grid. */
@layer login_surface {
 html[data-theme] body.login-body .login-form > .login-auth-notice { min-width:0; margin:0; padding:10px 12px; border:1px solid transparent; border-radius:10px; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
 html[data-theme] body.login-body .login-form > .login-auth-notice.success { color:#b9efd3; background:rgba(33,107,76,.25); border-color:rgba(110,231,160,.3); }
 html[data-theme] body.login-body .login-form > .login-auth-notice.warning { color:#f6dfaa; background:rgba(126,88,17,.22); border-color:rgba(246,205,111,.3); }
}

/* A narrower sign-in panel, centered whenever the screen has room. Auto
   margins collapse on short screens so recovery and MFA remain scrollable. */
@layer login_surface {
 html[data-theme] body.login-body {
  display:flex !important; flex-direction:column !important; align-items:center !important;
  box-sizing:border-box !important; padding:clamp(12px,2vw,24px) !important;
 }
 html[data-theme] body.login-body .login-shell {
  flex:0 0 auto; width:min(900px,100%) !important; max-width:900px !important;
  margin:auto !important;
 }
}