:root {
    --scene-width: max(100vw, 177.777778vh);
    --scene-height: max(100vh, 56.25vw);
    --card-width: calc(var(--scene-width) * .1765);
    color-scheme: dark;
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    background: #101923;
    color: #f5f7f8;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
.login-screen { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; }
.scene {
    position: absolute;
    width: var(--scene-width);
    height: var(--scene-height);
    left: calc((100vw - var(--scene-width)) / 2);
    top: calc((100vh - var(--scene-height)) / 2);
    background: url("/Public/pay-login/tianqi-background.webp") center / 100% 100% no-repeat;
    pointer-events: none;
}
.login-card {
    position: absolute;
    left: calc((100vw - var(--scene-width)) / 2 + var(--scene-width) * .306);
    top: calc((100vh - var(--scene-height)) / 2 + var(--scene-height) * .2835);
    width: var(--card-width);
    aspect-ratio: 361 / 450;
    border: 1px solid rgba(198, 228, 235, .65);
    border-radius: calc(var(--card-width) * .047);
    background: linear-gradient(137deg, #2d3b44 0%, #1d2932 47%, #233c48 100%);
    box-shadow: inset 0 0 32px rgba(135, 219, 225, .045), 0 16px 50px rgba(2, 9, 15, .18);
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: radial-gradient(ellipse at 20% 0, rgba(255, 255, 255, .06), transparent 65%);
    pointer-events: none;
}
.card-header { position: absolute; top: 10.8%; left: 5%; width: 90%; text-align: center; }
h1 { margin: 0; font-size: calc(var(--card-width) * .119); line-height: 1.5; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; text-shadow: 0 2px 5px #0a1824; }
.light-divider { position: absolute; top: calc(var(--card-width) * .255); left: 4%; width: 92%; height: 1px; background: linear-gradient(90deg, transparent, #4e8e99 30%, #b2ffff 50%, #4e8e99 70%, transparent); }
.light-divider::after { content: ""; position: absolute; left: 43%; right: 43%; top: -2px; height: 5px; background: #b2ffff; filter: blur(4px); }
.field { position: absolute; left: 11%; width: 78%; height: 11.3%; }
.account-field { top: 39.5%; }
.password-field { top: 56.8%; }
.field input {
    width: 100%; height: 100%; padding: 0 17% 0 5.6%;
    color: #f4f7f9; font-size: calc(var(--card-width) * .057); line-height: 1.4;
    background: linear-gradient(110deg, rgba(17, 24, 34, .75), rgba(21, 35, 44, .65));
    border: 1px solid rgba(167, 198, 209, .36); border-radius: calc(var(--card-width) * .027);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, .14); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #f0f2f4; opacity: 1; }
.field input:focus { border-color: #86edf0; box-shadow: 0 0 0 3px rgba(101, 229, 233, .12); }
.field input:-webkit-autofill { -webkit-text-fill-color: #f4f7f9; -webkit-box-shadow: 0 0 0 100px #1b2d36 inset; caret-color: #f4f7f9; }
.field-icon, .password-toggle svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.field-icon { position: absolute; right: 5%; top: 30%; width: 7%; height: 40%; color: #9bb6bf; pointer-events: none; }
.password-toggle { position: absolute; right: 0; top: 0; width: 18%; height: 100%; padding: 0 4%; border: 0; background: transparent; color: #b7cdd3; cursor: pointer; border-radius: 6px; }
.password-toggle:hover { color: #b5ffff; }
.password-toggle:focus-visible, .login-button:focus-visible { outline: 2px solid #b5ffff; outline-offset: 4px; }
.password-toggle .eye-slash { opacity: 0; }
.password-toggle[aria-pressed="true"] .eye-slash { opacity: 1; }
.login-button {
    position: absolute; top: 75.1%; left: 11%; width: 78%; height: 10.8%;
    border: 1px solid rgba(177, 233, 239, .72); border-radius: calc(var(--card-width) * .032);
    background: radial-gradient(ellipse at 50% 110%, rgba(115, 253, 255, .48), transparent 63%), linear-gradient(100deg, #294a54, #417d86 50%, #305d68);
    color: #fff; font-size: calc(var(--card-width) * .059); font-weight: 600; letter-spacing: .12em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 3px 12px rgba(7, 22, 31, .3);
    cursor: pointer; transition: filter .2s, box-shadow .2s;
}
.login-button:hover { filter: brightness(1.16); box-shadow: 0 0 22px rgba(85, 239, 242, .2); }
.login-button:active { filter: brightness(.95); }
.login-button:disabled { cursor: wait; opacity: .8; }
.spinner { display: none; width: .85em; height: .85em; margin-left: .5em; vertical-align: -.08em; border: 2px solid #a4c9cf; border-top-color: transparent; border-radius: 50%; animation: spin .75s linear infinite; }
.login-button:disabled .spinner { display: inline-block; }
.login-message { position: absolute; top: 87%; left: 7%; width: 86%; margin: 0; color: #ffcbca; text-align: center; font-size: clamp(12px, calc(var(--card-width) * .038), 16px); line-height: 1.5; overflow-wrap: anywhere; }
.login-message.success { color: #a6f4e9; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px), (max-height: 520px) {
    :root { --card-width: min(360px, calc(100vw - 40px)); }
    .login-screen { display: grid; place-items: center; padding: 32px 20px; }
    .scene { position: fixed; left: calc(50vw - var(--scene-width) * .655); opacity: .65; }
    .login-screen::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 28, .4), rgba(8, 18, 28, .12) 40%, rgba(8, 18, 28, .55)); z-index: 1; pointer-events: none; }
    .login-card { position: relative; left: auto; top: auto; z-index: 2; box-shadow: 0 24px 75px rgba(0, 7, 16, .55); }
    .field { height: max(11.3%, 44px); }
    .login-button { height: max(10.8%, 44px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }