/*!
 * 登录页重设计（用户端 + 客服端共用）
 *
 * 现状问题（手机端截图）：
 *   1. 左侧有一条深灰竖条 +「客服」图标，把登录卡片挤到右边、右边还被裁切
 *   2. 底部弹出「联系客服 / 关闭」浮层，挡住表单
 *   3. 卡片 310px 固定宽 + 固定高，小屏上不居中、留白难看
 *   4. 输入框/按钮偏矮，指尖不好点
 *
 * 这个文件只做「登录页」的视觉与布局（.wk-login 下面的东西），登录之后的页面完全不受影响。
 * 目标：一屏居中卡片、圆角、柔和阴影、46px 控件、底部安全区。
 */

/* ---------------- 0. 干掉登录页的客服入口（双保险：脚本那边也关了） ---------------- */
#kefu-login-rail,
#kefu-login-tip {
  display: none !important;
}

/* ---------------- 1. 整页背景与居中 ---------------- */
.wk-login {
  min-height: 100dvh !important;
  height: 100dvh !important;
  background:
    radial-gradient(1200px 600px at 50% -10%, #e8f5ee 0%, rgba(232, 245, 238, 0) 60%),
    radial-gradient(800px 400px at 100% 100%, #eef4ff 0%, rgba(238, 244, 255, 0) 55%),
    #f5f6f8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 去掉原来的暗色遮罩感（如果有） */
.wk-login-backdrop {
  background: transparent !important;
}

/* ---------------- 2. 卡片 ---------------- */
.wk-login-shell {
  width: 100% !important;
  max-width: 372px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto !important;
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 12px 40px rgba(17, 24, 39, 0.10) !important;
  overflow: hidden !important;
}

.wk-login-content {
  width: 100% !important;
  height: auto !important;
  padding: 30px 26px 26px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* ---------------- 3. 头部 Logo + 标题 ---------------- */
.wk-login-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.wk-login-card-header img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.18);
}

.wk-login-card-header h1 {
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #111827 !important;
  margin: 0 !important;
}

/* ---------------- 4. 标题与副标题 ---------------- */
.wk-login-content-slogan {
  margin: 0 0 18px !important;
  text-align: left !important;
}

.wk-login-content-slogan h2 {
  font-size: 19px !important;
  font-weight: 650 !important;
  color: #111827 !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
}

.wk-login-content-slogan p {
  font-size: 13px !important;
  color: #8a919c !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ---------------- 5. 表单 ---------------- */
.wk-login-content-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
}

.wk-login-content-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
}

.wk-login-content-form label > span {
  font-size: 13px !important;
  color: #5b6472 !important;
  font-weight: 500 !important;
}

.wk-login-content-form input {
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid #e3e6eb !important;
  background: #fafbfc !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.wk-login-content-form input::placeholder {
  color: #b3b9c4 !important;
}

.wk-login-content-form input:focus {
  border-color: #07c160 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12) !important;
  outline: none !important;
}

/* ---------------- 6. 主按钮 ---------------- */
.wk-login-content-form-buttons {
  margin: 4px 0 0 !important;
}

.wk-login-content-form-ok {
  width: 100% !important;
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #0ac06a, #07a95c) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(7, 193, 96, 0.24) !important;
  transition: transform 0.1s, box-shadow 0.15s;
}

.wk-login-content-form-ok:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(7, 193, 96, 0.22) !important;
}

/* ---------------- 7. 底部链接 ---------------- */
.wk-login-content-form-others {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

.wk-login-content-form-scanlogin {
  font-size: 13px !important;
  color: #6b7280 !important;
  cursor: pointer;
  padding: 6px 2px;
}

.wk-login-content-form-scanlogin:hover,
.wk-login-content-form-scanlogin:active {
  color: #07c160 !important;
}

/* 邀请码注册那个链接稍微突出一点 */
.wk-login-content-form-others .wk-login-content-form-scanlogin:first-child {
  color: #07c160 !important;
  font-weight: 500;
}

/* ---------------- 8. 注册页（同一个 shell，多几个字段） ---------------- */
.wk-login-content-form input[type="text"],
.wk-login-content-form input[type="tel"],
.wk-login-content-form input[type="password"] {
  -webkit-appearance: none;
}

/* ---------------- 9. 小屏适配 ---------------- */
@media screen and (max-width: 380px) {
  .wk-login-content {
    padding: 24px 20px 22px !important;
  }
  .wk-login-card-header h1 {
    font-size: 21px !important;
  }
  .wk-login-content-form input,
  .wk-login-content-form-ok {
    height: 46px !important;
    line-height: 46px !important;
  }
}

/* 矮屏（横屏/小手机）时卡片允许滚动，不裁切 */
@media screen and (max-height: 680px) {
  .wk-login {
    align-items: flex-start !important;
    padding-top: 28px !important;
  }
}

/* 深色模式下保持可读 */
html[data-theme="dark"] .wk-login-shell,
body[theme-mode="dark"] .wk-login-shell {
  background: #171a1f !important;
}
html[data-theme="dark"] .wk-login-card-header h1,
body[theme-mode="dark"] .wk-login-card-header h1,
html[data-theme="dark"] .wk-login-content-slogan h2,
body[theme-mode="dark"] .wk-login-content-slogan h2 {
  color: #f3f4f6 !important;
}
html[data-theme="dark"] .wk-login-content-form input,
body[theme-mode="dark"] .wk-login-content-form input {
  background: #1f232a !important;
  border-color: #2b3038 !important;
  color: #f3f4f6 !important;
}