/* ============================================================
   登录皮肤 F ·「蓝图工程」（浅色）
   ------------------------------------------------------------
   浅蓝底 + 细网格 + 一张"图纸"白卡：左上角图号、右下角比例尺、
   角标对位线。做工程的看图纸看了半辈子，这套语感不用解释。
   ★ 独立性同 A~E：不读 tokens.css 变量，选择器全部锚在 #loginWrap.skF。
   ============================================================ */

#loginWrap.skF,
#loginWrap.skF *,
#loginWrap.skF *::before,
#loginWrap.skF *::after{box-sizing:border-box}

#loginWrap.skF{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;
  background:#eaf2f9;
  font-family:"SF Mono","Cascadia Mono",Consolas,ui-monospace,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#1f3040;
  -webkit-font-smoothing:antialiased;
}
#loginWrap.skF[hidden]{display:none}

/* 图纸网格：10px 细线 + 50px 粗线，标准方格纸比例 */
#loginWrap.skF .skF-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,140,190,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,140,190,.16) 1px,transparent 1px),
    linear-gradient(rgba(90,140,190,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,140,190,.09) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  mask-image:radial-gradient(90% 80% at 50% 45%,#000 40%,rgba(0,0,0,.35) 78%,transparent 100%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 45%,#000 40%,rgba(0,0,0,.35) 78%,transparent 100%);
}

#loginWrap.skF .skF-sheet{
  position:relative;width:min(460px,94vw);
  padding:22px 28px 18px;
  background:#fff;
  border:1px solid #c4d7e8;
  box-shadow:0 2px 0 #eef4f9 inset,0 26px 60px -34px rgba(31,66,102,.4);
}
/* 四角对位线：图纸装订孔位那种短角标 */
#loginWrap.skF .skF-sheet::before,
#loginWrap.skF .skF-sheet::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid #8fb3d2;
}
#loginWrap.skF .skF-sheet::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
#loginWrap.skF .skF-sheet::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

#loginWrap.skF .skF-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:20px;
  border-bottom:1px solid #dbe7f2;
  font-size:calc(9.5px * var(--font-scale));letter-spacing:.16em;color:#7d97ad;text-transform:uppercase;
}
#loginWrap.skF .skF-head b{color:#2b6cb0;font-weight:600}
#loginWrap.skF h1{
  margin:0 0 6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:calc(23px * var(--font-scale));font-weight:650;letter-spacing:-.01em;color:#16283a;
  word-break:break-word;
}
#loginWrap.skF .skF-sub{margin:0 0 22px;font-size:calc(12px * var(--font-scale));color:#7b8fa1;letter-spacing:.02em}

#loginWrap.skF .skF-fld{display:block;margin-bottom:14px}
#loginWrap.skF .skF-fld > span{
  display:flex;align-items:center;gap:7px;
  font-size:calc(9.5px * var(--font-scale));letter-spacing:.16em;color:#6d879d;text-transform:uppercase;margin-bottom:6px;
}
#loginWrap.skF .skF-fld > span b{color:#2b6cb0;font-weight:600}
#loginWrap.skF .skF-fld input{
  width:100%;height:40px;padding:0 11px;
  font:inherit;font-size:calc(14px * var(--font-scale));letter-spacing:.03em;color:#16283a;
  background:#fbfdff;border:1px solid #cfdeeb;border-radius:2px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#loginWrap.skF .skF-fld input::placeholder{color:#a8bccd;letter-spacing:.05em}
#loginWrap.skF .skF-fld input:focus{
  outline:none;background:#fff;border-color:#2b6cb0;
  box-shadow:0 0 0 3px rgba(43,108,176,.13);
}
#loginWrap.skF .skF-btn{
  width:100%;height:42px;margin-top:8px;
  font:inherit;font-size:calc(12.5px * var(--font-scale));font-weight:600;letter-spacing:.2em;color:#fff;
  background:#2b6cb0;border:0;border-radius:2px;cursor:pointer;
  transition:background .16s,transform .12s;
}
#loginWrap.skF .skF-btn:hover{background:#245c98}
#loginWrap.skF .skF-btn:active{transform:translateY(1px)}
#loginWrap.skF .skF-btn:disabled{opacity:.55;cursor:default}

#loginWrap.skF .skF-err{
  margin-bottom:14px;padding:8px 11px;border-radius:2px;
  background:#fdeeec;border:1px solid #f0c9c3;color:#9d3327;
  font-size:calc(12px * var(--font-scale));line-height:1.6;letter-spacing:.02em;
}
#loginWrap.skF .skF-err[hidden]{display:none}

#loginWrap.skF .skF-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:14px;padding-top:10px;border-top:1px dashed #dbe7f2;
  font-size:calc(9.5px * var(--font-scale));letter-spacing:.1em;color:#93a9bb;
}
#loginWrap.skF .skF-foot{
  margin-top:10px;font-size:calc(10px * var(--font-scale));color:#9db0c1;letter-spacing:.06em;
}
#loginWrap.skF .skF-foot a{color:#7d97ad;text-decoration:none;border-bottom:1px solid #cfdeeb}
#loginWrap.skF .skF-foot a:hover{color:#2b6cb0;border-color:#2b6cb0}

@media (max-width:520px){
  #loginWrap.skF{padding:14px}
  #loginWrap.skF .skF-sheet{padding:18px 18px 14px}
  #loginWrap.skF h1{font-size:calc(20px * var(--font-scale))}
  #loginWrap.skF .skF-head span:last-child{display:none}
}