body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* 顶部对齐 */
    min-height: 100vh;
    margin: 0;
    background-color: #f8f8f8;
    /* 页面背景色 */
    padding-top: 50px;
    /* 留出顶部空间 */
}

.container {
    width: 90%;
    /* 容器宽度 */
    max-width: 400px;
    /* 最大宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 居中对齐子元素 */
}

/* 图片占位符通用样式 */
.avatar-placeholder,
.icon-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* 边框包含在尺寸内 */
}

/* 用户头像占位符 */
.avatar-placeholder {
    width: 120px;
    /* 根据图片估算尺寸 */
    height: 120px;
    /* 根据图片估算尺寸 */
    border-radius: 50%;
    /* 圆形 */
    background-color: #ccc;
    /* 示例背景色 */
    margin-bottom: 40px;
    /* 与下方表单的间距 */
    overflow: hidden;
    /* 确保背景色在圆内 */
}

    .avatar-placeholder img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

.form-section {
    width: 100%;
    margin-bottom: 30px;
    /* 与下方链接的间距 */
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    /* 输入组之间的间距 */
}

    .input-group .labels {
        font-size: 13px;
        color: #724991;
        width: 70px;
        /* 标签固定宽度 */
        flex-shrink: 0;
        /* 防止被压缩 */
    }

.input-wrapper {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    align-items: center;
    border-bottom: 1px solid #724991;
    /* 输入框下划线 */
    padding-bottom: 8px;
    /* 下划线与输入框的间距 */
}

.country-code {
    font-size: 16px;
    color: #333;
    margin-right: 10px;
    /* 区号与输入框的间距 */
}

.input-wrapper input {
    flex: 1;
    /* 输入框占据剩余空间 */
    border: none;
    /* 移除默认边框 */
    outline: none;
    /* 移除聚焦时的外轮廓 */
    font-size: 16px;
    color: #333;
    padding: 0;
    /* 移除默认内边距 */
    background: transparent;
    /* 透明背景，避免干扰下划线 */
}

/* 密码输入组的特殊处理 */
.password-wrapper {
    position: relative;
    /* 用于内部图标绝对定位 */
}

    .password-wrapper input {
        padding-right: 30px;
        /* 为图标留出空间 */
    }

/* 密码可见/隐藏图标占位符 */
.icon-placeholder.eye-icon {
    width: 20px;
    /* 图标尺寸 */
    height: 20px;
    /* 图标尺寸 */
    border-radius: 2px;
    /* 示例形状 */
    position: absolute;
    /* 绝对定位 */
    right: 0;
    /* 靠右 */
    top: 50%;
    /* 垂直居中 */
    transform: translateY(-50%);
    cursor: pointer;
    /* 模拟可点击 */
    border: none;
}

    .icon-placeholder.eye-icon img {
        width: 100%;
        height: 100%;
    }

/* 登录按钮 */
.login-button {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background-color: #724991;
    /* 深绿色 */
    color: #fff;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 30px;
    /* 与上方输入组的间距 */
    transition: background-color 0.3s ease;
}

    .login-button:hover {
        background-color: #724991;
        /* 鼠标悬停颜色变化 */
    }

/* 注册与忘记密码链接区域 */
.links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    /* 与登录按钮的间距 */
    font-size: 14px;
}

.link {
    color: #666;
    /* 链接颜色 */
    text-decoration: none;
    /* 移除下划线 */
    margin: 0 10px;
    /* 链接之间的水平间距 */
}

    .link.forgot-password {
        color: #999;
        /* 忘记密码颜色稍浅 */
    }

.separator {
    color: #ccc;
    /* 分隔符颜色 */
}

/* 用户协议和隐私协议区域 */
.agreement {
    position: fixed;
    bottom: 10px;
    width: 100vw;
    display: flex;
    align-items: flex-start;
    /* 顶部对齐，因为文本可能换行 */
    margin-top: 50px;
    /* 与上方内容的间距 */
    font-size: 13px;
    /* 文字较小 */
    color: #666;
    /* 文字颜色 */
    width: 100%;
    /* 占据全部宽度 */
}

/* 复选框/单选框占位符 */
.icon-placeholder.checkbox-placeholder {
    width: 18px;
    /* 尺寸 */
    height: 18px;
    /* 尺寸 */
    border-radius: 3px;
    /* 示例形状，可能是方框或圆形 */
    background-color: #fff;
    /* 白色背景 */
    flex-shrink: 0;
    /* 防止被压缩 */
    margin-right: 8px;
    /* 与文本的间距 */
    margin-top: 2px;
    /* 微调对齐 */
}

.agreement-text {
    flex: 1;
    /* 文本占据剩余空间 */
    line-height: 1.6;
    /* 行高 */
}

.agreement-link {
    color: #724991;
    /* 协议链接颜色与登录按钮接近 */
    text-decoration: none;
}

a {
    text-decoration: none;
    /* 去除下划线 */
    color: inherit;
    /* 使用继承的颜色，而不是默认的蓝色 */
    outline: none;
    /* 去除点击时的外部轮廓线 */
}

.code-button {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #724991;
    /* 深绿色 */
    color: #fff;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* 与上方输入组的间距 */
    transition: background-color 0.3s ease;
}

.pa200 {
    padding-right: 120px;
    width: 120px;
}