/* =========================================================
   小豹快跑 · 登录页美化（四个小人 / 四角色）
   纯 CSS 造型 + 动画。交互逻辑见 /js/login-anim.js
   ========================================================= */

/* ---------- 背景：柔和动态渐变 + 漂浮光斑 ---------- */
.login-body {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e6f4ff 0%, #eef6ff 45%, #eafaf7 100%);
}
.login-body::before,
.login-body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.login-body::before {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #ffb27a 0%, transparent 70%);
  top: -120px; left: -90px;
  animation: float-a 14s ease-in-out infinite;
}
.login-body::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #9ec6ff 0%, transparent 70%);
  bottom: -150px; right: -110px;
  animation: float-b 18s ease-in-out infinite;
}
@keyframes float-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes float-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-30px); } }

/* ---------- 卡片：桶装水造型 ---------- */
.login-card {
  z-index: 1;
  width: 380px;
  /* 锁死宽高比：窗口缩放时桶形按比例整体缩小，不再被拉胖变形（objectBoundingBox 裁切会随比例拉伸） */
  aspect-ratio: 380 / 516;
  /* 顶部留瓶口收窄区；底部留大段给收窄瓶颈，确保表单落在直身安全区（不被裁切） */
  padding: 70px 34px 100px;
  position: relative;
  /* 桶装水轮廓由 SVG clipPath（objectBoundingBox）裁切，随卡片自适应缩放 */
  clip-path: url(#jugClip);
  /* 毛玻璃：半透明白底 + 背景模糊，水色光斑透出形成通透质感（与全局玻璃风格统一） */
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  /* 桶身高光描边（inset 阴影会被 clip-path 保留，外发光仍由下方 drop-shadow 提供） */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  /* 阴影改用 drop-shadow，才会贴合桶形轮廓 */
  filter:
    drop-shadow(0 18px 30px rgba(37, 99, 235, 0.18))
    drop-shadow(0 6px 12px rgba(20, 24, 40, 0.10));
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 用一个内部容器承载内容 */
.login-card > .card-inner {
  display: block;
  position: relative;
  z-index: 1;
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 外壳：承载卡片 + 底部瓶口；瓶口为独立元素，避免被卡片 clip-path 裁切 */
.login-card-shell { position: relative; flex: 0 0 auto; z-index: 1; }
.login-card-mouth {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(46px, 15vw, 58px);
  height: clamp(34px, 11vw, 42px);
  /* 与桶身（登录卡片）一致的纯白玻璃质感 */
  background: var(--panel, #ffffff);
  border-radius: 5px 5px 14px 14px;
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.06),
    inset 0 -6px 9px rgba(0, 0, 0, 0.07),
    0 10px 18px rgba(20, 24, 40, 0.12);
  z-index: 0;
}
/* 瓶口左侧圆柱高光，增强体积感 */
.login-card-mouth::after {
  content: "";
  position: absolute;
  top: 5px; left: 11%;
  width: 16%; height: calc(100% - 13px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  border-radius: 6px;
  filter: blur(1px);
  pointer-events: none;
}

/* 覆盖全局 style.css 的 .login-card::before 橙色品牌条（height:6px + background:var(--brand-grad)） */
.login-card::before { display: none; }

/* 桶装水质感：蓝色水位线移到桶身「上方」（模拟倒扣水桶——蓝水在桶身、瓶颈在下） */
.login-card::after {
  content: "";
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: 44%;
  background: linear-gradient(180deg,
    rgba(37, 99, 235, 0.16) 0%,
    rgba(59, 130, 246, 0.10) 45%,
    rgba(59, 130, 246, 0.02) 100%
  );
  border-radius: 40% 40% 0 0 / 20% 20% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 登录舞台：大屏左一排小人右卡片；小屏小人上卡片下 ---------- */
.login-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 24px;
}
.login-mascots {
  --m-size: clamp(74px, 9vw, 112px);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 26px);
  flex: 0 0 auto;
}

/* ---------- 水主题卡通小人：桶装水 / 瓶装水 / 饮水机 ---------- */
.mascot {
  position: relative;
  width: calc(var(--m-size, 88px) * 1.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  /* 贴合桶形轮廓的投影（clip-path 会裁掉 body 外阴影，故由外层补回） */
  filter: drop-shadow(0 calc(var(--m-size, 88px) * 0.12) calc(var(--m-size, 88px) * 0.22) rgba(20, 40, 80, 0.18));
}
.mascot-body {
  position: relative;
  width: var(--m-size, 88px);
  height: calc(var(--m-size, 88px) * 1.06);
  background: var(--m-color, #3b82f6);
  box-shadow: inset 0 calc(var(--m-size) * -0.1) calc(var(--m-size) * 0.18) rgba(0, 0, 0, 0.12), inset 0 calc(var(--m-size) * 0.1) calc(var(--m-size) * 0.18) rgba(255, 255, 255, 0.32), 0 calc(var(--m-size) * 0.13) calc(var(--m-size) * 0.26) rgba(0, 0, 0, 0.14);
  animation: bob 3.2s ease-in-out infinite;
}
.mascot:nth-child(1) .mascot-body { animation-delay: 0s; }
.mascot:nth-child(2) .mascot-body { animation-delay: -0.7s; }
.mascot:nth-child(3) .mascot-body { animation-delay: -1.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 脸 */
.mascot-face { position: absolute; inset: 0; }

/* 腮红 */
.mascot-face::before,
.mascot-face::after {
  content: "";
  position: absolute;
  bottom: 23%;
  width: calc(var(--m-size) * 0.17);
  height: calc(var(--m-size) * 0.10);
  background: rgba(255, 120, 140, 0.5);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}
.mascot-face::before { left: 10%; }
.mascot-face::after { right: 10%; }

.eye {
  position: absolute;
  top: 37%;
  z-index: 2;
  width: calc(var(--m-size) * 0.26);
  height: calc(var(--m-size) * 0.28);
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05);
  transition: transform 0.09s ease-out;
}
.eye-l { left: 14%; }
.eye-r { right: 14%; }
.pupil {
  position: absolute;
  top: 52%; left: 50%;
  width: calc(var(--m-size) * 0.15);
  height: calc(var(--m-size) * 0.15);
  background: #2a2230;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.07s linear;
}
.pupil::after {
  content: "";
  position: absolute;
  top: 12%; left: 12%;
  width: 38%; height: 38%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
}
.mouth {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: calc(var(--m-size) * 0.18);
  height: calc(var(--m-size) * 0.10);
  border: calc(var(--m-size) * 0.028) solid #5b3a1a;
  border-top: none;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
  transition: all 0.2s ease;
}

/* 眨眼 */
.mascot.blink .eye { transform: scaleY(0.12); }

/* ===== 桶装水 (jug) —— 外形对齐登录框的桶装水瓶轮廓，更大 ===== */
.mascot[data-type="jug"] { --m-color: linear-gradient(165deg, #60a5fa, #2563eb); }
.mascot[data-type="jug"] .mascot-body {
  width: var(--m-size);
  height: calc(var(--m-size) * 1.06);
  clip-path: url(#jugClipUp);
}
/* 桶身腰环（两道浅色横纹） */
.m-jug-rings {
  position: absolute; left: 7%; right: 7%; top: 54%; height: calc(var(--m-size) * 0.26);
  pointer-events: none;
}
.m-jug-rings::before,
.m-jug-rings::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(var(--m-size) * 0.035);
  background: rgba(255, 255, 255, 0.5); border-radius: 2px;
}
.m-jug-rings::before { top: 0; }
.m-jug-rings::after { bottom: 0; }

/* ===== 瓶装水 (bottle) —— 同桶装水瓶轮廓，更小、更瘦高 ===== */
.mascot[data-type="bottle"] { --m-color: linear-gradient(165deg, rgba(186, 230, 253, 0.95), rgba(56, 189, 248, 0.92)); }
.mascot[data-type="bottle"] .mascot-body {
  width: calc(var(--m-size) * 0.72);
  height: calc(var(--m-size) * 1.20);
  clip-path: url(#jugClipUp);
}
/* 瓶身竖棱 */
.m-bottle-ridges {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(var(--m-size) * 0.12),
    rgba(255, 255, 255, 0.42) calc(var(--m-size) * 0.12) calc(var(--m-size) * 0.14));
}

/* ===== 饮水机 (dispenser) ===== */
.mascot[data-type="dispenser"] { --m-color: linear-gradient(165deg, #f4f7fb, #dbe4ef); }
.mascot[data-type="dispenser"] .mascot-body {
  border-radius: 14% 14% 10% 10% / 8% 8% 12% 12%;
  border: calc(var(--m-size) * 0.02) solid rgba(15, 23, 42, 0.07);
}
/* 顶部倒扣蓝桶（宽底在上、窄口在下插入机身）——扁桶造型，含桶口颈圈 */
.m-disp-bucket {
  position: absolute; top: calc(var(--m-size) * -0.20); left: 50%; transform: translateX(-50%);
  /* 总高 0.26：梯形本体占 77%（≈0.20，约机身的 1/5）+ 桶口颈 23% 插入机身 */
  width: calc(var(--m-size) * 0.70); height: calc(var(--m-size) * 0.26);
  background:
    /* 水中气泡 */
    radial-gradient(circle at 31% 30%, rgba(255, 255, 255, 0.5) 0 7%, transparent 8%),
    radial-gradient(circle at 66% 45%, rgba(255, 255, 255, 0.34) 0 5%, transparent 6%),
    /* 顶部水面高光 */
    linear-gradient(180deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.06) 36%, transparent 54%),
    /* 桶身加强腰线 */
    linear-gradient(180deg, transparent 0 60%, rgba(255, 255, 255, 0.26) 60% 64%, transparent 64%),
    /* 主体：sky 水色，贴合全局 --brand */
    linear-gradient(165deg, #7dd3fc 0%, #38bdf8 42%, #0284c7 100%);
  clip-path: polygon(6% 0, 94% 0, 78% 77%, 62% 77%, 62% 100%, 38% 100%, 38% 77%, 22% 77%);
  box-shadow:
    inset 0 calc(var(--m-size) * 0.02) calc(var(--m-size) * 0.05) rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--m-size) * -0.03) calc(var(--m-size) * 0.06) rgba(2, 132, 199, 0.35);
}
/* 左侧塑料反光条 */
.m-disp-bucket::before {
  content: "";
  position: absolute; top: 9%; left: 13%;
  width: 13%; height: 58%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.04));
  border-radius: 999px;
  transform: rotate(9deg);
}
/* 桶口卡箍（颈部起点的暗带，与机身衔接更自然） */
.m-disp-bucket::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 74%;
  height: 8%;
  background: rgba(3, 105, 161, 0.32);
}
/* 接水盘 */
.m-disp-tray {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--m-size) * 0.06);
  width: calc(var(--m-size) * 0.6); height: calc(var(--m-size) * 0.09);
  background: linear-gradient(#cbd5e1, #94a3b8);
  border-radius: 4px;
}
/* 饮水机白机身：给眼睛加深描边以保证可见 */
.mascot[data-type="dispenser"] .eye { box-shadow: inset 0 0 0 1.6px rgba(30, 58, 138, 0.35); }

/* 偷看密码：饮水机探头 */
.mascot.peeker.peeking { transform: translate(-5px, 12px) rotate(-9deg) scale(1.06); }
.mascot.peeker.peeking .eye { transform: scale(1.18); }

/* 委屈 / 难过：嘴角下弯 + 一滴泪 */
.mascot.sad .mouth {
  height: 9px;
  border: 2px solid #5b3a1a;
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  bottom: 19%;
}
.mascot .tear {
  position: absolute;
  top: 46%; left: 30%;
  width: 5px; height: 7px;
  background: #6cb8ff;
  border-radius: 0 60% 60% 60%;
  transform: rotate(45deg) scale(0);
  opacity: 0;
}
.mascot.sad .tear { animation: tear 1.6s ease-in 0.1s; }
@keyframes tear {
  0% { transform: rotate(45deg) translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: rotate(45deg) translateY(14px) scale(1); opacity: 0; }
}

/* 离场：缩起飘走 */
.mascot.leave { animation: leave 0.8s cubic-bezier(0.55, 0, 0.55, 1) forwards; }
.mascot:nth-child(1).leave { --dx: -170px; }
.mascot:nth-child(2).leave { --dx: 0px; }
.mascot:nth-child(3).leave { --dx: 170px; }
@keyframes leave {
  to { transform: translate(var(--dx, 0), -150px) scale(0.5) rotate(12deg); opacity: 0; }
}

/* ---------- 登录按钮：委屈表情 ---------- */
#login-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  /* 水感玻璃按钮：半透明蓝 + 毛玻璃 + 白色高光描边 */
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.82), rgba(14, 165, 233, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 24px rgba(14, 165, 233, 0.28);
  text-shadow: 0 1px 2px rgba(2, 60, 120, 0.35);
}
#login-btn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.92), rgba(14, 165, 233, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 30px rgba(14, 165, 233, 0.36);
}
.btn-mood { display: none; }
#login-btn.is-wronged .btn-mood,
#login-btn.is-success .btn-mood,
#login-btn.is-loading .btn-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#login-btn .btn-mood .eye {
  position: relative; top: auto; left: auto; right: auto;
  width: 9px; height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: #fff;
}
#login-btn .btn-mood .eye .pupil {
  width: 5px; height: 5px; background: #2a2230;
}
#login-btn .btn-mood .mouth {
  position: relative; bottom: auto; left: auto;
  width: 11px; height: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-top: none;
  border-radius: 0 0 8px 8px;
  transform: none;
}
/* 委屈态：按钮变灰、嘴角下弯、流泪 */
#login-btn.is-wronged {
  background: linear-gradient(135deg, #b9bfc7, #9aa1ab);
  box-shadow: 0 8px 22px rgba(120, 130, 145, 0.3);
}
#login-btn.is-wronged .btn-mood .mouth {
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
#login-btn.is-wronged .btn-mood .eye { transform: scaleY(0.85); }
#login-btn .btn-tear {
  position: absolute;
  top: 8px; left: 50%;
  width: 6px; height: 8px;
  background: #6cb8ff;
  border-radius: 0 60% 60% 60%;
  transform: rotate(45deg) scale(0);
  opacity: 0;
}
#login-btn.is-wronged .btn-tear { animation: tear 1.4s ease-in 0.1s; }
#login-btn.is-wronged .btn-text::after { content: " · 委屈了"; }

/* 加载中：按钮轻微脉冲 */
#login-btn.is-loading { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.97); } }

/* 登录成功：按钮欢呼一下再离场（青蓝 cyan，最贴近水的冷色调） */
#login-btn.is-success {
  background: linear-gradient(135deg, #22d3ee, #0e7490);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 30px rgba(14, 116, 144, 0.34);
  text-shadow: 0 1px 2px rgba(8, 51, 68, 0.45);
}

/* ---------- 小屏适配：小人横排到卡片上方（尺寸由 clamp 自适应） ---------- */
/* ---------- 登录页表单：贴合桶形、尺寸更精致（覆盖全局基础样式） ---------- */
.login-card .field { margin-bottom: clamp(10px, 2.6vw, 13px); }
.login-card .field input {
  padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 14px);
  font-size: clamp(13px, 3.2vw, 14px);
  border-radius: clamp(9px, 2.4vw, 11px);
  display: block;
  width: calc(100% - 32px);
  margin: 0 auto;
}
.login-card .field input::placeholder {
  color: rgba(60, 72, 100, 0.45);
  font-size: clamp(13px, 3.2vw, 14px);
}
/* 桶标（泉先生品牌 logo）：宽度顶到桶身内壁（clip-path x 0.07–0.93 = 卡片宽 86%），
   内容区被 34px padding 限制在 312px，桶身内壁 326.8px，故左右各用 -7px 负边距撑出去 */
.login-card .login-brand {
  /* 桶标垂直居中于「主 logo」与「用户名输入框」之间：上下间距相等。
     总间距保持 46px（原 2px + 44px）不变，故表单位置零位移。
     注意：logo 的 margin-bottom 必须归零，相邻兄弟外边距会折叠取最大值而非相加。 */
  margin: clamp(14.5px, 3.5vw, 23px) -7px clamp(14.5px, 3.5vw, 23px);
  width: calc(100% + 14px);
}
.login-card .login-brand img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  /* 微妙内凹 + 轻投影，模拟贴在桶身上的标签质感 */
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(14, 165, 233, 0.10);
}
/* logo 下边距归零：logo↔桶标 的间距统一交给 .login-brand 的 margin-top 控制，
   否则相邻兄弟外边距折叠会取两者最大值，导致等距失效（覆盖 style.css 的 6px） */
.login-card .login-logo { margin-bottom: 0; }
.login-card .login-logo img { width: clamp(118px, 30vw, 150px); }
.login-card #login-btn { padding: clamp(9px, 2.2vw, 12px) clamp(14px, 3.4vw, 16px); font-size: clamp(13px, 3.4vw, 15px); letter-spacing: clamp(1px, 0.5vw, 2px); width: calc(100% - 32px); margin: 0 auto; }
.login-card .login-error { font-size: clamp(11px, 2.8vw, 12.5px); margin: 6px 0 0; }

/* ===== 第三方登录切换组：微信 | 企业微信（腾讯云控制台式胶囊滑块） ===== */
/* 注意：按钮同时带 .btn 通用类（style.css），其 .btn 背景为半透明白、
   .btn:hover 背景为 #eef0f7 浅灰——必须用 .btn.btn-sso 双类提升优先级，
   并显式钉死所有交互状态的背景为透明，否则 hover 会变灰 */
.sso-login-row {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin-top: clamp(10px, 2.6vw, 14px);
  padding: 3px;
  background: #eef0f4;
  border-radius: 999px;
  user-select: none;
}
/* 白色滑块：绝对定位在容器内，随选中项左右滑动 */
.sso-indicator {
  position: absolute;
  top: 3px; left: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  transition: transform .34s cubic-bezier(.22, 1.2, .36, 1);
  z-index: 0;
}
.sso-login-row.active-wecom .sso-indicator { transform: translateX(100%); }
.sso-login-row.active-wechat .sso-indicator { transform: translateX(0); }
.btn.btn-sso {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 6px);
  flex: 1 1 0;
  min-width: 0;
  height: clamp(28px, 6.8vw, 32px);
  padding: clamp(3px, 0.8vw, 4px) clamp(12px, 3.2vw, 16px);
  background: transparent !important;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, transform .18s ease, box-shadow .18s ease;
}
/* 文字颜色：选中项深色加粗，未选中项浅灰（图标自带颜色不受影响） */
.btn.btn-sso .sso-text {
  color: #9aa0a8;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: color .2s ease, transform .18s ease;
}
.sso-login-row.active-wecom .btn.btn-wecom .sso-text,
.sso-login-row.active-wechat .btn.btn-wechat .sso-text {
  color: #1f2329;
  font-weight: 600;
}
/* 悬停/按下：只保留动感（轻微上浮、中性阴影加深），背景透明不变色 */
.btn.btn-sso:hover {
  background: transparent !important;
  transform: translateY(-1px);
}
.btn.btn-sso:active {
  background: transparent !important;
  transform: translateY(0);
}
.btn.btn-sso:focus {
  background: transparent !important;
  transform: none;
  outline: none;
}
.btn.btn-sso .sso-logo {
  display: block;
  height: clamp(16px, 4.2vw, 18px);
  width: auto;
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.btn.btn-sso:hover .sso-logo { transform: scale(1.06); }
/* 双按钮组任何状态下均保持透明背景，不变色；仅滑块/文字/动感变化 */

/* 图片加载失败时的文字兜底 */
.logo-fallback, .brand-fallback {
  display: inline-block;
  font-weight: 800;
  color: #0ea5e9;
  text-align: center;
}
.logo-fallback { font-size: clamp(22px, 6vw, 28px); letter-spacing: 2px; }
.brand-fallback { font-size: clamp(18px, 5vw, 22px); color: #0284c7; }

/* 调试信息区 */
.login-debug {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #334155;
  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed rgba(14, 165, 233, 0.35);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 160px;
  overflow-y: auto;
}

/* ── 备案号：底部居中 ── */
.login-icp {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

@media (max-width: 760px) {
  .login-stage { flex-direction: column; gap: 14px; justify-content: center; align-items: center; }
  /* 窗口过窄时隐藏卡通，保证登录框完整居中显示 */
  .login-mascots { display: none; }
  .login-card {
    width: min(calc(100vw - 32px), 380px);
    aspect-ratio: 380 / 516;
    padding: 70px 26px 80px;
    min-height: 0;
  }
  /* 小屏 padding 只有 26px，桶身内壁距卡片边 7%，可外扩空间约 2px/边 */
  .login-card .login-brand {
    /* 小屏同样上下等距，总间距保持 34px（原 2px + 32px）不变 */
    margin: clamp(12px, 3vw, 17px) -2px clamp(12px, 3vw, 17px);
    width: calc(100% + 4px);
  }
  .login-card::after { height: 40%; }
}

/* ── 微信扫码登录弹窗：纯白单层 + 胶囊圆角 ── */
/* 遮罩：单层半透明，不再叠加模糊，避免「多层」观感 */
#wechat-qr-mask.modal-mask {
  background: rgba(20, 24, 40, 0.30);
}
.wechat-qr-modal {
  width: 360px;
  max-width: 92vw;
  border-radius: 30px;          /* 胶囊式大圆角 */
  overflow: hidden;
  /* 纯白卡片，单层无玻璃叠层 */
  background: #ffffff;
  border: 1px solid rgba(20, 24, 40, 0.08);
  box-shadow:
    0 18px 46px rgba(20, 24, 40, 0.18),
    0 6px 14px rgba(20, 24, 40, 0.08);
  animation: modalGlassIn .42s cubic-bezier(.34, 1.42, .64, 1) both;
}
@keyframes modalGlassIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 头部：去除标题与分隔线，仅保留右上角关闭按钮，保持纯白单层 */
.wechat-qr-modal .modal-head {
  background: transparent;
  border-bottom: none;
  justify-content: flex-end;
  padding: 12px 16px 0;
}
.wechat-qr-modal .modal-head h3 { display: none; }
.wechat-qr-modal .modal-close { color: #5b6678; }
.wechat-qr-modal .modal-close:hover { color: #25324a; }
.wechat-qr-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.wechat-qr-loading {
  font-size: 14px;
  color: #8a94a6;
  text-align: center;
}
.wechat-qr-frame {
  width: 300px;
  height: 400px;
  max-width: 100%;
  border: none;
  border-radius: 8px;
  background: #fff;
}
/* 未启用提示 */
.wechat-qr-disabled {
  text-align: center;
  padding: 34px 18px 26px;
  color: #8a94a6;
}
.wechat-qr-disabled-icon { font-size: 42px; margin-bottom: 14px; }
.wechat-qr-disabled-title {
  font-size: 16px;
  font-weight: 600;
  color: #3a4356;
  margin: 0 0 10px;
}
.wechat-qr-disabled-desc {
  font-size: 13px;
  line-height: 1.75;
  color: #8a94a6;
  margin: 0;
}
/* 首次绑定面板 */
.wechat-bind-panel { padding: 4px 2px 6px; }
.wechat-bind-scan-ok {
  text-align: center;
  padding: 22px 10px 8px;
}
.wechat-bind-check {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #07c160;
  color: #fff;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(7, 193, 96, 0.35);
}
.wechat-bind-scan-ok p {
  margin: 0;
  font-size: 14px;
  color: #3a4356;
}
.wechat-bind-tip {
  font-size: 13px;
  color: #8a94a6;
  margin: 0 0 12px;
  text-align: center;
}
.wechat-bind-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #e6e9f0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #2b3445;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wechat-bind-input:focus {
  border-color: #07c160;
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
}
.wechat-bind-msg {
  margin: 10px 0 0;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.wechat-bind-msg.ok { color: #07c160; }
.wechat-bind-msg.error { color: #e05252; }
.wechat-bind-msg.info { color: #8a94a6; }