/* White, split-panel login. 小橘 artwork; interaction mechanism adapted from CareerCompass (MIT). */
:root{--login-ink:#242424;--login-muted:#686868;--login-accent:#a44e30;--login-line:#dedede}
body:has(.auth-wrap){background:#fff;color:var(--login-ink)}
.auth-wrap{box-sizing:border-box;min-height:100svh;max-width:1440px;margin:auto;padding:44px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.86fr);column-gap:100px;align-items:center;background:#fff}
.login-visual{position:relative;min-width:0;min-height:660px;height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:space-between}
.login-identity{display:flex;gap:12px;align-items:center;color:#242424;line-height:1.4}
.login-identity img{width:32px;height:32px}
.login-identity strong{font-size:19px;font-weight:600;letter-spacing:-.02em}
.login-identity span{display:block;margin-top:3px;font-size:11px;color:var(--login-muted)}
.login-art{display:grid;place-items:center;flex:1;min-height:0;padding-top:32px}
/* Centered hand-supported 小橘; 2D opposite-side motion matches the reference mechanism. */
.login-stage-frame{position:relative;width:450px;height:480px;max-width:100%;flex:none}
.login-characters{position:absolute;width:450px;height:480px;bottom:0;left:0;transform-origin:bottom left;pointer-events:none;--look-x:0px;--look-y:0px;--lean:0deg}
.login-mascot-scene{display:block;width:100%;height:100%;overflow:visible}
.login-characters[data-enter=waiting]{visibility:hidden}
.login-characters[data-enter=playing]{overflow:hidden}
.login-hand-entry,.login-star-entry,.login-error-motion,.login-mascot-pose,.login-support-motion{transform-box:fill-box;transform-origin:center}
.login-mascot-pose{transform:rotate(var(--lean));transform-origin:50% 85%;transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.login-support-motion{transform:rotate(0deg);transform-origin:50% 85%;transition:transform 500ms ease}
.login-mascot-gaze{transform:translate(var(--look-x),var(--look-y));transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
.login-mascot-eyelids{transform-box:fill-box;transform-origin:center;transition:transform 100ms ease}
.login-characters.is-blinking .login-mascot-eyelids{transform:scaleY(.1)}
.login-characters[data-pose=typing] .login-mascot-pose{transform:translateX(8px) rotate(6deg) skewX(-4deg)}
.login-characters:is([data-pose=private],[data-pose=visible]) .login-mascot-pose{transform:translateX(-14px) rotate(-10deg) skewX(8deg)}
.login-characters:is([data-pose=private],[data-pose=visible]) .login-mascot-gaze{transform:translate(-80px,-3px)}
.login-characters:is([data-pose=private],[data-pose=visible]) .login-support-motion{transform:translateX(-5px) rotate(-3deg)}
.login-characters[data-pose=visible][data-peeking=true] .login-mascot-pose{transform:translateX(10px) rotate(6deg) skewX(-5deg)}
.login-characters[data-pose=visible][data-peeking=true] .login-mascot-gaze{transform:translate(20px,5px)}
.login-characters.is-error .login-mascot-pose{transform:rotate(0deg)}
.login-characters.is-error .login-mascot-gaze{transform:translate(0,5px)}
.login-characters.is-error .login-error-motion{animation:xj-login-no 650ms ease-in-out}
@keyframes xj-login-no{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-12px) rotate(-7deg)}40%{transform:translateX(12px) rotate(6deg)}60%{transform:translateX(-7px) rotate(-4deg)}80%{transform:translateX(5px) rotate(2deg)}}
.login-visual-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--login-muted);font-size:11px;line-height:1.6;margin-top:40px}
.login-visual-foot #appVersion{margin:0;font-size:11px;color:var(--login-muted)}
.auth-card{box-sizing:border-box;width:100%;max-width:400px;margin-inline:auto;padding:24px 0;background:#fff;color:var(--login-ink);border:0;border-radius:0;box-shadow:none;min-width:0}
.auth-brand{margin:0 0 34px;text-align:center}
.auth-brand .mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 auto 24px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;font-size:0}
.auth-brand .mark img{width:30px;height:30px;object-fit:contain;filter:url(#login-paper-knockout) grayscale(1) brightness(.3)}
.login-identity img{filter:url(#login-paper-knockout)}
.login-filter-defs{position:absolute;width:0;height:0;pointer-events:none}
.auth-brand h1{font-size:30px;font-weight:600;line-height:1.35;letter-spacing:-.035em;margin:0 0 10px;color:var(--login-ink)}
.auth-brand #brandSub{font-size:14px;line-height:1.7;color:var(--login-muted);margin:0;text-wrap:balance}
.auth-card .field{margin:0 0 22px}
.auth-card .field label{display:block;font-size:13px;font-weight:500;line-height:20px;margin:0 0 9px;color:var(--login-ink)}
.auth-card .field input{display:block;box-sizing:border-box;width:100%;min-height:48px;height:48px;padding:12px 16px;border:1px solid var(--login-line);border-radius:24px;font:inherit;font-size:14px;line-height:22px;color:var(--login-ink);background:#fff;box-shadow:none;caret-color:var(--login-ink);transition:border-color 150ms}
.auth-card .field input::placeholder{color:#767676;opacity:1}
.auth-card .field input:hover{border-color:#a4a4a4}
.auth-card .field input:focus-visible{outline:2px solid #242424!important;outline-offset:3px;border-color:#242424}
.auth-card .field .hint{font-size:11px;line-height:1.7;color:var(--login-muted);margin-top:7px}
.login-password{position:relative}
.auth-card .login-password input{padding-right:52px}
.login-password-toggle{position:absolute;right:4px;top:4px;width:40px;height:40px;min-height:40px;display:grid;place-items:center;border:0;border-radius:50%;color:#686868;background:transparent;cursor:pointer;padding:0}
.login-password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.login-password-toggle:hover{background:#f2f2f2;color:#242424}
.login-password-toggle:focus-visible,.login-help summary:focus-visible{outline:2px solid #242424!important;outline-offset:2px}
.login-password-toggle:disabled{opacity:.5;cursor:default}
.login-help{position:relative;text-align:right;font-size:12px;color:var(--login-muted);margin:-6px 0 24px}
.login-help summary{display:inline-flex;align-items:center;min-height:28px;list-style:none;cursor:pointer;border-radius:6px;text-underline-offset:4px}
.login-help summary::-webkit-details-marker{display:none}
.login-help summary:hover{text-decoration:underline;color:#242424}
.login-help p{margin:8px 0 0;padding:12px 14px;border-radius:12px;text-align:left;background:#f5f5f5;line-height:1.8;color:#4e4e4e}
.auth-card .btn-primary{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px!important;min-height:48px;padding:12px 20px;background:#a44e30;border:1px solid #a44e30;border-radius:24px;color:white;font-size:14px;font-weight:500;line-height:22px;box-shadow:none;cursor:pointer;transition:background-color 160ms}
.auth-card .btn-primary:hover:not(:disabled){background:#8c432c;border-color:#8c432c}
.auth-card .btn-primary:active:not(:disabled){background:#793820}
.auth-card .btn-primary:focus-visible{outline:2px solid #242424!important;outline-offset:3px}
.auth-card .btn-primary:disabled{opacity:.6;cursor:wait}
.auth-card .btn-primary[aria-busy=true]::after{content:'';width:13px;height:13px;box-sizing:border-box;border:2px solid #ffffff60;border-top-color:white;border-radius:50%;animation:login-spin 900ms linear infinite}
@keyframes login-spin{to{transform:rotate(360deg)}}
.auth-foot{border:0;margin:32px 0 0;text-align:center;font-size:11px;line-height:1.8;color:var(--login-muted);text-wrap:balance}
.auth-card .alert{border-radius:12px;font-size:13px;line-height:1.7;margin-bottom:22px}
@media(max-width:1200px) and (min-width:801px){.auth-wrap{padding-inline:40px;column-gap:64px;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr)}.login-stage-frame{width:382.5px;height:408px}.login-characters{transform:scale(.85)}}
@media(max-width:1000px) and (min-width:801px){.auth-wrap{padding-inline:32px;column-gap:40px}.login-stage-frame{width:315px;height:336px}.login-characters{transform:scale(.7)}.login-identity strong{font-size:17px}.login-identity span{font-size:10px}.login-visual-foot{flex-direction:column;align-items:start;gap:4px}}
@media(max-width:800px){.auth-wrap{display:block;padding:24px 24px 32px;max-width:480px}.login-visual{min-height:0;height:auto}.login-identity strong{font-size:18px}.login-identity span{display:none}.login-identity img{width:28px;height:28px}.login-art{padding:18px 0 20px}.login-stage-frame{width:234px;height:249.6px}.login-characters{transform:scale(.52)}.login-visual-foot{display:none}.auth-card{max-width:380px;padding:0}.auth-brand{margin-bottom:26px}.auth-brand .mark{display:none}.auth-brand h1{font-size:26px}.auth-brand #brandSub{font-size:13px}.auth-card .field{margin-bottom:18px}.auth-card .field input{font-size:16px}.auth-foot{margin-top:24px}.login-help summary{min-height:36px}}
@media(max-width:360px){.auth-wrap{padding:20px}.login-art{padding-top:10px;padding-bottom:16px}.login-stage-frame{width:207px;height:220.8px}.login-characters{transform:scale(.46)}.auth-brand h1{font-size:25px}.auth-brand{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.login-characters *{transition:none!important}.auth-card .btn-primary::after{animation:none!important}}
html[data-xj-motion=reduce] .login-characters *,html[data-motion=reduced] .login-characters *{transition:none!important}
@media(forced-colors:active){.login-character,.character-eye,.character-pupil,.character-mouth{forced-color-adjust:none}.auth-card .btn-primary{background:ButtonFace;color:ButtonText;border-color:ButtonText}}

@media(prefers-reduced-motion:reduce){.login-characters .login-error-motion{animation:none!important}}
html[data-xj-motion=reduce] .login-characters .login-error-motion,html[data-motion=reduced] .login-characters .login-error-motion{animation:none!important}