/* ═══════════════════════════════════════════════════════════
   PlugNest — Auth pages (signup / login / forgot / reset)
   Animated card, moving gradient border, floating orbs,
   shimmer button, icon fields with eye toggle.
   ═══════════════════════════════════════════════════════════ */

.pn-auth-wrap{position:relative;max-width:470px;margin:0 auto;z-index:1}

/* ── Floating background orbs (continuous drift) ── */
.pn-auth-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.30;pointer-events:none;z-index:0}
.pn-auth-orb.o1{width:260px;height:260px;top:-60px;left:-100px;background:#7c3aed;animation:pn-drift1 11s ease-in-out infinite}
.pn-auth-orb.o2{width:220px;height:220px;bottom:-40px;right:-90px;background:#3b82f6;animation:pn-drift2 13s ease-in-out infinite}
.pn-auth-orb.o3{width:150px;height:150px;top:40%;right:-70px;background:#ec4899;animation:pn-drift1 9s ease-in-out infinite reverse}
@keyframes pn-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-22px) scale(1.12)}}
@keyframes pn-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,20px) scale(0.92)}}

/* ── Card with continuously rotating gradient border ── */
.pn-auth-frame{position:relative;border-radius:22px;padding:2px;overflow:hidden;z-index:1}
.pn-auth-frame::before{
  content:'';position:absolute;top:50%;left:50%;width:220%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(transparent 0deg,#7c3aed 70deg,#60a5fa 140deg,#ec4899 220deg,transparent 320deg);
  animation:pn-rotate 6s linear infinite;
}
@keyframes pn-rotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pn-auth-card{
  position:relative;background:rgba(11,11,26,0.96);border-radius:20px;
  padding:34px 30px;z-index:1;backdrop-filter:blur(8px);
}

/* ── Bouncing hero emoji ── */
.pn-auth-emoji{font-size:46px;display:inline-block;animation:pn-bob 3s ease-in-out infinite}
@keyframes pn-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(5deg)}}

/* ── Fields ── */
.pn-field{position:relative;margin-bottom:18px}
.pn-field label{
  font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.6px;display:block;margin-bottom:7px;transition:color .25s;
}
.pn-field:focus-within label{color:#a78bfa}
.pn-input{
  width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);
  border-radius:12px;color:#fff;font-size:14px;padding:13px 44px 13px 42px;
  outline:none;transition:border-color .25s,box-shadow .25s,background .25s,transform .2s;
}
.pn-field:hover .pn-input{border-color:rgba(124,58,237,0.45)}
.pn-input:focus{
  border-color:#7c3aed;background:rgba(124,58,237,0.06);
  box-shadow:0 0 0 3px rgba(124,58,237,0.16),0 4px 24px rgba(124,58,237,0.12);
}
.pn-fld-icon{
  position:absolute;left:14px;bottom:13px;font-size:15px;color:rgba(255,255,255,0.35);
  transition:color .25s,transform .25s;pointer-events:none;
}
.pn-field:focus-within .pn-fld-icon{color:#a78bfa;transform:scale(1.15)}

/* ── Eye toggle ── */
.pn-eye{
  position:absolute;right:8px;bottom:6px;width:34px;height:34px;border:none;
  background:transparent;color:rgba(255,255,255,0.4);font-size:16px;cursor:pointer;
  border-radius:9px;transition:color .2s,background .2s;display:flex;align-items:center;justify-content:center;
}
.pn-eye:hover{color:#a78bfa;background:rgba(124,58,237,0.12)}

/* ── Agree checkbox row (properly aligned) ── */
.pn-agree{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:13px;color:rgba(255,255,255,0.7);line-height:1.65;margin-bottom:20px;
}
.pn-agree input{margin-top:3px;flex-shrink:0;accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.pn-agree span{display:inline}
.pn-agree a{color:#a78bfa;text-decoration:none;font-weight:600}
.pn-agree a:hover{text-decoration:underline}

/* ── Shimmer button ── */
.pn-auth-btn{
  position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:13px;
  color:#fff;font-size:15px;font-weight:800;padding:15px 20px;cursor:pointer;
  box-shadow:0 4px 22px rgba(124,58,237,0.35);
  transition:transform .2s,box-shadow .25s;
}
.pn-auth-btn::after{
  content:'';position:absolute;top:0;left:-160%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);animation:pn-sheen 3.2s ease-in-out infinite;
}
@keyframes pn-sheen{0%{left:-160%}55%{left:160%}100%{left:160%}}
.pn-auth-btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(124,58,237,0.5)}
.pn-auth-btn:active{transform:translateY(0)}
.pn-auth-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* ── Trust chips ── */
.pn-auth-chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.pn-auth-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:rgba(255,255,255,0.65);background:rgba(255,255,255,0.04);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;
  transition:transform .2s,border-color .2s,color .2s;
}
.pn-auth-chip:hover{transform:translateY(-2px);border-color:rgba(124,58,237,0.5);color:#fff}

/* ── Alerts ── */
.pn-auth-err,.pn-auth-ok{display:none;margin-top:14px;padding:12px 16px;border-radius:11px;font-size:13px;line-height:1.5}
.pn-auth-err{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);color:#fca5a5;animation:pn-shake .4s}
.pn-auth-ok{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:#6ee7b7}
@keyframes pn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ── Staggered entrance ── */
.pn-auth-card .pn-field,.pn-auth-card .pn-agree,.pn-auth-card .pn-auth-btn{
  animation:pn-rise .55s cubic-bezier(.22,1,.36,1) backwards;
}
.pn-auth-card .pn-field:nth-of-type(1){animation-delay:.05s}
.pn-auth-card .pn-field:nth-of-type(2){animation-delay:.12s}
.pn-auth-card .pn-field:nth-of-type(3){animation-delay:.19s}
.pn-auth-card .pn-agree{animation-delay:.26s}
.pn-auth-card .pn-auth-btn{animation-delay:.33s}
@keyframes pn-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}