.auth-c{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--pri-600),var(--pri-800));
  padding:20px;
  position:relative;
  overflow:hidden
}
.auth-c::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 50%);
  animation:float 20s ease-in-out infinite
}
.auth-c::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:0.5;
  animation:patternMove 60s linear infinite
}
@keyframes float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(30px,-30px)}
}
@keyframes patternMove{
  from{background-position:0 0}
  to{background-position:60px 60px}
}
.auth-card{
  background:var(--card);
  border-radius:var(--r-xl);
  padding:48px 40px;
  width:100%;
  max-width:440px;
  box-shadow:var(--sh-2xl);
  animation:su var(--trans-smooth);
  position:relative;
  z-index:1;
  border:1px solid rgba(255,255,255,0.1)
}
.auth-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--pri-400),var(--pri-600),var(--pri-400));
  border-radius:var(--r-xl) var(--r-xl) 0 0
}
@keyframes su{
  from{opacity:0;transform:translateY(24px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.auth-logo{
  display:flex;
  justify-content:center;
  margin-bottom:32px
}
.auth-logo img{
  height:48px;
  border-radius:12px;
  box-shadow:var(--sh-pri-lg);
  transition:var(--trans-smooth)
}
.auth-logo img:hover{
  transform:scale(1.05) rotate(2deg)
}
.auth-title{
  font-size:28px;
  font-weight:var(--font-extrabold);
  text-align:center;
  margin-bottom:8px;
  color:var(--tx);
  letter-spacing:-0.5px
}
.auth-sub{
  font-size:14px;
  color:var(--tx2);
  text-align:center;
  margin-bottom:32px;
  line-height:var(--leading-relaxed)
}
.fg{
  margin-bottom:20px;
  position:relative
}
.fg label{
  display:block;
  font-size:13px;
  font-weight:var(--font-semibold);
  margin-bottom:8px;
  color:var(--tx);
  transition:var(--trans-fast)
}
.fi{
  width:100%;
  padding:14px 16px;
  border:2px solid var(--brd);
  border-radius:var(--r);
  font-size:14px;
  font-family:Inter,sans-serif;
  color:var(--tx);
  background:var(--bg);
  outline:none;
  transition:var(--trans-base);
  font-weight:var(--font-medium);
  position:relative
}
.fi::placeholder{
  color:var(--tx3);
  transition:var(--trans-fast)
}
.fi:focus{
  border-color:var(--pri);
  background:var(--card);
  box-shadow:0 0 0 4px rgba(79,70,229,0.1);
  transform:translateY(-1px)
}
.fi:focus::placeholder{
  color:transparent
}
.fi:hover:not(:focus){
  border-color:var(--slate-300)
}
.fi:focus+label{
  color:var(--pri)
}
.fi.error{
  border-color:var(--dan);
  background:var(--dan-50)
}
.fi.error:focus{
  box-shadow:0 0 0 4px rgba(239,68,68,0.1)
}
.fi.success{
  border-color:var(--acc);
  background:var(--acc-50)
}
.fi.success:focus{
  box-shadow:0 0 0 4px rgba(16,185,129,0.1)
}
textarea.fi{
  resize:vertical;
  min-height:80px;
  line-height:var(--leading-normal)
}
select.fi{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
  cursor:pointer
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border:none;
  border-radius:var(--r);
  font-size:14px;
  font-weight:var(--font-semibold);
  font-family:Inter,sans-serif;
  cursor:pointer;
  transition:var(--trans-base);
  outline:none;
  position:relative;
  overflow:hidden;
  user-select:none
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);
  opacity:0;
  transition:var(--trans-fast)
}
.btn:hover::before{
  opacity:1
}
.btn:active{
  transform:scale(0.98)
}
.btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none
}
.btn-p{
  background:linear-gradient(135deg,var(--pri-600),var(--pri-700));
  color:#fff;
  width:100%;
  padding:14px;
  font-size:15px;
  font-weight:var(--font-bold);
  box-shadow:var(--sh-pri-lg);
  position:relative
}
.btn-p::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--r);
  padding:2px;
  background:linear-gradient(135deg,rgba(255,255,255,0.3),transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:var(--trans-fast)
}
.btn-p:hover{
  background:linear-gradient(135deg,var(--pri-700),var(--pri-800));
  box-shadow:0 8px 24px rgba(79,70,229,0.45);
  transform:translateY(-2px)
}
.btn-p:hover::after{
  opacity:1
}
.btn-d{
  background:linear-gradient(135deg,var(--dan-500),var(--dan-600));
  color:#fff;
  box-shadow:var(--sh-dan)
}
.btn-d:hover{
  background:linear-gradient(135deg,var(--dan-600),var(--dan-700));
  box-shadow:0 6px 20px rgba(239,68,68,0.4);
  transform:translateY(-2px)
}
.btn-s{
  background:linear-gradient(135deg,var(--acc-500),var(--acc-600));
  color:#fff;
  box-shadow:var(--sh-acc-lg)
}
.btn-s:hover{
  background:linear-gradient(135deg,var(--acc-600),var(--acc-700));
  box-shadow:0 6px 20px rgba(16,185,129,0.4);
  transform:translateY(-2px)
}
.btn-o{
  background:transparent;
  border:2px solid var(--brd);
  color:var(--tx2)
}
.btn-o:hover{
  border-color:var(--pri);
  color:var(--pri);
  background:var(--pri-50);
  transform:translateY(-1px)
}
.btn-sm{
  padding:10px 16px;
  font-size:13px;
  border-radius:var(--r-sm)
}
.btn-icon{
  width:40px;
  height:40px;
  padding:0;
  border-radius:var(--r)
}
.btn-loading{
  position:relative;
  color:transparent;
  pointer-events:none
}
.btn-loading::after{
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin:24px 0;
  color:var(--tx3);
  font-size:13px;
  font-weight:var(--font-medium)
}
.divider::before,
.divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--brd)
}
.btn-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 24px;
  border:2px solid var(--brd);
  border-radius:var(--r);
  background:var(--card);
  color:var(--tx);
  font-size:14px;
  font-weight:var(--font-semibold);
  font-family:Inter,sans-serif;
  cursor:pointer;
  transition:var(--trans-base);
  outline:none
}
.btn-google:hover{
  border-color:var(--slate-400);
  background:var(--slate-50);
  transform:translateY(-1px);
  box-shadow:var(--sh)
}
.btn-google:active{
  transform:scale(0.98)
}
.google-icon{
  width:18px;
  height:18px;
  flex-shrink:0
}
.auth-ft{
  text-align:center;
  margin-top:28px;
  font-size:14px;
  color:var(--tx2)
}
.auth-ft a{
  color:var(--pri);
  font-weight:var(--font-semibold);
  text-decoration:none;
  transition:var(--trans-fast);
  position:relative
}
.auth-ft a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--pri);
  transition:var(--trans-base)
}
.auth-ft a:hover::after{
  width:100%
}