:root {
  color: #1f2921;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #edf3eb; }
button, input { font: inherit; }

.login-page {
  position: relative;
  min-height: 100vh;
  padding: 46px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 8%, rgba(135, 211, 103, .22), transparent 28%),
    radial-gradient(circle at 88% 91%, rgba(76, 157, 55, .14), transparent 30%),
    linear-gradient(145deg, #f3f7f1, #e8f0e5);
}

.login-page::before,
.login-page::after {
  position: absolute;
  border: 1px solid rgba(75, 147, 56, .12);
  border-radius: 50%;
  content: '';
}
.login-page::before { width: 430px; height: 430px; top: -230px; right: -130px; }
.login-page::after { width: 330px; height: 330px; bottom: -190px; left: -100px; }

.login-shell {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  min-height: 570px;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  border: 1px solid rgba(36, 79, 39, .08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(32, 71, 35, .15);
}

.login-brand-panel {
  position: relative;
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  color: #eff9ec;
  background:
    radial-gradient(circle at 80% 20%, rgba(143, 223, 106, .22), transparent 27%),
    linear-gradient(155deg, #244e2a, #17391f 62%, #102d19);
}

.login-brand-panel::after {
  position: absolute;
  width: 250px;
  height: 250px;
  right: -100px;
  bottom: -105px;
  border: 38px solid rgba(129, 213, 92, .08);
  border-radius: 50%;
  content: '';
}

.login-brand { display: flex; align-items: center; gap: 13px; }
.login-brand > span,
.login-mobile-brand > span {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: #184120;
  background: linear-gradient(145deg, #ace990, #68ca49);
  box-shadow: 0 10px 25px rgba(92, 194, 62, .25);
  font-size: 24px;
  font-weight: 900;
  line-height: 46px;
  text-align: center;
}
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 18px; letter-spacing: .6px; }
.login-brand small { margin-top: 4px; color: #91aa96; font-size: 9px; letter-spacing: 2px; }

.login-brand-copy { margin: auto 0; }
.login-brand-copy p { margin: 0 0 14px; color: #83bf71; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; }
.login-brand-copy h1 { margin: 0; font-size: 36px; line-height: 1.35; letter-spacing: -.5px; }
.login-brand-copy > span { margin-top: 21px; display: block; color: #9fb4a2; font-size: 13px; line-height: 1.8; }
.login-security { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #9db2a1; font-size: 10px; }
.login-security i { width: 8px; height: 8px; border-radius: 50%; background: #79d45a; box-shadow: 0 0 0 4px rgba(121, 212, 90, .12); }

.login-form-panel { padding: 62px 64px 45px; display: flex; flex-direction: column; justify-content: center; }
.login-mobile-brand { display: none; }
.login-heading p { margin: 0 0 9px; color: #6fa55f; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.login-heading h2 { margin: 0; color: #233026; font-size: 28px; }
.login-heading > span { margin-top: 10px; display: block; color: #909b92; font-size: 12px; }

#adminLoginForm { margin-top: 35px; }
#adminLoginForm > label { margin-bottom: 9px; display: block; color: #556159; font-size: 11px; font-weight: 700; }
.password-field { height: 48px; display: flex; border: 1px solid #dfe6dc; border-radius: 12px; background: #fafcfa; transition: .18s ease; }
.password-field:focus-within { border-color: #7fc868; box-shadow: 0 0 0 4px rgba(83, 181, 52, .09); background: #fff; }
.password-field input { min-width: 0; padding: 0 14px; flex: 1; border: 0; outline: 0; color: #263229; background: transparent; font-size: 13px; }
.password-field input::placeholder { color: #b0b8b1; }
.password-field button { width: 58px; border: 0; color: #6f7d72; background: transparent; font-size: 10px; }
.login-message { min-height: 20px; margin: 9px 2px 0; color: #c7514b; font-size: 10px; }
.login-submit { width: 100%; height: 48px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #64c845, #42a72b); box-shadow: 0 12px 25px rgba(66, 163, 43, .22); font-size: 13px; font-weight: 800; transition: .18s ease; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(66, 163, 43, .27); }
.login-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.login-help { margin-top: 31px; padding-top: 19px; display: flex; justify-content: space-between; border-top: 1px solid #edf1ec; color: #9ca59e; font-size: 9px; }

.login-page > footer { position: relative; z-index: 1; margin-top: 22px; color: #89948b; font-size: 9px; }

@media (max-width: 720px) {
  .login-page { padding: 20px 15px; justify-content: flex-start; }
  .login-shell { min-height: calc(100vh - 70px); display: block; border-radius: 22px; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: calc(100vh - 70px); padding: 38px 28px; justify-content: center; }
  .login-mobile-brand { margin-bottom: 55px; display: flex; align-items: center; gap: 12px; color: #253228; }
  .login-mobile-brand strong { font-size: 17px; }
  .login-heading h2 { font-size: 25px; }
  .login-help { gap: 14px; flex-direction: column; }
  .login-page > footer { display: none; }
}