:root{
  --bg1:#05051a;--bg2:#0b1226;--glass:rgba(255,255,255,0.04);
  --accent1:#6ee7ff;--accent2:#9b6bff;
  --glass-border:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{
  height:100%;
  font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',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(45deg,rgba(107,66,255,0.12),rgba(94,229,255,0.06));
  filter:blur(60px);
  transform:translateZ(0);
  z-index:0
}
.fp-container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  z-index:1;
  position:relative;
  width:100%;
  overflow-x:hidden
}
.fp-card{
  width:100%;
  max-width:460px;
  padding:32px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.015));
  box-shadow:0 8px 40px rgba(2,6,23,0.6);
  backdrop-filter: blur(10px);
  border:1px solid var(--glass-border);
  text-align:center
}
.fp-card h1{
  margin:0 0 6px;
  font-weight:700;
  font-size:1.6rem;
  color:#f3f7ff;
  text-shadow:0 2px 12px rgba(107,66,255,0.12)
}
.fp-card .sub{
  margin:0 0 18px;
  color:#bcd3ff;
  font-size:0.95rem
}
.input-group{
  position:relative;
  margin-bottom:16px
}
.input-group input{
  width:100%;
  max-width:100%;
  padding:14px 16px;
  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;
  outline:none;
  font-size:1rem;
  min-height:44px;
  box-sizing:border-box
}
.input-group input:focus{
  box-shadow:0 6px 28px rgba(107,66,255,0.08);
  border-color:rgba(155,107,255,0.55)
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
  min-height:48px;
  width:100%
}
.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,box-shadow .18s
}
.btn-primary:active{transform:translateY(1px)}
.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)}}
.animated-message{margin-top:12px;min-height:28px}
.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}
.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
}

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

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

@media (max-width:375px){
  .fp-container{padding:12px}
  .fp-card{
    padding:16px;
    max-width:100%
  }
  .fp-card h1{font-size:clamp(1.125rem,4.5vw,1.4rem)}
  .input-group{margin-bottom:12px}
  .input-group input{
    padding:12px;
    min-height:44px;
    font-size:16px
  }
  .btn{
    min-height:44px;
    padding:12px;
    font-size:0.95rem
  }
}