/* ============================================================
   KPOP.WANG 会员登录页 · 沉浸式双栏卡片（2026-09-14）
   仅由 template/default/html/member/login.html 引入 → 作用域天然隔离，
   不影响 register / retrieve / ucenter / umodify / mycomment 及 CMS 内页。

   布局： 左「扫码登录」（预留） ｜ 右「账号密码 / 短信」双 Tab + 第三方登录
   规范： 页底浅蓝渐变 / 卡片 #FFFFFF / 品牌蓝 #1677FF
          主文字 #1D2129 / 次文字 #4E5969 / 弱文字 #86909C / 描边 #E5E6EB
   预留： 微信登录、支付宝登录、短信登录、扫码登录 —— 公众号/应用未配置，
          前端仅保留入口与提示，配置完成后改 kp-login.js 顶部开关即可启用。
   注意： 本文件必须保持「基础规则在前、媒体查询在后」的顺序，
          否则同特异性下媒体查询会被基础规则反压。
   ============================================================ */

/* ---------- 0. 沉浸式：隐藏全站导航 / 页脚 / 客服浮层 / H5 底栏 ----------
   登录页承载转化，保持纯净单焦点；客服入口改由页底文字链接提供。 */
html body #kpnav,
html body #kpnav-slot { display: none !important; }
html body .footer { display: none !important; }
html body .kp-contact-float { display: none !important; }
html body .kp-mtab { display: none !important; }
html body { padding-top: 0 !important; }

/* ---------- 1. 页面底色：浅蓝渐变 + 柔光装饰 ---------- */
html body {
  background: #EEF4FD !important;
  background-image: linear-gradient(152deg, #E6F0FD 0%, #F6FAFF 42%, #E8F1FC 100%) !important;
  background-attachment: fixed !important;
  color: #1D2129 !important;
  min-height: 100vh;
}
html body::before,
html body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
html body::before {
  top: -170px; right: -150px; width: 540px; height: 540px;
  background: radial-gradient(circle at 32% 32%, rgba(22,119,255,.11), rgba(22,119,255,0) 68%);
}
html body::after {
  bottom: -190px; left: -170px; width: 580px; height: 580px;
  background: radial-gradient(circle at 62% 42%, rgba(22,119,255,.08), rgba(22,119,255,0) 70%);
}
html body ::-webkit-scrollbar-track { background: #EEF4FD; }
html body ::-webkit-scrollbar-thumb { background: #D3DCE8; border-radius: 6px; }

/* ---------- 2. 舞台与卡片 ---------- */
.kpl-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 56px;
}
.kpl-card {
  width: min(980px, 100%);
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(22,119,255,.12), 0 4px 14px rgba(29,33,41,.05);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

/* ---------- 3. 左栏：扫码登录（预留） ---------- */
.kpl-left {
  width: 372px;
  flex: none;
  padding: 58px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FCFDFF 0%, #F6FAFF 100%);
  position: relative;
}
.kpl-left::after {
  content: '';
  position: absolute;
  right: 0; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, rgba(229,230,235,0) 0%, #EAECF0 14%, #EAECF0 86%, rgba(229,230,235,0) 100%);
}
.kpl-qr-title {
  margin: 0 0 30px;
  font-size: 23px;
  font-weight: 600;
  color: #1D2129;
  letter-spacing: 3px;
  line-height: 1.2;
}
.kpl-qr-box {
  position: relative;
  width: 196px;
  height: 196px;
  box-sizing: border-box;
  padding: 9px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #EEF0F4, 0 10px 26px rgba(29,33,41,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kpl-qr-box canvas {
  display: block;
  width: 178px;
  height: 178px;
  border-radius: 6px;
}
.kpl-qr-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1677FF, #0958D9);
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #FFFFFF, 0 4px 10px rgba(22,119,255,.3);
}
.kpl-qr-tag {
  position: absolute;
  top: -11px; right: -11px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #FFF7E8;
  border: 1px solid #FFE4BA;
  color: #FF7D00;
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}
.kpl-qr-tip {
  margin: 46px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #86909C;
  text-align: center;
}
.kpl-qr-tip b { color: #07C160; font-weight: 600; }

/* ---------- 4. 右栏：品牌 + 表单 ---------- */
.kpl-right {
  flex: 1;
  min-width: 0;
  padding: 46px 52px 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.kpl-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 34px;
}
.kpl-brand-mark {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1677FF, #0958D9);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(22,119,255,.28);
}
.kpl-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.kpl-brand-cn {
  font-size: 19px;
  font-weight: 800;
  color: #1D2129;
  letter-spacing: .6px;
  line-height: 1.1;
}
.kpl-brand-en {
  margin-top: 4px;
  font-size: 9.5px;
  color: #86909C;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.kpl-brand-div {
  width: 1px;
  height: 30px;
  flex: none;
  background: #E5E6EB;
}
.kpl-brand-sub {
  font-size: 19px;
  font-weight: 700;
  color: #1D2129;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

/* ---------- 5. 登录方式 Tab ---------- */
.kpl-tabs {
  display: flex;
  gap: 36px;
}
.kpl-tab {
  position: relative;
  padding: 0 2px 12px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: #4E5969;
  cursor: pointer;
  transition: color .18s;
}
.kpl-tab:hover { color: #1677FF; }
.kpl-tab.active { color: #1677FF; font-weight: 600; }
.kpl-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #1677FF;
}

/* ---------- 6. 表单 ---------- */
.kpl-pane { display: none; padding-top: 4px; }
.kpl-pane.active { display: block; }
.kpl-field { margin-top: 26px; }
.kpl-label {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: #1D2129;
  line-height: 1.6;
}
.kpl-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #E5E6EB;
  border-radius: 0;
  background: transparent;
  outline: none;
  padding: 10px 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: #1D2129;
  line-height: 1.4;
  transition: border-color .18s;
  box-shadow: none;
}
.kpl-input::placeholder { color: #C9CDD4; }
.kpl-input:focus { border-bottom-color: #1677FF; box-shadow: none; }
.kpl-pwd { position: relative; }
.kpl-pwd .kpl-input { padding-right: 42px; }
.kpl-eye {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86909C;
  font-size: 16px;
  cursor: pointer;
  transition: color .18s;
}
.kpl-eye:hover,
.kpl-eye.on { color: #1677FF; }

/* 验证码行 */
.kpl-code-row { display: flex; align-items: flex-end; gap: 16px; }
.kpl-code-row .kpl-input { flex: 1; min-width: 0; }
.kpl-code-img {
  flex: none;
  height: 38px;
  border: 1px solid #E5E6EB;
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
}
.kpl-send {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #1677FF;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1677FF;
  font-family: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.kpl-send:hover { background: #F2F7FF; }

/* 辅助行 / 动作行 */
.kpl-aux {
  margin-top: 14px;
  font-size: 14px;
  text-align: right;
  line-height: 1.6;
}
.kpl-aux a { color: #86909C; }
.kpl-aux a:hover { color: #1677FF; }
.kpl-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
}
.kpl-btn {
  min-width: 134px;
  height: 46px;
  padding: 0 34px;
  border: 0;
  border-radius: 23px;
  background: #1677FF;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22,119,255,.26);
  transition: background .18s, box-shadow .18s;
}
.kpl-btn:hover { background: #0958D9; }
.kpl-btn:active { transform: translateY(1px); }
.kpl-btn[disabled] { opacity: .62; cursor: not-allowed; box-shadow: none; }
.kpl-register {
  font-size: 14px;
  color: #1D2129;
  white-space: nowrap;
}
.kpl-register:hover { color: #1677FF; }

/* ---------- 7. 其他登录方式（微信 / 支付宝，预留） ---------- */
.kpl-oauth { margin-top: 34px; }
.kpl-oauth-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #86909C;
}
.kpl-oauth-hd::before,
.kpl-oauth-hd::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #EEF0F4;
}
.kpl-oauth-list { display: flex; flex-direction: column; gap: 2px; }
.kpl-oauth-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s;
}
.kpl-oauth-item:hover { background: #F7F9FC; text-decoration: none; }
.kpl-oauth-ico {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
}
.kpl-oauth-ico.wechat { background: #07C160; }
.kpl-oauth-ico.alipay { background: #1677FF; font-size: 18px; }
.kpl-oauth-tx { display: flex; flex-direction: column; min-width: 0; }
.kpl-oauth-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #1D2129;
  line-height: 1.4;
}
.kpl-oauth-desc {
  margin-top: 3px;
  font-size: 12px;
  color: #86909C;
  line-height: 1.5;
}
.kpl-badge-soon {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  background: #FFF7E8;
  border: 1px solid #FFE4BA;
  color: #FF7D00;
  white-space: nowrap;
}

/* ---------- 8. 页脚小链接 ---------- */
.kpl-footline {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font-size: 13px;
  color: #86909C;
  text-align: center;
}
.kpl-footline a { color: #4E5969; }
.kpl-footline a:hover { color: #1677FF; }
.kpl-dot {
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 12px;
  vertical-align: -1px;
  background: #D8DCE3;
}

/* ---------- 9. 轻提示 ---------- */
.kpl-toast {
  position: fixed;
  left: 50%;
  top: 32px;
  transform: translate(-50%, -16px);
  max-width: 80vw;
  padding: 11px 20px;
  border-radius: 10px;
  background: rgba(29, 33, 41, .9);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s, transform .24s;
  z-index: 9999;
}
.kpl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 10. 移动端（媒体查询必须置于全部基础规则之后） ---------- */
@media (max-width: 900px) {
  .kpl-stage {
    justify-content: flex-start;
    padding: 22px 14px 40px;
  }
  .kpl-card { border-radius: 20px; display: block; }
  .kpl-left { display: none; }   /* 手机端扫码登录无意义（同屏无法自扫） */
  .kpl-right { padding: 34px 24px 30px; }
  .kpl-brand { margin-bottom: 26px; gap: 12px; }
  .kpl-brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }
  .kpl-brand-cn { font-size: 17px; }
  .kpl-brand-sub { font-size: 15px; letter-spacing: .5px; }
  .kpl-brand-en { display: none; }   /* 窄屏省略英文副标，避免品牌行拥挤 */
  .kpl-tabs { gap: 28px; }
  .kpl-tab { font-size: 15.5px; }
  .kpl-field { margin-top: 22px; }
  .kpl-input { font-size: 16px; }          /* 防 iOS 聚焦自动放大 */
  .kpl-actions { flex-direction: column; gap: 14px; margin-top: 28px; }
  .kpl-btn { width: 100%; }
  .kpl-register { text-align: center; }
  .kpl-oauth { margin-top: 28px; }
  .kpl-footline { margin-top: 20px; }
}
@media (max-width: 380px) {
  .kpl-right { padding: 28px 18px 26px; }
  .kpl-brand-sub { display: none; }
  .kpl-brand-div { display: none; }
}