/* 登录页：共用主样式 token，只排这一张卡。 */

.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg);
}

.login-card {
  width: min(392px, 100%);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  animation: login-in var(--t-3) var(--ease) both;
}

@keyframes login-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.login-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
}

.login-logo svg { width: 36px; height: 36px; display: block; }

.login-title { min-width: 0; }

.login-brand h1 {
  font-size: var(--fs-6);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.login-brand p {
  margin: 2px 0 0;
  font-size: var(--fs-2);
  color: var(--ink-3);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login-form .field { gap: var(--sp-2); }

.login-form .field-input {
  height: 44px;
  border-radius: var(--r-3);
  font-size: var(--fs-5);
}

.login-form .field-input::placeholder { color: var(--ink-4); }

.login-submit {
  width: 100%;
  height: 46px;
  margin-top: var(--sp-1);
  border: 0;
  border-radius: var(--r-3);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-5);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: background var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}

.login-submit:hover { background: var(--accent-2); }
.login-submit:active { transform: translateY(0.5px); }
.login-submit:disabled { opacity: 0.6; cursor: progress; }

.login-error {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  background: var(--danger-soft);
  border-radius: var(--r-3);
  font-size: var(--fs-2);
  color: var(--danger);
  text-align: center;
}

.login-foot {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
  text-align: center;
}

@media (max-width: 430px) {
  .login-card { padding: var(--sp-6) var(--sp-4) var(--sp-5); border-radius: var(--r-3); }
  .login-brand h1 { font-size: var(--fs-7); }
}