.auth-page{overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
.auth-container{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{
  background:rgba(12,12,12,.95);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;padding:40px 36px;max-width:400px;width:100%;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  animation:fadeInUp .6s ease;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.auth-logo{
  font-size:40px;font-weight:800;text-align:center;
  letter-spacing:-.03em;margin-bottom:4px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.auth-tagline{
  text-align:center;color:#666;font-style:italic;
  font-size:13px;margin-bottom:32px;letter-spacing:.01em;
}
.auth-error{
  background:rgba(255,82,82,.08);border:1px solid rgba(255,82,82,.2);
  border-radius:var(--radius-sm);padding:10px 14px;color:#FF5252;font-size:13px;
  margin-bottom:16px;text-align:center;
}
.auth-form{display:flex;flex-direction:column;gap:14px}
.input-group{position:relative}
.input-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:15px;z-index:1;opacity:.6;
}
.input-group input{
  width:100%;padding:12px 16px 12px 44px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);color:var(--text);
  font-size:14px;transition:all .3s ease;
}
.input-group input:focus{
  outline:none;border-color:rgba(var(--primary-rgb),.4);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.06);
  background:rgba(255,255,255,.06);
}
.input-group input::placeholder{color:#444}
.auth-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border:none;border-radius:var(--radius-sm);color:#000;font-weight:700;
  font-size:15px;cursor:pointer;transition:all .2s ease;letter-spacing:.5px;
  margin-top:4px;
}
.auth-btn:hover{filter:brightness(1.1);box-shadow:0 4px 20px rgba(var(--primary-rgb),.3)}
.auth-btn:active{transform:scale(0.97)}
.auth-toggle{text-align:center;margin-top:20px;color:#666;font-size:13px}
.auth-toggle a{color:var(--primary);font-weight:600;transition:color .2s}
.auth-toggle a:hover{color:var(--primary-light)}
@media(max-width:480px){
  .auth-card{padding:30px 24px}
  .auth-logo{font-size:34px}
}