body.login-body {
    margin: 0; background: #f6dcea;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
.login-page {
    --w: min(100vw, 520px);
    --s: max(var(--w) / 1696, 100vh / 2560);
    position: relative; max-width: 520px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow: hidden;
    background: url(../IMG/dvbj_m.jpg) left top / cover no-repeat, #f3d3ea;
}
html:has(.login-body) { min-height: 100%; background: #f3d3ea; }
.login-sub {
    position: absolute; top: calc(var(--s) * 455); left: calc(var(--s) * 588); transform: translateX(-50%);
    margin: 0; white-space: nowrap; letter-spacing: 1px;
    font-size: max(12px, calc(var(--s) * 40)); color: #6b4a6e;
}
.login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }
.login-page { padding: calc(var(--s) * 600) 18px 30px; }
.login-card {
    position: relative; width: 100%; max-width: 420px; margin: 0 auto;
    padding: 28px 24px 24px; border-radius: 22px;
    background: rgba(255, 251, 250, .86);
    box-shadow: 0 10px 30px rgba(180, 120, 160, .18);
}
.login-card::before {
    content: ""; position: absolute; inset: 9px; border: 1px solid #e3c39b; border-radius: 16px; pointer-events: none;
}
.login-card .corner { position: absolute; font-style: normal; font-size: 14px; color: #d9b07a; line-height: 1; }
.login-card .c1 { top: 14px; left: 14px; }
.login-card .c2 { top: 14px; right: 14px; }
.login-card .c3 { bottom: 14px; left: 14px; }
.login-card .c4 { bottom: 14px; right: 14px; }
.login-card label { display: block; margin: 0 0 16px; font-size: 15px; color: #5a3d5c; }
.login-card label i { font-style: normal; color: #a77ba5; margin-right: 8px; }
.login-card input {
    display: block; width: 100%; margin-top: 10px; height: 46px; padding: 0 16px;
    border: 1px solid #ecd6d6; border-radius: 14px; background: rgba(255, 255, 255, .75);
    font-size: 16px; color: #333; outline: none; font-family: inherit;
}
.login-card input:focus { border-color: #d7a9c9; background: #fff; }
.login-btn {
    display: block; width: 78%; max-width: 280px; aspect-ratio: 1513 / 367; margin: 10px auto 0; padding: 0; border: 0; cursor: pointer;
    background: url(../IMG/dvanniu.png) center / contain no-repeat; transition: transform .15s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.login-btn:active { transform: scale(.97); filter: brightness(.96); }
.login-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.login-error { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #ffe3ea; color: #c2255c; font-size: 14px; }
.login-reg { margin: 16px 0 0; text-align: center; font-size: 14px; }
.login-reg a { color: #a0558f; }
