/* Evergreen auth gateway. All presentation is local and CSP-safe. */
:root {
  color-scheme: light;
  --ink: #20312e;
  --muted: #64736e;
  --emerald: #185b47;
  --emerald-hover: #104b39;
  --line: #dce3de;
  --paper: #fbfcf9;
  --focus: #21866b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
input:focus-visible { outline: 3px solid #21866b38; outline-offset: 2px; border-color: var(--focus); }
::selection { background: #c4dfce; color: #123d2e; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 18px; color: #fff; background: #185b47; border-radius: 8px; transform: translateY(-160%); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.gateway { display: grid; grid-template-columns: minmax(360px, 46%) minmax(460px, 54%); min-height: 100vh; min-height: 100svh; }
.welcome-panel { position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; min-height: 100%; padding: 44px 12% 32px; color: #f0f4e9; background: radial-gradient(ellipse at 85% 80%, #2e5b44 0, transparent 52%), linear-gradient(145deg, #12372d, #1e4937); }
.welcome-panel::after { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; left: -440px; top: 130px; border: 1px solid #ffffff0a; border-radius: 50%; box-shadow: 0 0 0 80px #ffffff02, 0 0 0 160px #ffffff02; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #d9e6c7; border: 1px solid #d9e6c739; border-radius: 13px; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-type { font-family: Georgia, "Times New Roman", serif; font-size: 27px; letter-spacing: -.8px; line-height: 1; }
.brand-type > span { display: block; margin-top: 7px; margin-left: 2px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 3.6px; color: #c1cfbd; }
.welcome-copy { position: relative; z-index: 1; margin-top: clamp(90px, 16vh, 180px); padding-bottom: 228px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; font-size: 11px; font-weight: 500; letter-spacing: 2px; color: #c9d7bd; }
.tiny-line { width: 22px; height: 1px; background: #b5c5a3; }
h1 { margin: 0; font-size: clamp(34px, 3.35vw, 57px); font-weight: 450; line-height: 1.55; letter-spacing: .015em; }
.headline-accent { color: #cedeb9; }
.welcome-description { max-width: 300px; margin: 25px 0 0; color: #c8d5c8; font-size: 13px; font-weight: 400; line-height: 2.1; letter-spacing: .35px; }
.welcome-detail { display: flex; align-items: center; gap: 12px; margin-top: 31px; color: #c1d1be; font-size: 11px; letter-spacing: 1px; }
.detail-rule { width: 31px; height: 1px; background: #b8c9b14d; }
.welcome-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; position: relative; z-index: 1; color: #becdb9; font-size: 9px; letter-spacing: 1px; line-height: 1.6; }
.welcome-footer > :first-child { font-size: 8px; letter-spacing: 1.8px; }
.botanical { position: absolute; z-index: 0; bottom: -33px; right: -18px; width: 440px; height: 440px; color: #ccdcb5; pointer-events: none; opacity: .47; }
.botanical-drawing { position: relative; width: 100%; height: 100%; opacity: .7; }
.botanical-orbit { position: absolute; border: 1px solid #c7d9b21f; border-radius: 50%; }
.orbit-one { width: 334px; height: 334px; top: 62px; left: 53px; }
.orbit-two { width: 245px; height: 245px; top: 105px; left: 97px; }
.botanical-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #c9d9b5; }
.dot-one { top: 87px; left: 131px; }
.dot-two { top: 314px; left: 332px; width: 3px; height: 3px; opacity: .65; }
.login-panel { position: relative; display: flex; flex-direction: column; padding: 42px clamp(34px, 5vw, 88px) 28px; background: var(--paper); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 30px; }
.header-note { color: #637269; font-size: 11px; letter-spacing: 1.1px; }
.language-switch { display: flex; align-items: center; gap: 9px; color: #b9c1ba; font-size: 11px; }
.language-button { min-width: 32px; min-height: 36px; padding: 4px 2px; border: 0; background: transparent; color: #657168; font-size: 11px; border-radius: 4px; }
.language-button:hover { color: var(--emerald); }
.language-button.is-active { color: #274e3d; font-weight: 650; }
.mobile-brand { display: none; }
.form-wrap { width: 100%; max-width: 368px; margin: auto; padding: 64px 0 58px; }
.form-heading { margin-bottom: 33px; }
.private-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; padding: 6px 9px; border: 1px solid #e0e7dc; border-radius: 5px; background: #f1f5ed; color: #416047; font-size: 10px; letter-spacing: .4px; }
.private-badge svg { width: 13px; height: 13px; }
h2 { margin: 0; font-size: 31px; font-weight: 550; line-height: 1.45; letter-spacing: -.6px; }
.form-heading > p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.field { margin-bottom: 22px; }
.field > label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 550; line-height: 1.5; }
.field input { display: block; width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; color: #20312e; background: #fff; font-size: 14px; transition: border-color .18s, box-shadow .18s; }
.field input::placeholder { color: #68776e; opacity: 1; }
.field input:hover { border-color: #b4c2b8; }
.field input:focus { border-color: var(--focus); }
.field input[readonly] { color: #62756a; background: #f5f7f2; }
.password-field { margin-bottom: 21px; }
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 91px; }
.password-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; position: absolute; right: 5px; top: 5px; min-width: 75px; height: 40px; padding: 0 9px; color: #5e7165; background: transparent; border: none; border-radius: 5px; font-size: 11px; }
.password-toggle:hover { background: #f1f5ed; color: #214d38; }
.password-toggle svg { width: 17px; height: 17px; flex-shrink: 0; }
.eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }
.field-note { margin: 7px 0 0; color: #657267; font-size: 10px; line-height: 1.65; }
.caps-lock-note { margin: 7px 0 0; color: #80521b; font-size: 11px; }
.remember-option { display: flex; align-items: center; gap: 9px; width: fit-content; min-height: 32px; cursor: pointer; color: #53665a; font-size: 12px; }
.remember-option input { width: 16px; height: 16px; margin: 0; accent-color: #185b47; cursor: pointer; }
.form-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; min-height: 34px; margin-top: 10px; padding: 0 0 9px; color: #64736e; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.form-status.is-error { color: #a03636; }
.retry-button { padding: 2px 3px; border: 0; border-radius: 3px; color: #185b47; background: transparent; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.submit-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 13px 45px; border: 1px solid transparent; border-radius: 8px; background: var(--emerald); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .5px; box-shadow: 0 3px 7px #174c3612; transition: background .18s, transform .18s, box-shadow .18s; }
.submit-button:hover:not(:disabled) { background: var(--emerald-hover); box-shadow: 0 4px 12px #174c3622; }
.submit-button:active:not(:disabled) { transform: translateY(1px); }
.submit-button:disabled { background: #5c7b6b; box-shadow: none; }
.button-arrow { position: absolute; right: 17px; width: 18px; height: 18px; }
.button-spinner { display: none; width: 15px; height: 15px; flex-shrink: 0; border: 1.5px solid #ffffff59; border-top-color: #fff; border-radius: 50%; animation: button-spin .8s linear infinite; }
.submit-button.is-loading .button-spinner { display: inline-block; }
.submit-button.is-loading .button-arrow { display: none; }
.connection-note { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 22px 0 0; color: #627266; font-size: 10px; line-height: 1.9; text-align: center; }
.connection-note svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; color: #65816c; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 25px; color: #637060; font-size: 10px; letter-spacing: .5px; }
.privacy-dot { width: 5px; height: 5px; border-radius: 50%; background: #7b967e; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #637060; font-size: 9px; line-height: 1.7; }
.panel-footer > :first-child { letter-spacing: .3px; }
.signed-out-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 23px; padding: 11px 13px; color: #235c43; background: #eaf3e8; border: 1px solid #d5e6d2; border-radius: 7px; font-size: 12px; line-height: 1.7; }
.signed-out-notice svg { width: 17px; height: 17px; flex-shrink: 0; }
.no-script { color: #a03636; font-size: 12px; line-height: 1.8; }
html[lang="en"] h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(37px, 3.65vw, 61px); line-height: 1.25; letter-spacing: -.02em; }
html[lang="en"] .welcome-description { max-width: 280px; letter-spacing: 0; }
html[lang="en"] .eyebrow { font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; }
html[lang="en"] .welcome-footer { font-size: 8px; letter-spacing: .3px; }
html[lang="en"] .header-note { letter-spacing: .3px; }
html[lang="en"] h2 { letter-spacing: -.9px; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (min-width: 1600px) { .welcome-panel { padding-left: 15%; padding-right: 12%; } .form-wrap { max-width: 390px; } }
@media (max-width: 1100px) and (min-width: 761px) { .gateway { grid-template-columns: 43% 57%; } .welcome-panel { padding-left: 10%; padding-right: 9%; } .welcome-copy { margin-top: 130px; } .welcome-footer { flex-direction: column; gap: 4px; } .botanical { right: -95px; } .login-panel { padding-left: 42px; padding-right: 42px; } .panel-footer { font-size: 8px; gap: 10px; } h1 { font-size: 35px; } html[lang="en"] h1 { font-size: 38px; } }
@media (max-width: 760px) {
  body { background: #eef2eb; }
  .gateway { display: block; min-height: 100vh; min-height: 100svh; padding: 26px 20px; background: radial-gradient(ellipse at top, #e2ebe0 0, #f0f3ed 65%); }
  .welcome-panel { display: none; }
  .login-panel { width: 100%; max-width: 480px; min-height: calc(100svh - 52px); margin: 0 auto; padding: 23px 30px 21px; border: 1px solid #dfe7db; border-radius: 18px; box-shadow: 0 18px 70px #254b2b08, 0 2px 8px #254b2b03; }
  .panel-header { min-height: 36px; }
  .header-note { display: none; }
  .mobile-brand { display: inline-flex; align-items: center; gap: 7px; color: #21533c; font-family: Georgia, "Times New Roman", serif; font-size: 24px; letter-spacing: -.7px; }
  .mobile-brand svg { width: 27px; height: 27px; }
  .form-wrap { padding-top: 49px; padding-bottom: 42px; }
  .form-heading { margin-bottom: 29px; }
  .private-badge { margin-bottom: 17px; }
  h2 { font-size: 29px; }
  .field input { font-size: 16px; }
  .panel-footer { justify-content: center; flex-wrap: wrap; gap: 3px 16px; text-align: center; }
  .privacy-note { margin-top: 23px; }
}
@media (max-width: 380px) {
  .gateway { padding: 12px; }
  .login-panel { min-height: calc(100svh - 24px); padding: 20px 23px; border-radius: 14px; }
  .form-wrap { padding-top: 37px; padding-bottom: 30px; }
  .mobile-brand { font-size: 22px; }
  .language-switch { gap: 5px; }
  .connection-note { font-size: 9px; }
}
@media (max-height: 790px) and (min-width: 761px) { .welcome-copy { margin-top: 85px; padding-bottom: 150px; } .botanical { bottom: -95px; } .form-wrap { padding-top: 36px; padding-bottom: 32px; } .login-panel { padding-top: 28px; padding-bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; } .button-spinner { border-color: #fff; border-left-color: transparent; } }
@media (forced-colors: active) { .submit-button, .brand-mark, .private-badge, .signed-out-notice { border: 1px solid ButtonText; } .privacy-dot { background: CanvasText; } .button-spinner { border-color: ButtonText; border-left-color: transparent; } }