:root {
  color-scheme: light;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  background: #eef2f7;
  color: #13213b;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 9% 8%, rgba(49, 139, 246, .13), transparent 28rem),
    radial-gradient(circle at 91% 91%, rgba(50, 191, 133, .12), transparent 25rem),
    #f4f7fb;
}

.login-card {
  width: min(100%, 420px);
  padding: 46px 44px 42px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dce4ee;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(30, 57, 95, .13);
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #4ea8ff, #2373dd);
  color: #fff;
  font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.05em;
  box-shadow: 0 9px 22px rgba(35, 115, 221, .25);
}

.eyebrow { margin: 25px 0 7px; color: #8492a7; font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.subtitle { margin: 10px 0 32px; color: #7a889d; font-size: 14px; }

form { display: grid; gap: 9px; }
label { color: #536176; font-size: 13px; font-weight: 600; }
input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  outline: none;
  color: #15233d;
  font: inherit;
  transition: border-color .18s, box-shadow .18s;
}
input:focus { border-color: #3188eb; box-shadow: 0 0 0 3px rgba(49, 136, 235, .12); }
.password-row { position: relative; }
.password-row input { padding-right: 57px; }
.reveal { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); border: 0; background: transparent; color: #397dd7; cursor: pointer; font: 600 12px inherit; }
.form-message { min-height: 19px; margin: 5px 0 0; color: #d35050; font-size: 13px; }
.submit {
  height: 47px;
  margin-top: 5px;
  border: 0;
  border-radius: 10px;
  background: #2f86e8;
  color: #fff;
  cursor: pointer;
  font: 600 15px inherit;
  box-shadow: 0 8px 18px rgba(47, 134, 232, .22);
  transition: transform .18s, background .18s;
}
.submit:hover { background: #2078db; transform: translateY(-1px); }
.submit:disabled { cursor: wait; opacity: .72; transform: none; }

@media (max-width: 460px) { .login-card { padding: 36px 27px 31px; } }