:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #202a3c;
  background: #eef2fa;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 7px 4px 2px; }
.login-card { width: 352px; max-width: 100%; min-height: 581px; padding: 32px; background: #fdfdff; border: 1px solid #fff; border-radius: 28px; }
.login-header { text-align: center; }
.logo { display: grid; place-items: center; width: 52px; height: 51px; margin: 0 auto; border-radius: 16px; color: #fff; background: linear-gradient(115deg, #0d5957, #08725c); font-size: 20px; font-weight: 800; box-shadow: 0 7px 10px rgb(14 72 65 / 15%); }
h1 { margin: 22px 0 11px; font-size: 24px; line-height: 29px; font-weight: 800; letter-spacing: -.65px; }
.login-header p { margin: 0; color: #687b9b; font-size: 13px; line-height: 18px; }
#login-form { margin-top: 33px; }
.field label { display: block; margin-bottom: 8px; font-size: 11px; line-height: 14px; font-weight: 700; }
.field input { display: block; width: 100%; height: 47px; padding: 0 17px; border: 2px solid #bdcbd3; border-radius: 15px; background: #fbfcfd; box-shadow: 0 1px 2px rgb(25 55 70 / 4%); font: 13px Arial, Helvetica, sans-serif; color: #202a3c; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.field input:hover:not(:focus) { border-color: #9fb5bd; background: #fff; }
.field input:focus-visible { border-color: #159875; outline: 0; background: #fff; box-shadow: 0 0 0 3px rgb(21 152 117 / 14%), 0 1px 2px rgb(25 55 70 / 4%); }
.field input::placeholder { color: #8b94a3; opacity: 1; }
.password-field { margin-top: 20px; }
.password-input { position: relative; }
.password-input input { padding-right: 48px; }
.password-toggle { position: absolute; top: 0; right: 2px; width: 40px; height: 47px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #98a4b9; cursor: pointer; border-radius: 12px; }
.password-toggle svg { width: 16px; height: 16px; }
a { color: #00c777; text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }
.forgot-row { margin-top: 18px; text-align: right; font-size: 11px; line-height: 18px; }
.agreement { display: flex; align-items: flex-start; gap: 9px; margin-top: 19px; }
.agreement input { appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; border: 1px solid #cfd6e3; border-radius: 5px; background: transparent; cursor: pointer; }
.agreement input:checked { background: #08b77a; border-color: #08b77a; }
.agreement input:checked::after { content: ''; display: block; width: 5px; height: 9px; margin: 1px 0 0 5px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agreement label { color: #69758c; font-size: 11px; line-height: 18px; }
.login-button { display: block; width: 100%; height: 45px; margin-top: 20px; border: 0; border-radius: 16px; background: linear-gradient(105deg, #105057 0%, #04c47a 100%); color: white; font: 700 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.login-button:hover { filter: brightness(1.04); }
.login-button:active { transform: translateY(1px); }
.signup { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 25px -10px 0; font-size: 11px; line-height: 18px; color: #69758c; }
:focus-visible { outline: 2px solid #0b8d72; outline-offset: 3px; }
.status { font-size: 12px; line-height: 18px; color: #69758c; margin-bottom: 0; }
dialog { width: 340px; max-width: calc(100% - 32px); padding: 26px; border: 0; border-radius: 22px; color: #202a3c; background: #fdfdff; }
dialog::backdrop { background: rgb(32 42 60 / 35%); }
dialog h2 { margin-top: 0; font-size: 20px; }
dialog p { font-size: 14px; line-height: 1.6; color: #69758c; }
@media (max-width: 359px) { .login-card { padding-inline: 24px; } }