/* Fullscreen login presentation, isolated from portal and administration styles. */
body[data-page="login"] { background: #e8f2f7; }
body[data-page="login"] #app { min-height: 100vh; }
.login-scene { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 64px 32px 90px; overflow: hidden; color: #213148; }
.login-background, .login-bg-frame, .login-background-tint { position: absolute; inset: 0; pointer-events: none; }
.login-background { z-index: -3; overflow: hidden; background: #e8f2f7; }
.login-bg-frame { will-change: opacity, transform; }
.login-bg-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-background-tint { z-index: -2; background: linear-gradient(125deg, #f5fafb2b, #ffffff15 55%, #edf7f826); }
.login-card { width: min(920px, 100%); max-width: 920px; margin: 0; padding: 0; display: grid; grid-template-columns: 1.04fr 1fr; border-radius: 16px; border: 1px solid #ffffffb8; background: #ffffffb0; backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); box-shadow: 0 22px 72px #1c536c1f, 0 3px 14px #163b5010; overflow: hidden; }
.login-story { display: flex; flex-direction: column; min-height: 520px; padding: 30px 32px 24px; background: linear-gradient(145deg, #f2f8fb70, #eef6f745 65%, #eaf4f638); border-right: 1px solid #e5eff3; position: relative; }
.login-brand { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; color: #10213a; font-size: 23px; font-weight: 700; letter-spacing: 2px; line-height: 1.25; }
.login-brand-mark { width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 9px; background: #087f72; color: white; font-size: 21px; font-weight: 700; letter-spacing: 0; box-shadow: 0 4px 12px #087f7214; }
.login-brand small { display: block; color: #79919e; font-size: 8px; font-weight: 500; letter-spacing: 2px; margin-top: 6px; }
.login-story-copy { margin: 29px 0 3px; position: relative; z-index: 1; }
.login-eyebrow { display: inline-block; color: #087f72; font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
.login-story h1 { color: #10213a; font-size: clamp(26px, 2.35vw, 30px); font-weight: 600; line-height: 1.55; letter-spacing: 0; margin: 0 0 13px; }
.login-story-copy p { font-size: 13px; line-height: 1.9; color: #6d8496; margin: 0; }
.login-report-art { display: block; width: 100%; max-width: 350px; height: auto; margin: auto auto 5px; flex-shrink: 0; }
.login-story-features { display: flex; gap: 13px; flex-wrap: wrap; color: #7a909f; font-size: 10px; margin-top: 5px; }
.login-story-features span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.login-story-features span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #62a69b; }
.login-access { display: flex; flex-direction: column; justify-content: center; padding: 36px 44px 30px; background: #fff; }
.login-access h2 { margin: 0 0 8px; color: #10213a; font-size: 25px; font-weight: 600; line-height: 1.4; }
.login-intro { margin: 0; font-size: 13px; color: #8494a3; }
.login-methods { display: flex; gap: 28px; border-bottom: 1px solid #e8edf2; margin: 26px 0 19px; }
.login-methods button { padding: 0 1px 11px; border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: #7b8b9b; font-weight: 500; font-size: 14px; cursor: pointer; margin-bottom: -1px; }
.login-methods button.active { color: #087f72; border-bottom-color: #087f72; }
.login-methods button:hover { color: #087f72; }
.login-methods button:focus-visible, .login-dot:focus-visible { outline: 2px solid #087f72; outline-offset: 4px; }
.login-access label { display: block; color: #405369; font-size: 13px; font-weight: 500; margin: 0 0 7px; }
.login-access label:not(:first-child) { margin-top: 20px; }
.login-access input { display: block; width: 100%; height: 42px; border: 1px solid #d9e2ea; border-radius: 7px; padding: 11px 14px; background: #fff; color: #213148; font-size: 13px; box-shadow: none; }
.login-access input::placeholder { color: #a2afba; }
.login-access input:focus { outline: 3px solid #087f7210; border-color: #4b9f93; }
.login-access .login-submit { display: block; width: 100%; height: 42px; margin-top: 26px; padding: 9px 16px; border: 0; border-radius: 7px; background: #087f72; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .5px; cursor: pointer; box-shadow: 0 5px 12px #087f7215; }
.login-access .login-submit:hover { background: #066f63; }
.login-access .login-submit:disabled { cursor: wait; opacity: .6; }
.login-access .login-submit:focus-visible { outline: 3px solid #087f7240; outline-offset: 3px; }
.login-error { min-height: 30px; margin: 12px 0 0; color: #b64747; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.login-help { margin: 10px 0 0; color: #97a4af; font-size: 11px; text-align: center; }
.login-wechat-state { min-height: 225px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: #6f8495; }
.login-wechat-symbol { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; margin-bottom: 7px; background: #eaf5ef; border: 1px solid #dceee3; color: #429b6a; font-size: 29px; font-weight: 600; }
.login-wechat-state strong { color: #405369; font-size: 14px; font-weight: 500; }
.login-wechat-state p { margin: 0; font-size: 12px; }
.login-mobile-brand { display: none; }
.login-page-footer { position: absolute; left: 20px; right: 20px; bottom: 51px; text-align: center; color: #6c8797; font-size: 11px; letter-spacing: 1px; }
.login-background-controls { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 48px); padding: 4px; }
.login-background-controls[hidden], .login-access [hidden] { display: none !important; }
.login-background-controls .login-dot { width: 8px; height: 8px; padding: 0; border: 1px solid #7197a4a6; border-radius: 50%; background: #ffffffb8; box-shadow: 0 1px 3px #52708410; cursor: pointer; transition: background-color 160ms, width 160ms; }
.login-background-controls .login-dot.active { width: 23px; border-radius: 5px; border-color: #087f72; background: #087f72; }
.login-background-controls .login-dot:disabled { opacity: .3; cursor: default; }
@media (max-width: 950px) {
  .login-scene { padding-left: 26px; padding-right: 26px; }
  .login-story { padding: 29px 27px 24px; }
  .login-access { padding: 34px 31px 28px; }
  .login-story h1 { font-size: 27px; }
}
@media (max-width: 720px) {
  .login-scene { padding: 50px 22px 84px; }
  .login-card { max-width: 380px; grid-template-columns: 1fr; border-radius: 14px; }
  .login-story { display: none; }
  .login-access { padding: 28px 26px 23px; }
  .login-mobile-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #10213a; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
  .login-mobile-brand .login-brand-mark { width: 35px; height: 35px; border-radius: 9px; font-size: 20px; }
  .login-access h2 { font-size: 25px; }
  .login-methods { margin-top: 27px; }
  .login-page-footer { bottom: 49px; font-size: 10px; letter-spacing: .5px; }
}
@media (max-height: 750px) and (min-width: 721px) {
  .login-scene { padding-top: 35px; padding-bottom: 75px; }
  .login-story { min-height: 490px; }
  .login-story-copy { margin-top: 27px; }
  .login-report-art { max-width: 320px; }
  .login-page-footer { bottom: 43px; }
  .login-background-controls { bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-background-controls .login-dot { transition: none; }
  .login-bg-frame { will-change: auto; }
}