/* 登录层 · 测算页(index.html)与核验对照页(duizhao.html)共用
   两页只差一张背景图：各自在自己的 <style> 里给 --login-bg 赋值
   （测算页 bj.png，对照页 bj2.png），没赋值就退回蓝色渐变。
   配色、圆角沿用页面里的 --brand / --line / --muted 等变量。

   本文件由 index.html 原样抽出，样式未改。 */
.login{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background-color:var(--brand-dark);   /* 背景图还没下完时先垫个底色 */
  background-image:var(--login-bg,linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand2) 100%));
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.login-wrap{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:330px;
  transform:translateX( 220px);
}
/* 窄屏上再平移会顶出可视区，恢复居中 */
@media (max-width:860px){ .login-wrap{transform:none} }
.logo{
  position:relative;width:100%;max-width:330px;
  aspect-ratio:716 / 402;      /* 与 GIF 原始比例一致，动静切换时高度不变 */
  margin:0 0 18px;
}
.logo img{
  position:absolute;display:block;
  filter:drop-shadow(0 6px 16px rgba(10,30,80,.28));
}
.logo .anim{left:0;top:0;width:100%;height:100%}
/* 静帧图四周留白比 GIF 多，按两张图里字块的实测位置对齐，切换时不位移 */
.logo .still{left:-.5%;top:2.7%;width:101.1%;height:auto;opacity:0}
.logo.done .anim{opacity:0;transition:opacity .35s ease}
.logo.done .still{opacity:1;transition:opacity .35s ease}
.login-box{
  width:100%;background:#fff;border-radius:14px;
  padding:24px 22px 18px;box-shadow:0 18px 50px rgba(10,30,80,.28);text-align:center;
}
.login-box p{margin:0 0 14px;font-size:13px;color:var(--muted)}
.login-box input{
  width:100%;height:42px;padding:0 12px;text-align:center;
  border:1px solid var(--line);border-radius:9px;outline:none;
  font-size:17px;font-weight:700;letter-spacing:3px;color:var(--brand);
  font-family:inherit;background:#fff;
}
.login-box input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.16)}
.login-box input.bad{border-color:#dc2626;animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}
.login-box button{
  width:100%;height:40px;margin-top:12px;font-size:14px;font-weight:700;border-radius:9px;
}
/* 署名与报错叠在卡片底部同一格里，谁有内容谁占位置：
   测算页有署名，这块一直是 27px 高，报错时署名让位、卡片高度不跳；
   对照页没放署名，平时就不占地方，出了报错才顶出这一行。 */
.foot-slot{display:grid}
.foot-slot > *{grid-area:1/1;margin:0;line-height:18px}
.foot-slot > :not(:empty){margin-top:9px}
.login-box .msg{font-size:12.5px;color:#dc2626;font-weight:700}
.login-foot{font-size:12px;color:var(--muted)}
.msg:not(:empty) ~ .login-foot{visibility:hidden}
body.locked{overflow:hidden}
body.locked header.top,body.locked main{visibility:hidden}
/* 已登录过的刷新：登录层直接不渲染，正文立刻可见 */
html.unlocked .login{display:none}
html.unlocked body.locked{overflow:auto}
html.unlocked body.locked header.top,
html.unlocked body.locked main{visibility:visible}