/* ============================================================
   登录皮肤 E ·「晨雾晶白」（浅色）
   ------------------------------------------------------------
   近白冷底 + 三团薄雾色块 + 大圆角白卡。轻、干净、没有一根硬线，
   靠阴影与圆角分层 —— 移动端比例也好看，投屏演示不刺眼。
   ★ 独立性同 A/B/C：不读 tokens.css 变量，选择器全部锚在 #loginWrap.skE。
   ============================================================ */

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

#loginWrap.skE{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;
  background:#f5f9fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#1b2a2c;
  -webkit-font-smoothing:antialiased;
}
#loginWrap.skE[hidden]{display:none}

#loginWrap.skE .skE-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#loginWrap.skE .skE-blob{position:absolute;border-radius:50%;filter:blur(64px)}
#loginWrap.skE .skE-blob.b1{
  width:520px;height:520px;left:-140px;top:-160px;
  background:radial-gradient(circle,#c9efe1 0%,rgba(201,239,225,0) 70%);opacity:.85;
}
#loginWrap.skE .skE-blob.b2{
  width:480px;height:480px;right:-120px;bottom:-150px;
  background:radial-gradient(circle,#dbe6fb 0%,rgba(219,230,251,0) 70%);opacity:.9;
}
#loginWrap.skE .skE-blob.b3{
  width:360px;height:360px;left:52%;top:58%;
  background:radial-gradient(circle,#fde8d8 0%,rgba(253,232,216,0) 72%);opacity:.7;
}

#loginWrap.skE .skE-card{
  position:relative;width:min(404px,92vw);
  padding:36px 34px 26px;border-radius:22px;
  background:#fff;
  border:1px solid #eaf1f2;
  box-shadow:0 1px 2px rgba(22,54,58,.04),0 28px 64px -30px rgba(22,54,58,.28);
  animation:skE-in .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes skE-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

#loginWrap.skE .skE-mark{
  width:44px;height:44px;border-radius:14px;margin-bottom:18px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#3fcf9f,#33a9c8);
  color:#fff;font-size:calc(19px * var(--font-scale));font-weight:700;
  box-shadow:0 10px 22px -10px rgba(51,169,200,.75);
}
#loginWrap.skE h2{
  margin:0 0 6px;font-size:calc(23px * var(--font-scale));font-weight:650;letter-spacing:-.01em;color:#16262a;
  word-break:break-word;
}
#loginWrap.skE .skE-sub{margin:0 0 24px;font-size:calc(12.5px * var(--font-scale));color:#78898e;letter-spacing:.02em}

#loginWrap.skE .skE-fld{display:block;margin-bottom:14px}
#loginWrap.skE .skE-fld > span{
  display:block;font-size:calc(11.5px * var(--font-scale));font-weight:600;color:#5c6f75;margin-bottom:6px;letter-spacing:.04em;
}
#loginWrap.skE .skE-fld input{
  width:100%;height:44px;padding:0 14px;
  font:inherit;font-size:calc(14.5px * var(--font-scale));color:#16262a;
  background:#f6faf9;border:1px solid #e3edec;border-radius:12px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#loginWrap.skE .skE-fld input::placeholder{color:#a6b6ba}
#loginWrap.skE .skE-fld input:focus{
  outline:none;background:#fff;border-color:#3fcf9f;
  box-shadow:0 0 0 4px rgba(63,207,159,.14);
}
#loginWrap.skE .skE-btn{
  width:100%;height:46px;margin-top:8px;
  font:inherit;font-size:calc(14.5px * var(--font-scale));font-weight:650;letter-spacing:.06em;color:#fff;
  border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(100deg,#3fcf9f,#31a9c6);
  box-shadow:0 14px 26px -14px rgba(49,169,198,.85);
  transition:filter .16s,transform .12s;
}
#loginWrap.skE .skE-btn:hover{filter:brightness(1.05)}
#loginWrap.skE .skE-btn:active{transform:translateY(1px)}
#loginWrap.skE .skE-btn:disabled{opacity:.55;cursor:default;filter:none;box-shadow:none}

#loginWrap.skE .skE-err{
  margin-bottom:14px;padding:9px 12px;border-radius:10px;
  background:#fdeeec;border:1px solid #f6d3ce;color:#a5382c;
  font-size:calc(12.5px * var(--font-scale));line-height:1.55;
}
#loginWrap.skE .skE-err[hidden]{display:none}

#loginWrap.skE .skE-row{
  display:flex;align-items:center;gap:6px;margin-top:16px;
  font-size:calc(11px * var(--font-scale));color:#8d9da2;
}
#loginWrap.skE .skE-row i{
  width:5px;height:5px;border-radius:50%;background:#3fcf9f;flex:0 0 auto;
}
#loginWrap.skE .skE-foot{
  margin-top:18px;padding-top:14px;border-top:1px solid #eef3f3;
  text-align:center;font-size:calc(11px * var(--font-scale));color:#9aa9ad;
}
#loginWrap.skE .skE-foot a{color:#7d8f94;text-decoration:none}
#loginWrap.skE .skE-foot a:hover{color:#31a9c6;text-decoration:underline}

@media (max-width:480px){
  #loginWrap.skE{padding:14px}
  #loginWrap.skE .skE-card{padding:28px 22px 22px}
  #loginWrap.skE h2{font-size:calc(20px * var(--font-scale))}
}
