*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Helvetica,Arial,sans-serif;
  background:#0082c9;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  color:#222;
  font-size:15px;
}
.wrapper{width:100%;max-width:320px;padding:20px;display:flex;flex-direction:column;align-items:center}
.logo{margin-bottom:22px;display:flex;flex-direction:column;align-items:center}
.logo svg{width:64px;height:64px}
.logo .name{color:#fff;font-size:1.5rem;font-weight:400;margin-top:6px;letter-spacing:.3px}

.card{
  width:100%;background:#fff;border-radius:3px;padding:28px 30px 24px;
  box-shadow:0 0 12px rgba(0,0,0,.2);
}

.notice{
  display:none;align-items:center;gap:8px;background:#fff3cd;color:#7a5b00;
  border:1px solid #f0d987;border-radius:3px;padding:8px 12px;font-size:13px;
  margin-bottom:16px;
}
.notice.error{background:#fbe2e1;color:#9b2226;border-color:#efb3b1}

.field{position:relative;margin-bottom:12px}
.field svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:#767676;stroke-width:1.8;
}
.field input{
  width:100%;height:44px;padding:0 38px;border:1px solid #d9d9d9;border-radius:3px;
  font-size:14px;outline:none;background:#fafafa;transition:border-color .15s,background .15s;
}
.field input:focus{border-color:#0082c9;background:#fff}
.field .toggle-eye{
  position:absolute;right:10px;left:auto;top:50%;transform:translateY(-50%);
  cursor:pointer;width:18px;height:18px;
}

.remember{display:flex;align-items:center;gap:8px;margin:4px 0 18px;font-size:13px;color:#555}
.remember input{width:14px;height:14px}

button.login{
  position:relative;width:100%;height:42px;background:#0082c9;color:#fff;border:none;border-radius:3px;
  font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
button.login:hover{background:#00639c}
button.login:disabled{cursor:default;opacity:.85}
.spinner{
  display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.forgot{display:block;text-align:center;margin-top:18px;font-size:13px}
.forgot a{color:#fff;background:rgba(0,0,0,.15);padding:6px 14px;border-radius:3px;text-decoration:none}
.forgot a:hover{background:rgba(0,0,0,.25)}

footer{margin-top:26px;color:rgba(255,255,255,.85);font-size:12px;text-align:center}