/* Auth (Login/Signup) Page */
.auth-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: #0b0f1a url('../airdrop-background/bg-1.jpg') center/cover no-repeat fixed; }
.auth-main { display: grid; place-items: center; padding: clamp(24px, 6vw, 48px) 16px; }
.auth-card { width: min(520px, 92vw); }
.auth-card-inner { position: relative; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius: 16px; padding: 20px; border: 1.5px solid rgba(255, 170, 0, 0.6); box-shadow: 0 10px 34px -16px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08); outline: 2px solid rgba(255, 140, 0, 0.25); outline-offset: -6px; }
.auth-card-inner h1 { margin: 4px 0 6px; font-size: clamp(20px, 4.4vw, 28px); color: #f8fafc; }
.auth-card-inner .muted { margin: 0 0 14px; color: #cfd7e3; font-size: .95rem; }
.auth-forms { display: grid; gap: 12px; }
.divider { display: grid; place-items: center; color: #9fb1c6; font-size: .9rem; }
.divider span { position: relative; padding: 0 10px; }
.divider span::before, .divider span::after { content: ""; position: absolute; top: 50%; width: 120px; height: 1px; background: rgba(255,255,255,0.12); }
.divider span::before { right: 100%; }
.divider span::after { left: 100%; }
.email-form { display: grid; gap: 10px; }
.field { display: grid; gap: 6px; }
.field span { color: #cfd7e3; font-weight: 600; font-size: .9rem; }
.field input { background: rgba(0,0,0,0.35); color: #e8edf4; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 12px; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.field input:focus { border-color: #ffb347; box-shadow: 0 0 0 3px rgba(255,179,71,.18), inset 0 1px 0 rgba(255,255,255,0.06); }

/* Flip card */
.auth-flip { position: relative; perspective: 1200px; min-height: 460px; }
.auth-flip .face { position: absolute; inset: 0; padding: 4px; backface-visibility: hidden; transform-style: preserve-3d; transition: transform .6s ease; }
.auth-flip .face-signup { transform: rotateY(180deg); }
.auth-flip.flipped .face-login { transform: rotateY(180deg); }
.auth-flip.flipped .face-signup { transform: rotateY(360deg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 10px 12px; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); color: #0b0f1a; font-weight: 800; background: #ffd84d; }
.btn-ghost { background: transparent; color: #e8edf4; border-color: rgba(255,255,255,0.22); }
.btn-secondary { background: linear-gradient(135deg, #ffd699, #ff9f1a 50%, #ff6a00); color: #0b0f1a; border-color: #e6c43f; }
.btn-primary.btn-google { background: #fff; color: #202124; border-color: #dadce0; }
.btn-primary.btn-google svg { display: inline-block; }

/* Alerts */
.auth-error { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 90, 90, .35); color: #ffd6d6; background: rgba(255, 60, 60, .12); }
.auth-success { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(124,252,152,.35); color: #7CFC98; background: rgba(124,252,152,.12); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-google { gap: 10px; border-radius: 999px; }
.auth-error { margin-top: 8px; color: #ffb4b4; background: rgba(255,0,0,0.08); border: 1px solid rgba(255,0,0,0.25); padding: 8px 10px; border-radius: 8px; }
.auth-state { display: grid; gap: 12px; }
.user-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.4); }
.user-name { font-weight: 800; color: #f8fafc; }
.user-email { color: #cfd7e3; font-size: .95rem; }
.state-actions { display: flex; gap: 10px; }