/* 专属登录界面，样式全部限定于登录视图。 */
#loginView {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: center;
  gap: clamp(60px, 9vw, 170px);
  min-height: 100vh;
  min-height: 100svh;
  padding: 64px max(7vw, calc((100vw - 1260px) / 2));
  overflow: hidden;
  background: #051d32;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#loginView::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url('./login-background-refined.webp') center / cover no-repeat;
  opacity: .62;
}
#loginView::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 24, 45, .16), rgba(3, 21, 39, .42) 52%, rgba(2, 16, 30, .72));
}
#loginView .login-heading { padding-bottom: 12px; }
#loginView .login-kicker { color: #a0c5e1; font-size: 12px; font-weight: 500; letter-spacing: .3em; margin: 0 0 24px; }
#loginView h1 { color: #fff; font-size: clamp(36px, 3.7vw, 58px); font-weight: 600; line-height: 1.35; letter-spacing: .03em; margin: 0; white-space: nowrap; }
#loginView .login-description { color: #b9cee0; font-size: 17px; line-height: 1.95; letter-spacing: .06em; margin: 24px 0 0; }
#loginView .login-capabilities { display: flex; align-items: center; gap: 0; margin-top: 46px; color: #c7d9e7; font-size: 13px; letter-spacing: .06em; }
#loginView .login-capabilities span { padding: 0 24px; border-right: 1px solid rgba(178, 208, 229, .3); }
#loginView .login-capabilities span:first-child { padding-left: 0; }
#loginView .login-capabilities span:last-child { border: 0; padding-right: 0; }
#loginView .login-panel { position: relative; padding: 40px 40px 28px; background: #fff; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; box-shadow: 0 28px 90px rgba(0, 7, 20, .35), 0 1px 0 rgba(255,255,255,.5) inset; }
#loginView .login-brand { display: flex; align-items: center; gap: 13px; }
#loginView .login-brand img { display: block; width: 43px; height: 49px; object-fit: contain; }
#loginView .login-brand strong { display: block; color: #15283a; font-size: 21px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
#loginView .login-brand span { display: block; color: #8a96a3; font-size: 9px; letter-spacing: .16em; line-height: 1.8; }
#loginView .login-welcome { border-top: 1px solid #edf0f3; margin-top: 28px; padding-top: 27px; margin-bottom: 25px; }
#loginView .login-welcome h2 { color: #172b40; font-size: 27px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; margin: 0; }
#loginView .login-welcome p { color: #83909e; font-size: 13px; line-height: 1.7; margin: 8px 0 0; }
#loginView .login-field { position: relative; margin: 0 0 20px; }
#loginView .login-label { display: block; color: #44566a; font-size: 13px; font-weight: 500; line-height: 20px; margin: 0 0 8px; }
#loginView .login-field > svg { position: absolute; left: 17px; top: 46px; width: 18px; height: 18px; color: #95a4b4; pointer-events: none; }
#loginView input { width: 100%; height: 56px; min-height: 56px; padding: 14px 16px 14px 46px; border: 1px solid #e1e7ee; border-radius: 9px; color: #21374e; background: #f7f9fc; font-size: 15px; box-shadow: none; transition: background .16s, border-color .16s, box-shadow .16s; }
#loginView input::placeholder { color: #9ba8b6; }
#loginView input:hover { border-color: #bdcddd; }
#loginView input:focus { background: #fff; border-color: #388add; box-shadow: 0 0 0 3px rgba(39, 128, 219, .1); }
#loginView .login-password input { padding-right: 48px; }
#loginView .login-password-toggle { position: absolute; right: 2px; top: 30px; width: 44px; height: 52px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: #8b9caf; }
#loginView .login-password-toggle svg { display: block; width: 18px; height: 18px; margin: auto; }
#loginView .login-password-toggle:hover { color: #287ad2; }
#loginView .login-password-toggle:focus-visible { outline: 2px solid #388add; outline-offset: -4px; }
#loginView #loginBtn { display: block; width: 100%; height: 54px; min-height: 54px; margin: 28px 0 0; padding: 0 16px; border: 1px solid #2375cd; border-radius: 9px; background: #2375cd; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .2em; box-shadow: 0 6px 16px rgba(35, 117, 205, .18); cursor: pointer; transition: background .16s, box-shadow .16s; }
#loginView #loginBtn:hover { background: #1766ba; border-color: #1766ba; box-shadow: 0 8px 20px rgba(35, 117, 205, .27); transform: none; }
#loginView #loginBtn:focus-visible { outline: 3px solid #8fc5fa; outline-offset: 4px; }
#loginView #loginBtn:disabled { opacity: .65; cursor: wait; }
#loginView .login-card-note { color: #a0aab5; text-align: center; font-size: 11px; letter-spacing: .05em; margin: 23px 0 0; }
@media (max-width: 1100px) {
  #loginView { grid-template-columns: minmax(0, 1fr) 390px; gap: 5vw; padding: 48px 5vw; }
  #loginView h1 { font-size: 38px; }
  #loginView .login-panel { padding: 34px 32px 26px; }
}
@media (max-width: 800px) {
  #loginView { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 30px; padding: 36px 24px; }
  #loginView::before { background-position: 30% center; opacity: .43; }
  #loginView .login-heading { text-align: center; padding: 0; }
  #loginView .login-kicker { font-size: 10px; margin-bottom: 10px; }
  #loginView h1 { font-size: clamp(26px, 6.8vw, 36px); }
  #loginView .login-description, #loginView .login-capabilities { display: none; }
  #loginView .login-panel { width: 100%; max-width: 440px; justify-self: center; padding: 30px 28px 24px; border-radius: 16px; }
  #loginView .login-welcome { margin-top: 22px; padding-top: 22px; margin-bottom: 22px; }
}
@media (max-width: 360px) {
  #loginView { padding: 28px 16px; gap: 24px; }
  #loginView .login-panel { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { #loginView input, #loginView button { transition: none; } }