.auth-body { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); }
.auth-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
.auth-mascot { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: -26px; z-index: 2; animation: fadeUp .5s var(--ease) both; }
.auth-mascot::before { content: ''; position: absolute; width: 240px; height: 240px; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 65%); z-index: -1; }
.auth-bubble { margin-bottom: 10px; max-width: 280px; text-align: center; padding: 10px 18px; min-height: 0; }
.auth-bubble.up::after { top: auto; bottom: -7px; transform: translateX(-50%) rotate(-45deg); }
.auth-card { width: 100%; padding: 40px 22px 22px; border-radius: var(--rlg); animation: fadeUp .5s .08s var(--ease) both; box-shadow: var(--shadow-lg); }
.auth-brand { text-align: center; margin-bottom: 20px; }
.brand-word { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(135deg, var(--fg), var(--accent-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-tag { color: var(--muted); font-size: 13px; }
.input-ic { position: relative; }
.input-ic > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.input-ic input { padding-right: 44px !important; }
.input-ic.input-btn input { padding-left: 50px !important; }
.remember { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; margin: 4px 0 16px; cursor: pointer; color: var(--fg2); }
.auth-err { margin-bottom: 12px; animation: fadeUp .2s ease; }
.auth-foot { margin-top: 18px; color: var(--muted); font-size: 12px; }
.otp-head { text-align: center; margin-bottom: 14px; }
.otp-title { font-weight: 800; font-size: 16px; }
.otp-input { text-align: center !important; font-size: 26px !important; letter-spacing: .5em; font-weight: 800; margin-bottom: 12px; }
@keyframes shakeX { 0%,100%{transform:none} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.shake { animation: shakeX .4s ease; }