*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  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;
}
.wrap{width:100%;max-width:400px;padding:32px 24px}
h1{font-size:28px;font-weight:700;letter-spacing:.02em;margin-bottom:8px}
.sub{color:#94a3b8;font-size:14px;margin-bottom:28px}
.field{margin-bottom:16px;position:relative}
.field input{
  width:100%;
  height:44px;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:0 14px;
  font-size:14px;
  background:#fff;
  color:#33364d;
  outline:none;
  transition:border-color .2s;
}
.field input:focus{border-color:#5a7cff}
.field .eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;color:#94a3b8;padding:4px;
}
.slider-box{
  height:44px;background:#f1f5f9;border-radius:6px;position:relative;
  user-select:none;overflow:hidden;margin-bottom:16px;border:1px solid #e2e8f0;
}
.slider-track-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:13px;pointer-events:none;z-index:1;
}
.slider-fill{
  position:absolute;left:0;top:0;bottom:0;width:44px;background:rgba(90,124,255,.18);
  z-index:0;transition:none;
}
.slider-btn{
  position:absolute;left:0;top:0;width:44px;height:44px;background:#fff;
  border-right:1px solid #e2e8f0;cursor:grab;display:grid;place-items:center;
  z-index:2;color:#5a7cff;font-size:16px;font-weight:700;
}
.slider-box.ok{background:#ecfdf5;border-color:#6ee7b7}
.slider-box.ok .slider-track-text{color:#059669}
.slider-box.ok .slider-fill{background:#a7f3d0;width:100%!important}
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px}
.row label{display:flex;align-items:center;gap:6px;color:#64748b;cursor:pointer}
.row a{color:#5a7cff;text-decoration:none}
.btn{
  width:100%;height:46px;border:0;border-radius:6px;background:#5a7cff;color:#fff;
  font-size:16px;font-weight:600;cursor:pointer;transition:background .2s;
}
.btn:hover{background:#4a6af0}
.btn:disabled{opacity:.6;cursor:not-allowed}
.foot{margin-top:24px;text-align:center;font-size:13px;color:#94a3b8}
.msg{margin-bottom:14px;font-size:13px;color:#ef4444;min-height:18px}
.msg.ok{color:#059669}
.panel{display:none}
.panel.active{display:block}