/* Selected natural login design; scoped to authentication, not the signed-in app. */
#authShell {
  --auth-green: #207653;
  --auth-muted: #65716f;
  --brand: var(--auth-green);
  --brand-soft: #eff5f1;
  --text: #202b32;
  --muted: var(--auth-muted);
  --line: #dde7e1;
  display: block;
  min-height: 100svh;
  padding: 0;
  background: #f3f6f4;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#authShell .auth-card {
  width: min(460px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
#authShell .auth-hero { position: relative; aspect-ratio: 390 / 297; overflow: hidden; }
#authShell .auth-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#authShell .auth-hero-copy { position: absolute; inset: 36px 28px auto; color: #103e2e; }
#authShell .auth-hero h1 { margin: 0; font-size: 32px; line-height: 1.25; font-weight: 800; letter-spacing: 1px; }
#authShell .auth-hero-copy > p { margin-top: 7px; font-size: 14px; font-weight: 600; line-height: 1.5; color: #485e58; }
#authShell .auth-hero-copy .auth-hero-message { margin-top: 18px; font-size: 14px; font-weight: 500; }
#authShell .auth-content { padding: 32px 27px 22px; }
#authShell .auth-form { margin: 0; }
#authShell .auth-form h2 { margin: 0; font-size: 28px; line-height: 1.35; font-weight: 750; letter-spacing: 0; }
#authShell #loginForm { gap: 0; }
#authShell .auth-login-description { margin: 10px 0 18px; font-size: 16px; line-height: 1.5; color: var(--auth-muted); }
#authShell .auth-login-fields { padding: 0 14px; border-radius: 16px; background: #f1f6f3; }
#authShell .auth-login-row { display: flex; align-items: center; min-height: 57px; gap: 12px; }
#authShell .auth-login-row + .auth-login-row { border-top: 1px solid #dce7e0; }
#authShell .auth-login-row > svg { width: 22px; height: 22px; flex: 0 0 22px; color: #77827e; stroke-width: 1.8; }
#authShell .auth-login-row > label { display: block; flex: 0 0 auto; color: var(--text); font-size: 16px; font-weight: 600; }
#authShell .auth-login-row > input {
  flex: 1; min-width: 0; width: 0; min-height: 52px; padding: 0 0 0 24px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 16px; font-weight: 400; color: var(--text);
}
#authShell input::placeholder { color: #76827c; opacity: 1; }
#authShell .auth-password-toggle {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  margin-right: -10px; padding: 0; border: 0; border-radius: 8px; background: transparent;
  color: #67766e; cursor: pointer;
}
#authShell .auth-password-toggle svg { width: 23px; height: 23px; stroke-width: 1.8; }
#authShell .auth-password-toggle[aria-pressed="true"] { color: var(--auth-green); background: #dfebe3; }
#authShell .link-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--auth-green); font-size: 16px; line-height: 1.5; font-weight: 500; box-shadow: none; }
#authShell .auth-forgot-link { justify-self: end; margin: 4px 0 4px; }
#authShell .primary-button {
  min-height: 50px; width: 100%; padding: 11px 16px; border: 0; border-radius: 12px;
  background: var(--auth-green); color: #fff; font-size: 20px; font-weight: 650;
  line-height: 1.4; box-shadow: none; cursor: pointer;
}
#authShell .primary-button:hover { background: #196344; }
#authShell .primary-button:disabled { opacity: .65; cursor: wait; }
#authShell #showRegister { justify-self: center; margin-top: 8px; }
#authShell #showRegister span { color: var(--auth-muted); }
#authShell .android-download-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; margin: 34px 0 0; padding: 8px 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--auth-green); font-size: 17px; font-weight: 650;
  line-height: 1.5; text-decoration: none; box-shadow: none; transform: none;
}
#authShell .android-download-link svg { width: 23px; height: 23px; stroke-width: 1.8; }
#authShell .auth-company { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; color: #6b7671; font-size: 12px; line-height: 1.5; text-align: center; }
#authShell .auth-company::before, #authShell .auth-company::after { content: ""; height: 1px; max-width: 48px; flex: 1; background: #d8dedb; }
#authShell :is(button, a, input):focus-visible { outline: 2px solid var(--auth-green); outline-offset: 3px; }
#authShell .auth-login-row:focus-within { position: relative; z-index: 1; }
#authShell :is(button, a):active { opacity: .8; }
#authShell.auth-secondary .auth-hero { height: 160px; aspect-ratio: auto; }
#authShell.auth-secondary .auth-hero > img { object-position: center 38%; }
#authShell.auth-secondary .auth-hero-message { display: none; }
#authShell.auth-secondary .auth-content { padding-top: 24px; }
#authShell .register-step { gap: 16px; }
#authShell .register-step label { font-size: 15px; color: #475c51; }
#authShell .register-step input { min-width: 0; }
@media (max-width: 359px) {
  #authShell .auth-content { padding-inline: 20px; }
  #authShell .auth-hero-copy { inset-inline: 20px; }
  #authShell .auth-login-fields { padding-inline: 10px; }
  #authShell .auth-login-row { gap: 8px; }
  #authShell .auth-login-row > input { padding-left: 8px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #authShell .auth-hero { height: 150px; aspect-ratio: auto; }
  #authShell .auth-hero-message { display: none; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  #authShell .auth-content { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}