/* Reference-matched login. All rules are scoped to avoid dashboard changes. */
body.login-active { margin: 0; background: #edf6f1; }
.ecotrack-login, .ecotrack-login * { box-sizing: border-box; }
.ecotrack-login {
  --login-unit: clamp(.85px, .09765625vw, 1.7px);
  --login-ink: #103f3c;
  --login-green: #07804c;
  display: grid;
  grid-template-columns: 62.5% 37.5%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #edf6f1;
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  color: var(--login-ink);
}
.login-brand { position: relative; min-width: 0; min-height: calc(502 * var(--login-unit)); }
.login-brand-art { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: fill; }
.login-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: calc(32 * var(--login-unit)) 0;
  background: radial-gradient(ellipse at 48% 47%, #fcfffd 0%, #f2f8f5 53%, #e7f2ec 100%);
}
.login-foliage { pointer-events: none; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.login-foliage-top { mask-image: linear-gradient(90deg, transparent, #000 35%); top: 0; right: 0; width: calc(174 * var(--login-unit)); height: calc(56 * var(--login-unit)); background-image: url('/static/login-leaves-top.webp'); }
.login-foliage-side { mask-image: linear-gradient(90deg, transparent, #000 40%); bottom: 0; right: 0; width: calc(45 * var(--login-unit)); height: calc(164 * var(--login-unit)); background-image: url('/static/login-leaves-side.webp'); }
.login-foliage-bottom { mask-image: linear-gradient(90deg, transparent, #000 45%); bottom: 0; right: 0; width: calc(150 * var(--login-unit)); height: calc(32 * var(--login-unit)); background-image: url('/static/login-leaves-bottom.webp'); }
.login-card {
  position: relative;
  z-index: 1;
  width: 84.895833%;
  min-height: calc(414 * var(--login-unit));
  margin-left: 3.385417%;
  transform: translateY(calc(12 * var(--login-unit)));
  padding: calc(18 * var(--login-unit)) calc(22 * var(--login-unit)) calc(20 * var(--login-unit));
  background: #fdfffe;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: calc(19 * var(--login-unit));
  box-shadow: 0 calc(6 * var(--login-unit)) calc(24 * var(--login-unit)) rgba(26,85,64,.095);
}
.login-icon { display: inline-block; width: calc(13 * var(--login-unit)); height: calc(13 * var(--login-unit)); flex-shrink: 0; vertical-align: middle; }
.login-heading-leaf { display: block; color: var(--login-green); width: calc(29 * var(--login-unit)); height: calc(23 * var(--login-unit)); margin: 0 0 calc(1 * var(--login-unit)); }
.login-heading h1 { font-family: inherit; font-size: calc(17.5 * var(--login-unit)); font-weight: 700; line-height: 1.22; letter-spacing: -.035em; margin: 0; color: var(--login-ink); }
.login-subtitle { color: #147749; font-size: calc(11.3 * var(--login-unit)); line-height: 1.45; margin: 0; letter-spacing: -.015em; }
.login-intro { font-size: calc(7.8 * var(--login-unit)); line-height: 1.65; color: #68777b; margin: calc(4 * var(--login-unit)) 0 0; }
.login-form { margin-top: calc(5 * var(--login-unit)); }
.login-field + .login-field { margin-top: calc(10 * var(--login-unit)); }
.login-field label { display: block; color: #173d40; font-size: calc(7.7 * var(--login-unit)); font-weight: 500; line-height: calc(13 * var(--login-unit)); margin-bottom: calc(4 * var(--login-unit)); }
.login-input-wrap { display: flex; align-items: center; position: relative; height: calc(30 * var(--login-unit)); border: 1px solid #e2e9e6; border-radius: calc(8 * var(--login-unit)); background: linear-gradient(110deg, #fbfdfc, #fff); transition: border-color .18s, box-shadow .18s; }
.login-input-wrap:focus-within { border-color: #12895b; box-shadow: 0 0 0 calc(3 * var(--login-unit)) rgba(14,139,81,.11); }
.login-input-wrap > .login-icon { margin-left: calc(9 * var(--login-unit)); color: #70818b; width: calc(11 * var(--login-unit)); height: calc(11 * var(--login-unit)); }
.login-input-wrap input { min-width: 0; width: 100%; height: 100%; font: inherit; font-size: calc(8.2 * var(--login-unit)); color: #243e40; border: 0; background: transparent; border-radius: inherit; padding: 0 calc(11 * var(--login-unit)); outline: none; box-shadow: none; }
.login-input-wrap input::placeholder { color: #9aa6b0; opacity: 1; }
.login-input-wrap input[aria-invalid="true"] { color: #a33434; }
.login-input-wrap:has(input[aria-invalid="true"]) { border-color: #d98c8c; }
.login-password-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(28 * var(--login-unit)); align-self: stretch; padding: 0; background: transparent; border: 0; color: #79868e; border-radius: calc(7 * var(--login-unit)); cursor: pointer; }
.login-password-toggle:hover { color: #07804c; background: #eef8f2; }
.login-submit { margin-top: calc(10 * var(--login-unit)); border: 0; width: 100%; height: calc(28 * var(--login-unit)); display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--login-unit)); color: white; background: linear-gradient(100deg, #04814e, #047c49); border-radius: calc(7 * var(--login-unit)); font: inherit; font-size: calc(9.3 * var(--login-unit)); font-weight: 500; cursor: pointer; box-shadow: 0 2px 4px rgba(5,117,69,.06); transition: background .18s, box-shadow .18s; }
.login-submit:hover { background: #006a40; box-shadow: 0 3px 10px rgba(5,117,69,.18); }
.login-submit:disabled { opacity: .72; cursor: wait; }
.login-submit .login-icon { width: calc(12 * var(--login-unit)); height: calc(12 * var(--login-unit)); }
.login-error { font-size: calc(8 * var(--login-unit)); line-height: 1.5; margin: calc(7 * var(--login-unit)) 0 0; padding: calc(6 * var(--login-unit)); border-radius: calc(5 * var(--login-unit)); background: #fff0f0; color: #a52e2e; }
.login-error[hidden] { display: none; }
.login-demos { margin-top: calc(12 * var(--login-unit)); }
.login-demo-title { display: flex; gap: calc(8 * var(--login-unit)); align-items: center; justify-content: center; margin: 0 0 calc(6 * var(--login-unit)); font-size: calc(6.6 * var(--login-unit)); line-height: calc(11 * var(--login-unit)); color: #75858d; }
.login-demo-title::before, .login-demo-title::after { content: ''; height: 1px; background: #e9efec; flex: 1; }
.login-demo-title span { white-space: nowrap; }
.login-demo-list { display: grid; gap: calc(6 * var(--login-unit)); }
.login-demo { width: 100%; border: 1px solid #f0f4f1; border-radius: calc(7 * var(--login-unit)); background: linear-gradient(100deg, #f2f8f4, #f8fbf9); display: flex; align-items: center; min-height: calc(35 * var(--login-unit)); gap: calc(10 * var(--login-unit)); padding: calc(4 * var(--login-unit)) calc(7 * var(--login-unit)); text-align: left; font: inherit; color: #284e52; cursor: pointer; transition: background .18s, border-color .18s; }
.login-demo:hover { background: #e6f4eb; border-color: #a5d9b9; }
.login-demo-icon { width: calc(25 * var(--login-unit)); height: calc(25 * var(--login-unit)); display: flex; align-items: center; justify-content: center; border-radius: calc(6 * var(--login-unit)); color: #078346; background: #d9efdf; box-shadow: inset 0 0 0 calc(3 * var(--login-unit)) #e8f6eb; }
.login-demo-icon .login-icon { width: calc(18 * var(--login-unit)); height: calc(18 * var(--login-unit)); }
.login-demo-text { min-width: 0; flex: 1; }
.login-demo-label { display: block; font-size: calc(7.9 * var(--login-unit)); line-height: 1.55; font-weight: 400; letter-spacing: -.015em; }
.login-demo-credentials { display: block; font-size: calc(6.7 * var(--login-unit)); line-height: 1.4; color: #7c8d96; }
.login-demo > .login-icon { width: calc(8 * var(--login-unit)); height: calc(8 * var(--login-unit)); color: #7b8b92; }
.login-footnote { margin: calc(8 * var(--login-unit)) 0 0; text-align: center; color: #839198; font-size: calc(6.3 * var(--login-unit)); line-height: 1.8; }
.ecotrack-login button:focus-visible { outline: calc(2 * var(--login-unit)) solid #11844f; outline-offset: calc(3 * var(--login-unit)); }
@media (min-width: 1800px) { .ecotrack-login { --login-unit: .09765625vw; } }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .ecotrack-login { --login-unit: 1px; display: flex; flex-direction: column; overflow: visible; }
  .login-brand { min-height: 0; width: 100%; aspect-ratio: 640 / 502; }
  .login-brand-art { height: auto; }
  .login-panel { padding: 26px 18px 38px; justify-content: center; }
  .login-card { width: 100%; max-width: 440px; min-height: 0; margin: 0; transform: none; padding: 25px 25px 23px; border-radius: 20px; }
  .login-heading-leaf { width: 32px; height: 27px; margin-bottom: 4px; }
  .login-heading h1 { font-size: 24px; }
  .login-subtitle { font-size: 13px; margin-top: 2px; }
  .login-intro { font-size: 11px; margin-top: 7px; }
  .login-form { margin-top: 20px; }
  .login-field + .login-field { margin-top: 15px; }
  .login-field label { font-size: 12px; line-height: 18px; margin-bottom: 6px; }
  .login-input-wrap { height: 46px; border-radius: 10px; }
  .login-input-wrap > .login-icon { width: 15px; height: 15px; margin-left: 13px; }
  .login-input-wrap input { font-size: 16px; padding: 0 12px; }
  .login-password-toggle { flex-basis: 44px; }
  .login-password-toggle .login-icon { width: 18px; height: 18px; }
  .login-submit { height: 44px; margin-top: 16px; font-size: 14px; border-radius: 9px; gap: 9px; }
  .login-submit .login-icon { width: 17px; height: 17px; }
  .login-demos { margin-top: 20px; }
  .login-demo-title { font-size: 10px; line-height: 17px; margin-bottom: 10px; }
  .login-demo-list { gap: 8px; }
  .login-demo { min-height: 53px; padding: 7px 9px; gap: 10px; border-radius: 9px; }
  .login-demo-icon { width: 34px; height: 34px; }
  .login-demo-icon .login-icon { width: 22px; height: 22px; }
  .login-demo-label { font-size: 11px; }
  .login-demo-credentials { font-size: 10px; }
  .login-demo > .login-icon { width: 11px; height: 11px; }
  .login-footnote { margin-top: 20px; font-size: 9px; }
  .login-error { font-size: 12px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ecotrack-login * { transition: none !important; } }