:root {
  color: #18201d;
  background: #eef2ef;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(19, 122, 81, .13), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(20, 117, 140, .10), transparent 31%),
    linear-gradient(135deg, #f7f9f8 0%, #e8eeea 100%);
}

.login-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 18px 62px;
}

.login-card {
  width: min(430px, 100%);
  padding: 38px;
  border: 1px solid rgba(200, 208, 204, .82);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px rgba(24, 32, 29, .13);
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 750; }
.brand-mark { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 7px; background: #dcefe6; }
.brand-mark i { width: 3px; border-radius: 2px; background: #137a51; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 12px; }.brand-mark i:nth-child(4) { height: 21px; }

.login-heading { margin: 42px 0 28px; }
.eyebrow { color: #137a51; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
h1 { margin: 7px 0 8px; font-size: 28px; letter-spacing: -.03em; }
.login-heading p { margin: 0; color: #67726d; font-size: 13px; line-height: 1.7; }

.field { display: block; margin-top: 18px; }
.field > span:first-child { display: block; margin-bottom: 7px; color: #46504b; font-size: 12px; font-weight: 650; }
.field input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #c8d0cc;
  border-radius: 7px;
  color: #18201d;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: #137a51; box-shadow: 0 0 0 4px rgba(19, 122, 81, .11); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 58px; }
.password-field button { position: absolute; right: 8px; top: 8px; height: 30px; padding: 0 7px; border: 0; color: #137a51; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }

.login-error { min-height: 19px; margin: 11px 0 3px; color: #b33131; font-size: 12px; line-height: 1.5; }
.login-button { width: 100%; height: 47px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 7px; color: #fff; background: #137a51; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
.login-button:hover { background: #0f6844; }.login-button:active { transform: translateY(1px); }.login-button:disabled { cursor: wait; opacity: .7; }
.login-button svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.security-note { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #7a8580; font-size: 10px; }
.security-note span { width: 6px; height: 6px; border-radius: 50%; background: #38b77d; box-shadow: 0 0 0 3px #dcefe6; }
.footer { position: absolute; bottom: 20px; margin: 0; color: #86918b; font-size: 10px; letter-spacing: .08em; }

@media (max-width: 520px) {
  .login-page { place-items: start center; padding-top: 10vh; }
  .login-card { padding: 28px 23px; border-radius: 9px; }
  .login-heading { margin: 34px 0 24px; }
  h1 { font-size: 25px; }
}