:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #20242a;
  background: #f5f6f7;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.login-layout {
  width: min(384px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(48px, 12vh, 128px) 0 32px;
}
.product-name { margin: 0 0 18px; color: #606770; font-size: 14px; line-height: 22px; }
.login-card { padding: 30px 28px 24px; border: 1px solid #e4e6e8; border-radius: 6px; background: #fff; }
h1 { margin: 0 0 28px; font-size: 20px; font-weight: 600; line-height: 28px; }
label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 20px; }
input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid #d7dce0; border-radius: 4px;
  background: #fff; color: #20242a; font: inherit; font-size: 14px;
}
input::placeholder { color: #969ca4; }
input:focus { border-color: #246647; }
#username { margin-bottom: 20px; }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.toggle {
  position: absolute; top: 4px; right: 4px; height: 36px; padding: 0 10px;
  border: 0; border-radius: 4px; background: transparent; color: #606770;
  font: inherit; font-size: 12px; cursor: pointer;
}
.toggle:hover { background: #f5f6f7; color: #20242a; }
.error { min-height: 20px; margin: 12px 0; color: #b33a32; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.submit {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid #246647; border-radius: 4px; background: #246647; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.submit:hover { border-color: #1d573b; background: #1d573b; }
.submit:disabled { border-color: #789684; background: #789684; cursor: wait; }
.session-note { margin: 18px 0 0; color: #858c94; font-size: 12px; line-height: 20px; text-align: center; }
.page-footer { margin-top: 18px; color: #858c94; font-size: 12px; line-height: 20px; text-align: center; }
:focus-visible { outline: 2px solid #246647; outline-offset: 2px; }
@media (max-width: 480px) {
  .login-layout { padding-top: 40px; }
  .login-card { padding: 26px 22px 22px; }
  input { font-size: 16px; }
}