/* ============================================================
   风花国际 · 登录 / 注册页「底部卡片面板」 v2
   按西海岸登录页的实测尺寸一比一还原（390 基准，1 单位 = cqw）：
     面板 左右 15.6 / 底 193 / 圆角 20.8 / 底色 #f0f4fa / 内边距 43.68·26.1·23.9
     输入框 高 46.8 / 圆角 22.88 / 白底 / 阴影 0 5.2 8.32 rgba(200,207,228,.25)
     主按钮 高 52 / 圆角 26 / 纯色 #a134f1 / 字号 18.72
     菜单 字号 14.56 / 颜色 #1f285a
   背景海报沿用站点原来的（不改图、不压暗）
   ============================================================ */

:root { --zx: calc(min(1vw, 3.9px) / 3.9); }
/* ---------- 0. 背景：保持原海报，去掉压暗层 ---------- */
.kk-auth-page .kk-auth-shell {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.kk-auth-page .kk-auth-shell:after {
  display: none !important;
}

/* ---------- 1. 弹层动画 ---------- */
@keyframes zaka-xha-up {
  from { transform: translateY(56%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes zaka-xha-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 2. 面板主体 ---------- */
.kk-auth-page .kk-auth-form {
  position: absolute !important;
  left: calc(15.6 * var(--zx)) !important;
  right: calc(15.6 * var(--zx)) !important;
  bottom: calc(193 * var(--zx)) !important;
  top: auto !important;
  width: auto !important;
  max-width: calc(390 * var(--zx) - 31.2 * var(--zx)) !important;
  max-height: calc(100% - 120 * var(--zx));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0 auto !important;
  padding: calc(43.68 * var(--zx)) calc(25.05 * var(--zx)) calc(23.9 * var(--zx)) !important;
  background: #f0f4fa !important;
  border: 1px solid #ffffff !important;
  border-radius: calc(20.8 * var(--zx)) !important;
  box-shadow: 0 calc(12 * var(--zx)) calc(34 * var(--zx)) rgba(16, 8, 40, .22) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  color: #1f285a !important;
  text-align: left !important;
  animation: zaka-xha-up .34s cubic-bezier(.22, .85, .3, 1) both;
  will-change: transform;
  scrollbar-width: none;
}
.kk-auth-page .kk-auth-form::-webkit-scrollbar { width: 0; height: 0; }

/* 注册面板：同样的卡片，只是内容更多 */
.kk-auth-page .kk-auth-form-register {
  margin-top: 0 !important;
}

/* ---------- 3. 输入框：白色药丸 ---------- */
.kk-auth-page .kk-field {
  height: calc(46.8 * var(--zx)) !important;
  flex: 0 0 calc(46.8 * var(--zx)) !important;
  margin: 0 0 calc(10.4 * var(--zx)) !important;
  padding: 0 calc(13.5 * var(--zx)) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: calc(22.88 * var(--zx)) !important;
  background: #ffffff !important;
  box-shadow: 0 calc(5.2 * var(--zx)) calc(8.32 * var(--zx)) rgba(200, 207, 228, .25) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
}
.kk-auth-page .kk-field:focus-within {
  box-shadow: 0 calc(5.2 * var(--zx)) calc(8.32 * var(--zx)) rgba(200, 207, 228, .35),
              0 0 0 calc(2 * var(--zx)) rgba(161, 52, 241, .16) !important;
}
.kk-auth-page .kk-field-icon {
  width: calc(13.5 * var(--zx)) !important;
  height: calc(16.6 * var(--zx)) !important;
  flex: 0 0 calc(13.5 * var(--zx)) !important;
  margin-right: calc(8.32 * var(--zx)) !important;
  color: #b9c1d6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.kk-auth-page .kk-field-icon svg {
  width: 100% !important;
  height: 100% !important;
  filter: none !important;
}
.kk-auth-page .kk-field-icon .kk-vant-icon {
  font-size: calc(16.6 * var(--zx)) !important;
  line-height: 1 !important;
  filter: none !important;
  color: #b9c1d6 !important;
}
.kk-auth-page .kk-field input {
  color: #0b1028 !important;
  font-size: calc(16.64 * var(--zx)) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-left: calc(4.16 * var(--zx)) !important;
  padding: 0 !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}
.kk-auth-page .kk-field input::placeholder {
  color: #a9b1c4 !important;
  font-weight: 500 !important;
}
.kk-auth-page .kk-eye {
  width: calc(25 * var(--zx)) !important;
  height: calc(25 * var(--zx)) !important;
  flex: 0 0 calc(25 * var(--zx)) !important;
  margin: 0 calc(-6.7 * var(--zx)) 0 0 !important;
  color: #b9c1d6 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.kk-auth-page .kk-eye .kk-vant-icon {
  font-size: calc(17 * var(--zx)) !important;
  color: #b9c1d6 !important;
  filter: none !important;
}
.kk-auth-page .kk-eye-on,
.kk-auth-page .kk-eye-on .kk-vant-icon { color: #a134f1 !important; }

/* ---------- 4. 菜单行：记住密码 / 忘记密码 ---------- */
.kk-auth-page .kk-login-options {
  margin: calc(7.2 * var(--zx)) calc(-2.65 * var(--zx)) 0 !important;
  padding: 0 calc(2 * var(--zx)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: calc(14.56 * var(--zx)) !important;
  color: #1f285a !important;
}
.kk-auth-page .kk-remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(6.8 * var(--zx)) !important;
  font-size: calc(14.56 * var(--zx)) !important;
  font-weight: 500 !important;
  color: #1f285a !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.kk-auth-page .kk-switch {
  position: relative !important;
  width: calc(14.5 * var(--zx)) !important;
  height: calc(14.5 * var(--zx)) !important;
  flex: 0 0 calc(14.5 * var(--zx)) !important;
  border-radius: calc(4 * var(--zx)) !important;
  background: #ffffff !important;
  border: calc(1.2 * var(--zx)) solid #c9d0e2 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.kk-auth-page .kk-switch:before { display: none !important; }
.kk-auth-page .kk-switch-on {
  background: #a134f1 !important;
  border-color: #a134f1 !important;
}
.kk-auth-page .kk-switch-on:after {
  content: "" !important;
  position: absolute !important;
  left: calc(4.4 * var(--zx)) !important;
  top: calc(1.2 * var(--zx)) !important;
  width: calc(3.6 * var(--zx)) !important;
  height: calc(7 * var(--zx)) !important;
  border-right: calc(2 * var(--zx)) solid #ffffff !important;
  border-bottom: calc(2 * var(--zx)) solid #ffffff !important;
  transform: rotate(40deg);
}
/* 原来的「先去逛逛」挪到卡片底部，这里隐藏 */
.kk-auth-page .kk-browse { display: none !important; }

/* 忘记密码（由补丁脚本注入到菜单行右侧） */
.zaka-forgot {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: calc(14.56 * var(--zx));
  font-weight: 500;
  color: #1f285a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zaka-forgot:active { opacity: .6; }

/* ---------- 5. 主按钮 ---------- */
.kk-auth-page .kk-primary {
  width: 100% !important;
  height: calc(52 * var(--zx)) !important;
  flex: 0 0 calc(52 * var(--zx)) !important;
  margin: calc(46.7 * var(--zx)) 0 0 !important;
  border: 0 !important;
  border-radius: calc(26 * var(--zx)) !important;
  background: #a134f1 !important;
  color: #ffffff !important;
  font-size: calc(18.72 * var(--zx)) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.kk-auth-page .kk-primary:before { display: none !important; }
.kk-auth-page .kk-primary:active { background: #8f2bd8 !important; }
.kk-auth-page .kk-primary[data-zaka-dim] {
  opacity: .5 !important;
}
.kk-auth-page .kk-primary:disabled {
  opacity: .5 !important;
  filter: none !important;
  cursor: default;
}

/* ---------- 6. 卡片底部：先去逛逛 / 注册账号 ---------- */
.zaka-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(20.8 * var(--zx));
  padding: 0 calc(20.8 * var(--zx));
  animation: zaka-xha-fade .3s ease both;
}
.zaka-links button {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: calc(14.56 * var(--zx));
  font-weight: 500;
  line-height: calc(22 * var(--zx));
  color: #1f285a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zaka-links button.zaka-blue { color: #a134f1; }
.zaka-links button:active { opacity: .6; }

/* 原来的快捷操作（客服 / QQ / 微信 / 注册）改由底部行承载 */
.kk-auth-page .kk-quick-actions { display: none !important; }
/* 版本号在西海岸没有，收起来 */
.kk-auth-page .kk-version { display: none !important; }

/* 注册页的「返回登录」 */
.kk-auth-page .kk-back-login {
  height: auto !important;
  margin-top: calc(20.8 * var(--zx)) !important;
  padding: 0 !important;
  font-size: calc(14.56 * var(--zx)) !important;
  font-weight: 500 !important;
  line-height: calc(22 * var(--zx)) !important;
  color: #a134f1 !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
}

/* ---------- 7. 错误提示 ---------- */
.kk-auth-page .kk-auth-error {
  min-height: calc(15 * var(--zx)) !important;
  margin: 0 0 calc(2 * var(--zx)) calc(4 * var(--zx)) !important;
  color: #e4322b !important;
  font-size: calc(12.5 * var(--zx)) !important;
  line-height: calc(15 * var(--zx)) !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-shadow: none !important;
}

/* ---------- 8. 右上角关闭 ---------- */
.zaka-x {
  position: fixed;
  z-index: 2200;
  right: calc(20.8 * var(--zx));
  top: calc(31.2 * var(--zx));
  width: calc(41.6 * var(--zx));
  height: calc(30.2 * var(--zx));
  padding: 0;
  border: 0;
  border-radius: calc(15 * var(--zx));
  background: #ffffff;
  border: 1px solid rgba(196, 203, 219, .55);
  box-shadow: 0 calc(2 * var(--zx)) calc(8 * var(--zx)) rgba(16, 8, 40, .18);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: zaka-xha-fade .3s ease both;
}
.zaka-x:before,
.zaka-x:after {
  content: "";
  position: absolute;
  width: calc(15 * var(--zx));
  height: calc(1.8 * var(--zx));
  border-radius: calc(2 * var(--zx));
  background: #4f5870;
}
.zaka-x:before { transform: rotate(45deg); }
.zaka-x:after { transform: rotate(-45deg); }
.zaka-x:active { background: #eef1f7; }

/* ---------- 9. 卡片下方：在线客服 ---------- */
.zaka-kefu {
  position: fixed;
  z-index: 2100;
  left: 0;
  right: 0;
  bottom: calc(145 * var(--zx));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5.2 * var(--zx));
  height: calc(22 * var(--zx));
  min-height: 0;
  max-height: calc(22 * var(--zx));
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: calc(14.56 * var(--zx));
  font-weight: 500;
  line-height: calc(22 * var(--zx));
  color: #1f285a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: zaka-xha-fade .3s ease both;
}
.zaka-kefu:active { opacity: .65; }
.zaka-kefu svg {
  width: calc(17.7 * var(--zx)) !important;
  height: calc(16.6 * var(--zx)) !important;
  max-width: calc(17.7 * var(--zx)) !important;
  max-height: calc(16.6 * var(--zx)) !important;
  filter: none !important;
  flex: 0 0 auto;
}
.zaka-kefu .kk-vant-icon {
  font-size: calc(16.6 * var(--zx));
  color: #1f285a;
  filter: none;
}
.zaka-kefu .zaka-kefu-txt { white-space: nowrap; }

/* ---------- 10. 桌面端（宽屏）：卡片居中不铺太宽 ---------- */
@media (min-width: 769px) {
  .kk-auth-page .kk-auth-form {
    left: 50% !important;
    right: auto !important;
    width: calc(390 * var(--zx)) !important;
    max-width: 390px !important;
    transform: translateX(-50%);
    animation: zaka-xha-up-desk .34s cubic-bezier(.22, .85, .3, 1) both;
    bottom: 193px !important;
  }
  @keyframes zaka-xha-up-desk {
    from { transform: translate(-50%, 56%); opacity: 0; }
    to   { transform: translate(-50%, 0);   opacity: 1; }
  }
  .zaka-x { right: max(20.8px, calc((100vw - 390px) / 2 - 62px)); top: 31.2px; }
  .zaka-kefu { bottom: 145px; }
}