/*
 * cp 会员中心 · 账号类页面公共样式（登录卡片风格）
 * 2026-11-06 从 Home/View/Login/index.html 的内联样式抽出，供微信/QQ 绑定等页面共用。
 * 2026-11-07 登录页也改为引用本文件（内联样式已删除），这里是唯一一份，改样式只改这里。
 * 用法：<body class="auth-page">，在 layui.css 之后引入
 *       <link rel="stylesheet" href="/Public/static/home/css/auth-card.css?v=20261107c">
 *       配合 /Public/static/vendor/layui/css/layui.css 与 /Public/static/home/css/captcha.css。
 * 结构：.auth-mobile-bar + .login-card > (.brand-panel + .form-panel) + .auth-footer
 *       宽表单页（完善资料）：body.auth-page.auth-wide > .auth-topbar + .auth-wide-main > .auth-section…
 * 使用页面（未登录的账号类页面统一用这一份）：
 *   Home/View/Login/index.html            登录
 *   Home/View/Reg/index.html               注册（微信扫码 / 手机号）
 *   Home/View/Reg/index_wx.html            微信扫码注册（外部跳转页）
 *   Home/View/Reg/reg_add_info.html        注册第 2 步：完善公司资料（宽表单）
 *   Home/View/Getpsw/getpassword.html      找回密码
 *   Home/View/Clearmobile/index.html       自助删除手机号
 *   Api/View/Public/bind_account.html      微信 / QQ 绑定
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:      #C62828;
  --red-dark: #7B0000;
  --red-mid:  #D32F2F;
  --text:     #1a1a2e;
  --sub:      #64748b;
  --border:   #e2e8f0;
  --bg:       #f1f5f9;
  --wechat:   #07C160;
  --qq:       #1EADFF;
}

body.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg); /* 2026-11-07 去掉背景径向渐变 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  padding: 24px;
}

/* ── 卡片 ── */
.auth-page .login-card {
  width: 100%;
  max-width: 940px;
  min-height: 580px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border); /* 2026-11-07 去掉卡片阴影，改细边框 */
}

/* ── 左侧品牌面板 ── */
.auth-page .brand-panel {
  width: 400px;
  flex-shrink: 0;
  background: var(--red); /* 2026-11-07 去掉渐变，纯主色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth-page .brand-panel::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 80px solid rgba(255,255,255,.04);
  top: -120px; right: -120px;
}
.auth-page .brand-panel::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 50px solid rgba(255,255,255,.04);
  bottom: -80px; left: -80px;
}
.auth-page .brand-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 40px;
}
.auth-page .brand-center img {
  height: 56px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.auth-page .brand-divider {
  width: 40px; height: 2px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
}
.auth-page .brand-slogan {
  font-size: 15px;
  color: rgba(255,255,255,.72);
  line-height: 2;
  letter-spacing: .06em;
}

/* ── 右侧表单 ── */
.auth-page .form-panel {
  flex: 1;
  background: #fff;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-page .form-head { margin-bottom: 24px; }
.auth-page .form-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.auth-page .form-head h2 svg { width: 28px; height: 28px; flex-shrink: 0; }
.auth-page .form-head p  { font-size: 14px; color: var(--sub); line-height: 1.7; }

/* ── 提示条 ── */
.auth-page .auth-notice {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.75;
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--sub);
}
.auth-page .auth-notice b { color: var(--text); font-weight: 600; }
.auth-page .auth-notice a { color: var(--red); text-decoration: none; }
.auth-page .auth-notice a:hover { text-decoration: underline; }
.auth-page .auth-notice.is-warn {
  background: #fff7e6; border-color: #ffd591; color: #ad6800;
}
.auth-page .auth-notice.is-warn a { color: #ad4e00; font-weight: 600; }

/* ── 字段 ── */
.auth-page .f-field { margin-bottom: 10px; }
.auth-page .f-field > label {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--text); margin-bottom: 6px;
}
.auth-page .f-wrap { position: relative; }
.auth-page .f-icon {
  position: absolute; left: 13px; top: 23px; /* 输入框高 46px 的一半 */
  transform: translateY(-50%);
  color: #94a3b8; display: flex; align-items: center;
  pointer-events: none;
}
.auth-page .f-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.auth-page .f-wrap input,
.auth-page .f-wrap .layui-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px 0 40px !important;
  font-size: 15px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  outline: none; color: var(--text);
  background: #fafbfc !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.auth-page .f-wrap input.has-eye { padding-right: 38px !important; }
.auth-page .f-wrap input:focus,
.auth-page .f-wrap .layui-input:focus {
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.09) !important;
}
.auth-page .f-wrap input::placeholder { color: #c0c8d4; }
.auth-page .f-wrap .f-hint {
  display: block; min-height: 22px;
  padding: 5px 0 0 2px;
  font-size: 12px; line-height: 1.5; color: #ff4d4f;
}
/* 登录页沿用 layui 的校验提示行：取消 float，让它实际占位；成功时绿色带 ✓ */
.auth-page .f-wrap .layui-form-mid {
  float: none !important; display: block; width: 100%;
  font-size: 12px !important; color: #ff4d4f;
  padding: 6px 0 0 2px !important; height: auto; min-height: 24px;
  line-height: 1.5; margin: 0 !important;
}
.auth-page .f-wrap .layui-form-mid.layui-word-aux { color: #52c41a !important; }
.auth-page .f-wrap .layui-form-mid.layui-word-aux:not(:empty)::before { content: "✓ "; }
.auth-page .f-wrap input.f-invalid,
.auth-page .f-wrap .layui-input.f-invalid {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 3px rgba(255,77,79,.08) !important;
}

.auth-page .eye-btn {
  position: absolute; right: 11px; top: 23px;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #94a3b8; display: flex; padding: 4px;
}
.auth-page .eye-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-page .eye-btn:hover { color: var(--sub); }

.auth-page .link-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 20px; font-size: 13px;
}
.auth-page .link-row a { color: var(--sub); text-decoration: none; }
.auth-page .link-row a:hover { color: var(--red); }

/* ── 协议勾选行（登录页） ── */
.auth-page .agree-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; font-size: 13px;
}
.auth-page .check-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--sub); user-select: none;
}
/* 自绘勾选框：细边框圆角，选中填充品牌红+白色对勾 */
.auth-page .check-label input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer; margin: 0; flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid #cbd5e1; border-radius: 4px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-page .check-label input[type=checkbox]:hover { border-color: var(--red); }
.auth-page .check-label input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px rgba(198,40,40,.15); outline: none; }
.auth-page .check-label input[type=checkbox]:checked { background: var(--red); border-color: var(--red); }
.auth-page .check-label input[type=checkbox]:checked::after {
  content: ""; width: 8px; height: 4px; margin-top: -1px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.auth-page .check-label a { color: var(--red); text-decoration: none; }
.auth-page .check-label a:hover { text-decoration: underline; }
.auth-page .forgot-link { color: var(--sub); text-decoration: none; font-size: 13px; }
.auth-page .forgot-link:hover { color: var(--red); }

/* ── 按钮 ── */
.auth-page .btn-login {
  width: 100% !important; height: 48px !important;
  background: var(--red) !important; /* 2026-11-07 去掉渐变 */
  color: #fff !important; border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important; font-weight: 600 !important;
  cursor: pointer; letter-spacing: 3px;
  transition: background-color .2s, transform .1s;
  box-shadow: none !important; /* 2026-11-07 去掉投影 */
}
.auth-page .btn-login:hover { background: var(--red-dark) !important; }
.auth-page .btn-login:active { transform: scale(.99); }
.auth-page .btn-login[disabled] { opacity: .6 !important; cursor: not-allowed; }

/* ── 快捷登录（登录页） ── */
.auth-page .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 13px; color: #c0c8d4;
}
.auth-page .divider::before,
.auth-page .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-page .social-row { display: flex; gap: 12px; }
.auth-page .social-btn {
  flex: 1; height: 42px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: var(--sub); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.auth-page .social-btn:hover { border-color: #b0b8c8; background: #fafafa; color: var(--sub); }
.auth-page .social-btn svg { width: 18px; height: 18px; }

.auth-page .reg-tip { text-align: center; margin-top: 20px; font-size: 13px; color: var(--sub); }
.auth-page .reg-tip a { color: var(--red); text-decoration: none; font-weight: 500; }
.auth-page .reg-tip a:hover { text-decoration: underline; }

.auth-page .auth-footer {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: #aaa; line-height: 1.8;
}
.auth-page .auth-footer a { color: var(--red); text-decoration: none; }

.auth-page .auth-mobile-bar { display: none; background: var(--red); padding: 12px 16px; width: 100%; }
.auth-page .auth-mobile-bar img { height: 26px; filter: brightness(0) invert(1); }

/* ═════ 注册 / 找回密码 / 删除手机号 共用组件（2026-11-07） ═════ */

/* 求助行：无法注册请电话联系… */
.auth-page .auth-help { margin-top: 14px; text-align: center; font-size: 13px; color: var(--sub); }
.auth-page .auth-help a { color: var(--red); text-decoration: none; font-weight: 500; }

/* 分段选项卡（注册方式）；JS 只认 .tab-item / .active */
.auth-page .auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 22px;
  background: var(--bg); border-radius: 10px;
}
.auth-page .auth-tabs .tab-item { flex: 1; text-align: center; border-radius: 8px; cursor: pointer; transition: background-color .2s; }
.auth-page .auth-tabs .tab-item a { display: block; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--sub); text-decoration: none; }
.auth-page .auth-tabs .tab-item:not(.active):hover a { color: var(--red); }
.auth-page .auth-tabs .tab-item.active { background: var(--red); }
.auth-page .auth-tabs .tab-item.active a { color: #fff; }

/* 二维码 */
.auth-page .auth-qr { text-align: center; }
.auth-page .auth-qr-box { display: inline-block; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.auth-page .auth-qr-box img { display: block; width: 180px; height: 180px; }
.auth-page .auth-qr-link { margin-top: 10px; font-size: 12px; }
.auth-page .auth-qr-link a { color: var(--sub); text-decoration: none; }
.auth-page .auth-qr-link a:hover { color: var(--red); }

/* 说明框 */
.auth-page .auth-tips {
  margin-top: 18px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #f8fafc;
  font-size: 13px; line-height: 1.85; color: var(--sub); text-align: left;
}
.auth-page .auth-tips b { color: var(--text); font-weight: 600; }
.auth-page .auth-tips ol { padding-left: 18px; }
.auth-page .auth-tips ol li { list-style: decimal; } /* layui.css 把 li 设成了 none */

/* 输入框 + 按钮/图片一行（短信验证码、图形验证码） */
.auth-page .f-code { display: flex; gap: 10px; align-items: flex-start; }
.auth-page .f-code > .f-wrap { flex: 1; min-width: 0; }
.auth-page .f-code-btn {
  flex: none; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--red); font-size: 14px; line-height: 43px; white-space: nowrap;
  cursor: pointer; transition: border-color .2s;
}
.auth-page .f-code-btn:hover { border-color: var(--red); color: var(--red); }
.auth-page .f-code-btn.layui-btn-disabled,
.auth-page .f-code-btn:disabled { color: #94a3b8; border-color: var(--border); cursor: not-allowed; }
.auth-page .f-code-img {
  flex: none; width: 120px; height: 46px;
  border: 1.5px solid var(--border); border-radius: 10px; object-fit: cover; cursor: pointer;
}
/* 注册页的字段下面没有提示行，单独拉开间距（登录/绑定页的提示行自带高度） */
.auth-page .company-register .f-field { margin-bottom: 16px; }
/* 没有左侧图标的输入框 */
.auth-page .f-wrap.no-icon input,
.auth-page .f-wrap.no-icon .layui-input { padding-left: 14px !important; }

/* 只读值（如找回密码第 2 步的账号、删除手机号的号码） */
.auth-page .f-static {
  display: flex; align-items: center; min-height: 46px; padding: 0 14px;
  border-radius: 10px; background: var(--bg);
  color: var(--text); font-size: 15px; font-weight: 500; word-break: break-all;
}

/* 小号说明文字、找回密码的多账号"全选"行（账号条目由页面 JS 生成） */
.auth-page .f-note { margin-top: 2px; font-size: 12px; color: #94a3b8; }
.auth-page .check-label.psw-all {
  display: flex; /* 盖过 .f-field > label 的 block */
  margin-bottom: 8px; padding: 9px 12px;
  border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; font-size: 13px;
}
.auth-page #pswAccountsCount { font-size: 12px; color: #94a3b8; }

/* validate.js 的提示行与错误态：输入框后紧跟 .my_msg，脚本用 .next() 找它 */
.auth-page .my_msg { display: block; min-height: 22px; padding: 5px 0 0 2px; font-size: 12px; line-height: 1.5; color: #ff4d4f; }
.auth-page .my_errorC,
.auth-page .f-wrap input.my_errorC,
.auth-page .fi input.my_errorC { border-color: #ff4d4f !important; box-shadow: 0 0 0 3px rgba(255,77,79,.08) !important; }

/* 步骤条：<ol class="auth-steps"><li data-step="1" class="is-done|is-active">…</li></ol> */
.auth-page .auth-steps { display: flex; margin-bottom: 24px; list-style: none; }
.auth-page .auth-steps li {
  position: relative; flex: 1; padding-top: 36px;
  text-align: center; font-size: 13px; color: #94a3b8;
}
.auth-page .auth-steps li::before {
  content: attr(data-step);
  position: absolute; top: 0; left: 50%; z-index: 1;
  width: 28px; height: 28px; margin-left: -14px;
  border: 1.5px solid #cbd5e1; border-radius: 50%; background: #fff;
  color: #94a3b8; font-size: 13px; font-weight: 600; line-height: 25px; text-align: center;
}
.auth-page .auth-steps li + li::after {
  content: ""; position: absolute; top: 13px; right: 50%;
  width: 100%; height: 1.5px; background: var(--border);
}
.auth-page .auth-steps li.is-active { color: var(--red); font-weight: 600; }
.auth-page .auth-steps li.is-active::before { border-color: var(--red); background: var(--red); color: #fff; }
.auth-page .auth-steps li.is-done { color: var(--text); }
.auth-page .auth-steps li.is-done::before { content: "✓"; border-color: var(--red); color: var(--red); }
.auth-page .auth-steps li.is-done::after,
.auth-page .auth-steps li.is-active::after { background: var(--red); }

/* 注册页：手机端只显示手机号注册，电脑端默认微信扫码（JS 也会按窗口切换） */
@media (max-width: 768px) {
  .auth-page .reg-type-tabs { display: none; }
  .auth-page .company-register { display: block !important; }
  .auth-page .wechat-register { display: none !important; }
}
@media (min-width: 769px) {
  .auth-page .wechat-register { display: block; }
  .auth-page .company-register { display: none; }
}

/* ── 宽表单页（注册第 2 步：完善公司资料） ── */
body.auth-page.auth-wide { justify-content: flex-start; padding: 0 0 8px; }
.auth-page .auth-topbar { width: 100%; background: var(--red); }
.auth-page .auth-topbar-inner {
  max-width: 760px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.auth-page .auth-topbar img { display: block; height: 26px; filter: brightness(0) invert(1); }
.auth-page .auth-topbar-right { font-size: 13px; color: rgba(255,255,255,.78); }
.auth-page .auth-topbar-right a { margin-left: 6px; color: #fff; text-decoration: none; }
.auth-page .auth-wide-main { width: 100%; max-width: 760px; padding: 24px 16px 0; }
.auth-page .auth-wide-main .form-head { margin-bottom: 18px; }
.auth-page .auth-section,
.auth-page .lic-card {
  margin-bottom: 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: none;
}
.auth-page .auth-section-title,
.auth-page .lic-card-title {
  display: flex; align-items: center; gap: 8px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 600; color: var(--text);
}
.auth-page .auth-section-body,
.auth-page .lic-card-body { padding: 20px; }
.auth-page .tag-req,
.auth-page .tag-opt { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 400; }
.auth-page .tag-req { color: #fff; background: var(--red); }
.auth-page .tag-opt,
.auth-page .lic-card-title .badge-opt { color: var(--sub); background: var(--bg); }

/* 宽表单的字段（营业执照组件 license_upload.html 里也用 .fi） */
.auth-page .fi { margin-bottom: 16px; }
.auth-page .fi:last-child { margin-bottom: 0; }
.auth-page .fi > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.auth-page .fi label .req { margin-right: 3px; color: var(--red); }
.auth-page .fi label .tip { margin-left: 4px; font-size: 12px; font-weight: 400; color: #94a3b8; }
.auth-page .fi input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.auth-page .fi textarea {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fafbfc;
  color: var(--text); font-size: 15px; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.auth-page .fi textarea { height: auto; min-height: 100px; padding: 10px 14px; resize: vertical; }
.auth-page .fi input:focus,
.auth-page .fi textarea:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(198,40,40,.09); }
.auth-page .fi input[readonly] { background: var(--bg); color: var(--sub); cursor: not-allowed; }
.auth-page .fi input::placeholder,
.auth-page .fi textarea::placeholder { color: #c0c8d4; }
.auth-page .fi .sub-tip { margin-top: 2px; font-size: 12px; color: var(--sub); }
.auth-page .fi .warn-box {
  margin-top: 6px; padding: 9px 12px;
  border: 1px solid #ffd591; border-radius: 8px; background: #fff7e6;
  color: #ad6800; font-size: 12px; line-height: 1.7;
}
.auth-page .fi-row { display: flex; gap: 16px; }
.auth-page .fi-row .fi { flex: 1; min-width: 0; }
.auth-page .auth-section .agree-row { justify-content: flex-start; }
/* 营业执照组件里的提示框/按钮改成站点配色（组件文件本身不动） */
.auth-page .lic-skip-tip { background: #f8fafc; border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 8px; color: var(--text); }
.auth-page .lic-btn-primary { background: var(--red); color: #fff; }
.auth-page .lic-btn-primary:hover { background: var(--red-dark); }
.auth-page .lic-skipped-note { border-radius: 8px; }
.auth-page .lic-card .layui-btn-danger { background-color: var(--red); border-radius: 8px; }
.auth-page .lic-card .layui-btn-danger:hover { background-color: var(--red-dark); opacity: 1; }
.auth-page .lic-upload-area { border-color: #cbd5e1; border-radius: 10px; background: #f8fafc; }
.auth-page .lic-upload-area:hover { border-color: var(--red); background: #fff; }

@media (max-width: 767px) {
  body.auth-page { padding: 0; justify-content: flex-start; background: #fff; }
  .auth-page .auth-mobile-bar { display: block; }
  .auth-page .login-card { flex-direction: column; border-radius: 0; box-shadow: none; border: 0; min-height: auto; }
  .auth-page .brand-panel { display: none; }
  .auth-page .form-panel { padding: 28px 20px; }
  .auth-page .auth-footer { padding: 16px 0 24px; }
  /* 右侧"在线咨询"浮钮（sellinfo.js）在手机上挪到底部，避免挡住表单 */
  body.auth-page #sellLinkinfo_hide, body.auth-page #sellLinkinfo { top: unset; bottom: 100px; }
  body.auth-page.auth-wide { background: var(--bg); }
  .auth-page .auth-wide-main { padding: 16px 12px 0; }
  .auth-page .auth-section-body,
  .auth-page .lic-card-body { padding: 16px; }
  .auth-page .auth-section-title,
  .auth-page .lic-card-title { padding: 13px 16px; }
}
@media (max-width: 500px) {
  .auth-page .fi-row { flex-direction: column; gap: 0; }
  .auth-page .f-code-img { width: 100px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .auth-page .login-card { max-width: 720px; }
  .auth-page .brand-panel { width: 280px; }
  .auth-page .form-panel { padding: 40px 32px; }
}