/* ============================================================
   登录皮肤 C ·「星链 HUD」（前沿科技风）
   ------------------------------------------------------------
   深空黑 + 青色霓虹 + 透视网格 + 扫描线 + 切角面板 + 等宽字标。
   刻意做成"终端/控制台"的语感：等宽字体、编号、状态行、实时时钟 ——
   不是贴几张科幻图，而是把操作台的**信息感**做出来。
   ★ 独立性同 A/B：不读 tokens.css 变量，全部选择器锚在 #loginWrap.skC。
   ★ 动效只用 transform / opacity / background-position，不触发重排；
     系统开了「减少动态」时全部关掉（见文件末尾），低配机器也不卡。
   ============================================================ */

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

#loginWrap.skC{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 8%,#062a26 0%,transparent 62%),
    radial-gradient(700px 420px at 88% 92%,#0a1f3a 0%,transparent 60%),
    #03080a;
  color:#d6fff5;
  font-family:"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
}
#loginWrap.skC[hidden]{display:none}

/* ---------- 装饰层 ---------- */
#loginWrap.skC .skC-grid{
  position:absolute;inset:-14%;
  background-image:
    linear-gradient(rgba(70,255,209,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,255,209,.10) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(680px) rotateX(54deg) scale(1.15);
  transform-origin:50% 34%;
  mask-image:radial-gradient(62% 58% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 80%);
  -webkit-mask-image:radial-gradient(62% 58% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 80%);
  animation:skC-gridmove 16s linear infinite;
  pointer-events:none;
}
@keyframes skC-gridmove{
  from{background-position:0 0,0 0}
  to{background-position:0 54px,54px 0}
}
#loginWrap.skC .skC-scan{
  position:absolute;left:0;right:0;top:0;height:180px;
  background:linear-gradient(180deg,transparent,rgba(70,255,209,.075) 60%,transparent);
  border-bottom:1px solid rgba(70,255,209,.28);
  animation:skC-scan 9s linear infinite;
  pointer-events:none;
}
@keyframes skC-scan{
  from{transform:translateY(-190px)}
  to{transform:translateY(105vh)}
}
#loginWrap.skC .skC-vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.72) 100%);
}

/* ---------- 面板（切角 + 四角括号） ---------- */
#loginWrap.skC .skC-wrap{position:relative;width:min(452px,94vw)}
#loginWrap.skC .skC-panel{
  position:relative;padding:26px 30px 24px;
  background:linear-gradient(175deg,rgba(6,30,28,.94),rgba(3,12,14,.97));
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  box-shadow:
    inset 0 0 0 1px rgba(70,255,209,.22),
    0 0 60px -10px rgba(24,255,200,.16),
    0 40px 90px -50px #000;
  animation:skC-in .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes skC-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 四角括号：比整圈描边更像仪器面板 */
#loginWrap.skC .skC-cor{
  position:absolute;width:16px;height:16px;pointer-events:none;
  border:0 solid #46ffd1;opacity:.85;
}
#loginWrap.skC .skC-cor.tl{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
#loginWrap.skC .skC-cor.tr{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
#loginWrap.skC .skC-cor.bl{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
#loginWrap.skC .skC-cor.br{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}

#loginWrap.skC .skC-top{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid rgba(70,255,209,.14);
  font-size:calc(10px * var(--font-scale));letter-spacing:.18em;color:rgba(120,255,224,.62);
}
#loginWrap.skC .skC-live{display:flex;align-items:center;gap:7px}
#loginWrap.skC .skC-live i{
  width:6px;height:6px;border-radius:50%;background:#46ffd1;
  box-shadow:0 0 10px #46ffd1;animation:skC-blink 1.6s ease-in-out infinite;
}
@keyframes skC-blink{0%,100%{opacity:1}50%{opacity:.18}}
#loginWrap.skC .skC-clock{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:rgba(160,255,232,.85)}

#loginWrap.skC .skC-id{
  font-size:calc(10px * var(--font-scale));letter-spacing:.16em;color:rgba(96,220,196,.5);margin-bottom:12px;
  text-transform:uppercase;
}
#loginWrap.skC .skC-title{
  position:relative;margin:0 0 10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:calc(25px * var(--font-scale));font-weight:600;line-height:1.3;letter-spacing:.02em;
  color:#ecfffa;
  text-shadow:0 0 22px rgba(70,255,209,.45),0 0 60px rgba(70,255,209,.18);
  word-break:break-word;
}
#loginWrap.skC .skC-sub{
  margin:0 0 24px;font-size:calc(11.5px * var(--font-scale));letter-spacing:.06em;color:rgba(150,235,216,.55);
}

/* ---------- 表单 ---------- */
#loginWrap.skC .skC-fld{display:block;margin-bottom:18px}
#loginWrap.skC .skC-fld > span{
  display:flex;align-items:center;gap:8px;
  font-size:calc(10px * var(--font-scale));letter-spacing:.16em;text-transform:uppercase;
  color:rgba(140,245,220,.6);margin-bottom:7px;
}
#loginWrap.skC .skC-fld > span b{
  font-weight:400;color:#46ffd1;opacity:.75;
}
#loginWrap.skC .skC-fld input{
  width:100%;height:42px;padding:0 12px;
  font:inherit;font-size:calc(14px * var(--font-scale));letter-spacing:.04em;color:#eafffa;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(70,255,209,.22);
  border-radius:3px;caret-color:#46ffd1;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#loginWrap.skC .skC-fld input::placeholder{color:rgba(120,220,200,.28);letter-spacing:.06em}
#loginWrap.skC .skC-fld input:focus{
  outline:none;background:rgba(4,26,24,.72);border-color:#46ffd1;
  box-shadow:0 0 0 1px rgba(70,255,209,.35),0 0 22px -6px rgba(70,255,209,.7),inset 0 0 18px -10px rgba(70,255,209,.9);
}

#loginWrap.skC .skC-btn{
  position:relative;overflow:hidden;
  width:100%;height:44px;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font:inherit;font-size:calc(13px * var(--font-scale));font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#02120f;cursor:pointer;border:0;border-radius:3px;
  background:linear-gradient(100deg,#46ffd1,#19d7ff);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:filter .16s,box-shadow .16s;
  box-shadow:0 0 26px -8px rgba(70,255,209,.8);
}
#loginWrap.skC .skC-btn em{font-style:normal;transition:transform .16s}
#loginWrap.skC .skC-btn:hover{filter:brightness(1.08)}
#loginWrap.skC .skC-btn:hover em{transform:translateX(3px)}
#loginWrap.skC .skC-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
/* 扫光：鼠标经过时一道亮带横扫，成本只有 transform */
#loginWrap.skC .skC-btn::after{
  content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);opacity:0;
}
#loginWrap.skC .skC-btn:hover::after{animation:skC-sweep .75s ease-out}
@keyframes skC-sweep{
  0%{left:-40%;opacity:.9}
  100%{left:110%;opacity:0}
}

#loginWrap.skC .skC-err{
  margin-bottom:16px;padding:8px 11px;border-radius:3px;
  background:rgba(255,64,64,.1);border:1px solid rgba(255,90,90,.42);
  color:#ffb0aa;font-size:calc(11.5px * var(--font-scale));line-height:1.55;letter-spacing:.02em;
}
#loginWrap.skC .skC-err[hidden]{display:none}

/* ---------- 状态行 ---------- */
#loginWrap.skC .skC-status{
  display:flex;align-items:center;gap:8px;margin-top:18px;
  font-size:calc(10.5px * var(--font-scale));letter-spacing:.1em;color:rgba(120,235,212,.55);
}
#loginWrap.skC .skC-status i{
  width:14px;height:1px;background:#46ffd1;box-shadow:0 0 8px #46ffd1;
  animation:skC-pulse 2.2s ease-in-out infinite;
}
@keyframes skC-pulse{0%,100%{width:14px;opacity:.6}50%{width:26px;opacity:1}}

#loginWrap.skC .skC-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(70,255,209,.1);
  font-size:calc(10px * var(--font-scale));letter-spacing:.08em;color:rgba(110,200,182,.42);
}
#loginWrap.skC .skC-foot a{color:rgba(140,240,216,.6);text-decoration:none;border-bottom:1px dotted rgba(140,240,216,.3)}
#loginWrap.skC .skC-foot a:hover{color:#46ffd1}
#loginWrap.skC .skC-hint{white-space:nowrap;opacity:.7}

@media (max-width:520px){
  #loginWrap.skC{padding:14px}
  #loginWrap.skC .skC-panel{padding:20px 18px 18px}
  #loginWrap.skC .skC-title{font-size:calc(20px * var(--font-scale))}
  #loginWrap.skC .skC-hint{display:none}
}

/* 系统级别关掉动效时，这里也停 —— 不是只有"好看"，还影响低配机可读性 */
@media (prefers-reduced-motion:reduce){
  #loginWrap.skC .skC-grid,
  #loginWrap.skC .skC-scan,
  #loginWrap.skC .skC-live i,
  #loginWrap.skC .skC-status i,
  #loginWrap.skC .skC-btn:hover::after{animation:none!important}
}