@font-face {
    font-family: "Entry Serif";
    src: url("../webfonts/entry-serif.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ink: #0c1727;
    --paper: #f0eee6;
    --muted: #9ca7b8;
    --gold: #cfb579;
    --line: #303d4e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    color: var(--paper);
    background: var(--ink);
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button svg, .input-shell > svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.entry-layout { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 64px 24px 38px; isolation: isolate; }
.entry-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; isolation: isolate; background: #142337; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; animation: scene-enter 1.4s ease-out both; }
.scene-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #06111e55, #06111e22 36%, #06111e77), radial-gradient(ellipse at 50% 50%, #08142033, transparent 75%); }
.scene-sign { position: absolute; top: 30px; left: 38px; display: flex; align-items: center; gap: 14px; color: #e4cf9e; }
.scene-sign span { font-size: 11px; font-weight: 500; letter-spacing: .2em; }
.scene-caption { text-align: center; margin-bottom: 31px; }
h1, h2, #normalLoginPrompt { font-family: "Entry Serif", "Songti SC", "SimSun", serif; font-weight: 600; }
h1 { margin: 0; font-size: 34px; line-height: 1.5; letter-spacing: .09em; }
.scene-caption p { margin: 9px 0 0; font-size: 12px; line-height: 1.7; letter-spacing: .1em; color: #b8c0ca; }

.entry-panel { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 442px); min-width: 0; padding: 34px 40px 24px; border: 1px solid #cbb17355; border-radius: 12px; background: #0b1726d9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 90px #02071066, inset 0 1px 0 #f5e7c80a; animation: content-enter .65s .1s both; }
.entry-content { width: 100%; }
h2 { margin: 0 0 24px; font-size: 22px; line-height: 1.5; letter-spacing: .06em; }
#normalLoginPrompt { margin: 0 0 24px; font-size: 16px; color: var(--muted); }
label { display: block; font-size: 13px; font-weight: 500; color: #c4cad3; margin-bottom: 10px; letter-spacing: .05em; }
#handleEntryBlock { margin-bottom: 21px; }
.input-shell { height: 52px; display: flex; align-items: center; width: 100%; border: 1px solid #465366; border-radius: 5px; background: #08131dd9; color: #8c9aad; transition: border-color .18s, box-shadow .18s, background .18s; }
.input-shell:hover { border-color: #526078; }
.input-shell:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px #cfb57916; background: #0e1a2a; }
.input-shell > svg { flex: 0 0 18px; width: 18px; height: 18px; margin-left: 17px; }
.input-shell input { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0 14px; border: none; border-radius: inherit; background: transparent; color: var(--paper); font-size: 15px; outline: none; }
.input-shell input::placeholder { color: #77859a; font-size: 14px; }
.input-shell input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #132034 inset; -webkit-text-fill-color: var(--paper); caret-color: var(--paper); }
.password-toggle { display: inline-flex; justify-content: center; align-items: center; width: 46px; height: 48px; flex-shrink: 0; border: 0; background: transparent; color: #8996a9; border-radius: 4px; }
.password-toggle svg { width: 19px; height: 19px; }
.password-toggle:hover { color: var(--gold); }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.recovery-link-row { text-align: right; margin: 10px 0 21px; }
#recoverPassword { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 0 2px 12px; font-size: 12px; text-decoration: none; color: #a6afbd; transition: color .18s; }
#recoverPassword:hover { color: #e4cf9e; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 20px; border: 1px solid #d8bf8b; border-radius: 5px; color: #17212d; background: #cfb579; font-size: 15px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; white-space: nowrap; transition: background .18s, box-shadow .18s, transform .18s; }
.primary-button svg { width: 19px; height: 19px; transition: transform .18s; }
.primary-button:hover { background: #e1c893; box-shadow: 0 5px 24px #c5a66b18; }
.primary-button:hover svg { transform: translateX(3px); }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .7; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #edcf90; outline-offset: 4px; }
#errorMessage { min-height: 22px; margin-top: 12px; color: #efb3a9; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.entry-footer { display: flex; align-items: center; gap: 12px; margin-top: 7px; color: #929eae; font-size: 10px; letter-spacing: .12em; }
.entry-footer span { color: #8e8166; font-size: 13px; }

#recoverMessage { color: #aeb7c4; font-size: 13px; line-height: 1.7; margin: -16px 0 24px; }
#passwordRecoveryBlock .input-shell { margin-bottom: 21px; }
.plain-input input { padding-left: 16px; }
.recovery-actions { display: grid; gap: 12px; margin-top: 28px; }
.secondary-button { min-height: 42px; padding: 9px 16px; color: #b7c0cf; background: transparent; border: 1px solid #303d4e; border-radius: 5px; font-size: 14px; }
.secondary-button:hover { border-color: #b59b6d; color: #e4cf9e; }
#userList { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.userSelect { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 10px; border: 1px solid #303d4e; border-radius: 6px; cursor: pointer; overflow: hidden; }
.userSelect:hover { border-color: var(--gold); background: #172639; }
.userSelect .avatar img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.userSelect .userName, .userSelect .userHandle { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userSelect .userHandle { color: var(--muted); }
.script-notice { color: #efb3a9; font-size: 13px; }

@keyframes content-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-enter { from { opacity: .2; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 800px) {
    .entry-layout { padding: 76px 20px 34px; }
    .scene-image { object-position: 64% center; }
    .scene-shade { background: linear-gradient(180deg, #06111e33, #06111e44); }
    .scene-sign { top: 22px; left: 23px; gap: 10px; }
    .scene-sign img { width: 30px; height: 30px; }
    .scene-sign span { font-size: 9px; letter-spacing: .18em; }
    .scene-caption { margin-bottom: 28px; }
    h1 { font-size: 30px; letter-spacing: .08em; }
    .scene-caption p { font-size: 11px; margin-top: 7px; }
    .entry-panel { max-width: 408px; padding: 30px 25px 22px; }
    .input-shell input { font-size: 16px; }
}
@media (max-width: 380px) {
    .entry-layout { padding-left: 14px; padding-right: 14px; }
    .entry-panel { padding: 26px 21px 20px; }
    .scene-sign { left: 22px; top: 18px; }
    h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }