static/auth.css

*{ margin:0; padding:0; box-sizing:border-box; font-family:Segoe UI; }
body{
  background:#050816;
  overflow:hidden;
  color:white;
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(59,130,246,0.08), transparent 30%);
  z-index:-1;
}

.auth-container{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.auth-box{
  width:420px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:32px;
  padding:50px;
  backdrop-filter:blur(20px);
  text-align:center;
  animation:authFade 0.4s ease;
}
@keyframes authFade{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

.logo{
  font-size:36px;
  color:#22c55e;
  margin-bottom:30px;
  font-weight:bold;
}

.auth-box h1{
  font-size:42px;
  margin-bottom:12px;
}

.auth-box p{
  color:rgba(255,255,255,0.65);
  margin-bottom:35px;
}

.auth-box input{
  width:100%;
  padding:18px;
  border:none;
  outline:none;
  border-radius:18px;
  margin-bottom:20px;
  background:rgba(255,255,255,0.05);
  color:white;
  font-size:15px;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.2s;
}
.auth-box input:focus{
  border-color:rgba(34,197,94,0.3);
  background:rgba(255,255,255,0.08);
}
.auth-box input::placeholder{
  color:rgba(255,255,255,0.45);
}

.auth-box button{
  width:100%;
  padding:18px;
  border:none;
  border-radius:18px;
  background:#22c55e;
  color:black;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:0.25s;
}
.auth-box button:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(34,197,94,0.3);
}
.auth-box button:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}

.switch-auth{
  margin-top:25px;
  color:rgba(255,255,255,0.6);
}
.switch-auth a{
  color:#22c55e;
  text-decoration:none;
  font-weight:600;
}
.switch-auth a:hover{
  text-decoration:underline;
}

.password-wrap{
  position:relative;
  width:100%;
  margin-bottom:20px;
}
.password-wrap input{
  margin-bottom:0;
  padding-right:50px;
}
.password-wrap .pw-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  color:rgba(255,255,255,0.4);
  font-size:16px;
  cursor:pointer;
  transition:0.2s;
  padding:0;
  line-height:1;
}
.password-wrap .pw-toggle:hover{
  background:rgba(34,197,94,0.1);
  border-color:rgba(34,197,94,0.2);
  color:#22c55e;
}

@media(max-width:500px){
  .auth-box{
    padding:30px 24px;
    border-radius:24px;
  }
  .auth-box h1{
    font-size:32px;
  }
}

body.dark{ background:#050816; }
body.emerald{ background:#021b12; }
body.emerald .logo{ color:#22c55e; }
body.emerald button{ background:#22c55e; }
body.blue{ background:#07111f; }
body.blue .logo{ color:#3b82f6; }
body.blue button{ background:#3b82f6; color:white; }