/* ==========================================================================
   登录页 —— 纸本档案气质：印章、细双线卡片、单一主操作
   只允许引用 app.css :root 中的令牌
   ========================================================================== */

.login-wrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(28px,7vh,80px) 16px 64px;
}

.login-pane{
  position:relative;
  width:100%;
  max-width:452px;
  padding:38px 42px 30px;
  border:1px solid var(--c-line);
  border-top:3px solid var(--c-red);
  border-radius:var(--radius);
  background:var(--c-card);
  text-align:center;
}
/* 卡片内的第二道细框：档案卡片的“双线”意象 */
.login-pane::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid var(--c-line);
  border-radius:1px;
  pointer-events:none;
}

.login-seal{margin:0 auto 14px;width:56px;height:56px;font-size:19px}

.login-kicker{
  margin:0 0 6px;
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.2em;
  color:var(--c-ink-3);
}

.login-pane h1{
  margin:0 0 12px;
  font-family:var(--font-serif);
  font-size:22px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.06em;
  color:var(--c-ink);
}

.login-lede{
  margin:0 0 20px;
  font-size:12.5px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--c-ink-2);
  text-align:left;
}

/* 错误条：明显但不刺眼——软底 + 左侧实线 + 圆角方章 */
.login-err{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 16px;
  padding:10px 12px;
  border:1px solid var(--c-err-a25);
  border-left:3px solid var(--c-err);
  border-radius:var(--radius);
  background:var(--c-err-soft);
  color:var(--c-err);
  font-size:13px;
  line-height:1.65;
  text-align:left;
}
.login-err::before{
  content:"!";
  flex:none;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:50%;
  background:var(--c-err);
  color:var(--c-on-red);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.login-field{display:block;text-align:left;margin:0 0 16px}
.login-field span{
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--c-ink-2);
}
.login-field input{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--c-line-strong);
  border-radius:var(--radius);
  background:var(--c-input);
  color:var(--c-ink);
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.06em;
}
.login-field input:hover{border-color:var(--c-ink-3)}
.login-field input:focus{
  outline:none;
  border-color:var(--c-red);
  box-shadow:0 0 0 2px var(--c-red-a10);
}
.login-field input::placeholder{
  font-family:var(--font-sans);
  letter-spacing:.02em;
  color:var(--c-ink-3);
}

.login-pane .btn.ok{
  width:100%;
  min-height:44px;
  padding:11px 14px;
  font-size:14.5px;
  letter-spacing:.08em;
}

.login-foot{
  margin:20px 0 0;
  padding-top:14px;
  border-top:1px solid var(--c-line);
  text-align:left;
  font-size:11.5px;
  line-height:1.75;
  letter-spacing:.02em;
  color:var(--c-ink-2);
}
.login-foot p{margin:0}
.login-foot p + p{margin-top:3px}

@media(max-width:520px){
  .login-wrap{padding:22px 12px 40px}
  .login-pane{padding:28px 22px 24px}
  .login-pane::before{inset:7px}
  .login-pane h1{font-size:20px}
  .login-seal{width:48px;height:48px;font-size:16px}
}