/* ============================================
     登录页主容器 - 整个页面的最外层容器
     ============================================ */
   .view-account[data-v-7de6931f] {
    display: flex;                    /* 使用flex布局 */
    flex-direction: column;           /* 垂直方向排列子元素 */
    align-items: center;              /* 水平居中 */
    justify-content: center;          /* 垂直居中 - 这是关键！让内容在页面中央 */
    height: 100vh;                    /* 高度占满整个视口 */
    overflow: hidden;                 /* 隐藏溢出内容 */
    background-color: #081822;        /* 背景色：深蓝黑色 */
    background-image: url(/assets/loginphoto.jpg);  /* 背景图片 */
    background-repeat: no-repeat;     /* 背景不重复 */
    background-position: center;      /* 背景居中 */
    background-size: cover;           /* 背景覆盖整个容器 */
    position: relative;                /* 相对定位，为子元素提供定位基准 */
    animation: backgroundFadeIn 0.8s ease-out;  /* 背景淡入动画 */
  }
  
  /* 背景淡入动画定义 */
  @keyframes backgroundFadeIn {
    from {
      opacity: 0;  /* 从透明开始 */
    }
    to {
      opacity: 1;  /* 到完全不透明 */
    }
  }
  
  /* ============================================
     遮罩层 - 在背景图上添加半透明遮罩
     ============================================ */
  .view-account[data-v-7de6931f]::before {
    content: '';                      /* 伪元素必须有content */
    position: absolute;               /* 绝对定位 */
    top: 0;                           /* 顶部对齐 */
    left: 0;                          /* 左侧对齐 */
    right: 0;                         /* 右侧对齐 */
    bottom: 0;                        /* 底部对齐 - 覆盖整个容器 */
    background-color: rgba(8, 24, 34, 0.75);  /* 半透明深色遮罩 */
    z-index: 0;                       /* 层级0，在背景图之上但在内容之下 */
  }

  /* ============================================
     中间白线动画 - 从中间向两边展开的效果
     ============================================ */
  .view-account[data-v-7de6931f]::after {
    content: '';                      /* 伪元素必须有content */
    position: absolute;               /* 绝对定位 */
    top: 50%;                         /* 垂直居中 */
    left: 50%;                        /* 水平居中 */
    width: 0;                         /* 初始宽度为0 */
    height: 2px;                      /* 高度2px */
    background-color: #fdfdfd;        /* 白色 */
    transform: translate(-50%, -50%); /* 居中定位 */
    z-index: 2;                       /* 层级2，在遮罩之上 */
    animation: lineExpand 0.6s ease-out 0.8s forwards;  /* 延迟0.8s后执行动画 */
    box-shadow: 0 0 10px rgba(253, 253, 253, 0.5);  /* 白色阴影 */
  }
  
  /* 白线展开动画 */
  @keyframes lineExpand {
    0% {
      width: 0;                       /* 开始时宽度为0 */
      opacity: 1;                     /* 完全不透明 */
    }
    100% {
      width: 100%;                    /* 结束时宽度100% */
      opacity: 0.3;                   /* 半透明 */
    }
  }
  
  /* ============================================
     登录页内容容器 - 包含标题和登录框的容器
     ============================================ */
  .view-account-container[data-v-7de6931f] {
    width: 100%;                      /* 宽度100% */
    padding: 0;                       /* 无内边距 */
    max-width: 650px;                 /* 最大宽度650px */
    min-width: 320px;                 /* 最小宽度320px */
    margin: 0 auto;                   /* 水平居中 */
    position: relative;               /* 相对定位 - 为图标提供定位基准 */
    z-index: 3;                     /* 层级3，在所有背景元素之上 */
    display: flex;                    /* flex布局 */
    flex-direction: column;           /* 垂直排列 */
    align-items: center;              /* 水平居中 */
    justify-content: center;          /* 垂直居中 - 确保内容在容器中央 */
    opacity: 0;                       /* 初始透明 */
    transform: scale(0.85) translateY(40px);  /* 初始状态：缩小并下移 */
    animation: loginBoxPop 0.7s ease-out 1.4s forwards;  /* 延迟1.4s后弹出 */
  }
  
  /* ============================================
     左侧图标区域 - 直接添加到view-account-container上
     使用::before伪元素实现gqq.png图标
     【调整图标位置】修改 left 和 top 来调整位置
     【调整图标大小】修改 width 和 height 来调整大小
     ============================================ */
  .view-account-container[data-v-7de6931f]::before {
    content: '';                      /* 伪元素必须有content，否则不显示！ */
    position: absolute;               /* 绝对定位 */
    left: -100px;                     /* 【调整水平位置】左侧偏移-200px - 改这里！负值向左，正值向右，例如：-180px/-220px */
    top: 50%;                         /* 【调整垂直位置】垂直居中 - 改这里！例如：40%（靠上）或 60%（靠下） */
    transform: translateY(-50%);       /* 【调整垂直位置】垂直居中调整 - 如果top不是50%，可以改为 translateY(-30%) 等 */
    width: 210px;                     /* 【调整图标宽度】宽度180px - 改这里！例如：150px/200px/220px */
    height: 500px;                    /* 【调整图标高度】高度400px - 改这里！例如：350px/450px/500px */
    background-color: transparent !important;  /* 透明背景 - 确保没有白色背景 */
    background-image: url(/assets/gqq.png);  /* 背景图片路径 - 必须正确！ */
    background-repeat: no-repeat;    /* 不重复 */
    background-position: center;      /* 【调整图标在容器内的位置】居中显示 - 可以改为 left/right/top/bottom */
    background-size: contain;         /* 【调整图标缩放方式】保持比例，完整显示 - 可以改为 cover（填充）或 100% 200px（固定尺寸） */
    z-index: 10;                       /* 层级10，确保在最上层 */
    display: block !important;        /* 强制显示 - 防止被其他样式覆盖 */
    pointer-events: none;             /* 不响应鼠标事件，避免阻挡表单 */
    opacity: 1 !important;           /* 强制不透明 - 防止被其他样式覆盖 */
    visibility: visible !important;   /* 强制可见 - 防止被其他样式隐藏 */
    mix-blend-mode: normal !important;  /* 正常混合模式 - 避免白色背景影响 */
  }
  
  /* 登录框弹出动画 */
  @keyframes loginBoxPop {
    0% {
      opacity: 0;                      /* 开始时透明 */
      transform: scale(0.85) translateY(40px);  /* 缩小并下移 */
    }
    100% {
      opacity: 1;                      /* 结束时完全不透明 */
      transform: scale(1) translateY(0);  /* 正常大小和位置 */
    }
  }
  
  /* ============================================
     登录页顶部区域 - 标题"鲨鱼机器"
     【调整位置】修改 padding 和 margin 来调整上下位置
     ============================================ */
  .view-account-top[data-v-7de6931f] {
    width: 100%;                      /* 宽度100% */
    padding: 0 0 30px 0;             /* 【调整上下位置】底部内边距30px - 增大这个值标题会离登录框更远 */
    text-align: center;              /* 文字居中 */
    opacity: 0;                      /* 初始透明 */
    animation: fadeInUp 0.5s ease-out 1.6s forwards;  /* 延迟1.6s后淡入 */
    margin-bottom: 0;                /* 【调整上下位置】无下边距 - 可以改为 margin-bottom: 20px; 来增加间距 */
    margin-top: 0;                    /* 【调整上下位置】无上边距 - 可以改为 margin-top: 20px; 来增加间距 */
    order: -1;                       /* flex顺序-1，确保在最前面 */
  }
  
  /* 淡入上移动画 */
  @keyframes fadeInUp {
    from {
      opacity: 0;                     /* 从透明开始 */
      transform: translateY(15px);    /* 从下方15px位置开始 */
    }
    to {
      opacity: 1;                      /* 到完全不透明 */
      transform: translateY(0);        /* 到正常位置 */
    }
  }
  
  /* ============================================
     标题文字样式 - "鲨鱼机器" - 粒子特效字体
     【调整字体大小】修改第195行的 font-size 值！
     【调整位置】修改 margin 来微调位置
     ============================================ */
  /* 通用选择器 - 覆盖所有可能的标题元素 */
  .view-account-top[data-v-7de6931f] h1,
  .view-account-top[data-v-7de6931f] h2,
  .view-account-top[data-v-7de6931f] h3,
  .view-account-top[data-v-7de6931f] .title,
  .view-account-top[data-v-7de6931f] span,
  .view-account-top[data-v-7de6931f] div,
  .view-account-top[data-v-7de6931f] > * {
    color: #4e9fb4 !important;         /* 【调整标题颜色】青蓝色 - 可以改为 #6bb3c7（更亮）或 #244046（更深） */
    font-weight: 600 !important;        /* 【调整字体粗细】字体粗细600 - 可以改为 400/500/700/800 等 */
    letter-spacing: 3px !important;     /* 【调整字间距】字间距3px - 可以改为 2px/4px 等 */
    font-size: 42px !important;        /* 【调整字体大小】改这里！当前42px - 可以改为 36px/40px/48px/52px 等 */
    margin: 0 !important;           /* 【调整位置】无外边距 - 可以改为 margin: 10px 0 !important; 来增加上下间距 */
    padding: 0 !important;             /* 【调整位置】无内边距 - 可以改为 padding: 10px 0 !important; 来增加上下间距 */
    line-height: 1.2 !important;       /* 【调整行高】行高1.2 - 可以改为 1.5/1.8 等 */
    font-family: 'Consolas', 'Monaco', 'Courier New', 'Microsoft YaHei', monospace !important;  /* 【调整字体】等宽字体 - 科技感，可以改为 'Arial'/'Helvetica' 等 */
    position: relative !important;     /* 相对定位，为粒子效果提供基准 */
    text-shadow: none !important;      /* 去除文字阴影，让文字清晰 */
    filter: none !important;            /* 去除滤镜，让文字清晰 */
  }

  /* 粒子效果 - 使用伪元素在文字周围添加粒子点（已改为全屏粒子，这里可以移除或保留作为额外装饰） */
  .view-account-top[data-v-7de6931f] h1::before,
  .view-account-top[data-v-7de6931f] h2::before,
  .view-account-top[data-v-7de6931f] h3::before,
  .view-account-top[data-v-7de6931f] .title::before,
  .view-account-top[data-v-7de6931f] span::before,
  .view-account-top[data-v-7de6931f] div::before,
  .view-account-top[data-v-7de6931f] > *::before {
    display: none;                     /* 隐藏标题周围的粒子，使用全屏粒子效果 */
  }

  /* 粒子移动动画 - 让粒子轻微移动 */
  @keyframes particleMove {
    0%, 100% {
      transform: translate(0, 0);      /* 初始位置 */
      opacity: 0.7;                    /* 70%不透明 */
    }
    25% {
      transform: translate(2px, -3px); /* 轻微移动 */
      opacity: 0.8;                    /* 稍微亮一点 */
    }
    50% {
      transform: translate(-2px, 2px); /* 反向移动 */
      opacity: 0.6;                    /* 稍微暗一点 */
    }
    75% {
      transform: translate(1px, 1px);  /* 轻微移动 */
      opacity: 0.75;                   /* 中等亮度 */
    }
  }
  
  /* 去除标题区域内的logo图片 */
  .view-account-top[data-v-7de6931f] img,
  .view-account-top[data-v-7de6931f] .logo,
  .view-account-top[data-v-7de6931f] .logo-img {
    display: none !important;
  }
  
  
  /* 登录页描述文字 */
  .view-account-top-desc[data-v-7de6931f] {
    font-size: 13px;                  /* 字体大小13px */
    color: #4e9fb4;                   /* 青蓝色 */
    letter-spacing: 0.5px;            /* 字间距0.5px */
    margin-top: 8px;                  /* 上边距8px */
    opacity: 0.9;                     /* 90%不透明 */
  }
  
  /* ============================================
     登录框背景容器 - 包含左侧图标和右侧表单
     注意：如果这个类不存在，图标会显示在view-account-container上
     ============================================ */
  .page-account-container[data-v-7de6931f] {
    width: 100%;                      /* 宽度100% */
    position: relative;               /* 相对定位，为图标提供定位基准 */
    display: flex;                    /* flex布局 */
    flex-direction: row;               /* 水平排列 - 图标在左，表单在右 */
    align-items: stretch;              /* 子元素拉伸到相同高度 */
    min-height: auto;                 /* 最小高度自适应内容 */
    background-color: rgba(8, 24, 34, 0.88);  /* 半透明深色背景 */
    border: 1px solid rgba(78, 159, 180, 0.25);  /* 青蓝色边框 */
    border-radius: 6px;               /* 圆角6px */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);  /* 阴影效果 */
    backdrop-filter: blur(2px);       /* 背景模糊2px */
    overflow: visible;                /* 显示溢出 - 让图标可见 */
    margin-left: 200px;               /* 左边距200px - 为左侧图标留出空间 */
  }
  
  /* ============================================
     如果page-account-container存在，也在它上面添加图标
     ============================================ */
  .page-account-container[data-v-7de6931f]::before {
    content: '';                      /* 伪元素必须有content，否则不显示！ */
    position: absolute;               /* 绝对定位 */
    left: 0;                          /* 左侧对齐 */
    top: 0;                           /* 顶部对齐 */
    bottom: 0;                        /* 底部对齐 - 与容器等高 */
    width: 180px;                     /* 宽度180px */
    height: 100%;                     /* 高度100% - 与容器等高 */
    background-color: transparent !important;  /* 透明背景 - 确保没有白色背景 */
    background-image: url(/assets/gqq.png);  /* 背景图片路径 */
    background-repeat: no-repeat;    /* 不重复 */
    background-position: center;      /* 居中显示 */
    background-size: contain;         /* 保持比例，完整显示 */
    z-index: 1;                       /* 层级1，在背景之上但在输入框之下 */
    display: block !important;        /* 强制显示 - 防止被其他样式覆盖 */
    pointer-events: none;             /* 不响应鼠标事件，避免阻挡表单 */
    opacity: 1 !important;           /* 强制不透明 - 防止被其他样式覆盖 */
    visibility: visible !important;   /* 强制可见 - 防止被其他样式隐藏 */
    mix-blend-mode: normal !important;  /* 正常混合模式 - 避免白色背景影响 */
  }
  
  /* ============================================
     右侧表单内容区域 - 输入框和按钮在这里
     ============================================ */
  .page-account-container[data-v-7de6931f] > *,
  .view-account-container[data-v-7de6931f] > div:last-child > * {
    flex: 1;                          /* 占据剩余空间 */
    padding: 40px 40px;               /* 内边距40px */
    display: flex;                    /* flex布局 */
    flex-direction: column;           /* 垂直排列 */
    justify-content: center;          /* 垂直居中 */
    position: relative;              /* 相对定位 */
    z-index: 5 !important;            /* 层级5，确保在图标之上，避免图标白色背景影响 */
    background-color: transparent !important;  /* 透明背景，确保没有白色背景 */
  }
  
  /* 登录页其他部分 */
  .view-account-other[data-v-7de6931f] {
    width: 100%;                      /* 宽度100% */
    opacity: 0;                       /* 初始透明 */
    animation: fadeInUp 0.5s ease-out 1.8s forwards;  /* 延迟1.8s后淡入 */
  }
  
  /* 默认颜色样式 */
  .view-account .default-color[data-v-7de6931f],
  .view-account .default-color .ant-checkbox-wrapper[data-v-7de6931f] {
    color: #4e9fb4;                   /* 青蓝色 */
  }
  
  /* ============================================
     表单输入框样式 - 全新重写，深色主题，无白边
     支持 Ant Design 和 Naive UI
     ============================================ */
  
  /* Legacy Naive UI 输入框底色已禁用，避免深蓝容器与新 UI 冲突 */
  .view-account[data-v-7de6931f] .n-input,
  .view-account[data-v-7de6931f] .n-input-wrapper,
  .view-account[data-v-7de6931f] .n-form-item-blank {
    --n-color: transparent !important;
    --n-color-focus: transparent !important;
    --n-color-disabled: transparent !important;
    --n-border: none !important;
    --n-border-hover: none !important;
    --n-border-focus: none !important;
    --n-border-disabled: none !important;
    --n-border-error: none !important;
    --n-border-focus-error: none !important;
    --n-border-hover-error: none !important;
    --n-border-warning: none !important;
    --n-border-focus-warning: none !important;
    --n-border-hover-warning: none !important;
    --n-box-shadow-focus: none !important;
    --n-box-shadow-focus-error: none !important;
    --n-box-shadow-focus-warning: none !important;
    --n-text-color: inherit !important;
    --n-text-color-disabled: inherit !important;
    --n-placeholder-color: inherit !important;
    --n-placeholder-color-disabled: inherit !important;
    --n-caret-color: inherit !important;
    --n-caret-color-error: inherit !important;
    --n-caret-color-warning: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .n-input__border,
  .view-account[data-v-7de6931f] .n-input__state-border {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .n-input--focus,
  .view-account[data-v-7de6931f] .n-input:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .view-account[data-v-7de6931f] .n-input__input,
  .view-account[data-v-7de6931f] .n-input__input-el {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .n-input__placeholder,
  .view-account[data-v-7de6931f] .n-input__placeholder span,
  .view-account[data-v-7de6931f] .n-input__prefix,
  .view-account[data-v-7de6931f] .n-input__suffix {
    color: inherit !important;
  }
  
  /* Naive UI 表单项 */
  .view-account[data-v-7de6931f] .n-form-item-blank {
    background: transparent !important;
    border: none !important;
  }
  
  /* 表单项标签样式 */
  .view-account[data-v-7de6931f] .ant-form-item-label > label,
  .view-account[data-v-7de6931f] .n-form-item-label {
    color: #4e9fb4 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  
  /* 表单项容器 */
  .view-account[data-v-7de6931f] .ant-form-item {
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate !important;
    background: transparent !important;
  }
  
  /* 表单项控制容器 - 确保所有容器都没有白边和白色背景 */
  .view-account[data-v-7de6931f] .ant-form-item-control,
  .view-account[data-v-7de6931f] .ant-form-item-control-input,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content > *,
  .view-account[data-v-7de6931f] .ant-input-group,
  .view-account[data-v-7de6931f] .ant-input-group-wrapper {
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* Legacy 通用 input 深蓝底与固定 42px 高度已禁用 */
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper,
  .view-account[data-v-7de6931f] .ant-input-password,
  .view-account[data-v-7de6931f] .ant-input-group .ant-input-affix-wrapper,
  .view-account[data-v-7de6931f] .ant-input-group-wrapper .ant-input-affix-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: inherit !important;
    padding: 0 !important;
    height: auto !important;
    line-height: inherit !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper > *,
  .view-account[data-v-7de6931f] .ant-input-password > * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper .ant-input,
  .view-account[data-v-7de6931f] .ant-input-password .ant-input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    line-height: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .ant-input:not(.ant-input-affix-wrapper .ant-input):not(.ant-input-password .ant-input),
  .view-account[data-v-7de6931f] input[type="text"],
  .view-account[data-v-7de6931f] input[type="password"],
  .view-account[data-v-7de6931f] input[type="email"],
  .view-account[data-v-7de6931f] input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper-focused,
  .view-account[data-v-7de6931f] .ant-input-password:focus,
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper:focus-within,
  .view-account[data-v-7de6931f] .ant-input:focus,
  .view-account[data-v-7de6931f] input:focus,
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper:hover,
  .view-account[data-v-7de6931f] .ant-input-password:hover,
  .view-account[data-v-7de6931f] .ant-input:hover,
  .view-account[data-v-7de6931f] input:hover {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .view-account[data-v-7de6931f] .ant-input::placeholder,
  .view-account[data-v-7de6931f] input::placeholder,
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper .ant-input-prefix,
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper .ant-input-suffix,
  .view-account[data-v-7de6931f] .ant-input-password-icon {
    color: inherit !important;
  }
  
  /* 通用容器样式 - 确保所有可能的容器都没有白边 */
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content .ant-input-affix-wrapper,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content .ant-input-password,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content .ant-input,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content input,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content > div,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content > span {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 确保所有输入框相关的伪元素也没有边框 */
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper::before,
  .view-account[data-v-7de6931f] .ant-input-affix-wrapper::after,
  .view-account[data-v-7de6931f] .ant-input-password::before,
  .view-account[data-v-7de6931f] .ant-input-password::after,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content::before,
  .view-account[data-v-7de6931f] .ant-form-item-control-input-content::after {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* ============================================
     按钮样式
     ============================================ */
  .view-account[data-v-7de6931f] .ant-btn-primary,
  .view-account[data-v-7de6931f] button[type="submit"],
  .view-account[data-v-7de6931f] .login-button {
    background-color: #620a16;       /* 深红色背景 */
    border-color: #620a16;           /* 深红色边框 */
    color: #fdfdfd;                   /* 白色文字 */
    border-radius: 4px;               /* 圆角4px */
    padding: 12px 32px;              /* 内边距 */
    font-size: 15px;                  /* 字体大小15px */
    font-weight: 500;                 /* 字体粗细500 */
    letter-spacing: 0.8px;           /* 字间距0.8px */
    height: 44px;                     /* 高度44px */
    transition: all 0.25s ease;       /* 过渡动画 */
    position: relative;              /* 相对定位 */
    overflow: hidden;                 /* 隐藏溢出 */
    width: 100%;                      /* 宽度100% */
    margin-top: 8px;                  /* 上边距8px */
  }
  
  /* 按钮涟漪效果 */
  .view-account[data-v-7de6931f] .ant-btn-primary::before,
  .view-account[data-v-7de6931f] button[type="submit"]::before,
  .view-account[data-v-7de6931f] .login-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(253, 253, 253, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
  }
  
  /* 按钮悬停时涟漪效果 */
  .view-account[data-v-7de6931f] .ant-btn-primary:hover::before,
  .view-account[data-v-7de6931f] button[type="submit"]:hover::before,
  .view-account[data-v-7de6931f] .login-button:hover::before {
    width: 400px;
    height: 400px;
  }
  
  /* 按钮悬停状态 */
  .view-account[data-v-7de6931f] .ant-btn-primary:hover,
  .view-account[data-v-7de6931f] button[type="submit"]:hover,
  .view-account[data-v-7de6931f] .login-button:hover {
    background-color: #7a0d1c;       /* 悬停时更亮的红色 */
    border-color: #7a0d1c;
    transform: translateY(-2px);     /* 上移2px */
    box-shadow: 0 6px 16px rgba(98, 10, 22, 0.45);  /* 阴影 */
  }
  
  /* 按钮按下状态 */
  .view-account[data-v-7de6931f] .ant-btn-primary:active,
  .view-account[data-v-7de6931f] button[type="submit"]:active,
  .view-account[data-v-7de6931f] .login-button:active {
    background-color: #4d080f;       /* 按下时更深的红色 */
    border-color: #4d080f;
    transform: translateY(0);        /* 回到原位置 */
  }
  
  /* ============================================
     表单容器样式
     ============================================ */
  /* 表单项动画效果 */
  .view-account[data-v-7de6931f] .ant-form-item {
    opacity: 0 !important;
    animation: fadeInUp 0.4s ease-out forwards !important;
  }
  
  /* 表单项依次出现 */
  .view-account[data-v-7de6931f] .ant-form-item:nth-child(1) {
    animation-delay: 2s;              /* 第一个延迟2s */
  }
  
  .view-account[data-v-7de6931f] .ant-form-item:nth-child(2) {
    animation-delay: 2.1s;            /* 第二个延迟2.1s */
  }
  
  .view-account[data-v-7de6931f] .ant-form-item:nth-child(3) {
    animation-delay: 2.2s;            /* 第三个延迟2.2s */
  }
  
  /* 去除可能的竖块装饰元素 - 注意：这里只针对view-account-top，不影响page-account-container */
  .view-account[data-v-7de6931f] .ant-form-item::before,
  .view-account[data-v-7de6931f] .ant-form-item::after {
    display: none !important;
  }
  
  /* 复选框样式 */
  .view-account[data-v-7de6931f] .ant-checkbox-wrapper {
    color: #4e9fb4;                   /* 青蓝色 */
  }
  
  .view-account[data-v-7de6931f] .ant-checkbox-inner {
    background-color: rgba(36, 64, 70, 0.6);  /* 半透明背景 */
    border-color: #244046;            /* 深青色边框 */
    transition: all 0.2s ease;        /* 过渡动画 */
  }
  
  .view-account[data-v-7de6931f] .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #620a16;       /* 选中时深红色 */
    border-color: #620a16;
  }
  
  /* 链接样式 */
  .view-account[data-v-7de6931f] a {
    color: #4e9fb4;                   /* 青蓝色链接 */
    transition: color 0.2s ease;      /* 颜色过渡 */
    text-decoration: none;            /* 无下划线 */
  }
  
  .view-account[data-v-7de6931f] a:hover {
    color: #6bb3c7;                   /* 悬停时更亮的蓝色 */
  }
  
  /* ============================================
     响应式样式 - 桌面端（宽度 >= 768px）
     ============================================ */
  @media (min-width: 768px) {
    .view-account-container[data-v-7de6931f] {
      max-width: 650px;                /* 最大宽度650px */
      padding: 0 20px;                  /* 左右内边距20px */
    }
  
    .page-account-container[data-v-7de6931f]::before {
      width: 180px;                    /* 图标宽度180px */
      height: 100%;                    /* 图标高度100% */
    }
  
    .page-account-container[data-v-7de6931f] > * {
      padding-left: 220px;             /* 左内边距220px - 为图标留空间 */
      padding-right: 40px;             /* 右内边距40px */
      padding-top: 40px;               /* 上内边距40px */
      padding-bottom: 40px;            /* 下内边距40px */
    }
  }
  
  /* ============================================
     响应式样式 - 移动端（宽度 < 768px）
     ============================================ */
  @media (max-width: 767px) {
    .view-account[data-v-7de6931f] {
      background-position: center;     /* 背景居中 */
    }
    
    .view-account-container[data-v-7de6931f] {
      max-width: 100%;                 /* 最大宽度100% */
      padding: 40px 16px 30px;         /* 内边距 */
    }
  
    .page-account-container[data-v-7de6931f] {
      flex-direction: column;          /* 垂直排列 - 图标在上，表单在下 */
    }
  
    .page-account-container[data-v-7de6931f]::before {
      position: relative;               /* 相对定位 */
      width: 100%;                     /* 宽度100% */
      height: 150px;                   /* 高度150px */
      background-size: contain;        /* 保持比例 */
    }
  
    .page-account-container[data-v-7de6931f] > * {
      margin-left: 0;                  /* 无左边距 */
      padding: 30px 24px;               /* 内边距 */
    }
  
    .view-account-top[data-v-7de6931f] {
      padding: 0 0 20px 0;             /* 下内边距20px */
    }
  
    .view-account-top[data-v-7de6931f] h1,
    .view-account-top[data-v-7de6931f] h2,
    .view-account-top[data-v-7de6931f] h3,
    .view-account-top[data-v-7de6931f] .title,
    .view-account-top[data-v-7de6931f] span,
    .view-account-top[data-v-7de6931f] div,
    .view-account-top[data-v-7de6931f] > * {
      font-size: 28px !important;      /* 【移动端字体大小】移动端字体28px - 改这里！ */
    }
  }

/* ===== 中国龙网页安卓远控 登录页：提亮视频背景 + 重写输入框与卡片 UI ===== */
.view-account[data-v-7de6931f] {
  background-image: none !important;
  background-color: #040608 !important;
  justify-content: center !important;
  padding: 32px 16px !important;
  isolation: isolate;
}

.view-account[data-v-7de6931f] .login-video-bg {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.98) contrast(1.08) saturate(1.02);
  transform: scale(1.03);
}

.view-account[data-v-7de6931f]::before {
  z-index: 1 !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(115deg, rgba(6, 9, 13, 0.08), rgba(6, 9, 13, 0.03) 38%, rgba(6, 9, 13, 0.2)) !important;
  backdrop-filter: none;
}

.view-account[data-v-7de6931f]::after {
  content: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
}

.view-account-container[data-v-7de6931f] {
  max-width: 560px;
  padding: 0 24px;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.view-account-container[data-v-7de6931f]::before,
.page-account-container[data-v-7de6931f]::before,
.view-account-top-logo[data-v-7de6931f] {
  display: none !important;
}

.view-account-top[data-v-7de6931f] {
  width: 100%;
  padding: 0 0 18px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  opacity: 1 !important;
  animation: none !important;
}

.view-account-top-desc[data-v-7de6931f] {
  width: 100%;
  margin: 0 auto !important;
  font-size: 38px !important;
  line-height: 1.05 !important;
  letter-spacing: 4px !important;
  color: #f5f1e8 !important;
  opacity: 1 !important;
  text-align: center !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-family: "STKaiti", "KaiTi", "Songti SC", "Microsoft YaHei", serif !important;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

.page-account-container[data-v-7de6931f] {
  margin-left: 0 !important;
  background: linear-gradient(180deg, rgba(12, 17, 24, 0.78), rgba(19, 24, 31, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) saturate(115%);
  overflow: hidden !important;
}

.page-account-container[data-v-7de6931f]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 24%, transparent 74%, rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.page-account-container[data-v-7de6931f] > *,
.view-account-container[data-v-7de6931f] > div:last-child > * {
  padding: 38px 38px 34px !important;
  position: relative;
  z-index: 2;
}

.view-account-form[data-v-7de6931f] {
  width: 100%;
}

.view-account[data-v-7de6931f] .n-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.view-account[data-v-7de6931f] .n-form-item {
  margin-bottom: 0 !important;
}

.view-account[data-v-7de6931f] .default-color[data-v-7de6931f],
.view-account[data-v-7de6931f] .default-color .ant-checkbox-wrapper[data-v-7de6931f],
.view-account[data-v-7de6931f] .n-form-item-label,
.view-account[data-v-7de6931f] .ant-form-item-label > label,
.view-account[data-v-7de6931f] .n-checkbox__label {
  color: rgba(245, 241, 232, 0.82) !important;
}

.view-account[data-v-7de6931f] .n-form-item-blank,
.view-account[data-v-7de6931f] .n-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.view-account[data-v-7de6931f] .n-input {
  min-height: 56px;
  border-radius: 18px !important;
  overflow: hidden;
  --n-color: transparent !important;
  --n-color-focus: transparent !important;
  --n-border: 1px solid transparent !important;
  --n-border-hover: 1px solid transparent !important;
  --n-border-focus: 1px solid transparent !important;
  --n-box-shadow-focus: none !important;
  --n-caret-color: #f7f3ec !important;
  --n-placeholder-color: rgba(247, 243, 236, 0.5) !important;
}

.view-account[data-v-7de6931f] .n-input-wrapper {
  min-height: 56px;
  padding: 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) padding-box,
    linear-gradient(135deg, rgba(172, 180, 193, 0.74), rgba(90, 101, 118, 0.52)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.view-account[data-v-7de6931f] .n-input__border,
.view-account[data-v-7de6931f] .n-input__state-border {
  display: none !important;
}

.view-account[data-v-7de6931f] .n-input__input {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

.view-account[data-v-7de6931f] .n-input__input-el {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  background: transparent !important;
  color: #f7f3ec !important;
  font-size: 15px !important;
  -webkit-text-fill-color: #f7f3ec !important;
  box-sizing: border-box !important;
}

.view-account[data-v-7de6931f] .n-input__placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

.view-account[data-v-7de6931f] .n-input__placeholder,
.view-account[data-v-7de6931f] .n-input__placeholder span,
.view-account[data-v-7de6931f] .ant-input::placeholder {
  color: rgba(247, 243, 236, 0.5) !important;
}

.view-account[data-v-7de6931f] .n-input__input-el::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.view-account[data-v-7de6931f] .n-input__input-el:-webkit-autofill,
.view-account[data-v-7de6931f] .n-input__input-el:-webkit-autofill:hover,
.view-account[data-v-7de6931f] .n-input__input-el:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f3ec !important;
  caret-color: #f7f3ec !important;
  box-shadow: 0 0 0 1000px rgba(12, 14, 18, 0.01) inset !important;
  transition: background-color 99999s ease-in-out 0s;
}

.view-account[data-v-7de6931f] .n-input__prefix,
.view-account[data-v-7de6931f] .n-input__suffix,
.view-account[data-v-7de6931f] .n-input__eye,
.view-account[data-v-7de6931f] .ant-input-affix-wrapper .ant-input-prefix,
.view-account[data-v-7de6931f] .ant-input-affix-wrapper .ant-input-suffix,
.view-account[data-v-7de6931f] .ant-input-password-icon {
  color: rgba(247, 243, 236, 0.7) !important;
}

.view-account[data-v-7de6931f] .n-input:focus-within .n-input-wrapper,
.view-account[data-v-7de6931f] .n-input--focus .n-input-wrapper {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) padding-box,
    linear-gradient(135deg, rgba(214, 221, 231, 0.92), rgba(126, 138, 156, 0.74)) border-box !important;
  box-shadow: 0 0 0 4px rgba(122, 136, 158, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 30px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px);
}

.view-account[data-v-7de6931f] .flex.justify-between {
  align-items: center;
  min-height: 22px;
}

.view-account[data-v-7de6931f] .n-checkbox {
  --n-border: 1px solid rgba(255, 255, 255, 0.18) !important;
  --n-border-checked: 1px solid rgba(255, 255, 255, 0.28) !important;
  --n-color: rgba(255, 255, 255, 0.08) !important;
  --n-color-checked: rgba(255, 255, 255, 0.18) !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
  --n-check-mark-color: #ffffff !important;
}

.view-account[data-v-7de6931f] .n-checkbox-box {
  border-radius: 6px !important;
  backdrop-filter: blur(4px);
}

.view-account[data-v-7de6931f] .n-button,
.view-account[data-v-7de6931f] .n-button--primary-type {
  width: 100%;
  min-height: 54px;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(135deg, rgba(232, 236, 242, 0.16), rgba(104, 116, 132, 0.22) 55%, rgba(24, 29, 38, 0.9)) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(6px);
}

.view-account[data-v-7de6931f] .n-button .n-button__content,
.view-account[data-v-7de6931f] .n-button--primary-type .n-button__content {
  color: #f8f4eb !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 6px !important;
}

.view-account[data-v-7de6931f] .n-button .n-button__border,
.view-account[data-v-7de6931f] .n-button .n-button__state-border {
  display: none !important;
}

.view-account[data-v-7de6931f] .n-button:hover,
.view-account[data-v-7de6931f] .n-button--primary-type:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(240, 243, 247, 0.22), rgba(120, 131, 147, 0.28) 55%, rgba(27, 32, 42, 0.94)) !important;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.view-account[data-v-7de6931f] .n-button:active,
.view-account[data-v-7de6931f] .n-button--primary-type:active {
  transform: translateY(0) scale(0.99);
}

@media (max-width: 767px) {
  .view-account[data-v-7de6931f] {
    padding: 20px 12px !important;
  }

  .view-account-container[data-v-7de6931f] {
    padding: 0 8px !important;
  }

  .page-account-container[data-v-7de6931f] > *,
  .view-account-container[data-v-7de6931f] > div:last-child > * {
    padding: 28px 22px 24px !important;
  }

  .view-account-top-desc[data-v-7de6931f] {
    font-size: 30px !important;
    letter-spacing: 3px !important;
  }
}