.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  position:relative
}
.auth-page::before,.auth-page::after{
  content:'';
  position:fixed;
  width:300px;height:300px;
  border-radius:50%;
  filter:blur(100px);
  opacity:.12;
  pointer-events:none;
  z-index:0
}
.auth-page::before{
  background:var(--accent);
  top:-100px;left:-100px
}
.auth-page::after{
  background:var(--accent-mid);
  bottom:-100px;right:-100px
}
.auth-container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:450px;
  padding:2.5rem;
  border-radius:24px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.06)
}
.auth-header{
  text-align:center;
  margin-bottom:2rem
}
.auth-header h2{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--primary-hover));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:.35rem
}
.auth-header p{
  font-size:.9rem;
  color:var(--text-dim)
}
.form-group{
  position:relative;
  margin-bottom:1rem
}
.form-group input{
  width:100%;
  padding:1rem 1rem 1rem 2.8rem;
  border-radius:12px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  font-size:.92rem;
  transition:border-color .35s var(--ease-smooth),box-shadow .35s var(--ease-smooth)
}
.form-group input:focus{
  border-color:var(--accent);
  box-shadow:0 0 20px rgba(184,200,216,.15)
}
.form-group input::placeholder{color:var(--text-muted)}
.form-group i{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:.95rem
}
.google-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:.85rem;
  border-radius:12px;
  background:#fff;
  color:#333;
  font-family:var(--font-display);
  font-size:.92rem;
  font-weight:600;
  transition:all .3s var(--ease-smooth);
  margin-bottom:0;
  border:none;
  cursor:pointer
}
.google-btn:hover{
  background:#f5f5f5;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,255,255,.15)
}
.google-icon{
  font-size:1.2rem;
  color:#4285F4
}
.divider{
  display:flex;
  align-items:center;
  margin:1.25rem 0;
  color:var(--text-muted);
  font-size:.8rem;
  gap:1rem
}
.divider::before,.divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,.08)
}
.otp-info{
  text-align:center;
  font-size:.9rem;
  color:var(--text-dim);
  margin-bottom:1.5rem;
  line-height:1.5
}
.otp-info strong{
  color:var(--text);
  font-weight:600
}
.main-back{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.06)
}
.forgot-link{
  text-align:right;
  margin-bottom:1.25rem
}
.forgot-link a{
  font-size:.82rem;
  color:var(--text-muted);
  transition:color .3s var(--ease-smooth)
}
.forgot-link a:hover{color:var(--accent)}
.auth-btn{
  width:100%;
  padding:1rem;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#788898);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.05em;
  transition:all .35s var(--ease-out-quart);
  margin-bottom:1.25rem;
  position:relative;
  overflow:hidden
}
.auth-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.08));
  opacity:0;
  transition:opacity .35s var(--ease-smooth)
}
.auth-btn:hover::after{opacity:1}
.auth-btn:hover{
  opacity:.92;
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(184,200,216,.25)
}

  font-size:1.3rem;
  letter-spacing:4px;
  margin:0 6px
}
.resend-link{
  text-align:center;
  font-size:.85rem;
  color:var(--text-dim);
  margin-top:.75rem
}
.resend-link a{
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  transition:color .2s
}
.resend-link a:hover{color:var(--accent-hover)}
.toggle-text{
  text-align:center;
  font-size:.88rem;
  color:var(--text-dim)
}
.toggle-text a{
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  transition:color .3s var(--ease-smooth)
}
.toggle-text a:hover{color:var(--accent-hover)}
.back-link{
  display:block;
  text-align:center;
  margin-top:1rem;
  font-size:.82rem;
  color:var(--text-muted);
  transition:color .2s
}
.back-link:hover{color:var(--accent)}
.toast-container{
  position:fixed;
  top:20px;right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.toast{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.25rem;
  border-radius:12px;
  min-width:320px;
  max-width:400px;
  backdrop-filter:blur(20px);
  background:rgba(8,10,14,.92);
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:slideIn .5s var(--ease-spring)
}
.toast.removing{animation:slideOut .35s var(--ease-out-quart) forwards}
.toast-icon{
  width:32px;height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  flex-shrink:0
}
.toast.success .toast-icon{background:rgba(0,255,136,.12);color:#00ff88}
.toast.error .toast-icon{background:rgba(255,82,130,.12);color:#ff5282}
.toast.info .toast-icon{background:var(--accent-dim);color:var(--accent)}
.toast-content{flex:1}
.toast-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-family:var(--font-mono);
  font-weight:600;
  margin-bottom:2px
}
.toast.success .toast-title{color:#00ff88}
.toast.error .toast-title{color:#ff5282}
.toast.info .toast-title{color:var(--accent)}
.toast-msg{font-size:.82rem;color:var(--text-dim)}
.toast-close{
  color:var(--text-muted);
  font-size:.9rem;
  cursor:pointer;
  padding:4px;
  transition:color .2s;
  flex-shrink:0
}
.toast-close:hover{color:var(--text)}
@keyframes slideIn{
  from{transform:translateX(120%) scale(.9);opacity:0}
  to{transform:translateX(0) scale(1);opacity:1}
}
@keyframes slideOut{
  to{transform:translateX(120%) scale(.9);opacity:0}
}
.loading-overlay{
  position:absolute;
  inset:0;
  background:rgba(5,5,5,.85);
  border-radius:24px;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
  opacity:0;
  transition:opacity .35s var(--ease-smooth)
}
.loading-overlay.show{
  display:flex;
  opacity:1;
}
.spinner{
  width:40px;height:40px;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:480px){
  .auth-page{padding:1rem}
  .auth-container{padding:1.5rem;border-radius:16px}
  .auth-header h2{font-size:1.3rem}
  .auth-header p{font-size:.82rem}
  .form-group input{padding:.85rem .85rem .85rem 2.4rem;font-size:.85rem}
  .auth-btn{padding:.85rem;font-size:.88rem}
  .toast-container{top:10px;right:10px;left:10px}
  .toast{min-width:0;max-width:100%;padding:.85rem 1rem;font-size:.8rem}
}