/* ============================================================
   登录皮肤 D ·「宣纸墨印」（浅色）
   ------------------------------------------------------------
   米黄纸底 + 墨色字 + 朱红印章。竖排题签是中式版式的"骨架"，
   不是装饰 —— 它把视线从右上角引到表单，跟横排表单形成对角平衡。
   ★ 独立性同 A/B/C：不读 tokens.css 变量，选择器全部锚在 #loginWrap.skD。
   ============================================================ */

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

#loginWrap.skD{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;
  background:
    radial-gradient(900px 520px at 18% 12%,#fffdf7 0%,transparent 62%),
    radial-gradient(700px 480px at 88% 88%,#f0e7d6 0%,transparent 60%),
    #f3ece0;
  font-family:"Songti SC","STSong","SimSun","Noto Serif CJK SC",Georgia,-apple-system,"Microsoft YaHei",serif;
  color:#2b2620;
  -webkit-font-smoothing:antialiased;
}
#loginWrap.skD[hidden]{display:none}
/* 纸纹：极细的斜向交叉线，远看是"纸"，近看才见纹 */
#loginWrap.skD::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg,rgba(120,100,70,.045) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(120,100,70,.035) 0 1px,transparent 1px 7px);
}

#loginWrap.skD .skD-wrap{
  position:relative;display:flex;align-items:stretch;gap:0;
  width:min(880px,96vw);min-height:520px;
  background:#fbf7ee;
  border:1px solid #e3d8c3;
  box-shadow:0 1px 0 #fff inset,0 30px 70px -34px rgba(60,44,24,.45);
}
/* 左侧竖排题签 */
#loginWrap.skD .skD-side{
  flex:0 0 96px;position:relative;
  border-right:1px solid #e6dbc7;
  background:linear-gradient(180deg,#f7f1e5,#f1e8d8);
  display:flex;flex-direction:column;align-items:center;
  padding:26px 0;
}
#loginWrap.skD .skD-seal{
  width:40px;height:40px;border-radius:3px;
  background:#b23a2e;color:#fff5ee;
  display:grid;place-items:center;
  font-size:calc(17px * var(--font-scale));font-weight:700;letter-spacing:0;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
#loginWrap.skD .skD-vert{
  margin-top:auto;margin-bottom:auto;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:calc(22px * var(--font-scale));letter-spacing:.42em;color:#3c352c;
  line-height:1.2;max-height:260px;
}
#loginWrap.skD .skD-side-sub{
  writing-mode:vertical-rl;font-size:calc(11px * var(--font-scale));letter-spacing:.24em;
  color:#9c8f78;margin-bottom:6px;
}

/* 右侧主体 */
#loginWrap.skD .skD-body{
  flex:1;min-width:0;padding:56px 54px 40px;
  display:flex;flex-direction:column;
}
#loginWrap.skD .skD-eyebrow{
  font-size:calc(11px * var(--font-scale));letter-spacing:.34em;color:#a2906f;text-transform:uppercase;margin-bottom:14px;
}
#loginWrap.skD h1{
  margin:0 0 8px;font-size:calc(27px * var(--font-scale));font-weight:600;letter-spacing:.02em;color:#241f19;
  line-height:1.35;word-break:break-word;
}
#loginWrap.skD .skD-sub{
  margin:0 0 30px;font-size:calc(13px * var(--font-scale));color:#8b7f6a;letter-spacing:.04em;
}
#loginWrap.skD .skD-rule{
  height:1px;background:linear-gradient(90deg,#d9cbb2,transparent);margin:0 0 26px;
}

#loginWrap.skD .skD-fld{display:block;margin-bottom:20px}
#loginWrap.skD .skD-fld > span{
  display:block;font-size:calc(12px * var(--font-scale));letter-spacing:.16em;color:#6e6250;margin-bottom:6px;
}
#loginWrap.skD .skD-fld input{
  width:100%;height:40px;padding:0 2px;
  font:inherit;font-size:calc(16px * var(--font-scale));color:#241f19;letter-spacing:.06em;
  background:transparent;border:0;border-bottom:1px solid #d8c9ad;
  transition:border-color .2s,box-shadow .2s;
}
#loginWrap.skD .skD-fld input::placeholder{color:#b9ab92;letter-spacing:.1em}
#loginWrap.skD .skD-fld input:focus{
  outline:none;border-bottom-color:#b23a2e;
  box-shadow:0 14px 20px -20px rgba(178,58,46,.9);
}
#loginWrap.skD .skD-btn{
  width:100%;height:44px;margin-top:12px;
  font:inherit;font-size:calc(15px * var(--font-scale));font-weight:600;letter-spacing:.3em;text-indent:.3em;
  color:#fbf7ee;background:#2f2820;border:0;border-radius:2px;cursor:pointer;
  transition:background .16s,transform .12s;
}
#loginWrap.skD .skD-btn:hover{background:#443a2e}
#loginWrap.skD .skD-btn:active{transform:translateY(1px)}
#loginWrap.skD .skD-btn:disabled{opacity:.55;cursor:default}

#loginWrap.skD .skD-err{
  margin-bottom:18px;padding:9px 12px;border-radius:2px;
  background:#fbe9e6;border-left:3px solid #b23a2e;color:#8d2a20;
  font-size:calc(12.5px * var(--font-scale));line-height:1.6;
}
#loginWrap.skD .skD-err[hidden]{display:none}

#loginWrap.skD .skD-tip{
  margin:18px 0 0;font-size:calc(11.5px * var(--font-scale));line-height:1.8;color:#a3967e;
}
#loginWrap.skD .skD-foot{
  margin-top:auto;padding-top:24px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid #e6dbc7;
  font-size:calc(11px * var(--font-scale));color:#a89a80;letter-spacing:.04em;
}
#loginWrap.skD .skD-foot a{color:#8b7f6a;text-decoration:none;border-bottom:1px solid #d8c9ad}
#loginWrap.skD .skD-foot a:hover{color:#b23a2e;border-color:#b23a2e}

@media (max-width:720px){
  #loginWrap.skD{padding:14px}
  #loginWrap.skD .skD-wrap{min-height:0;flex-direction:column}
  #loginWrap.skD .skD-side{
    flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;
    border-right:0;border-bottom:1px solid #e6dbc7;padding:14px 18px;
  }
  #loginWrap.skD .skD-vert{margin:0;writing-mode:horizontal-tb;font-size:calc(15px * var(--font-scale));letter-spacing:.2em;max-height:none}
  #loginWrap.skD .skD-side-sub{display:none}
  #loginWrap.skD .skD-body{padding:28px 24px 24px}
  #loginWrap.skD h1{font-size:calc(22px * var(--font-scale))}
}