*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:#f5f6fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#33364d;
  padding:24px 16px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0));
}
.wrap{width:100%;max-width:400px}
h1{font-size:28px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.sub{color:#94a3b8;font-size:14px;margin-bottom:28px;line-height:1.5}
.field{margin-bottom:16px;position:relative}
.field input{
  width:100%;height:44px;border:1px solid #e2e8f0;border-radius:6px;
  padding:0 52px 0 14px;font-size:15px;background:#fff;color:#33364d;outline:none;
  -webkit-appearance:none;
}
.field input:focus{border-color:#5a7cff}
.field .eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;color:#5a7cff;font-size:12px;padding:6px 4px;
}
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px;gap:12px}
.row label{display:flex;align-items:center;gap:6px;color:#64748b;cursor:pointer}
.btn{
  width:100%;height:46px;border:0;border-radius:6px;background:#5a7cff;color:#fff;
  font-size:16px;font-weight:600;cursor:pointer;
}
.btn:hover{background:#4a6af0}
.btn:disabled{opacity:.6;cursor:not-allowed}
.foot{margin-top:24px;text-align:center;font-size:12px;color:#94a3b8;line-height:1.6}
.msg{margin-bottom:12px;font-size:13px;color:#ef4444;min-height:18px}
.msg.ok{color:#059669}
.panel{display:none}
.panel.active{display:block}
@media(max-width:480px){
  h1{font-size:24px}
  .field input{height:46px;font-size:16px}
  .btn{height:48px}
}