body.auth-pending { height:100svh; overflow:hidden!important; }
body.auth-pending #appShell { visibility:hidden; pointer-events:none; }
.auth-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; background:#f9f9f9; color:#292825; overflow-x:hidden; overflow-y:auto; padding:32px 40px; min-height:100svh; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
.auth-overlay.hidden,.auth-overlay [hidden] { display:none!important; }
.auth-overlay * { box-sizing:border-box; }
.auth-experience { width:100%; height:calc(100svh - 64px); min-height:580px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:48px; align-items:center; }
.auth-hero { height:100%; background:transparent; border:0; box-shadow:none; display:grid; grid-template-rows:44px minmax(0,1fr) 20px; padding:8px 0; min-width:0; overflow:visible; }
.auth-brand { display:flex; gap:12px; align-items:center; font-size:15px; font-weight:650; }
.auth-brand img { width:32px; height:32px; }
.auth-brand>span { color:#292825; }
html.motion-ready .auth-overlay .auth-brand { animation:none!important; opacity:1!important; transform:none!important; }
.auth-brand-subtitle { display:block; font-size:10px; letter-spacing:.16em; color:#77736a; margin-top:3px; font-weight:400; }
.auth-hero-center { text-align:center; padding:8px 0; align-self:center; min-width:0; }
.auth-character-stage { --auth-stage-height:clamp(280px,calc(100svh - 300px),660px); height:var(--auth-stage-height); display:grid; place-items:center; overflow:visible; isolation:isolate; }
.auth-character-stage svg { width:min(100%,calc(clamp(320px,calc(100svh - 290px),720px) * var(--character-scale,1)),calc(var(--auth-stage-height) - 80px)); height:auto; aspect-ratio:1; max-width:calc(100% - 32px); max-height:calc(100% - 80px); overflow:visible; pointer-events:none; }
.auth-hero-title { font-size:clamp(24px,2.4vw,32px); letter-spacing:-.06em; font-weight:550; margin:10px 0 12px; color:#292825; }
#characterStatus { color:#797469; font-size:13px; margin:0 0 24px; min-height:20px; }
.auth-character-actions { position:relative; z-index:2; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.auth-character-actions button { position:relative; z-index:3; min-height:44px; padding:10px 16px; border-radius:24px; border:1px solid #dddacf; background:transparent; color:#4d4a41; font:inherit; font-size:12px; cursor:pointer; touch-action:manipulation; }
.auth-character-actions span { margin-left:10px; }
.auth-hero-footer { font-size:11px; color:#898376; }
.auth-card { position:relative; display:block; width:100%; height:min(800px,100%); padding:22px 26px; overflow-y:auto; scrollbar-gutter:stable; border:1px solid #e3e5ea; border-radius:24px; background:#fff; box-shadow:0 12px 50px #29282505; color:#292825; }
.auth-card-inner { min-width:0; }
.auth-card-tools { display:flex; justify-content:flex-end; margin:0 0 8px; }
.auth-tool-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:#716d63; border-radius:50%; cursor:pointer; font-size:20px; }
.auth-card h1 { font-size:30px; line-height:1.3; letter-spacing:-.05em; margin:0 0 8px; color:#292825; font-weight:600; min-height:39px; }
.auth-card-subtitle { font-size:13px; color:#78736b; margin:0 0 20px; line-height:1.7; min-height:44px; }
.auth-mode-tabs { display:flex; gap:4px; background:#f5f4ef; border:0; border-radius:12px; padding:4px; margin:0 0 22px; box-shadow:none; min-height:52px; }
.auth-mode-tab { flex:1; min-width:0; min-height:44px; border:0; border-radius:8px; background:transparent; color:#797368; font:inherit; font-size:12px; cursor:pointer; padding:8px 4px; }
.auth-mode-tab.is-active { color:#282720; background:#fff; box-shadow:0 1px 5px #29282512; }
.auth-fields { display:grid; gap:16px; align-content:start; min-height:388px; }
.auth-field { min-width:0; }
.auth-field label { display:block; font-size:12px; color:#565148; font-weight:550; margin:0 0 7px; }
.auth-input-shell { position:relative; display:flex; align-items:center; min-width:0; }
.auth-input-shell>i { position:absolute; left:14px; color:#938d82; font-size:18px; pointer-events:none; }
.auth-overlay .auth-field input { width:100%; min-width:0; height:48px; padding:12px 44px; border:1px solid #e0ddd4; border-radius:10px; background:#fcfbf9; color:#292825; font:inherit; font-size:14px; box-shadow:none; }
.auth-field input::placeholder { color:#969086; }
.auth-field input:-webkit-autofill { -webkit-text-fill-color:#292825; box-shadow:0 0 0 1000px #fcfbf9 inset; }
.auth-password-toggle { position:absolute; right:2px; top:2px; height:44px; width:40px; border:0; background:transparent; color:#7d766b; font-size:18px; cursor:pointer; }
.auth-overlay :focus-visible { outline:3px solid #778967; outline-offset:3px; }
.auth-remember-slot { min-height:80px; padding-top:12px; }
.auth-remember-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; margin:0; font-size:11px; }
.auth-remember { display:flex; gap:7px; align-items:center; min-height:44px; color:#746d62; }
.auth-remember input { width:16px; height:16px; accent-color:#49563d; }
.auth-link { min-height:44px; padding:4px 0; border:0; background:transparent; color:#655e52; font:inherit; cursor:pointer; }
.auth-actions { display:grid; gap:8px; margin-top:18px; }
.auth-overlay .auth-button { width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:13px; border:1px solid #dfdbd2; border-radius:10px; color:#554e43; background:#fff; cursor:pointer; box-shadow:none; }
.auth-overlay .auth-button.primary { color:#faf9f6; background:#292d25; border-color:#292d25; font-weight:550; }
.auth-overlay button:disabled { opacity:.55; cursor:wait; }
.auth-message { color:#858074; font-size:11px; line-height:1.7; min-height:20px; margin:14px 0; text-align:center; overflow-wrap:anywhere; }
.auth-message.error { color:#a54337; }
.auth-message.success { color:#46693e; }
.auth-trust { display:flex; justify-content:space-between; gap:10px; padding-top:16px; border-top:1px solid #efede6; }
.auth-trust-item { display:flex; align-items:center; gap:5px; background:transparent; border:0; box-shadow:none; color:#8b8478; font-size:10px; }
.auth-trust-item strong { font-weight:400; }
.auth-trust-item>span>span { display:none; }
@media(max-width:1050px) { .auth-overlay { padding:24px; } .auth-experience { gap:24px; grid-template-columns:minmax(0,1fr) 360px; height:calc(100svh - 48px); } .auth-card { padding:22px; } }
@media(max-width:680px) { .auth-overlay { display:block; overflow-y:auto; padding:18px 16px 32px; } .auth-experience { height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; max-width:450px; } .auth-hero { height:auto; display:block; padding:0; } .auth-hero-center { padding:16px 0 0; } .auth-character-stage { --auth-stage-height:clamp(300px,64svh,460px); } .auth-character-stage svg { width:min(100%,calc(330px * var(--character-scale,1)),calc(var(--auth-stage-height) - 24px)); height:auto; } .auth-hero-title { font-size:24px; margin:4px 0 8px; } .auth-hero-footer { display:none; } #characterStatus { margin-bottom:12px; font-size:12px; } .auth-card { height:740px; padding:24px; border-radius:20px; } .auth-card-tools { position:absolute; top:12px; right:12px; } .auth-card h1 { font-size:26px; padding-right:28px; } .auth-card-subtitle { margin-bottom:20px; } .auth-overlay .auth-field input { font-size:16px; } }
@media(max-width:390px) { .auth-card { padding:20px 16px; } .auth-overlay { padding-inline:12px; } .auth-trust { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .auth-overlay *, .auth-overlay *::before, .auth-overlay *::after { animation:none!important; transition:none!important; } }