/* ===================================================================
   login.css — cany_spike Spike 卡片居中风格
   =================================================================== */

/* ===== 页面 ===== */
/* 覆盖 spike-layout.css 的全局约束（仅登录/注册/找回密码页生效）*/
body {
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
  margin: 0;
  padding: 0;
  background: #f0f5f9;
  min-width: 0 !important;
}

.template {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

#login, #regist, #forget {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* 装饰圆 */
#login::before, #regist::before, #forget::before {
  content: '';
  position: fixed;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(81, 177, 255, 0.35);
  pointer-events: none;
  z-index: 0;
}

#login::after, #regist::after, #forget::after {
  content: '';
  position: fixed;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(250, 137, 107, 0.35);
  pointer-events: none;
  z-index: 0;
}

/* ===== 卡片容器（基准：1440px ~ 1919px）===== */
.login-wrap {
  display: flex;
  width: 100%;
  max-width: min(1100px, calc(100vw - 40px));
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: clamp(520px, 76vh, 760px);
  box-shadow: 0 2px 30px 15px #2553b91a;
}

/* ===== 左侧装饰区（无背景色）===== */
.login-side {
  flex: 0 0 42%;
  background: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.side-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.side-logo {
  position: absolute;
  top: clamp(24px, 3vh, 36px);
  left: clamp(24px, 3vw, 40px);
}

.side-logo img {
  height: clamp(50px, 3.2vh, 40px);
  width: auto;
  object-fit: contain;
}

/* 左侧文字已移至右侧，此处隐藏 */
.side-headline {
  display: none;
}

.side-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: clamp(18px, 10%, 56px);
}

.side-img-security {
  width: clamp(280px, 88%, 500px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* 背景装饰图（卡片内左下角）*/
.side-shap {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: clamp(160px, 45%, 260px);
  opacity: 0.12;
  pointer-events: none;
}

/* ===== 右侧主区域 ===== */
.login-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
  padding: 0 clamp(16px, 2.5%, 32px);
  box-sizing: border-box;
}

/* ===== 顶部操作栏 ===== */
.login-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(16px, 2.2vh, 28px) 12px;
  flex-shrink: 0;
}

.login-topbar .lang-box {
  display: flex;
  gap: 8px;
}

.login-topbar .lang-box span {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary, #707a82);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.2s;
}

.login-topbar .lang-box span.active,
.login-topbar .lang-box span:hover {
  color: var(--color-primary, #fa896b);
  background: rgba(250, 137, 107, 0.1);
}

.login-topbar .el-button {
  border-radius: 20px !important;
  font-size: 13px !important;
}

.login-topbar .el-button a {
  color: inherit;
  text-decoration: none;
}

/* ===== 登录卡片区 ===== */
.login-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0 40px;
}

.login-card-header {
  width: 100%;
  max-width: 460px;
  margin-bottom: 28px;
}

.login-title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--color-text-primary, #2a3547);
  margin: 0 0 6px;
  line-height: 1.3;
}

.login-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary, #707a82);
  margin: 0;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-primary, #fa896b);
  display: inline-block;
}

.login-link {
  color: var(--color-primary, #fa896b);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.login-link:hover {
  text-decoration: underline;
}

/* ===== 登录表单 ===== */
.login-form {
  width: 100%;
  max-width: 460px;
}

/* 邮箱/手机切换 tab */
.login-top {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-border, #e5eaef);
  padding-bottom: 0;
}

.login-email,
.login-phone {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary, #707a82);
  cursor: pointer;
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.login-email.active,
.login-phone.active {
  color: var(--color-primary, #fa896b);
  border-bottom-color: var(--color-primary, #fa896b);
  font-weight: 600;
}

/* 表单项 */
.form-main .form-item {
  margin-bottom: 18px;
}

.form-main .el-input__inner {
  height: 51px !important;
  line-height: 51px !important;
  border-radius: 10px !important;
  border-color: var(--color-input-border, #dfe5ef) !important;
  font-size: 14px !important;
  font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
  background: var(--color-bg-light, #f5f8fb) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-main .el-input__inner:focus {
  border-color: var(--color-primary, #fa896b) !important;
  box-shadow: 0 0 0 3px rgba(250, 137, 107, 0.15) !important;
  background: #fff !important;
}

/* 手机号前缀选择器——一体化输入框 */
.select-input.el-input-group {
  width: 100% !important;
}

.select-input .el-input-group__prepend {
  background: var(--color-bg-light, #f5f8fb) !important;
  border-color: var(--color-input-border, #dfe5ef) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 0 !important;
  width: 88px !important;
  min-width: 88px !important;
  transition: border-color 0.2s !important;
} 

.select-input .el-input-group__prepend .el-select {
  width: 88px !important;
  margin: 0 !important;
}

.select-input .el-input-group__prepend .el-select .el-input__inner {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  padding: 0 22px 0 8px !important;
  font-size: 13px !important;
  height: 49px !important;
  line-height: 51px !important;
  width: 88px !important;
  box-shadow: none !important;
}

/* 手机号输入框：去掉左边框并采用右圆角，与 prepend 拼合为一体 */
.select-input.el-input-group > .el-input__inner {
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  transition: border-color 0.2s !important;
}

/* 整体获得焦点时一起高亮 */
.select-input.el-input-group:focus-within .el-input-group__prepend {
  border-color: var(--color-primary, #fa896b) !important;
  background: #fff !important;
}

.select-input.el-input-group:focus-within > .el-input__inner {
  border-color: var(--color-primary, #fa896b) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* 区号下拉弹层（配合 PHP 中 popper-class="country-select-drop"）*/
.country-select-drop {
  min-width: 220px !important;
}

.country-select-drop .el-select-dropdown__item {
  font-size: 13px !important;
}

/* 验证码输入行 */
.code-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.code-item .el-input {
  flex: 1;
}

.code-btn {
  flex-shrink: 0;
  height: 51px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  white-space: nowrap;
  background: var(--color-primary, #fa896b) !important;
  border-color: var(--color-primary, #fa896b) !important;
  color: #fff !important;
  padding: 0 16px !important;
}

.code-btn:hover,
.code-btn:focus {
  background: rgba(250, 137, 107, 0.85) !important;
  border-color: var(--color-primary, #fa896b) !important;
  color: #fff !important;
}

/* 同意条款行 */
.rember-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 14px !important;
}

.rember-item .el-checkbox {
  margin-bottom: 0 !important;
  margin-right: 4px !important;
  line-height: 1.5 !important;
  height: auto !important;
  flex: 1;
  min-width: 0;
}

.rember-item .el-checkbox__inner {
  vertical-align: -2px;
}

.rember-item > span:last-child {
  margin-left: auto;
  flex-shrink: 0;
}

.read-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary, #707a82);
}

.read-text a {
  color: var(--color-primary, #fa896b);
  cursor: pointer;
  font-weight: 500;
}

.rember-item > span:last-child a {
  font-size: 13px;
  color: var(--color-primary, #fa896b);
  cursor: pointer;
  white-space: nowrap;
}

/* checkbox 内链接颜色 */
.rember-item .el-checkbox__label a {
  color: var(--color-primary, #fa896b);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.rember-item .el-checkbox__label a:hover {
  text-decoration: underline;
}

/* checkbox 勾选态 - 框体颜色（覆盖全部表单内 checkbox） */
.rember-item .el-checkbox__input.is-checked .el-checkbox__inner,
.rember-item .el-checkbox__input.is-indeterminate .el-checkbox__inner,
.login-form .el-checkbox__input.is-checked .el-checkbox__inner,
.login-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-primary, #fa896b) !important;
  border-color: var(--color-primary, #fa896b) !important;
}

/* checkbox 聚焦边框色 */
.rember-item .el-checkbox__input.is-focus .el-checkbox__inner,
.login-form .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: var(--color-primary, #fa896b) !important;
}

/* checkbox 勾选态 - 标签字色 */
.rember-item .el-checkbox.is-checked .el-checkbox__label,
.login-form .el-checkbox.is-checked .el-checkbox__label {
  color: var(--color-primary, #fa896b) !important;
}

/* 错误提示 */
.read-item {
  margin-bottom: 14px;
}

.read-item .el-alert {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  background-color: rgba(255, 73, 73, 0.06) !important;
  border: 1px solid rgba(255, 73, 73, 0.18) !important;
}

.read-item .el-alert .el-alert__title {
  font-size: 13px !important;
  color: #f44336 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.read-item .el-alert .el-alert__icon {
  font-size: 16px !important;
  width: 16px !important;
  color: #f44336 !important;
}

/* 登录按钮 */
.login-btn {
  width: 100% !important;
  height: 51px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 25px !important;
  background: var(--color-primary, #fa896b) !important;
  border-color: var(--color-primary, #fa896b) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(250, 137, 107, 0.4) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.3px;
}

.login-btn:hover {
  background: #e8795d !important;
  border-color: #e8795d !important;
  box-shadow: 0 6px 20px rgba(250, 137, 107, 0.5) !important;
  transform: translateY(-1px);
}

/* 切换登录方式按钮 */
.pass-btn {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  margin-top: 10px !important;
  margin-left: 0 !important;
  border-radius: 22px !important;
  font-size: 14px !important;
  background: #fff !important;
  border-color: var(--color-border, #e5eaef) !important;
  color: var(--color-text-primary, #2a3547) !important;
}

.pass-btn:hover {
  border-color: var(--color-primary, #fa896b) !important;
  color: var(--color-primary, #fa896b) !important;
}

/* 第三方登录分隔线 */
.line-item .el-divider__text {
  font-size: 12px;
  color: var(--color-text-secondary, #707a82);
  background: #fff;
  padding: 0 12px;
}

/* 第三方登录图标 */
.login-type {
  display: flex !important;
  gap: 14px;
  justify-content: center;
}

.oauth-item {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5eaef);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.oauth-item:hover {
  border-color: var(--color-primary, #fa896b);
  box-shadow: 0 2px 8px rgba(250, 137, 107, 0.2);
  transform: translateY(-2px);
}

.oauth-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ===== 微信扫码角标（在 topbar 内作为 flex item）===== */
.qr-code {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}

.qr-code:hover {
  background: rgba(250, 137, 107, 0.1);
}

.login-icon,
.qr-code .icon {
  display: block;
}

/* ===== 二维码区域 ===== */
.qr-box {
  text-align: center;
  padding: 20px 0;
}

.qr-box-img {
  width: 200px;
  height: 200px;
  margin: 0 auto 12px;
  border-radius: 12px;
  border: 2px solid var(--color-border, #e5eaef);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-expire-time {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-secondary, #707a82);
}

.qr-box-tips {
  font-size: 13px;
  color: var(--color-text-secondary, #707a82);
}

.qr-box-back {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-primary, #fa896b);
  margin-bottom: 16px;
}

.qr-box-select-account-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #2a3547);
  margin-bottom: 16px;
}

/* ===== 响应式（6 档断点，从小到大）===== */

/* ① 手机竖屏（极窄）< 480px */
@media (max-width: 479px) {
  .login-side {
    display: none;
  }
  .login-wrap {
    width: calc(100vw - 24px);
    max-width: 440px;
    height: auto;
    min-height: 520px;
    border-radius: 12px;
  }
  .login-main {
    padding: 0 16px;
  }
  .login-card {
    padding: 24px 0;
    align-items: center;
  }
  .login-card-header,
  .login-form {
    max-width: 100%;
  }
}

/* ② 手机横屏 / 小屏  480px ~ 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .login-side {
    display: none;
  }
  .login-wrap {
    width: calc(100vw - 40px);
    max-width: 560px;
    height: auto;
    min-height: 500px;
    border-radius: 14px;
  }
  .login-main {
    padding: 0 20px;
  }
  .login-card {
    padding: 28px 0;
    align-items: center;
  }
  .login-card-header,
  .login-form {
    max-width: 100%;
  }
}

/* ③ 平板 / 小屏  768px ~ 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .login-side {
    display: none;
  }
  .login-wrap {
    width: calc(100vw - 48px);
    max-width: 680px;
    height: auto;
    min-height: 480px;
  }
  .login-main {
    padding: 0 24px;
  }
  .login-card {
    padding: 28px 0;
    align-items: center;
  }
  .login-card-header,
  .login-form {
    max-width: 100%;
  }
}

/* ④ 小笔记本 / 1024宽屏  1024px ~ 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .login-wrap {
    max-width: 860px;
    height: clamp(480px, 80vh, 640px);
  }
  .login-side {
    flex: 0 0 38%;
  }
  .login-card-header,
  .login-form {
    max-width: 380px;
  }
  .side-img-security {
    width: clamp(220px, 84%, 360px);
  }
}

/* ⑤ 标准笔记本  1280px ~ 1439px */
@media (min-width: 1280px) and (max-width: 1439px) {
  .login-wrap {
    max-width: 980px;
    height: clamp(500px, 78vh, 700px);
  }
  .login-side { 
    flex: 0 0 40%;
  }
  .login-card-header,
  .login-form {
    max-width: 420px;
  }
  .side-img-security {
    width: clamp(240px, 86%, 420px);
  }
}

/* ⑥ FHD 大屏  1440px ~ 1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .login-wrap {
    max-width: 1200px;
    height: clamp(520px, 88vh, 760px);
  }
  .login-side {
    flex: 0 0 42%;
  }
  .login-card-header,
  .login-form {
    max-width: 460px;
  }
}

/* ⑦ 2K / 4K 超宽屏  ≥ 1920px */
@media (min-width: 1920px) {
  .login-wrap {
    max-width: 1200px;
    height: clamp(540px, 72vh, 820px);
  }
  .login-side {
    flex: 0 0 42%;
  }
  .login-card-header,
  .login-form {
    max-width: 480px;
  }
  .side-img-security {
    width: clamp(300px, 88%, 520px);
  }
}

/* ===== 公共保留样式 ===== */
.lang-option {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.lang-option .lang-img {
  width: 30px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

/* ===== 注册/找回密码：卡片支持内部滚动 ===== */
.login-card-scroll {
  justify-content: flex-start;
  overflow-y: auto;
  padding-bottom: 40px !important;
  padding-right: 4px !important;
}

.login-card-scroll::-webkit-scrollbar {
  width: 4px;
}

.login-card-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5eaef);
  border-radius: 2px;
}

/* 注册跳转链接行（在 login-subtitle 下方）*/
.login-to-regist {
  font-size: 13px;
  color: var(--color-text-secondary, #707a82);
  margin: 10px 0 0;
}

/* regist/forget 自定义表单组件 */
.custom-form .el-form-item__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary, #2a3547) !important;
  padding-bottom: 4px !important;
}

.custom-form .el-select {
  width: 100% !important;
}