/*
 * 爱慕云网络客服系统 · 账号页视觉
 *
 * 本文件是后台登录页 frontend/naive-admin/src/views/login/index.vue 中
 * scoped Less 样式的纯 CSS 等价实现，供 PHP 页面（首页、安装向导、
 * 商户注册与登录）复用同一套视觉，避免出现两种风格。
 *
 * 与源文件的对应关系：
 *   .view-account            → 渐变底 + 两层 SVG 点阵纹理
 *   .view-account-background → 线条 / 方块 / 三角 / 三层波浪装饰
 *   .view-account-container  → 居中白卡，hover 上浮
 *   .view-account-title      → 标题下方 40px 渐变短线
 * 装饰用的 base64 SVG 与动画时长、透明度均与源文件保持一致，
 * 改动其中任一处时请同步另一侧，否则两端视觉会漂移。
 */

/* ---------- 基础重置 ----------
 * 登录页运行在 Vue 应用内，全局重置由 naive-ui 提供。
 * PHP 页面没有这一层，必须自己声明，否则浏览器默认的
 * body margin 8px 会导致横向溢出，手机上出现左右滑动和白边。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 防止 iOS 横竖屏切换时自动放大字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.view-account {
  margin: 0;
  color: #20242b;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
}

/* 输入类元素必须允许选择与聚焦。
 * 部分国产浏览器内核对祖先元素的 user-select 继承处理不一致，
 * 这里显式放开，避免点击后无法聚焦导致键盘不弹出。 */
input,
select,
textarea,
button,
a {
  -webkit-user-select: auto;
  user-select: auto;
  /* 关闭双击缩放，消除 300ms 点击延迟 */
  touch-action: manipulation;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- 页面底层 ---------- */

.view-account {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  background-color: #f0f2f5;
  background: linear-gradient(140deg, #e8f1fa, #c2d9ec, #a1c3e0, #80aed3);
  position: relative;
}

/* 两层纹理铺满整个视口。必须声明 pointer-events: none，
 * 否则它们会盖在表单之上吃掉点击事件，手机上表现为
 * 点击输入框无法聚焦、键盘不弹出。 */
.view-account::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIC8+Cjwvc3ZnPg==');
  opacity: 0.6;
  z-index: 0;
}

.view-account::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICA8cmVjdCB4PSI1MCIgeT0iNTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTUgNTUpIiBmaWxsPSJyZ2JhKDQ1LCAxNDAsIDI0MCwgMC4wNSkiIC8+Cjwvc3ZnPg==');
  opacity: 0.8;
  z-index: 0;
}

/* ---------- 装饰层 ---------- */

.view-account-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.view-account-background .line {
  position: absolute;
  background: linear-gradient(90deg, rgba(45, 140, 240, 0.2), rgba(0, 129, 255, 0.1));
}

.view-account-background .line-1 {
  width: 300px;
  height: 2px;
  top: 15%;
  right: 5%;
  transform: rotate(-30deg);
  animation: account-pulse 8s ease-in-out infinite;
}

.view-account-background .line-2 {
  width: 200px;
  height: 2px;
  bottom: 20%;
  left: 10%;
  transform: rotate(45deg);
  animation: account-pulse 6s ease-in-out infinite 1s;
}

.view-account-background .line-3 {
  width: 150px;
  height: 2px;
  top: 40%;
  left: 5%;
  transform: rotate(-15deg);
  animation: account-pulse 7s ease-in-out infinite 2s;
}

.view-account-background .square {
  position: absolute;
}

.view-account-background .square-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 15%;
  background: linear-gradient(45deg, rgba(45, 140, 240, 0.15), rgba(0, 129, 255, 0.05));
  transform: rotate(30deg);
  animation: account-rotate 15s linear infinite;
}

.view-account-background .square-2 {
  width: 60px;
  height: 60px;
  bottom: 15%;
  right: 10%;
  border: 2px solid rgba(45, 140, 240, 0.1);
  background: transparent;
  animation: account-rotate 12s linear infinite reverse;
}

.view-account-background .triangle {
  position: absolute;
  bottom: 30%;
  right: 20%;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid rgba(45, 140, 240, 0.08);
  animation: account-float 10s ease-in-out infinite;
}

.view-account-background .wave {
  position: absolute;
  opacity: 0.3;
  transform-origin: bottom left;
}

.view-account-background .wave-1 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIGQ9Ik0wLDMyMEMwLDI0MCA0MCwxNjAgODAsMTYwQzEyMCwxNjAgMTYwLDI0MCAyMDAsMjQwQzI0MCwyNDAgMjgwLDE2MCAzMjAsMTYwQzM2MCwxNjAgNDAwLDI0MCA0NDAsMjQwQzQ4MCwyNDAgNTIwLDE2MCA1NjAsMTYwQzYwMCwxNjAgNjQwLDI0MCA2ODAsMjQwQzcyMCwyNDAgNzYwLDE2MCA4MDAsMTYwQzg0MCwxNjAgODgwLDI0MCA5MjAsMjQwQzk2MCwyNDAgMTAwMCwxNjAgMTA0MCwxNjBDMTA4MCwxNjAgMTEyMCwyNDAgMTE2MCwyNDBDMTIwMCwyNDAgMTI0MCwxNjAgMTI4MCwxNjBDMTMyMCwxNjAgMTM2MCwyNDAgMTQwMCwyNDBDMTQ0MCwyNDAgMTQ0MCwxNjAgMTQ0MCwxNjBMMTQ0MCwzMjBMMCwzMjBaIj48L3BhdGg+PC9zdmc+');
  background-size: 100% 120px;
  animation: account-wave 15s ease-in-out infinite;
  transform: rotate(-2deg);
}

.view-account-background .wave-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMTUpIiBkPSJNMCwzMjBDMCwyNDAgNjAsMTgwIDEyMCwxODBDMTgwLDE4MCAyNDAsMjQwIDMwMCwyNDBDMzYwLDI0MCA0MjAsMTgwIDQ4MCwxODBDNTQwLDE4MCA2MDAsMjQwIDY2MCwyNDBDNzIwLDI0MCA3ODAsMTgwIDg0MCwxODBDOTAwLDE4MCA5NjAsMjQwIDEwMjAsMjQwQzEwODAsMjQwIDExNDAsMTgwIDEyMDAsMTgwQzEyNjAsMTgwIDEzMjAsMjQwIDEzODAsMjQwQzE0NDAsMjQwIDE0NDAsMTgwIDE0NDAsMTgwTDE0NDAsMzIwTDAsMzIwWiI+PC9wYXRoPjwvc3ZnPg==');
  background-size: 100% 100px;
  animation: account-wave 18s ease-in-out infinite;
  animation-delay: -5s;
  transform: rotate(-1deg);
}

.view-account-background .wave-3 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIGQ9Ik0wLDMyMEMwLDI2MCAzMCwyMDAgNjAsMjAwQzkwLDIwMCAxMjAsMjYwIDE1MCwyNjBDMTgwLDI2MCAyMTAsMjAwIDI0MCwyMDBDMjcwLDIwMCAzMDAsMjYwIDMzMCwyNjBDMzYwLDI2MCAzOTAsMjAwIDQyMCwyMDBDNDUwLDIwMCA0ODAsMjYwIDUxMCwyNjBDNTQwLDI2MCA1NzAsMjAwIDYwMCwyMDBDNjMwLDIwMCA2NjAsMjYwIDY5MCwyNjBDNzIwLDI2MCA3NTAsMjAwIDc4MCwyMDBDODEwLDIwMCA4NDAsMjYwIDg3MCwyNjBDOTAwLDI2MCA5MzAsMjAwIDk2MCwyMDBDOTkwLDIwMCAxMDIwLDI2MCAxMDUwLDI2MEMxMDgwLDI2MCAxMTEwLDIwMCAxMTQwLDIwMEMxMTcwLDIwMCAxMjAwLDI2MCAxMjMwLDI2MEMxMjYwLDI2MCAxMjkwLDIwMCAxMzIwLDIwMEMxMzUwLDIwMCAxMzgwLDI2MCAxNDEwLDI2MEMxNDQwLDI2MCAxNDQwLDIwMCAxNDQwLDIwMEwxNDQwLDMyMEwwLDMyMFoiPjwvcGF0aD48L3N2Zz4=');
  background-size: 100% 80px;
  animation: account-wave 20s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes account-pulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

@keyframes account-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes account-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

@keyframes account-wave {
  0% { background-position-x: 0; background-position-y: 100%; }
  50% { background-position-x: 720px; background-position-y: 50%; }
  100% { background-position-x: 1440px; background-position-y: 0%; }
}

@keyframes account-fade-in-down {
  0% { opacity: 0; transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 卡片容器 ---------- */

.view-account-container {
  padding: 32px 40px 20px;
  max-width: 580px;
  width: min(580px, calc(100% - 28px));
  min-width: 0;
  margin: 0 auto;
  margin-top: 10vh;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease;
  animation: account-fade-in-down 0.6s both;
}

.view-account-container:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

/* 安装向导与商户注册的表单比登录框长，放宽上限并抬高卡片位置 */
.view-account-container.is-wide {
  max-width: 860px;
  width: min(860px, calc(100% - 28px));
  margin-top: 6vh;
}

.view-account-container.is-wide:hover {
  transform: none;
}

.view-account-top {
  padding: 10px 0;
  text-align: center;
}

.view-account-top-logo {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.view-account-top-logo img {
  height: 60px;
}

.view-account-top-desc {
  font-size: 14px;
  color: #606266;
}

.view-account-title {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px;
  position: relative;
}

.view-account-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #2d8cf0, #0081ff);
  border-radius: 2px;
}

.login-welcome {
  text-align: center;
  font-size: 14px;
  color: #606266;
  margin-bottom: 30px;
  margin-top: 20px;
}

/* ---------- 卡片内部通用元素 ---------- */

/* 与 n-button type="primary" block 的观感对齐 */
.account-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  color: #fff;
  background: #2d8cf0;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}

.account-button:hover {
  background: #57a3f3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.account-button.is-ghost {
  color: #2d8cf0;
  background: #fff;
  border: 1px solid #dcdee2;
}

.account-button.is-ghost:hover {
  color: #57a3f3;
  border-color: #57a3f3;
  background: #fff;
}

.account-actions {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 520px) {
  .account-actions.is-inline {
    grid-template-columns: 1fr 1fr;
  }
}

.account-section {
  margin-top: 28px;
}

.account-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.account-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.account-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

.account-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2d8cf0;
}

.account-note {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  font-size: 13px;
  line-height: 1.7;
  color: #808695;
  text-align: center;
}

.account-link {
  color: #2d8cf0;
  text-decoration: none;
  transition: all 0.3s;
}

.account-link:hover {
  color: #57a3f3;
  text-decoration: underline;
}

/* ---------- 表单控件 ----------
 * 登录页的输入框由 naive-ui 的 n-input 渲染，PHP 页面没有组件库，
 * 这里用原生控件复刻 n-input 的尺寸、圆角与聚焦态，保证两端观感一致。
 */

.account-form {
  margin-top: 26px;
}

.account-fieldset {
  margin: 0 0 4px;
  padding: 0;
  border: none;
}

.account-fieldset + .account-fieldset {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #f0f2f5;
}

.account-fieldset legend {
  padding: 0;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.account-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .account-grid {
    grid-template-columns: 1fr 1fr;
  }

  .account-grid .is-full {
    grid-column: 1 / -1;
  }
}

.account-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4e5969;
}
.account-field input:not([type='checkbox']),
.account-field select,
.account-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  font-size: 14px;
  color: #1f2329;
  /* 描边式，对齐总后台 naive-ui 的 n-input。
   *
   * 之前这里是填充式（浅灰底 #f7f8fa + 透明边框，聚焦才浮起），
   * 注释还写着「和总后台观感接近」——实际不是。总后台是预构建的
   * naive-ui SPA，n-input 用的是白底 + 可见浅灰描边 + 4px 圆角，
   * 两端摆在一起明显是两套控件。这里按 naive-ui 的实际取值复刻：
   * 边框 #e0e0e6、圆角 4px、hover 蓝色描边、聚焦蓝边加光晕。 */
  background: #fff;
  border: 1px solid #e0e0e6;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-field input::placeholder,
.account-field textarea::placeholder {
  color: #a8abb2;
}
.account-field textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}
/* naive-ui 的 hover 是边框直接转蓝，不改底色。 */
.account-field input:hover,
.account-field select:hover,
.account-field textarea:hover {
  border-color: #2d8cf0;
}
.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus {
  outline: none;
  border-color: #2d8cf0;
  /* 2px 光晕对齐 n-input 的聚焦态，3px 会比总后台明显糊一圈。 */
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
/* 浏览器原生校验失败时给出红框，配合 novalidate 移除后仍有视觉反馈。 */
.account-field input:not(:placeholder-shown):invalid {
  /* 改用 naive-ui 的 error 色，和总后台的报错描边一致。
     底色不用再写 #fff——描边式下默认就是白底。 */
  border-color: #d03050;
}
.account-field input:not(:placeholder-shown):invalid:focus {
  border-color: #d03050;
  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.2);
}
.account-field input:disabled,
.account-field select:disabled {
  background: #f5f7f9;
  color: #c5c8ce;
  cursor: not-allowed;
}
.account-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #808695;
}

.account-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.account-checkbox input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: #2d8cf0;
}

.account-checkbox label {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #606266;
}

button.account-button:disabled {
  background: #c5c8ce;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- 提示条 ---------- */

.account-alert {
  position: relative;
  margin-bottom: 20px;
  /* 左侧留出 40px 放图标，彩色竖条靠 ::before 画。 */
  padding: 13px 16px 13px 42px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  border: 1px solid transparent;
}
/* 图标用纯 CSS 的文字符号，不引外部字体，避免多一次请求。 */
.account-alert::before {
  position: absolute;
  left: 15px;
  top: 13px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.account-alert.is-error {
  color: #a8302a;
  background: #fef0f0;
  border-color: #fbd8d6;
}
.account-alert.is-error::before {
  content: '!';
  background: #f56c6c;
}
.account-alert.is-success {
  color: #1a7f43;
  background: #f0f9f2;
  border-color: #d4eddb;
}
.account-alert.is-success::before {
  content: '\2713';
  background: #52c41a;
}
.account-alert.is-info {
  color: #1c5f96;
  background: #eff6fd;
  border-color: #d3e6f8;
}
.account-alert.is-info::before {
  content: 'i';
  background: #2d8cf0;
  font-style: italic;
}
.account-alert.is-warning {
  color: #96601c;
  background: #fdf6ec;
  border-color: #f8e3c5;
}
.account-alert.is-warning::before {
  content: '!';
  background: #faad14;
}
.account-linkbtn {
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #2d8cf0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  /* 触摸目标不小于 24px，避免手机上点不中。 */
  min-height: 24px;
  touch-action: manipulation;
}

.account-linkbtn:hover,
.account-linkbtn:focus-visible {
  color: #1c6fd0;
}

/* ---------- 轻量弹层（QQ 邮箱提示等） ---------- */

/* 默认隐藏，脚本通过 .is-open 控制。用 display 而非 visibility，
   关闭时彻底脱离命中测试，不会挡住下层输入框——这正是第四批键盘 Bug 的教训。 */
.account-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.account-modal.is-open {
  display: block;
}

.account-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.account-modal-body {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 380px;
  margin: 22vh auto 0;
  padding: 22px 20px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.account-modal-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: #17233d;
}

.account-modal-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #515a6e;
}

.account-modal-sample {
  margin: 0 0 16px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #2d8cf0;
  background: #f5f7fa;
  border-radius: 4px;
  /* 邮箱样例可能较长，允许在任意位置断行而不撑破弹层。 */
  word-break: break-all;
}

/* ---------- 人机验证错误提示（由 captcha.js 动态插入） ---------- */

.captcha-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #c0392b;
  background: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 4px;
}

/* ---------- 环境检查项 ---------- */

.account-checks {
  display: grid;
  gap: 10px;
}

.account-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
  background: #f5f7f9;
  color: #515a6e;
}

.account-check::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #c5c8ce;
}

.account-check.is-pass {
  background: #f0f9eb;
  color: #237804;
}

.account-check.is-pass::before {
  background: #52c41a;
}

.account-check.is-fail {
  background: #fef0f0;
  color: #c0392b;
}

.account-check.is-fail::before {
  background: #f5222d;
}

.account-check.is-optional {
  background: #fdf6ec;
  color: #b06d00;
}

.account-check.is-optional::before {
  background: #faad14;
}

/* ---------- 步骤指示 ---------- */

.account-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.account-steps li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: #808695;
}

.account-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #dcdee2;
  background: #fff;
}

.account-steps li.is-active {
  color: #2d8cf0;
}

.account-steps li.is-active::before {
  border-color: #2d8cf0;
  background: #2d8cf0;
}

/* ---------- 断点，与登录页保持一致 ---------- */

@media (min-width: 768px) {
  .view-account {
    background-image: url('/assets/images/login.svg'),
                      radial-gradient(circle at 10% 20%, rgba(100, 149, 237, 0.25) 0%, rgba(65, 105, 225, 0.2) 40%, rgba(30, 144, 255, 0.1) 90%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
  }

  .view-account::before {
    background: linear-gradient(135deg, rgba(45, 140, 240, 0.1), rgba(45, 140, 240, 0.05));
    background-image: none;
    backdrop-filter: blur(10px);
    opacity: 1;
    pointer-events: none;
  }

  .view-account::after {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZGVmcz4KICA8cGF0dGVybiBpZD0icGF0dGVybiIgeD0iMCIgeT0iMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMzAiIHI9IjEuNSIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIC8+CiAgPC9wYXR0ZXJuPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiIC8+Cjwvc3ZnPg==');
    opacity: 0.3;
    pointer-events: none;
  }

  .view-account-container {
    margin-top: 15vh;
  }

  .view-account-container.is-wide {
    margin-top: 8vh;
  }
}

@media (max-height: 650px) {
  .view-account-container {
    margin-top: 5vh;
  }
}

@media (max-width: 767px) {
  .view-account {
    /* 注册与安装页的表单比视口高，居中会把顶部裁掉导致无法滚到，
     * 因此窄屏改为顶部对齐，靠 padding 留出安全区。 */
    justify-content: flex-start;
    padding: max(14px, env(safe-area-inset-top))
             max(10px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-left));
  }

  .view-account-container {
    width: 100%;
    max-width: 520px;
    min-width: 0;
    margin: 0 auto;
    padding: 26px 20px 15px;
    transform: none !important;
    /* 部分安卓浏览器内核在 backdrop-filter 合成层内会错判子元素的
     * 命中区域，导致点击输入框无法聚焦。手机端改用纯白底，
     * 视觉差异极小但可靠。 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .view-account-container.is-wide {
    max-width: 520px;
  }

  .view-account-title {
    font-size: 21px;
  }

  .account-button {
    min-height: 46px;
  }

  /* iOS Safari 对字号小于 16px 的输入框会在聚焦时自动放大页面，
   * 放大后视口不会复原，表单会错位，所以窄屏统一抬到 16px。 */
  .account-field input:not([type='checkbox']),
  .account-field select,
  .account-field textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* 触控目标按 44px 下限处理 */
  .account-checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }
}

@media (max-width: 360px) {
  .view-account-container {
    padding: 22px 14px 12px;
  }

  .view-account-top-desc {
    font-size: 12px;
  }

  .view-account-top-logo img {
    height: 48px;
  }

  /* 窄屏下两列并排会把按钮压得过窄 */
  .account-actions.is-inline {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .view-account {
    justify-content: flex-start;
  }

  .view-account-container {
    margin: 10px auto;
  }

  .view-account-background {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-account-container,
  .view-account-background * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 登录后强制验证向导（/merchant/verify.php） ---------- */
/* 已完成的步骤用绿色打勾，和 is-active 的蓝色区分。
   序号本身由 .account-steps li::before 的 counter 生成，这里用勾号覆盖。 */
.account-steps li.is-done {
  color: #1f9d55;
}
.account-steps li.is-done::before {
  content: '\2713';
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}

/* 一个验证阶段（手机或邮箱）的容器：内含"发送验证码"和"提交验证码"两个独立 form。 */
.account-verify-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.account-verify-block .account-form {
  margin: 0;
}
/* 两个 form 之间用虚线分隔，避免视觉上误认为是同一个提交。 */
.account-verify-block .account-form + .account-form {
  padding-top: 16px;
  border-top: 1px dashed #e8eaec;
}

/* 显示脱敏后的验证目标（如 138****8000）。 */
.account-verify-target {
  margin: 0;
  padding: 12px 14px;
  border-radius: 4px;
  background: #f8f9fb;
  border: 1px solid #e8eaec;
  font-size: 13px;
  line-height: 1.6;
  color: #515a6e;
}
.account-verify-target strong {
  color: #2d8cf0;
  font-weight: 600;
}

/* 底部退出登录区。 */
.account-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f2f3f5;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 行内输入 + 按钮组（「获取验证码」用）
 *
 * 布局用 flex 而非 grid：按钮宽度要随文案变化（「获取验证码」→
 * 「58 秒后重发」→「重新获取」），固定列宽会在倒计时文案更长时把
 * 输入框挤变形。flex-shrink: 0 保证按钮不被压扁。
 * ------------------------------------------------------------------------- */
.account-inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.account-inline input {
  flex: 1 1 auto;
  min-width: 0; /* 缺这行时 flex 子项不会收缩，窄屏会溢出 */
}
.account-inline-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
  color: #2d8cf0;
  background: #fff;
  /* 圆角必须跟输入框一致（4px）。之前是 8px，输入框改成描边式后
     两个控件并排会一个圆一个方，非常显眼。边框也从透明改为可见，
     否则白底按钮在白底卡片上看不出边界。 */
  border: 1px solid #2d8cf0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.account-inline-btn:hover:not(:disabled) {
  color: #57a3f3;
  border-color: #57a3f3;
  background: #f2f7fe;
}
.account-inline-btn:disabled {
  color: #c5c8ce;
  background: #fafafc;
  border-color: #e0e0e6;
  cursor: not-allowed;
}

/* 提示文案的三种状态。默认灰色在 .account-hint 里已定义。 */
.account-hint.is-success {
  color: #18a058;
}
.account-hint.is-error {
  color: #d03050;
}

/* ---------------------------------------------------------------------------
 * 标签徽标
 *
 * 这两个类在 register.php 里早就用着，但一直没有对应样式，
 * 之前显示为紧贴标签的普通文字。补上后「必填」为红色描边、
 * 「推荐」为蓝色描边，视觉层级和标签本身区分开。
 * ------------------------------------------------------------------------- */
.account-required,
.account-recommend {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  border-radius: 3px;
  vertical-align: middle;
}
.account-required {
  color: #d03050;
  background: #fef0f0;
}
.account-recommend {
  color: #2d8cf0;
  background: #f2f7fe;
}