/* ─── Auth Page Layout ───────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

.auth-bg{position:fixed;inset:0;background:
  radial-gradient(ellipse at 15% 85%, rgba(255,107,53,.18) 0%, transparent 55%),
  radial-gradient(ellipse at 85% 15%, rgba(124,58,237,.14) 0%, transparent 55%),
  var(--bg-primary);z-index:0}

/* Animated orbs */
.auth-orb{position:absolute;border-radius:50%;filter:blur(60px);animation:orb 8s ease-in-out infinite alternate;pointer-events:none}
.auth-orb-1{width:400px;height:400px;background:rgba(255,107,53,.08);top:-100px;left:-100px;animation-delay:0s}
.auth-orb-2{width:300px;height:300px;background:rgba(124,58,237,.1);bottom:-80px;right:-80px;animation-delay:3s}
.auth-orb-3{width:200px;height:200px;background:rgba(255,107,53,.06);top:50%;right:10%;animation-delay:1.5s}
@keyframes orb{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,20px) scale(1.1)}}

.auth-container{position:relative;z-index:1;width:100%;max-width:440px;padding:20px}

.auth-card{border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg),0 0 100px rgba(255,107,53,.08);animation:authCardIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes authCardIn{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ─── Logo ───────────────────────────────────────────── */
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo-icon{font-size:52px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 24px rgba(255,107,53,.6));animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.auth-logo h1{font-size:30px;font-weight:900;background:linear-gradient(135deg,var(--accent) 0%,#ff9a6c 40%,var(--accent-ai) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.auth-logo p{color:var(--text-subtle);font-size:14px}

/* ─── Tabs ───────────────────────────────────────────── */
.auth-tabs{display:flex;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-full);padding:4px;margin-bottom:28px;position:relative}
.auth-tab{flex:1;padding:9px 0;border-radius:var(--radius-full);font-size:14px;font-weight:600;color:var(--text-subtle);transition:color var(--tr-base);position:relative;z-index:1}
.auth-tab.active{color:var(--text-primary)}
.auth-tab-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--bg-card);border-radius:var(--radius-full);transition:transform var(--tr-base);border:1px solid var(--border-light)}
.auth-tab-pill.right{transform:translateX(100%)}

/* ─── Form ───────────────────────────────────────────── */
.auth-form{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.btn-auth{width:100%;height:48px;border-radius:var(--radius-md);font-size:15px;font-weight:700;margin-top:4px}

/* ─── Divider ────────────────────────────────────────── */
.auth-divider{display:flex;align-items:center;gap:16px;margin:20px 0;color:var(--text-subtle);font-size:13px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ─── Google Button ──────────────────────────────────── */
.btn-google{width:100%;height:48px;border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-light);color:var(--text-primary);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;transition:all var(--tr-base)}
.btn-google:hover{background:var(--bg-card);border-color:var(--border-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-google svg{flex-shrink:0}

/* ─── Footer ─────────────────────────────────────────── */
.auth-footer{text-align:center;color:var(--text-subtle);font-size:12px;margin-top:20px;line-height:1.7}

/* ─── Password toggle ────────────────────────────────── */
.pw-toggle{position:absolute;right:12px;color:var(--text-subtle);font-size:18px;transition:color var(--tr-fast);line-height:1;padding:4px}
.pw-toggle:hover{color:var(--text-primary)}