:root {
  --pink-2: #ff6faf;
  --pink-3: #ff4d9d;
  --lilac: #c78bff;
  --pink-deep: #d6337b;
  --glass-border: rgba(255, 255, 255, 0.55);
  --font: "Baloo 2", "PingFang SC", "Microsoft YaHei", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #ffe3f1 0%, #ffd0e8 40%, #f7c6ff 100%);
  color: #6b1f47; overflow: hidden; position: relative;
}
.bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: float 12s ease-in-out infinite; }
.b1 { width: 340px; height: 340px; background: var(--pink-2); top: -60px; left: -40px; }
.b2 { width: 300px; height: 300px; background: var(--lilac); bottom: -80px; right: -50px; animation-delay: -3s; }
.b3 { width: 240px; height: 240px; background: #ffb3d9; top: 40%; left: 60%; animation-delay: -6s; }
.b4 { width: 200px; height: 200px; background: #ffc8e6; top: 20%; left: 10%; animation-delay: -9s; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-30px) scale(1.08);} }

.sparkles { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.sparkles span { position: absolute; font-size: 20px; animation: rise linear infinite; opacity: .8; }
@keyframes rise { from { transform: translateY(0) rotate(0); opacity: 0;} 10%{opacity:.9;} to { transform: translateY(-110vh) rotate(360deg); opacity: 0;} }

.login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 380px;
  padding: 40px 32px 30px;
  text-align: center;
  border-radius: 34px;
  background: rgba(255, 245, 250, 0.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1.5px solid var(--glass-border);
  box-shadow: 0 24px 70px rgba(214, 51, 123, 0.42);
  animation: pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pop { from{opacity:0;transform:translateY(20px) scale(.9);} to{opacity:1;transform:translateY(0) scale(1);} }

.lock-emoji { font-size: 54px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(4deg);} }
.login-card h1 {
  font-size: 34px; font-weight: 800; margin: 6px 0 4px; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--pink-3), var(--lilac), var(--pink-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tip { font-size: 14px; color: var(--pink-deep); font-weight: 600; margin-bottom: 24px; }

.pw-wrap { position: relative; margin-bottom: 16px; }
#password {
  width: 100%; font-family: var(--font); font-size: 18px; letter-spacing: 3px; text-align: center;
  padding: 14px 44px 14px 16px; border-radius: 18px;
  border: 1.5px solid rgba(255,109,175,.35); background: rgba(255,255,255,.75);
  color: #6b1f47; outline: none; transition: border .2s, box-shadow .2s;
}
#password:focus { border-color: var(--pink-3); box-shadow: 0 0 0 4px rgba(255,109,175,.2); }
.toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; font-size: 18px; cursor: pointer; }

.btn-enter {
  width: 100%; border: none; cursor: pointer; font-family: var(--font); font-weight: 700; color: #fff;
  font-size: 18px; padding: 14px; border-radius: 999px;
  background: linear-gradient(135deg, var(--pink-2), var(--pink-3));
  box-shadow: 0 8px 22px rgba(255,77,157,.45), inset 0 -3px 0 rgba(0,0,0,.08);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.btn-enter:hover { transform: translateY(-3px) scale(1.04); }
.btn-enter:active { transform: scale(.94); }
.err { color: #d6337b; font-size: 13.5px; margin-top: 12px; font-weight: 600; }
.hearts { margin-top: 20px; font-size: 18px; letter-spacing: 4px; opacity: .8; }

.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }