/* 这里随便写自定义css样式 */
/* ══════════════════════════════════════════════════════════════
 *  蓝星云 — 自定义样式（已合并）
 *  最后更新：2026-09
 *
 *  说明
 *    · 原 custom.css 里的所有规则已按所属页面，物理合并进对应的
 *      构建文件（app.9a999ca1.css 及各 chunk-*.css），不再放在这里。
 *      对照表：
 *        首页 Banner / 版权         → chunk-e9f9df92.9f3e51a6.css
 *        登录注册页                 → chunk-7e75c5a6 / chunk-a5232a28 / chunk-7f320228
 *        公告弹窗 / 加载层 / 弹窗间距 → app.9a999ca1.css
 *        支付方式按钮 / 订单页       → chunk-7f630ca2.3e588de0.css
 *        悬浮支付底栏 / 分段选择器   → chunk-3fb9b540.1661c444.css / chunk-12847396.a82ec784.css
 *        套餐互换 / 续费小字 / 导入按钮 / 未订阅遮罩 → chunk-23c167f4.596d89fc.css / chunk-f19f8d94.fc00ebf5.css
 *        仪表盘圆环卡片 / 未支付提示  → chunk-f19f8d94.fc00ebf5.css
 *        个人中心钱包布局           → chunk-64491bb5.6f1ab7b9.css
 *        滚动条抖动修复 / 侧边栏图标 → chunk-d259e240.2d97752d.css
 *
 *    · ⚠️ 重要：这些 chunk-*.css 是带构建哈希的编译产物，下次重新
 *      构建（npm run build）文件名和内容都会被覆盖，这里合并进去的
 *      内容会跟着丢失。如果站点会自动/定期重新构建，建议改回把这份
 *      文件当作后台"自定义 CSS"单独维护，而不是长期依赖这次合并的
 *      版本。
 *
 *    · 使用教程（知识库）的样式已内嵌在 chunk-658d0690 中由 JS 注入。
 *    · QQ 客服挂件的定位写在自定义页脚 HTML 的内联样式里，不在本文件。
 * ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
 *  登录 / 注册 / 找回密码页 — 三项修复
 *  放在这里是为了绕开「改了 chunk 但没生效」的部署问题：
 *  custom.css 全站最后加载 + !important，一定覆盖得到。
 *  若确认 chunk-a5232a28 / 7f320228 / 7e75c5a6 已生效，这段可删。
 * ══════════════════════════════════════════════════════════════ */

/* ── 1. 消除左右滚动条抽搐 ──
   根因：.ant-form-explain 是 position:absolute; width:100%，
   而它的定位参照物是 .right-form（带左右内边距的整个右栏），
   不是输入框。校验提示一出现宽度就超出右边界 → 撑出横向滚动条，
   提示消失又收回 → 于是一闪一闪。
   让表单项自己成为定位参照物即可从根上解决。 */
.auth-container .right-form .control,
.auth-container .right-form .ant-form-item {
  position: relative !important;
}

.auth-container .right-form .ant-form-explain {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
  box-sizing: border-box !important;
}

/* ── 1b. 滚动条反馈循环（横向滚动条「抽搐」）──
   现象：只在 F12 / 检查器打开、视口变窄时出现，全屏和手机正常。
   成因：内容比视口宽一点点 → body 出现横向滚动条 → 可用高度减少
         → 内容变高触发纵向滚动条 → 宽度再减少 → 横向溢出加剧 …
         两个滚动条互相触发，来回震荡，表现为「抽搐」。
   解法：auth 页本来就是整屏 height:100vh、内部自己滚动，
         不该让 body 参与滚动。把溢出锁在 .auth-container 内，
         body 层不再产生滚动条，循环被打断。 */
.auth-container {
  height: 100vh !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.auth-container .auth-box {
  overflow: hidden !important;
  max-width: 100% !important;
}

body:has(.auth-container) {
  overflow: hidden !important;
}
/* :has() 兜底（Safari 15.3 / Chrome 104 及更早）：老浏览器忽略上面那条，
   靠 .auth-container 自身的 overflow:hidden 同样挡得住，不会锁死或白屏。 */

.auth-container .right-form {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;      /* 预留竖向滚动条槽位，消除宽度抖动 */
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.auth-container .right-form .wrapper {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 2. 输入框与占位符对比度 ──
   原来是浅灰底 + 透明边框，边界和占位文字都糊在一起。
   改成白底 + 实线边框；占位符从 antd 默认 #bfbfbf 加深到 #86868b。 */
.auth-container .right-form .input,
.auth-container .right-form .input.ant-input-affix-wrapper {
  background: #fff !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: 12px !important;
  transition: border-color .2s, box-shadow .2s !important;
}

.auth-container .right-form .input:hover {
  border-color: #b0b0b8 !important;
}

.auth-container .right-form .input:focus-within {
  border-color: rgba(var(--primary-color), 1) !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .12) !important;
}

.auth-container .right-form .input .ant-input {
  height: 46px !important;
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 占位符加深 —— 分开写，浏览器遇到不认识的选择器会整条丢弃 */
.auth-container .right-form .input .ant-input::-webkit-input-placeholder {
  color: #86868b !important;
  opacity: 1 !important;
}
.auth-container .right-form .input .ant-input::-moz-placeholder {
  color: #86868b !important;
  opacity: 1 !important;
}
.auth-container .right-form .input .ant-input:-ms-input-placeholder {
  color: #86868b !important;
  opacity: 1 !important;
}
.auth-container .right-form .input .ant-input::placeholder {
  color: #86868b !important;
  opacity: 1 !important;
}

/* ── 3. 立即注册 / 立即登录 / 返回登录 → 实心蓝方形按钮 ──
   与主按钮同一套视觉，只是小一号。
   「忘记密码？」在 .agree 里，不受影响，仍是纯文字链接。 */
.auth-container .tip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.auth-container .tip a.blu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(var(--primary-color), 1) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 113, 227, .24) !important;
  transition: background .2s, box-shadow .2s, transform .15s !important;
}

.auth-container .tip a.blu:hover {
  background: #0058b8 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 113, 227, .30) !important;
  transform: translateY(-1px) !important;
}

.auth-container .tip a.blu:active {
  transform: translateY(0) scale(.98) !important;
}