/* =====================================================
   login.css —— 登录页高科技感 UI + 3D 吉祥物
   覆盖 style.css 中的旧 .login-* 样式（用更高优先级选择器）
   ===================================================== */

/* ---------- 夜空渐变背景 ---------- */
#loginPage {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(130% 90% at 12% 0%, #40307e 0%, rgba(64,48,126,0) 55%),
    radial-gradient(120% 100% at 88% 16%, #83307c 0%, rgba(131,48,124,0) 52%),
    linear-gradient(158deg, #141033 0%, #221a52 34%, #382060 64%, #5c2160 100%);
}

#loginPage .login-bg {
  position: absolute; inset: 0; opacity: 1;
  background:
    radial-gradient(58% 44% at 50% 112%, rgba(255,120,165,.38), rgba(255,120,165,0) 70%),
    radial-gradient(40% 32% at 18% 82%, rgba(122,92,255,.28), rgba(122,92,255,0) 70%),
    radial-gradient(36% 30% at 82% 92%, rgba(255,88,150,.24), rgba(255,88,150,0) 70%);
  pointer-events: none;
}

/* 光斑（漂浮发光团） */
#loginPage::before,
#loginPage::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(58px); opacity: .55; pointer-events: none;
}
#loginPage::before {
  width: 300px; height: 300px; top: -90px; left: -70px;
  background: radial-gradient(circle, rgba(128,140,255,.4), transparent 70%);
  animation: loginFloatA 10s ease-in-out infinite;
}
#loginPage::after {
  width: 280px; height: 280px; bottom: -80px; right: -50px;
  background: radial-gradient(circle, rgba(255,110,185,.34), transparent 70%);
  animation: loginFloatB 12s ease-in-out infinite;
}

/* 星点层 */
#loginPage .login-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 16% 24%, #fff, transparent 62%),
    radial-gradient(1.2px 1.2px at 72% 12%, #fff, transparent 62%),
    radial-gradient(1.8px 1.8px at 84% 38%, #ffe9a8, transparent 62%),
    radial-gradient(1.1px 1.1px at 30% 56%, #fff, transparent 62%),
    radial-gradient(1.5px 1.5px at 58% 20%, #ffd6ec, transparent 62%),
    radial-gradient(1.2px 1.2px at 90% 70%, #fff, transparent 62%),
    radial-gradient(1.4px 1.4px at 8% 80%, #c9b6ff, transparent 62%),
    radial-gradient(1.1px 1.1px at 44% 82%, #fff, transparent 62%),
    radial-gradient(1.7px 1.7px at 64% 64%, #ffe9a8, transparent 62%),
    radial-gradient(1.1px 1.1px at 26% 8%, #fff, transparent 62%);
  opacity: .85;
  animation: loginTwinkle 4.5s ease-in-out infinite;
}

/* ---------- 玻璃拟态登录卡片 ---------- */
#loginPage .login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  padding: 28px 26px 24px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 24px 64px rgba(8,4,28,.5),
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 1px rgba(255,255,255,.03);
}

#loginPage .login-logo {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 8px;
  background: linear-gradient(135deg, #ffd86b, #ff7db3 70%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255,126,180,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
#loginPage .login-logo .mini-heart { color: #fff; font-size: 24px; text-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* 品牌标题「敏星」 */
#loginPage .login-brand {
  text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(115deg, #ffe9a8, #ff9ec4 52%, #a58bff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 26px rgba(255,158,196,.25);
}
#loginPage .login-title {
  color: #f4f1ff; font-size: 20px; font-weight: 700;
  text-align: center; margin: 6px 0 0;
}
#loginPage .login-sub {
  color: rgba(244,241,255,.6); font-size: 13px;
  text-align: center; margin: 4px 0 4px;
}

/* ---------- 3D 吉祥物 ---------- */
#loginPage .mascot {
  width: 148px; height: 150px; margin: 2px auto 4px;
  position: relative;
  filter: drop-shadow(0 14px 16px rgba(8,4,28,.35));
}
#loginPage .mascot-svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* 所有可动分组统一用 fill-box 定位原点 */
#loginPage .mascot .m-char,
#loginPage .mascot .m-body,
#loginPage .mascot .m-face,
#loginPage .mascot .m-eye,
#loginPage .mascot .m-pupil,
#loginPage .mascot .m-arm,
#loginPage .mascot .m-leg {
  transform-box: fill-box;
}
#loginPage .mascot .m-char { transform-origin: 50% 100%; }
#loginPage .mascot .m-body { transform-origin: 50% 100%; transition: transform .4s ease; }
#loginPage .mascot .m-face { transform-origin: 50% 50%; }
#loginPage .mascot .m-eye { transform-origin: 50% 50%; }
#loginPage .mascot .m-pupil { transition: transform .3s ease; }
#loginPage .mascot .m-arm { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }

/* 腮红 */
#loginPage .mascot .m-blush {
  fill: #ff9db0; opacity: .92;
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: fill .3s ease, transform .3s ease;
}

/* ===== 状态一：idle 偷看（默认 / 聚焦账号框） ===== */
/* 身体微微前倾（向输入框），眼睛看向侧下方 */
#loginPage .state-idle .m-body { transform: rotate(-2.5deg); }
#loginPage .state-idle .m-pupil-l,
#loginPage .state-idle .m-pupil-r { transform: translate(-3px, 4px); }

/* 三组循环：身体左右扭「偷看」+ 头小幅晃 + 眨眼 */
#loginPage .state-idle .m-char { animation: mIdleWobble 3.2s ease-in-out infinite; }
#loginPage .state-idle .m-face { animation: mHeadSway 3.6s ease-in-out infinite; }
#loginPage .mascot .m-eye { animation: mBlink 4.6s ease-in-out infinite; }

/* ===== 状态二：shy 害羞（聚焦密码框） ===== */
/* 站直、双手上移捂住眼睛、双脚交替跺脚、腮红加深 */
#loginPage .state-shy .m-body { transform: none; }
#loginPage .state-shy .m-pupil-l,
#loginPage .state-shy .m-pupil-r { transform: translate(0, 0); }
#loginPage .state-shy .m-arm-l { transform: translate(31px, -26px); }
#loginPage .state-shy .m-arm-r { transform: translate(-31px, -26px); }
#loginPage .state-shy .m-blush { fill: #ff6f95; opacity: 1; transform: scale(1.18); }

/* 身体上下抖 + 双脚交替跺脚（左右脚相位相反） */
#loginPage .state-shy .m-char { animation: mShyBounce .42s ease-in-out infinite; }
#loginPage .state-shy .m-leg-l { animation: mShyStompL .42s ease-in-out infinite; }
#loginPage .state-shy .m-leg-r { animation: mShyStompR .42s ease-in-out infinite; }
#loginPage .state-shy .m-eye { animation: none; } /* 眼睛被捂住，暂停眨眼 */

/* ---------- 动画 keyframes ---------- */
@keyframes mIdleWobble {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-3px) rotate(1.6deg); }
}
@keyframes mHeadSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes mBlink {
  0%, 46%, 55%, 100% { transform: scaleY(1); }
  49%, 52%           { transform: scaleY(.08); }
}
@keyframes mShyBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes mShyStompL {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes mShyStompR {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(0); }
}
@keyframes loginTwinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
@keyframes loginFloatA {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(30px, 22px); }
}
@keyframes loginFloatB {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-26px, -18px); }
}

/* ---------- 输入框 ---------- */
#loginPage .input {
  width: 100%; padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-size: 16px; color: #fff; margin-bottom: 12px;
  caret-color: #ff9ec4;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#loginPage .input::placeholder { color: rgba(255,255,255,.4); }
#loginPage .input:focus {
  outline: none;
  border-color: rgba(255,158,196,.9);
  background: rgba(255,255,255,.13);
  box-shadow: 0 0 0 3px rgba(255,158,196,.2), 0 0 24px rgba(255,158,196,.35);
}

/* ---------- 按钮 ---------- */
#loginPage .btn-primary {
  width: 100%; padding: 14px; border-radius: 14px;
  font-size: 16px; font-weight: 700; margin-top: 6px;
  color: #3a0e20; border: none;
  background: linear-gradient(120deg, #ffd86b, #ff9ec4 58%, #ff7db3);
  box-shadow: 0 10px 26px rgba(255,126,180,.42), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .15s, filter .2s, box-shadow .2s;
}
#loginPage .btn-primary:active {
  transform: translateY(1px) scale(.99);
  filter: brightness(1.05);
}

/* ---------- 切换 / 提示 ---------- */
#loginPage .login-switch {
  text-align: center; margin-top: 14px; font-size: 13px;
  color: rgba(255,255,255,.72);
}
#loginPage .login-switch b { color: #ff9ec4; cursor: pointer; }
#loginPage .login-tip {
  text-align: center; color: rgba(255,255,255,.46);
  font-size: 12px; margin-top: 14px;
}

/* ---------- 减弱动效：只保留静态姿势 ---------- */
@media (prefers-reduced-motion: reduce) {
  #loginPage .mascot *,
  #loginPage .login-stars,
  #loginPage::before,
  #loginPage::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 移动端 420px 优先适配 ---------- */
@media (max-width: 420px) {
  #loginPage .login-card { max-width: 100%; padding: 24px 20px 20px; border-radius: 24px; }
  #loginPage .mascot { width: 128px; height: 130px; }
  #loginPage .login-brand { font-size: 26px; }
}