html[data-page="login"]{
  --bg:#f5f3ee;--card:#fdfcf9;--ink:#1a1c1f;--ink2:#5a6070;--ink3:#9a9f96;
  --accent:#2563EB;--accent2:#1D4ED8;--accent3:#EFF6FF;
  --brand-warm:#d95f19;--brand-warm-soft:#fff5ec;
  --border:#e6e3dc;--radius:10px;--radius-sm:6px;
  --shadow:0 1px 2px rgba(28,25,23,.04),0 8px 32px rgba(28,25,23,.07);
  --serif:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;  /* 2026-07-27 全站去楷体 */
  --danger:#dc2626;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Hiragino Sans","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
}
/* 纸纹底——极淡，1.5%透明度，跟文楷呼应 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

.login-card{
  position:relative;z-index:1;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:44px 36px 36px;
  width:100%;max-width:360px;
}

/* ── 印章区 ── */
.login-brand{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:28px;
}
.login-mark{
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:36px;font-weight:800;letter-spacing:.12em;
}
.login-sub{
  font-size:12px;color:var(--brand-warm);margin-top:10px;
  letter-spacing:.1em;
}

/* ── 表单 ── */
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--ink2);letter-spacing:.02em}
.field select,.field input{
  width:100%;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;background:var(--card);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field select:focus,.field input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(37,99,235,.18);
}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:36px}
.pw-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  cursor:pointer;color:var(--ink3);user-select:none;line-height:1;display:flex;align-items:center;
}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── 按钮：右对齐，中等宽度，像落款 ── */
.form-actions{
  display:flex;justify-content:flex-end;margin-top:20px;
}
.btn{
  padding:9px 28px;
  background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.btn:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 3px 10px rgba(37,99,235,.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.error{
  background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.15);
  color:var(--danger);padding:8px 12px;border-radius:var(--radius-sm);
  font-size:12px;margin-bottom:14px;text-align:center;
}

@media(max-width:420px){
  .login-card{margin:16px;padding:32px 24px 28px}
}

/* 按钮点击动画 */
@keyframes btnClickShine{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.18),inset 0 0 0 var(--btn-shine,rgba(255,255,255,.1))}
  50%{box-shadow:0 0 16px 3px rgba(255,255,255,.22),inset 0 0 10px 2px rgba(255,255,255,.06)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0),inset 0 0 0 rgba(255,255,255,0)}
}
/* ═════════ 暗色模式 ═════════ */
html[data-page="login"][data-color-scheme="dark"]{
  --bg:#1a1d23;--card:#232730;--ink:#E2E5EA;--ink2:#B0B5C0;--ink3:#8088A0;
  --accent:#60A5FA;--accent2:#3B82F6;--accent3:#2A3040;
  --brand-warm:#F59E0B;--border:#3A4050;
  --shadow:0 1px 3px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.15);
  --danger:#EF4444;
}
[data-color-scheme="dark"] .error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);color:#F08080}
[data-color-scheme="dark"] .btn{box-shadow:0 3px 10px rgba(96,165,250,.18)}
[data-color-scheme="dark"] .btn:hover{box-shadow:0 3px 10px rgba(96,165,250,.28)}
.btn:not(:disabled):active{
  transform:translateY(2px) scale(.97)!important;
  filter:brightness(0.94);
  box-shadow:inset 0 2px 8px rgba(15,23,42,.2)!important;
  animation:btnClickShine .2s ease-out!important;
  transition:all .06s!important;
}