@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

:root{
  --mylms-bg:#f5f7ff;
  --mylms-surface:#ffffff;
  --mylms-surface-soft:#f8f9ff;
  --mylms-text:#1a1f36;
  --mylms-muted:#5a6388;
  --mylms-border:#dfe4ff;
  --mylms-primary:#6f3bff;
  --mylms-primary-2:#2f6dff;
  --mylms-success:#16a34a;
  --mylms-shadow:0 14px 38px rgba(39,51,105,.14);
  --mylms-shadow-soft:0 4px 14px rgba(39,51,105,.1);
}

.vault-login{
  font-family:'Heebo','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  max-width:640px;
  margin:24px auto;
  background:var(--mylms-surface);
  border:1px solid var(--mylms-border);
  border-radius:18px;
  box-shadow:var(--mylms-shadow);
  padding:24px;
  position:relative;
  overflow:hidden;
  animation:mylmsFadeUp .42s ease both;
}
.vault-login__hero{
  background:linear-gradient(130deg,#325edc 0%,#5a49f8 52%,#8f34f2 100%);
  color:#fff;
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
}
.vault-login__hero:after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  left:-120px;
  bottom:-130px;
  border-radius:999px;
  background:radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.vault-login__eyebrow{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
}
.vault-login__title{
  font-family:'Plus Jakarta Sans','Heebo',system-ui,sans-serif;
  margin:0;
  color:#fff;
  font-size:24px;
}
.vault-login__desc{
  margin:8px 0 0;
  opacity:.92;
}
.vault-login__form{
  text-align:center;
}
.vault-login .vault-notice{
  margin:0 0 14px;
  padding:12px;
  background:#eef2ff;
  color:#3346a9;
  border:1px solid #d8deff;
  border-radius:10px;
}
.vault-login__input{
  width:100%;
  max-width:420px;
  display:block;
  margin:0 auto;
  border:1px solid var(--mylms-border);
  border-radius:12px;
  padding:12px 14px;
  color:var(--mylms-text);
  background:var(--mylms-surface-soft);
}
.vault-login__input:focus{
  outline:0;
  border-color:#9f8cff;
  box-shadow:0 0 0 4px rgba(111,59,255,.16);
  background:#fff;
}
.vault-login__button{
  display:inline-block;
  border:0;
  border-radius:12px;
  padding:11px 20px;
  color:#fff;
  cursor:pointer;
  font-weight:700;
  background:linear-gradient(90deg,var(--mylms-primary),var(--mylms-primary-2));
  transition:transform .18s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:var(--mylms-shadow-soft);
}
.vault-login__button:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}
.vault-login__button:active{
  transform:translateY(0);
}

@keyframes mylmsFadeUp{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .vault-login{
    animation:none;
  }
  .vault-login__button{
    transition:none;
  }
}