*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',Tahoma;
  background:linear-gradient(135deg,#3b82f6,#60a5fa,#fbbf24);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center
}
.container{
  background:#fff;
  padding:3rem;
  max-width:450px;
  width:100%;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)
}
.logo{text-align:center;margin-bottom:2rem}
.logo img{
  width:120px;
  height:120px;
  border-radius:50%;
  border:4px solid #3b82f6;
  object-fit:cover
}
.logo h1{color:#1e40af;margin-top:1rem}
.logo p{color:#64748b;font-size:.9rem}
.tabs{
  display:flex;
  border-bottom:2px solid #e5e7eb;
  margin-bottom:2rem
}
.tab{
  flex:1;
  padding:.75rem;
  border:none;
  background:none;
  cursor:pointer;
  font-weight:600;
  color:#64748b;
  border-bottom:3px solid transparent
}
.tab.active{
  color:#3b82f6;
  border-bottom-color:#3b82f6
}
.form-container{display:none}
.form-container.active{display:block}
form{
  display:flex;
  flex-direction:column;
  gap:1rem
}
label{font-weight:600;font-size:.9rem}
input{
  padding:.8rem;
  border-radius:10px;
  border:2px solid #e5e7eb;
  font-size:1rem
}
.password-wrapper{
  position:relative;
}
.password-wrapper .toggle-password{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:0.9rem;
  color:#3b82f6;
}
.password-strength{
  font-size:.8rem;
  padding:.3rem .5rem;
  border-radius:5px;
  color:#fff;
  width:fit-content;
  display:none;
}
.strength-weak{background:#f87171}
.strength-medium{background:#fbbf24}
.strength-strong{background:#34d399}
button{
  padding:.8rem;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer
}
.submit-btn{
  background:linear-gradient(135deg,#3b82f6,#60a5fa);
  color:#fff
}
.message{
  padding:.7rem;
  border-radius:8px;
  font-size:.9rem;
  text-align:center;
  display:none
}
.success{background:#d1fae5;color:#065f46}
.error{background:#fee2e2;color:#991b1b}