/* MYMONITERA_MOBILE_OPERATOR_LOGIN=20260715-mobile-login1 */

#mmMobileLoginShell{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:none;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#eff8f5;
  color:#12372d;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}

body.mm-mobile-login-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

.mm-mobile-login-stage,
.mm-mobile-login-frame,
.mm-mobile-login-cover{
  position:absolute;
  inset:0;
}

.mm-mobile-login-stage{
  overflow:hidden;
  background:#eff8f5;
}

.mm-mobile-login-frame{
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.045);
  transition:
    opacity .62s cubic-bezier(.22,.61,.36,1),
    visibility .62s ease,
    transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.mm-mobile-login-frame.is-current{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.mm-mobile-login-frame img,
.mm-mobile-login-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.mm-mobile-login-cover{
  opacity:0;
  visibility:hidden;
  transform:scale(1.02);
  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
}

#mmMobileLoginShell.is-login .mm-mobile-login-cover{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.mm-mobile-login-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.00) 0%,
      rgba(255,255,255,.00) 50%,
      rgba(7,43,35,.16) 67%,
      rgba(7,43,35,.68) 100%
    );
  pointer-events:none;
}

.mm-mobile-login-top{
  position:absolute;
  z-index:8;
  top:calc(12px + env(safe-area-inset-top,0px));
  left:14px;
  right:14px;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}

.mm-mobile-login-skip{
  display:none;
  pointer-events:auto;
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(18,55,45,.15);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#12372d;
  font:inherit;
  font-size:12px;
  font-weight:950;
  box-shadow:0 10px 28px rgba(18,55,45,.13);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
}

#mmMobileLoginShell.is-tour .mm-mobile-login-skip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mm-mobile-login-tour-footer{
  position:absolute;
  z-index:8;
  left:18px;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:none;
  gap:10px;
  pointer-events:none;
}

#mmMobileLoginShell.is-tour .mm-mobile-login-tour-footer{
  display:grid;
}

.mm-mobile-login-progress-track{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  box-shadow:0 5px 22px rgba(18,55,45,.14);
}

.mm-mobile-login-progress-bar{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0f6656,#22c7ae,#c7fff5);
  box-shadow:0 0 18px rgba(33,198,174,.55);
}

#mmMobileLoginShell.is-tour .mm-mobile-login-progress-bar{
  animation:mmMobileLoginProgress 4.75s linear forwards;
}

.mm-mobile-login-dots{
  display:flex;
  justify-content:center;
  gap:7px;
}

.mm-mobile-login-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  transition:width .25s ease,background .25s ease;
}

.mm-mobile-login-dot.is-current{
  width:23px;
  background:#fff;
}

.mm-mobile-login-panel-wrap{
  position:absolute;
  z-index:10;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(24px);
  transition:
    opacity .38s ease,
    visibility .38s ease,
    transform .38s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

#mmMobileLoginShell.is-login .mm-mobile-login-panel-wrap{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.mm-mobile-login-panel{
  width:min(100%,520px);
  padding:16px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:24px;
  background:rgba(249,255,253,.91);
  box-shadow:
    0 24px 54px rgba(7,43,35,.31),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.mm-mobile-login-heading{
  margin:0 0 4px;
  color:#12372d;
  font-size:17px;
  line-height:1.15;
  font-weight:950;
}

.mm-mobile-login-intro{
  margin:0 0 13px;
  color:#557168;
  font-size:11px;
  line-height:1.35;
  font-weight:700;
}

.mm-mobile-login-error{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(174,49,49,.25);
  border-radius:13px;
  background:rgba(255,237,237,.95);
  color:#8b2525;
  font-size:12px;
  font-weight:850;
  line-height:1.35;
}

.mm-mobile-login-fields{
  display:grid;
  gap:10px;
}

.mm-mobile-login-field{
  display:grid;
  gap:5px;
}

.mm-mobile-login-field label{
  color:#244b41;
  font-size:10px;
  font-weight:950;
  letter-spacing:.015em;
}

.mm-mobile-login-input-wrap{
  position:relative;
}

.mm-mobile-login-field input{
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  border:1px solid rgba(47,93,80,.22);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.94);
  color:#12372d;
  font:inherit;
  font-size:15px;
  font-weight:750;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(18,55,45,.04);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.mm-mobile-login-field input:focus{
  border-color:#24a993;
  background:#fff;
  box-shadow:
    0 0 0 4px rgba(36,169,147,.13),
    inset 0 1px 2px rgba(18,55,45,.03);
}

.mm-mobile-login-field input[type="password"],
.mm-mobile-login-field input[data-password-visible="1"]{
  padding-right:50px;
}

.mm-mobile-login-password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#42685e;
  font:inherit;
  font-size:17px;
  cursor:pointer;
}

.mm-mobile-login-password-toggle:active{
  background:rgba(47,93,80,.09);
}

.mm-mobile-login-submit{
  width:100%;
  min-height:54px;
  margin-top:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #123f35;
  border-radius:16px;
  padding:13px 18px;
  background:linear-gradient(135deg,#2f5d50 0%,#123f35 100%);
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:
    0 13px 28px rgba(12,61,50,.29),
    inset 0 1px 0 rgba(255,255,255,.15);
  cursor:pointer;
}

.mm-mobile-login-submit:active{
  transform:translateY(1px);
  box-shadow:
    0 8px 18px rgba(12,61,50,.24),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.mm-mobile-login-submit-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:17px;
}

.mm-mobile-login-language{
  margin-top:10px;
  text-align:center;
  color:#657d76;
  font-size:10px;
  font-weight:700;
}

#mmMobileLoginShell.is-leaving{
  opacity:0;
  visibility:hidden;
  transition:opacity .36s ease,visibility .36s ease;
}

@keyframes mmMobileLoginProgress{
  from{width:0}
  to{width:100%}
}

@media(max-width:820px) and (pointer:coarse){
  #mmMobileLoginShell{
    display:block;
  }
}

@media(min-width:821px), (pointer:fine){
  #mmMobileLoginShell{
    display:none!important;
  }
}

@media(max-height:720px){
  .mm-mobile-login-panel{
    padding:12px;
    border-radius:20px;
  }

  .mm-mobile-login-heading{
    font-size:15px;
  }

  .mm-mobile-login-intro,
  .mm-mobile-login-language{
    display:none;
  }

  .mm-mobile-login-field input{
    min-height:44px;
  }

  .mm-mobile-login-submit{
    min-height:48px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mm-mobile-login-frame,
  .mm-mobile-login-cover,
  .mm-mobile-login-panel-wrap,
  #mmMobileLoginShell{
    transition:none!important;
  }

  .mm-mobile-login-progress-bar{
    animation:none!important;
  }
}

/* MYMONITERA_MOBILE_LOGIN_LANGUAGE=20260715-mobile-login-lang1 */

.mm-mobile-login-language-picker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 12px;
  padding:7px 8px 7px 11px;
  border:1px solid rgba(47,93,80,.16);
  border-radius:15px;
  background:rgba(255,255,255,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}

.mm-mobile-login-language-title{
  flex:0 0 auto;
  color:#59736b;
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mm-mobile-login-language-options{
  display:grid;
  grid-template-columns:repeat(4,minmax(36px,1fr));
  gap:5px;
  flex:1 1 auto;
  max-width:220px;
}

.mm-mobile-login-language-option{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:10px;
  background:rgba(47,93,80,.07);
  color:#31574d;
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.035em;
  text-decoration:none!important;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.mm-mobile-login-language-option:hover,
.mm-mobile-login-language-option:focus-visible{
  border-color:rgba(47,93,80,.24);
  background:rgba(47,93,80,.13);
  color:#12372d;
  outline:none;
}

.mm-mobile-login-language-option:active{
  transform:scale(.97);
}

.mm-mobile-login-language-option.is-active{
  border-color:#2f5d50;
  background:linear-gradient(135deg,#2f5d50,#1c493e);
  color:#fff;
  box-shadow:0 7px 16px rgba(31,67,58,.22);
}

@media(max-height:720px){
  .mm-mobile-login-language-picker{
    margin-bottom:9px;
    padding-top:5px;
    padding-bottom:5px;
  }

  .mm-mobile-login-language-option{
    min-height:30px;
  }
}