/* Login (templates/login.html): no design of its own. Same layout and tokens as the home page (prd/1.jpg, css/home.css):
   the blue wordmark 68px from the top, a 43.2px pill where the search pill is, a pill button below it. */

.login-page .page { min-height: 100vh; min-height: 100dvh; }
.login { padding: 68px 19.3px 0; }

/* Wordmark as on the home page. */
.login .brand {
  margin: 0; height: 40px; text-align: center; font-size: 40px; line-height: 40px; font-weight: 560;
  letter-spacing: 0.01em; font-stretch: 106%; color: #16a2fa;
  background: linear-gradient(180deg, #08abf4 0%, #1a9cfb 55%, #2a92ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2.5px rgba(10, 132, 255, 0.55)) drop-shadow(0 0 7px rgba(10, 110, 230, 0.3));
}
.login-sub { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: #8e8e93; }

.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }

/* Login name and password pills: the home search pill, with a person / a lock where the search icon is drawn. */
.login .pill {
  display: flex; align-items: center; gap: 9px; height: 43.2px; padding: 0 21.7px 0 17px; border-radius: 21.6px;
  border: 1px solid #3d3d3d; background: #0e0e0e; cursor: text;
}
.login .pill:focus-within { border-color: #5a5a5e; }
.login .pill.bad { border-color: rgba(255, 69, 58, 0.7); }
.login .pill svg { flex: none; width: 18px; height: 18px; color: #646466; }
.login .pill input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font-size: 14.4px; color: #fff;
}
.login .pill input::placeholder { color: #646466; opacity: 1; }

.login .error { margin-top: -3px; padding-left: 21.7px; font-size: 13px; line-height: 18px; color: var(--red); }
.login .notice { padding: 10px 17px; border-radius: 12px; background: #1c1c1e; font-size: 13px; line-height: 18px;
  color: var(--green); }
.login .btn-primary { flex: none; height: 43.2px; margin-top: 4px; border-radius: 21.6px; font-size: 15px; }

/* 记住我 under the pills, a 44px tap row (忘记密码 goes to its right with MU4). */
.login-row { display: flex; align-items: center; justify-content: space-between; min-height: 32px;
  padding: 0 4px 0 17px; }
.login .remember { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0;
  font-size: 13px; color: var(--text-2); cursor: pointer; }
.login .remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.login .btn-primary:active { background: #0a74e0; }

/* 撤销注销 (templates/login_cancel.html): the notice in orange, a quiet way back. */
.login .notice.warn { color: var(--orange); }
.login .login-link { display: block; padding: 12px 0; text-align: center; font-size: 13px; color: var(--text-2); }