:root{
  --bg1:#05051a;
  --bg2:#071229;
  --accent1:#6ee7ff;
  --accent2:#9b6bff
}
*{box-sizing:border-box}
html,body{
  height:100%;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:hidden;
  width:100%
}
body{
  margin:0;
  background:linear-gradient(120deg,var(--bg1),var(--bg2));
  color:#e6eef8;
  overflow:hidden
}
.animated-bg{
  position:fixed;
  inset:0;
  background:linear-gradient(60deg,rgba(155,107,255,0.06),rgba(110,231,255,0.04));
  filter:blur(60px);
  z-index:0
}
.rp-container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  position:relative;
  z-index:1;
  width:100%;
  overflow-x:hidden
}
.rp-card{
  width:100%;
  max-width:520px;
  padding:32px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.015));
  box-shadow:0 12px 50px rgba(2,6,23,0.6);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.05)
}
.rp-card h1{
  margin:0 0 6px;
  font-weight:700;
  font-size:1.6rem;
  color:#f3f7ff
}
.rp-card .sub{
  margin:0 0 18px;
  color:#bcd3ff
}
.input-group{
  position:relative;
  margin-bottom:14px
}
.input-group input{
  width:100%;
  max-width:100%;
  padding:12px 44px 12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  color:#eaf6ff;
  min-height:48px;
  font-size:16px;
  box-sizing:border-box
}
.eye-toggle{
  position:absolute;
  right:8px;
  top:6px;
  border:0;
  background:transparent;
  color:#cfeaff;
  padding:8px;
  border-radius:8px;
  cursor:pointer
}
.eye-toggle:focus{outline:2px solid rgba(155,107,255,0.18)}
.strength-wrapper{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px
}
.strength-bar{
  flex:1;
  height:10px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  overflow:hidden
}
.strength-bar::after{
  content:"";
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  transition:width .3s ease
}
.strength-text{
  min-width:120px;
  text-align:right;
  color:#9fbff0;
  font-size:0.9rem
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
  width:100%;
  min-height:48px
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#041025;
  box-shadow:0 10px 30px rgba(107,66,255,0.12);
  transition:transform .18s ease
}
.btn .spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(4,16,37,0.15);
  border-top-color:#fff;
  display:inline-block;
  opacity:0;
  transform:scale(.9);
  transition:opacity .18s
}
.btn.loading .spinner{
  opacity:1;
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.8));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50
}
.overlay.hidden{display:none}
.animated-message{margin-top:12px;min-height:28px}
.sr-only{
  position:absolute!important;
  height:1px;
  width:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media (max-width:768px){
  .rp-card{
    max-width:95%;
    padding:24px
  }
  .rp-card h1{font-size:1.4rem}
  .input-group input{
    padding:12px 44px 12px 12px;
    min-height:48px;
    font-size:16px
  }
}

@media (max-width:520px){
  .rp-container{padding:16px}
  .rp-card{
    padding:20px;
    border-radius:12px;
    margin:12px;
    width:100%
  }
  .rp-card h1{font-size:clamp(1.25rem,5vw,1.6rem)}
  .rp-card .sub{font-size:0.9rem}
  .input-group input{
    padding:12px 44px 12px 12px;
    min-height:48px;
    font-size:16px;
    -webkit-appearance:none;
    appearance:none
  }
  .strength-text{min-width:100px;font-size:0.85rem}
  .btn{
    min-height:48px;
    width:100%;
    font-size:1rem
  }
}

@media (max-width:375px){
  .rp-container{padding:12px}
  .rp-card{
    padding:16px;
    max-width:100%
  }
  .rp-card h1{font-size:clamp(1.125rem,4.5vw,1.4rem)}
  .input-group{margin-bottom:12px}
  .input-group input{
    padding:12px 40px 12px 12px;
    min-height:44px;
    font-size:16px
  }
  .eye-toggle{
    padding:6px;
    font-size:0.9rem
  }
  .strength-text{min-width:90px;font-size:0.8rem}
  .btn{
    min-height:44px;
    padding:12px;
    font-size:0.95rem
  }
}