/* MNFRM Element Web v1.12.30 / welcome + login visual layer, v1.3 */
body.mnfrm-login-active .mx_AuthPage {
  position:relative !important;
  isolation:isolate;
  overflow-x:hidden; overflow-y:auto;
  background:#05090c !important;
}
body.mnfrm-login-active .mnfrm-login-layer {
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none; user-select:none;
  font-family:Consolas,"Liberation Mono",monospace;
}
body.mnfrm-login-active .mnfrm-login-canvas {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  background:#05090c;
}
body.mnfrm-login-active .mnfrm-login-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 85% 75% at 50% 48%,transparent 36%,rgba(0,0,0,.57) 100%);
}
body.mnfrm-login-active .mnfrm-login-scanlines {
  position:absolute; inset:0; opacity:.45;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 4px,rgba(4,6,8,.27) 5px);
}
body.mnfrm-login-active .mnfrm-login-corner {
  position:absolute; z-index:1; font:10px/1.7 Consolas,"Liberation Mono",monospace;
  letter-spacing:.15em; color:#607d80; opacity:0;
}
body.mnfrm-login-active .mnfrm-login-corner b {color:#b4dcda;font-weight:600}
body.mnfrm-login-active .mnfrm-login-corner em {font-style:normal;color:#f14c57}
body.mnfrm-login-active .mnfrm-tl{top:28px;left:33px}
body.mnfrm-login-active .mnfrm-tr{top:28px;right:33px;text-align:right}
body.mnfrm-login-active .mnfrm-bl{bottom:24px;left:32px}
body.mnfrm-login-active .mnfrm-br{bottom:24px;right:33px;text-align:right}
body.mnfrm-login-active .mnfrm-login-intro {
  position:absolute; top:calc(50% + 31px); left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none; font:11px Consolas,"Liberation Mono",monospace;
  letter-spacing:.26em; color:#91d4d0; white-space:nowrap; opacity:0;
}
body.mnfrm-login-active .mnfrm-login-reticle {
  position:absolute; left:50%; top:50%; width:10px;height:10px;
  border:1px solid rgba(117,229,226,.52);
  transform:translate(-50%,-50%) rotate(45deg);opacity:0;
}
/* Keep the genuine React authentication flow in front of the canvas. */
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage > .mx_AuthPage_modal {
  position:relative !important; z-index:2;
  margin:auto !important;
  width:min(660px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  background:linear-gradient(180deg,#0a1217,#0a1117) !important;
  border:1px solid rgba(83,121,125,.48);
  border-radius:16px !important;
  overflow:visible !important;
  flex-shrink:0;
  box-shadow:0 21px 75px rgba(0,0,0,.68),0 0 0 1px rgba(109,219,211,.06) inset,0 0 90px rgba(59,170,167,.08) !important;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage_modalBlur {display:none !important}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage_modalContent {
  display:flex; position:relative;
  background:transparent !important;
  border-radius:inherit;
  align-items:stretch;
  min-height:432px;
  overflow:visible !important;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage_modal_withBlur .mx_AuthPage_modalContent {
  background:transparent !important;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthHeader {
  flex:0 0 188px; width:188px; min-width:0;
  min-height:432px; height:auto;
  border-radius:16px 0 0 16px;
  overflow:visible;
  background:linear-gradient(159deg,#315654,#1a3438 56%,#0e1d23);
  border-right:1px solid rgba(83,121,125,.38);
  padding:28px 20px;
  color:#bce8e1;
  box-sizing:border-box;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthHeaderLogo img {max-width:100%}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody {
  flex:1 1 472px; width:auto; min-width:0;
  min-height:432px;
  border-radius:0 16px 16px 0 !important;
  box-sizing:border-box; padding:31px 40px 24px;
  background:linear-gradient(180deg,#081015,#0a1016) !important;
  color:#a8bec1;
  font-size:15px;
  --cpd-color-bg-canvas-default:#0a1117;
  --cpd-color-text-primary:#edf4f3;
  --cpd-color-text-secondary:#a8bec1;
  --cpd-color-text-action-accent:#b8e7e2;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody h1 {font-size:24px;line-height:1.3;color:#edf4f3;margin:0 0 18px}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody h2,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_ServerPicker {font-size:14px;color:#a8bec1}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_ServerPicker {border-bottom-color:rgba(77,103,109,.40)}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_ServerPicker .mx_ServerPicker_server {font-size:14px;color:#dce7e7}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field input,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field select,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody input[type=password],
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody input[type=text] {
  font-size:15px;min-height:41px;color:#edf4f3;
  background:#0d1920 !important;
  border-color:rgba(76,108,114,.70);
  border-radius:7px;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field input:focus,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field select:focus {
  border-color:#56ddd5;
  box-shadow:0 0 0 2px rgba(70,197,193,.11);
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field label {
  font-size:13px;
  color:#b4c8c9;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field input:focus+label,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field select+label,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field_labelAlwaysTopLeft label {
  background:#0d1920 !important;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Login_type_container {font-size:14px}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Login_submit,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody button[type=submit] {
  min-height:42px; border-radius:30px; font-size:15px; font-weight:700;
  background:#e5eff0; color:#182126;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Login_submit:hover,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody button[type=submit]:hover {background:#c9fffa}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Login_forgot,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_AuthBody_changeFlow {font-size:14px}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody a,
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_AccessibleButton_kind_link {color:#bde9e5}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage > .mx_AuthFooter {
  position:relative; z-index:2;
}
@media(max-width:740px){
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mnfrm-tr,body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mnfrm-br{display:none}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage > .mx_AuthPage_modal{width:min(96vw,470px)}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthPage_modalContent{width:100%;flex-direction:column;min-height:0}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthHeader {
    width:100%;flex:auto;padding:14px 24px;min-height:0;
    height:auto;max-height:none;border-radius:16px 16px 0 0;
    border-right:0;border-bottom:1px solid #33454b;
  }
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthHeaderLogo img{max-height:48px;width:auto}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody {
    width:100%;flex:auto;padding:24px 30px 22px;min-height:0;
    border-radius:0 0 16px 16px !important;
  }
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody h1 {font-size:21px}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field input,
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody .mx_Field select{font-size:14px}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mnfrm-bl{bottom:72px;left:14px}
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mnfrm-tl{left:14px;top:12px}
}
@media(prefers-reduced-motion:reduce){
  body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mnfrm-login-scanlines{opacity:.18}
}


/* The language dropdown is an overlay, never part of the card's layout.
   Without this, the form height changes and the Canvas redraws on each open. */
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody_language {
  position:relative;
  z-index:50;
  width:100%;
}
body:is(.mnfrm-screen-login,.mnfrm-screen-recovery,.mnfrm-screen-register) .mx_AuthBody_language .mx_Dropdown_menu {
  position:absolute !important;
  bottom:calc(100% + 5px);
  top:auto;
  left:0;
  right:auto;
  z-index:100;
  max-height:min(45vh,340px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* v1.3 /welcome. The real Element buttons have a native 380px width.
   The container must include its padding; buttons must fit the INNER width. */
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthPage {
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthPage > .mx_AuthPage_modal {
  display:block;
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:min(470px,calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px);
  margin:auto !important;
  min-width:0;
  flex:0 0 auto;
  background:#0a1117 !important;
  border:1px solid rgba(83,121,125,.48);
  border-radius:22px;
  box-shadow:0 22px 85px rgba(0,0,0,.70),0 0 42px rgba(59,170,167,.07);
  overflow:visible;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthPage_modalBlur {
  display:none !important;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthPage_modalContent {
  display:block !important;
  width:100%; min-width:0;
  border-radius:inherit;
  background:transparent !important;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_Welcome {
  width:100%; min-width:0; max-width:100%;
  padding:34px 38px 26px !important;
  border-radius:inherit;
  background:#0a1117 !important;
  color:#edf4f3;
  box-sizing:border-box;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome {
  width:100%; min-width:0; max-width:100%;
  box-sizing:border-box;
  color:#edf4f3;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome h1,
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome p {color:#edf4f3}
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome_buttons {
  width:100%; min-width:0;
  box-sizing:border-box;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome_buttons a,
body.mnfrm-login-active.mnfrm-welcome-active .mx_DefaultWelcome_buttons button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  box-sizing:border-box;
  text-decoration:none;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthBody_language {
  z-index:20;
  position:relative;
  max-width:100%;
}
body.mnfrm-login-active.mnfrm-welcome-active .mx_AuthPage > .mx_AuthFooter {
  position:relative;
  z-index:2;
  flex-shrink:0;
}
@media (max-width:540px) {
  body.mnfrm-login-active.mnfrm-welcome-active .mx_Welcome {
    padding:26px 22px 20px !important;
  }
}

/* Language selector is a popover, not a part of the card's content flow.
   Keep original dropdown sizing, only constrain it to the visible viewport. */
body.mnfrm-login-active .mx_AuthBody_language .mx_Dropdown_menu {
  max-height:min(45vh,340px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Native E2EE verification/recovery stays above the moving ASCII layer.
   No forced auth-panel widths, clipping or transforms on this screen. */
body.mnfrm-screen-security .mx_AuthPage > .mx_AuthPage_modal {
  position:relative;
  z-index:2;
  margin:auto;
}
body.mnfrm-screen-security .mx_AuthPage_modalBlur {display:none !important;}
body.mnfrm-screen-security .mx_AuthPage_modalContent {position:relative;z-index:2;}