/* Shared login presentation. Native CSS, with the site's existing navy palette.
   Scoped overrides also cover the legacy inline styles in the homepage dialog. */
.login-surface {
  --login-ink: #1e2a38;
  --login-muted: #687381;
  --login-accent: #1a3a5c;
  --login-line: #dfe4e9;
  box-sizing: border-box;
  background: #fff;
  color: var(--login-ink);
  color-scheme: light;
}
.login-wrap { width: min(100%, 430px); }
/* Keep authentication above the mobile sidebar (10003) and its backdrop. */
#authLoginModal { z-index: 10060 !important; }
body:has(> .login-wrap) { min-height: 100dvh; padding: 32px 20px; }
.login-brand {
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 24px;
}
.login-brand-icon { width: 30px; height: 30px; border-radius: 7px; }
.login-brand-name { font-size: 14px; font-weight: 500; line-height: 1.5; color: #516174; }
.login-brand-sub { display: none; }
.login-card, #authLoginModal .auth-login-card {
  width: 100%;
  padding: 28px 26px 24px;
  border: 1px solid #e8ecf0;
  border-radius: 14px;
  box-shadow: 0 16px 56px rgb(26 58 92 / 7%);
}
#authLoginModal .auth-login-card {
  position: relative;
  width: 410px;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  font-family: inherit;
}
.login-surface .login-title, .login-surface #modalTitle {
  margin: 0 0 8px !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}
.login-surface .login-desc, .login-surface #modalDesc {
  margin-bottom: 18px !important;
  color: var(--login-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.phone-auth-enabled[data-auth-view="login"]:not([data-wechat-binding]) :is(.login-title, .login-desc, #modalTitle, #modalDesc) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.login-surface .phone-auth-modes {
  display: flex;
  gap: 28px;
  margin: 0 0 22px;
  border-bottom: 1px solid #edf0f3;
}
.login-surface .phone-auth-modes button {
  position: relative;
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--login-muted);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.login-surface .phone-auth-modes button[aria-pressed="true"] { color: var(--login-ink); }
.login-surface .phone-auth-modes button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20%;
  width: 60%;
  height: 3px;
  border-radius: 4px;
  background: var(--login-accent);
}
.login-surface :is(#loginForm, #modalLoginForm) > div { margin-bottom: 14px !important; }
.login-surface :is(#loginForm, #modalLoginForm) label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.login-surface :is(input:not([type="checkbox"]), select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 16px !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--login-ink) !important;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.4;
  transition: border-color .16s, box-shadow .16s;
}
.login-surface :is(#loginForm, #modalLoginForm) input { min-height: 44px; font-size: 14px !important; }
.login-surface input::placeholder { color: #717b86; opacity: 1; }
.login-surface input:not([type="checkbox"]):focus, .login-surface select:focus {
  outline: none !important;
  border-color: #527697 !important;
  box-shadow: inset 0 0 0 2px rgb(26 58 92 / 6%);
}
.login-surface button:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }
.login-surface .phone-auth-number, .login-surface .phone-auth-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--login-line);
  border-radius: 999px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}
.login-surface :is(.phone-auth-number, .phone-auth-row):focus-within {
  border-color: #527697;
  box-shadow: inset 0 0 0 3px rgb(26 58 92 / 9%);
}
.login-surface :is(.phone-auth-number, .phone-auth-row) input:focus { outline: none !important; box-shadow: none; }
.login-surface :is(.phone-auth-number, .phone-auth-row) input {
  flex: 1;
  width: 0;
  min-height: 30px;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 0 !important;
}
.login-surface :is(#loginForm, #modalLoginForm) :is(.phone-auth-number, .phone-auth-row) input { min-height: 34px; }
.login-surface .phone-auth-number span { margin-left: 12px; padding-right: 10px; border-right: 1px solid var(--login-line); color: var(--login-muted); font-size: 13px; }
.login-surface .phone-auth-number input { padding-left: 10px !important; }
.login-surface .phone-auth-row button {
  flex: 0 0 104px;
  width: 104px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--login-accent);
  font-size: 12px;
  white-space: nowrap;
}
.login-surface .phone-auth-row .phone-auth-image { background: #f5f7fa; }
.login-surface .phone-auth-image img { width: 100%; height: 32px; object-fit: contain; }
.login-surface .phone-auth-hint { margin: -6px 8px 0; color: var(--login-muted); font-size: 12px; }
.login-surface .phone-auth-hint.is-error { color: #b91c1c; }
.login-surface button[type="submit"] {
  min-height: 44px;
  margin-top: 4px;
  border-radius: 999px !important;
  background: var(--login-accent) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  transition: background .16s;
}
.login-surface :is(#loginForm, #modalLoginForm) button[type="submit"] { min-height: 44px; }
.login-surface button[type="submit"]:hover { background: #274e77 !important; }
.login-surface button:disabled { opacity: .6; cursor: not-allowed; }
.login-surface :is(.switch-view, #modalRegisterLink, #modalRegisterPanel > div:last-child) {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid #edf0f3;
  color: var(--login-muted) !important;
  font-size: 12px !important;
  line-height: 1.6;
}
.login-surface :is(.switch-view, #modalRegisterLink, #modalRegisterPanel > div:last-child) button { min-height: 32px; font-size: inherit; }
.login-surface :is(.password-input-wrap, div:has(> .auth-register-password)) input { padding-right: 52px !important; }
.login-surface :is(.password-visibility, .auth-password-toggle) { right: 12px !important; width: 36px !important; height: 36px !important; }
.login-surface .btn-code, .login-surface #modalSendCodeBtn { border-radius: 999px !important; }
.login-surface .agreement { margin: 14px 0; font-size: 12px; }
.login-surface input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.login-footer { margin-top: 24px; }
/* Registration: category navigation and a single natural scrolling surface. */
.registration-picker { font-size: 13px; }
.registration-picker [hidden] { display: none !important; }
.registration-browser { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; margin-top: 20px; }
.registration-browser.is-searching { grid-template-columns: minmax(0, 1fr); }
.registration-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; padding-right: 16px; border-right: 1px solid var(--login-line); }
.registration-categories button { min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: #f6f8fa; color: var(--login-muted); font: inherit; font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.registration-categories button:hover { background: #f5f7f9; color: var(--login-ink); }
.registration-categories button[aria-pressed="true"] { background: #eaf1f7; border-color: #d5e2ee; color: var(--login-accent); font-weight: 600; }
.registration-options { min-width: 0; }
.registration-group + .registration-group { margin-top: 18px; }
.registration-group[hidden] + .registration-group { margin-top: 0; }
.registration-group h3 { margin: 0 0 12px; color: var(--login-ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
.registration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.registration-option { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--login-line); border-radius: 8px; cursor: pointer; line-height: 1.5; }
.registration-option span { min-width: 0; overflow-wrap: anywhere; }
.registration-option:hover { border-color: #9bb0c4; background: #f7f9fb; }
.registration-option.is-selected { background: #eaf1f7; border-color: #527697; color: var(--login-accent); }
.registration-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.registration-option:focus-within { outline: 2px solid #527697; outline-offset: 2px; }
.login-surface .registration-option input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--login-accent); }
.registration-fallback { margin-top: 16px; }
.registration-fallback .registration-option { min-height: 36px; width: fit-content; padding: 6px 0; border: 0; background: transparent; color: var(--login-muted); }
.registration-fallback .registration-option.is-selected { color: var(--login-accent); }
.registration-selection { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--login-line); }
.registration-count { flex: 0 0 auto; padding-top: 7px; color: var(--login-muted); font-size: 12px; line-height: 20px; }
.registration-chips { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; }
.registration-chips button { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px; background: #edf2f7; color: var(--login-accent); border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.registration-chip-label { min-width: 0; overflow-wrap: anywhere; }
.registration-empty { padding: 7px 0; color: var(--login-muted); font-size: 12px; line-height: 20px; }
.registration-picker > .form-tip { margin: 8px 0 0; color: var(--login-muted); font-size: 12px; line-height: 1.5; }
.registration-no-results { margin: 4px 0 12px; color: var(--login-muted); line-height: 1.6; }
.registration-field-note { margin: 5px 4px 0; color: #687381; font-size: 11px; line-height: 1.5; }
.registration-field-note.is-error { color: #b91c1c; }
.registration-progress { margin-bottom: 18px; color: #1a3a5c; font-size: 13px; font-weight: 600; }
form[data-registration-step="1"] > [data-registration-profession],
form[data-registration-step="1"] > .registration-back { display: none !important; }
form[data-registration-step="2"] > :not([data-registration-profession]):not(.registration-progress):not(.registration-back):not([type="submit"]) { display: none !important; }
.registration-back { width: 100%; border: 0; background: transparent; color: #1a3a5c; cursor: pointer; font: inherit; }
form[data-registration-step="2"] { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
form[data-registration-step="2"] > .registration-progress,
form[data-registration-step="2"] > [data-registration-profession] { grid-column: 1 / -1; }
form[data-registration-step="2"] > .registration-progress { margin: 0 0 4px; color: #687381; font-size: 12px; font-weight: 400; }
form[data-registration-step="2"] > [data-registration-profession] { min-width: 0; margin-bottom: 0 !important; }
form[data-registration-step="2"] > [data-registration-profession] > label,
form[data-registration-step="2"] #modalRegisterProfessionalHint,
form[data-registration-step="2"] > [data-registration-profession] > .form-tip { display: none !important; }
form[data-registration-step="2"] > .registration-back { grid-column: 1; grid-row: 3; margin: 0; min-height: 44px; border: 1px solid #dfe4e9; border-radius: 999px; font-size: 13px; }
form[data-registration-step="2"] > button[type="submit"] { grid-column: 2; grid-row: 3; margin: 0; font-size: 14px !important; white-space: nowrap; }
.login-surface:has(form[data-registration-step="2"]) :is(#modalRegisterPanel > div:last-child, #registerPanel > .switch-view) { border: 0; margin-top: 12px !important; padding-top: 0; }
.login-surface[data-auth-view="register"]:has(form[data-registration-step="2"]) .login-desc,
#authLoginModal[data-auth-view="register"]:has(form[data-registration-step="2"]) #modalDesc { display: none; }
.login-wrap:has(.login-surface[data-auth-view="register"] form[data-registration-step="2"]) { width: min(100%, 880px); }
#authLoginModal[data-auth-view="register"] .auth-login-card:has(form[data-registration-step="2"]) { width: 880px; }
@media (max-width: 760px) {
  .registration-browser { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
  .registration-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--login-line); }
  .registration-categories button { min-height: 44px; padding: 8px 10px; background: #f6f8fa; font-size: 12px; }
  .registration-option { padding: 10px; font-size: 13px; }
  .registration-selection { gap: 10px; }
  #authLoginModal[data-auth-view="register"]:has(form[data-registration-step="2"]) { align-items: flex-start !important; overflow-y: auto; }
  #authLoginModal[data-auth-view="register"] .auth-login-card:has(form[data-registration-step="2"]) { max-height: none; overflow: visible; margin: auto; }
}
.login-surface input[aria-invalid="true"] { border-color: #b91c1c !important; }
.login-surface select[hidden] { display: none !important; }
@media (max-width: 480px) {
  body:has(> .login-wrap) { padding: 24px 12px; }
  .login-card, #authLoginModal .auth-login-card { padding: 28px 20px 22px; border-radius: 14px; }
  .login-surface .phone-auth-modes { gap: 24px; margin-bottom: 20px; }
  .login-surface .phone-auth-modes button { font-size: 18px; }
  .login-surface .phone-auth-row button { flex-basis: 104px; width: 104px; font-size: 12px; }
  .login-surface :is(#loginForm, #modalLoginForm) input { font-size: 16px !important; }
  .login-surface :is(input:not([type="checkbox"]), select) { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .login-surface input, .login-surface select, .login-surface button, .login-surface .phone-auth-number, .login-surface .phone-auth-row { transition: none !important; }
}
/* Login consent and provider row share the same layout in page and modal. */
.login-surface :is(#loginForm, #modalLoginForm) .login-agreement {
  position:static; display:flex; align-items:flex-start; gap:7px; width:auto; height:auto;
  overflow:visible; clip-path:none; white-space:normal; margin:15px 0 0;
  color:var(--login-muted); font-size:12px; font-weight:400; line-height:1.7; cursor:pointer;
}
.login-surface :is(#loginForm, #modalLoginForm) .login-agreement input {
  appearance:auto; width:16px; height:16px; min-height:16px; flex:0 0 16px;
  margin:2px 0 0; padding:0; accent-color:var(--login-accent);
}
.login-policy-name { color:var(--login-accent); margin:0 3px; }
.login-recovery { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .24s ease, opacity .18s ease; }
.login-recovery > div { min-height:0; overflow:hidden; }
[data-login-mode="password"] .login-recovery { grid-template-rows:1fr; opacity:1; }
.login-recovery-actions { display:flex; justify-content:space-between; padding-top:24px; }
.login-surface .login-recovery-actions button {
  border:0; background:transparent; padding:0; min-height:28px; font:inherit; font-size:12px;
  color:var(--login-muted); opacity:1; cursor:default;
}
.login-surface .login-providers { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:20px; }
.login-provider-divider { display:flex; align-items:center; gap:16px; width:100%; color:var(--login-muted); font-size:12px; line-height:1.6; white-space:nowrap; }
.login-provider-divider::before, .login-provider-divider::after { content:""; flex:1; height:1px; background:var(--login-line); }
.login-surface .login-provider { display:grid; place-items:center; width:48px; height:48px; margin:0; padding:0; border:0; border-radius:50%; background:#f3f6f4; text-decoration:none; cursor:pointer; }
.login-surface .login-provider:disabled { opacity:.45; cursor:default; }
.login-provider-icon { display:grid; place-items:center; width:28px; height:28px; }
.login-provider-icon img { display:block; width:28px; height:28px; }
.login-surface a.login-provider:hover { background:#e5f4eb; }
.login-surface a.login-provider:focus-visible { outline:2px solid var(--login-accent); outline-offset:4px; }
.login-surface :is(#registerSwitch,#modalRegisterLink) { border-top:0 !important; margin-top:14px !important; padding-top:0 !important; font-size:12px !important; }

@media (prefers-reduced-motion:reduce) { .login-recovery { transition:none; } }

/* First-time WeChat authorization is a phone-binding step, not another login chooser. */
.login-surface[data-wechat-binding] [hidden] { display: none !important; }
.wechat-binding-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.wechat-binding-actions :is(button, a) { padding: 6px 0; color: var(--login-accent); font: inherit; font-size: 12px; line-height: 1.6; text-align: center; text-decoration: none; }
.wechat-binding-actions a { color: var(--login-muted); }
.wechat-binding-actions a:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }