* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background: #fff;
  overflow: hidden;
}
.brand { position: fixed; left: 54px; top: 44px; font-size: 26px; color: #1e90ff; letter-spacing: 2px; }
.bubble { position: fixed; border-radius: 50%; background: rgba(102, 126, 234, .08); filter: blur(1px); }
.b1 { left: 45px; top: 185px; width: 100px; height: 100px; }
.b2 { right: 62px; top: 225px; width: 144px; height: 144px; }
.b3 { left: 45px; bottom: 145px; width: 150px; height: 150px; }
.b4 { right: 85px; bottom: 150px; width: 120px; height: 120px; }
.login-card {
  width: 345px;
  min-height: 442px;
  border: 1px solid #eef0f5;
  border-radius: 10px;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -45%);
  padding: 36px 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,.03);
  background: rgba(255,255,255,.94);
}
h1 { margin: 0 0 24px; font-size: 22px; font-weight: 500; }
input {
  width: 100%; height: 40px; margin-bottom: 18px; padding: 0 14px;
  border: 1px solid #e8ebf2; border-radius: 3px; outline: none; font-size: 14px;
}
input:focus { border-color: #1e90ff; box-shadow: 0 0 0 3px rgba(30,144,255,.08); }
.password-row { position: relative; }
.password-row button { position: absolute; right: 8px; top: 7px; border: 0; background: transparent; cursor: pointer; opacity: .45; }
.primary { width: 100%; height: 40px; background: #1e90ff; color: #fff; border: 0; border-radius: 3px; cursor: pointer; font-size: 15px; }
.primary:disabled { opacity: .65; cursor: not-allowed; }
.tip { min-height: 20px; color: #f04438; font-size: 13px; }