/* ============================================================
   登录皮肤 A ·「云白分栏」
   ------------------------------------------------------------
   ★ 独立性（用户 2026-10-31 第 19 轮第 3 项：不受前端 css 管控）：
     本文件自带 reset、自带配色、自带字体栈，**不引用 tokens.css 的任何变量**。
     所有选择器都以 #loginWrap.skA 开头 —— 换肤（青松/墨松/鎏金…）、
     调字号档、折叠侧栏，对这张页面零影响。
   ★ 版式：左品牌栏 + 右表单栏。左侧放"这套系统能干什么"，
     不是装饰图 —— 资料员打开页面第一眼就知道这里能办哪些事。
   ============================================================ */

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

#loginWrap.skA{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  background:
    radial-gradient(1200px 600px at 12% 0%,#eef6f2 0%,transparent 60%),
    radial-gradient(900px 500px at 100% 100%,#e7eef7 0%,transparent 55%),
    #f3f5f6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#152420;
  -webkit-font-smoothing:antialiased;
}
#loginWrap.skA[hidden]{display:none}

/* ---------- 卡片 ---------- */
#loginWrap.skA .skA-card{
  width:min(1032px,96vw);
  min-height:568px;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,40,34,.06),0 28px 70px -24px rgba(16,40,34,.35);
  animation:skA-in .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes skA-in{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}

/* ---------- 左：品牌栏 ---------- */
#loginWrap.skA .skA-art{
  position:relative;overflow:hidden;
  padding:44px 44px 38px;
  display:flex;flex-direction:column;
  background:linear-gradient(152deg,#08281f 0%,#0d3d31 46%,#135f4d 100%);
  color:#e8f6f0;
}
/* 网格底纹：不是图片，纯 CSS —— 少一个请求，放大不虚 */
#loginWrap.skA .skA-art::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 30%,transparent 78%);
  pointer-events:none;
}
/* 右上角光晕 */
#loginWrap.skA .skA-glow{
  position:absolute;width:420px;height:420px;right:-140px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(90,220,180,.42) 0%,rgba(90,220,180,0) 66%);
  pointer-events:none;
}
#loginWrap.skA .skA-brand{
  position:relative;display:flex;align-items:center;gap:11px;margin-bottom:auto;
}
#loginWrap.skA .skA-mark{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  font-size:calc(17px * var(--font-scale));font-weight:700;letter-spacing:.02em;color:#d8fff1;
}
#loginWrap.skA .skA-brandname{
  font-size:calc(14.5px * var(--font-scale));font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.9);
}
#loginWrap.skA .skA-title{
  position:relative;margin:34px 0 12px;
  font-size:calc(31px * var(--font-scale));line-height:1.28;font-weight:650;letter-spacing:-.01em;
  color:#fff;max-width:13em;
}
#loginWrap.skA .skA-desc{
  position:relative;margin:0 0 26px;font-size:calc(13.5px * var(--font-scale));line-height:1.7;
  color:rgba(219,244,235,.72);max-width:24em;
}
#loginWrap.skA .skA-points{
  position:relative;list-style:none;margin:0 0 28px;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
#loginWrap.skA .skA-points li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:calc(13px * var(--font-scale));line-height:1.55;color:rgba(226,248,240,.86);
}
#loginWrap.skA .skA-points i{
  flex:0 0 auto;width:6px;height:6px;margin-top:6.5px;border-radius:2px;
  background:#5fe0b4;box-shadow:0 0 10px rgba(95,224,180,.75);
}
#loginWrap.skA .skA-meta{
  position:relative;display:flex;align-items:center;gap:9px;
  font-size:calc(11.5px * var(--font-scale));color:rgba(214,242,233,.5);letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.1);padding-top:16px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
#loginWrap.skA .skA-meta .skA-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}

/* ---------- 右：表单栏 ---------- */
#loginWrap.skA .skA-form{
  padding:52px 46px 40px;display:flex;flex-direction:column;justify-content:center;
  background:#fff;
}
#loginWrap.skA .skA-formhd h1{
  margin:0 0 6px;font-size:calc(23px * var(--font-scale));font-weight:650;letter-spacing:-.01em;color:#12211d;
}
#loginWrap.skA .skA-formhd p{margin:0 0 26px;font-size:calc(13px * var(--font-scale));color:#78867f}

#loginWrap.skA .skA-fld{display:block;margin-bottom:16px}
#loginWrap.skA .skA-fld > span{
  display:block;font-size:calc(12px * var(--font-scale));font-weight:600;color:#4c5b55;margin-bottom:7px;letter-spacing:.02em;
}
#loginWrap.skA .skA-fld input{
  width:100%;height:44px;padding:0 13px;
  font:inherit;font-size:calc(14px * var(--font-scale));color:#152420;
  background:#fbfcfc;border:1px solid #dbe3e0;border-radius:10px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
#loginWrap.skA .skA-fld input::placeholder{color:#a9b5b0}
#loginWrap.skA .skA-fld input:hover{border-color:#c8d5d0}
#loginWrap.skA .skA-fld input:focus{
  outline:none;background:#fff;border-color:#146b56;
  box-shadow:0 0 0 3px rgba(20,107,86,.13);
}
#loginWrap.skA .skA-btn{
  width:100%;height:46px;margin-top:8px;
  font:inherit;font-size:calc(14.5px * var(--font-scale));font-weight:600;letter-spacing:.06em;
  color:#fff;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#17705a,#0f5947);
  box-shadow:0 8px 20px -10px rgba(15,89,71,.8);
  transition:transform .12s,box-shadow .16s,background .16s;
}
#loginWrap.skA .skA-btn:hover{background:linear-gradient(180deg,#1a7d64,#12604d);box-shadow:0 10px 24px -10px rgba(15,89,71,.9)}
#loginWrap.skA .skA-btn:active{transform:translateY(1px)}
#loginWrap.skA .skA-btn:disabled{opacity:.62;cursor:default;box-shadow:none}

#loginWrap.skA .skA-err{
  margin-bottom:16px;padding:9px 12px;border-radius:9px;
  background:#fdeceb;border:1px solid #f7cfcb;color:#a8241b;
  font-size:calc(12.5px * var(--font-scale));line-height:1.5;
}
#loginWrap.skA .skA-err[hidden]{display:none}

#loginWrap.skA .skA-tip{
  margin:18px 0 0;font-size:calc(11.5px * var(--font-scale));line-height:1.65;color:#93a09a;
}
#loginWrap.skA .skA-foot{
  margin-top:auto;padding-top:22px;font-size:calc(11.5px * var(--font-scale));color:#9aa7a1;
}
#loginWrap.skA .skA-foot a{color:#7d8c86;text-decoration:none;border-bottom:1px solid #dfe6e3}
#loginWrap.skA .skA-foot a:hover{color:#146b56;border-color:#146b56}

/* ---------- 窄屏：收成单栏，品牌栏变页头 ---------- */
@media (max-width:860px){
  #loginWrap.skA{padding:16px}
  #loginWrap.skA .skA-card{grid-template-columns:1fr;min-height:0}
  #loginWrap.skA .skA-art{padding:28px 26px 24px}
  #loginWrap.skA .skA-title{margin:20px 0 8px;font-size:calc(23px * var(--font-scale))}
  #loginWrap.skA .skA-points{display:none}
  #loginWrap.skA .skA-meta{margin-top:16px}
  #loginWrap.skA .skA-form{padding:30px 26px 26px}
}