.auth-overlay, body.freev-apple .auth-overlay { overflow:auto; background:radial-gradient(circle at 26% 31%,#315da988 0%,#101d39c9 45%,#0b1424e8 100%); backdrop-filter:blur(18px) saturate(1.18); -webkit-backdrop-filter:blur(18px) saturate(1.18) }
.auth-stage { width:min(100%,760px); display:grid; grid-template-columns:minmax(215px,280px) minmax(0,400px); align-items:center; gap:28px; margin:auto; animation:authStageArrive .6s cubic-bezier(.2,.8,.2,1) both }
.auth-buddy-scene { position:relative; min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; color:#e9f6ff; text-align:center }
.auth-buddy-aura { position:absolute; width:260px; height:260px; top:19px; border-radius:50%; background:radial-gradient(circle,#71e1e883 0%,#5187ec42 37%,transparent 72%); filter:blur(17px); z-index:-1; animation:authAura 5s ease-in-out infinite }
.auth-buddy-ring { position:absolute; width:234px; height:234px; top:29px; border:1px solid #addef35c; border-radius:50%; box-shadow:inset 0 0 22px #7dc9f016,0 0 32px #64c9e31e; pointer-events:none; animation:authOrbit 14s linear infinite }
.auth-buddy-ring::before,.auth-buddy-ring::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:#79ecd2; box-shadow:0 0 14px #7efbe2; left:50%; top:-4px }
.auth-buddy-ring::after { background:#a5ccff; box-shadow:0 0 14px #9fc8ff; top:auto; bottom:-4px }
.auth-buddy-scene morph-bot { width:210px; height:210px; display:block; filter:drop-shadow(0 22px 28px #071b5366); animation:authBuddyFloat 4.2s ease-in-out infinite; transition:filter .35s ease }
.auth-buddy-scene.buddy-loading morph-bot { opacity:0 }
.auth-buddy-scene.buddy-loading::before { content:''; position:absolute; top:44px; width:178px; height:178px; border-radius:46%; background:linear-gradient(125deg,#315cf5,#42b3e9 55%,#34d399); box-shadow:0 20px 36px #0b398559,inset 0 2px 12px #ffffff6b; animation:authLoadingBreath 2.1s ease-in-out infinite }
.auth-buddy-scene.buddy-loading::after { content:'••'; position:absolute; top:86px; color:#fff; font-size:4rem; letter-spacing:.2em; line-height:1; animation:authLoadingEyes 1.3s ease-in-out infinite }
.auth-buddy-scene morph-bot:hover { filter:drop-shadow(0 25px 32px #19bda581) }
.auth-buddy-scene.buddy-unavailable morph-bot { display:none }
.auth-buddy-scene.buddy-unavailable::before { content:''; display:block; flex:none; width:160px; height:160px; border-radius:46%; background:radial-gradient(ellipse 9px 17px at 38% 42%,#fff 96%,transparent 100%),radial-gradient(ellipse 9px 17px at 62% 42%,#fff 96%,transparent 100%),linear-gradient(135deg,#315cf5,#34d399); box-shadow:0 20px 40px #06255377; animation:authBuddyFloat 4.2s ease-in-out infinite }
.auth-buddy-copy { display:grid; gap:7px; max-width:240px; margin-top:6px; text-wrap:balance }
.auth-buddy-copy strong { font-size:1.3rem; line-height:1.16; letter-spacing:-.025em }
.auth-buddy-copy span:last-child { color:#c9d9ec; font-size:.82rem; line-height:1.4 }
.auth-buddy-eyebrow { color:#6de4cb; font-size:.67rem; font-weight:800; letter-spacing:.15em }
.auth-stage .auth-card,body.freev-apple .auth-stage .auth-card { position:relative; overflow:hidden; max-width:none; padding:2rem; border:1px solid #ffffffbd; border-radius:28px; background:linear-gradient(150deg,#f7fbff 0%,#fff 23%,#fff 78%,#f7fafc 100%); box-shadow:0 32px 90px #0611288c,0 2px 14px #b4d0ef33; animation:authCardArrive .55s .08s cubic-bezier(.2,.8,.2,1) both }
.auth-stage .auth-card::before { content:''; position:absolute; top:0; left:13%; width:74%; height:3px; border-radius:0 0 8px 8px; background:linear-gradient(90deg,transparent,#3472f1,#31c6ad,transparent); box-shadow:0 1px 20px #2d98e592 }
.auth-stage .auth-logo,body.freev-apple .auth-stage .auth-logo { display:flex; align-items:center; gap:11px; margin:0 0 21px; text-align:left; letter-spacing:normal }
.auth-logo-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#edf5ff; box-shadow:inset 0 0 0 1px #dfeaf8,0 7px 18px #1f65c915; flex:none }
.auth-logo-mark img { display:block; width:36px; height:36px; border-radius:9px }
.auth-logo-text { display:grid; gap:2px }
.auth-logo-text strong { font-size:1.09rem; font-weight:780; color:#172336; letter-spacing:-.035em }
.auth-logo-text small { font-size:.73rem; font-weight:550; color:#708096; letter-spacing:0 }
.auth-intro { margin:0 0 24px; text-align:left }
.auth-intro-kicker { display:block; margin-bottom:8px; color:#138b7b; font-size:.65rem; font-weight:850; letter-spacing:.14em }
.auth-intro h2 { margin:0 0 5px; color:#182237; font-size:1.6rem; line-height:1.14; letter-spacing:-.05em; font-weight:780 }
.auth-intro p { margin:0; color:#68798e; font-size:.82rem; line-height:1.45 }
.auth-stage .auth-tabs,body.freev-apple .auth-stage .auth-tabs { margin-bottom:22px; padding:4px; border:1px solid #e1e9f4; border-radius:14px; background:#eff3f9 }
.auth-stage .auth-tab { min-height:43px; border-radius:10px; color:#65758a }
.auth-stage .auth-tab.active,body.freev-apple .auth-stage .auth-tab.active { color:#1554c7; background:#fff; box-shadow:0 2px 9px #203d6a17,0 1px 2px #203d6a0d }
.auth-stage .form-label { display:block; margin-bottom:7px; font-size:.77rem; font-weight:670 }
.auth-stage .form-input { min-height:49px; border-radius:12px; border-color:#dce5f0; background:#fff; font-size:.88rem }
.auth-stage .form-input::placeholder { color:#98a5b5 }
.auth-password-field { position:relative }
.auth-password-field .form-input { width:100%; padding-right:52px }
.auth-password-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:#687c95; cursor:pointer; transition:background .2s ease,color .2s ease }
.auth-password-toggle:hover,.auth-password-toggle[aria-pressed="true"] { background:#edf4fc; color:#2363d7 }
.auth-password-toggle:focus-visible { outline:2px solid #3472f1; outline-offset:1px }
.auth-caps-hint:not([hidden]) { display:block; margin-top:6px; color:#9a580c; font-size:.7rem; font-weight:650 }
.auth-stage .auth-btn { min-height:50px; position:relative; overflow:hidden; border-radius:12px; letter-spacing:-.01em }
.auth-stage .auth-btn:not(:disabled)::after { content:'→'; display:inline-block; margin-left:10px; font-size:1.1rem; transition:transform .2s ease }
.auth-stage .auth-btn:hover:not(:disabled)::after { transform:translateX(4px) }
.auth-trust { display:flex; align-items:center; gap:10px; margin-top:19px; padding:12px; border:1px solid #dceee9; border-radius:13px; background:#f5faf8; text-align:left }
.auth-trust-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; background:#e0f4ed; color:#139879; font-size:.88rem }
.auth-trust > span:last-child { display:grid; gap:2px }
.auth-trust strong { color:#263c46; font-size:.73rem; font-weight:750 }
.auth-trust small { color:#6a7f89; font-size:.68rem; line-height:1.35 }
.auth-stage #authForgotBtn { margin-top:7px !important; color:#2462cc !important; font-weight:620 }
.auth-stage #authForgotBtn:hover { text-decoration:underline }
.auth-stage .auth-btn { background:linear-gradient(110deg,#2663eb,#315be5 65%,#168d8b); box-shadow:0 9px 24px #2761e638; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease }
.auth-stage .auth-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 13px 28px #2761e650; filter:brightness(1.05) }
.auth-stage .auth-tab { transition:background .24s ease,color .24s ease,box-shadow .24s ease,transform .24s ease }
.auth-stage .auth-tab:hover { transform:translateY(-1px) }
.auth-stage .form-input:focus { border-color:#4b86f2; box-shadow:0 0 0 4px #3d84ef1c,0 8px 22px #145dc30d; transition:border-color .2s ease,box-shadow .2s ease }
.auth-stage .auth-error,.auth-stage .auth-success { animation:authNotice .28s cubic-bezier(.2,.8,.2,1) both }
@keyframes authStageArrive { from { opacity:0; transform:translateY(16px) scale(.985) } to { opacity:1; transform:none } }
@keyframes authCardArrive { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }
@keyframes authNotice { from { opacity:0; transform:translateY(-5px) } to { opacity:1; transform:none } }
@keyframes authBuddyFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes authAura { 0%,100% { opacity:.6; transform:scale(.95) } 50% { opacity:1; transform:scale(1.08) } }
@keyframes authOrbit { to { transform:rotate(360deg) } }
@keyframes authLoadingBreath { 50% { transform:scale(.95); filter:brightness(1.08) } }
@keyframes authLoadingEyes { 50% { opacity:.48; transform:translateY(3px) } }
@media(max-width:650px) { .auth-stage { width:min(100%,400px); grid-template-columns:1fr; gap:8px; padding:12px 0 } .auth-buddy-scene { min-height:128px; flex-direction:row; text-align:left; gap:8px; justify-content:center } .auth-buddy-scene morph-bot { width:104px; height:104px; flex:none } .auth-buddy-aura { width:140px; height:140px; top:-10px; left:5% } .auth-buddy-copy { margin:0; max-width:190px } .auth-buddy-copy strong { font-size:1rem } .auth-buddy-copy span:last-child { font-size:.7rem } .auth-stage .auth-card { padding:1.5rem } }
@media(max-width:360px) { .auth-buddy-copy span:last-child { display:none } .auth-buddy-scene { min-height:98px } .auth-buddy-scene morph-bot { width:88px; height:88px } .auth-stage .auth-card { padding:1.2rem } }
@media(max-width:650px) { .auth-buddy-ring { width:116px; height:116px; top:5px; left:calc(5% + 12px) } }
@media(max-width:360px) { .auth-buddy-ring { width:100px; height:100px; top:0 } }
@media(max-width:650px) { .auth-buddy-scene.buddy-loading::before { width:94px; height:94px; top:17px; left:13px } .auth-buddy-scene.buddy-loading::after { top:36px; left:34px; font-size:2.2rem } }
@media(max-width:650px) { .auth-buddy-scene.buddy-unavailable::before { width:94px; height:94px } }
@media(max-width:360px) { .auth-buddy-scene.buddy-loading::before { width:82px; height:82px; top:8px; left:16px } .auth-buddy-scene.buddy-loading::after { top:24px; left:34px; font-size:2rem } }
@media(max-width:360px) { .auth-buddy-scene.buddy-unavailable::before { width:82px; height:82px } }
@media(max-width:650px) and (max-height:680px) { .auth-stage { padding:6px 0; gap:3px } .auth-buddy-scene { min-height:86px } .auth-buddy-scene morph-bot { width:78px; height:78px } .auth-buddy-copy span:last-child { display:none } .auth-buddy-ring { width:92px; height:92px; top:-3px } .auth-buddy-scene.buddy-loading::before { width:74px; height:74px; top:6px } .auth-buddy-scene.buddy-loading::after { top:20px; font-size:1.8rem } .auth-stage .auth-card { padding:1.15rem } .auth-stage .auth-logo { margin-bottom:.8rem } .auth-stage .auth-tabs { margin-bottom:.8rem } }
@media(max-width:650px) { .auth-stage .auth-card,body.freev-apple .auth-stage .auth-card { padding:1.5rem } .auth-intro { margin-bottom:17px } .auth-stage .auth-tabs,body.freev-apple .auth-stage .auth-tabs { margin-bottom:17px } }
@media(max-width:650px) and (max-height:680px) { .auth-stage .auth-card,body.freev-apple .auth-stage .auth-card { padding:1.15rem } .auth-stage .auth-logo { margin-bottom:12px } .auth-intro { margin-bottom:13px } .auth-intro h2 { font-size:1.32rem } .auth-stage .auth-tabs,body.freev-apple .auth-stage .auth-tabs { margin-bottom:12px } .auth-trust { margin-top:11px } }
body.dark-mode .auth-stage .auth-card,body.freev-apple.dark-mode .auth-stage .auth-card { background:linear-gradient(145deg,#222c3c,#1d2532 65%,#202e38); border-color:#45536a }
body.dark-mode .auth-logo-mark { background:#283a51; box-shadow:inset 0 0 0 1px #465b74 }
body.dark-mode .auth-logo-text strong,body.dark-mode .auth-intro h2 { color:#f4f8ff }
body.dark-mode .auth-logo-text small,body.dark-mode .auth-intro p { color:#bac9d9 }
body.dark-mode .auth-stage .form-label { color:#e0e9f4 !important }
body.dark-mode .auth-stage .auth-tabs { background:#253347; border-color:#3c506b }
body.dark-mode .auth-stage .auth-tab.active { background:#344966; color:#e9f3ff }
body.dark-mode .auth-stage .form-input { background:#223044; border-color:#43546b; color:#f5f8ff }
body.dark-mode .auth-password-toggle { color:#b5c8e1 }
body.dark-mode .auth-password-toggle:hover,body.dark-mode .auth-password-toggle[aria-pressed="true"] { background:#334a66; color:#e8f3ff }
body.dark-mode .auth-caps-hint { color:#ffd18b }
body.dark-mode .auth-trust { background:#1e3c3d; border-color:#32615d }
body.dark-mode .auth-trust strong { color:#dcf9f0 }
body.dark-mode .auth-trust small { color:#add2cb }
@media(prefers-reduced-motion:reduce) { .auth-stage,.auth-stage .auth-card,.auth-buddy-aura,.auth-buddy-ring,.auth-buddy-scene morph-bot,.auth-buddy-scene.buddy-unavailable::before,.auth-buddy-scene.buddy-loading::before,.auth-buddy-scene.buddy-loading::after,.auth-stage .auth-error,.auth-stage .auth-success { animation:none !important } .auth-stage .auth-btn,.auth-stage .auth-tab,.auth-stage .form-input { transition:none !important } }