.ml-auth-notice{
  position:fixed;
  inset:0;
  z-index:10020;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,8,18,.62);
  backdrop-filter:blur(12px);
  opacity:0;
  animation:ml-auth-notice-in .18s ease-out forwards;
}

.ml-auth-notice.is-leaving{
  animation:ml-auth-notice-out .18s ease-in forwards;
}

.ml-auth-notice__dialog{
  position:relative;
  width:min(100%, 468px);
  padding:24px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(21,29,48,.98), rgba(11,17,31,.98));
  color:#eef4ff;
  box-shadow:0 24px 70px rgba(0,0,0,.46);
  text-align:left;
  transform:translateY(10px) scale(.98);
  animation:ml-auth-notice-dialog-in .22s ease-out forwards;
}

.ml-auth-notice.is-leaving .ml-auth-notice__dialog{
  animation:ml-auth-notice-dialog-out .18s ease-in forwards;
}

.ml-auth-notice__close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#b9c5dd;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.ml-auth-notice__close:hover{
  color:#fff;
  background:rgba(255,255,255,.1);
}

.ml-auth-notice__close:focus-visible,
.ml-auth-notice__primary:focus-visible,
.ml-auth-notice__secondary:focus-visible{
  outline:3px solid rgba(110,231,255,.45);
  outline-offset:2px;
}

.ml-auth-notice__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:0 0 14px;
  border-radius:14px;
  background:rgba(52,211,153,.14);
  border:1px solid rgba(52,211,153,.36);
  color:#78f0bd;
  font-weight:900;
  font-size:24px;
  box-shadow:0 12px 28px rgba(16,185,129,.14);
}

.ml-auth-notice--warn .ml-auth-notice__icon{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.38);
  color:#fbd38d;
  box-shadow:0 12px 28px rgba(245,158,11,.12);
}

.ml-auth-notice__title{
  margin:0 38px 10px 0;
  color:#f8fbff;
  font-size:1.35rem;
  line-height:1.18;
  font-weight:900;
}

.ml-auth-notice__text{
  margin:0;
  color:#c8d3e7;
  font-size:1rem;
  line-height:1.55;
}

.ml-auth-notice__status{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(110,231,255,.08);
  border:1px solid rgba(110,231,255,.2);
  color:#d7fbff;
  font-size:.92rem;
  line-height:1.4;
}

.ml-auth-notice__actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:20px;
}

.ml-auth-notice__primary,
.ml-auth-notice__secondary{
  min-height:44px;
  border-radius:12px;
  padding:0 16px;
  font-weight:850;
  font-size:.96rem;
  cursor:pointer;
}

.ml-auth-notice__primary{
  flex:1 1 auto;
  border:0;
  color:#07111e;
  background:linear-gradient(135deg, #7dd3fc, #86efac);
  box-shadow:0 14px 34px rgba(34,211,238,.18);
}

.ml-auth-notice__primary:hover{
  filter:brightness(1.04);
}

.ml-auth-notice__secondary{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#dbe8ff;
}

.ml-auth-notice__secondary:hover{
  background:rgba(255,255,255,.1);
}

.ml-auth-notice__secondary:disabled{
  cursor:default;
  opacity:.78;
}

@keyframes ml-auth-notice-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes ml-auth-notice-out{
  from{ opacity:1; }
  to{ opacity:0; }
}

@keyframes ml-auth-notice-dialog-in{
  from{ transform:translateY(10px) scale(.98); }
  to{ transform:translateY(0) scale(1); }
}

@keyframes ml-auth-notice-dialog-out{
  from{ transform:translateY(0) scale(1); }
  to{ transform:translateY(8px) scale(.99); }
}

@media (width <= 540px){
  .ml-auth-notice{
    align-items:end;
    padding:14px;
  }

  .ml-auth-notice__dialog{
    width:100%;
    padding:22px 18px 18px;
    border-radius:18px;
  }

  .ml-auth-notice__title{
    font-size:1.22rem;
  }

  .ml-auth-notice__text{
    font-size:.96rem;
  }

  .ml-auth-notice__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .ml-auth-notice__primary,
  .ml-auth-notice__secondary{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .ml-auth-notice,
  .ml-auth-notice.is-leaving,
  .ml-auth-notice__dialog,
  .ml-auth-notice.is-leaving .ml-auth-notice__dialog{
    animation:none;
    opacity:1;
    transform:none;
  }
}