:root {
  color-scheme: light;
  --ink: #1d3029;
  --muted: #738079;
  --paper: #f7f8f5;
  --white: #fff;
  --green: #176b52;
  --green-dark: #104c3c;
  --green-pale: #e6f1eb;
  --line: #e2e8e1;
  font-family: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.auth-page {
  min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .92fr) 1.08fr;
  background: linear-gradient(130deg, #edf4eb 0%, #f7f8f5 52%);
}
.auth-aside {
  position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: space-between; overflow: hidden; padding: 34px clamp(30px, 5vw, 78px);
  border-right: 1px solid rgba(220,231,219,.8);
}
.brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 11px; }
.brand img { width: 43px; height: 58px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font-size: 20px; font-weight: 850; letter-spacing: 1.2px; }
.brand-tagline { color: var(--muted); font-size: 9px; }
.aside-copy { position: relative; z-index: 1; max-width: 470px; margin: 65px auto 80px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.aside-copy h1 { margin: 14px 0; font-size: clamp(32px, 4vw, 52px); letter-spacing: -2px; line-height: 1.1; }
.aside-copy p { max-width: 390px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.lion-card {
  position: absolute; right: -28px; bottom: 74px; width: min(38vw, 360px); height: 370px;
  display: grid; place-items: end center; overflow: hidden; border: 1px solid #dce9dc;
  border-radius: 48% 48% 0 0; background: radial-gradient(ellipse at 50% 75%, #dcebd9, #eaf2e8 68%, transparent 69%);
}
.lion-card img { width: 78%; height: 88%; object-fit: contain; object-position: bottom; }
.aside-footer { position: relative; z-index: 1; color: #748078; font-size: 10px; }
.auth-main { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 38px clamp(24px, 5vw, 76px); }
.auth-card { width: min(100%, 570px); margin: auto; padding: 34px; border: 1px solid rgba(226,232,225,.9); border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: 0 16px 50px rgba(32,62,44,.07); }
.auth-card.wide { width: min(100%, 680px); }
.mobile-brand { display: none; }
.auth-heading { margin-bottom: 23px; }
.auth-heading h2 { margin: 0 0 7px; font-size: 27px; letter-spacing: -.8px; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.google-button {
  width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s;
}
.google-button:hover { border-color: #abc8b4; background: #fbfdfb; }
.google-mark { width: 18px; height: 18px; display: grid; place-items: center; color: #4285f4; font-size: 18px; font-weight: 800; }
.divider { display: flex; align-items: center; gap: 13px; margin: 19px 0; color: #8b948e; font-size: 10px; }
.divider::before, .divider::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 13px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .group-title { display: block; margin-bottom: 6px; color: #394a40; font-size: 11px; font-weight: 750; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dfe6df; border-radius: 9px;
  outline: none; background: #fff; color: var(--ink); font-size: 12px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 72px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a0a9a2; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #72a687; box-shadow: 0 0 0 3px rgba(23,107,82,.1); }
.field input:invalid:not(:placeholder-shown) { border-color: #c85d54; }
.field-hint { display: block; margin-top: 4px; color: #87918a; font-size: 9px; line-height: 1.45; }
.password-field { position: relative; }
.password-field input { padding-right: 64px; }
.show-password { position: absolute; top: 50%; right: 9px; padding: 5px; border: 0; background: none; color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; transform: translateY(-50%); }
.group-heading { grid-column: 1 / -1; margin: 6px 0 -3px; padding-top: 13px; border-top: 1px solid #edf0ec; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.check-row { display: flex; align-items: flex-start; gap: 8px; color: #66736b; font-size: 10px; line-height: 1.55; }
.check-row input { width: 14px; height: 14px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--green); }
.check-row a, .inline-link { color: var(--green); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.forgot { display: block; margin: -3px 0 15px; color: var(--green); font-size: 11px; font-weight: 700; text-align: right; }
.submit-button {
  width: 100%; min-height: 45px; margin-top: 17px; border: 0; border-radius: 10px;
  background: var(--green); color: var(--white); font-size: 13px; font-weight: 800; cursor: pointer; transition: .2s;
}
.submit-button:hover { background: var(--green-dark); }
.submit-button:focus-visible, .google-button:focus-visible, .show-password:focus-visible { outline: 3px solid #a7d2b6; outline-offset: 2px; }
.auth-switch { margin: 18px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.notice { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #e4eadf; border-radius: 9px; background: #f5f8f2; color: #617065; font-size: 10px; line-height: 1.55; }
.notice.warning { border-color: #eedfbd; background: #fcf8ed; color: #776237; }
.notice[hidden] { display: none; }
.message { margin-top: 13px; padding: 11px 13px; border-radius: 9px; background: #fcf8ed; color: #725d31; font-size: 11px; line-height: 1.55; }
.message[hidden] { display: none; }
.form-actions { grid-column: 1 / -1; }
.form-actions .submit-button { margin-top: 0; }
.progress-step { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.progress-line { height: 4px; flex: 1; overflow: hidden; border-radius: 5px; background: #e8eee8; }
.progress-line span { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--green); }
.legal-copy { margin: 12px 0 0; color: #89928c; font-size: 9px; line-height: 1.55; }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: .72fr 1.28fr; }
  .auth-aside { padding-right: 28px; padding-left: 28px; }
  .lion-card { right: -80px; width: 330px; }
  .auth-main { padding-right: 25px; padding-left: 25px; }
  .auth-card { padding: 27px; }
}
@media (max-width: 680px) {
  .auth-page { display: block; background: var(--paper); }
  .auth-aside { display: none; }
  .auth-main { min-height: 100vh; align-items: flex-start; padding: 23px 16px 32px; }
  .auth-card, .auth-card.wide { width: min(100%, 520px); margin: auto; padding: 23px 20px; border-radius: 18px; }
  .mobile-brand { display: flex; margin-bottom: 24px; }
  .mobile-brand img { width: 38px; height: 51px; }
  .mobile-brand .brand-name { font-size: 18px; }
  .mobile-brand .brand-tagline { font-size: 8px; }
  .auth-heading h2 { font-size: 24px; }
  .form-grid { gap: 12px 9px; }
}
@media (max-width: 420px) {
  .form-grid { grid-template-columns: 1fr; }
  .field.full, .group-heading, .form-actions { grid-column: 1; }
  .auth-card, .auth-card.wide { padding: 21px 17px; }
}