@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --auth-ink: #163d36;
  --auth-muted: #63786e;
  --auth-line: #d6e0d7;
  --auth-paper: #f2f6f3;
  --auth-white: #fffefa;
  --auth-green: #17624d;
  --auth-green-dark: #124d3c;
  --auth-coral: #e06b43;
}

body { min-height: 100vh; margin: 0; color: var(--auth-ink); background-color: var(--auth-paper); background-image: radial-gradient(#c9d9ce 0.7px, transparent 0.7px); background-size: 18px 18px; font-family: 'DM Sans', sans-serif; }
header { font-size: 14px; }
nav a:hover { color: #ffc845; }
.auth-main { display: grid; min-height: calc(100vh - 58px); place-items: center; padding: 38px 22px; }
.auth-layout { display: grid; width: min(920px, 100%); min-height: 480px; grid-template-columns: 0.9fr 1.1fr; overflow: hidden; border: 1px solid #d7e0d9; border-radius: 8px; background: var(--auth-white); box-shadow: 0 22px 60px rgba(28, 63, 49, .12); animation: auth-arrive 420ms ease both; }
.auth-aside { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; padding: 32px; background-color: var(--auth-green); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px); color: #f7f6e8; }
.auth-wordmark { width: fit-content; color: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; }
.auth-wordmark span { color: #ffc845; }
.auth-aside-copy { position: relative; z-index: 1; margin: auto 0; padding: 60px 0 36px; }
.auth-eyebrow { margin: 0 0 9px; color: #23745e; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
.auth-aside .auth-eyebrow { color: #c6dfbf; }
.auth-aside-copy h1 { max-width: 340px; margin: 0; font: 600 40px/1.07 'Fraunces', Georgia, serif; }
.auth-globe { position: absolute; right: 22px; bottom: 72px; width: 130px; aspect-ratio: 1; overflow: hidden; border: 2px solid #f4efdb; border-radius: 50%; background: #ffc845; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.auth-globe-meridian { position: absolute; inset: -2px 28%; border: 1px solid rgba(22,61,54,.72); border-radius: 50%; }
.auth-globe-equator { position: absolute; inset: 23% -2px; border-top: 1px solid rgba(22,61,54,.72); border-bottom: 1px solid rgba(22,61,54,.72); border-radius: 50%; }
.auth-globe-land { position: absolute; display: block; background: #17624d; }
.auth-globe-land-one { top: 20%; left: 19%; width: 36%; height: 34%; border-radius: 48% 28% 45% 35%; clip-path: polygon(8% 20%, 35% 0, 66% 12%, 100% 35%, 79% 54%, 65% 100%, 44% 77%, 28% 58%, 0 53%); }
.auth-globe-land-two { right: 14%; bottom: 18%; width: 31%; height: 38%; border-radius: 40% 50% 45% 38%; clip-path: polygon(14% 0, 72% 8%, 100% 34%, 78% 57%, 65% 100%, 38% 82%, 26% 53%, 0 30%); }
.auth-panel { align-self: center; width: min(390px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0; }
.auth-panel-heading { margin-bottom: 18px; }
.auth-panel-heading h2 { margin: 0; color: var(--auth-ink); font: 600 31px/1.12 'Fraunces', Georgia, serif; }
.auth-panel-heading > p:last-child { margin: 8px 0 0; color: var(--auth-muted); font-size: 12px; }
.auth-message { margin: 0 0 16px; padding: 11px 12px; border: 1px solid #b7d7c1; border-radius: 5px; background: #edf7ee; color: #245a3c; font-size: 12px; line-height: 1.5; }
.auth-message.is-error { border-color: #e7b7a8; background: #fff1eb; color: #923d28; }
.auth-message[hidden] { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--auth-line); border-radius: 6px; background: #f3f6f2; }
.auth-tab { min-height: 38px; border: 0; border-radius: 4px; background: transparent; color: var(--auth-muted); font: 700 11px 'DM Sans', sans-serif; cursor: pointer; }
.auth-tab.is-active { background: var(--auth-white); color: var(--auth-green); box-shadow: 0 1px 4px rgba(28, 63, 49, .12); }
.auth-tab:focus-visible, .text-action:focus-visible, .password-toggle:focus-visible, .resend-confirmation:focus-visible { outline: 3px solid rgba(224,107,67,.45); outline-offset: 2px; }
.auth-view[hidden] { display: none; }
.auth-view form { display: grid; gap: 13px; }
.form-group { display: grid; gap: 6px; }
.form-group label, .field-label-row label { color: #314b40; font-size: 11px; font-weight: 700; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-action, .resend-confirmation { border: 0; background: transparent; color: #23745e; font: 600 10px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form-group input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #cbd8cf; border-radius: 5px; outline: 0; background: #fff; color: var(--auth-ink); font: 13px 'DM Sans', sans-serif; transition: border-color 150ms ease, box-shadow 150ms ease; }
.form-group input::placeholder { color: #92a198; }
.form-group input:focus { border-color: #23745e; box-shadow: 0 0 0 3px rgba(35,116,94,.13); }
.form-group input[aria-invalid="true"] { border-color: #b84c31; }
.password-field { display: flex; align-items: center; border: 1px solid #cbd8cf; border-radius: 5px; background: white; }
.password-field:focus-within { border-color: #23745e; box-shadow: 0 0 0 3px rgba(35,116,94,.13); }
.password-field input { border: 0; box-shadow: none !important; }
.password-toggle { min-width: 52px; min-height: 40px; margin-right: 2px; border: 0; border-radius: 4px; background: transparent; color: #23745e; font: 700 10px 'DM Sans', sans-serif; cursor: pointer; }
.auth-submit { display: flex; min-height: 46px; align-items: center; justify-content: space-between; margin-top: 3px; padding: 0 15px; border: 0; border-radius: 5px; background: var(--auth-green); color: white; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.auth-submit:hover { background: var(--auth-green-dark); transform: translateY(-1px); }
.auth-submit:disabled { cursor: wait; opacity: .6; transform: none; }
.resend-confirmation { margin-top: 16px; padding: 0; font-size: 11px; }
.resend-confirmation:disabled { cursor: wait; opacity: .6; }
.password-meter { height: 4px; overflow: hidden; border-radius: 2px; background: #e7ece7; }
.password-meter span { display: block; width: 0; height: 100%; background: #d87951; transition: width 180ms ease, background 180ms ease; }
.password-meter[data-strength="1"] span { width: 25%; background: #d87951; }
.password-meter[data-strength="2"] span { width: 50%; background: #c5963b; }
.password-meter[data-strength="3"] span { width: 75%; background: #6a9b60; }
.password-meter[data-strength="4"] span { width: 100%; background: #23745e; }
.field-hint, .auth-legal { margin: 0; color: var(--auth-muted); font-size: 10px; line-height: 1.5; }
@keyframes auth-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  .auth-main { min-height: calc(100vh - 58px); padding: 20px 14px; }
  .auth-layout { width: min(480px, 100%); min-height: 0; grid-template-columns: 1fr; }
  .auth-aside { min-height: 168px; padding: 20px 22px; }
  .auth-aside-copy { margin: 30px 0 0; padding: 0 0 20px; }
  .auth-aside-copy h1 { max-width: 280px; font-size: 30px; }
  .auth-globe { right: 20px; bottom: 20px; width: 76px; }
  .auth-globe-meridian { inset-inline: 27%; }
  .auth-panel { width: calc(100% - 44px); padding: 27px 0 30px; }
  .auth-panel-heading h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }