:root{
  --bg1:#1b0d2e;
  --bg2:#4b1a7a;
  --card:#2a0f47cc;
  --text:#ffffff;
  --muted:#cfc6ff;
  --btn:#7a2bff;
  --btn2:#5d1fd6;
  --err:#ff4b4b;
  --ok:#35d07f;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% -10%, #7a2bff55, transparent 60%),
              linear-gradient(180deg, var(--bg2), var(--bg1));
  min-height:100vh;
}
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:min(420px, 92vw);
  background:var(--card);
  border:1px solid #ffffff1a;
  border-radius:18px;
  padding:22px 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px #00000055;
}
h1{
  margin:0 0 6px 0;
  text-align:center;
  letter-spacing:1px;
}
.sub{
  text-align:center;
  color:var(--muted);
  margin-bottom:18px;
  font-size:14px;
}
.label{
  display:block;
  color:var(--muted);
  font-weight:600;
  margin:10px 0 8px;
  font-size:13px;
  letter-spacing:.4px;
}
.input{
  width:100%;
  border-radius:14px;
  border:1px solid #ffffff22;
  padding:14px 14px;
  font-size:15px;
  outline:none;
  background:#ffffff10;
  color:var(--text);
}
.input:focus{
  border-color:#7a2bff88;
  box-shadow: 0 0 0 4px #7a2bff22;
}
.btn{
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:14px;
  padding:14px 14px;
  font-size:15px;
  font-weight:800;
  color:white;
  background: linear-gradient(180deg, var(--btn), var(--btn2));
  cursor:pointer;
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.msg{
  margin-top:12px;
  min-height:18px;
  text-align:center;
  font-weight:700;
}
.msg.err{ color:var(--err); }
.msg.ok{ color:var(--ok); }

.footer{
  margin-top:14px;
  font-size:12px;
  opacity:.75;
}