/* ============================================================
   登录皮肤 B ·「墨玉玻璃」
   ------------------------------------------------------------
   深墨底 + 三团柔光 + 半透明玻璃卡。没有插图、没有网格线，
   靠层次和留白撑气质 —— 适合以"稳重、专业"为主的场合。
   ★ 独立性同 A：本文件不读 tokens.css 任何变量，选择器全部锚在 #loginWrap.skB。
   ============================================================ */

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

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

/* ---------- 背景：三团柔光 + 细噪点 ---------- */
#loginWrap.skB .skB-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#loginWrap.skB .skB-orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55}
#loginWrap.skB .skB-orb.o1{
  width:620px;height:620px;left:-180px;top:-220px;
  background:radial-gradient(circle,#1d8f6f 0%,rgba(29,143,111,0) 70%);
  animation:skB-float1 18s ease-in-out infinite;
}
#loginWrap.skB .skB-orb.o2{
  width:560px;height:560px;right:-160px;bottom:-200px;
  background:radial-gradient(circle,#2f4f9e 0%,rgba(47,79,158,0) 70%);
  animation:skB-float2 22s ease-in-out infinite;
}
#loginWrap.skB .skB-orb.o3{
  width:420px;height:420px;left:46%;top:52%;
  background:radial-gradient(circle,#8a6b3c 0%,rgba(138,107,60,0) 72%);
  opacity:.32;animation:skB-float1 26s ease-in-out infinite reverse;
}
@keyframes skB-float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(38px,26px,0)}}
@keyframes skB-float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-34px,-22px,0)}}
#loginWrap.skB .skB-bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px;opacity:.5;
  mix-blend-mode:overlay;
}

/* ---------- 玻璃卡 ---------- */
#loginWrap.skB .skB-card{
  position:relative;width:min(408px,92vw);
  padding:40px 38px 30px;border-radius:24px;
  background:linear-gradient(168deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);
  animation:skB-in .6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes skB-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
/* 顶部一条高光边 */
#loginWrap.skB .skB-card::before{
  content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(140,255,214,.7),transparent);
}

#loginWrap.skB .skB-head{display:flex;align-items:center;gap:10px;margin-bottom:22px}
#loginWrap.skB .skB-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(126,240,204,.24),rgba(126,240,204,.06));
  border:1px solid rgba(126,240,204,.36);color:#9ff5d8;
  font-size:calc(15px * var(--font-scale));font-weight:700;
}
#loginWrap.skB .skB-name{
  font-size:calc(12.5px * var(--font-scale));letter-spacing:.14em;text-transform:uppercase;color:rgba(226,246,240,.62);
}
#loginWrap.skB h2{
  margin:0 0 8px;font-size:calc(25px * var(--font-scale));font-weight:600;letter-spacing:.01em;color:#f2fffb;
  text-shadow:0 1px 20px rgba(126,240,204,.18);
  word-break:break-word;
}
#loginWrap.skB .skB-sub{
  margin:0 0 28px;font-size:calc(12.5px * var(--font-scale));letter-spacing:.04em;color:rgba(214,238,231,.5);
}

/* ---------- 下划线式输入 ---------- */
#loginWrap.skB .skB-fld{display:block;margin-bottom:22px}
#loginWrap.skB .skB-fld > span{
  display:block;font-size:calc(11px * var(--font-scale));letter-spacing:.12em;text-transform:uppercase;
  color:rgba(206,236,228,.52);margin-bottom:8px;
}
#loginWrap.skB .skB-fld input{
  width:100%;height:38px;padding:0 2px;
  font:inherit;font-size:calc(15px * var(--font-scale));color:#f0fff9;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);
  transition:border-color .2s,box-shadow .2s;
}
#loginWrap.skB .skB-fld input::placeholder{color:rgba(255,255,255,.22)}
#loginWrap.skB .skB-fld input:focus{
  outline:none;border-bottom-color:#7ef0cc;
  box-shadow:0 12px 18px -18px rgba(126,240,204,.9);
}
#loginWrap.skB .skB-btn{
  width:100%;height:46px;margin-top:10px;
  font:inherit;font-size:calc(14.5px * var(--font-scale));font-weight:650;letter-spacing:.08em;
  color:#04140f;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(120deg,#8bf3d1,#3fc6a4 58%,#2fae94);
  box-shadow:0 16px 34px -18px rgba(63,198,164,.95);
  transition:filter .16s,transform .12s;
}
#loginWrap.skB .skB-btn:hover{filter:brightness(1.06)}
#loginWrap.skB .skB-btn:active{transform:translateY(1px)}
#loginWrap.skB .skB-btn:disabled{opacity:.55;cursor:default;filter:none}

#loginWrap.skB .skB-err{
  margin-bottom:18px;padding:9px 12px;border-radius:10px;
  background:rgba(255,86,86,.12);border:1px solid rgba(255,120,120,.32);
  color:#ffb4ae;font-size:calc(12.5px * var(--font-scale));line-height:1.5;
}
#loginWrap.skB .skB-err[hidden]{display:none}

#loginWrap.skB .skB-tip{
  margin:20px 0 0;font-size:calc(11px * var(--font-scale));line-height:1.7;color:rgba(206,232,225,.38);text-align:center;
}
#loginWrap.skB .skB-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:calc(11px * var(--font-scale));color:rgba(206,232,225,.34);
}
#loginWrap.skB .skB-foot a{color:rgba(206,232,225,.5);text-decoration:none}
#loginWrap.skB .skB-foot a:hover{color:#8bf3d1}

@media (max-width:520px){
  #loginWrap.skB{padding:16px}
  #loginWrap.skB .skB-card{padding:30px 24px 24px}
  #loginWrap.skB h2{font-size:calc(21px * var(--font-scale))}
}