body{display:flex;align-items:center;justify-content:center;padding:24px}

.card{

  position:relative;z-index:1;width:min(400px,100%);

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.08);

  border-radius:26px;padding:40px 32px 30px;

  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);

  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);

}

.brand{

  width:62px;height:62px;margin:0 auto 18px;border-radius:20px;

  display:grid;place-items:center;font-size:28px;

  background:linear-gradient(135deg,var(--brand),var(--brand2));

  box-shadow:0 16px 34px -14px rgba(109,139,255,1);

}

h1{font-size:20px;font-weight:650;text-align:center;letter-spacing:.3px}

.tip{font-size:13.5px;color:var(--sub);text-align:center;margin:8px 0 26px}

.field{position:relative;margin-bottom:14px}

.field input{

  width:100%;font:inherit;font-size:15px;color:var(--text);

  padding:15px 16px 15px 44px;border-radius:14px;outline:none;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);transition:.2s;

}

.field input::placeholder{color:#5f6880}

.field input:focus{

  background:rgba(255,255,255,.09);

  border-color:rgba(109,139,255,.55);

  box-shadow:0 0 0 4px rgba(109,139,255,.13);

}

.field .ico{

  position:absolute;left:15px;top:50%;transform:translateY(-50%);

  font-size:16px;opacity:.55;pointer-events:none;

}

.submit{

  width:100%;margin-top:8px;padding:15px;border:none;cursor:pointer;

  font:inherit;font-size:15px;font-weight:600;color:#fff;border-radius:14px;

  background:linear-gradient(135deg,var(--brand),var(--brand2));

  box-shadow:0 16px 30px -14px rgba(109,139,255,1);

  transition:.18s;

}

.submit:hover{transform:translateY(-1px)}

.submit:active{transform:scale(.97)}

.submit:disabled{opacity:.5;cursor:not-allowed}

.foot{margin-top:22px;text-align:center;font-size:13.5px;color:var(--sub)}

.foot a{color:#8fa4ff;text-decoration:none;font-weight:600}

.foot a:hover{text-decoration:underline}

.toast{

  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(14px);

  background:rgba(255,80,80,.14);border:1px solid rgba(255,80,80,.3);

  color:#ffb4b4;font-size:13.5px;padding:11px 20px;border-radius:13px;

  opacity:0;pointer-events:none;transition:.28s;z-index:99;

  backdrop-filter:blur(10px);

}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}