/* ===== 页面布局 ===== */
.auth-page{min-height:100vh;display:flex;}
.auth-left{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  background:#f5f5f5;padding:40px;position:relative;overflow:hidden;
}
.auth-right{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:2rem;background:#fff;
}
@media(max-width:900px){
  .auth-page{flex-direction:column;}
  .auth-left{display:none;}
  .auth-right{flex:none;width:100%;}
}

/* ===== 场景 ===== */
.scene-wrap{display:flex;align-items:flex-end;justify-content:center;flex:1;}
.scene{position:relative;width:480px;height:400px;}

/* ===== 角色通用 ===== */
.char{
  position:absolute;bottom:0;
  transition:transform 0.7s cubic-bezier(.4,.2,.2,1),height 0.7s cubic-bezier(.4,.2,.2,1);
  transform-origin:bottom center;cursor:pointer;
}

/* ===== 4 个角色 ===== */
.char-big{
  left:0;width:240px;height:200px;
  background:#ED6355;border-radius:120px 120px 0 0;z-index:3;
}

/* 密码输入时点头 */
@keyframes nod{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}
.scene.shy .char-big{animation:nod 0.7s ease-in-out infinite;}
.scene.shy .char-pill{animation:nod 0.85s ease-in-out infinite 0.15s;}
.scene.shy .char-dark{animation:nod 0.75s ease-in-out infinite 0.3s;}

/* 点击弹跳（用class避免干扰style.transition） */
@keyframes charBounce{
  0%{transform:translateY(0) scale(1);}
  30%{transform:translateY(-25px) scale(1.08) rotate(3deg);}
  60%{transform:translateY(-5px) scale(0.98);}
  100%{transform:translateY(0) scale(1);}
}
.char-bounce{animation:charBounce 0.45s ease !important;}

/* 随机小动作 */
@keyframes charWiggle{
  0%,100%{transform:rotate(0) translateY(0);}
  30%{transform:rotate(3deg) translateY(-5px);}
  70%{transform:rotate(-2deg) translateY(-3px);}
}
.char-wiggle{animation:charWiggle 0.5s ease !important;}
.char-tall{
  left:70px;width:180px;height:400px;
  background:#AB3282;border-radius:10px 10px 0 0;z-index:1;
}
.char-dark{
  left:220px;width:105px;height:300px;
  background:#00B4D8;border-radius:8px 8px 0 0;z-index:2;
}
.char-pill{
  left:300px;width:128px;height:225px;
  background:#EFA63A;border-radius:64px 64px 0 0;z-index:4;
}

/* ===== 眼睛容器 ===== */
.char-eyes{
  position:absolute;display:flex;align-items:center;
  transition:left 0.5s cubic-bezier(.4,.2,.2,1),top 0.5s cubic-bezier(.4,.2,.2,1);
}
.char-tall .char-eyes{gap:18px;left:50px;top:38px;}
.char-dark .char-eyes{gap:14px;left:28px;top:40px;}
.char-big  .char-eyes{gap:22px;left:78px;top:82px;}
.char-pill .char-eyes{gap:16px;left:38px;top:45px;}

/* ===== 白底眼球（高个+矮胖用） ===== */
.eyeball{
  width:18px;height:18px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:height 0.3s ease,width 0.3s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.pupil{
  width:7px;height:7px;background:#1a1a1a;border-radius:50%;
  transition:transform 0.1s ease-out;
}

/* ===== 纯黑圆点眼（大圆+药丸用） ===== */
.eye{
  width:12px;height:12px;background:#1a1a1a;border-radius:50%;
  transition:transform 0.1s ease-out,width 0.35s ease,height 0.35s ease;
}

/* ===== 嘴巴 ===== */
.char-mouth{position:absolute;pointer-events:none;}
.char-mouth svg{display:block;overflow:visible;}
.char-mouth path{
  transition:d 0.4s ease,fill 0.3s ease;
  stroke:#1a1a1a;stroke-width:2.5;stroke-linecap:round;fill:none;
}
.char-big  .char-mouth{left:95px;top:130px;transition:left 0.3s ease,top 0.3s ease;}
.char-tall .char-mouth{left:58px;top:72px;transition:left 0.3s ease,top 0.3s ease;}
.char-pill .char-mouth{left:24px;top:95px;transition:left 0.3s ease,top 0.3s ease;}

/* ===== 害羞 ===== */
.scene.shy .char-big .eye{width:11px;height:4px;}
.scene.shy .char-pill .eye{width:10px;height:3px;}
.scene.shy .eyeball{height:3px;}

/* ===== 开心跳 ===== */
@keyframes happyJump{
  0%,100%{transform:translateY(0);}
  20%{transform:translateY(-28px) scale(1.05);}
  40%{transform:translateY(-5px);}
  60%{transform:translateY(-16px) scale(1.03);}
  80%{transform:translateY(-2px);}
}
.scene.happy .char{animation:happyJump 0.9s ease;}

/* ===== 粒子 ===== */
.particle{position:absolute;opacity:0.18;pointer-events:none;animation:drift linear infinite;}
.p-hex{width:14px;height:14px;background:#AB3282;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  top:10%;left:8%;animation-duration:18s;}
.p-hex2{width:10px;height:10px;background:#41A98E;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  top:55%;right:10%;animation-duration:22s;animation-delay:3s;}
.p-cross{width:12px;height:12px;position:absolute;top:30%;right:18%;animation-duration:20s;animation-delay:1s;}
.p-cross::before,.p-cross::after{content:'';position:absolute;background:#ED6355;border-radius:1px;}
.p-cross::before{width:12px;height:3px;top:4.5px;left:0;}
.p-cross::after{width:3px;height:12px;top:0;left:4.5px;}
.p-dot{border-radius:50%;}
.p-dot1{width:6px;height:6px;background:#EFA63A;top:20%;right:28%;animation-duration:24s;animation-delay:2s;}
.p-dot2{width:4px;height:4px;background:#00B4D8;top:75%;left:20%;animation-duration:14s;animation-delay:4s;}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg);opacity:.18;}
  25%{transform:translate(20px,-30px) rotate(15deg);opacity:.3;}
  50%{transform:translate(-15px,-50px) rotate(-10deg);opacity:.12;}
  75%{transform:translate(25px,-20px) rotate(20deg);opacity:.3;}
  100%{transform:translate(0,0) rotate(0deg);opacity:.18;}
}

/* ===== 表单 ===== */
.auth-form-wrapper{width:100%;max-width:420px;padding:18px 0;}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:2rem;}
.auth-logo img{width:72px;height:72px;}
.auth-logo span{font-size:1.8rem;font-weight:700;color:#1e293b;letter-spacing:-0.5px;white-space:nowrap;}
.auth-form-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:.25rem;color:#1e293b;}
.auth-form-subtitle{text-align:center;color:#64748b;margin-bottom:1.5rem;font-size:.9rem;}
.auth-form-section{display:none;}
.auth-form-section.active{display:block;animation:fadeIn .3s ease;}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:.875rem;color:#64748b;}
.auth-footer a{color:#AB3282;text-decoration:none;font-weight:500;}
.auth-footer a:hover{text-decoration:underline;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.auth-messages{margin-bottom:1rem;}