:root { color-scheme: light; --ink: #182d28; --muted: #7c8b85; --green: #008d72; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #f7faf8; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 20px; height: 20px; flex: 0 0 auto; }
a:focus-visible, button:focus-visible { outline: 3px solid #36bd9c; outline-offset: 4px; }
.login-layout { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); min-height: 100svh; }
.brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px clamp(36px, 5.5vw, 96px) 36px; background: radial-gradient(ellipse at 5% 80%, #154d3e 0, transparent 52%), #0c2922; color: #effbf5; }
.brand-panel::after { content: ""; position: absolute; width: 540px; height: 540px; right: -340px; top: -215px; border: 1px solid #b3eac41a; border-radius: 50%; box-shadow: 0 0 0 64px #b3eac407, 0 0 0 128px #b3eac405; pointer-events: none; }
.brand { display: inline-flex; gap: 12px; align-items: center; align-self: flex-start; z-index: 1; font-size: 23px; font-weight: 650; letter-spacing: -.7px; }
.brand b { margin-left: 9px; border-left: 1px solid #ffffff30; padding-left: 13px; font-size: 13px; font-weight: 450; letter-spacing: .2px; color: #b1cbc0; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff18; border-radius: 12px; background: #ffffff09; }
.brand-mark img { width: 29px; height: 29px; object-fit: contain; }
.brand-copy { position: relative; z-index: 1; width: 100%; max-width: 470px; margin: auto 0; padding: 64px 0 56px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 25px; color: #b1cdc1; font-size: 12px; letter-spacing: 2px; }
.eyebrow > span { height: 6px; width: 6px; border-radius: 50%; background: #95dab1; box-shadow: 0 0 0 4px #95dab112; }
h1 { margin: 0; font-size: clamp(32px, 3.2vw, 52px); font-weight: 550; line-height: 1.45; letter-spacing: -1.6px; }
h1 em { display: block; color: #a9ddbe; font-style: normal; }
.brand-description { margin: 23px 0 0; font-size: 14px; line-height: 1.95; color: #9bb8aa; }
.flow { max-width: 368px; margin-top: 39px; border: 1px solid #b0d9bf25; border-radius: 15px; padding: 18px 22px 20px; background: linear-gradient(120deg, #ffffff07, #ffffff02); }
.flow-head { display: flex; align-items: center; gap: 4px; color: #92ad9f; font-size: 8px; letter-spacing: 1.1px; }
.flow-head span { margin-right: auto; }
.flow-head i { width: 3px; height: 3px; border-radius: 50%; background: #82a896; }
.flow-path { display: flex; align-items: center; padding: 24px 9px 0; }
.flow-path > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #b6e8c62b; border-radius: 12px; color: #c3e4cc; background: #bddfc50a; }
.flow-path > span:last-child { background: #a9dcb6; color: #1b4a34; border-color: #a9dcb6; }
.flow-path > b { height: 1px; flex: 1; margin: 0 9px; background: linear-gradient(90deg, #86b49c30, #86b49c80); }
.flow-labels { display: flex; justify-content: space-between; margin-top: 13px; color: #b9cfc2; font-size: 10px; }
.flow-labels span { width: 62px; text-align: center; }
.brand-bottom { display: flex; align-items: center; gap: 10px; color: #799c8a; margin: 0; font-size: 11px; letter-spacing: 1px; }
.small-mark { display: grid; place-items: center; height: 20px; width: 20px; border: 1px solid #799c8a70; border-radius: 50%; font-size: 10px; }
.form-panel { display: flex; flex-direction: column; padding: 42px clamp(28px, 4vw, 66px) 31px; background: radial-gradient(ellipse at 90% 10%, #edf4ee 0, transparent 50%), #f8faf8; }
.form-top { display: flex; justify-content: space-between; align-items: center; color: #8b9690; font-size: 11px; }
.form-top > span { letter-spacing: 1px; }
.form-top a { display: inline-flex; align-items: center; gap: 12px; color: #526c5e; padding: 5px 0 5px 12px; }
.form-top a:hover { color: var(--green); }
.login-card { width: min(420px, 100%); margin: auto; padding: 60px 0 64px; }
.login-icon { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 27px; border: 1px solid #d9e8de; border-radius: 14px; background: #edf4ee; color: #498367; }
.login-icon svg { width: 23px; height: 23px; }
.card-eyebrow { margin: 0 0 11px; color: #83968b; font-size: 10px; font-weight: 650; letter-spacing: 2px; }
h2 { margin: 0; font-size: 31px; font-weight: 600; letter-spacing: -1px; }
.login-hint { margin: 13px 0 34px; color: #7c8b82; font-size: 13px; line-height: 1.7; }
form > label { display: block; margin: 22px 0 10px; font-size: 12px; font-weight: 600; color: #486052; }
.input-wrap { display: flex; align-items: center; gap: 13px; height: 54px; padding: 0 16px; border: 1px solid #dce5de; border-radius: 11px; background: #fff; color: #96a69b; transition: border-color .15s, box-shadow .15s; }
.input-wrap:focus-within { border-color: #489c78; box-shadow: 0 0 0 3px #2191680d; }
.input-wrap > svg { width: 18px; height: 18px; }
.input-wrap input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #18362a; font-size: 14px; }
.input-wrap input::placeholder { color: #a7b2aa; }
.password-toggle { display: grid; place-items: center; flex: 0 0 42px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: #8a9e90; border-radius: 6px; }
.password-toggle:hover { color: var(--green); }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.login-error { margin: 17px 0 0; padding: 11px 13px; border-radius: 8px; background: #fff0ec; color: #ae483c; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.login-submit { width: 100%; min-height: 53px; display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 29px; padding: 12px 20px; border: 1px solid #008568; border-radius: 11px; background: #008d72; color: white; font-size: 14px; font-weight: 600; box-shadow: 0 6px 14px #008d7212; transition: background .15s, transform .15s; }
.login-submit:hover { background: #007e65; transform: translateY(-1px); }
.login-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.login-submit svg { width: 18px; height: 18px; }
.access-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 23px 0 0; color: #95a298; font-size: 11px; }
.access-note svg { width: 14px; height: 14px; }
footer { display: flex; justify-content: center; gap: 12px; color: #9ba79e; font-size: 10px; letter-spacing: .2px; }
footer span { border-left: 1px solid #dce3dc; padding-left: 12px; }
@media (min-width: 1600px) { .brand-copy { max-width: 560px; } h1 { font-size: 58px; } .flow { max-width: 408px; } }
@media (max-width: 1000px) and (min-width: 721px) { .brand-panel { padding-inline: 32px; } .form-panel { padding-inline: 34px; } .flow { padding-inline: 16px; } h1 { font-size: 34px; } .brand-description { font-size: 12px; } }
@media (max-width: 720px) {
  .login-layout { display: flex; flex-direction: column; }
  .brand-panel { flex: 0 0 auto; padding: 24px 27px 29px; }
  .brand { font-size: 21px; gap: 10px; }
  .brand-mark { width: 35px; height: 35px; border-radius: 10px; }
  .brand-mark img { width: 25px; height: 25px; }
  .brand-copy { margin: 0; padding: 28px 0 0; }
  .eyebrow { margin-bottom: 11px; font-size: 10px; }
  h1 { font-size: 27px; line-height: 1.5; letter-spacing: -.8px; }
  h1 br { display: block; } h1 em { display: inline; margin-left: 0; }
  .brand-description, .flow, .brand-bottom { display: none; }
  .form-panel { flex: 1; padding: 20px 27px 25px; }
  .form-top { font-size: 10px; }
  .login-card { padding: 32px 0 38px; }
  .login-icon, .card-eyebrow { display: none; }
  h2 { font-size: 27px; }
  .login-hint { margin: 10px 0 27px; font-size: 12px; }
  .input-wrap input { font-size: 16px; }
  .login-submit { margin-top: 25px; }
  footer { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }