#auth { min-height: 100dvh; }
.auth-top { height: 50px; background: var(--bar); border-bottom: 3px solid var(--yellow); display: flex; align-items: center; padding: 0 22px; }
.auth-wrap { display: flex; flex-direction: column; align-items: center; padding: 34px 16px 40px; }
.auth-hero { display: flex; align-items: flex-end; gap: 14px; width: 100%; max-width: 380px; margin-bottom: 22px; }
.chick { width: 84px; height: 84px; flex: none; background: var(--chick) center / contain no-repeat; animation: hop 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) rotate(-4deg); } 80% { transform: translateY(-9px) rotate(3deg); } 90% { transform: translateY(0) rotate(-4deg); } }
.bubble { position: relative; background: var(--card); border: 2px solid var(--edge); border-radius: 16px 16px 16px 3px; padding: 11px 15px; box-shadow: 4px 4px 0 var(--shadow-c); font-weight: 600; margin-bottom: 14px; }
.auth-box { width: 100%; max-width: 380px; background: var(--card); border: 2px solid var(--edge); border-radius: 18px 22px 18px 20px; padding: 4px 22px 22px; box-shadow: 6px 6px 0 var(--shadow-c); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; padding: 0; background: none; border: 0; }
.auth-tabs button { padding: 9px; border: 2px solid var(--edge); border-radius: 10px; background: var(--card); font-weight: 800; color: var(--muted); }
.auth-tabs button.on { background: var(--yellow); color: #1f1b16; box-shadow: 3px 3px 0 var(--shadow-c); transform: rotate(-1deg); }
.auth-box .btn { width: 100%; padding: 11px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .chick { animation: none; } }